/* La auditoría de tu ficha de Google (/recursos/auditoria-ficha-de-google, 4 nov): lo que solo tiene esta página, sobre el kit v2. La
   herramienta es la página: una tarjeta con las 13 preguntas a la izquierda y, a la derecha, en su panel hundido, el progreso que se
   convierte en el resultado (en el móvil, una pregunta por tarjeta y el resultado debajo). Solo transform y opacity; con «reducir
   movimiento», todo quieto. */

/* ── Los números de las secciones, contados y no escritos: con la lectura con datos apagada, su sección (05) no está y no queda un hueco */
.pag{counter-reset:af-sec}
.pag h2[data-n]{counter-increment:af-sec}
.pag h2[data-n]::before{content:counter(af-sec,decimal-leading-zero) / ""}

/* ── Cabecera compacta: la primera pregunta asoma en la primera pantalla (como la calculadora) */
.cabecera.compacta{padding:calc(var(--cab) + clamp(28px,5vw,64px)) 0 clamp(24px,3vw,36px)}
.compacta .cabecera-texto{max-width:52em;gap:18px}
.compacta .titular{max-width:19em;font-size:clamp(30px,3.7vw,52px)}
.compacta .entradilla{max-width:40em}
.privado{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:560;color:var(--texto-2)}
.privado .ic{flex:none;width:18px;height:18px;color:var(--naranja)}
@media (max-width:760px){.compacta .titular{font-size:clamp(26px,7vw,32px)}.compacta .entradilla{font-size:16px}.cabecera.compacta{padding-bottom:20px}}

