/* /herramientas (4 nov, kit v2): lo que solo tiene esta página. La mini-herramienta de la cabecera («¿Qué herramienta necesitas?», tres
   preguntas que llevan a su grupo), las tablas de cada familia con su forma (el router de S3, las fichas de las gratis, los precios de
   la escucha, la pareja de las redes), la postura de S7 con sus cien puntos, las piezas de «Cómo elegir» con su cifra en medio y las
   tarjetas de cada caso. Reviot va aparte de las herramientas: en su propio cuerpo de tabla, hundido y sin destacar. Solo transform y
   opacity en lo que se mueve; con «reducir movimiento», todo quieto. */

/* ── S2: la cabecera ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.quien-escribe{display:flex;gap:10px;align-items:flex-start;max-width:34em;margin-top:6px;padding-top:18px;border-top:1px solid var(--linea-2);font-size:13.5px;line-height:1.5;color:var(--texto-3)}
.quien-escribe .ic{width:17px;height:17px;margin-top:1px}

/* La mini-herramienta: se ve desde el primer pintado si hay guion (sin esperar a herramientas.js) y no sale si no lo hay. */
.qh-caja{position:relative;isolation:isolate;padding:clamp(18px,2.4vw,34px);border-radius:28px;background:var(--hundido)}
.qh-caja::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--trama) 0 0/14px 14px;mask-image:radial-gradient(80% 70% at 100% 100%,#000 10%,transparent 72%)}
@media (scripting:enabled){.qh[hidden]{display:grid}}
/* Sin guion no hay herramienta: tampoco su caja hundida, que se quedaría vacía. */
@media (scripting:none){.cabecera .cabecera-vis{display:none}}
.qh{position:relative;display:grid;gap:18px;padding:clamp(20px,2.2vw,28px);border-radius:22px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),var(--sombra-flota)}
@media (min-width:1000px){.qh{margin-left:-46px}}
.qh-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.qh-tit{font-size:clamp(20px,1.7vw,24px);font-weight:420;font-stretch:112%;letter-spacing:-.025em;line-height:1.15;color:var(--texto)}
.qh-paso-n{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--texto-3);font-variant-numeric:tabular-nums}
.qh-barra{display:flex;gap:4px}
.qh-barra i{position:relative;width:22px;height:4px;border-radius:2px;background:var(--pista);overflow:hidden}
.qh-barra i::after{content:"";position:absolute;inset:0;background:var(--naranja);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e)}
.qh-barra i:first-child::after,.qh-barra i.si::after{transform:none}
.qh-pasos{display:grid}
.qh-pasos>*{grid-area:1/1;min-width:0}
.qh-paso{margin:0;padding:0;border:0;opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .22s ease,transform .32s var(--e),visibility 0s .32s}
.qh-paso.hecho{transform:translateX(-14px)}
.qh-paso.activa{opacity:1;visibility:visible;transform:none;transition:opacity .26s ease .06s,transform .38s var(--e) .06s}
.qh-paso legend{float:left;width:100%;margin-bottom:14px;padding:0;font-size:17px;font-weight:560;line-height:1.3;color:var(--texto)}
.qh-ops{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qh-ops.siete{grid-template-columns:repeat(2,minmax(0,1fr))}
.qh-ops.siete label:last-child{grid-column:1 / -1}
.qh-ops label{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:9px 12px 9px 9px;border-radius:14px;background:var(--lienzo);box-shadow:inset 0 0 0 1px var(--linea-2);font-size:14.5px;font-weight:560;line-height:1.25;color:var(--texto);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--e),box-shadow .2s,background-color .15s,color .15s}
.qh-ops:not(.siete) label{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:96px;padding:12px}
.qh-ops label:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--linea-3),0 12px 22px -16px rgba(18,20,22,.5)}
.qh-ops label:active{transform:scale(.98);transition-duration:.1s}
.qh-ops label:has(:checked){background:var(--tinta);box-shadow:none;color:#fff}
.qh-ops label:has(:focus-visible){outline:2px solid var(--tinta);outline-offset:2px}
.qh-ops input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qh-ops .ic,.qh-vol{flex:none;box-sizing:border-box;width:32px;height:32px;padding:7px;border-radius:9px;background:var(--tarjeta);box-shadow:inset 0 0 0 1px var(--linea);color:var(--texto-2);transition:background-color .15s,color .15s}
.qh-ops label:has(:checked) :is(.ic,.qh-vol){background:rgba(255,255,255,.12);box-shadow:none;color:#fff}
.qh-vol{display:block;--a:currentColor;--b:var(--linea-3);background-image:linear-gradient(var(--a),var(--a)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b));background-size:3px 6px,3px 10px,3px 14px;background-position:9px 17px,14.5px 13px,20px 9px;background-repeat:no-repeat}
.qh-vol[data-v="2"]{background-image:linear-gradient(var(--a),var(--a)),linear-gradient(var(--a),var(--a)),linear-gradient(var(--b),var(--b))}
.qh-vol[data-v="3"]{background-image:linear-gradient(var(--a),var(--a)),linear-gradient(var(--a),var(--a)),linear-gradient(var(--a),var(--a))}
.qh-ops label:has(:checked) .qh-vol{--b:rgba(255,255,255,.3)}
.qh-res{display:grid;gap:12px;align-content:start;outline:0}
.qh-res-tit{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:560;color:var(--texto)}
.qh-check{flex:none;width:26px;height:26px;border-radius:50%;background:var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/15px no-repeat}
.qh-fila{display:grid;gap:4px;padding:14px 16px;border-radius:16px;background:var(--hundido);font-size:14px;line-height:1.5;color:var(--texto-2)}
.qh-fila>b{font-size:15.5px;font-weight:560;line-height:1.35;color:var(--texto)}
.qh-fila a{color:var(--texto);text-underline-offset:3px;text-decoration-color:var(--linea-3)}
.qh-fila p:last-child b{color:var(--texto)}
.qh-porque{font-size:14px;line-height:1.5;color:var(--texto-3)}
.qh-porque:empty{display:none}
.qh-ir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qh-ir .boton{justify-content:flex-start;gap:8px;width:100%;min-height:44px;height:auto;padding:8px 14px;font-size:14.5px;line-height:1.25;text-align:left;white-space:normal}
.qh-ir .boton:first-child{grid-column:1 / -1;min-height:48px}
.qh-ir .boton:last-child:nth-child(2){grid-column:1 / -1}
.qh-ir .boton .flecha{margin-left:auto}
.qh-ir-n{font-size:12px;font-weight:600;opacity:.55;font-variant-numeric:tabular-nums}
.qh-pie{display:flex;min-height:36px;margin-top:-4px}
.qh-atras{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border:0;border-radius:999px;background:none;font:600 13.5px var(--letra);color:var(--texto-2);cursor:pointer;transition:background-color .15s,transform .15s var(--e)}
.qh-atras:hover{background:var(--hundido);color:var(--texto)}
.qh-atras:active{transform:scale(.97)}
.qh-atras .ic{width:15px;height:15px}
.qh-atras[data-atras] .ic{transform:rotate(180deg)}
.qh-atras[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.qh-paso,.qh-barra i::after{transition:none}}
@media (prefers-reduced-motion:no-preference){
  .qh{animation:qh-entra .6s var(--e) .35s both}
  .qh-paso.activa label{animation:qh-entra .4s var(--e) calc(.1s + var(--i,0) * 45ms) both}
  .qh-res.activa>*{animation:qh-entra .45s var(--e) both}
  .qh-res.activa>:nth-child(2){animation-delay:.12s}.qh-res.activa>:nth-child(3){animation-delay:.22s}.qh-res.activa>:nth-child(4){animation-delay:.3s}
  .qh-res.activa .qh-check{animation:qh-pop .5s var(--e-back2,ease) .15s both}
}
@keyframes qh-entra{from{opacity:0;transform:translateY(8px)}}
@keyframes qh-pop{from{opacity:0;transform:scale(.4)}}
@media (max-width:999px){.cabecera .cabecera-vis{margin-top:4px}}
@media (max-width:520px){.qh-ops.siete{grid-template-columns:minmax(0,1fr)}.qh-ops.siete label{min-height:48px}.qh-caja{margin-inline:-6px}}

/* ── Las tablas de la página: el precio, la fecha a la vista y Reviot aparte ────────────────────────────────────────────────────────── */
.visto{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--texto-3);opacity:.85}
.visto-linea{display:flex;gap:8px;align-items:flex-start;max-width:48em;margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--texto-3)}
.visto-linea .ic{width:16px;height:16px;margin-top:1px}
.tabla td b{font-weight:600;color:var(--texto)}
.tabla td a{color:var(--texto);text-underline-offset:3px;text-decoration-color:var(--linea-3)}
.tabla td a:hover{text-decoration-color:currentColor}
.tabla tbody th .ic{color:var(--texto-2)}
.tabla .servicio>tr>*{background:var(--lienzo)}
.tabla .servicio>tr:first-child>*{border-top:1px solid var(--linea-2)}
.tabla tbody tr:target>:first-child::after,.tabla tbody tr.qh-elegida>:first-child::after{opacity:1;background:var(--tuyo-suave)}
.tabla tbody tr.qh-elegida>:first-child{box-shadow:inset 3px 0 0 var(--naranja)}
@media (max-width:760px){.tabla tbody tr:is(:target,.qh-elegida){box-shadow:0 0 0 2px var(--naranja)}}

