/* Origen: repo Diagnóstico Relámpago, rama main, public/index.html (bloque <style>, líneas 56 a 770), commit edfc8f388f70.
   Base visual completa, sin cambios. Los estilos propios del Espejo van al final del archivo. */
/* Fuentes autoalojadas (antes venían de Google Fonts): los mismos archivos woff2 que servía Google
   (Big Shoulders Display v24 e Inter v20, licencia SIL Open Font License 1.1), solo latin y
   latin-ext; el navegador baja latin-ext únicamente si el texto lo necesita. Solo los pesos que se
   usan: Big Shoulders Display 900; Inter 400 a 700 (el archivo de Inter es variable, uno para los
   cuatro pesos). Las cursivas siguen siendo sintéticas, como con Google Fonts. */
@font-face{ font-family:'Big Shoulders Display'; font-style:normal; font-weight:900; font-display:swap; src:url(/fuentes/big-shoulders-display-900-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Big Shoulders Display'; font-style:normal; font-weight:900; font-display:swap; src:url(/fuentes/big-shoulders-display-900-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fuentes/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fuentes/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ============================================================
   TOKENS: Design System Heureka!
   ============================================================ */
:root{
  /* Paleta de marca */
  --obsidiana:        #0b132b;
  --off-white:        #efefef;
  --blanco:           #f8f9fa;
  --ambar:            #ff9f1c;
  --rojo:             #e63946;
  --gris-acero:       #546e7a;

  /* Variantes derivadas (capa contextual sobre tokens de marca) */
  --ambar-hover:       #ffb547;
  --ambar-oscuro:      #cc7e13;
  --ambar-suave:       #fff3e0;
  --rojo-suave:        #fbe9eb;
  --gris-acero-claro:  #8fa3ab;
  --obsidiana-suave:   #1c2a4d;

  /* Verde semáforo: color utilitario FUERA de la paleta de marca.
     Uso exclusivo en el indicador de severidad (convención universal
     de semáforo). No se usa en ningún otro contexto de la interfaz. */
  --semaforo-ok:       #2f9e63;
  --semaforo-ok-suave: #e5f4ec;

  /* Tipografía — sistema de marca Heureka! v1.3 */
  --font-logo:    'Bad Horse', display; /* solo para consistencia de token: el logo es SVG, no se carga el archivo de fuente */
  --font-heading: 'Big Shoulders Display', sans-serif;
  --font-subhead: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Layout */
  --gutter:         clamp(1.25rem, 5vw, 3.5rem);
  --content-width:  68rem;
  --section-space:  clamp(2.5rem, 7vw, 5.5rem);
  --radius:         9px;
  --control-height: 3.25rem;

  /* Escala de espaciado: proporción 1.5 */
  --space-1: 0.27rem;
  --space-2: 0.4rem;
  --space-3: 0.6rem;
  --space-4: 0.9rem;
  --space-5: 1.35rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Escala tipográfica fluida */
  --text-xs:  clamp(0.78rem, 0.3vw + 0.72rem, 0.86rem);
  --text-sm:  clamp(0.9rem,  0.3vw + 0.82rem, 1rem);
  --text-base:clamp(1.02rem, 0.4vw + 0.92rem, 1.15rem);
  --text-lg:  clamp(1.2rem,  0.8vw + 1rem, 1.5rem);
  --text-xl:  clamp(1.6rem,  1.6vw + 1.1rem, 2.3rem);
  --text-2xl: clamp(2.1rem,  3vw + 1.3rem, 3.4rem);
  --text-3xl: clamp(2.5rem,  4.5vw + 1.4rem, 4.6rem);
}

*{ box-sizing:border-box; }
/* Restaura el comportamiento real de [hidden]: varias clases de este archivo declaran su
   propio "display" (grid/flex), lo cual gana en la cascada sobre la regla [hidden] del
   navegador aunque no tenga !important, porque una declaración normal de autor siempre
   gana sobre una normal de user-agent. Oculto significa oculto, sin excepción. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
  background:var(--obsidiana);
  color:var(--off-white);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  overflow-x:hidden;
}
h1,h2,h3{ margin:0; font-family:var(--font-heading); font-weight:900; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
button,input{ font-family:inherit; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
svg{ display:block; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Foco visible: accesibilidad obligatoria */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--ambar);
  outline-offset:3px;
}

/* ============================================================
   PATRÓN BASE DE SECCIÓN (Era 4)
   ============================================================ */
:where(main > section){
  padding-block: var(--section-space);
  padding-inline: var(--gutter);
  padding-top: max(var(--section-space), 7.5rem);
}
.container{
  margin-inline:auto;
  width:100%;
  max-width:var(--content-width);
}

