/* Portada y páginas públicas */
body.pub{background:var(--papel)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:.5em .9em;border-radius:6px;z-index:99} .saltar:focus{left:8px}
.nav-pub{position:sticky;top:0;z-index:40;background:rgba(243,245,240,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--linea)}
.nav-pub .ancho{display:flex;align-items:center;gap:22px;min-height:64px}
.nav-pub nav{display:flex;gap:4px;flex:1;justify-content:center} .nav-pub nav a{padding:.45em .75em;border-radius:6px;color:var(--tinta-2);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap} .nav-pub nav a:hover{color:var(--tinta);background:rgba(20,27,45,.06)}
.nav-acc{display:flex;align-items:center;gap:14px} .nav-acc .entrar{font-weight:650;color:var(--tinta);text-decoration:none} .nav-acc .entrar:hover{text-decoration:underline}
@media(max-width:900px){.nav-pub nav{display:none}.nav-pub .ancho{justify-content:space-between}}
.nav-pub .marca,.nav-acc .btn{white-space:nowrap}@media(max-width:430px){.nav-pub .marca{font-size:1.05rem}.nav-pub .marca svg{width:26px;height:26px}.nav-acc{gap:10px}.nav-pub .ancho{gap:10px}}

.sec{padding:clamp(56px,8vw,104px) 0} .sec h2,.cierre h2{font-size:clamp(1.75rem,1.1rem + 2.4vw,2.7rem);font-stretch:82%;font-weight:780;letter-spacing:-.018em;max-width:22ch;margin-bottom:.45em}
.bajada{font-size:1.14rem;color:var(--tinta-2);max-width:62ch;margin-bottom:0}

/* Héroe */
.heroe{padding:clamp(36px,6vw,76px) 0 clamp(48px,7vw,88px)}
.heroe-cols{display:grid;gap:44px;align-items:center} @media(min-width:980px){.heroe-cols{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px}}
.heroe h1{font-size:clamp(2.3rem,1.2rem + 4.2vw,4.2rem);font-stretch:76%;font-weight:800;line-height:.98;letter-spacing:-.025em;margin-bottom:.4em}
.heroe h1 span{display:block;text-wrap:balance;max-width:15ch} .heroe h1 span+span{margin-top:.14em}
.entrada{font-size:clamp(1.08rem,1rem + .4vw,1.26rem);color:var(--tinta-2);max-width:54ch;line-height:1.5}
.heroe .acciones{margin-top:26px;gap:12px} .nota-cta{margin:14px 0 0;font-size:.95rem;color:var(--tinta-2)}

