/* ==========================================================================
   OnDev Website Check  ·  capa propia de /free-website-review

   Esta hoja NO redefine el sistema: se carga DESPUÉS de ondev.css y solo
   añade lo que el funnel necesita. Tipografías, colores, botones, campos,
   radios y sombras salen tal cual de los tokens de la marca.

   TEMA        Oscuro en toda la página, sin excepción. El sitio grande
               alterna oscuro->claro->oscuro porque cuenta una historia;
               aquí el usuario responde un cuestionario y cualquier cambio
               de fondo a mitad de flujo se lee como "cambié de web".
   RADIOS      Se respeta la escala del proyecto: píldora en botones,
               16px en tarjetas de opción, 12px en campos.
   PANTALLAS   Solo una visible a la vez. Cada una ocupa el alto completo
               y centra su contenido, así el paso de pregunta a pregunta
               no mueve el layout ni un píxel.
   ========================================================================== */

/* ---------- Armazón ---------- */
.wc-shell{
  min-height:100dvh;                 /* nunca 100vh: en iOS Safari la barra
                                        de direcciones haría saltar el alto */
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.wc-shell .bg-grid{ position:fixed; }  /* la trama no debe scrollear con el contenido */

/* Barra superior: solo logo. El brief pide una vuelta discreta a OnDev,
   no un menú. Sin enlaces de sección, sin CTA, sin selector de idioma. */
.wc-top{
  position:relative; z-index:2;
  padding:18px 0;
}
.wc-top__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wc-top .brand__txt{ font-size:1.24rem; }
.wc-top__back{
  font-size:.82rem; color:var(--dim);
  display:inline-flex; align-items:center; gap:7px;
  transition:color .25s;
}
.wc-top__back:hover{ color:var(--cyan); }
.wc-top__back svg{ width:14px; height:14px; flex:none; }

/* ---------- Escenario ---------- */
.wc-stage{
  position:relative; z-index:1; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(24px,5vw,48px);
}
/* Centrar verticalmente es lo correcto para una pregunta suelta, pero en una
   pantalla alta deja el intro flotando a media página y eso se lee como un
   fallo de maquetación, no como aire. El intro se ancla arriba; el resto de
   pantallas, que son cortas, siguen centradas. */
@media (min-height:760px){
  .wc-stage.is-intro{ justify-content:flex-start; padding-top:clamp(36px,6vh,80px); }
}
.wc-screen[hidden]{ display:none; }
.wc-screen{ animation:wc-in .34s var(--ease) both; }
@keyframes wc-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* El foco entra en el titular al cambiar de pantalla para que el lector de
   pantalla anuncie la pregunta nueva, pero el anillo del navegador sobre un
   titular completo es ruido visual: se recibe el foco sin dibujarlo. */
.wc-focus:focus{ outline:none; }

/* Visible solo para lectores de pantalla. */
.wc-sr{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}

/* ==========================================================================
   INTRO
   Reparto 1.1 / 0.9 en escritorio, una columna en móvil. El visual va
   DESPUÉS del CTA en el orden del DOM para que en móvil el botón quede
   por encima del pliegue sin depender de order: nadie scrollea un anuncio.
   ========================================================================== */
.wc-intro{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(34px,5vw,64px); align-items:center;
}
.wc-intro__copy{ min-width:0; }
.wc-intro h1{
  font-size:clamp(1.72rem,3.3vw,2.4rem);
  line-height:1.14; margin-bottom:18px; text-wrap:balance;
}
.wc-intro .lead{ max-width:44ch; margin-bottom:28px; }

/* Métricas: tres datos cortos separados por línea fina, sin tarjetas.
   Una tarjeta por dato aquí sería envolver tres palabras en tres cajas. */
.wc-metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-bottom:30px;
}
.wc-metric{ background:var(--surface-1); padding:16px 14px; }
.wc-metric small{
  display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:6px;
}
.wc-metric b{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:.95rem; color:var(--fg-strong); line-height:1.3;
}