/* S3: lo que quieres saber → la herramienta → su precio. Cada fila, con el icono de su familia. */
.tabla-para{margin-top:clamp(48px,6vw,80px)}
.tabla-para .tabla{table-layout:fixed}
.tabla-para thead>tr>:first-child{width:40%}
.tabla-para tbody th{padding-left:66px;font-size:16px;font-weight:560;line-height:1.4}
.tabla-para tbody th .ic{position:absolute;left:20px;top:16px;box-sizing:border-box;width:32px;height:32px;padding:7px;border-radius:9px;background:var(--hundido)}
.tabla-para .servicio th .ic{background:var(--tarjeta)}
/* En el móvil, Reviot va en su tarjeta, hundida y aparte; S3 queda en tarjetas cortas (sin rótulos: la pregunta, la herramienta y el
   precio se leen solos) para que las siete quepan en algo más de una pantalla. */
@media (max-width:760px){
  .tabla .servicio>tr>*,.tabla .servicio>tr:first-child>*{background:none;border-top:0}
  .tabla-tarjetas .servicio,.tabla-desliza .servicio{margin-top:10px}
  :is(.tabla-tarjetas,.tabla-desliza) .servicio tr{background:var(--lienzo);box-shadow:inset 0 0 0 1px var(--linea-2)}
  .tabla-para tbody th{padding-left:44px;min-height:32px}
  .tabla-para tbody th .ic{left:0;top:-4px}
  .tabla-para tbody td{padding-left:44px}
  .tabla-para :is(th,td)+:is(th,td){margin-top:8px}
  .tabla-para [data-th]::before{content:none}
  .tabla-para tbody tr{padding:16px 16px 18px}
  .tabla-para tbody td:last-child{font-size:14px}
  .tabla-gratis td.no-hace{padding:12px 14px;border-radius:12px;background:var(--hundido)}
  .tabla-gratis .servicio td.no-hace{background:var(--tarjeta)}
}

