/* juancarloscastronavarro.com · estilos comunes · móvil primero. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/figtree-latin.4ba7d3d0.woff2) format("woff2")}
@font-face{font-family:"Figtree Fallback";src:local("Arial");size-adjust:99%;ascent-override:95.9%;descent-override:25.2%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback Roboto";src:local("Roboto");size-adjust:100%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

:root{
  --blanco:#FFFFFF;--niebla:#EEF6F1;--grafito:#1B2420;--gris:#56675F;--regla:#D5E3DA;
  --verde:#0B8A5A;      /* solo corchetes, bordes y texto grande */
  --verde-f:#076B45;    /* texto verde pequeño */
  --hueco:#FFF3C4;--posit:#FFF1A8;--posit-borde:#E8D77A;
  --fuente:"Figtree","Figtree Fallback","Figtree Fallback Roboto",system-ui,sans-serif;
  --g:16px;--max:1200px;--cab:60px;--barra:64px;
  --curva:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--cab) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--blanco);color:var(--grafito);font-family:var(--fuente);font-size:1.0625rem;line-height:1.55;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--verde-f);text-underline-offset:.18em}
a:hover{color:var(--grafito)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.envoltura{width:100%;max-width:calc(var(--max) + 2*var(--g));margin:0 auto;padding:0 var(--g)}
.saltar{position:absolute;left:var(--g);top:-80px;z-index:50;background:var(--grafito);color:#fff;padding:.6em 1em;border-radius:6px;font-weight:700}
.saltar:focus{top:8px;color:#fff}
.hueco{background:var(--hueco);padding:0 .3em;border-radius:3px;font-weight:700;color:var(--grafito)}

/* ---------- Botones y enlaces ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.25em;border-radius:10px;font:inherit;font-weight:700;font-size:1rem;text-decoration:none;text-align:center;line-height:1.25;border:2px solid var(--verde-f);cursor:pointer;-webkit-tap-highlight-color:transparent}
.boton-primario{background:var(--verde-f);color:#fff}
.boton-primario:hover{background:var(--grafito);border-color:var(--grafito);color:#fff}
.boton-secundario{background:#fff;color:var(--verde-f)}
.boton-secundario:hover{background:var(--niebla);color:var(--verde-f)}
.boton-compacto{min-height:44px;padding:.4em .9em;font-size:.9375rem}
.boton-texto{background:none;border:0;padding:.5em 0;min-height:44px;font:inherit;font-size:.9375rem;font-weight:600;color:var(--verde-f);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.boton-texto:hover{color:var(--grafito)}
.enlace-flecha{font-weight:700;display:inline-flex;align-items:center;gap:.35em;min-height:48px}
.micro{font-size:.875rem;color:var(--gris);line-height:1.5}

/* ---------- Nombre: único tratamiento tipográfico propio ---------- */
.firma-nombre{font-weight:800;letter-spacing:-.02em;font-size:1.0625rem;line-height:1.2;color:var(--grafito);padding-left:.5em;border-left:3px solid var(--verde)}
.firma-funcion{font-size:.8125rem;line-height:1.3;color:var(--gris);padding-left:calc(.5em + 3px)}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--regla)}
/* En pantallas pequeñas o bajas la cabecera no se queda fija: no gasta pantalla ni tapa el foco. */
@media (max-width:479px),(max-height:520px){.cabecera{position:static}}
.cabecera-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--cab);padding-top:6px;padding-bottom:6px}
.marca{display:flex;flex-direction:column;gap:1px;text-decoration:none;min-width:0}
.nav{display:none}
.cab-boton{display:none}
.cab-acciones{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;justify-content:flex-end}
.cab-media{padding:.45em .9em;font-size:.9375rem;white-space:nowrap}
@media (max-width:479px){.cabecera-in.con-acciones{flex-wrap:wrap}.cab-acciones{width:100%;justify-content:space-between}}
.cab-volver{font-weight:700;font-size:.9375rem;display:inline-flex;align-items:center;min-height:48px;white-space:nowrap}