/* ── La tarjeta */
.af [hidden]{display:none!important}
.af-bloque{padding-bottom:clamp(40px,5vw,72px)}
.af{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);border-radius:28px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),var(--sombra-flota)}
.af-form{display:grid;gap:26px;align-content:start;padding:clamp(22px,3.4vw,48px)}
.af-form h2{font-size:clamp(23px,2vw,28px);font-weight:420;font-stretch:112%;letter-spacing:-.025em;line-height:1.15}
.af-intro{max-width:36em;font-size:15.5px;line-height:1.55;color:var(--texto-2)}
.af-grupo{display:grid;gap:4px}
.af-grupo h3{display:flex;align-items:center;gap:12px;padding:8px 0 4px;font-size:13px;font-weight:620;letter-spacing:.005em;color:var(--texto-3)}
.af-grupo h3::after{content:"";flex:1;height:1px;background:var(--linea-2)}
.q{display:grid;gap:10px;min-width:0;margin:0;border:0;padding:16px 0 12px}
.q legend{float:left;display:flex;gap:12px;width:100%;padding:0;font-size:17px;font-weight:560;line-height:1.35;color:var(--texto)}
.q-n{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:50%;background:var(--hundido);font-size:12.5px;font-weight:650;color:var(--texto-2);font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.q:has(:checked) .q-n{background:var(--tinta);color:#fff}
.q-ayuda,.af-ayuda{display:block;font-size:13.5px;line-height:1.45;color:var(--texto-3)}
.q-ayuda,.q-op,.q-aviso{margin-left:38px}
.q-op{display:flex;flex-wrap:wrap;gap:6px}
.q-op label{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:9px 14px;border-radius:10px;border:1px solid var(--linea-2);background:#fff;font-size:14.5px;font-weight:520;line-height:1.25;color:var(--texto-2);cursor:pointer;transition:border-color .16s,background .16s,color .16s,transform .16s var(--e)}
.q-op input{position:absolute;opacity:0;pointer-events:none}
.q-op label:hover{border-color:var(--linea-3);transform:translateY(-1px)}
.q-op label:active{transform:scale(.98);transition-duration:.1s}
.q-op label:has(:checked){background:var(--tinta);border-color:var(--tinta);color:#fff}
.q-op label:has(:focus-visible){outline:2px solid var(--tinta);outline-offset:2px}
.q-op label:has(:disabled){opacity:.4;cursor:default;transform:none}
.q.fija label:has(:checked){background:var(--texto-3);border-color:var(--texto-3)}
.q-aviso{display:block;padding:10px 12px 10px 14px;border-radius:10px;background:var(--hundido);box-shadow:inset 3px 0 var(--naranja);font-size:13.5px;line-height:1.45;color:var(--texto-2)}
.af-ir{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-top:6px}
.vivo [data-ver]:not(.listo){background:var(--hundido);border-color:transparent;color:var(--texto-2);box-shadow:none}
.vivo [data-ver]:not(.listo) .flecha{opacity:.4}
.af-reiniciar{min-height:44px;border:0;padding:0;background:none;font:560 14.5px var(--letra);color:var(--texto-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.af-directa{font-size:14px;color:var(--texto-2);text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){.q.falta{animation:af-falta .45s var(--e)}}
@keyframes af-falta{25%{transform:translateX(-6px)}55%{transform:translateX(5px)}80%{transform:translateX(-2px)}}

/* ── El lado: el progreso y, al terminar, el resultado */
.af-lado{position:relative;isolation:isolate;display:grid;gap:22px;align-content:start;min-width:0;padding:clamp(22px,3.4vw,44px);border-radius:0 28px 28px 0;background:var(--hundido)}
.af-lado::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--trama) 0 0/14px 14px;-webkit-mask-image:radial-gradient(70% 45% at 100% 0%,#000 8%,transparent 70%);mask-image:radial-gradient(70% 45% at 100% 0%,#000 8%,transparent 70%)}
.af-progreso{display:grid;gap:26px}
@media (min-width:1000px){.af-progreso{position:sticky;top:calc(var(--cab) + 96px)}}
.af-cuenta{display:flex;align-items:baseline;gap:12px;font-size:clamp(64px,6.4vw,96px);font-weight:300;font-stretch:118%;letter-spacing:-.05em;line-height:.9;color:var(--texto);font-variant-numeric:tabular-nums}
.af-cuenta span{font-size:.3em;letter-spacing:-.01em;color:var(--texto-3)}
.af-mapa{display:grid;gap:14px}
.af-mapa li{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.af-mapa span{flex:0 0 100%;font-size:12.5px;font-weight:560;color:var(--texto-3)}
.af-mapa i{width:16px;height:16px;border-radius:50%;background:var(--pista);transition:background .2s,transform .35s var(--e-back2,ease)}
.af-mapa i.si{background:var(--tinta);transform:scale(1.12)}
.af-escala{display:grid;grid-template-columns:60fr 25fr 15fr;gap:3px;font-size:11.5px;font-weight:600;color:var(--texto-3)}
.af-escala i{padding-top:9px;border-top:5px solid var(--malo-suave);font-style:normal}
.af-escala i+i{border-color:var(--pista)}
.af-escala i:last-child{border-color:#DCEFE7}
.af-salida{display:grid;min-width:0}
.af-vacio{font-size:19px;color:var(--texto-3)}

/* El resultado (nota.js), que se revela por partes */
.af-r{display:grid;gap:28px;min-width:0}
.af-r h4{margin-bottom:12px;font-size:13px;font-weight:620;color:var(--texto-3)}
.af-r.entra>*{opacity:0;transform:translateY(12px)}
.af-r.en>*{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0) * 110ms + 80ms),transform .6s var(--e) calc(var(--i,0) * 110ms + 80ms)}
.af-cab{display:grid;gap:16px}
.af-tit{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.25em;font-size:clamp(20px,1.7vw,24px);font-weight:450;font-stretch:108%;letter-spacing:-.015em;color:var(--texto-2);outline:none}
.af-tit b{min-width:1.15em;font-size:clamp(76px,7.2vw,112px);font-weight:300;font-stretch:118%;letter-spacing:-.055em;line-height:.9;color:var(--texto);font-variant-numeric:tabular-nums}
.af-medidor{position:relative;display:grid;grid-template-columns:60fr 25fr 15fr;gap:3px;height:24px;align-items:center;overflow:hidden}
.af-medidor i{height:8px;border-radius:4px;background:var(--malo-suave)}
.af-medidor i+i{background:var(--pista)}
.af-medidor i+i+i{background:#DCEFE7}
.af-medidor b{position:absolute;left:0;top:0;width:calc(100% - 20px);height:100%;transform:translateX(calc(var(--x) * 100%))}
.af-medidor b::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--tinta);box-shadow:0 0 0 4px var(--hundido)}
.af-r.entra .af-medidor b{transform:none}
.af-r.en .af-medidor b{transform:translateX(calc(var(--x) * 100%));transition:transform 1s var(--e) .2s}
[data-banda="urgente"] .af-medidor b::before{background:var(--malo)}
[data-banda="bien"] .af-medidor b::before{background:var(--bueno)}
.af-banda{font-size:16px;line-height:1.55;color:var(--texto-2)}
.af-banda .pastilla{margin-right:6px;vertical-align:1px}
.af-bloques ul{display:grid;gap:12px}
.af-bloques li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:14.5px;color:var(--texto-2)}
.af-bloques b{font-weight:600;color:var(--texto);font-variant-numeric:tabular-nums}
.af-bloques i{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--pista);overflow:hidden}
.af-bloques i::after{content:"";display:block;height:100%;background:var(--texto);transform-origin:0 50%;transform:scaleX(var(--w))}
.af-r.entra .af-bloques i::after{transform:scaleX(0)}
.af-r.en .af-bloques i::after{transform:scaleX(var(--w));transition:transform .8s var(--e) calc(var(--i,0) * 110ms + 300ms)}
.af-antes ul{display:grid;gap:8px}
.af-antes li{padding:14px 16px 14px 18px;border-radius:14px;background:var(--tarjeta);box-shadow:inset 3px 0 var(--malo),0 0 0 1px var(--linea);font-size:15px;line-height:1.5;color:var(--texto)}
.af-tarjetas,.af-lista{display:grid;gap:10px}
.af-tarjetas li,.af-lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:18px 18px 16px;border-radius:16px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),var(--sombra-tarjeta);transition:transform .2s var(--e),box-shadow .2s}
.af-tarjetas li:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--linea),var(--sombra-alza)}
.af-n{grid-row:span 3;font-size:30px;font-weight:300;font-stretch:118%;letter-spacing:-.04em;line-height:1;color:var(--naranja);font-variant-numeric:tabular-nums}
.af-tarjetas b,.af-lista b{font-size:16.5px;font-weight:600;line-height:1.3;color:var(--texto)}
.af-tarjetas p,.af-lista p{font-size:14.5px;line-height:1.5;color:var(--texto-2)}
.af-r a{color:var(--texto);text-underline-offset:3px}
.af-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--texto-3)}
.af-suma{color:var(--tuyo)}
.af-lista li{padding:14px 16px;box-shadow:0 0 0 1px var(--linea)}
.af-lista .af-n{font-size:20px;color:var(--texto-3)}
.af-comprobar ul{display:grid;gap:8px}
.af-comprobar li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--texto-2)}
.af-comprobar li::before{content:"?";position:absolute;left:0;top:1px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--texto-3);font-size:11px;font-weight:700;color:var(--texto-3)}
.af-bien summary{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:600;color:var(--texto);cursor:pointer;list-style:none}
.af-bien summary::-webkit-details-marker{display:none}
.af-bien summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:300;transition:transform .2s var(--e)}
.af-bien[open] summary::after{transform:rotate(45deg)}
.af-bien summary span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--tarjeta);font-size:12.5px;box-shadow:0 0 0 1px var(--linea)}
.af-bien ul{display:grid;gap:6px;padding:6px 0 4px}
.af-bien li{position:relative;padding-left:26px;font-size:14.5px;color:var(--texto-2)}
.af-bien li::before{content:"";position:absolute;left:3px;top:6px;width:10px;height:6px;border:solid var(--naranja);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* La lectura con datos y la demo, dentro del resultado */
.af-lectura,.af-demo{display:grid;gap:14px;padding:24px;border-radius:20px}
.af-lectura{background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),var(--sombra-tarjeta)}
.af-lectura h3{font-size:clamp(20px,1.7vw,23px);font-weight:450;font-stretch:108%;letter-spacing:-.015em;color:var(--texto)}
.af-lectura>p,.af-demo p{font-size:15px;line-height:1.55;color:var(--texto-2)}
.af-lectura .boton,.af-demo .boton{justify-self:start}
.af-leer{display:grid;gap:16px}
.af-casilla{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:13.5px;line-height:1.45;color:var(--texto-2);cursor:pointer}
.af-casilla input{width:20px;height:20px;margin:0;accent-color:var(--tinta)}
.af-privacidad,.af-pie{font-size:13px;line-height:1.45;color:var(--texto-3)}
.af-privacidad a{color:var(--texto-2);text-underline-offset:2px}
.af-estado{padding:12px 14px;border-radius:12px;background:var(--hundido);font-size:14.5px;line-height:1.5;color:var(--texto)}
.af-error{font-size:13.5px;font-weight:550;color:var(--malo-texto)}
.af-demo{background:var(--tinta)}
.af-demo p{color:rgba(255,255,255,.72)}
.af-demo p b{color:#fff}
.af-demo .af-pie{color:rgba(255,255,255,.55)}

/* ── El móvil: una columna; sin guion, todas las preguntas; con él, una por tarjeta */
@media (max-width:999px){
  .af{grid-template-columns:minmax(0,1fr)}
  .af-lado{border-radius:0 0 28px 28px}
  .af-progreso{display:none!important}
  .af-lado:not(:has(.af-r,.af-vacio,.af-lectura:not([hidden]))){display:none}
  .af-barra{position:sticky;top:calc(var(--cab) + 6px);z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:-6px -8px 0;padding:4px 12px 4px 4px;border-radius:14px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),0 8px 18px -12px rgba(18,20,22,.3);font-size:13.5px;font-variant-numeric:tabular-nums}
  .af-atras{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;border:0;background:none;font:560 14px var(--letra);color:var(--texto-2);cursor:pointer}
  .af-atras .ic{width:16px;height:16px;transform:scaleX(-1)}
  .af-atras:disabled{opacity:.35;cursor:default}
  .af-pista{height:6px;border-radius:3px;background:var(--pista);overflow:hidden}
  .af-pista i{display:block;height:100%;background:var(--naranja);transform-origin:0 50%;transform:scaleX(var(--w,0));transition:transform .3s var(--e)}
  .af-pasos .q:not(.actual),.af-pasos .af-grupo:not(.actual){display:none}
  .af-pasos.con-resultado .af-grupo,.af-pasos.con-resultado .af-barra,.af-pasos.con-resultado .af-intro{display:none}
  .af-pasos:not(.completa) .af-ir{display:none}
  .af-pasos .q{min-height:420px;align-content:start}
  .af-pasos .q legend{font-size:21px;line-height:1.3}
  .af-pasos .q-ayuda,.af-pasos .q-op,.af-pasos .q-aviso{margin-left:0}
  .af-pasos .q-op{display:grid;gap:8px}
  .af-pasos .q-op label{min-height:52px;font-size:16px}
  .af-ir .boton{flex:1 1 100%;justify-content:center}
  .af-form{gap:16px;padding-top:22px}
  .af-form h2{font-size:21px}
  .af-intro{font-size:14.5px}
}
@media (max-width:999px) and (prefers-reduced-motion:no-preference){.af-pasos .q.actual{animation:af-entra .35s var(--e)}}
@keyframes af-entra{from{opacity:0;transform:translateX(14px)}}
@media (max-width:420px){.af-form,.af-lado{padding:20px 16px}.af-lectura,.af-demo{padding:20px 16px}.q-ayuda,.q-op,.q-aviso{margin-left:0}}

