/* ==========================================================
   English Mode: ON — botón compartido de todo el sitio (27 oct 2026)
   Estado: html.lang-en · localStorage "tye-lang" (es/en) · ?lang=en
   ========================================================== */
.en-pending body{visibility:hidden}
.modeswitch{display:block;width:100%;max-width:480px;text-align:left;cursor:pointer;
  background:transparent;border:2px solid rgba(255,255,255,.26);
  padding:16px 20px 18px;margin:0 0 38px;
  transition:border-color .25s,background .3s,box-shadow .45s}
.modeswitch:hover{border-color:rgba(255,255,255,.6)}
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 0}
.ms-main{font-family:var(--display);font-size:clamp(21px,2.7vw,28px);font-weight:400;
  color:#fff;letter-spacing:.06em;line-height:1}
.ms-chip{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.22);
  padding:7px 18px;flex:none;line-height:1;
  transition:color .3s,background .3s,border-color .3s,box-shadow .4s}
.modeswitch[aria-pressed="true"]{border-color:var(--lime);background:rgba(205,233,128,.09);
  box-shadow:0 0 38px rgba(205,233,128,.3)}
.modeswitch[aria-pressed="true"] .ms-chip{background:var(--lime);border-color:var(--lime);
  color:var(--ink);box-shadow:0 0 20px rgba(205,233,128,.75)}
.modeswitch[aria-pressed="true"] .ms-top{color:rgba(205,233,128,.85)}
.modeswitch:active .ms-chip{transform:translateY(1px)}
.ms-hint{font-family:var(--display);font-size:15.5px;color:var(--lime);
  margin:0 0 38px;opacity:.85;transition:opacity .4s,margin .4s}
.ms-hint::before{content:"↑ ";opacity:.7}
.ms-hint.gone{opacity:0;margin-bottom:20px}
@media (prefers-reduced-motion:no-preference){
  .modeswitch:not(.touched) .ms-chip{animation:hintpulse 2.6s ease-in-out .8s infinite}
  .modeswitch:not(.touched):hover .ms-chip{animation:none}
  @keyframes hintpulse{
    0%,100%{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.3);
            box-shadow:0 0 0 rgba(205,233,128,0)}
    50%{border-color:rgba(205,233,128,.85);color:rgba(205,233,128,.9);
        box-shadow:0 0 16px rgba(205,233,128,.35)}}
  .ms-hint{animation:hintfade 2.6s ease-in-out .8s infinite}
  @keyframes hintfade{0%,100%{opacity:.5}50%{opacity:1}}
  .ms-hint.gone{animation:none}
}
.ms-top{font-family:var(--display);font-size:16px;letter-spacing:.1em;
  color:rgba(255,255,255,.78)}
