/* ============================================================
   NUTRISLIM — test de salud
   Hereda todo el sistema de style.css: colores, tipografías,
   curvas y paletas. Acá sólo vive lo propio del test.
   ============================================================ */

.quiz-page{ background:var(--overlay); color:var(--light); }
.quiz-page::after{ opacity:.045; }   /* el grano, un punto más suave sobre oscuro */

/* ── barra superior ─────────────────────────────────────────── */
.qbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:clamp(14px,3vw,32px);
  padding:16px var(--gut);
  background:linear-gradient(to bottom, rgba(var(--scrim-rgb),.9), rgba(var(--scrim-rgb),0));
}
.qbar__back{ display:grid; place-items:center; width:24px; color:var(--sand); flex:none; }
.qbar__back svg{ width:15px; height:24px; }

.qbar__track{ flex:1; height:1px; background:var(--light-20); position:relative; overflow:hidden; }
.qbar__track i{
  position:absolute; inset:0; background:var(--sand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--expoOut);
}
.qbar__count{
  flex:none; margin:0;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.16em; color:var(--light-40);
}
.qbar.is-hidden .qbar__track, .qbar.is-hidden .qbar__count{ opacity:0; }

/* ── pantallas ──────────────────────────────────────────────── */
.quiz{
  min-height:100vh; min-height:100svh; display:grid; position:relative;
}
.qscreen{
  grid-area:1/1; display:flex;
  /* `center` a secas reparte el excedente arriba y abajo cuando el
     contenido no entra: en un teléfono eso empujaba la pregunta fuera
     de la pantalla y obligaba a scrollear para encontrarla. `safe`
     centra sólo mientras sobre lugar; si falta, se comporta como
     `start` y el contenido queda pegado arriba, que es lo correcto. */
  align-items:center;
  align-items:safe center;
  padding:clamp(72px,9vh,110px) 0 clamp(40px,6vh,70px);
  /* Las cuatro pantallas comparten celda. Con `visibility:hidden` las
     ocultas seguían ocupando altura, así que la página medía siempre lo
     que la más larga —el resultado, con sus 17 áreas—: al abrir el test
     aparecía una barra de scroll de la nada y el contenido de la portada
     quedaba empujado hacia abajo. Sacándolas del flujo, la página mide
     exactamente lo que se está viendo. */
  position:absolute; top:0; left:0; width:100%;
  /* Fuera del flujo ya no aportan altura, pero una pantalla oculta más
     larga que la visible seguía estirando el área de scroll. Recortarlas
     al alto de la ventana la deja en manos de la pantalla activa, que es
     la única que puede crecer. */
  max-height:100svh; overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .55s var(--expoOut), transform .65s var(--expoOut), visibility .55s;
}
.qscreen.is-on{
  position:relative;
  max-height:none; overflow:visible;
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}

.qshell{ width:100%; max-width:760px; margin-inline:auto; padding-inline:var(--gut); }
.qshell--wide{ max-width:1040px; }

/* ── portada ────────────────────────────────────────────────── */
.qtitle{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(32px,5.2vw,64px); line-height:1.04;
  letter-spacing:-.025em; margin:0 0 26px; color:var(--light);
}
.qlead{ font-size:clamp(16px,1.4vw,19px); line-height:1.65; color:var(--light-60); margin:0 0 20px; }
.qlead em{ font-style:normal; color:var(--sand); }
.qnote{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--light-40); margin:0 0 40px;
}
.qstart{ min-width:180px; justify-content:center; }

/* ── pregunta ───────────────────────────────────────────────── */
/* ── íconos de área ─────────────────────────────────────────
   Trazo fino, un solo color, y un tinte propio por área: apenas
   suficiente para que cada pantalla se sienta distinta sin salirse
   de la paleta. El color va en --tint, lo pone el motor. */
.qsprite{ position:absolute; width:0; height:0; overflow:hidden; }

.qarea__i{
  width:clamp(34px,4vw,46px); height:clamp(34px,4vw,46px);
  margin:0 0 16px;
  color:var(--tint, var(--sand));
  fill:none; stroke:currentColor;
  stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 22px color-mix(in srgb, var(--tint, var(--sand)) 35%, transparent));
  animation:qIcon .7s var(--expoOut);
}
@keyframes qIcon{
  from{ opacity:0; transform:translateY(10px) scale(.94); }
}

.qarea__n{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.22em; color:var(--tint, var(--sand)); margin:0 0 16px;
}

/* las fichas marcadas toman el color del área */
.qchip.is-on{ background:var(--tint, var(--sand)); border-color:var(--tint, var(--sand)); }
.qchip.is-on::before{ box-shadow:inset 0 0 0 3px var(--tint, var(--sand)); }
.qarea__t{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(30px,4.4vw,52px); line-height:1.06;
  letter-spacing:-.02em; margin:0 0 clamp(22px,3vh,34px); color:var(--light);
}