/* ── S4: cuatro cifras, de dos en dos */
@media (min-width:761px){.af-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}}
.af-podio{display:flex;align-items:flex-end;gap:5px;height:46px}
.af-podio i{width:14px;height:34%;border-radius:4px 4px 2px 2px;background:var(--pista)}
.af-podio i:first-child{height:100%;background:var(--naranja)}
.af-podio i:nth-child(2){height:74%}.af-podio i:nth-child(3){height:58%}.af-podio i:nth-child(4){height:44%}

/* ── S5: las 13 comprobaciones, con sus puntos en grande */
.af-tabla-tit{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:clamp(40px,5vw,64px) 0 14px;font-size:clamp(20px,1.8vw,25px);font-weight:450;font-stretch:108%;letter-spacing:-.015em;color:var(--texto)}
.af-tabla-tit b{font-weight:600;font-size:.7em;color:var(--tuyo)}
@media (min-width:761px){.af-checks table{table-layout:fixed}.af-checks thead th:first-child{width:19%}.af-checks thead th:nth-child(2){width:9%}}
@media (max-width:760px){.af-checks tr{position:relative}.af-checks tbody th{padding-right:56px}.af-checks .af-pts{position:absolute;top:16px;right:18px;margin:0!important}.af-checks .af-pts::before{display:none}}
.af-checks .af-pts{font-size:clamp(26px,2.4vw,34px);font-weight:300;font-stretch:118%;letter-spacing:-.04em;line-height:1;color:var(--texto);font-variant-numeric:tabular-nums}