/* ============================================================
   MARCA: wordmark arriba, en el flujo de la página (no se encima al hacer scroll)
   ============================================================ */
.brandmark{
  padding: var(--space-4) var(--gutter) 0;
  pointer-events:none;
  user-select:none;
}
/* En el reporte el logo se alinea con el borde izquierdo de la columna centrada de 55rem. */
.brandmark--reporte{ max-width:calc(55rem + 2 * var(--gutter)); margin-inline:auto; }
/* Con el logo en el flujo, la sección ya no necesita dejarle hueco arriba. */
:where(main > section){ padding-top: var(--space-6); }
.brandmark__logo{
  height: clamp(64px, 10vw, 104px);
  width: auto;
  max-width: none;
  overflow: visible;
}

/* ============================================================
   ICONO BOLT: motivo de firma (reutilizado)
   ============================================================ */
.icon-bolt{ width:1em; height:1em; flex-shrink:0; }
.icon-bolt path{ fill:currentColor; }

/* ============================================================
   SCREENS: máquina de estados de la interfaz
   ============================================================ */
main{ position:relative; min-height:100dvh; }
.screen{
  display:none;
  /* La pantalla llena lo que queda debajo del logo, sin forzar scroll. */
  min-height:calc(100dvh - var(--space-4) - clamp(64px, 10vw, 104px));
  align-items:center;
}
.screen.is-active{
  display:flex;
  animation:screen-in 0.5s ease both;
}
@keyframes screen-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Indicador de pasos (decorativo, accesible vía aria-label) */
.steps{
  display:flex;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.steps__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gris-acero);
  transition:background .3s ease, transform .3s ease;
}
.steps__dot.is-current{ background:var(--ambar); transform:scale(1.3); }
.steps__dot.is-done{ background:var(--ambar-oscuro); }

/* ============================================================
   HERO: PASO 1
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero__bg-bolt{
  position:absolute;
  top:-10%; right:-8%;
  width:min(46vw, 620px);
  opacity:0.07;
  pointer-events:none;
  z-index:0;
}
/* Formulario en escritorio: los dos relámpagos en espejo de la og-image (gris acero a la izquierda,
   ámbar a la derecha, con la línea de espejo entre ambos), sutiles sobre el fondo con la misma
   técnica y opacidad que el rayo del Relámpago. Decorativos; en celular no aparecen. */
.hero__espejo{
  position:absolute;
  top:var(--space-6);
  right:var(--gutter);
  width:min(36vw, 520px);
  opacity:0.07;
  pointer-events:none;
  z-index:0;
}
.hero__espejo-gris{ fill:var(--gris-acero); }
.hero__espejo-ambar{ fill:var(--ambar); }
.hero__espejo-linea{ stroke:var(--gris-acero); stroke-width:2; }
@media (max-width:64rem){
  .hero__espejo{ display:none; }
}
.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:var(--space-6);
  max-width:42rem;
}
.hero__kicker{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ambar);
}
/* Etiqueta sobre el H1: el mini ícono de los relámpagos en espejo en lugar del rayo del Relámpago. */
.hero__kicker{ display:flex; align-items:center; gap:var(--space-2); }
.hero__kicker-icono{ height:1.4em; width:auto; flex-shrink:0; }
.hero__title{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:var(--text-3xl);
  color:var(--blanco);
}
.hero__title em{
  font-style:normal;
  color:var(--ambar);
}
.hero__subtitle{
  font-size:var(--text-lg);
  color:var(--off-white);
  max-width:38ch;
}
.hero__form{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.hero__input-wrap{ flex:1 1 18rem; min-width:0; }
.input{
  width:100%;
  height: var(--control-height);
  padding-inline:1.1rem;
  border:2px solid var(--gris-acero);
  background:var(--obsidiana-suave);
  color:var(--blanco);
  font-size:var(--text-base);
  border-radius:var(--radius);
  transition:border-color .2s ease;
}
.input::placeholder{ color:var(--gris-acero-claro); }
.input:focus{ border-color:var(--ambar); outline:none; }
.input.is-invalid{ border-color:var(--rojo); }

.btn{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-base);
  border:none;
  border-radius:var(--radius);
  padding:1rem 1.6rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, transform .15s ease;
}
#btn-hero-submit{ height: var(--control-height); display:inline-flex; align-items:center; justify-content:center; padding-block:0; }
.btn:active{ transform:scale(0.98); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.btn--primary{ background:var(--ambar); color:var(--obsidiana); }
.btn--primary:hover{ background:var(--ambar-hover); }
.btn--block{ width:100%; }
.btn--ghost{
  background:transparent;
  color:var(--off-white);
  border:2px solid var(--gris-acero);
}
.btn--ghost:hover{ border-color:var(--off-white); }

.microtext{
  font-size:var(--text-xs);
  color:var(--gris-acero-claro);
  margin-top:var(--space-2);
}
.turnstile{ min-height:65px; margin-bottom:var(--space-3); }
.microtext a{ color:var(--off-white); text-decoration:underline; text-underline-offset:0.15em; }
.microtext a:hover{ color:var(--ambar); }

/* Casilla opcional de correos (marcada de origen): mismo tipo y color que las etiquetas del formulario */
.form-check{ display:flex; align-items:center; gap:var(--space-3); }
.form-check input{ width:1.25rem; height:1.25rem; margin:0; flex:0 0 auto; accent-color:var(--ambar); cursor:pointer; }
.form-check label{ font-family:var(--font-subhead); font-weight:700; font-size:var(--text-sm); color:var(--off-white); cursor:pointer; }


.hero__dims{
  margin-top:var(--space-7);
  padding-top:var(--space-6);
  border-top:1px solid var(--obsidiana-suave);
}
.hero__dims-title{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gris-acero-claro);
  margin-bottom:var(--space-4);
}
.hero__dims-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:var(--space-4) var(--space-6);
}
.hero__dims-grid li{ display:grid; gap:var(--space-1); }
.hero__dims-grid strong{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--ambar);
}
.hero__dims-grid span{
  font-size:var(--text-xs);
  color:var(--gris-acero-claro);
  line-height:1.5;
}
.hero__signature{
  margin-top:var(--space-5);
  font-size:var(--text-xs);
  color:var(--gris-acero);
  font-style:italic;
}
.field-error{
  font-size:var(--text-xs);
  color:var(--rojo);
  margin-top:var(--space-2);
  min-height:1.2em;
}
.field-error:empty{
  min-height:0;
  margin-top:0;
}

