/* ============================================================
   Insight Mind · sitio público
   Tokens copiados de panel/css/styles.css (claro por defecto, oscuro por
   sistema y oscuro/claro elegidos a mano). Solo tokens: nada de hex sueltos.
   ============================================================ */

:root{
  color-scheme: light;
  --primary-glow: #8A91CB;
  --sobre-neutral: #FFFFFF;
  --radius: 9px;
  --radius-lg: 13px;
  --font: "Schibsted Grotesk","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: "IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* ---- Tema claro: el valor por defecto ---- */
  --bg: #F1F2F4;
  --sunken: #E9EBEE;
  --panel: #FAFAFB;
  --block: #FAFAFB;
  --panel-2: #F1F2F4;
  --raised: #FFFFFF;
  --secondary: #ECEEF1;
  --ink: #15171B;
  --ink-2: #3B424C;
  --muted: #5A626D;
  --faint: #6E7681;
  --border: #E2E4E8;
  --border-2: #CBD0D7;
  --hairline: rgba(16,24,40,.035);
  --primary: #5B63A8;
  --primary-solid: #5B63A8;
  --primary-2: #4E568F;
  --primary-soft: #EEEFF7;
  --primary-line: #CCD0E6;
  --primary-ink: #4E568F;
  --on-primary: #FFFFFF;
  --ok: #2E7D5B;
  --ok-soft: #E9F3EE;
  --warn: #8A6212;
  --warn-soft: #F6F1E4;
  --alert: #B3424E;
  --alert-soft: #F9ECEE;
  --neutral: #78818D;
  --link: #4F63D8;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  /* Gráficos: temperatura apagada, para que el azul siga siendo el único acento */
  --graf-pos: #5E9E7F;
  --graf-neu: #CDD2D9;
  --graf-neg: #C27F87;
}

/* ---- Oscuro cuando lo pide el sistema y el usuario no eligió claro ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --sobre-neutral: #0E0F12;
  --bg: #121317;
  --sunken: #0E0F12;
  --panel: #191B20;
  --block: #191B20;
  --panel-2: #1E2126;
  --raised: #22252B;
  --secondary: #22252B;
  --ink: #ECEEF2;
  --ink-2: #C6CCD6;
  --muted: #A8B0BD;
  --faint: #8A93A1;
  --border: #24272E;
  --border-2: #383C46;
  --hairline: rgba(255,255,255,.04);
  --primary: #8A91CB;
  --primary-solid: #8A91CB;
  --primary-2: #9BA2D8;
  --primary-soft: #1A1D2B;
  --primary-line: #343A52;
  --primary-ink: #A8AEE2;
  --on-primary: #111428;
  --ok: #7FCCA5;
  --ok-soft: #15241E;
  --warn: #E0C089;
  --warn-soft: #241F14;
  --alert: #E8A0A6;
  --alert-soft: #231519;
  --neutral: #5C6470;
  --link: #A3B2FF;
  --shadow: 0 1px 2px rgba(0,0,0,.45);
  --graf-pos: #6FAF8D;
  --graf-neu: #3F444E;
  --graf-neg: #B8757D;
  }
}

/* ---- Oscuro elegido a mano: gana sobre el sistema ---- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --sobre-neutral: #0E0F12;
  --bg: #121317;
  --sunken: #0E0F12;
  --panel: #191B20;
  --block: #191B20;
  --panel-2: #1E2126;
  --raised: #22252B;
  --secondary: #22252B;
  --ink: #ECEEF2;
  --ink-2: #C6CCD6;
  --muted: #A8B0BD;
  --faint: #8A93A1;
  --border: #24272E;
  --border-2: #383C46;
  --hairline: rgba(255,255,255,.04);
  --primary: #8A91CB;
  --primary-solid: #8A91CB;
  --primary-2: #9BA2D8;
  --primary-soft: #1A1D2B;
  --primary-line: #343A52;
  --primary-ink: #A8AEE2;
  --on-primary: #111428;
  --ok: #7FCCA5;
  --ok-soft: #15241E;
  --warn: #E0C089;
  --warn-soft: #241F14;
  --alert: #E8A0A6;
  --alert-soft: #231519;
  --neutral: #5C6470;
  --link: #A3B2FF;
  --shadow: 0 1px 2px rgba(0,0,0,.45);
  --graf-pos: #6FAF8D;
  --graf-neu: #3F444E;
  --graf-neg: #B8757D;
}

/* ---- Claro elegido a mano: gana sobre un sistema oscuro ---- */
:root[data-theme="light"]{
  color-scheme: light;
  --sobre-neutral: #FFFFFF;
  --bg: #F1F2F4;
  --sunken: #E9EBEE;
  --panel: #FAFAFB;
  --block: #FAFAFB;
  --panel-2: #F1F2F4;
  --raised: #FFFFFF;
  --secondary: #ECEEF1;
  --ink: #15171B;
  --ink-2: #3B424C;
  --muted: #5A626D;
  --faint: #6E7681;
  --border: #E2E4E8;
  --border-2: #CBD0D7;
  --hairline: rgba(16,24,40,.035);
  --primary: #5B63A8;
  --primary-solid: #5B63A8;
  --primary-2: #4E568F;
  --primary-soft: #EEEFF7;
  --primary-line: #CCD0E6;
  --primary-ink: #4E568F;
  --on-primary: #FFFFFF;
  --ok: #2E7D5B;
  --ok-soft: #E9F3EE;
  --warn: #8A6212;
  --warn-soft: #F6F1E4;
  --alert: #B3424E;
  --alert-soft: #F9ECEE;
  --neutral: #78818D;
  --link: #4F63D8;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* ---- Tokens propios del sitio (medidas y movimiento, sin color) ---- */
:root{
  --ancho: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --alto-cabecera: 64px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-rapido: 160ms;
  --t-estado: 220ms;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--alto-cabecera) + 16px);
  accent-color:var(--primary);caret-color:var(--primary);scrollbar-color:var(--border-2) transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:1rem;line-height:1.6;font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  position:relative;isolation:isolate;
  transition:background-color var(--t-estado) ease,color var(--t-estado) ease}