/* ---------- Visual de análisis ---------- */
/* Esquema abstracto de una web siendo revisada: marco de navegador, bloques
   de maqueta y una línea de escaneo. Deliberadamente esquemático, sin texto
   ni cifras falsas: representa el análisis, no simula una captura real. */
.wc-scan{ width:100%; max-width:500px; margin-inline:auto; display:block; }
.wc-scan__frame{ fill:var(--surface-1); stroke:var(--line-strong); }
.wc-scan__chrome{ fill:var(--surface-3); }
.wc-scan__dot{ fill:var(--dim); }
.wc-scan__block{ fill:var(--surface-3); }
.wc-scan__block--accent{ fill:rgba(var(--accent-rgb),.30); }
.wc-scan__line{ stroke:var(--cyan); stroke-width:1.5; }
.wc-scan__sweep{ animation:wc-sweep 3.6s var(--ease-soft) infinite; }
@keyframes wc-sweep{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(104px) }
}
.wc-scan__bar{ fill:var(--metal-3); }
.wc-scan__bar--hi{ fill:var(--cyan); }

/* ==========================================================================
   QUIZ
   ========================================================================== */
.wc-quiz{ max-width:640px; margin-inline:auto; width:100%; }

/* Cabecera de progreso: contador + barra. Sin adornos. */
.wc-prog__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:12px;
}
.wc-prog__count{
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.wc-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:500;
  color:var(--muted); transition:color .25s;
}
.wc-back:hover{ color:var(--cyan); }
.wc-back svg{ width:13px; height:13px; flex:none; }
.wc-back[hidden]{ display:none; }

.wc-prog{
  height:4px; background:var(--surface-3); border-radius:999px;
  overflow:hidden; margin-bottom:clamp(30px,5vw,44px);
}
.wc-prog__bar{
  height:100%; width:0; border-radius:999px; background:var(--cyan);
  transition:width .45s var(--ease);
}

.wc-q h2{
  font-size:clamp(1.34rem,2.7vw,1.8rem);
  line-height:1.22; margin-bottom:10px; text-wrap:balance;
}
.wc-q__help{ font-size:.9rem; color:var(--muted); margin:0 0 24px; max-width:52ch; }
.wc-q__head--bare{ margin-bottom:26px; }

/* ---------- Opciones ---------- */
/* Tarjeta completa pulsable, no un radio diminuto con una etiqueta al lado:
   en móvil el objetivo táctil es la fila entera. */
.wc-opts{ display:grid; gap:10px; }
.wc-opt{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:17px 18px; text-align:left; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--line);
  border-radius:var(--r); color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:500;
  transition:border-color .22s, background .22s, transform .22s var(--ease);
}
.wc-opt:hover{ border-color:var(--line-accent); background:var(--surface-2); }
.wc-opt:active{ transform:scale(.988); }
.wc-opt__mark{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line-strong);
  display:grid; place-items:center;
  transition:border-color .22s, background .22s;
}
.wc-opt__mark svg{
  width:12px; height:12px; color:var(--cyan-ink);
  opacity:0; transform:scale(.6);
  transition:opacity .2s, transform .2s var(--ease);
}
.wc-opt.is-picked{ border-color:var(--cyan); background:rgba(var(--accent-rgb),.09); color:var(--fg-strong); }
.wc-opt.is-picked .wc-opt__mark{ background:var(--cyan); border-color:var(--cyan); }
.wc-opt.is-picked .wc-opt__mark svg{ opacity:1; transform:none; }

/* ---------- Escala 1 a 5 ---------- */
/* Radios reales por debajo (teclado y lector de pantalla salen gratis),
   pintados como cinco bloques que se llenan hasta el elegido. */
