/* Row Stories · estilo A (libro de estilo sobre blanco con tinte). CSS propio, sin librerías.
   Letras DM Serif Display y DM Sans alojadas aquí (licencia SIL OFL): ninguna petición a terceros. */

@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-italic.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/dm-sans.woff2) format("woff2")}

:root{
  --bg:#F3F7F6;      /* fondo de la página: blanco con tinte */
  --band:#E8F0EF;    /* bandas, un tono más marcadas */
  --line:#D3E0E0;
  --field:#6F8B90;   /* borde de los campos (contraste 3,6:1 sobre blanco) */
  --t:#104253;       /* verde azulado de la marca: títulos y botones */
  --ink:#0A2530;     /* texto */
  --soft:#46626C;    /* texto secundario */
  --c:#E66453;       /* coral: acentos y letra grande */
  --c-dark:#B8442F;  /* coral para letra pequeña (contraste 5:1) */
  --o:#CEC238;       /* oliva: marcas de «hueco» */
  --err:#B3261E;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gx:clamp(20px,5vw,56px);
  --header-h:72px;
  --display:var(--serif);  /* letra de los titulares (la prueba de letra la cambia) */
  --label:var(--sans);     /* letra de las etiquetas pequeñas */
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
svg{max-width:100%}
a{color:var(--t);text-underline-offset:3px}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--t);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

.wrap{width:100%;max-width:calc(1200px + 2 * var(--gx));margin-inline:auto;padding-inline:max(var(--gx),env(safe-area-inset-left,0px)) max(var(--gx),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--t);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{left:12px}

/* ===== Cabecera ===== */
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);min-height:var(--header-h);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:14px;margin-right:auto;text-decoration:none;color:var(--t)}
.logo-row{font:400 clamp(30px,3vw,38px)/1 var(--serif);color:var(--t)}
.logo-vl{width:1px;height:30px;background:var(--c);opacity:.7}
.logo-st{font:500 15px/1 var(--sans);letter-spacing:.28em;color:var(--c-dark)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav a:not(.btn){font:500 15px/1 var(--sans);color:var(--t);text-decoration:none;padding:10px 2px;border-bottom:2px solid transparent}
.nav a:not(.btn):hover,.nav a[aria-current=page]{border-bottom-color:var(--c)}
.menu-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:0;border-radius:50%;background:transparent;color:var(--t);cursor:pointer}
.menu-btn:hover{background:var(--band)}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:0;background:var(--t);color:#fff;font:700 16px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.sm{min-height:44px;padding:0 20px;font-size:14px}
.btn.ghost{background:transparent;color:var(--t);box-shadow:inset 0 0 0 1.5px var(--t)}
.btn.ghost:hover{background:var(--t);color:#fff}
.btn.full{width:100%}
.btn:disabled{opacity:.55;cursor:default}
.btn svg{flex:none}

/* ===== Piezas de texto ===== */
.eyebrow{display:flex;align-items:center;gap:12px;font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--t);margin:0 0 20px}
.eyebrow .bow{width:24px;flex:none}
.h1{font:400 clamp(44px,6.8vw,100px)/1.02 var(--display);letter-spacing:-.015em;color:var(--t);margin:0 0 24px;text-wrap:balance}
.h1 em{font-style:italic;color:var(--c)}
.h1.page{font-size:clamp(38px,5.2vw,68px);line-height:1.06}
h2,.h2-like{font:400 clamp(32px,4.2vw,54px)/1.08 var(--display);letter-spacing:-.01em;color:var(--t);text-wrap:balance;margin:0}
h3{font:400 26px/1.15 var(--display);color:var(--t)}
.lede{font:400 clamp(17px,1.5vw,20px)/1.65 var(--sans);color:var(--soft);max-width:36em}
.note{display:flex;align-items:center;gap:12px;margin-top:28px;font:500 14px/1.4 var(--sans);color:var(--soft)}
.note .bow{width:24px;flex:none}
.fine{font-size:15px;color:var(--soft)}