/* El único resplandor: el halo del panel, una luz baja arriba */
body::before{content:"";position:absolute;inset:0 0 auto;height:min(780px,90vh);z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% -12%,color-mix(in srgb,var(--primary-glow) 11%,transparent),transparent 72%)}

h1,h2,h3,h4,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
code{font-family:var(--mono);font-size:.86em;background:var(--sunken);border:1px solid var(--border);
  border-radius:5px;padding:.05em .38em;white-space:nowrap}
::selection{background:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--ink)}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid var(--bg)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.contenedor{width:100%;max-width:calc(var(--ancho) + var(--gutter) * 2);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}

.saltar{position:absolute;left:16px;top:-60px;z-index:50;background:var(--raised);color:var(--ink);
  padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border-2);text-decoration:none;font-weight:600}
.saltar:focus{top:12px}

/* ---- Tipografía ---- */
h1{font-size:clamp(2.5rem,1.4rem + 3.6vw,3.875rem);line-height:1.02;font-weight:650;
  letter-spacing:-.038em;text-wrap:balance}
h2{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1.08;font-weight:650;letter-spacing:-.032em;
  text-wrap:balance;max-width:20ch}
.subtitulo{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;margin:clamp(56px,7vw,88px) 0 24px}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;color:var(--ink-2);max-width:56ch;
  margin-top:18px;text-wrap:pretty}

/* ---- Botones ---- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 20px;border-radius:var(--radius);border:1px solid transparent;font-weight:600;
  font-size:.9375rem;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:background-color var(--t-rapido) ease,border-color var(--t-rapido) ease,
    color var(--t-rapido) ease,transform var(--t-rapido) var(--ease-out)}
.boton:active{transform:scale(.97)}
.boton_primario{background:var(--primary);color:var(--on-primary)}
.boton_secundario{background:var(--raised);border-color:var(--border-2);color:var(--ink)}
.boton_sutil{min-height:40px;padding:0 16px;border-color:var(--border-2);color:var(--ink);background:transparent}
.boton_texto{background:transparent;color:var(--muted);padding:0 10px}
.boton_chico{min-height:40px;padding:0 14px;font-size:.875rem}
.boton_chico .ico{width:16px;height:16px}
.boton_icono{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius);
  border:1px solid transparent;background:transparent;color:var(--muted);touch-action:manipulation;
  transition:background-color var(--t-rapido) ease,color var(--t-rapido) ease,transform var(--t-rapido) var(--ease-out)}
.boton_icono:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .boton_primario:hover{background:var(--primary-2);color:var(--on-primary)}
  .boton_secundario:hover{border-color:var(--primary-line);background:var(--panel)}
  .boton_sutil:hover{border-color:var(--primary-line);background:var(--panel)}
  .boton_texto:hover{color:var(--ink)}
  .boton_icono:hover{background:var(--secondary);color:var(--ink)}
}
@media (pointer:coarse){ .boton_sutil,.boton_icono,.boton_chico{min-height:44px} .boton_icono{width:44px;height:44px} }

/* ============================================================
   Cabecera
   ============================================================ */