.qchips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3.5vh,40px); }
.qchip{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px 12px 15px; border-radius:100px;
  border:1px solid var(--light-20); color:var(--light-60);
  font-size:14.5px; line-height:1.2; text-align:left;
  transition:border-color .35s var(--expoOut), color .35s var(--expoOut),
             background .35s var(--expoOut), transform .35s var(--expoOut);
}
.qchip:hover{ border-color:var(--light-40); color:var(--light); }
.qchip::before{
  content:""; flex:none; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--light-40);
  transition:background .3s var(--expoOut), border-color .3s var(--expoOut),
             box-shadow .3s var(--expoOut);
}
.qchip.is-on{
  color:var(--overlay); background:var(--sand); border-color:var(--sand);
  transform:translateY(-1px);
}
.qchip.is-on::before{
  background:var(--overlay); border-color:var(--overlay);
  box-shadow:inset 0 0 0 3px var(--sand);
}

.qnav{ display:flex; gap:10px; align-items:center; }
.qback{ color:var(--light-40); border-color:var(--light-10); }
.qback:hover{ background:transparent; border-color:var(--light-40); color:var(--light); }
.qnext{ min-width:150px; justify-content:center; }

/* ── resultado ──────────────────────────────────────────────── */
.rhead{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,56px); align-items:center;
  padding-bottom:clamp(30px,4vh,46px);
  border-bottom:1px solid var(--light-10);
  margin-bottom:clamp(30px,4vh,46px);
}
.rscore{ display:flex; flex-direction:column; align-items:flex-start; }
.rscore__n{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(72px,11vw,150px); line-height:.85;
  letter-spacing:-.05em; color:var(--sand);
}
.rscore__l{
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.18em; color:var(--light-40); margin-top:12px;
}
.rsay__t{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,3.2vw,42px); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 14px; color:var(--light);
}
.rsay__d{ font-size:15.5px; line-height:1.7; color:var(--light-60); margin:0; max-width:52ch; }

.rtop{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.2em; color:var(--light-40); margin:0 0 22px;
}
.rbars{ display:flex; flex-direction:column; gap:2px; margin-bottom:clamp(36px,5vh,56px); }
.rbar{
  display:grid; grid-template-columns:44px 22px 1fr 34px;
  gap:14px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--light-10);
}
.rbar__i{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
  color:var(--tint, var(--light-20));
}
.rbar__n, .rbar__v{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--light-40);
}
.rbar__v{ text-align:right; color:var(--tint, var(--sand)); }
.rbar__t{ display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--light-60); }
.rbar__line{ flex:1; height:2px; background:var(--light-10); position:relative; overflow:hidden; }
.rbar__line i{
  position:absolute; inset:0; background:var(--tint, var(--sand));
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--expoOut);
}
.rbar.is-in .rbar__line i{ transform:scaleX(var(--w,0)); }
.rbar--zero .rbar__t{ color:var(--light-20); }
.rbar--zero .rbar__i{ color:var(--light-10); }

.ract{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.rlegal{
  font-family:var(--font-mono); font-size:10px; line-height:1.8;
  letter-spacing:.05em; color:var(--light-40);
  max-width:80ch; margin:34px 0 0;
  padding-top:20px; border-top:1px solid var(--light-10);
}
.rnote{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--light-40); }

/* Los ideogramas y el hangul ocupan más alto y no toleran el
   interletrado ancho; el cirílico necesita algo menos. */
html[lang="ko"] .qtitle, html[lang="zh-Hant"] .qtitle{ font-size:clamp(27px,4.2vw,50px); line-height:1.28; letter-spacing:0; }
html[lang="ko"] .qarea__t, html[lang="zh-Hant"] .qarea__t{ font-size:clamp(26px,3.6vw,42px); line-height:1.24; letter-spacing:0; }
html[lang="ko"] .rsay__t, html[lang="zh-Hant"] .rsay__t{ font-size:clamp(21px,2.7vw,34px); line-height:1.3; letter-spacing:0; }
html[lang="ko"] .qarea__n, html[lang="zh-Hant"] .qarea__n,
html[lang="ko"] .qnote,    html[lang="zh-Hant"] .qnote,
html[lang="ko"] .rtop,     html[lang="zh-Hant"] .rtop{ letter-spacing:.06em; }
html[lang="ru"] .qtitle{ font-size:clamp(28px,4.4vw,54px); letter-spacing:-.01em; }
html[lang="ru"] .qarea__t{ font-size:clamp(27px,3.8vw,46px); letter-spacing:-.01em; }
html[lang="de"] .qarea__t{ font-size:clamp(26px,3.8vw,46px); }

@media (max-width:700px){
  .rhead{ grid-template-columns:1fr; }
  .rbar{ grid-template-columns:34px 18px 1fr 28px; gap:9px; }
  .rbar__i{ width:17px; height:17px; }
  .rbar__t{ font-size:13px; }
  .qnext, .qstart{ flex:1; }
}

/* ============================================================
   EL CUERPO
   Acompaña el test: cada área que se completa enciende su zona.
   El dibujo es un solo trazo espejado — mismo lenguaje de línea
   que los 17 íconos, las banderas y la hélice del dock.
   ============================================================ */