.ms-main{font-family:var(--display);font-size:clamp(19px,2.5vw,25px);font-weight:500;
  color:#fff;letter-spacing:.02em}
.ms-on{color:rgba(255,255,255,.26);transition:color .35s,text-shadow .35s}
.modeswitch[aria-pressed="true"]{border-color:var(--lime);
  background:rgba(205,233,128,.12);
  box-shadow:0 0 34px rgba(205,233,128,.42),inset 0 0 24px rgba(205,233,128,.1)}
.modeswitch[aria-pressed="true"] .ms-on{color:var(--lime);
  text-shadow:0 0 16px rgba(205,233,128,.9)}
.modeswitch[aria-pressed="true"] .ms-top{color:rgba(205,233,128,.85)}
@media (prefers-reduced-motion:no-preference){
  .switching{animation:flick .45s ease}
  @keyframes flick{0%{opacity:1}30%{opacity:.35}100%{opacity:1}}
}
.stickymode{position:fixed;top:16px;right:20px;z-index:90;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  background:rgba(16,30,142,.92);border:2px solid rgba(255,255,255,.3);
  padding:9px 14px;opacity:0;pointer-events:none;transform:translateY(-12px);
  transition:opacity .3s,transform .3s,border-color .25s,box-shadow .4s;
  backdrop-filter:blur(6px)}
.stickymode.show{opacity:1;pointer-events:auto;transform:none}
.sm-t{font-family:var(--display);font-size:13px;letter-spacing:.1em;color:#fff}
.sm-chip{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;
  color:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.22);padding:4px 10px;
  line-height:1;transition:color .3s,background .3s,border-color .3s}
.stickymode[aria-pressed="true"]{border-color:var(--lime);box-shadow:0 0 24px rgba(205,233,128,.35)}
.stickymode[aria-pressed="true"] .sm-chip{background:var(--lime);border-color:var(--lime);color:var(--ink)}
@media (max-width:600px){.stickymode{top:10px;right:10px;gap:9px;padding:7px 8px 7px 11px}
  .sm-t{font-size:11px;letter-spacing:.09em}.sm-chip{font-size:11px;padding:4px 8px}}
.modeswitch{margin-bottom:30px}

/* home: un solo interruptor, English Mode (30 oct 2026)
   apagado en español · encendido en inglés */
.hero-fig.modes{align-self:center;justify-self:end;margin:0;display:flex;flex-direction:column;gap:22px;line-height:1.2;max-width:300px}
button.sw{background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;text-align:left;font:inherit;
  display:flex;flex-direction:column;gap:14px}
button.sw:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.modes .sw .track,.modes .sw .track i,.modes .sw .track b,.modes .sw .lab{animation:none !important;
  transition:background .45s,border-color .45s,left .45s,color .35s}
.modes .sw .track i,.modes .sw .track b{right:auto}
/* apagado */
.modes .sw .lab{color:#fff}
.modes .sw .track{background:transparent;border-color:rgba(255,255,255,.4)}
.modes .sw .track i{left:12px;background:rgba(255,255,255,.4)}
.modes .sw .track b{left:150px;color:rgba(255,255,255,.62)}
.modes .sw .t-on{display:none}
.modes .sw:hover .track{border-color:#fff}
.modes .sw:hover .track i{background:rgba(255,255,255,.6)}
/* encendido */
html.lang-en .modes .sw .lab{color:var(--lime)}
html.lang-en .modes .sw .track{background:var(--lime);border-color:var(--lime)}
html.lang-en .modes .sw .track i{left:176px;background:var(--ink)}
html.lang-en .modes .sw .track b{left:24px;color:var(--ink)}
html.lang-en .modes .sw .t-on{display:inline}
html.lang-en .modes .sw .t-off{display:none}
.modes-why{font-family:var(--display);font-weight:300;font-size:16px;line-height:1.45;color:var(--sky);margin:0;
  padding-left:14px;border-left:3px solid var(--lime)}
@media (prefers-reduced-motion:no-preference){
  html:not(.lang-en) .modes .sw:not(.touched) .track{animation:hintpulse2 2.6s ease-in-out 1s infinite !important}
  @keyframes hintpulse2{0%,100%{border-color:rgba(255,255,255,.4)}50%{border-color:var(--lime)}}
}
@media (max-width:860px){
  .hero-fig.modes{justify-self:stretch;max-width:none;margin:44px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.16);gap:16px}
  button.sw{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
  .modes .sw .lab{font-size:13px}
  .modes .sw .track i{left:7px}
  .modes .sw .track b{left:82px}
  html.lang-en .modes .sw .track i{left:101px}
  html.lang-en .modes .sw .track b{left:16px}
  .modes-why{font-size:15px}
}

/* bloques duplicados: <span data-l="es">…</span><span data-l="en">…</span> */
html:not(.lang-en) [data-l="en"]{display:none !important}
html.lang-en [data-l="es"]{display:none !important}
/* títulos en inglés: cada frase en una sola línea en escritorio, como en español */
.hero h1[data-l="en"]{font-size:clamp(34px,3.9vw,50px);text-wrap:balance}
html.lang-en .home-split{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
.home-split h1[data-l="en"]{font-size:clamp(34px,4.4vw,56px)}
html.lang-en .hero h1.fit-en{font-size:clamp(34px,4.6vw,58px);text-wrap:balance}
@media (max-width:860px){html.lang-en .home-split{grid-template-columns:1fr}}
/* los spans de idioma no heredan estilos pensados para otros spans */
.hero-meta b span,.hero-meta span span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.fam-head h3 span,.fam-head span span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
html.lang-en .modeswitch .ms-chip{animation:none !important}