/* =============================================================
   Sin Vueltas  - Premium landing (Light Editorial Cream / violet)
   Audiencia 55-70, Android gama baja. Legibilidad manda.
   ============================================================= */

/* 1. Tokens */
:root{
  --violet:#4A3D82; --violet-deep:#37306A; --violet-dark:#241F45; --violet-soft:#ECE9F7;
  --paper:#FBFAF6; --cream:#F3EFE6; --ink:#1B1B18; --ink2:#44464E;
  --line:#E2DCCE; --gold:#C99A3B; --gold-deep:#A87E24;
  --ok:#2E6B41; --ok-soft:#E6EFE9; --warn:#8A5A1B; --warn-soft:#F6ECD9;
  --disp:'Anton',-apple-system,'Segoe UI',sans-serif;
  --body:'Atkinson Hyperlegible',-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.25,0.46,0.45,0.94);
  --shadow-card:0 18px 44px -28px rgba(36,31,69,.45);
  --shadow-lift:0 34px 70px -34px rgba(36,31,69,.55);
}

/* 2. Reset & base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--body);background:var(--paper);color:var(--ink);
  font-size:19px;line-height:1.65;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
p{text-wrap:pretty}
::selection{background:var(--gold);color:var(--violet-dark)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* 3. Utilities */
.wrap{width:90%;max-width:1120px;margin-inline:auto}
.narrow{max-width:780px}
.tc{text-align:center}
.sec{padding:clamp(3.6rem,9vw,7rem) 0;position:relative}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.7rem 1.1rem;background:var(--violet);color:#fff;z-index:9999;border-radius:10px;font-weight:700}
.skip-link:focus{top:1rem}

/* 4. Typography */
h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:.006em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.7rem,8.4vw,5.1rem)}
h2{font-size:clamp(2.15rem,5.6vw,3.5rem)}
h3{font-family:var(--body);font-weight:700;font-size:1.28rem;line-height:1.25}
strong{font-weight:700}