.cabecera{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 95%,transparent);
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid transparent;transition:border-color var(--t-estado) ease,background-color var(--t-estado) ease}
.cabecera[data-scroll="si"]{border-bottom-color:var(--border)}
.cabecera_fila{display:flex;align-items:center;gap:24px;min-height:var(--alto-cabecera)}
.marca{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);border-radius:6px}
.marca_logo{height:30px;width:auto;aspect-ratio:933/219}
.anclas{display:flex;gap:2px;margin-inline:auto}
.anclas a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--radius);
  color:var(--muted);text-decoration:none;font-size:.9375rem;font-weight:500;
  transition:color var(--t-rapido) ease,background-color var(--t-rapido) ease}
.anclas a[aria-current="true"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .anclas a:hover{color:var(--ink);background:var(--secondary)} }
.cabecera_acciones{display:flex;align-items:center;gap:8px}
/* Icono del tema: muestra el destino, no el estado */
.ico_sol{display:none}
:root[data-tema-efectivo="dark"] .ico_sol{display:block}
:root[data-tema-efectivo="dark"] .ico_luna{display:none}

@media (max-width:760px){
  .cabecera_fila{flex-wrap:wrap;gap:0 8px}
  .marca{margin-right:auto}
  .anclas{order:3;width:100%;margin:0 -10px;padding-bottom:4px;overflow-x:auto;scrollbar-width:none;gap:0}
  .anclas::-webkit-scrollbar{display:none}
  .anclas a{min-height:44px;padding:0 10px;font-size:.9rem;flex:none}
  :root{--alto-cabecera:56px}
  html{scroll-padding-top:calc(var(--alto-cabecera) + 64px)}
}

/* ============================================================
   Hero
   La foto vive detrás del texto (escritorio) o encima de él (una columna).
   Hay dos fotos, clara y oscura, con la misma medida y la hoja y la mano alineadas
   al píxel: al cambiar de tema se funden una en la otra, sin saltos.
   ============================================================ */