/* ============================================================
   CAPTURE: PASO 2
   ============================================================ */
.capture__inner{ max-width:32rem; display:grid; gap:var(--space-6); }
.capture__title{ font-size:var(--text-xl); color:var(--blanco); }
.capture__subtitle{ font-size:var(--text-base); color:var(--gris-acero-claro); }
.form-grid{ display:grid; gap:var(--space-5); }
.form-field{ display:grid; gap:var(--space-2); }
.form-field label{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--off-white);
}
.capture__back{
  font-size:var(--text-sm);
  color:var(--gris-acero-claro);
  background:none; border:none; padding:0;
  cursor:pointer; text-align:left;
  width:fit-content;
}
.capture__back:hover{ color:var(--ambar); }

/* ============================================================
   LOADING: PASO 3
   ============================================================ */
.loading__inner{
  max-width:30rem;
  margin-inline:auto;
  text-align:center;
  display:grid;
  gap:var(--space-6);
  justify-items:center;
}
/* Los dos relámpagos en espejo de la og-image. El brillo pasa de uno a otro, como un reflejo. */
.loading__espejo{ width:120px; height:auto; }
.loading__espejo-gris{ fill:var(--gris-acero); animation:reflejo-gris 2.4s ease-in-out infinite alternate; }
.loading__espejo-ambar{ fill:var(--ambar); animation:reflejo-ambar 2.4s ease-in-out infinite alternate; }
.loading__espejo-linea{ stroke:var(--gris-acero); stroke-width:3; }
@keyframes reflejo-gris{ from{ opacity:1; } to{ opacity:0.35; } }
@keyframes reflejo-ambar{ from{ opacity:0.35; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .loading__espejo-gris, .loading__espejo-ambar{ animation:none; opacity:1; }
}
.loading__message{
  font-size:var(--text-lg);
  color:var(--blanco);
  font-family:var(--font-subhead);
  font-weight:700;
  min-height:2.6em;
  display:flex;
  align-items:center;
}

/* ============================================================
   RESULT: PASO 4 + CTA (PASO 5)
   ============================================================ */
.screen--result{ align-items:flex-start; padding-top:var(--space-8); }
.result__inner{ display:grid; gap:var(--space-7); width:100%; }

.result__banner{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  background:var(--obsidiana-suave);
  border-left:3px solid var(--ambar);
  color:var(--blanco);
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-base);
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius);
}
.result__banner .icon-bolt{ color:var(--ambar); width:1.3em; height:1.3em; flex-shrink:0; }
.result__fuente{
  font-size:var(--text-xs);
  color:var(--gris-acero-claro);
  margin-top:calc(-1 * var(--space-2));
}
.result__paginas{
  font-size:var(--text-xs);
  color:var(--gris-acero-claro);
  margin-top:calc(-1 * var(--space-4));
}
.result__nota{
  font-size:var(--text-xs);
  color:var(--gris-acero-claro);
  line-height:1.5;
  margin-top:calc(-1 * var(--space-3));
}
.result__nota strong{ color:var(--off-white); font-weight:700; }