.wc-rate{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px; }
.wc-rate__opt{ position:relative; }
.wc-rate__opt input{
  position:absolute; inset:0; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer;
}
.wc-rate__box{
  display:grid; place-items:center;
  aspect-ratio:1/1; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1.1rem,3.4vw,1.4rem); color:var(--muted);
  transition:border-color .22s, background .22s, color .22s, transform .22s var(--ease);
}
.wc-rate__opt:hover .wc-rate__box{ border-color:var(--line-accent); color:var(--fg-strong); }
.wc-rate__opt input:focus-visible + .wc-rate__box{ outline:2px solid var(--cyan); outline-offset:3px; }
/* Se rellenan todos los bloques hasta el elegido: la escala se lee como
   un nivel, no como cinco botones sueltos. */
.wc-rate__opt.is-filled .wc-rate__box{
  background:rgba(var(--accent-rgb),.13); border-color:var(--cyan); color:var(--fg-strong);
}
.wc-rate__opt.is-current .wc-rate__box{
  background:var(--cyan); border-color:var(--cyan); color:var(--cyan-ink);
  transform:translateY(-3px);
}
.wc-rate__ends{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.79rem; color:var(--dim); margin-bottom:26px;
}

/* ==========================================================================
   FORMULARIO  (pregunta 7)
   Hereda .form/.field/.field__error de ondev.css. Solo la rejilla es propia.
   ========================================================================== */
.wc-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wc-form .form__note{ margin:0; text-align:center; }

/* .form y .field traen display:grid de ondev.css, y un display de autor gana
   al [hidden]{display:none} del navegador. Sin estas dos líneas el atributo
   hidden no surte efecto: el formulario entero se cuela debajo de la pregunta
   en curso, y a quien responde que no tiene web se le sigue pidiendo su URL. */
.wc-form[hidden]{ display:none; }
.wc-form .field[hidden]{ display:none; }

/* ==========================================================================
   RESULTADO
   ========================================================================== */
.wc-result{ max-width:640px; margin-inline:auto; width:100%; }

.wc-score{ text-align:center; margin-bottom:clamp(30px,5vw,40px); }
.wc-score__dial{ position:relative; width:186px; height:186px; margin:0 auto 20px; }
.wc-score__dial svg{ width:100%; height:100%; display:block; }
.wc-score__track{ fill:none; stroke:var(--surface-3); stroke-width:10; }
.wc-score__arc{
  fill:none; stroke:var(--cyan); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:339.3; stroke-dashoffset:339.3;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.wc-score__mid{
  position:absolute; inset:0; display:grid; place-content:center; gap:3px;
}
.wc-score__num{
  font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:3.3rem; line-height:1; color:var(--fg-strong); text-align:center;
}
/* Solo el denominador se apaga y se encoge. Si esta regla apunta a `span` a
   secas alcanza también a la cifra, y el dato protagonista de la página sale
   gris y en pequeño. */
.wc-score__den{ color:var(--dim); font-size:.4em; letter-spacing:0; }
/* Acotada al hueco interior del aro. Sin este ancho, una etiqueta más larga
   que la inglesa (el español lo es) se sale del círculo y pisa el arco. */
.wc-score__label{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); text-align:center;
  max-width:128px; margin-inline:auto; line-height:1.35; text-wrap:balance;
}
.wc-score__band{
  display:inline-block; padding:8px 18px; border-radius:999px;
  border:1px solid var(--line-accent); background:rgba(var(--accent-rgb),.08);
  font-family:'Space Grotesk',sans-serif; font-size:.88rem; font-weight:500;
  color:var(--cyan-soft);
}