.hero{position:relative;overflow:clip;padding-block:clamp(72px,10vw,150px)}
.hero_rejilla{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.hero_texto{position:relative;z-index:1;max-width:620px}
.hero_texto h1{max-width:13ch}
.hero_apoyo{margin-top:24px;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.hero_acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* Texto sobre la foto. La transparencia va en el color (no en la opacidad del elemento),
   así el cambio de tema no reinicia la animación de entrada.
   Oscuro: 95 %, la foto se asoma apenas. Claro: sólido, con un halo del color del fondo que lo
   separa de las burbujas. El halo entra solo cuando el fondo ya es claro (fuera de
   .cambiando-tema); si apareciera durante el cambio, sobre un fondo aún oscuro, brillaría. */
.hero_texto h1{color:color-mix(in srgb,var(--ink) 95%,transparent)}
.hero_apoyo{color:color-mix(in srgb,var(--ink-2) 95%,transparent)}
.hero_texto h1,.hero_apoyo{transition:text-shadow 400ms ease}
:root[data-tema-efectivo="light"] .hero_texto h1{color:var(--ink)}
:root[data-tema-efectivo="light"] .hero_apoyo{color:var(--ink-2)}
:root[data-tema-efectivo="light"]:not(.cambiando-tema) .hero_texto h1{text-shadow:0 0 2px var(--bg),0 0 14px var(--bg),0 0 30px var(--bg)}
:root[data-tema-efectivo="light"]:not(.cambiando-tema) .hero_apoyo{text-shadow:0 0 2px var(--bg),0 0 12px var(--bg)}

/* Aparición del hero al cargar: el texto sube apenas; la foto solo se funde, sin moverse */
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fundir{from{opacity:0}to{opacity:1}}
.hero_texto>*{animation:aparecer 560ms var(--ease-out) both}
.hero_texto>:nth-child(2){animation-delay:60ms}
.hero_texto>:nth-child(3){animation-delay:120ms}

/* ---- Foto del hero ---- */
.foto_hero{position:absolute;z-index:0;pointer-events:none;display:grid;
  top:50%;translate:0 -50%;right:calc(-1 * max(var(--gutter), (100vw - var(--ancho)) / 2));
  width:min(1180px,78vw);animation:fundir 1100ms var(--ease-out) 200ms both}
.foto{display:block;width:100%;height:auto;grid-area:1 / 1;transition:opacity 700ms var(--ease-in-out);
  /* Bordes fundidos con el fondo: entra suave por la izquierda, detrás del texto */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 96%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-composite:intersect}
.foto_hero picture{display:contents}   /* la <img> es la que ocupa la celda */
.foto_oscuro{opacity:0}
:root[data-tema-efectivo="dark"] .foto_claro{opacity:0}
:root[data-tema-efectivo="dark"] .foto_oscuro{opacity:1}

/* ============================================================
   Secciones
   ============================================================ */
.seccion{padding-block:clamp(72px,10vw,136px);scroll-margin-top:var(--alto-cabecera)}
.seccion_sunken{background:var(--sunken);border-block:1px solid var(--border)}
.seccion_cabeza{margin-bottom:clamp(36px,5vw,56px)}

/* ---- Producto ---- */
.producto_intro h2{max-width:18ch}

.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;padding-top:24px;border-top:1px solid var(--border-2);display:grid;gap:6px;align-content:start}
/* El marcador es el cuadrito del isotipo */
.pasos li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:2.5px;
  background:var(--bg);border:1.5px solid var(--border-2)}
.pasos b{font-size:1.125rem;font-weight:600;letter-spacing:-.012em}
.pasos span{color:var(--ink-2);max-width:32ch}
.pasos li.paso_humano{border-top-color:var(--primary)}
.paso_humano::before{background:var(--primary)!important;border-color:var(--primary)!important}
.paso_humano b{color:var(--primary-ink)}

.decide{display:grid;grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(72px,9vw,120px);padding:clamp(28px,4.5vw,56px);background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline)}
.decide_marca{width:clamp(56px,7vw,88px);height:auto;aspect-ratio:240/219;color:var(--primary)}
.decide_frase{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);line-height:1.06;font-weight:650;letter-spacing:-.032em;margin-bottom:18px}
.decide_texto p:not(.decide_frase){color:var(--ink-2);max-width:46ch}
.no_es{display:grid;align-self:center}
.no_es li{padding:14px 0;border-top:1px solid var(--border);color:var(--muted)}
.no_es li:last-child{border-bottom:1px solid var(--border)}
.no_es b{color:var(--ink);font-weight:600}

/* ---- Planes ---- */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline)}
.plan[data-destacado="true"]{border-color:var(--primary);box-shadow:var(--shadow),inset 0 0 0 1px var(--primary);background:var(--raised)}
.plan_cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.plan_nombre{font-size:1.125rem;font-weight:600;letter-spacing:-.012em}
.plan_sello{font-size:.75rem;font-weight:600;color:var(--primary-ink);background:var(--primary-soft);
  border:1px solid var(--primary-line);padding:2px 9px;border-radius:99px}