/* S4: cada herramienta gratis, una ficha: lo que hace y, al lado, lo que no hace. */
.tabla-gratis td.no-hace{color:var(--texto-2)}
.tabla-gratis td.quien{font-size:14px;color:var(--texto-3)}
@media (min-width:761px){
  .tabla-gratis{background:none;box-shadow:none;overflow:visible;border-radius:0}
  .tabla-gratis>.tabla{clip-path:none}
  .tabla-gratis :is(.tabla,thead,tbody){display:block}
  .tabla-gratis tr{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.14fr) minmax(0,1.14fr);grid-template-areas:"n h x" "q h x";grid-template-rows:auto 1fr;gap:0 clamp(20px,2.6vw,36px)}
  .tabla-gratis :is(th,td){padding:0;border:0!important;background:none!important}
  .tabla-gratis tr>:first-child{grid-area:n}
  .tabla-gratis tr>:nth-child(2){grid-area:h}
  .tabla-gratis tr>:nth-child(3){grid-area:x}
  .tabla-gratis tr>:nth-child(4){grid-area:q}
  .tabla-gratis thead tr{padding:0 24px 12px}
  .tabla-gratis thead>tr>:nth-child(4){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla-gratis tbody tr{position:relative;isolation:isolate;padding:24px;border-radius:20px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea);transition:transform .24s var(--e)}
  .tabla-gratis tbody tr+tr,.tabla-gratis .servicio{margin-top:10px}
  .tabla-gratis tbody tr::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--sombra-alza);opacity:0;transition:opacity .24s ease}
  .tabla-gratis tbody tr:hover{transform:translateY(-2px)}
  .tabla-gratis tbody tr:hover::before{opacity:1}
  .tabla-gratis tbody>tr>:first-child::after{content:none}
  .tabla-gratis tbody th{font-size:18px;font-weight:560;letter-spacing:-.01em}
  .tabla-gratis td.quien{margin-top:8px;padding-right:8px}
  .tabla-gratis td.no-hace{position:relative;padding:14px 16px 14px 44px;border-radius:14px;background:var(--hundido)!important;font-size:14.5px}
  .tabla-gratis td.no-hace::before{content:"";position:absolute;left:14px;top:15px;width:20px;height:20px;border-radius:50%;background:var(--tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367635B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/11px no-repeat}
  .tabla-gratis .servicio tr{background:var(--hundido);box-shadow:inset 0 0 0 1px var(--linea)}
  .tabla-gratis .servicio td.no-hace{background:var(--tarjeta)!important}
  .tabla-gratis tbody tr:target,.tabla-precios tbody tr:target{box-shadow:0 0 0 2px var(--naranja)}
}
.gratis-redes{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px clamp(32px,5vw,80px);align-items:start;margin-top:clamp(56px,7vw,96px)}
.gratis-redes h3{font-size:clamp(24px,2.3vw,32px);font-weight:400;font-stretch:110%;letter-spacing:-.025em;line-height:1.15}

