/* Mentecitas · Calma en Casa — identidad única (ver salidas/_paletas-usadas.md) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');
:root{
  --noche:#0F2A2E;--noche2:#163A3F;--noche3:#1E4A50;--crema:#F6F1E7;--crema2:#EDE5D5;--tinta:#1B2A2C;--mu:#5F6F70;--mu2:#9FB6B3;--ln:#D9D0BF;
  --sol:#F5C451;--sol2:#FBE3A0;--coral:#F28C6B;--coral2:#FBD8CB;--verde:#3E8E7E;--verde2:#D7EAE4;
  --grad:linear-gradient(120deg,var(--sol) 0%,#F7D98A 55%,var(--coral) 100%);
  --d:"Fraunces",Georgia,serif;--t:"Nunito Sans","Segoe UI",Arial,sans-serif;--r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--t);font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:22px}
.narrow{max-width:760px;margin-inline:auto}
section{padding-block:clamp(52px,7vw,84px)}
section.alt{background:var(--crema2)}
h1,h2,h3{font-family:var(--d);color:var(--noche);letter-spacing:-.02em;line-height:1.08;text-wrap:balance;margin:0 0 16px}
h1{font-weight:900;font-size:clamp(2.35rem,6.2vw,4.3rem);letter-spacing:-.03em;line-height:1.02}
h2{font-weight:900;font-size:clamp(1.75rem,3.8vw,2.6rem)}
h3{font-weight:700;font-size:1.25rem;margin-bottom:8px}
p{margin:0 0 16px}
.eyebrow{font-family:var(--t);font-weight:800;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--verde);margin:0 0 12px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{font-size:1.15rem;color:var(--noche)}
small,.small{font-size:14px;color:var(--mu)}

/* ---- hero con profundidad ---- */
.hero{background:var(--noche);color:var(--crema);position:relative;overflow:hidden;padding-block:clamp(56px,8vw,100px)}
.hero::before{content:"";position:absolute;width:820px;height:820px;right:-300px;top:-380px;border-radius:50%;background:radial-gradient(circle,rgba(245,196,81,.36),transparent 66%);pointer-events:none}
.hero::after{content:"";position:absolute;width:640px;height:640px;left:-280px;bottom:-340px;border-radius:50%;background:radial-gradient(circle,rgba(242,140,107,.28),transparent 66%);pointer-events:none}
.hero .grano{position:absolute;inset:0;opacity:.06;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:5px 5px;pointer-events:none}
.hero .wrap{position:relative}
.hero h1,.hero h2{color:var(--crema)}
.hero .eyebrow{color:var(--sol)}
.hero .sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:#D8E2E0;max-width:38ch;margin:0 0 26px}
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.seal{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:800;color:var(--crema);margin-bottom:18px}
.seal i{width:8px;height:8px;border-radius:50%;background:var(--sol);box-shadow:0 0 14px var(--sol)}

/* ---- CTA ---- */
.cta{display:inline-block;background:var(--sol);color:var(--noche);text-decoration:none;font-weight:800;font-size:1.05rem;padding:18px 32px;border-radius:999px;box-shadow:0 14px 44px rgba(245,196,81,.38);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 54px rgba(245,196,81,.5)}
.cta-note{font-size:13.5px;color:var(--mu2);margin:12px 0 0}
section .cta-note{color:var(--mu)}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(15,42,46,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));transform:translateY(110%);transition:transform .3s}
.sticky.on{transform:none}
.sticky .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sticky b{color:var(--crema);font-family:var(--d);font-size:1.05rem}
.sticky small{display:block;color:var(--mu2);font-size:12.5px}
.sticky .cta{padding:13px 22px;font-size:.98rem;box-shadow:none;white-space:nowrap}