/* ---------- Héroe ---------- */
.heroe{padding:14px 0 36px;overflow-x:clip}
.heroe-rejilla{display:grid;gap:14px}
.titular{text-wrap:balance;font-size:clamp(1.625rem,6.9vw,3.25rem);line-height:1.1;letter-spacing:-.025em;font-weight:800}
.titular-no{display:block;color:var(--verde)}
.heroe-texto{display:grid;gap:10px}
.heroe-oferta{font-size:1rem}
.heroe-oferta strong{font-weight:800}
.heroe-acciones{display:grid;gap:6px}
.heroe-acciones .boton{width:100%}
.heroe-oferta [data-hasta]{color:var(--grafito)}
.enlace-tel{display:inline-flex;align-items:center;justify-content:center;gap:.3em;min-height:48px;font-weight:600;color:var(--grafito)}
.enlace-tel strong{color:var(--verde-f);font-weight:800;white-space:nowrap}

/* Portada del informe de muestra */
.portada{position:relative}
.hoja{position:relative;background:#fff;border:1px solid var(--regla);border-top:4px solid var(--verde);border-radius:6px;padding:12px 14px 8px;box-shadow:0 10px 28px -14px rgba(27,36,32,.28)}
.hoja-rotulo{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grafito);background:var(--hueco);padding:.15em .5em;border-radius:3px}
.hoja-titulo{margin-top:6px;font-size:1.125rem;font-weight:800;line-height:1.2;letter-spacing:-.015em}
.hoja-cliente{font-size:.875rem;color:var(--gris)}
.hoja-reco{display:none;margin-top:12px;font-size:.9375rem;line-height:1.45;padding:10px 12px;background:var(--niebla);border-radius:4px}
.hoja-etq{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-f)}
.hoja-filas{margin-top:6px;display:grid}
.hoja-firma{margin-top:8px;font-size:.8125rem;color:var(--gris)}
.hoja-firma-nombre{font-weight:800;color:var(--grafito)}
.fila{position:relative;display:grid;padding:6px 10px;border-top:1px solid var(--regla);font-size:.9375rem;line-height:1.3}
.fila-etq{font-size:.875rem;font-weight:700;color:var(--gris)}
.fila-si .fila-etq{color:var(--verde-f)}
.fila-que{font-weight:600}
.fila-no{border-top-color:transparent;min-height:66px;align-content:center;padding-right:150px}
.encuadre-fila{position:absolute;inset:0;pointer-events:none}
.enc{position:absolute;width:18px;height:18px;border:0 solid var(--verde)}
.enc-a{left:0;top:0;border-left-width:3px;border-top-width:3px}
.enc-b{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px}
.sello{position:absolute;right:10px;top:0;bottom:0;margin:auto 0;height:fit-content;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:.3em .55em .34em;border:3px solid var(--verde);border-radius:8px;outline:1.5px solid var(--verde);outline-offset:-7px;
  color:var(--verde-f);background:rgba(255,255,255,.9);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.0625rem;line-height:1;transform:rotate(-9deg)}