/* S5: la escucha, con el precio en grande. En el móvil, una tarjeta por herramienta que se desliza, con el precio arriba. */
.tabla-precios .tabla{min-width:900px;table-layout:fixed}
.tabla-precios thead>tr>:nth-child(1){width:13%}
.tabla-precios thead>tr>:nth-child(2){width:29%}
.tabla-precios thead>tr>:nth-child(3){width:20%}
.tabla-precios thead>tr>:nth-child(5){width:15%}
.tabla-precios tbody th{font-size:16.5px;font-weight:560}
.precio>b.n{display:block;margin-bottom:6px;font-size:clamp(26px,2.3vw,32px);font-weight:300;font-stretch:118%;letter-spacing:-.045em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.precio>b.n+span{display:block;font-size:13px;line-height:1.45;color:var(--texto-3)}
.precio.sin{color:var(--texto-3)}
.prueba span{display:inline-block;padding:4px 10px;border-radius:9px;background:var(--hundido);font-size:13px;font-weight:560;line-height:1.4;color:var(--texto)}
.escucha-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,80px);align-items:center;margin-top:clamp(48px,6vw,72px)}
.escucha-pie .prosa{max-width:none}
.cada-cuanto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cada-cuanto li{display:grid;gap:2px;padding:14px 14px 16px;border-radius:16px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea)}
.cada-cuanto b{font-size:12.5px;font-weight:600;color:var(--texto-3)}
.cada-cuanto span{font-size:15.5px;font-weight:560;color:var(--texto)}
.cada-cuanto li::after{content:"";height:8px;margin-top:12px;background:radial-gradient(circle,var(--texto) 3px,transparent 3.6px) 0 50%/50% 8px repeat-x}
.cada-cuanto li:nth-child(2)::after{background:radial-gradient(circle,var(--texto) 1.6px,transparent 2.1px) 0 50%/calc(100% / 24) 8px repeat-x}
.cada-cuanto li:nth-child(3)::after{background:linear-gradient(var(--naranja),var(--naranja)) 0 50%/100% 3px no-repeat}
@media (max-width:999px){.escucha-pie{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .tabla-precios .tabla{min-width:0}
  .tabla-precios tr{display:flex!important;flex-direction:column}
  .tabla-precios tbody th{order:-2}
  .tabla-precios td.precio{order:-1;padding-bottom:12px!important;border-bottom:1px solid var(--linea)!important}
  .tabla-precios td.prueba{order:0}
  .cada-cuanto li{padding:12px 10px 14px}
  .cada-cuanto span{font-size:14px}
}

/* S6 y S7: tres columnas; S8: las dos herramientas, una al lado de la otra. */
.tabla-tres .tabla{table-layout:fixed}
.tabla-tres thead>tr>:first-child{width:20%}
.tabla-tres thead>tr>:last-child{width:34%}
.tabla-tres tbody th{font-size:16px;font-weight:560}
.aviso-norma{padding-top:22px;padding-bottom:22px}
.aviso-norma::before{top:22px}
.aviso-norma a{color:var(--texto);text-underline-offset:3px}
@media (min-width:761px){
  .tabla-par{background:none;box-shadow:none;overflow:visible;border-radius:0}
  .tabla-par>.tabla{clip-path:none}
  .tabla-par .tabla{display:block}
  .tabla-par thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla-par tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tabla-par tr{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,2.8vw,34px);border-radius:22px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea)}
  .tabla-par :is(th,td){display:block;padding:0;border:0!important}
  .tabla-par tbody>tr>:first-child::after{content:none}
  .tabla-par [data-th]::before{content:attr(data-th);display:block;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--texto-3)}
  .tabla-par tbody th{display:flex;align-items:center;gap:12px;font-size:clamp(22px,2vw,26px);font-weight:420;font-stretch:110%;letter-spacing:-.02em}
  .tabla-par td.precio{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea)!important}
}
.tabla-par tbody th .ic{box-sizing:border-box;width:40px;height:40px;padding:9px;border-radius:11px;background:var(--hundido)}
@media (max-width:760px){.tabla-par tbody th{display:flex;align-items:center;gap:10px}.tabla-par tbody th .ic{width:34px;height:34px;padding:7px}}