/* ---- mockup portada 3D + tarjetas ---- */
.mock{position:relative;perspective:1200px}
.mock .cover{width:min(100%,440px);margin-inline:auto;border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);transform:rotateY(-14deg) rotateX(4deg);transition:transform .5s}
.mock:hover .cover{transform:rotateY(-6deg) rotateX(2deg)}
.mock .tarjeta{position:absolute;right:-6px;bottom:-22px;width:min(58%,250px);background:#fff;color:var(--tinta);border-radius:14px;padding:14px 16px;box-shadow:0 26px 50px rgba(0,0,0,.4);transform:rotate(4deg);font-size:13px}
.mock .tarjeta b{font-family:var(--d);font-size:15px;color:var(--noche);display:block;margin-bottom:4px}
.mock .tarjeta .h{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.mock .tarjeta ol{padding-left:16px;margin:6px 0 0;font-size:12px}
.mock .tarjeta ol li{margin-bottom:3px}

/* ---- voz del cliente ---- */
.voice{background:#fff;border-left:4px solid var(--coral);padding:18px 22px;border-radius:0 14px 14px 0;margin:22px 0;box-shadow:0 10px 30px rgba(27,42,44,.06)}
.voice p{font-family:var(--d);font-style:italic;font-size:1.15rem;color:var(--noche);margin:0 0 8px}
.voice cite{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.hero .voice{background:rgba(255,255,255,.08);border-color:var(--sol);box-shadow:none}
.hero .voice p{color:var(--crema)}.hero .voice cite{color:var(--mu2)}

/* ---- preguntas del sí ---- */
.qs{list-style:none;padding:0;margin:0}
.qs li{padding:14px 0 14px 44px;position:relative;border-bottom:1px solid var(--ln);font-size:1.05rem}
.qs li::before{content:"✓";position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;background:var(--sol);color:var(--noche);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}

/* ---- dispositivo: línea del día ---- */
.dia{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 8px}
.dia div{background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:18px 16px;position:relative}
.dia b{font-family:var(--d);font-size:1.7rem;display:block;color:var(--noche);line-height:1}
.dia span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);display:block;margin:6px 0 8px}
.dia p{font-size:14px;color:var(--mu);margin:0}
.dia div::after{content:"";position:absolute;left:16px;right:16px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--grad)}

/* ---- comparativa dices / oye ---- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.vs>div{border-radius:var(--r);padding:22px 24px}
.vs .them{background:var(--coral2)}
.vs .us{background:var(--verde2)}
.vs h3{margin-bottom:10px}
.vs ul{margin:0;padding-left:20px}
.vs li{margin-bottom:8px}

/* ---- glass / stats ---- */
.glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);backdrop-filter:blur(10px);padding:26px 28px;color:var(--crema)}
.glass h3{color:var(--sol)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 22px}
.stats div{text-align:center;padding:22px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r)}
.stats b{font-family:var(--d);font-size:clamp(2rem,4.5vw,3rem);display:block;line-height:1}
.stats small{color:var(--mu2);font-size:13.5px}

/* ---- pasos ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0}
.step{background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:20px 16px;counter-increment:s;position:relative}
.step::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--sol);color:var(--noche);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-size:1.05rem}
.step p{font-size:14px;color:var(--mu);margin:0}

/* ---- caja gran duda ---- */
.box{background:var(--noche);color:var(--crema);border-radius:var(--r);padding:30px 32px}
.box h2,.box h3{color:var(--crema)}
.box .grad{color:transparent}

/* ---- stack de oferta ---- */
.stack{list-style:none;padding:0;margin:20px 0}
.stack li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.stack .tag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);background:var(--verde2);padding:5px 9px;border-radius:5px;white-space:nowrap}
.stack b{font-family:var(--d);font-size:1.05rem;color:var(--noche);display:block}
.stack small{color:var(--mu);font-size:13.5px}
.stack .pr{font-family:var(--d);font-weight:700;color:var(--noche);white-space:nowrap}
.stack .pr s{color:var(--mu);font-weight:400;margin-right:6px}
.bonos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.bono{background:#fff;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.bono img{aspect-ratio:1;object-fit:cover}
.bono .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);display:block;padding:14px 16px 0}
.bono b{font-family:var(--d);font-size:1.1rem;color:var(--noche);display:block;padding:4px 16px 0}
.bono p{font-size:14px;color:var(--mu);padding:6px 16px 16px;margin:0}
.bumps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.bump{display:grid;grid-template-columns:120px 1fr;gap:16px;background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:16px;align-items:center}
.bump img{border-radius:10px}
.bump b{font-family:var(--d);color:var(--noche);font-size:1.05rem;display:block}
.bump b span{color:var(--coral);margin-left:6px}
.bump p{font-size:14px;color:var(--mu);margin:6px 0 0}

/* ---- pendientes (fundador / testimonios) ---- */
.pendiente{border:2px dashed var(--coral);background:var(--coral2);border-radius:var(--r);padding:24px 26px}
.pendiente .k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B8412F;display:block;margin-bottom:8px}
.pendiente p{margin:0 0 8px;font-size:15.5px}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---- FAQ ---- */
details{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:6px 20px;margin-bottom:10px}
summary{cursor:pointer;font-family:var(--d);font-weight:700;font-size:1.05rem;color:var(--noche);padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-size:1.5rem;color:var(--coral)}
details[open] summary::after{content:"–"}
details p{color:var(--mu);font-size:15.5px;padding-bottom:12px}

/* ---- seguridad / footer ---- */
.seguridad{background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:20px 24px;font-size:14.5px;color:var(--mu)}
.seguridad b{color:var(--noche)}
footer{background:var(--noche);color:var(--mu2);padding:40px 0 110px;font-size:14px}
footer a{color:var(--sol)}

/* ---- motion ---- */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none;transition:none}}

/* ---- responsive ---- */
@media(max-width:900px){.hero-split{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}.dia{grid-template-columns:repeat(2,1fr)}.bonos{grid-template-columns:1fr}.testis{grid-template-columns:1fr}}
@media(max-width:640px){body{font-size:16.5px}.vs,.bumps{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stats div:last-child{grid-column:span 2}.stack li{grid-template-columns:1fr;gap:6px}.bump{grid-template-columns:90px 1fr}.mock .cover{transform:none}.mock .tarjeta{position:static;transform:none;width:100%;margin-top:14px}.sticky b{font-size:.95rem}}