.plan_precio{display:flex;align-items:baseline;gap:8px;margin-top:22px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.plan_precio .cifra{font-size:clamp(2.25rem,1.8rem + 1.2vw,2.75rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.plan_precio .cifra_texto{font-family:var(--font);font-weight:650;letter-spacing:-.035em}
.plan_precio .moneda{font-size:.875rem;color:var(--muted);align-self:flex-start;margin-top:4px}
.plan_precio .periodo{font-size:.84rem;color:var(--muted)}
.plan_para{margin-top:14px;color:var(--ink-2);font-size:.9375rem;min-height:3.1em}
.plan_incluye{display:grid;gap:10px;margin:24px 0 28px;padding-top:22px;border-top:1px solid var(--border);font-size:.9375rem}
.plan_incluye li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.plan_incluye .ico{width:16px;height:16px;margin-top:4px;color:var(--primary);stroke-width:2}
.plan .boton{margin-top:auto;width:100%}
.aviso_provisional{margin-top:20px;font-size:.84rem;color:var(--muted)}

/* ---- FAQs ---- */
.faqs_rejilla{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(32px,6vw,96px);align-items:start}
.faqs_cabeza{position:sticky;top:calc(var(--alto-cabecera) + 32px)}
.faqs_cabeza h2{max-width:12ch}
.origen{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);font-size:.875rem;color:var(--muted);max-width:36ch}
.faqs{border-top:1px solid var(--border-2)}
.faq{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 4px;min-height:44px;
  cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;
  border-radius:6px;transition:color var(--t-rapido) ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{margin-top:3px;color:var(--muted);transition:transform var(--t-estado) var(--ease-out),color var(--t-rapido) ease}
.faq[open] summary .ico{transform:rotate(45deg);color:var(--primary)}
@media (hover:hover) and (pointer:fine){ .faq summary:hover{color:var(--primary-ink)} .faq summary:hover .ico{color:var(--primary)} }
.faq_respuesta{padding:0 4px 24px;max-width:62ch}
.faq_fecha{display:block;margin-top:14px;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
/* Apertura suave donde el navegador lo permite; en el resto abre sin animar */
@supports (interpolate-size:allow-keywords){
  .faqs{interpolate-size:allow-keywords}
  .faq::details-content{block-size:0;overflow:clip;opacity:0;
    transition:block-size 420ms var(--ease-out),opacity 320ms ease,content-visibility 420ms allow-discrete}
  .faq[open]::details-content{block-size:auto;opacity:1}
}

/* ---- Prosa (respuestas y ediciones) ---- */
.prosa{color:var(--ink-2)}
.prosa>*+*{margin-top:12px}
.prosa h3{font-size:1.125rem;font-weight:600;color:var(--ink);margin-top:24px}
.prosa h4{font-size:.9375rem;font-weight:600;color:var(--ink);margin-top:24px;letter-spacing:-.005em}
.prosa h4+p{margin-top:4px}
.prosa ol{counter-reset:n;display:grid;gap:8px}
.prosa ol li{counter-increment:n;position:relative;padding-left:1.9em}
.prosa ol li::before{content:counter(n);position:absolute;left:0;top:.22em;font-family:var(--mono);font-size:.8rem;color:var(--primary-ink)}
.prosa ul{display:grid;gap:6px}
.prosa ul li{padding-left:18px;position:relative}
.prosa ul li::before{content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;border-radius:2px;background:var(--border-2)}
.prosa strong{color:var(--ink);font-weight:600}
.prosa code{white-space:normal;overflow-wrap:anywhere}

/* ---- Newsletter ---- */
.boletin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.boletin_texto h2{max-width:16ch}
.suscripcion{display:grid;gap:8px}
.suscripcion label{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.suscripcion_fila{display:flex;gap:8px}
.suscripcion input{flex:1;min-width:0;height:48px;padding:0 14px;font-size:16px;background:var(--raised);
  border:1px solid var(--border-2);border-radius:var(--radius);color:var(--ink);
  transition:border-color var(--t-rapido) ease,box-shadow var(--t-rapido) ease}
.suscripcion input::placeholder{color:var(--muted);opacity:1}
.suscripcion input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.suscripcion .boton{height:48px}
.suscripcion_mensaje{display:flex;align-items:flex-start;gap:8px;font-size:.875rem;color:var(--muted);min-height:1.5em}
.suscripcion_mensaje .ico{width:16px;height:16px;margin-top:3px}
.suscripcion_legal{font-size:.8125rem;line-height:1.5;color:var(--muted);max-width:52ch}
.suscripcion_legal a,.pie_legal a,.origen a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.origen_boletin{margin-top:20px;border-top:0;padding-top:0;max-width:62ch}
.suscripcion[data-estado="error"] input{border-color:var(--alert)}
.suscripcion[data-estado="error"] input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 20%,transparent)}
.suscripcion[data-estado="error"] .suscripcion_mensaje{color:var(--alert)}
.suscripcion[data-estado="exito"] .suscripcion_mensaje{color:var(--ok)}
.suscripcion[data-estado="exito"] .suscripcion_mensaje{animation:aparecer var(--t-estado) var(--ease-out)}

.ediciones{border-top:1px solid var(--border-2)}
.ediciones li{border-bottom:1px solid var(--border)}
.edicion_fila{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;gap:8px 32px;align-items:baseline;width:100%;
  padding:24px 12px;margin:0 -12px;width:calc(100% + 24px);background:transparent;border:0;border-radius:var(--radius);text-align:left;
  transition:background-color var(--t-rapido) ease}
.edicion_fila time{font-family:var(--mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.edicion_fila b{display:block;font-size:1.125rem;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.edicion_fila .extracto{display:block;margin-top:6px;color:var(--ink-2);max-width:68ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.edicion_fila .leer{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--primary-ink);white-space:nowrap}
.edicion_fila .leer .ico{width:16px;height:16px;transition:transform var(--t-rapido) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .edicion_fila:hover{background:var(--panel)}
  .edicion_fila:hover .leer .ico{transform:translateX(3px)}
}

/* ---- Estados de carga, vacío y error ---- */
.cargando{display:grid;gap:12px}
.cargando span{display:block;height:56px;border-radius:var(--radius);background:var(--secondary)}
.vacio{padding:24px 0;color:var(--muted)}
.vacio b{color:var(--ink);font-weight:600}
.vacio button{margin-top:12px}

/* ---- Diálogo de edición ---- */
.edicion{width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;margin:auto;
  background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline);
  overscroll-behavior:contain;
  opacity:1;transform:none;filter:none;
  /* Entrada: sube, se enfoca y aparece. La salida (abajo) es más corta: lo que se va no hace esperar */
  transition:opacity 420ms var(--ease-out),transform 560ms var(--ease-out),filter 420ms var(--ease-out),
    overlay 560ms allow-discrete,display 560ms allow-discrete}
.edicion:not([open]){opacity:0;transform:translateY(10px) scale(.985);filter:blur(4px);
  transition-duration:220ms,220ms,220ms,220ms,220ms;transition-timing-function:ease-in}
@starting-style{ .edicion[open]{opacity:0;transform:translateY(18px) scale(.965);filter:blur(6px)} }
/* El contenido de la edición llega escalonado detrás de la ventana */
@keyframes edicion_entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.edicion[open] .edicion_cabeza,.edicion[open] .edicion_fecha,.edicion[open] .edicion_cuerpo h2,
.edicion[open] .edicion_cuerpo .prosa>*{animation:edicion_entra 620ms var(--ease-out) both}
.edicion[open] .edicion_cabeza{animation-delay:60ms}
.edicion[open] .edicion_fecha{animation-delay:140ms}
.edicion[open] .edicion_cuerpo h2{animation-delay:190ms}
.edicion[open] .edicion_cuerpo .prosa>*:nth-child(1){animation-delay:250ms}
.edicion[open] .edicion_cuerpo .prosa>*:nth-child(2){animation-delay:290ms}
.edicion[open] .edicion_cuerpo .prosa>*:nth-child(3){animation-delay:330ms}
.edicion[open] .edicion_cuerpo .prosa>*:nth-child(4){animation-delay:370ms}
.edicion[open] .edicion_cuerpo .prosa>*:nth-child(5){animation-delay:410ms}
.edicion[open] .edicion_cuerpo .prosa>*:nth-child(n+6){animation-delay:450ms}
/* El fondo se aquieta: se tiñe y se desenfoca un poco, para que la lectura sea lo único en foco */
.edicion::backdrop{background:color-mix(in srgb,var(--bg) 64%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color 480ms ease,backdrop-filter 480ms ease,-webkit-backdrop-filter 480ms ease,
    overlay 480ms allow-discrete,display 480ms allow-discrete}
.edicion:not([open])::backdrop{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition-duration:220ms}
@starting-style{ .edicion[open]::backdrop{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)} }
.edicion_cabeza{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 12px 12px 24px;background:var(--panel);border-bottom:1px solid var(--border)}
.edicion_masthead{display:inline-flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.edicion_marca{width:20px;height:18px;color:var(--primary)}
.edicion_cuerpo{padding:28px clamp(20px,4vw,40px) 40px}
.edicion_fecha{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.edicion_cuerpo h2{margin-top:8px;font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);max-width:none}
.edicion_cuerpo .prosa{margin-top:20px}
.edicion_cuerpo .prosa h4{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.edicion_cuerpo .prosa h4:first-child{margin-top:0}
body:has(.edicion[open]){overflow:hidden}

/* ============================================================
   Pie
   ============================================================ */
.pie{border-top:1px solid var(--border);padding-block:40px max(40px,env(safe-area-inset-bottom))}
.pie_fila{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pie_marca{display:grid;gap:12px;color:var(--ink)}
.pie_logo{height:22px;width:auto;aspect-ratio:933/219}
.pie_marca p{font-size:.875rem;color:var(--muted)}
.pie_anclas{display:flex;flex-wrap:wrap;gap:4px}
.pie_anclas a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--muted);text-decoration:none;font-size:.9rem;border-radius:var(--radius)}
.pie_legal{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--border);font-size:.8125rem;color:var(--muted)}
.pie_legal .pie_anclas a{font-size:.8125rem}
@media (hover:hover) and (pointer:fine){ .pie_anclas a:hover{color:var(--ink)} }

/* ============================================================
   Páginas legales: medida de lectura, jerarquía clara, nada que distraiga
   ============================================================ */
.legal{padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,112px)}
.legal_doc{max-width:68ch}
.legal_doc h1{color:var(--ink);font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);line-height:1.05;letter-spacing:-.032em;max-width:18ch}
.legal_fecha{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.legal_doc .legal_resumen{margin-top:16px;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;color:var(--ink-2)}
.legal_doc h2{max-width:none;font-size:1.25rem;line-height:1.3;font-weight:650;letter-spacing:-.015em;color:var(--ink);
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border);scroll-margin-top:calc(var(--alto-cabecera) + 24px)}
.legal_doc h2+*{margin-top:12px}
.legal_doc p,.legal_doc li{line-height:1.65}
.legal_doc a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal_doc ul li::before{background:var(--primary)}
/* Datos aún por definir: visibles para el equipo, discretos para quien lee */
.pendiente{color:var(--warn);border-bottom:1px dashed currentColor}
.legal_tabla{margin-top:16px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.legal_tabla table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:520px}
.legal_tabla th,.legal_tabla td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.legal_tabla tr:last-child td{border-bottom:0}
.legal_tabla th{font-weight:600;color:var(--ink);background:var(--sunken)}
.legal_tabla td{color:var(--ink-2)}
.legal_tabla code{white-space:nowrap}
@media (max-width:560px){
  /* En pantallas chicas cada fila de la tabla se vuelve una ficha */
  .legal_tabla{overflow:visible}
  .legal_tabla table{min-width:0}
  .legal_tabla thead{display:none}
  .legal_tabla tr{display:grid;gap:6px;padding:14px}
  .legal_tabla td{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:0;border:0}
  .legal_tabla td::before{content:attr(data-etiqueta);font-weight:600;color:var(--ink)}
  .legal_tabla td>code{justify-self:start}
}
.pagina_legal .anclas a[aria-current="page"]{color:var(--ink);background:var(--secondary)}
.pagina_legal .pie{padding-top:8px}
.pagina_legal .pie_legal{margin-top:0;border-top:0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  /* Una columna: la foto arriba, a todo el ancho, y el texto sube sobre su mitad inferior
     (ya difuminada), para que las dos piezas se lean como una portada */
  .hero{padding-top:8px}
  .foto_hero{position:relative;order:-1;top:auto;translate:none;right:auto;width:auto;
    /* El texto cubre el 50 % inferior de la foto: alto = ancho × 1116/2000 */
    margin:0 calc(-1 * var(--gutter)) calc(-0.5 * 100vw * 1116 / 2000)}
  .foto{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 46%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 46%,transparent 100%)}
  .hero_texto{max-width:none}
  .decide{grid-template-columns:auto minmax(0,1fr)}
  .no_es{grid-column:1 / -1}
  .faqs_rejilla{grid-template-columns:minmax(0,1fr)}
  .faqs_cabeza{position:static}
  .faqs_cabeza h2{max-width:20ch}
  .boletin{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px}
}
@media (max-width:860px){
  .planes{grid-template-columns:minmax(0,1fr);max-width:520px}
  .plan_para{min-height:0}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pasos{grid-template-columns:minmax(0,1fr);gap:28px}
  .decide{grid-template-columns:minmax(0,1fr)}
  .suscripcion_fila{flex-direction:column}
  .suscripcion input{flex:none;height:48px}
  .suscripcion .boton{width:100%}
  .edicion_fila{grid-template-columns:minmax(0,1fr);gap:6px;padding-block:20px}
  .edicion_fila .leer{margin-top:6px}
  .hero_acciones .boton{flex:1 1 auto}
  .pie_fila{flex-direction:column;align-items:flex-start}
  .pie_anclas{margin-left:-10px}
}

/* ============================================================
   Animaciones: revelado al hacer scroll
   Solo se ocultan si el JS marcó <html class="anim"> (y no hay movimiento reducido):
   sin JS, todo se ve desde el principio.
   ============================================================ */
.anim [data-revelar]{opacity:0;transform:translateY(16px);
  transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms)}
.anim [data-revelar].visible{opacity:1;transform:none}

/* La línea de cada paso se dibuja de izquierda a derecha */
.anim .pasos li{border-top-color:transparent;
  background:linear-gradient(var(--border-2),var(--border-2)) 0 -1px / 0% 1px no-repeat;
  transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out),background-size 1100ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 90ms)}
