/* Layout: bandas negras y de papel que se alternan; el disco blanco con el "+" del isotipo es el único adorno y aparece como marco del retrato, viñeta y botón. */
:root{
  color-scheme:dark;
  --ink:#0e0e0d;
  --ink-2:#181817;
  --line:#2c2c2a;
  --white:#f7f7f5;
  --paper:#efeeea;
  --paper-line:#d3d2cc;
  --mute:#a3a29c;
  --mute-ink:#56554f;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Raleway","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(18px,5vw,56px);
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.6;font-weight:450;font-feature-settings:"lnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(64px,10vw,128px)}
.band.paper{background:var(--paper);color:var(--ink)}

/* Tipografía */
h1,h2,h3{font-family:var(--display);font-weight:900;font-stretch:96%;letter-spacing:-.045em;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:clamp(4.6rem,11.5vw,8.6rem);letter-spacing:-.06em;line-height:.86}
h2{font-size:clamp(2.1rem,6vw,4.2rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.03em;line-height:1.08}
p{margin:0}
em{font-style:italic;font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.plus{flex:none;width:1.25em;height:1.25em;border-radius:50%;background:currentColor;position:relative;display:inline-block}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}
.plus::before{width:50%;height:16%}
.plus::after{width:16%;height:50%}
.paper .plus::before,.paper .plus::after,.btn.dark .plus::before,.btn.dark .plus::after{background:var(--paper)}
.lede{font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.5;max-width:34em}
.mute{color:var(--mute)}
.paper .mute{color:var(--mute-ink)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em;text-decoration:none;padding:16px 26px 16px 18px;border-radius:999px;background:var(--white);color:var(--ink);border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn .plus{width:1.7em;height:1.7em;background:var(--ink);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.btn .plus::before,.btn .plus::after{background:var(--white)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .plus{transform:rotate(180deg)}
.btn.dark{background:var(--ink);color:var(--white)}
.btn.dark .plus{background:var(--white)}
.btn.dark .plus::before,.btn.dark .plus::after{background:var(--ink)}
.btn.small{padding:10px 18px 10px 12px;font-size:.9rem}
.link{font-weight:600;text-underline-offset:4px}

/* Cabecera */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.top img{height:42px;width:auto}
footer img{height:30px;width:auto}

/* Hero */
.hero{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,104px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);align-items:flex-start;min-width:0}
.hero h1 span{display:block}
.hero h1 .thin{font-family:var(--body);font-weight:400;font-style:italic;letter-spacing:-.03em;font-size:.42em;line-height:1.1;margin-bottom:.12em}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.price-note{font-size:.95rem;line-height:1.35}
.price-note b{font-family:var(--display);font-weight:800;font-size:1.15rem}
.disc{position:relative;width:min(100%,430px);aspect-ratio:1;margin-inline:auto}
.disc .photo{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--white)}
.disc .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.disc .badge{position:absolute;right:2%;bottom:6%;width:23%;aspect-ratio:1;border-radius:50%;background:var(--ink);border:5px solid var(--ink);display:grid;place-items:center;animation:spin 18s linear infinite}
.disc .badge .plus{width:100%;height:100%;background:var(--white)}
.chip{position:absolute;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:.78rem;line-height:1.25;color:var(--mute);white-space:nowrap;animation:float 6s ease-in-out infinite}
.chip b{display:block;font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.04em;color:var(--white);line-height:1}
.chip.a{left:-6%;top:8%}
.chip.b{left:-10%;bottom:14%;animation-delay:-3s}
.sign{margin-top:18px;text-align:center;font-size:.9rem;color:var(--mute)}
.sign b{color:var(--white);font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}

/* Cinta de marcas */
.tape{border-block:1px solid var(--line);padding-block:18px;overflow:hidden}
.tape-label{text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-bottom:12px;padding-inline:var(--gutter)}
.tape-track{display:flex;gap:44px;width:max-content;animation:tape 36s linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
.tape-track span{font-family:var(--display);font-weight:900;font-stretch:90%;font-size:clamp(1.2rem,2.6vw,1.9rem);letter-spacing:-.03em;display:inline-flex;align-items:center;gap:44px;white-space:nowrap}
.tape-track span::after{content:"+";font-weight:400;color:var(--mute)}
@keyframes tape{to{transform:translateX(-50%)}}

/* Secciones de dos columnas */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,88px);align-items:start}
.stack{display:flex;flex-direction:column;gap:22px;min-width:0}
.stack.lg{gap:clamp(28px,4vw,44px)}
.steps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--paper-line)}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding-block:18px;border-bottom:1px solid var(--paper-line);align-items:baseline}
.steps .plus{align-self:center}
.steps b{font-family:var(--display);font-weight:800;letter-spacing:-.02em}