/* Hoja de demostración: un fragmento de la constancia que se llena con lo que escribe la visita */
.demo{min-width:0}
.hd{background:#fff;border:1px solid var(--linea);border-radius:6px;box-shadow:0 1px 0 rgba(20,27,45,.05),0 30px 60px -32px rgba(20,27,45,.38);padding:22px 22px 18px;transform:rotate(-1.1deg);transform-origin:60% 50%}
.hd-cab{display:flex;justify-content:space-between;align-items:stretch;margin:-22px -22px 14px;padding-left:22px}
.hd-logo{align-self:center;border:1.5px dashed #b9c1b3;border-radius:6px;padding:.45em 1.1em;font-size:.82rem;color:var(--tinta-3);font-weight:600}
.hd-dc3{background:var(--boli);color:#fff;padding:12px 22px 10px 26px;font-weight:800;font-stretch:80%;font-size:1.7rem;line-height:1;text-align:right;border-radius:0 5px 0 0} .hd-dc3 small{display:block;font-size:.58rem;letter-spacing:.3em;font-weight:600;opacity:.8;margin-bottom:3px;text-transform:uppercase}
.hd-tit{text-align:center;font-weight:750;font-stretch:86%;font-size:.86rem;letter-spacing:.01em;text-transform:uppercase;margin-bottom:12px}
.hd-barra{background:var(--boli);color:#fff;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.42em .9em;border-radius:4px;margin-bottom:8px}
.hd-caja{background:#F1F4FD;border:1px solid #CBD5F6;border-radius:5px;padding:7px 10px 9px;margin-bottom:8px}
.hd-rot{display:block;font-size:.66rem;color:var(--tinta-2);margin-bottom:3px}
.hd-valor{display:block;font-weight:750;font-stretch:92%;font-size:clamp(.95rem,.7rem + 1vw,1.16rem);min-height:1.4em;overflow-wrap:anywhere;line-height:1.2}
.hd-celdas{display:grid;grid-template-columns:repeat(18,1fr);gap:3px} .hd-celdas span{aspect-ratio:1/1.08;background:#fff;border:1px solid #AEBBEA;border-radius:3px;display:grid;place-items:center;font-weight:750;font-size:clamp(.62rem,.3rem + 1.15vw,.92rem);line-height:1}
.hd-celdas span.nueva{animation:tecla .22s ease-out}
@keyframes tecla{from{background:var(--boli-suave);transform:translateY(-2px)}to{background:#fff;transform:none}}
.hd-pie{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.hd-qr{width:64px;height:64px;flex:none;background:#fff;border:1px solid var(--linea);border-radius:4px;padding:4px} .hd-qr svg{display:block;width:100%;height:100%}
.hd-ver{font-size:.74rem;line-height:1.45;color:var(--tinta-2)} .hd-ver b{display:block;color:var(--boli);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase} .hd-ver span{display:block}
.hd-estado{margin-left:auto;font-size:.8rem;font-weight:700;padding:.3em .7em;border-radius:99px;background:var(--linea-2);color:var(--tinta-2)} .hd-estado.ok{background:var(--sello-suave);color:#07593b} .hd-estado.mal{background:var(--rojo-suave);color:#8d1f1b} .hd-estado:empty{display:none}
.demo-form{margin-top:26px} .demo-form p{margin:0 0 8px;font-size:.92rem;color:var(--tinta-2)}
.demo-campos{display:grid;gap:10px} @media(min-width:520px){.demo-campos{grid-template-columns:1.5fr 1fr}} .demo-campos label{font-size:.8rem;color:var(--tinta-2);margin:0} .demo-campos input{margin-top:4px;text-transform:uppercase;background:#fff}

/* Lo que entregas: hojas sobre la mesa */
.entregas{background:#E9EDE4;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.mesa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;margin-top:44px;align-items:start}
@media(min-width:900px){.mesa{grid-template-columns:1.25fr 1fr 1fr .72fr;gap:26px}}
.papel{margin:0} .papel img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--linea);border-radius:4px;box-shadow:0 1px 0 rgba(20,27,45,.05),0 22px 44px -26px rgba(20,27,45,.42)}
.papel figcaption{margin-top:16px;font-size:.93rem;color:var(--tinta-2);line-height:1.45} .papel figcaption b{display:block;color:var(--tinta);font-size:1.02rem;font-stretch:92%;margin-bottom:2px}
@media(min-width:900px){.p1 img{transform:rotate(-1.2deg)}.p2{margin-top:34px}.p2 img{transform:rotate(.9deg)}.p3{margin-top:14px}.p3 img{transform:rotate(-.6deg)}.p4{margin-top:48px}}
.papel.movil img{border-radius:22px;border:6px solid var(--tinta);box-shadow:0 26px 48px -26px rgba(20,27,45,.55)}
.mas-entregas{margin:40px 0 0;font-size:1.05rem;color:var(--tinta-2);max-width:70ch}

/* Cómo funciona */
.tres{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:30px;counter-reset:p} @media(min-width:820px){.tres{grid-template-columns:repeat(3,1fr);gap:40px}}
.tres li{counter-increment:p;border-top:2px solid var(--tinta);padding-top:16px} .tres li::before{content:counter(p);display:block;font-weight:800;font-stretch:76%;font-size:2.6rem;line-height:1;color:var(--boli);margin-bottom:10px}
.tres h3{font-size:1.22rem;margin-bottom:.35em} .tres p{margin:0;color:var(--tinta-2)}

/* Funciones */
.funciones{background:var(--hoja);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.lista-fun{margin:44px 0 0;display:grid;gap:0 56px} @media(min-width:820px){.lista-fun{grid-template-columns:1fr 1fr}}
.lista-fun>div{padding:20px 0;border-top:1px solid var(--linea)} .lista-fun dt{font-weight:750;font-stretch:90%;font-size:1.1rem;margin-bottom:4px} .lista-fun dd{margin:0;color:var(--tinta-2)}

/* Cliente */
.cliente-cols{display:grid;gap:36px;align-items:center} @media(min-width:900px){.cliente-cols{grid-template-columns:.9fr 1.1fr;gap:60px}}
.cliente p{font-size:1.08rem;color:var(--tinta-2);max-width:52ch}

/* Precios */
.precios{background:#E9EDE4;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.precios-cols{display:grid;gap:40px;align-items:start} @media(min-width:940px){.precios-cols{grid-template-columns:.92fr 1.08fr;gap:64px}}
.incluye{list-style:none;margin:24px 0 0;padding:0} .incluye li{padding:.45em 0 .45em 1.7em;position:relative;color:var(--tinta-2)} .incluye li::before{content:"";position:absolute;left:2px;top:.82em;width:9px;height:5px;border-left:2.4px solid var(--sello);border-bottom:2.4px solid var(--sello);transform:rotate(-45deg)}
.calc{margin-top:28px;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px} .calc label{font-size:1rem}
.calc-fila{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center} .calc input{width:130px;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums} .calc output{flex:1;min-width:210px;color:var(--tinta-2);line-height:1.4} .calc output b{color:var(--tinta)}
.tarifas{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;font-size:1rem;border-collapse:separate;border-spacing:0}
.tarifas thead th{background:transparent;border-bottom:1.5px solid var(--tinta);color:var(--tinta);font-size:.82rem;padding:.9em 1.1em}
.tarifas tbody th{text-align:left;font-weight:700;font-stretch:92%;font-size:1.06rem;padding:.8em 1.1em;border-bottom:1px solid var(--linea-2);background:none;color:var(--tinta);white-space:normal} .tarifas tbody th small{display:block;font-weight:400;font-stretch:100%;font-size:.84rem;color:var(--tinta-3);margin-top:1px} .tarifas tbody th .chip{margin-left:8px;vertical-align:2px}
.tarifas td{padding:.8em 1.1em;border-bottom:1px solid var(--linea-2);white-space:nowrap} .tarifas td b{font-size:1.2rem;font-stretch:86%} .tarifas tr:last-child th,.tarifas tr:last-child td{border-bottom:0}
.tarifas tr.rec th,.tarifas tr.rec td{background:var(--boli-suave)} .tarifas tr.gratis td b{color:var(--sello)} .tarifas tr.plan th,.tarifas tr.plan td{border-top:1.5px solid var(--tinta)} .tarifas tr.sug th{box-shadow:inset 4px 0 0 var(--sello)}
.precios .acciones{margin-top:20px}

/* Comparación */
.comp{background:var(--hoja)} .comp th,.comp td{padding:.85em 1em;vertical-align:top;white-space:normal} .comp thead th{font-size:.9rem;color:var(--tinta)} .comp tbody th{font-weight:650;color:var(--tinta);background:none;font-size:.95rem;width:26%}
.comp td{color:var(--tinta-2);width:37%} .comp td:last-child{color:var(--tinta);font-weight:550;background:#F4F8F5} .comp thead th:last-child{background:#E1F3EA}
.compara .tabla-caja{margin-top:36px;border-color:var(--linea)}

/* Preguntas */
.faq{background:var(--hoja);border-top:1px solid var(--linea)}
.faq-cols{display:grid;gap:26px} @media(min-width:900px){.faq-cols{grid-template-columns:.7fr 1.3fr;gap:60px}}
.faq details{border-top:1px solid var(--linea)} .faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:1em 2.2em 1em 0;font-weight:700;font-stretch:92%;font-size:1.08rem;position:relative} .faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:1.35em;width:9px;height:9px;border-right:2.4px solid var(--tinta-2);border-bottom:2.4px solid var(--tinta-2);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.6em} .faq details p{margin:0 0 1.2em;color:var(--tinta-2);max-width:68ch}

/* Cierre */
.cierre{background:var(--boli);color:#fff;padding:clamp(52px,7vw,88px) 0} .cierre h2{color:#fff;max-width:20ch} .cierre p{font-size:1.12rem;opacity:.92;max-width:52ch;margin-bottom:26px}
.btn.claro{background:#fff;color:var(--boli-osc);border-color:#fff} .btn.claro:hover{background:var(--boli-suave);border-color:var(--boli-suave);color:var(--boli-osc)}
.cierre :focus-visible{outline-color:#fff}

/* Pie */
.pie-sitio{background:var(--tinta);color:#C9CFDB;padding:52px 0 34px;font-size:.94rem} .pie-sitio .marca{color:#fff} .pie-sitio p{margin:.9em 0 0;max-width:44ch} .pie-sitio .sub{color:#8D97AB;font-size:.84rem}
.pie-cols{display:grid;gap:30px} @media(min-width:820px){.pie-cols{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.pie-sitio nav{display:flex;flex-direction:column;gap:9px} .pie-sitio nav b{color:#fff;font-size:.86rem;margin-bottom:2px} .pie-sitio a{color:#C9CFDB;text-decoration:none;overflow-wrap:anywhere} .pie-sitio a:hover{color:#fff;text-decoration:underline}
.pie-sitio .legal{margin-top:38px;padding-top:20px;border-top:1px solid #2B3348;color:#8D97AB;font-size:.82rem;max-width:none}
.pie-sitio :focus-visible{outline-color:#fff}

/* Páginas de texto (ayuda, términos, privacidad) */
.texto{max-width:760px;margin:0 auto;padding:clamp(34px,5vw,64px) 20px 80px} .texto h1{font-size:clamp(1.9rem,1.3rem + 2vw,2.7rem);font-stretch:80%;margin-bottom:.3em}
.texto h2{font-size:1.36rem;margin:2em 0 .5em} .texto h3{font-size:1.08rem;margin:1.5em 0 .35em} .texto p,.texto li{color:var(--tinta-2);line-height:1.62} .texto li{margin-bottom:.4em} .texto ul,.texto ol{padding-left:1.3em}
.texto .fecha{color:var(--tinta-3);font-size:.92rem} .texto .borrador{background:var(--ambar-suave);border:1px solid #ecd49d;color:#6d4100;border-radius:var(--radio-s);padding:.8em 1em;font-size:.94rem}
.texto .indice{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 20px;margin:22px 0} .texto .indice ol{margin:0}
@media(prefers-reduced-motion:reduce){.hd-celdas span.nueva{animation:none}.hd{transform:none}.papel img{transform:none!important}}
@media(max-width:560px){.hd{padding:16px 14px 14px;transform:none}.hd-cab{margin:-16px -14px 12px;padding-left:14px}.hd-celdas{gap:2px}.hd-estado{margin-left:0}}