.anim .pasos li.visible{background-size:100% 1px}
.anim .pasos li.paso_humano{border-top-color:transparent;background-image:linear-gradient(var(--primary),var(--primary))}
.anim .pasos li::before{transform:scale(.4);opacity:0;
  transition:transform 420ms var(--ease-out),opacity 420ms ease;transition-delay:calc(var(--i, 0) * 90ms + 120ms)}
.anim .pasos li.visible::before{transform:none;opacity:1}

/* El isotipo del bloque "decide" entra con una escala suave */
.anim .decide .decide_marca{opacity:0;transform:scale(.88) rotate(-4deg);
  transition:opacity 900ms var(--ease-out) 150ms,transform 900ms var(--ease-out) 150ms}
.anim .decide.visible .decide_marca{opacity:1;transform:none}

/* Planes: un leve levantamiento al pasar el cursor */
/* (usa `translate`, independiente del `transform` del revelado, para no pisarlo) */
.plan{transition:translate 260ms var(--ease-out),border-color 260ms ease}
.anim .plan[data-revelar]{
  transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out),translate 260ms var(--ease-out),border-color 260ms ease;
  transition-delay:calc(var(--i, 0) * 70ms),calc(var(--i, 0) * 70ms),0ms,0ms}
@media (hover:hover) and (pointer:fine){
  .plan:hover{translate:0 -3px;border-color:var(--primary-line)}
  .plan[data-destacado="true"]:hover{border-color:var(--primary)}
}