/* Caso */
.case-head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:22px;overflow:hidden}
.num{padding:clamp(22px,3vw,36px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.num:last-child{border-right:0}
.num:first-child{background:var(--white);color:var(--ink)}
.num .n{font-family:var(--display);font-weight:900;font-stretch:88%;font-size:clamp(2.9rem,6.6vw,5.2rem);letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.mini{border:1px solid var(--line);border-radius:16px;padding:16px 20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.mini b{font-family:var(--display);font-weight:900;font-stretch:90%;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.04em;line-height:1;white-space:nowrap}
.mini span{font-size:.9rem;color:var(--mute);line-height:1.3}
.badge-trial{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--mute)}
.badge-trial i{width:7px;height:7px;border-radius:50%;background:var(--white);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
/* Caso de cliente */
.client{background:var(--ink-2);border-block:1px solid var(--line)}
.client-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,6vw,80px);align-items:center}
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.quad>div{background:var(--ink);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:8px;min-width:0}
.quad b{font-family:var(--display);font-weight:900;font-stretch:88%;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.05em;line-height:.9;white-space:nowrap}
.quad span{font-size:.92rem;color:var(--mute);line-height:1.35}
.num p{font-size:.95rem;line-height:1.4;color:var(--mute)}
.num:first-child p{color:var(--mute-ink)}
.fine{margin-top:18px;font-size:.85rem;color:var(--mute);max-width:60em}

/* Temario */
.mods{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;border-top:2px solid var(--ink)}
.mod{display:grid;grid-template-columns:clamp(54px,9vw,120px) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(14px,3vw,40px);padding-block:clamp(20px,3vw,30px);border-bottom:1px solid var(--paper-line);align-items:baseline;transition:padding .35s cubic-bezier(.2,.8,.2,1),background .35s}
.mod:hover{padding-inline:14px;background:var(--white)}
.mod .k{font-family:var(--display);font-weight:900;font-stretch:80%;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.05em;line-height:.8;color:var(--paper-line);transition:color .35s}
.mod:hover .k{color:var(--ink)}
.mod p{color:var(--mute-ink);font-size:.98rem}
.mod.bonus{background:var(--ink);color:var(--white);border-radius:18px;border:0;padding-inline:clamp(16px,3vw,28px);margin-top:18px}
.mod.bonus .k{color:var(--white)}
.mod.bonus p{color:var(--mute)}
.mod.bonus .plus::before,.mod.bonus .plus::after{background:var(--ink)}

/* Para quién */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:clamp(28px,4vw,48px)}
.who>div{background:var(--ink);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px}
.who p{color:var(--mute);font-size:.97rem}

/* Sobre mí */
.photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.shot{background:var(--white);padding:8px 8px 34px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1);position:relative}
.shot:nth-child(1){transform:rotate(-2.5deg)}
.shot:nth-child(2){transform:rotate(2deg) translateY(26px)}
.shot:hover{transform:rotate(0) scale(1.03);z-index:2}
.shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.shot span{position:absolute;left:10px;bottom:9px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-ink)}
.cv{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper-line)}
.cv li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:18px;padding-block:16px;border-bottom:1px solid var(--paper-line);font-size:.97rem}
.cv b{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.02rem;line-height:1.2}
.cv span{color:var(--mute-ink)}
.cv strong{color:var(--ink);font-weight:700}

/* Precio */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,6vw,80px);align-items:center}
.ticket{background:var(--white);color:var(--ink);border-radius:26px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:20px;position:relative}
.ticket .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:5px 12px}
.ticket .amount{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ticket .now{font-family:var(--display);font-weight:900;font-stretch:90%;font-size:clamp(4.4rem,13vw,7rem);letter-spacing:-.07em;line-height:.8}
.ticket .then{font-size:1rem;color:var(--mute-ink)}
.ticket .then s{font-family:var(--display);font-weight:800;font-size:1.3rem}
.incl{list-style:none;margin:0;padding:18px 0 0;border-top:1px dashed var(--paper-line);display:grid;gap:10px;font-size:.97rem}
.incl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.incl .plus{margin-top:.2em;width:1.05em;height:1.05em}
.incl .plus::before,.incl .plus::after{background:var(--white)}
.ticket .btn{justify-content:center}
.ticket small{text-align:center;color:var(--mute-ink);font-size:.82rem}

/* FAQ */
.faq{max-width:820px;margin-top:clamp(24px,4vw,40px);border-top:1px solid var(--paper-line)}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:20px;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary .plus{transform:rotate(135deg)}
.faq details p{padding-bottom:22px;color:var(--mute-ink);max-width:62ch}

/* Cierre y pie */
.close{text-align:center}
.close .stack{align-items:center}
.close h2{font-size:clamp(2.6rem,9vw,6.4rem);letter-spacing:-.06em;line-height:.88}
footer{border-top:1px solid var(--line);padding-block:28px calc(28px + 76px)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--mute)}
footer img{height:30px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* Barra de compra en móvil */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--white);color:var(--ink);transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.buybar.on{transform:none}
.buybar div{font-size:.8rem;line-height:1.2}
.buybar b{font-family:var(--display);font-weight:900;font-size:1.35rem;letter-spacing:-.04em;display:block}

/* Aparición al hacer scroll */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:860px){
  .hero-grid,.split,.offer,.client-grid{grid-template-columns:minmax(0,1fr)}
  .minis{grid-template-columns:1fr}
  .disc{width:min(74%,300px)}
  .chip.a{left:-14%}
  .chip.b{left:-14%;bottom:4%}
  .nums{grid-template-columns:1fr}
  .num{border-right:0;border-bottom:1px solid var(--line)}
  .num:last-child{border-bottom:0}
  .mod{grid-template-columns:54px minmax(0,1fr)}
  .mod p{grid-column:2}
  .who{grid-template-columns:1fr}
  .cv li{grid-template-columns:1fr;gap:4px}
  .top .btn{display:none}
  .buybar{display:flex}
  footer{padding-bottom:calc(28px + 84px)}
}
@media (min-width:861px){footer{padding-bottom:28px}.photos{position:sticky;top:120px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.narrow{max-width:760px}
.shot{margin:0}
.price-note,.buybar div{text-transform:none}
.buybar div{max-width:11em}
/* Portada provisional */
.soon{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:48px var(--gutter)}
.soon img{width:min(78vw,420px);height:auto;margin-bottom:10px}
.soon h1{font-size:clamp(3rem,10vw,6.4rem)}
.soon .lede{max-width:30em}