/* S7: la postura, en tinta, con cien puntos: la misma lista sale menos de una vez de cada cien. */
.ia-puesto{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px clamp(32px,5vw,80px);align-items:center;margin-top:clamp(48px,6vw,80px)}
.ia-puesto .frase-destacada{margin:0;font-size:clamp(23px,2.2vw,31px);max-width:25em}
.ia-puesto .frase-destacada p{color:#fff}
.ia-puesto .frase-destacada .tenue{color:rgba(255,255,255,.55)}
.cien{display:grid;gap:7px}
.cien i{display:block;width:170px;height:10px;background:radial-gradient(circle,rgba(255,255,255,.3) 3.4px,transparent 4px) 0 0/17px 10px repeat-x}
.cien i:first-child{position:relative}
.cien i:first-child::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--tinta);box-shadow:inset 0 0 0 1.6px var(--naranja)}
.ia-puesto.anima .cien i{opacity:0;transform:translateY(6px)}
.ia-puesto.anima .cien i:first-child::before{opacity:0;transform:scale(1.8)}
.ia-puesto.en .cien i{opacity:1;transform:none;transition:opacity .35s ease calc(var(--d,0) * 45ms + .3s),transform .5s var(--e) calc(var(--d,0) * 45ms + .3s)}
.ia-puesto.en .cien i:first-child::before{opacity:1;transform:none;transition:opacity .25s ease 1.1s,transform .4s var(--e-back2,ease) 1.1s}
.cien i:nth-child(2){--d:1}.cien i:nth-child(3){--d:2}.cien i:nth-child(4){--d:3}.cien i:nth-child(5){--d:4}.cien i:nth-child(6){--d:5}.cien i:nth-child(7){--d:6}.cien i:nth-child(8){--d:7}.cien i:nth-child(9){--d:8}.cien i:nth-child(10){--d:9}
@media (max-width:760px){.ia-puesto{grid-template-columns:minmax(0,1fr)}.cien i{width:153px;background-size:15.3px 10px}}

/* S9: las seis preguntas en una sola lista (así las numera el texto para los agentes) y la cifra detrás. En el escritorio la lista se
   deshace (display: contents) y la cifra se pone entre la tercera y la cuarta; en el móvil, al final. Cada pregunta se enciende al
   asomar ella, no la lista entera, para que nada se mueva fuera de la pantalla. */