.result__head{
  display:grid;
  gap:var(--space-5);
}
.result__domain-label{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gris-acero-claro);
}
.result__domain-label strong{ color:var(--ambar); font-weight:700; }

.result__score-row{
  display:flex;
  align-items:flex-end;
  gap:var(--space-5);
  flex-wrap:wrap;
}
.result__score-number{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:clamp(3.5rem, 9vw, 6.5rem);
  line-height:0.85;
}
.result__score-number .of10{
  font-family:var(--font-subhead);
  font-size:var(--text-lg);
  color:var(--gris-acero-claro);
  font-weight:700;
}
.result__score-sub{
  font-size:var(--text-lg);
  color:var(--blanco);
  font-family:var(--font-subhead);
  font-weight:700;
  max-width:32ch;
  padding-bottom:var(--space-2);
}
.result__resumen{
  font-size:var(--text-base);
  color:var(--off-white);
  max-width:60ch;
}

/* Top 3: Escalada del arco StorySelling, entre el score y el primer CTA */
.top3{
  display:grid;
  gap:var(--space-4);
  padding:var(--space-5) 0;
  border-top:1px solid var(--obsidiana-suave);
  border-bottom:1px solid var(--obsidiana-suave);
}
.top3__eyebrow{ display:flex; align-items:center; gap:var(--space-2); color:var(--ambar); font-family:var(--font-subhead); font-weight:700; font-size:var(--text-sm); text-transform:uppercase; letter-spacing:0.05em; }
.top3__title{
  font-size:var(--text-xl);
  color:var(--blanco);
}
.top3__subtitle{
  font-size:var(--text-base);
  color:var(--gris-acero-claro);
  max-width:56ch;
}
.top3__list{
  display:grid;
  gap:var(--space-4);
  list-style:none;
}
.top3__item{
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
}
.top3__num{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:var(--text-lg);
  color:var(--ambar);
  flex-shrink:0;
  min-width:1.4em;
}
.top3__name{
  display:block;
  font-family:var(--font-subhead);
  font-weight:700;
  color:var(--blanco);
  font-size:var(--text-sm);
  margin-bottom:2px;
}
.top3__cost{
  color:var(--off-white);
  font-size:var(--text-base);
}
.top3__bridge{
  font-size:var(--text-sm);
  color:var(--gris-acero-claro);
  font-style:italic;
}

/* severidad: color del número grande */
.is-ok .result__score-number{ color:var(--semaforo-ok); }
.is-warn .result__score-number{ color:var(--ambar); }
.is-critical .result__score-number{ color:var(--rojo); }

/* CTA block: visible sin scroll junto al score */
.cta{
  background:var(--obsidiana-suave);
  border-left:4px solid var(--ambar);
  padding:var(--space-6);
  border-radius:var(--radius);
  display:grid;
  gap:var(--space-4);
}
.reporte__inner .cta{ padding:var(--space-7); gap:var(--space-5); }
.reporte__inner .cta__nota-personal{ gap:var(--space-5); }
/* La línea de otras IA queda separada de la llamada a la acción por una línea sutil, con --space-6 a cada lado. */
.reporte__inner .reporte__otras{ max-width:none; padding-bottom:var(--space-6); border-bottom:1px solid rgba(143, 163, 171, 0.25); margin-bottom:calc(var(--space-6) - var(--space-5)); }
.cta__eyebrow{ display:flex; align-items:center; gap:var(--space-2); color:var(--ambar); font-family:var(--font-subhead); font-weight:700; font-size:var(--text-sm); text-transform:uppercase; letter-spacing:0.05em; }
.cta__puntob{
  font-size:var(--text-base);
  color:var(--off-white);
  font-style:italic;
  max-width:54ch;
}
.cta__moraleja{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-lg);
  color:var(--ambar);
  border-left:3px solid var(--ambar);
  padding-left:var(--space-4);
  max-width:46ch;
}
.cta__nota-personal{
  display:grid;
  gap:var(--space-3);
}
.cta__nota-personal p{
  font-size:var(--text-base);
  color:var(--off-white);
  max-width:58ch;
}
.cta__nota-personal .cta__moraleja{
  margin-top:var(--space-2);
}
.cta__firma{
  margin-top:var(--space-2);
  font-size:var(--text-sm);
  color:var(--gris-acero-claro);
  font-style:italic;
  line-height:1.4;
}
.cta__firma span{ font-style:normal; font-size:var(--text-xs); }
.cta__title{ font-size:var(--text-xl); color:var(--blanco); }
.cta__title .accent{ color:var(--ambar); }
.cta__subtitle{ color:var(--gris-acero-claro); font-size:var(--text-base); max-width:48ch; }
.cta__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-2); }
.cta__actions .btn{ display:inline-flex; align-items:center; gap:var(--space-2); }