.qshell--split{
  max-width:1080px;
  display:grid; grid-template-columns:1fr 220px;
  gap:clamp(24px,4vw,56px); align-items:center;
}
.rsplit{
  display:grid; grid-template-columns:1fr 300px;
  gap:clamp(28px,5vw,64px); align-items:center;
}

.qbody{ justify-self:center; }
.qbody svg{ height:min(46vh,360px); width:auto; max-width:100%; overflow:visible; }
.qbody--res svg{ height:min(44vh,340px); }
.qbody__l{
  margin:18px 0 0; text-align:center;
  font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.16em; color:var(--light-40);
}

.b-line{
  fill:rgba(var(--paper-rgb),.045);
  stroke:rgba(var(--paper-rgb),.30);
  stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round;
  transition:fill .8s var(--expoOut), stroke .8s var(--expoOut);
}
.b-zone{ opacity:0; transition:opacity .9s var(--expoOut); }
.b-zone.is-on{ opacity:var(--lvl,.7); }

/* el destello al completar un área: la respuesta inmediata */
@keyframes zonePop{ 0%{transform:scale(.86)} 55%{transform:scale(1.14)} 100%{transform:scale(1)} }
.b-zone.pop{ animation:zonePop .75s var(--expoOut); transform-origin:center; transform-box:fill-box; }
.b-ring{ fill:none; stroke-width:1; opacity:0; transform-origin:center; transform-box:fill-box; }
@keyframes ringOut{ 0%{opacity:.8; transform:scale(.4)} 100%{opacity:0; transform:scale(1.9)} }
.b-ring.pop{ animation:ringOut .9s var(--expoOut); }

/* ── elección de silueta ─────────────────────────────────── */
.bpick{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,20px); max-width:660px; }
.bpick__b{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:24px 16px 18px; border-radius:var(--media-radius);
  border:1px solid var(--light-10); background:rgba(var(--paper-rgb),.03);
  color:var(--light-60);
  transition:border-color .4s var(--expoOut), background .4s var(--expoOut),
             color .4s var(--expoOut), transform .4s var(--expoOut);
}
.bpick__b:hover{ border-color:var(--light-40); color:var(--light); transform:translateY(-3px); }
.bpick__b.is-on{ border-color:var(--sand); color:var(--light); background:rgba(var(--paper-rgb),.07); }
.bpick__b svg{ width:auto; height:104px; }
.bpick__b span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-align:center; line-height:1.6; }

@media (max-width:900px){
  /* En el teléfono la altura es el único recurso escaso. Apilar la
     silueta encima de la pregunta le costaba 220 px al contenido y
     empujaba el botón fuera de la pantalla: había que scrollear a
     ciegas para poder avanzar.
     Se resuelve poniéndola al costado del título, en el hueco que ese
     bloque ya desperdicia. El `display:contents` del envoltorio deja
     que sus hijos entren como celdas del mismo grid, así las fichas
     pueden ocupar el ancho completo debajo de las dos columnas. */
  .qshell--split{
    grid-template-columns:1fr 118px;
    column-gap:16px; row-gap:0; align-items:start;
  }
  .qshell--split > div:first-child{ display:contents; }
  /* Acotadas al recuadro de preguntas: el del resultado también lleva
     la clase .qbody, y sin el prefijo le nacía una segunda columna. */
  .qshell--split .qarea__i{ grid-column:1; grid-row:1; margin-bottom:10px; }
  .qshell--split .qarea__n{ grid-column:1; grid-row:2; }
  .qshell--split .qarea__t{ grid-column:1; grid-row:3; }
  .qshell--split .qbody   { grid-column:2; grid-row:1 / span 3; align-self:start; }
  .qshell--split .qchips  { grid-column:1 / -1; grid-row:4; gap:7px; margin-bottom:22px; }
  .qshell--split .qnav    { grid-column:1 / -1; grid-row:5; }

  /* Centrar verticalmente es un lujo de pantalla ancha. En el teléfono
     deja un hueco muerto debajo de la barra de progreso y empuja las
     fichas hacia abajo: el contenido arranca arriba y punto. */
  .qscreen{ align-items:start; padding-top:76px; }
  /* La portada y el resultado sí respiran centrados: son cortos. */
  #qIntro{ align-items:safe center; padding-top:48px; }
  .qshell--split .qbody svg{ height:min(17vh,132px); }
  /* La leyenda sobra al lado del título: el gesto se lee solo. En el
     resultado vuelve, porque ahí la silueta es el protagonista. */
  .qshell--split .qbody__l{ display:none; }

  .rsplit{ grid-template-columns:1fr; }
  .qbody--res{ order:-1; margin-bottom:18px; }
  .qbody--res svg{ height:min(30vh,250px); }
  .qbody--res .qbody__l{ display:block; margin-top:12px; }
  .bpick{ grid-template-columns:1fr; max-width:420px; }
  .bpick__b{ flex-direction:row; justify-content:flex-start; gap:20px; padding:14px 18px; }
  .bpick__b svg{ height:64px; }
  .bpick__b span{ text-align:left; }
}