.eyebrow{font-family:var(--body);font-weight:700;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.05rem;display:flex;align-items:center;gap:.65rem}
.eyebrow::before{content:"";width:30px;height:3px;background:var(--gold);border-radius:2px;flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:#E6C877}
.eyebrow.on-dark::before{background:var(--gold)}
.sec-intro{font-size:clamp(1.12rem,2.4vw,1.28rem);margin-top:1.15rem;max-width:58ch;color:var(--ink2)}

/* section backgrounds (alternancia editorial, sin lineas divisorias) */
.bg-cream{background:var(--cream)}
.bg-violet{background:linear-gradient(158deg,var(--violet-deep),var(--violet-dark));color:#fff}
.bg-violet h2,.bg-violet h1{color:#fff}
.on-violet{color:#EDEAF6}
.on-violet .sec-intro{color:#C9C0E6}

/* 5. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--body);font-weight:700;font-size:clamp(1.12rem,2.3vw,1.32rem);padding:1.1rem 2.1rem;border-radius:999px;line-height:1.15;text-align:center;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.btn-gold{background:var(--gold);color:var(--violet-dark);box-shadow:0 5px 0 var(--gold-deep),0 16px 30px -14px rgba(201,154,59,.6)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--gold-deep),0 22px 40px -14px rgba(201,154,59,.7)}
.btn-gold:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-deep)}
.btn-violet{background:var(--violet);color:#fff;box-shadow:0 5px 0 var(--violet-dark),0 16px 30px -14px rgba(74,61,130,.6)}
.btn-violet:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--violet-dark),0 22px 40px -14px rgba(74,61,130,.7)}
.btn-violet:active{transform:translateY(3px);box-shadow:0 2px 0 var(--violet-dark)}
.btn.big{width:100%;max-width:580px;margin-inline:auto}
.cta-row{margin-top:1.9rem}
.note{font-size:1rem;color:var(--ink2);margin-top:.9rem;text-align:center}
.on-violet .note{color:#B9AEDD}

/* 6. Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,250,246,.86);border-bottom:1px solid transparent;transition:background .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .nav{background:rgba(251,250,246,.72);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px)}
}
.nav.is-scrolled{background:rgba(251,250,246,.95);border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(36,31,69,.5)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand svg{width:42px;height:36px;flex:none}
.brand-txt b{font-family:var(--body);font-weight:700;font-size:1.24rem;letter-spacing:-.01em;display:inline}
.house{font-size:.9rem;color:var(--ink2);font-weight:400}
.nav-cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);color:var(--violet-dark);font-family:var(--body);font-weight:700;font-size:.96rem;padding:.62rem 1.1rem;border-radius:999px;white-space:nowrap;line-height:1.1;box-shadow:0 3px 0 var(--gold-deep);transition:transform .12s var(--ease-out)}
.nav-cta:hover{transform:translateY(-1px)}
.nav-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-deep)}
@media(max-width:520px){.house{display:none}}
@media(max-width:380px){.brand-txt b{font-size:1.05rem}}

/* 7. Hero */
.hero{background:radial-gradient(130% 130% at 82% 0%,#4B3F8A 0%,var(--violet-deep) 46%,var(--violet-dark) 100%);color:#fff;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;background:linear-gradient(180deg,transparent,rgba(251,250,246,.0));pointer-events:none}
.hero .in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.4rem,4.5vw,3.4rem);align-items:center;padding:clamp(2.6rem,6vw,4.8rem) 0 clamp(3rem,6vw,5rem)}
.hero h1{color:#fff;margin:.2rem 0}
.hero .lead{font-size:clamp(1.14rem,2.5vw,1.42rem);color:#DAD3F0;margin:1.35rem 0 0;max-width:36ch;line-height:1.5}
.hero .lead strong{color:#fff}
.chips{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-top:1.9rem}
.chip{display:inline-flex;align-items:center;gap:.6rem;color:#EDEAF6;font-weight:700;font-size:1rem}
.chip svg{flex:none;color:#E6C877}
.hero-art{position:relative;display:flex;flex-direction:column;gap:.85rem}
.hero-frame{border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);position:relative}
.hero-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 6px rgba(255,255,255,.06);border-radius:20px;pointer-events:none}
.hero-frame img{width:100%;aspect-ratio:10/7.4;object-fit:cover;transform:scale(1.02);will-change:transform}
.hero-cap{font-size:1rem;color:#C4B9E6;padding-left:.2rem}
@media(max-width:760px){
  .hero .in{grid-template-columns:1fr;gap:1.8rem}
  .hero .lead{max-width:none}
  .hero-art{max-width:30rem}
  .cta-row .btn{width:100%}
}

/* 8. Flow (dolor -> resultado) */
.flow{display:grid;gap:1.05rem;margin-top:2.4rem}
.flowrow{display:grid;grid-template-columns:1fr auto 1.3fr;gap:1.4rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.6rem 1.8rem;box-shadow:var(--shadow-card)}
.flowrow .dolor{font-weight:700;font-size:1.18rem;color:var(--warn);line-height:1.25;margin:0}
.flowrow .arr{color:var(--gold-deep);flex:none}
.flowrow .res{font-size:1.1rem;line-height:1.45;margin:0}
@media(max-width:640px){.flowrow{grid-template-columns:1fr;gap:.75rem}.flowrow .arr{transform:rotate(90deg);justify-self:start}}

/* 9. Comparacion */
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem;align-items:stretch}
.cmp .c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:1.9rem 1.4rem;text-align:center}
.cmp .c .lbl{font-weight:700;font-size:1rem;color:#C9C0E6}
.cmp .c .big{font-family:var(--disp);font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.02;margin-top:.6rem;color:#fff}
.cmp .c .big .to{font-family:var(--body);font-weight:400;font-size:1.1rem;color:#C9C0E6}
.cmp .win{background:var(--gold);border-color:var(--gold);box-shadow:0 24px 50px -24px rgba(201,154,59,.7)}
.cmp .win .lbl{color:#5a4410}
.cmp .win .big{color:var(--violet-dark)}
.cmp-note{font-size:1.16rem;color:#D9D2F0;max-width:54ch;margin:2rem auto 0}
@media(max-width:620px){.cmp{grid-template-columns:1fr}.cmp .win{order:-1}}

/* 10. Preview real */
.peek-head{display:grid;grid-template-columns:1.1fr .9fr;gap:2.2rem;align-items:end}
.peek-lead{font-size:1.14rem;color:var(--ink2)}
.peek{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.8rem}
.peekfig{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.peekfig:nth-child(odd){transform:rotate(-1.1deg)}
.peekfig:nth-child(even){transform:rotate(1.1deg)}
.peekfig:hover{transform:translateY(-8px) rotate(0deg);box-shadow:var(--shadow-lift)}
.peekfig img{width:100%;height:auto;border-bottom:1px solid var(--line)}
.peekfig figcaption{padding:.95rem 1rem;font-weight:700;font-size:1.02rem;color:var(--violet-deep)}
.peekfig figcaption span{display:block;font-weight:400;font-size:.94rem;color:var(--ink2);margin-top:.2rem;line-height:1.35}
@media(max-width:860px){.peek{grid-template-columns:repeat(2,1fr);gap:1.4rem}.peek-head{grid-template-columns:1fr;gap:.6rem}}

/* 11. Caminos */
.caminos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem;margin-top:2.6rem}
.camino{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.6rem;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s var(--ease-out),border-color .25s var(--ease-out)}
.camino:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);background:var(--violet-soft);border-color:#D3CBEC}
.camino .n{width:48px;height:48px;border-radius:14px;background:var(--violet-soft);color:var(--violet);font-family:var(--disp);font-size:1.55rem;display:grid;place-items:center;margin-bottom:.95rem}
.camino b{font-weight:700;font-size:1.14rem;display:block;margin-bottom:.25rem}
.camino p{margin:0;font-size:1.02rem;color:var(--ink2)}
@media(max-width:760px){.caminos{grid-template-columns:1fr}}

/* 12. Bloque imagen + texto (dos archivos / familiar) */
.pblock{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.pblock.reverse .pimg{order:2}
.pimg{margin:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lift)}
.pimg img{width:100%;aspect-ratio:10/7.4;object-fit:cover}
.inc-list{margin-top:1.5rem;display:grid;gap:.2rem}
.inc{display:flex;gap:1.1rem;align-items:flex-start;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.inc:last-child{border-bottom:0}
.inc .ic{flex:none;width:50px;height:50px;border-radius:14px;background:var(--gold);color:var(--violet-dark);display:grid;place-items:center}
.inc p{margin:.3rem 0 0;font-size:1.04rem;color:var(--ink2)}
@media(max-width:760px){.pblock{grid-template-columns:1fr}.pblock.reverse .pimg{order:0}.pimg{max-width:30rem}}

/* 13. Callout numero */
.callout{background:var(--violet-dark);color:#fff;border-radius:26px;padding:clamp(2.4rem,6vw,3.8rem);text-align:center;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.callout .num{font-family:var(--disp);font-size:clamp(3.6rem,13vw,6.6rem);line-height:.9;color:var(--gold)}
.callout p{font-size:clamp(1.16rem,2.6vw,1.5rem);color:#D9D2F0;max-width:32ch;margin:1.1rem auto 0}
.callout .src{font-size:.98rem;color:#9F94C8;margin-top:1.2rem;max-width:46ch;margin-inline:auto}

/* 14. Para quien */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:2.4rem}
.card{border-radius:22px;padding:2rem 2.1rem}
.card h3{margin-bottom:1.2rem;font-size:1.42rem}
.card .li{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.9rem;font-size:1.06rem}
.card .li:last-child{margin-bottom:0}
.card .li b{flex:none;font-size:1.3rem;line-height:1.1}
.card.yes{background:var(--ok-soft)}
.card.yes h3{color:var(--ok)}
.card.yes .li b{color:var(--ok)}
.card.no{background:var(--warn-soft)}
.card.no h3{color:var(--warn)}
.card.no .li b{color:var(--warn)}
@media(max-width:700px){.two{grid-template-columns:1fr}}

/* 15. Precio */
.price{background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(2.2rem,6vw,3.6rem);text-align:center;box-shadow:0 50px 100px -50px rgba(55,48,106,.6);position:relative;overflow:hidden}
.price::before{content:"";position:absolute;inset:0 0 auto 0;height:9px;background:linear-gradient(90deg,var(--gold),var(--violet))}
.price .amt{font-family:var(--disp);font-size:clamp(3.6rem,12vw,5.2rem);line-height:.95;color:var(--ink)}
.price .sub{font-weight:700;font-size:1.14rem;color:var(--ink2);margin-bottom:1.6rem}
.anchor{background:var(--cream);border-radius:16px;padding:1.4rem 1.6rem;margin:1.7rem auto;max-width:42rem;text-align:left;font-size:1.05rem}

/* 16. FAQ */
.faq{margin-top:1.6rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.45rem 0;font-weight:700;font-size:1.26rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-size:1.9rem;line-height:1;flex:none;transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding-bottom:1.45rem;font-size:1.06rem;color:var(--ink2)}

/* 17. Cierre */
.close .amt{font-family:var(--disp);font-size:clamp(3rem,9vw,4.4rem);line-height:1;margin:.4rem 0}
.close .amt.gold{color:var(--gold)}
.close-sub{color:#B9AEDD;margin:.3rem 0 1.9rem;font-size:1.05rem}

/* 18. Footer */
footer{background:var(--violet-dark);color:#C9C0E6;padding:3.4rem 0;font-size:1rem}
.foot-b{font-family:var(--body);font-weight:700;font-size:1.35rem;color:#fff}
.foot-house{font-weight:400;font-size:1rem;color:#9F94C8}
.fine{font-size:.92rem;line-height:1.65;margin-top:1.15rem;color:#9F94C8;max-width:82ch}
.fine strong{color:#C9C0E6}

/* 19. Effects: reveal on scroll (only hidden when JS is active -> no-JS shows all) */
html.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft)}
html.js [data-reveal].is-revealed{opacity:1;transform:none}

/* Hero subtle ambient zoom (loop)  - gated as intrusive under reduced-motion */
@keyframes heroBreathe{0%,100%{transform:scale(1.02)}50%{transform:scale(1.075)}}
.hero-frame img{animation:heroBreathe 26s ease-in-out infinite}

/* 20. Reduced-motion: only gate genuinely intrusive motion, keep micro-interactions alive */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-frame img{animation:none}
  html.js [data-reveal]{transition-duration:.35s}
}