/* Ejes: grid con container queries (Nivel 2 Era 4) */
.ejes{ display:grid; gap:var(--space-4); grid-template-columns:1fr; }
.eje{
  background:var(--obsidiana-suave);
  border:1px solid var(--gris-acero);
  border-radius:var(--radius);
  padding:var(--space-5);
  display:grid;
  gap:var(--space-3);
  align-content:start;
}
/* Selector "Has Me": declara al padre como container desde dentro del bloque */
.eje{ :has(> &){ container-type:inline-size; container-name:eje; } }

.eje__top{ display:flex; align-items:center; gap:var(--space-3); }
.eje__semaforo{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.eje--ok .eje__semaforo{ background:var(--semaforo-ok); }
.eje--warn .eje__semaforo{ background:var(--ambar); }
.eje--critical .eje__semaforo{ background:var(--rojo); }
.eje__name{ font-family:var(--font-subhead); font-weight:700; font-size:var(--text-base); color:var(--ambar); flex:1; }
.eje__score{ font-family:var(--font-subhead); font-weight:700; font-size:var(--text-sm); color:var(--gris-acero-claro); }
.eje__label{
  display:block;
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--gris-acero-claro);
  margin-bottom:var(--space-1);
}
.eje__label--costo{ color:var(--rojo); }
.eje__tag--ventaja{ color:var(--semaforo-ok); }
.eje__hallazgo{ font-size:var(--text-sm); color:var(--off-white); }
.eje__impacto{ font-size:var(--text-sm); color:var(--off-white); border-top:1px solid var(--gris-acero); padding-top:var(--space-3); }

/* Eje crítico: destacado con el motivo de bolt */
.eje--foco{
  border-color:var(--rojo);
  position:relative;
  padding-left:calc(var(--space-5) + 6px);
}
.eje--foco::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:linear-gradient(180deg, var(--rojo), var(--ambar));
  clip-path:polygon(0 0,100% 0,100% 35%,40% 50%,100% 65%,100% 100%,0 100%);
}
.eje__tag{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--rojo);
}
.eje__detalle{ font-size:var(--text-sm); color:var(--off-white); border-top:1px dashed var(--gris-acero); padding-top:var(--space-3); }

@container eje (max-width: 16rem){
  .eje__name{ font-size:var(--text-sm); }
}

/* ============================================================
   ERROR STATE
   ============================================================ */
/* Sin cupo: pantalla terminada con etiqueta, título con el estilo de los H1 y el texto aprobado. */
.fila__inner{ display:grid; gap:var(--space-5); max-width:42rem; }
.fila__texto{ font-size:var(--text-lg); color:var(--off-white); max-width:38ch; }
.error-state{ max-width:34rem; display:grid; gap:var(--space-5); }
.error-state__title{ font-size:var(--text-xl); color:var(--rojo); }
.error-state__message{ font-size:var(--text-base); color:var(--off-white); }

/* ============================================================
   COMPARTIR: envía el reporte a alguien más, no es CTA hacia Heureka!
   ============================================================ */
.share{
  display:grid;
  gap:var(--space-3);
  padding-top:var(--space-5);
  border-top:1px solid var(--obsidiana-suave);
}
.share__prompt{
  font-size:var(--text-base);
  color:var(--off-white);
  max-width:48ch;
}
.share .btn{ width:fit-content; }

.result__another{
  background:none;
  border:none;
  color:var(--gris-acero-claro);
  font-size:var(--text-sm);
  font-family:var(--font-subhead);
  font-weight:700;
  cursor:pointer;
  padding:0;
  width:fit-content;
  margin-top:var(--space-2);
}
.result__another:hover{ color:var(--ambar); }
.result__signature{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--obsidiana-suave);
  font-size:var(--text-xs);
  font-style:italic;
  color:var(--gris-acero);
}
.result__signature .icon-bolt{ color:var(--ambar); opacity:0.7; }
/* Enlace de regreso a la Sede dentro de las firmas: mismo color y tamaño que el texto, subrayado fino */
.hero__signature a, .result__signature a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:0.15em; }
.hero__signature a:hover, .result__signature a:hover{ color:var(--ambar); }

/* ============================================================
   RESPONSIVE: Nivel 3 (último recurso, ligado a viewport)
   ============================================================ */
@media (max-width:40rem){
  .hero__form{ flex-direction:column; }
  .hero__input-wrap{ flex:none; }
  .cta__actions{ flex-direction:column; }
  .cta__actions .btn{ width:100%; justify-content:center; }
  .result__score-row{ align-items:flex-start; flex-direction:column; gap:var(--space-3); }
}