/* Cambio de tema: todo se funde a la vez y con la misma curva (ver conTransicion en sitio.js) */
.cambiando-tema *,.cambiando-tema *::before,.cambiando-tema *::after,.cambiando-tema body{
  transition:background-color 700ms var(--ease-in-out),color 700ms var(--ease-in-out),
    border-color 700ms var(--ease-in-out),fill 700ms var(--ease-in-out),stroke 700ms var(--ease-in-out),
    box-shadow 700ms var(--ease-in-out),opacity 700ms var(--ease-in-out)!important}

/* FAQ: la respuesta entra con un fundido y un leve enfoque al desplegar */
@keyframes faq_abre{from{opacity:0;transform:translateY(-6px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.faq[open] .faq_respuesta{animation:faq_abre 460ms var(--ease-out) both}

/* Cambio de página: fundido con un leve desenfoque (View Transitions entre documentos).
   Funciona entre páginas del mismo origen que también lo declaren; donde no hay soporte, navega normal. */
@view-transition{navigation:auto}
@keyframes vista_sale{to{opacity:0;filter:blur(4px)}}
@keyframes vista_entra{from{opacity:0;filter:blur(4px)}}
::view-transition-old(root){animation:vista_sale 280ms ease-in both}
::view-transition-new(root){animation:vista_entra 520ms var(--ease-out) both}

/* Estela del cursor: un lienzo encima del contenido, sin recibir clics (ver estela en sitio.js) */
.rastro{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15;
  filter:blur(7px)}   /* difusa, como un rastro de luz y no un trazo */

/* ============================================================
   Movimiento reducido: sin desplazamientos, solo cambios de color
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .boton:active,.boton_icono:active{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .rastro{display:none}
}