/* NiXA · nixafit.com — lenguaje visual "azul vintage" de las piezas aprobadas (post5 / infografía) */
@font-face{font-family:"Alfa Slab One";src:url(/assets/fonts/alfa-slab-one.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Righteous";src:url(/assets/fonts/righteous.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Poppins";font-weight:500;src:url(/assets/fonts/poppins-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Poppins";font-weight:600;src:url(/assets/fonts/poppins-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Poppins";font-weight:700;src:url(/assets/fonts/poppins-700.woff2) format("woff2");font-display:swap}

:root{
  --cream:#F3EBDD; --denim:#4A6A8C; --coral:#D9826B; --night:#26344C;
  --deep:#3B5775; --ray:#557596; --body:#E4DACA; --tail:#B9705C; --coral-ghost:#F0B3A0;
  --slab:"Alfa Slab One",Georgia,serif; --round:"Righteous","Trebuchet MS",sans-serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --frame:12px; --pad:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--denim);color:var(--cream);font:500 1.0625rem/1.6 var(--sans);overflow-x:hidden;position:relative;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--cream);color:var(--night);padding:.6rem 1rem;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}

/* ── background: denim + side halftone + paper grain (whole page); sunburst behind hero and closing ── */
body{background:linear-gradient(90deg,rgba(38,52,76,.38),transparent 16%,transparent 84%,rgba(38,52,76,.38)),var(--denim)}
.bg,.grain{position:absolute;inset:0;pointer-events:none}
.bg{z-index:-2;background:radial-gradient(circle,rgba(38,52,76,.55) 0 1.7px,transparent 2.3px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 20%,transparent 80%,#000);mask-image:linear-gradient(90deg,#000,transparent 20%,transparent 80%,#000)}
.grain{z-index:60;background:url(/assets/img/grano.png) 0 0/128px 128px;opacity:.5;mix-blend-mode:overlay}
.burst{position:relative;isolation:isolate}
.burst::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at var(--bx,50%) var(--by,72%),var(--ray) 0deg 6.43deg,transparent 6.43deg 12.857deg);
  -webkit-mask-image:radial-gradient(circle at var(--bx,50%) var(--by,72%),#000 0,rgba(0,0,0,.85) 30%,transparent 72%);
  mask-image:radial-gradient(circle at var(--bx,50%) var(--by,72%),#000 0,rgba(0,0,0,.85) 30%,transparent 72%)}
.burst::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(38,52,76,.42) 0 1.6px,transparent 2.2px) 0 0/14px 14px;
  -webkit-mask-image:radial-gradient(ellipse at var(--bx,50%) var(--by,72%),transparent 38%,#000 95%);mask-image:radial-gradient(ellipse at var(--bx,50%) var(--by,72%),transparent 38%,#000 95%)}
.closing.burst{--by:30%}

/* ── double cream frame with corner ornaments (as in the poster) ── */
.frame{position:relative;margin:var(--frame);border:3px solid var(--cream);border-radius:6px;min-height:calc(100vh - 2*var(--frame))}
.frame::before{content:"";position:absolute;inset:8px;border:1.5px solid var(--cream);border-radius:3px;pointer-events:none}
.corner{position:absolute;width:48px;height:48px;pointer-events:none}
.corner.tl{top:18px;left:18px}.corner.tr{top:18px;right:18px;transform:scaleX(-1)}
.corner.bl{bottom:18px;left:18px;transform:scaleY(-1)}.corner.br{bottom:18px;right:18px;transform:scale(-1,-1)}

.wrap{width:min(1120px,100%);margin:0 auto;padding:0 var(--pad)}

/* ── top bar ── */
.topbar{display:flex;justify-content:flex-end;align-items:center;padding:1.6rem var(--pad) 0;position:relative;z-index:2}
.lang{display:flex;gap:.25rem;font:400 .95rem var(--round);letter-spacing:.12em}
.lang a{display:inline-block;padding:.35rem .7rem;border-radius:999px;text-decoration:none;color:var(--cream);border:1.5px solid transparent}
.lang a[aria-current="true"]{background:var(--cream);color:var(--night)}
.lang a:not([aria-current="true"]):hover{border-color:var(--cream)}

/* ── hero ── */
.hero{padding:.5rem 0 2.5rem;text-align:center;margin-top:-4.2rem;padding-top:4.2rem}
.logo-row{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin:0 auto}
.logo-row::before,.logo-row::after{content:"";flex:1;height:9px;border-top:3px solid var(--cream);border-bottom:1.5px solid var(--cream);max-width:260px;margin-top:-1.4rem}
.logo-row h1,.logo-row .logo{margin:0;flex:0 1 auto}
.logo img{width:clamp(220px,62vw,470px)}
.logo-underline{display:block;width:clamp(140px,30vw,300px);height:5px;border-radius:5px;background:var(--coral);margin:.5rem auto 0}
.hook{font:400 clamp(2.05rem,8.6vw,4.1rem)/1.06 var(--slab);margin:1.6rem 0 0;color:var(--cream);
  text-shadow:5px 5px 0 var(--night),-2px -1.5px 0 rgba(217,130,107,.55);letter-spacing:.005em;text-wrap:balance}
.hook .c{color:var(--coral);text-shadow:5px 5px 0 var(--night),-2px -1.5px 0 rgba(240,179,160,.55)}
.ribbon-wrap{position:relative;display:inline-block;margin:2rem auto 0;z-index:0;max-width:calc(100% - 56px)}
.ribbon-wrap .tail{position:absolute;top:10px;height:100%;width:44px;background:var(--tail);z-index:-1}
.ribbon-wrap .tail.l{left:-34px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,36% 50%)}
.ribbon-wrap .tail.r{right:-34px;clip-path:polygon(0 0,100% 0,64% 50%,100% 100%,0 100%)}
.ribbon{position:relative;background:var(--cream);color:var(--night);font:600 clamp(1rem,4.3vw,1.55rem)/1.25 var(--sans);
  padding:.7em 1.3em;box-shadow:6px 6px 0 var(--night);margin:0}
.ribbon::after{content:"";position:absolute;inset:7px;border:1.5px dashed var(--denim);pointer-events:none}
.ribbon b,.brand{font:400 1em var(--slab);color:var(--coral);letter-spacing:.03em}
.ribbon b{font-size:.98em}
.lead{font-size:clamp(1.08rem,3.9vw,1.3rem);line-height:1.55;margin:1.6rem auto 0;max-width:36ch;color:var(--cream)}
.lead .brand{font-size:.98em}
.cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 1.5rem;border-radius:999px;
  font:700 1.04rem/1.2 var(--sans);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;text-align:center}
.btn svg{width:22px;height:22px;flex:none}
.btn-primary{background:var(--coral);color:var(--night);box-shadow:4px 5px 0 var(--night);border:2px solid var(--night)}
.btn-primary:hover{transform:translate(-1px,-2px);box-shadow:5px 7px 0 var(--night)}
.btn-primary:active{transform:translate(2px,3px);box-shadow:2px 2px 0 var(--night)}
.btn-ghost{color:var(--cream);border:2px solid var(--cream)}
.btn-ghost:hover{background:rgba(243,235,221,.12)}
.visual{position:relative;width:min(64vw,330px);margin:3.2rem auto 1rem}
.visual .phone{width:100%}
.visual .ticket{position:absolute;width:112%;left:-15%;bottom:4%}
.visual .stamp{position:absolute;width:44%;right:-20%;top:-4%}

/* ── sections ── */
section{padding:2.4rem 0}
.eyebrow{display:flex;align-items:center;gap:1rem;font:400 clamp(1.05rem,4.4vw,1.5rem)/1.2 var(--round);letter-spacing:.28em;color:var(--coral);
  text-transform:uppercase;margin:0 0 2.2rem;text-align:center;justify-content:center}
.eyebrow::before,.eyebrow::after{content:"";flex:1;height:8px;border-top:2.5px solid var(--cream);border-bottom:1.2px solid var(--cream);min-width:24px}
.eyebrow span{flex:0 1 auto}
.sub-eyebrow{font-size:clamp(.95rem,3.8vw,1.15rem);margin:2.6rem 0 1.4rem}
.badge{width:56px;height:56px;flex:none}
.shadow-text{text-shadow:2px 2px 0 var(--night)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.step{display:flex;gap:1.1rem;align-items:center;padding:1.1rem 1.2rem;background:rgba(38,52,76,.32);border:1.5px solid rgba(243,235,221,.55);border-radius:6px}
.step .ic{position:relative;flex:none}
.step .num{position:absolute;left:-8px;top:-8px;width:28px;height:28px;border-radius:50%;background:var(--coral);border:2.5px solid var(--cream);
  color:var(--cream);font:400 .95rem/23px var(--slab);text-align:center}
.step p{margin:0;font:600 clamp(1.05rem,3.9vw,1.2rem)/1.45 var(--sans);text-shadow:2px 2px 0 var(--night)}

.cats{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 1.2rem;max-width:1000px}
.cats li{display:flex;align-items:center;gap:.85rem;flex:1 1 100%;font:600 1.12rem/1.3 var(--sans);text-shadow:2px 2px 0 var(--night)}
.cats .badge{width:50px;height:50px}
.mods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.mods li{display:flex;align-items:center;gap:.55rem;background:var(--coral);color:var(--cream);border-radius:999px;padding:.6rem 1.2rem .6rem 1rem;
  font:600 1.05rem/1.2 var(--sans);box-shadow:4px 5px 0 var(--night);text-shadow:1px 1px 0 rgba(38,52,76,.45)}
.mods img{width:26px;height:26px}

.trust{list-style:none;margin:0 auto;padding:0;display:grid;gap:1.1rem;max-width:900px}
.trust li{display:flex;align-items:center;gap:1rem;font:600 clamp(1.05rem,3.9vw,1.2rem)/1.45 var(--sans);text-shadow:2px 2px 0 var(--night)}
.trust .k{color:var(--coral)}

.cards{display:grid;gap:1.6rem}
.card{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:var(--cream);color:var(--night);box-shadow:6px 6px 0 var(--night);padding:2rem 1.6rem 1.9rem;text-align:center}
.card::after{content:"";position:absolute;inset:8px;border:1.5px dashed var(--denim);pointer-events:none}
.card h3{font:400 clamp(1.35rem,5.4vw,1.75rem)/1.2 var(--slab);color:var(--coral);margin:0 0 .7rem}
.card p{margin:0 auto;font-size:1.1rem;max-width:30ch}
.card .note{font-size:1rem;color:var(--deep);margin-top:.9rem}
.card .btn{margin-top:1.4rem;position:relative;z-index:1;padding:.8rem 1.15rem;font-size:1rem}
.btn span{flex:0 1 auto}
.card .mail{margin-top:1rem;font-size:.98rem;color:var(--deep)}
.card .mail a{color:var(--night);font-weight:700;position:relative;z-index:1}

.closing{text-align:center;padding-top:2.5rem}
.closing .stamp{width:150px;margin:0 auto 1.2rem}
.closing p{margin:0;font-size:1.15rem}
.handle{display:inline-block;font:400 clamp(1.45rem,6.6vw,3rem)/1.15 var(--slab);color:var(--cream);text-decoration:none;
  text-shadow:4px 4px 0 var(--night),-2px -1.5px 0 rgba(217,130,107,.55);margin:.5rem 0 1.6rem;overflow-wrap:anywhere}
.handle:hover{color:#fff}

.panel{position:relative;background:rgba(38,52,76,.3);border:2.5px solid var(--cream);padding:2rem 1.2rem 2.4rem}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(243,235,221,.7);pointer-events:none}
.panel .eyebrow{margin-bottom:1.8rem}
/* ── footer ── */
footer{padding:2.5rem 0 4.2rem;text-align:center}
.rule{height:9px;border-top:2px solid var(--cream);border-bottom:1px solid var(--cream);margin:0 0 2.2rem}
.soon{font:400 1rem var(--round);letter-spacing:.28em;color:var(--coral);margin:0 0 1rem}
.stores{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-bottom:1.8rem}
.store{display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 1.1rem;border-radius:12px;border:1.5px dashed rgba(243,235,221,.6);
  background:rgba(38,52,76,.35);color:rgba(243,235,221,.82);text-align:left;cursor:default;min-width:190px}
.store svg{width:26px;height:26px;flex:none;opacity:.85}
.store small{display:block;font:500 .78rem/1.1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.store strong{display:block;font:700 1.12rem/1.2 var(--sans)}
.foot-handle{margin:0 0 .6rem;font-size:1.05rem}
.foot-handle a{font-weight:700;text-decoration:none}
.foot-handle a:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;align-items:center;font-size:.95rem}
.foot-links .dot{opacity:.6}
.foot-links a{text-decoration:none;font-weight:600}
.foot-links a:hover{text-decoration:underline}
.copy{margin:1rem 0 0;font-size:.92rem;color:var(--body)}

/* ── download page ── */
.dl{min-height:calc(100vh - 2*var(--frame) - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem var(--pad)}
.dl .logo img{width:clamp(220px,60vw,400px)}
.dl h1{font:400 clamp(1.7rem,6.5vw,2.8rem)/1.15 var(--slab);text-shadow:4px 4px 0 var(--night);margin:2rem 0 0;max-width:20ch}
.dl .stamp{width:130px;margin:2rem auto 0}
.dl p{max-width:34ch;margin:1.2rem auto 0;font-size:1.1rem}
.dl .status{font:400 1rem var(--round);letter-spacing:.14em;color:var(--coral);margin-top:1.6rem;min-height:1.4em}
.dl .cta a[hidden]{display:none}

/* ── larger screens ── */
@media (min-width:640px){
  .cats li{flex:0 1 calc(50% - .6rem)}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  :root{--frame:18px}
}
@media (min-width:960px){
  .hero{--bx:72%;--by:55%}
  .wrap{width:min(1200px,100%)}
  .hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:center;text-align:left;margin-top:1.5rem}
  .hook{font-size:clamp(2.6rem,4.3vw,3.7rem)}
  .ribbon{white-space:nowrap}
  .panel{padding:2.6rem 2.4rem 3rem}
  .hero-grid .ribbon-wrap{margin-left:34px}
  .hero-grid .lead{margin-left:0}
  .hero-grid .cta{justify-content:flex-start}
  .visual{width:min(100%,330px);margin:1rem auto 0}
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{flex-direction:column;text-align:center;padding:1.8rem 1.3rem 1.6rem;align-items:center}
  .step .badge{width:68px;height:68px}
  .cats li{flex:0 1 calc(25% - 1.2rem);flex-direction:column;text-align:center;gap:.7rem;font-size:1.08rem}
  .cats .badge{width:60px;height:60px}
  .trust{grid-template-columns:repeat(3,1fr);max-width:none}
  .trust li{flex-direction:column;text-align:center;gap:.8rem}
  .trust .badge{width:64px;height:64px}
  section{padding:4.2rem 0}
  .corner{width:62px;height:62px}
  .corner.tl{top:22px;left:22px}.corner.tr{top:22px;right:22px}.corner.bl{bottom:22px;left:22px}.corner.br{bottom:22px;right:22px}
}
@media (max-width:639px){.logo-row::before,.logo-row::after{display:none}}
@media (max-width:639px){
  .panel{padding:1.6rem .8rem 2rem}
  .mods{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .mods li{justify-content:center;padding:.55rem .6rem;font-size:.95rem;gap:.4rem}
  .mods img{width:22px;height:22px}
  .cats li{padding-left:.6rem}
}