/* ── S6: la fórmula a la vista */
.af-formula{display:grid;gap:clamp(24px,3vw,40px)}
.af-formula-texto{display:grid;gap:18px;max-width:46em}
.af-reparto{display:flex;gap:4px}
.af-reparto span{flex:var(--w) 1 0;min-width:0;display:grid;gap:4px;padding:16px 16px 14px;border-radius:14px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea)}
.af-reparto b{font-size:clamp(28px,3vw,44px);font-weight:300;font-stretch:118%;letter-spacing:-.045em;line-height:1;color:var(--texto)}
.af-reparto small{font-size:12.5px;font-weight:560;line-height:1.3;color:var(--texto-3)}
.af-reparto .tuyo{background:var(--tinta)}
.af-reparto .tuyo b{color:#fff}.af-reparto .tuyo small{color:rgba(255,255,255,.7)}
.af-reparto.anima span{opacity:0;transform:translateY(10px)}
.af-reparto.en span{opacity:1;transform:none;transition:opacity .4s ease,transform .6s var(--e)}
.af-reparto.en span+span{transition-delay:80ms}.af-reparto.en span+span+span{transition-delay:160ms}
.af-bandas th[scope="row"]{width:30%;white-space:nowrap}
.af-formula-pie{max-width:46em}
@media (max-width:760px){.af-reparto span{padding:12px 10px}.af-reparto small{font-size:11.5px}.af-bandas th[scope="row"]{white-space:normal}}

/* ── S10: la columna de Reviot, sin resaltar más que las otras (copy) */
#cmp :is(td,th):last-child,#cmp .fila-suave>:last-child{background:var(--tarjeta)}
#cmp thead :is(td,th):last-child{background:var(--lienzo);color:var(--texto-3)}
#cmp td:last-child{color:var(--texto-2)}
#cmp .fila-suave td:last-child{color:var(--texto)}
#cmp .fila-suave td:last-child::after{background:var(--lienzo)}

/* ── S7: lo que se dice, en un tono más suave */
.af-mitos th[scope="row"]{width:38%;font-weight:450;color:var(--texto-3)}

/* ── S8: lo que lee y lo que no */
.af-lee{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:start}
.af-lee h3{margin:0 0 14px;font-size:clamp(20px,1.7vw,23px);font-weight:450;font-stretch:108%;letter-spacing:-.015em}
.af-lee-si .lista-check+h3{margin-top:clamp(28px,3vw,40px)}
.af-lee-no{display:grid;gap:14px}
.af-no-vemos,.af-solo{padding:clamp(22px,2.6vw,32px)}
.af-solo h3{color:#fff}
.af-solo p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.78)}
@media (max-width:860px){.af-lee{grid-template-columns:minmax(0,1fr)}}

/* ── S11: cuatro casos, de dos en dos */
@media (min-width:761px){.af-casos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.af-casos h3{font-size:19px;font-weight:560;color:var(--texto)}
.af-casos p{font-size:15.5px;line-height:1.55}
.af-casos a{color:var(--texto);text-underline-offset:3px}

/* ── S14 */
.af-otras{display:grid;gap:24px;max-width:46em}
.af-otras a{color:var(--texto);font-weight:600;text-underline-offset:3px}