/* Grid de dimensiones: 3x2 en desktop y tablet horizontal, 2x3 en tablet vertical,
   1 columna en móvil (definido arriba, sin media query, ya que es el default). */
@media (min-width:48rem) and (orientation:portrait){
  .ejes{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:48rem) and (orientation:landscape){
  .ejes{ grid-template-columns:repeat(3, 1fr); }
}

/* Visually hidden util (para aria-live sin ocupar layout cuando no aplica) */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

/* ============================================================
   DIAGNÓSTICO ESPEJO: componentes nuevos, con los mismos tokens
   ============================================================ */
button,input,select{ font-family:inherit; }
select:focus-visible{ outline:3px solid var(--ambar); outline-offset:3px; }
select.input{ appearance:none; padding-right:2.5rem; background-image:linear-gradient(45deg, transparent 50%, var(--gris-acero-claro) 50%), linear-gradient(135deg, var(--gris-acero-claro) 50%, transparent 50%); background-position:calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%; background-size:0.35rem 0.35rem; background-repeat:no-repeat; }
.form-field__ayuda{ font-size:var(--text-xs); color:var(--gris-acero-claro); line-height:1.5; }
.form-row{ display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); }
.form-check--sub{ margin-top:var(--space-2); }
.form-check--sub label{ font-weight:500; color:var(--gris-acero-claro); }
fieldset.form-field{ border:none; margin:0; padding:0; min-width:0; }
fieldset.form-field legend{ font-family:var(--font-subhead); font-weight:700; font-size:var(--text-sm); color:var(--off-white); padding:0; margin-bottom:var(--space-2); }
.redes{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); }
.espejo__form{ display:grid; gap:var(--space-5); max-width:36rem; margin-top:var(--space-3); }
.espejo__separador{ border:none; border-top:1px solid var(--obsidiana-suave); margin:var(--space-2) 0; }
.loading__fija{ font-size:var(--text-sm); color:var(--gris-acero-claro); }

/* Reporte. El logo va en el flujo: del logo al H1 queda --space-6. */
.screen--result{ padding-top:var(--space-6); }
/* Una sola columna que nunca se ensancha por su contenido (minmax(0, 1fr)): ningún botón ni etiqueta
   largos empujan la página más allá de la pantalla del celular. Centrada en la pantalla. */
.reporte__inner{ display:grid; gap:0; width:100%; max-width:55rem; margin-inline:auto; grid-template-columns:minmax(0, 1fr); }
#bloques{ display:grid; gap:var(--section-space); }
.reporte__inner > * + *{ margin-top:var(--section-space); }
.reporte__inner > .reporte__agenda-arriba{ margin-top:var(--space-7); }
.reporte__titulo + .reporte__contexto{ margin-top:var(--space-4); }
.reporte__contexto + .reporte__intro{ margin-top:var(--space-5); }
.reporte__titulo{ font-size:var(--text-2xl); color:var(--blanco); }
.reporte__contexto{ font-size:var(--text-sm); color:var(--gris-acero-claro); }
.reporte__intro{ font-size:var(--text-base); color:var(--off-white); max-width:60ch; }
.bloque{ display:grid; gap:0; }
.bloque__pregunta{ margin-top:var(--space-3); }
.bloque .cita-plegable{ margin-top:var(--space-5); }
.bloque .cita-incompleta, .bloque .fuentes{ margin-top:var(--space-4); }
.bloque .aviso-cita{ margin-top:var(--space-3); }
.bloque__titulo{ font-size:var(--text-xl); color:var(--blanco); }
.bloque__pregunta{ font-family:var(--font-subhead); font-weight:700; font-size:var(--text-base); color:var(--ambar); }
.cita{
  margin:0;
  background:var(--obsidiana-suave);
  border-left:4px solid var(--ambar);
  border-radius:var(--radius);
  --cita-relleno:var(--space-6);
  padding:var(--cita-relleno);
  display:grid;
  gap:var(--space-3);
  color:var(--off-white);
  font-size:var(--text-base);
  line-height:1.7;
  overflow-wrap:anywhere;
}
.cita p, .cita ul, .cita ol, .cita blockquote{ margin:0; }
.cita ul{ list-style:disc; padding-left:1.4em; }
.cita ol{ list-style:decimal; padding-left:1.6em; }
.cita li + li{ margin-top:var(--space-1); }
.cita blockquote{ border-left:2px solid var(--gris-acero); padding-left:var(--space-4); }
.cita hr{ border:none; border-top:1px solid var(--gris-acero); margin:0; width:100%; }
.cita code{ font-size:0.92em; background:var(--obsidiana); padding:0 0.25em; border-radius:4px; }
.cita a{ color:var(--ambar); text-underline-offset:0.15em; }
.cita__titulo strong{ font-family:var(--font-subhead); color:var(--blanco); }
.cita__tabla{ overflow-x:auto; }
.cita table{ border-collapse:collapse; font-size:var(--text-sm); min-width:100%; }
.cita th, .cita td{ border:1px solid var(--gris-acero); padding:var(--space-2) var(--space-3); text-align:left; vertical-align:top; }
.cita th{ color:var(--blanco); }
.fuentes{ display:grid; gap:var(--space-2); }
.fuentes__titulo{ font-family:var(--font-subhead); font-weight:700; font-size:var(--text-sm); color:var(--off-white); }
.fuentes__lista{ display:grid; gap:var(--space-2); list-style:disc; padding-left:1.2em; }
.fuentes__lista li{ font-size:var(--text-sm); color:var(--gris-acero-claro); overflow-wrap:anywhere; }
.fuentes__lista a{ color:var(--off-white); text-underline-offset:0.15em; }
.fuentes__lista a:hover{ color:var(--ambar); }
.fuentes__vacio{ font-size:var(--text-sm); color:var(--gris-acero-claro); }
/* Aviso bajo la cita: pequeño, gris y legible. --gris-acero-claro sobre --obsidiana pasa WCAG AA
   (la prueba de contraste lo mide). */