/* ---------- Áreas ---------- */
.wc-areas{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  margin-bottom:18px;
}
.wc-area{
  background:var(--surface-1); padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.wc-area__ico{
  flex:none; width:30px; height:30px; border-radius:var(--r-sm);
  display:grid; place-items:center;
}
.wc-area__ico svg{ width:15px; height:15px; }
.wc-area__ico--warn{ background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn); }
.wc-area__ico--mid{ background:rgba(var(--accent-rgb),.10); border:1px solid var(--line-accent); color:var(--cyan); }
.wc-area__ico--ok{ background:rgba(var(--accent-rgb),.10); border:1px solid var(--line-accent); color:var(--cyan); }
.wc-area__txt{ flex:1; min-width:0; }
.wc-area__txt b{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.98rem; color:var(--fg-strong); }
.wc-area__txt small{ display:block; font-size:.84rem; color:var(--muted); margin-top:2px; }

.wc-note{ font-size:.8rem; color:var(--dim); text-align:center; margin:0 0 clamp(30px,5vw,40px); }

/* ---------- Oferta ---------- */
.wc-offer{ text-align:center; }
.wc-offer h2{ font-size:clamp(1.34rem,2.7vw,1.85rem); margin-bottom:12px; text-wrap:balance; }
.wc-offer .lead{ margin-inline:auto; margin-bottom:26px; }
.wc-offer .btn-row{ justify-content:center; }

/* ---------- Gracias ---------- */
.wc-thanks{ max-width:520px; margin-inline:auto; text-align:center; }
.wc-thanks__ico{
  width:62px; height:62px; border-radius:50%; margin:0 auto 24px;
  display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.12); border:1px solid var(--line-accent); color:var(--cyan);
}
.wc-thanks__ico svg{ width:26px; height:26px; }
.wc-thanks .lead{ margin-inline:auto; }
.wc-thanks .btn-row{ justify-content:center; margin-top:30px; }

/* ---------- Pie mínimo ---------- */
/* El pie de tres columnas del sitio no cabe en un funnel: aquí solo queda
   lo legalmente útil y la vuelta al dominio. */
.wc-foot{
  position:relative; z-index:1;
  border-top:1px solid var(--line); padding:22px 0;
  font-size:.8rem; color:var(--dim);
}
.wc-foot__inner{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between; }
.wc-foot a{ color:var(--dim); transition:color .25s; }
.wc-foot a:hover{ color:var(--cyan); }

.wc-noscript{
  max-width:560px; margin:0 auto; padding:22px 24px;
  border:1px solid var(--warn-line); background:var(--warn-bg);
  border-radius:var(--r); color:var(--warn); font-size:.92rem;
}
.wc-noscript a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   RESPONSIVE  ·  una columna por debajo de 900px
   ========================================================================== */
@media (max-width:900px){
  .wc-intro{ grid-template-columns:1fr; gap:clamp(28px,6vw,40px); }
  .wc-intro .lead{ max-width:none; }
  .wc-scan{ max-width:380px; }
}
@media (max-width:620px){
  .wc-top{ padding:14px 0; }
  .wc-intro h1{ font-size:clamp(1.6rem,7.4vw,2rem); }
  .wc-metrics{ grid-template-columns:1fr; }
  .wc-metric{ display:flex; align-items:baseline; gap:10px; padding:13px 16px; }
  .wc-metric small{ margin-bottom:0; min-width:88px; }
  .wc-form__row{ grid-template-columns:1fr; }
  .wc-score__dial{ width:164px; height:164px; }
  .wc-score__num{ font-size:2.9rem; }
  .wc-opt{ padding:16px; font-size:.97rem; }
  /* El pie a una sola línea centrada: dos bloques sueltos en móvil se leen
     como un menú roto. */
  .wc-foot__inner{ justify-content:center; text-align:center; }
}

/* El escaneo es decoración pura: se detiene si el sistema pide menos
   movimiento. ondev.css ya neutraliza duraciones; esto lo deja en una
   posición de reposo en vez de congelarlo a mitad del barrido. */
@media (prefers-reduced-motion:reduce){
  .wc-scan__sweep{ animation:none; transform:translateY(52px); }
  .wc-screen{ animation:none; }
}