.elegir{display:flex;flex-direction:column;counter-reset:paso}
@media (min-width:761px){
  .elegir>ol{display:contents}
  .elegir>ol>li{max-width:1000px}
  .elegir>ol>li:nth-child(-n+3){order:1}
  .elegir>.cifra-54{order:2}
  .elegir>ol>li:nth-child(n+4){order:3}
}
@media (prefers-reduced-motion:no-preference){
  .elegir li.anima{opacity:0;transform:translateY(12px)}
  .elegir li.anima::after{transform:scaleY(0)}
  .elegir li.anima .paso-pieza{opacity:0;transform:translateY(8px)}
  .elegir li.en{opacity:1;transform:none;transition:opacity .45s ease,transform .6s var(--e)}
  .elegir li.en::before{animation:paso-n .45s var(--e) .15s both}
  .elegir li.en::after{transform:none;transition:transform .4s var(--e) .3s}
  .elegir li.en .paso-pieza{opacity:1;transform:none;transition:opacity .45s ease .2s,transform .6s var(--e) .2s}
}
.cifra-54{display:grid;grid-template-columns:auto minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:20px clamp(28px,3.4vw,48px);max-width:948px;margin:40px 0 44px 52px;padding:clamp(24px,2.6vw,32px)}
.cifra-54>p{margin:0;padding:0;border:0!important;font-size:15.5px}
.cifra-54 .serp{display:grid;gap:7px;width:100%;max-width:230px}
.serp i{display:block;height:9px;border-radius:5px;background:var(--pista);transform-origin:0 50%}
.serp i:nth-child(-n+3){background:var(--naranja)}
.serp i:nth-child(2){width:84%}.serp i:nth-child(3){width:92%}.serp i:nth-child(4){width:70%}.serp i:nth-child(5){width:80%}.serp i:nth-child(6){width:62%}.serp i:nth-child(7){width:74%}
.cifra-54.anima .serp i{transform:scaleX(0)}
.cifra-54.en .serp i{transform:none;transition:transform .6s var(--e) calc(var(--d,0) * 60ms + .3s)}
.serp i:nth-child(2){--d:1}.serp i:nth-child(3){--d:2}.serp i:nth-child(4){--d:3}.serp i:nth-child(5){--d:4}.serp i:nth-child(6){--d:5}.serp i:nth-child(7){--d:6}
.pz-mismo,.pz-cuantas,.pz-tono{flex-direction:column;align-items:stretch}
.pz-mismo>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:9px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea)}
.pz-mismo>span:not(.tuya){background:none;box-shadow:inset 0 0 0 1px var(--linea-3);opacity:.75}
.pz-mismo b{font-weight:600}
.pz-mismo small{font-size:11px;color:var(--texto-3)}
.pz-cuantas>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center;font-size:11.5px;font-weight:600;color:var(--texto-3)}
.pz-cuantas b{font-size:13px;color:var(--texto);font-variant-numeric:tabular-nums}
.pz-cuantas>span::after{content:"";grid-column:1 / -1;width:calc(var(--w) * 100%);min-width:6px;height:8px;border-radius:4px;background:var(--texto)}
.pz-tono{align-items:flex-start}
.pz-tono>span:first-child{padding:6px 10px;border-radius:12px 12px 12px 4px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea);font-weight:500;color:var(--texto)}
@media (max-width:760px){.cifra-54{grid-template-columns:minmax(0,1fr);margin:40px 0 0}}

/* S11: lo que verías en el análisis gratis, con lo de otros tapado. */
.tapado .ec-pregunta{display:flex;align-items:center;gap:8px;justify-self:start}
.tapado .ec-pregunta svg{flex:none;color:var(--texto)}
.tapado .ec-logo .ic{width:15px;height:15px;color:var(--texto-2)}
.tapado .ec-r small{font-size:12px;font-weight:600;color:var(--texto-3)}
.tapa{display:block;width:88%;height:10px;border-radius:3px;background:var(--tinta)}
.tapa.c{width:64%}

/* S12: una tarjeta por caso. En el móvil, en una fila que se desliza. */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.caso{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,28px);border-radius:20px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea);transition:transform .24s var(--e)}
.caso::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--sombra-alza);opacity:0;transition:opacity .24s ease}
.caso:hover{transform:translateY(-2px)}
.caso:hover::after{opacity:1}
.caso-ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:6px;border-radius:12px;background:var(--hundido);color:var(--texto)}
.caso h3{font-size:19px;font-weight:560;line-height:1.3}
.caso p{font-size:15px;line-height:1.55;color:var(--texto-2)}
.caso .caso-mas{margin-top:auto;padding-top:14px;border-top:1px solid var(--linea);font-size:14.5px;color:var(--texto-3)}
.caso-mas a{font-weight:600;color:var(--texto);text-underline-offset:3px;text-decoration-color:var(--linea-3)}
.caso-mas a:hover{text-decoration-color:currentColor}
.casos.anima>li{opacity:0;transform:translateY(12px)}
.casos.en>li{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0) * 60ms),transform .6s var(--e) calc(var(--i,0) * 60ms)}
@media (max-width:999px){.casos{grid-template-columns:repeat(2,minmax(0,1fr))}.gratis-redes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.casos.desliza{display:flex}.casos .caso{flex-basis:min(84%,320px)}}

/* S10 a 320: tres columnas en 280 px; las palabras largas («Contestamos», «conversación») se parten (solo las de diez letras o más) en vez de salirse de su celda. */
@media (max-width:380px){.tabla-comparativa :is(th,td){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}}

/* El pie: la frase que abre las fuentes. */
.pie-fuentes-nota{max-width:60em;margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--pie-2)}