.aviso-cita{ font-size:var(--text-xs); color:var(--gris-acero-claro); line-height:1.5; }
.cita-incompleta{ font-size:var(--text-sm); color:var(--ambar); font-weight:600; }
.reporte__terceros{ font-size:var(--text-sm); color:var(--gris-acero-claro); max-width:60ch; line-height:1.6; }
.reporte__terceros a{ color:var(--off-white); text-decoration:underline; text-underline-offset:0.15em; overflow-wrap:anywhere; }
.reporte__lectura{ font-size:var(--text-base); color:var(--off-white); max-width:60ch; line-height:1.7; }
.reporte__inner .result__head{ gap:0; }
.reporte__otras{ font-size:var(--text-sm); color:var(--gris-acero-claro); max-width:60ch; }
.reporte__pie{ font-size:var(--text-xs); color:var(--gris-acero-claro); border-top:1px solid var(--obsidiana-suave); padding-top:var(--space-5); }
.reporte__pie a{ color:var(--off-white); text-decoration:underline; text-underline-offset:0.15em; }
.btn--wa{ display:inline-flex; align-items:center; gap:var(--space-2); text-decoration:none; }
a.btn{ text-decoration:none; }

/* ============================================================
   REPORTE: marcador, citas plegadas y fuentes plegadas (2026-11-05)
   ============================================================ */
.marcador{ display:grid; gap:var(--space-4); grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); }
.marcador--una{ grid-template-columns:1fr; }
.marcador__tarjeta{
  background:var(--obsidiana-suave);
  border-left:4px solid var(--ambar);
  border-radius:var(--radius);
  padding:var(--space-6);
  display:grid;
  gap:var(--space-3);
  align-content:start;
}
.marcador__etiqueta{
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--gris-acero-claro);
}
.marcador__grande{ font-family:var(--font-heading); font-weight:900; font-size:var(--text-2xl); line-height:1; color:var(--blanco); }
.marcador__grande--ambar{ color:var(--ambar); }
.marcador__grande--verde{ color:var(--semaforo-ok); }
.marcador__detalle{ font-size:var(--text-sm); color:var(--gris-acero-claro); }
.marcador__nombres{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.marcador__nombres li{
  font-family:var(--font-subhead);
  font-weight:600;
  font-size:var(--text-xs);
  color:var(--off-white);
  background:var(--obsidiana);
  border:1px solid var(--gris-acero);
  border-radius:999px;
  padding:0.3em 0.8em;
}
@media (max-width:48rem){
  .marcador{ grid-template-columns:1fr; }
}

/* Cita plegada a unas 8 líneas con degradado; el texto completo está en el DOM. */
.cita-plegable{ display:grid; gap:var(--space-4); }
.cita-plegable.is-plegada .cita{ max-height:calc(8 * 1.7em + 2 * var(--cita-relleno)); overflow:hidden; position:relative; }
.cita-plegable.is-plegada .cita::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:4.5em;
  background:linear-gradient(180deg, rgba(28, 42, 77, 0), var(--obsidiana-suave));
  pointer-events:none;
}
.cita-plegable__boton{
  justify-self:start;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-subhead);
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--ambar);
}
.cita-plegable__boton::after{ content:" ▾"; }
.cita-plegable__boton:hover{ color:var(--ambar-hover); }
.cita-plegable__boton:focus-visible{ outline:3px solid var(--ambar); outline-offset:3px; }