.sello span+span{margin-top:.12em}
@media (prefers-reduced-motion:no-preference){
  .sello{animation:estampa .62s cubic-bezier(.2,.7,.25,1) .6s both}
  .fila-no .enc{animation:enc-entra .4s ease-out .3s both}
  .fila-no .enc-b{animation-delay:.4s}
  .sello.otra{animation-name:estampa2;animation-delay:0s}
}
@keyframes estampa{0%{opacity:0;transform:translateY(-30px) rotate(-16deg) scale(2)}70%{opacity:1;transform:rotate(-8deg) scale(.94)}85%{transform:rotate(-9.5deg) scale(1.04)}100%{opacity:1;transform:rotate(-9deg)}}
@keyframes estampa2{0%{opacity:0;transform:translateY(-30px) rotate(-16deg) scale(2)}70%{opacity:1;transform:rotate(-8deg) scale(.94)}85%{transform:rotate(-9.5deg) scale(1.04)}100%{opacity:1;transform:rotate(-9deg)}}
@keyframes enc-entra{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
.portada-pie{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;font-size:.875rem;color:var(--gris)}
.portada-pie a{font-weight:700}
.portada-pie .enlace-flecha,.portada-pie .boton-texto{min-height:48px;font-size:.875rem}

/* ---------- Secciones ---------- */
.seccion{padding:48px 0}
.fondo-niebla{background:var(--niebla)}
.etiqueta{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-f);margin-bottom:8px}
.seccion h2{font-size:clamp(1.5rem,6vw,2.25rem);line-height:1.15;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.seccion h3{font-size:1.125rem;line-height:1.3;font-weight:800}
.sec-texto{margin-top:12px;max-width:42em}
.rejilla-2{display:grid;gap:24px}

/* Corchete en una palabra o frase (sello «encuadre») */
.encuadre{position:relative;display:inline-block;padding:0 .3em 0 .34em}
.encuadre::before,.encuadre::after{content:"";position:absolute;width:.42em;height:.42em;border:0 solid var(--verde)}
.encuadre::before{left:0;top:.04em;border-left-width:3px;border-top-width:3px}
.encuadre::after{right:0;bottom:.04em;border-right-width:3px;border-bottom-width:3px}
.diez-incluido{color:var(--verde)}

/* ---------- Diez preguntas ---------- */
.preguntas{border:0;margin:0;padding:0;min-width:0}
.lista-preguntas{counter-reset:p;display:grid;gap:8px}
.lista-preguntas li{counter-increment:p}
.lista-preguntas label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;background:#fff;border:1px solid var(--regla);border-radius:8px;cursor:pointer;min-height:48px}
.lista-preguntas label:hover{border-color:var(--verde)}
.lista-preguntas input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:24px;height:24px;border:2px solid var(--gris);border-radius:5px;background:#fff;display:grid;place-content:center;cursor:pointer}
.lista-preguntas input::before{content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 3px 3px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.lista-preguntas input:checked{background:var(--verde-f);border-color:var(--verde-f)}
.lista-preguntas input:checked::before{opacity:1}
.lista-preguntas input:focus-visible{outline:3px solid var(--verde);outline-offset:2px}
.p-texto::before{content:counter(p) ". ";font-weight:700;color:var(--verde-f)}
.lista-preguntas label:has(input:checked){border-color:var(--verde-f)}
.lista-preguntas label:has(input:checked) .p-texto{text-decoration:line-through;text-decoration-color:var(--verde);text-decoration-thickness:2px;color:var(--gris)}
.recuento{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:16px;padding:10px 14px;border-left:3px solid var(--verde);background:#fff;border-radius:0 8px 8px 0}
.recuento-texto strong{font-size:1.25rem}
.compartir{margin-top:16px;display:grid;gap:6px}
.compartir .boton{width:100%}
.respuestas{margin-top:20px;background:#fff;border:1px solid var(--regla);border-radius:8px}
.respuestas summary{cursor:pointer;padding:14px 16px;font-weight:700;min-height:48px}
.respuestas[open] summary{border-bottom:1px solid var(--regla)}
.lista-respuestas{counter-reset:r;display:grid;gap:12px;padding:16px;font-size:.9375rem}
.lista-respuestas li{counter-increment:r;padding-left:1.8em;position:relative}
.lista-respuestas li::before{content:counter(r) ".";position:absolute;left:0;font-weight:700;color:var(--verde-f)}
.respuestas-cierre{padding:0 16px 16px;font-size:.9375rem;font-weight:600}

/* ---------- Qué recibe y cómo trabajamos ---------- */
.indice{display:grid;gap:18px}
.indice li{padding-left:16px;border-left:3px solid var(--regla)}
.indice p{margin-top:2px;font-size:.9375rem;color:var(--gris)}
.grupos{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.grupo{font-size:.875rem;font-weight:700;padding:.2em .7em;border-radius:99px;border:1.5px solid var(--grafito)}
.grupo-ia{border-color:var(--verde);color:var(--verde-f)}
.grupo-no{border-style:dashed;color:var(--gris);border-color:var(--gris)}
.pasos{counter-reset:paso;display:grid;gap:10px;margin-top:18px}
.paso{counter-increment:paso;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;padding:12px 14px;background:#fff;border:1px solid var(--regla);border-radius:8px}
.paso::before{content:counter(paso);grid-row:span 2;font-weight:800;font-size:1.5rem;line-height:1;color:var(--verde)}
.paso h3{font-size:1rem}
.paso p{font-size:.9375rem;color:var(--gris)}

/* ---------- Precio ---------- */
.presupuesto{position:relative;border:1px solid var(--regla);border-radius:6px;padding:22px clamp(18px,5vw,36px);background:#fff}
.presupuesto-cab{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.total{position:relative;margin-top:12px;padding:16px 20px 14px}
.total::before,.total::after{content:"";position:absolute;width:20px;height:20px;border:0 solid var(--verde)}
.total::before{left:0;top:0;border-left-width:3px;border-top-width:3px}
.total::after{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px}
.total-cifras{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-variant-numeric:tabular-nums}
.total-precio{font-size:clamp(3rem,13vw,4.5rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.total-ud{font-size:1.25rem;font-weight:700}
.total-iva{margin-top:6px;color:var(--gris)}
.lanzamiento{margin-top:16px;background:var(--niebla);border-left:4px solid var(--verde);padding:12px 16px;font-size:.9375rem}
.lanzamiento strong{color:var(--verde-f)}
.condiciones{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px;font-size:.875rem}
.pago{margin:12px 0 0;padding-left:1.2em;display:grid;gap:4px;font-size:.875rem;color:var(--gris)}
.nota-ciber{margin-top:14px;max-width:40em}
.no-incluye{margin-top:28px}
.no-incluye h3{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--grafito)}
.no-incluye li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--regla)}
.no-incluye li::before{content:"";position:absolute;left:2px;top:1.15em;width:12px;height:2px;background:var(--grafito)}
.bloque-seguir{margin-top:24px}
.bloque-seguir p{margin-top:6px}
.nota{margin-top:14px;font-size:.9375rem;color:var(--gris)}

/* ---------- Laboratorio ---------- */
.lab{margin-top:22px;display:grid;gap:14px}
.lab-tarjeta{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--regla);border-radius:10px;padding:18px 18px 16px}
.lab-tarjeta p{font-size:.9375rem}
.lab-num{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-f)}
.lab-tarjeta .enlace-flecha{margin-top:auto}
.lab-nos{display:grid;gap:6px;font-size:.9375rem}
.lab-nos li{padding-left:1.1em;position:relative}
.lab-nos li::before{content:"";position:absolute;left:0;top:.65em;width:.55em;height:2px;background:var(--grafito)}
.lab-nos li.si::before{background:var(--verde);height:3px}
.lab-nos li.si strong{color:var(--verde-f)}
.muestra-tapado{font-family:inherit;font-size:.9375rem;background:var(--niebla);border-radius:6px;padding:10px 12px;line-height:1.9}
.tapa{position:relative;padding:0 .3em;margin:0 .1em;font-weight:800;color:var(--verde-f);white-space:nowrap}
.tapa::before,.tapa::after{content:"";position:absolute;top:-.05em;bottom:-.05em;width:.38em;border:3px solid var(--verde)}
.tapa::before{left:-.1em;border-right:0}
.tapa::after{right:-.1em;border-left:0}
.mini-cajas{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:6px;align-items:end}
.mini-caja{display:flex;align-items:flex-end;justify-content:center;min-height:68px;border:2px solid var(--grafito);border-bottom-width:4px;border-radius:4px 4px 0 0;padding:16px 4px 6px;text-align:center;font-size:.875rem;font-weight:800;color:var(--verde-f);line-height:1.15;background:var(--niebla)}
.mini-posit{align-self:center;width:64px;min-height:58px;background:var(--posit);border:1px solid var(--posit-borde);padding:6px;font-size:.875rem;font-weight:700;line-height:1.15;transform:rotate(-6deg)}
.lab-hueco{border:2px dashed var(--verde);background:rgba(255,255,255,.7)}

/* ---------- Carta ---------- */
.carta{max-width:40em;display:grid;gap:14px;font-size:1.0625rem}
.carta-firma{font-weight:700}
.carta-frase{font-size:1.25rem;font-weight:800;line-height:1.3;letter-spacing:-.015em;color:var(--verde-f)}
.carta-firma .firma-nombre{font-size:1.125rem}

/* ---------- Treinta minutos ---------- */
.reloj{margin-top:20px;display:grid;gap:10px;max-width:46em}
.tramo{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--regla);border-radius:8px;position:relative}
.tramo-min{font-weight:800;font-variant-numeric:tabular-nums;color:var(--verde-f)}
.tramo-centro{border-color:transparent}
.tramo-centro::before,.tramo-centro::after{content:"";position:absolute;width:20px;height:20px;border:0 solid var(--verde)}
.tramo-centro::before{left:-1px;top:-1px;border-left-width:3px;border-top-width:3px}
.tramo-centro::after{right:-1px;bottom:-1px;border-right-width:3px;border-bottom-width:3px}
.treinta-pie{margin-top:16px;color:var(--gris);font-size:.9375rem}
.treinta-acciones{margin-top:16px;display:grid;gap:8px}

/* ---------- Contacto ---------- */
.canales{margin-top:18px;display:grid;gap:8px}
.canal{display:grid;gap:2px;padding:12px 14px;background:#fff;border:1px solid var(--regla);border-radius:8px;text-decoration:none;color:var(--grafito);min-height:56px}
.canal:hover{border-color:var(--verde);color:var(--grafito)}
.canal-etq{font-size:.875rem;font-weight:700;color:var(--verde-f)}
.canal-valor{font-weight:700;overflow-wrap:anywhere}
.contacto-extra{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.aviso-datos{margin-top:14px;max-width:46em}

/* ---------- Preguntas frecuentes ---------- */
.faq{border-top:1px solid var(--regla)}
.faq details{border-bottom:1px solid var(--regla)}
.faq summary{position:relative;display:flex;align-items:center;min-height:60px;padding:14px 44px 14px 0;font-size:1.0625rem;font-weight:700;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:2.5px;background:var(--verde-f)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:none}
.faq summary:hover{color:var(--verde-f)}
.faq details p{padding:0 32px 18px 0;max-width:62ch}

/* ---------- Pie ---------- */
.pie{padding:28px 0 36px;border-top:1px solid var(--regla);font-size:.9375rem}
.pie-in{display:grid;gap:10px}
.pie-firma .firma-nombre{font-size:1rem;padding-left:.45em}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:0 18px}
.pie-enlaces a{display:inline-flex;align-items:center;min-height:48px;font-weight:600}

/* ---------- Barra fija (móvil) ---------- */
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--regla);padding:8px max(var(--g),env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));transform:translateY(110%);visibility:hidden;transition:transform .3s var(--curva),visibility 0s linear .3s}
.barra-fija.mostrar{transform:none;visibility:visible;transition:transform .3s var(--curva),visibility 0s}
.barra-tres{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.barra-fija .boton{width:100%;padding:.5em .4em}
.con-barra{padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px))}
@media (max-width:959px){html{scroll-padding-bottom:calc(var(--barra) + 16px + env(safe-area-inset-bottom,0px))}}

/* ---------- Páginas legales y 404 ---------- */
.legal{display:grid;gap:12px;max-width:72ch}
.legal h2{margin-top:20px}
.legal h3{margin-top:12px;font-size:1.0625rem}
.error-404{padding:64px var(--g);display:grid;gap:18px;justify-items:start}
.error-404 h1{font-size:clamp(2rem,8vw,3rem);line-height:1.1;font-weight:800;letter-spacing:-.02em}

/* ---------- Escritorio ---------- */
@media (min-width:760px){
  :root{--g:32px}
  .heroe-acciones{grid-template-columns:auto;justify-items:start}
  .heroe-acciones .boton{width:auto}
  .compartir .boton{width:auto;justify-self:start}
  .canales{grid-template-columns:repeat(3,1fr)}
  .lab{grid-template-columns:repeat(2,1fr)}
  .treinta-acciones{grid-template-columns:auto;justify-items:start}
}
@media (min-width:960px){
  .con-barra{padding-bottom:0}
  .barra-fija{display:none}
  .nav{display:flex;gap:4px 22px;margin-left:auto;font-weight:600;font-size:.9375rem}
  .nav a{color:var(--grafito);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  .nav a:hover{color:var(--verde-f);text-decoration:underline}
  .cab-boton{display:inline-flex}
  .js-cab .cab-boton{visibility:hidden}
  .js-cab .cab-boton.mostrar{visibility:visible}
  .firma-nombre{font-size:1.1875rem}
  .heroe{padding:48px 0 72px}
  .heroe-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"titulo portada" "texto portada";grid-template-rows:auto 1fr;column-gap:64px;row-gap:28px;align-items:start}
  .titular{grid-area:titulo;font-size:3.125rem}
  .heroe-texto{grid-area:texto;gap:18px;max-width:34em}
  .heroe-oferta{font-size:1.125rem}
  .portada{grid-area:portada;padding-top:6px}
  .hoja{padding:24px 26px 16px}
  .hoja-titulo{font-size:1.625rem}
  .hoja-reco{display:block}
  .fila{font-size:1.0625rem;padding:10px 14px}
  .fila-no{min-height:96px;padding-right:230px}
  .sello{font-size:1.75rem;right:16px;color:var(--verde)}
  .seccion{padding:80px 0}
  .rejilla-2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:64px;align-items:start}
  .rejilla-2 .sec-cabeza{position:sticky;top:calc(var(--cab) + 32px)}
  .lab{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Impresión ---------- */
@media print{
  .cabecera{position:static}
  .barra-fija,.saltar,.boton-texto,.nav,.cab-boton{display:none!important}
  .seccion{padding:24px 0}
  .fondo-niebla{background:none}
  details::details-content{content-visibility:visible!important;display:block!important;height:auto!important}
  .faq summary::before,.faq summary::after{display:none}
  .rejilla-2 .sec-cabeza{position:static}
}
.titulo-legal{font-size:clamp(1.75rem,7vw,2.5rem);line-height:1.15;font-weight:800;letter-spacing:-.02em}

/* ---------- Esquema del techo (Qué recibe) ---------- */
.techo-bloque{margin-top:32px;display:grid;gap:16px;align-items:center}
.techo-figura{margin:0;max-width:260px}
.tuberia{display:block;width:100%;height:auto}
.tb-tubo{fill:var(--blanco);stroke:var(--gris);stroke-width:1.5}
.tb-cola{fill:var(--verde-f)}
.tb-agua{fill:var(--verde)}
.tb-brida{fill:var(--regla)}
.tb-corchete{fill:none;stroke:var(--verde);stroke-width:4;stroke-linecap:square}
.tb-txt{font-family:var(--fuente);font-size:15px;fill:var(--grafito)}
.tb-techo{font-weight:800;fill:var(--verde-f)}
.tb-techo-etq{font-size:12px;font-weight:800;letter-spacing:.08em;fill:var(--verde-f)}
.tb-nota{font-size:12px;fill:var(--gris)}
.techo-texto{display:grid;gap:8px;max-width:34em}
.techo-linea{font-size:1.25rem;font-weight:800;line-height:1.3;letter-spacing:-.015em}
@media (min-width:760px){.techo-bloque{grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:48px}.techo-figura{max-width:340px}}

/* ---------- Tubería interactiva (sustituye al esquema estático cuando hay JS) ---------- */
.tuberia-viva{display:grid;gap:12px;max-width:400px}
.techo-bloque:has(.tuberia-viva:not([hidden])){align-items:start}
.tv-pregunta{font-size:1.125rem;font-weight:800;line-height:1.25}
.tv-tramos{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tv-tramo{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:stretch}
.tubo{position:relative;justify-self:center;width:56px;border:1.5px solid var(--gris);border-radius:4px;background:var(--blanco);display:flex;justify-content:center;padding:3px;transition:width .35s var(--curva)}
.agua{position:relative;overflow:hidden;width:100%;border-radius:2px;background:var(--verde);transition:width .35s var(--curva),background-color .35s}
.despues .agua,.es-techo .agua{width:14px}
.antes .agua{background:var(--verde-f)}
.es-techo .tubo{width:22px}
.es-techo .tubo::before,.es-techo .tubo::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--verde)}
.es-techo .tubo::before{left:-14px;top:-6px;border-left-width:4px;border-top-width:4px}
.es-techo .tubo::after{right:-14px;bottom:-6px;border-right-width:4px;border-bottom-width:4px}
.tramo-btn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%;min-height:52px;padding:8px 12px;font:inherit;font-size:1rem;font-weight:600;color:var(--grafito);text-align:left;background:var(--blanco);border:2px solid var(--regla);border-radius:8px;cursor:pointer}
.tramo-btn:hover{border-color:var(--verde-f)}
.tramo-num{flex:none;width:1.6em;height:1.6em;display:inline-grid;place-items:center;border-radius:50%;background:var(--niebla);font-size:.875rem;font-weight:800;color:var(--verde-f)}
.tramo-nom{flex:1 1 auto;min-width:0}
.tramo-techo,.tramo-cola{display:none;flex:none;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.2em .5em;border-radius:4px}
.tramo-techo{color:#fff;background:var(--verde-f)}
.tramo-cola{color:var(--grafito);background:var(--hueco)}
.es-techo .tramo-btn{border-color:var(--verde-f);background:var(--niebla)}
.es-techo .tramo-techo{display:inline-block}
.con-cola .tramo-cola{display:inline-block}
.tv-resultado{font-size:1rem;line-height:1.5;padding:12px 14px;background:var(--niebla);border-left:4px solid var(--verde);border-radius:4px}
.tv-resultado b{color:var(--verde-f)}
.tuberia-viva .boton{justify-self:start}
@media (prefers-reduced-motion:no-preference){
  .agua::after{content:"";position:absolute;left:0;right:0;top:-24px;bottom:0;background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(255,255,255,.32) 10px 14px);animation:fluir 1.4s linear infinite;animation-play-state:paused;will-change:transform}
  .antes .agua::after{animation-duration:4s}
  .fluye .agua::after{animation-play-state:running}
}
@keyframes fluir{to{transform:translateY(24px)}}
@media print{.tuberia-viva .boton{display:none}}