/* ===== Secciones ===== */
.sec{padding-block:clamp(56px,8vw,112px)}
.sec.band{background:var(--band)}
.sec.paper{background:#fff;border-block:1px solid var(--line)}
.sec.tight{padding-block:clamp(36px,5vw,64px)}
.sec-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2+.lede{margin-top:16px}
.sec-head.slim{margin-bottom:20px}
.sec-head.slim h2{font-size:clamp(28px,3.2vw,40px)}
.sec-head.slim .fine{margin-top:8px;max-width:46rem}
.packs-sec{padding-top:clamp(20px,3vw,36px)}
.sec-foot{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.divider{display:flex;align-items:center;gap:16px}
.divider i{flex:1;height:1px;background:var(--line)}
.divider .bow{width:34px}

/* ===== Portada ===== */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(40px,6.5vw,96px) clamp(36px,5vw,72px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.shape{position:absolute;pointer-events:none;z-index:0}
.shape.s1{width:clamp(140px,24vw,320px);aspect-ratio:1;border-radius:50%;background:var(--t);opacity:.06;right:-5vw;top:-8vw}
.shape.s2{width:clamp(56px,8vw,110px);aspect-ratio:1;border:2px solid var(--c);border-radius:16px;opacity:.5;right:clamp(8px,1.4vw,20px);bottom:clamp(14px,4vw,56px);transform:rotate(12deg)}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:14px;box-shadow:0 30px 60px -30px rgba(16,66,83,.35)}
.media{position:relative;aspect-ratio:4/4.2;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#DDEBEC 0%,#F4F0E4 62%,#F8E3DB 100%);display:grid;place-items:center}
.media .mascot{width:44%;height:auto}
.media .gap-tag{position:absolute;top:12px;left:12px}
.play{position:absolute;left:14px;bottom:14px;width:60px;height:60px;border-radius:50%;background:var(--t);display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(16,66,83,.7)}
.cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 8px 4px;font:700 16px/1.3 var(--sans);color:var(--t)}
.cap small{display:block;font-weight:400;font-size:14px;color:var(--soft)}
.cap .bow{width:30px;flex:none}
.mascot{display:block}

/* Logos y casos (solo aparecen mientras son «huecos») */
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.slot{display:grid;place-items:center;align-content:center;gap:3px;min-height:76px;border:1.5px dashed #8FA9AE;border-radius:14px;background:rgba(255,255,255,.75);font:700 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center;padding:8px}
.slot small{font:400 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none}
.names{display:flex;flex-wrap:wrap;gap:14px 44px}
.names li{display:grid;gap:3px}
.names b{font:400 clamp(22px,2.4vw,30px)/1.15 var(--display);color:var(--t)}
.names span{font-size:14px;color:var(--soft)}
.clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.client{gap:12px}
.client-tipo{font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.client h3{font-size:30px}
.client-que{font:700 13px/1.4 var(--sans);color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 12px;border-radius:999px;background:var(--band);color:var(--t);font:500 14px/1.2 var(--sans)}
.client-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-weight:700;color:var(--t)}
.grp{font:700 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin:clamp(26px,4vw,44px) 0 14px}
#equipo .sec-head+.grp,#equipo .sec-head+.hueco .grp{margin-top:0}
.grp+.lede{margin:-6px 0 22px;max-width:46em}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,250px));gap:22px 18px}
.person{display:grid;gap:8px;align-content:start}
.person-foto{aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.person-foto img{display:block;width:100%;height:100%;object-fit:cover}
.person-mono{font:400 72px/1 var(--display);color:var(--t)}
.person-vacia .person-foto{border:1.5px dashed #8FA9AE;background:rgba(255,255,255,.7);font:700 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.person h4{font:400 26px/1.1 var(--display);color:var(--t)}
.person-rol{font:700 14px/1.35 var(--sans);color:var(--ink)}
.person p:not(.person-rol){color:var(--soft);font-size:15.5px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.proof-title{margin-top:26px;margin-bottom:14px;font:700 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}

/* ===== Tarjetas ===== */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:10px;align-content:start}
.card p{color:var(--soft);font-size:16px}
.card-n{font:400 28px/1 var(--display);color:var(--c)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--t);font:500 15px/1.2 var(--sans)}
.who{margin-top:clamp(28px,4vw,44px)}
.who h3{font:700 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.who .fine{margin-top:14px}
.nohacemos{margin-top:8px}
.nohacemos b{color:var(--t)}

/* Promesas */
.promesas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.promesa{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:10px;align-content:start}
.promesa .bow{width:34px}
.promesa b{font:400 25px/1.2 var(--display);color:var(--t)}
.promesa span{color:var(--soft);font-size:16px}
.promesas+.fine{margin-top:20px;font-weight:600;color:var(--t)}

/* «Esto no es para ti si…» */
.nope{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.nope li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:6px;align-content:start}
.nope li::before{content:"×";font:400 34px/1 var(--display);color:var(--c)}
.nope b{font:400 22px/1.2 var(--display);color:var(--t)}
.nope span{color:var(--soft);font-size:16px}

/* Preguntas frecuentes */
.faq{display:grid;gap:12px;max-width:52rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:700 17px/1.35 var(--sans);color:var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-right:4px;border-right:2.5px solid var(--c);border-bottom:2.5px solid var(--c);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-a{padding:0 22px 20px;color:var(--soft)}

/* ===== Packs (también los pinta app.js) ===== */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:stretch;padding-top:14px}
.pack{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 26px 26px}
.pack.star{border:2px solid var(--t);box-shadow:0 30px 60px -34px rgba(16,66,83,.45)}
.pack .tag{position:absolute;top:-14px;left:24px;background:var(--c);color:var(--ink);font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.pack h3{font-size:30px}
.pack .lead{color:var(--soft);font-size:15.5px;min-height:4.6em}
.price{display:flex;align-items:baseline;gap:8px}
.price b{font:400 56px/1 var(--display);letter-spacing:-.02em;color:var(--t);font-variant-numeric:lining-nums}
.price small{color:var(--soft);font-size:14px}
.pack ul{display:grid;gap:9px;align-content:start;font-size:15.5px;flex:1}
.pack li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.pack li::before{content:"✓";color:var(--t);font-weight:700}
.save{font-size:14px;color:var(--ink);background:#E3EFEE;border-radius:12px;padding:10px 12px}
.pack.custom{background:var(--band);border-style:dashed;border-color:#8FA9AE}
.pack.custom li::before{content:"+"}
.spot-banner{margin-top:22px;background:#fff;border:1.5px dashed #8FA9AE;border-radius:20px;padding:18px 22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.spot-banner p{font-size:16px;max-width:60ch}
.meta-note{margin-top:22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:14px;padding:14px 18px;font-size:16px;max-width:46rem}

/* ===== Calculadora (la pinta app.js) ===== */
#calculadora,#pedir{padding-block:clamp(28px,4vw,56px)}
.back{background:none;border:0;padding:8px 0;margin-bottom:10px;font:700 15px/1 var(--sans);color:var(--t);cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.head{display:grid;gap:8px;margin-bottom:22px}
.head p{color:var(--soft);max-width:62ch}
.calc{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
.groups{display:grid;gap:16px;min-width:0}
fieldset{margin:0;min-width:0;border:1px solid var(--line);border-radius:22px;background:#fff;padding:18px 24px 8px}
legend{font:400 24px/1.2 var(--display);color:var(--t);padding:0 8px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:14px;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .t b{display:block;font-weight:700}
.row .t small{color:var(--soft);font-size:14px}
.row .u{font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.row.wide{grid-template-columns:minmax(0,1fr)}
.row.wide select{max-width:none;width:100%}
.step{display:inline-flex;align-items:center;border:1.5px solid var(--field);border-radius:999px;overflow:hidden;background:#fff}
.step button{width:46px;height:46px;border:0;background:transparent;font-size:22px;color:var(--t);cursor:pointer}
.step button:hover{background:var(--band)}
.step output{min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.redes{display:flex;flex-wrap:wrap;gap:6px 18px;padding-block:6px 12px}
.redes-ayuda{color:var(--soft);font-size:14px;margin-top:4px}
label.red{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:500;font-size:16px;min-height:44px}
.red input{width:22px;height:22px;accent-color:var(--t)}
.form-redes{border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.form-redes legend{font:700 15px/1.3 var(--sans);color:var(--ink);padding:0 4px}
.sum{position:sticky;top:calc(var(--header-h) + 16px);background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;display:grid;gap:14px;box-shadow:0 30px 60px -40px rgba(16,66,83,.35)}
.sum-title{font:400 26px/1.15 var(--display);color:var(--t)}
.lines{display:grid;gap:6px;font-size:15px}
.lines li{display:flex;justify-content:space-between;gap:12px}
.lines li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--soft)}
.lines .empty{color:var(--soft)}
.lines .minimo{color:var(--soft);font-size:14px;font-style:italic}
.tot{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:2px}
.tot b{font:400 46px/1 var(--display);letter-spacing:-.02em;color:var(--t);font-variant-numeric:lining-nums}
.tot small{color:var(--soft);font-size:14px}
.hint{background:#FDF1ED;border:2px solid var(--c);border-radius:18px;padding:16px;display:grid;gap:10px;font-size:15px}
.hint .eyebrow{display:block;margin:0;color:var(--c-dark);font-size:11px}
.hint.applied{background:#E3EFEE;border-color:var(--t)}
.hint.applied .eyebrow{color:var(--t)}
.offer-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.offer-price b{font:400 38px/1 var(--display);color:var(--t);font-variant-numeric:lining-nums}
.offer-price small{color:var(--soft);font-size:14px}
.hint .link{background:none;border:0;padding:4px 0;font:700 14px var(--sans);color:var(--t);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start;min-height:36px}
.base-note{font-size:15px;color:var(--soft)}
.mobar{display:none}
@media (max-width:860px){
  #calculadora:not([hidden]) .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-top:1px solid var(--line);padding:10px max(var(--gx),env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(var(--gx),env(safe-area-inset-left,0px));box-shadow:0 -6px 20px #10425314}
  .mobar b{font:400 28px/1 var(--display);color:var(--t);display:block}
  .mobar small{color:var(--soft);font-size:12px}
  .mobhint{display:block;margin-top:4px;background:#FDF1ED;border:1px solid var(--c);border-radius:8px;padding:5px 9px;font:700 12.5px var(--sans);color:var(--c-dark);cursor:pointer;text-align:left}
  #calculadora:not([hidden]){padding-bottom:140px}
}

/* ===== Formularios ===== */
.formcard{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,36px);display:grid;gap:18px;box-shadow:0 30px 60px -40px rgba(16,66,83,.35);max-width:640px}
.formcard form{display:grid;gap:16px}
label{display:grid;gap:7px;font-weight:700;font-size:15px;color:var(--ink)}
label .opt{font-weight:400;color:var(--soft)}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;min-height:50px;padding:0 14px;border:1.5px solid var(--field);border-radius:12px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--sans)}
select{max-width:190px;padding-right:8px}
form select{max-width:none}
textarea{padding:12px 14px;min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(16,66,83,.28);outline-offset:1px;border-color:var(--t)}
.chosen{background:#E3EFEE;border:1px solid #B5D4CF;border-radius:14px;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:15px}
.chosen button{background:none;border:0;font:700 14px var(--sans);color:var(--t);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.err{color:var(--err);font-size:15px;font-weight:600}
.ok{background:#E3EFEE;border:1px solid #B5D4CF;border-radius:18px;padding:20px;display:grid;gap:8px}
.ok b{font:400 26px/1.2 var(--display);color:var(--t)}
.legal{font-size:13.5px;color:var(--soft);line-height:1.55}
.legal a{color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.contact-side{display:grid;gap:22px;align-content:start}
.contact-side h2{font-size:clamp(26px,2.6vw,34px)}
.info{display:grid;gap:20px}
.info h3{font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.info p{font-size:17px}
.talk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:clamp(28px,5vw,64px);align-items:start}
.talk-copy h2{margin-bottom:16px}
.checks{display:grid;gap:10px;margin-top:26px;font-weight:600;color:var(--t)}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:8px}
.checks li::before{content:"✓";color:var(--c-dark);font-weight:700}
.page-hero{padding-block:clamp(36px,5vw,72px) 8px}

/* ===== Textos legales ===== */
.prose{max-width:46rem}
.prose h2{font:400 28px/1.2 var(--display);margin:40px 0 12px}
.prose p+p{margin-top:12px}
.prose ul{list-style:disc;padding-left:22px;display:grid;gap:6px;margin-top:10px}
.prose dl{display:grid;gap:12px;margin-top:10px}
.prose dt{font-weight:700}
.prose .upd{color:var(--soft);font-size:15px;margin-top:6px}

/* ===== 404 ===== */
.nf{padding-block:clamp(64px,10vw,140px);text-align:center;display:grid;justify-items:center;gap:20px}
.nf .mascot{width:90px;height:auto}
.nf .ctas{justify-content:center;margin-top:8px}

/* ===== Pie ===== */
.site-footer{background:#DFEAE9;border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) 28px;margin-top:0}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px)}
.foot p{color:var(--soft);font-size:15px;max-width:30em}
.foot .logo{margin-bottom:14px}
.site-footer .logo-st{color:#A63D2A}   /* un tono más oscuro: sobre el fondo del pie, el coral normal no llega a 4,5:1 */
.foot h2{font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.foot ul{display:grid;gap:8px}
.foot a{text-decoration:none;font-weight:500}
.foot a:hover{text-decoration:underline}
.foot-co{margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid var(--line);color:var(--soft);font-size:14px;line-height:1.7}
.foot-co a{color:inherit}

/* ===== Copia de pruebas: lo que NO saldrá en la web real ===== */
.pbar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;background:var(--o);color:#1A1917;font:600 13px/1.4 var(--sans);padding:8px var(--gx);text-align:center}
.pletra{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.pletra button{font:700 12px/1 var(--sans);padding:6px 11px;border-radius:999px;border:1.5px solid #1A1917;background:transparent;color:#1A1917;cursor:pointer}
.pletra button[aria-pressed=true]{background:#1A1917;color:var(--o)}
.gap-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--o);color:#1A1917;font:700 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:normal;text-align:left}
.hueco{position:relative;border:2px dashed #8FA9AE;border-radius:20px;padding:46px 20px 20px;margin-block:18px;background:rgba(255,255,255,.6)}
.hueco>.gap-tag{position:absolute;top:10px;left:10px;max-width:calc(100% - 20px)}

/* ===== Dentro del portal de Omar (iframe con ?interno=1) ===== */
.interno .site-header,.interno .site-footer,.interno .pbar,.interno .skip,.interno .solo-web{display:none!important}

/* ===== Pantallas pequeñas ===== */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clients{grid-template-columns:minmax(0,1fr)}
  .promesas{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot>:first-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .media{aspect-ratio:16/11}
  .media .mascot{width:30%;margin-top:26px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:minmax(0,1fr)}
  .sum{position:static}
  .contact-grid,.talk{grid-template-columns:minmax(0,1fr)}
  .js .menu-btn{display:inline-flex}
  .js .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px max(var(--gx),env(safe-area-inset-right,0px)) 20px max(var(--gx),env(safe-area-inset-left,0px));box-shadow:0 20px 30px -20px rgba(16,66,83,.35)}
  .js .nav.open{display:flex}
  .js .nav a:not(.btn){padding:16px 2px;font-size:17px;border-bottom:1px solid var(--line)}
  .js .nav .btn{margin-top:16px}
  .site-header{position:sticky}
  .bar{position:relative}
  html:not(.js) .nav{flex-basis:100%;flex-wrap:wrap;padding-bottom:12px}
}
@media (max-width:560px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .logo-row{font-size:30px}
  .eyebrow{font-size:11px;letter-spacing:.16em}
  .ctas{flex-direction:column;align-items:stretch}
  .ctas .btn{width:100%}
  .price b{font-size:50px}
  .row{grid-template-columns:minmax(0,1fr)}
  .row .step,.row select{justify-self:start}
  fieldset{padding-inline:16px}
}

/* ===== Letra de los titulares: la A (diseño, colores, disposición) con la tipografía de la C =====
   ELEGIDA por Miguel el 02/11/2026: la C gruesa = Anton en los titulares + DM Mono en las etiquetas, puesta en <html data-letra="c">.
   Alternativas para comparar (solo con el interruptor de la copia de pruebas): C fina = Antonio (data-peso="fina") y la A original
   (sin data-letra: DM Serif Display). Lo que no se use no se descarga. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton.woff2) format("woff2")}
@font-face{font-family:"Antonio";font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/antonio.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-500.woff2) format("woff2")}
html[data-letra="c"]{--display:"Anton",Impact,"Arial Narrow",sans-serif;--label:"DM Mono",ui-monospace,Menlo,monospace;--dw:400;--dws:400;--dls:.005em}
html[data-letra="c"][data-peso="fina"]{--display:"Antonio","Arial Narrow",Impact,sans-serif;--dw:300;--dws:400;--dls:.02em}   /* fina: ligera en los titulares grandes y un poco más firme en los pequeños, para que se lea */
html[data-letra="c"] :is(.h1,main h2,.h2-like){font-weight:var(--dw);text-transform:uppercase;letter-spacing:var(--dls)}
html[data-letra="c"] :is(.card h3,.pack h3,.client h3,.person h4,.promesa b,.nope b,.names b,legend,.sum-title,.ok b,.prose h2,.contact-side h2,.sec-head.slim h2){font-weight:var(--dws);text-transform:uppercase;letter-spacing:var(--dls)}
html[data-letra="c"] :is(.price b,.tot b,.offer-price b,.mobar b,.card-n){font-weight:var(--dws);letter-spacing:var(--dls)}
html[data-letra="c"] .h1{font-size:clamp(52px,8.6vw,124px);line-height:.96;margin-bottom:28px}   /* que «CONTADA CON» quepa en una línea: titular en tres */
html[data-letra="c"] .h1 em{font-style:normal}
html[data-letra="c"] .h1.page{font-size:clamp(46px,7vw,100px);line-height:1}
html[data-letra="c"] :is(main h2,.h2-like){font-size:clamp(38px,5.4vw,76px);line-height:1.02}
html[data-letra="c"] .sec-head.slim h2{font-size:clamp(32px,3.8vw,48px)}
html[data-letra="c"] .contact-side h2{font-size:clamp(30px,3vw,40px)}
html[data-letra="c"] .prose h2{font-size:30px;margin-top:44px}
html[data-letra="c"] :is(.card h3,.client h3){font-size:32px;line-height:1.05}
html[data-letra="c"] .pack h3{font-size:34px;line-height:1.05}
html[data-letra="c"] .promesa b{font-size:30px;line-height:1.1}
html[data-letra="c"] .person h4{font-size:30px;line-height:1.05}
html[data-letra="c"] .grp{font-family:var(--label);font-weight:500;letter-spacing:.14em}
html[data-letra="c"] .nope b{font-size:28px;line-height:1.1}
html[data-letra="c"] .names b{font-size:clamp(28px,3vw,40px)}
html[data-letra="c"] legend{font-size:30px}
html[data-letra="c"] .sum-title,html[data-letra="c"] .ok b{font-size:32px}
html[data-letra="c"] .price b{font-size:68px}
html[data-letra="c"] .tot b{font-size:56px}
html[data-letra="c"] .offer-price b{font-size:46px}
html[data-letra="c"] .mobar b{font-size:34px}
html[data-letra="c"] .card-n{font-size:34px}
html[data-letra="c"] :is(.eyebrow,.proof-title,.client-tipo,.who h3,.info h3,.foot h2){font-family:var(--label);font-weight:500;letter-spacing:.14em}
html[data-letra="c"] .logo-row{font-family:var(--display);font-weight:var(--dws);font-size:clamp(34px,3.4vw,44px);letter-spacing:.015em;text-transform:uppercase}
html[data-letra="c"] .logo-st{font-family:var(--label);font-weight:500;font-size:14px;letter-spacing:.3em}
html[data-letra="c"] .nav a:not(.btn){font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){html[data-letra="c"] .js .nav a:not(.btn){font-size:14px}}
@media (max-width:560px){
  html[data-letra="c"] .h1{font-size:clamp(50px,16vw,84px)}
  html[data-letra="c"] .h1.page{font-size:clamp(42px,13vw,64px)}
  html[data-letra="c"] :is(main h2,.h2-like){font-size:clamp(34px,10.5vw,50px)}
  html[data-letra="c"] .sec-head.slim h2{font-size:clamp(30px,9vw,40px)}
  html[data-letra="c"] .price b{font-size:60px}
}