/* Fuentes plegadas. */
.fuentes__plegadas{ border:1px solid var(--gris-acero); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.fuentes__plegadas summary{ cursor:pointer; list-style:none; }
.fuentes__plegadas summary::-webkit-details-marker{ display:none; }
.fuentes__plegadas summary::after{ content:" ▾"; }
.fuentes__plegadas[open] summary::after{ content:" ▴"; }
.fuentes__plegadas[open] .fuentes__lista{ margin-top:var(--space-3); }
.fuentes__plegadas summary:focus-visible{ outline:3px solid var(--ambar); outline-offset:3px; }

/* En celular los botones largos (compartir, WhatsApp) parten en dos líneas en vez de desbordar. */
@media (max-width:40rem){
  .reporte__inner .btn{ white-space:normal; text-align:center; }
}

/* En celular el relleno de la cita y de "Esto tiene arreglo" baja para que la columna de texto
   no quede angosta. La cita baja a --space-4 porque con --space-5 daba 5 palabras por línea a
   360 px. Escritorio se queda con --space-6 y --space-7. */
@media (max-width:40rem){
  .cita{ --cita-relleno:var(--space-4); }
  .reporte__inner .cta{ padding:var(--space-5); }
}

/* Llamada a la acción por caso: la frase va arriba del botón, alineada a la izquierda con él, y se
   lee con el botón como una sola pieza. "45 minutos, en vivo, contigo." va debajo del botón. */
.cta-caso{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.cta-caso__fila{ display:flex; align-items:flex-start; gap:var(--space-4); flex-wrap:wrap; }
.cta-caso__frase{ margin:0; font-family:var(--font-heading); font-weight:900; font-size:var(--text-xl); line-height:1.1; color:var(--blanco); }
.cta-caso__accion{ display:grid; gap:var(--space-2); justify-items:center; }
.cta-caso__detalle{ font-size:var(--text-xs); color:var(--gris-acero-claro); }
@media (max-width:40rem){
  .cta-caso{ align-items:stretch; }
  .cta-caso__accion{ justify-items:stretch; text-align:center; }
  .cta-caso__accion .btn{ width:100%; }
  .cta-caso__fila{ flex-direction:column; align-items:stretch; }
  .cta-caso__fila > .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   COOKIES: pie y banner, replicados del Diagnóstico Relámpago (main, 0181c49)
   ============================================================ */
/* Pie: preferencias de cookies y aviso de privacidad */
.pie{
  max-width:var(--content-width); margin:0 auto;
  padding:var(--space-6) var(--gutter) var(--space-7);
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5);
  font-size:var(--text-xs); color:var(--gris-acero-claro);
}
.pie a, .pie button{
  color:inherit; background:none; border:0; padding:0; font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:0.15em;
}
.pie a:hover, .pie button:hover{ color:var(--ambar); }

/* Banner de cookies: abajo, sin bloquear la página. Mientras está abierto, espejo-shared.mjs pone
   --alto-cookies y el cuerpo reserva ese espacio abajo para que nada quede debajo del banner. */
body{ padding-bottom:var(--alto-cookies, 0px); }
.cookies{
  position:fixed; z-index:50; left:var(--space-4); right:var(--space-4); bottom:var(--space-4);
  max-width:34rem; margin-left:auto;
  max-height:calc(100dvh - 2 * var(--space-4)); overflow-y:auto;
  background:var(--obsidiana-suave); color:var(--off-white);
  border:1px solid var(--gris-acero); border-radius:var(--radius);
  padding:var(--space-5); box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.cookies__titulo{ font-size:var(--text-lg); margin-bottom:var(--space-3); }
.cookies__texto{ font-size:var(--text-sm); }
.cookies__texto a{ color:var(--off-white); text-decoration:underline; text-underline-offset:0.15em; }
.cookies__texto a:hover{ color:var(--ambar); }
.cookies__grupos{ margin-top:var(--space-5); display:grid; gap:var(--space-4); }
.cookies__grupo label{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); font-weight:700; font-size:var(--text-sm); }
.cookies__grupo input{ width:1.1rem; height:1.1rem; margin:0; accent-color:var(--ambar); }
.cookies__grupo p{ font-size:var(--text-xs); color:var(--gris-acero-claro); margin-top:var(--space-2); }
.cookies__fija{ font-weight:400; font-size:var(--text-xs); color:var(--gris-acero-claro); }
.cookies__botones{ margin-top:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-3); }
.cookies__botones .btn{ flex:1 1 auto; padding:0.75rem 1.1rem; font-size:var(--text-sm); }