/* =============================================================
   MIKE OREA — 2026
   ============================================================= */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* Azul medianoche + oro champán. Paleta de banca privada.
   Nada de verde: ni Matrix ni calca de Fondarium. */
:root{
  --bg:#070A12; --bg2:#0B1020; --bg3:#131A2C;
  --line:rgba(201,169,97,.16); --line2:rgba(201,169,97,.34);
  --em:#C9A961; --em-l:#E5CE99;
  --ice:#8FB3E0;
  --text:#F2EFE8; --text2:#9DA4B4; --text3:#666D80;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(24px,6vw,80px);
  --maxw:1180px;
}

html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(201,169,97,.28);color:#fff}

body::after{content:'';position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- tipografía ---------- */
.eyebrow{font-size:.58rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--em)}
.h-xl{font-family:var(--serif);font-weight:300;line-height:1.02;
  font-size:clamp(2.6rem,7.5vw,5.4rem);letter-spacing:.01em}
.h-lg{font-family:var(--serif);font-weight:300;line-height:1.08;
  font-size:clamp(2.1rem,5.6vw,3.6rem);letter-spacing:.02em}
.h-md{font-family:var(--serif);font-weight:300;line-height:1.15;
  font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:.03em}
.body-txt{color:var(--text2);line-height:1.95;font-size:1rem}
.body-txt strong{color:var(--text);font-weight:400}
.lead{font-family:var(--serif);font-size:clamp(1.2rem,2.7vw,1.6rem);
  line-height:1.6;color:var(--text);font-weight:300}

section{padding:clamp(80px,11vh,140px) var(--pad);position:relative}
.inner{max-width:var(--maxw);margin:0 auto}
.narrow{max-width:820px;margin:0 auto}

/* ============ LOADER ============ */
#loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.load-mark{font-family:var(--serif);font-size:clamp(1.4rem,4vw,2rem);
  letter-spacing:.5em;text-indent:.5em;opacity:0;animation:loadIn 1.1s var(--out) .1s forwards}
.load-bar{width:min(180px,42vw);height:1px;background:rgba(255,255,255,.1);margin:26px auto 0;overflow:hidden}
.load-bar i{display:block;height:100%;background:var(--em);transform:scaleX(0);transform-origin:left;
  animation:loadBar 1.1s var(--ease) forwards}
@keyframes loadIn{to{opacity:1}}
@keyframes loadBar{to{transform:scaleX(1)}}

/* ============ NAV ============ */
#nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;
  justify-content:space-between;padding:22px var(--pad);border-bottom:1px solid transparent;
  transition:padding .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease)}
#nav.stuck{padding:14px var(--pad);background:rgba(7,10,18,.72);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:var(--line)}
#nav .progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(to right,var(--em),var(--em-l));
  transform:scaleX(var(--p,0));transform-origin:left}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.brand-mark{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);
  display:grid;place-items:center;flex-shrink:0;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.brand:hover .brand-mark{border-color:var(--em);transform:rotate(-8deg)}
.brand-mark span{font-family:var(--serif);font-size:1.2rem;color:var(--em);line-height:1}
.brand-txt{display:flex;flex-direction:column;line-height:1.3}
.brand-name{font-family:var(--serif);font-size:.92rem;letter-spacing:.26em}
.brand-sub{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text3)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);
  text-decoration:none;position:relative;padding:4px 0;transition:color .3s var(--ease)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--em);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.pill{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1px solid var(--line2);
  border-radius:999px;color:var(--em);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.pill:hover{background:rgba(201,169,97,.08);border-color:var(--em)}
.pill svg{width:14px;height:14px;flex-shrink:0}

#burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;position:relative;flex-shrink:0}
#burger i{position:absolute;left:9px;width:22px;height:1px;background:var(--text);transition:transform .4s var(--ease)}
#burger i:nth-child(1){top:16px} #burger i:nth-child(2){top:23px}
#burger.open i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
#burger.open i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

#menu{position:fixed;inset:0;z-index:790;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  clip-path:circle(0% at calc(100% - 44px) 36px);transition:clip-path .85s var(--out)}
#menu.open{clip-path:circle(150% at calc(100% - 44px) 36px)}
#menu a{font-family:var(--serif);font-size:clamp(1.6rem,7vw,2.3rem);letter-spacing:.05em;
  text-decoration:none;padding:10px 0;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
#menu.open a{opacity:1;transform:none}
#menu.open a:nth-child(1){transition-delay:.18s} #menu.open a:nth-child(2){transition-delay:.23s}
#menu.open a:nth-child(3){transition-delay:.28s} #menu.open a:nth-child(4){transition-delay:.33s}
#menu.open a:nth-child(5){transition-delay:.38s} #menu.open a:nth-child(6){transition-delay:.43s}

/* ============ HERO ============ */
#hero-wrap{height:220vh;position:relative}
.hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:12vh var(--pad) 100px}

.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.62;filter:blur(30px) saturate(1.05) brightness(.9);transform:scale(1.14)}
.hero-sticky::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 68%,transparent 4%,rgba(7,10,18,.55) 58%,var(--bg) 96%),
    linear-gradient(to bottom,rgba(7,10,18,.9),rgba(7,10,18,.42) 32%,rgba(7,10,18,.28) 60%,var(--bg))}

/* el canvas se mezcla en "screen": lo oscuro desaparece, el verde y
   las partículas suman luz encima del video */
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  mix-blend-mode:screen;pointer-events:none}

.hero-body{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;
  transform:translateY(calc(var(--hp,0) * -70px));opacity:calc(1 - var(--hp,0) * 1.15)}

.hero-quote{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,4.6vw,3rem);line-height:1.25;letter-spacing:.01em;
  max-width:16ch;margin-bottom:26px}
.hero-quote em{font-style:italic;color:var(--em)}
.hero-attr{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--text3);margin-bottom:40px}

/* el nombre queda para lectores de pantalla y para el muestreo de partículas */
.hero-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.has-gl) .hero-name{position:static;width:auto;height:auto;overflow:visible;clip:auto;
  font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,10vw,5rem);
  letter-spacing:.1em;text-indent:.1em;line-height:1;margin-bottom:22px}
.hero-name .ch{display:inline-block}

.hero-sub{font-size:clamp(.92rem,2.1vw,1.08rem);color:var(--text2);max-width:540px;line-height:1.85}
.hero-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:999px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-solid{background:linear-gradient(120deg,var(--em),var(--em-l));color:#0A0D16}
.btn-solid:hover{box-shadow:0 16px 38px rgba(201,169,97,.26)}
.btn-ghost{border-color:var(--line2);color:var(--em)}
.btn-ghost:hover{background:rgba(201,169,97,.07);border-color:var(--em)}

.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text3);transition:opacity .3s}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(to bottom,var(--em),transparent);
  animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ MARQUESINA ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);overflow:hidden;padding:24px 0;display:flex;user-select:none}
.marquee-run{display:flex;flex-shrink:0;gap:48px;padding-right:48px;align-items:center;
  animation:run 36s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(.95rem,2.1vw,1.4rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text3);white-space:nowrap}
.marquee b{color:var(--em);font-weight:300;font-size:.65em;vertical-align:middle}
@keyframes run{to{transform:translateX(-100%)}}

/* ============ REVELADOS ============ */
[data-rise]{opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--out),transform 1s var(--out)}
[data-rise].in{opacity:1;transform:none}
[data-rise-d="1"]{transition-delay:.1s}
[data-rise-d="2"]{transition-delay:.2s}
[data-rise-d="3"]{transition-delay:.3s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .95s var(--out)}
.split.in .w>i{transform:none}

/* ============ HISTORIA ============ */
#historia{background:var(--bg2)}
.hist-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,86px);align-items:start}
.hist-sticky{position:sticky;top:120px}
.portrait{aspect-ratio:4/5;border-radius:20px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,var(--bg3),var(--bg));position:relative}
.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.03)}
.portrait::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,10,18,.5),transparent 55%)}
.meta{margin-top:22px;display:flex;flex-direction:column}
.meta div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.meta dt{color:var(--text3);text-transform:uppercase;font-size:.55rem;letter-spacing:.18em}
.meta dd{color:var(--text);font-size:.78rem;text-align:right}
.hist-copy p+p{margin-top:24px}
.pull{margin:44px 0;padding:28px 0 28px 30px;border-left:2px solid var(--em);
  font-family:var(--serif);font-size:clamp(1.25rem,2.9vw,1.75rem);line-height:1.5;color:var(--text)}
.pull cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text3)}

/* ============ CIFRAS ============ */
#cifras{border-top:1px solid var(--line);padding-top:0;padding-bottom:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.stat{background:var(--bg);padding:46px 26px;text-align:center}
.stat-n{font-family:var(--serif);font-weight:300;color:var(--em);
  font-size:clamp(2.4rem,6vw,3.8rem);line-height:1}
.stat-n sup{font-size:.4em;vertical-align:super}
.stat-l{margin-top:14px;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text3);line-height:1.9}

/* ============ TRAYECTORIA ============ */
#trayectoria{background:radial-gradient(ellipse at 50% 0%,rgba(201,169,97,.07),transparent 60%),var(--bg);
  border-top:1px solid var(--line)}
.tl{margin-top:60px;position:relative;padding-left:clamp(28px,5vw,64px)}
.tl::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--line2) 8%,var(--line2) 88%,transparent)}
.tl-item{position:relative;padding-bottom:clamp(40px,5vw,62px)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:calc(-1 * clamp(28px,5vw,64px) - 4px);top:10px;
  width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--em)}
.tl-item.now::before{background:var(--em);box-shadow:0 0 0 5px rgba(201,169,97,.14)}
.tl-year{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);color:var(--em);
  line-height:1;margin-bottom:12px}
.tl-item h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.4vw,1.5rem);
  margin-bottom:12px;letter-spacing:.02em}
.tl-item p{color:var(--text2);line-height:1.9;font-size:.94rem;max-width:62ch}
.tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tl-tags span{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:var(--text3)}

/* ============ PRENSA ============ */
#prensa{background:var(--bg2);border-top:1px solid var(--line)}
.press{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);margin-top:52px}
.press a{background:var(--bg2);padding:34px 28px;text-decoration:none;display:flex;
  flex-direction:column;gap:14px;transition:background .45s var(--ease)}
.press a:hover{background:var(--bg3)}
.press .src{font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--em)}
.press .ttl{font-family:var(--serif);font-size:1.08rem;line-height:1.45;color:var(--text)}
.press .dt{font-size:.6rem;letter-spacing:.14em;color:var(--text3);margin-top:auto;
  display:flex;align-items:center;gap:8px}
.press .dt svg{width:12px;height:12px;opacity:.7;transition:transform .35s var(--ease)}
.press a:hover .dt svg{transform:translate(3px,-3px)}

/* ============ MÉTODO — scroll horizontal ============ */
#metodo{padding:0;background:var(--bg2)}
.h-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:100px 0 60px}
.h-head{padding:0 var(--pad);margin-bottom:44px;flex-shrink:0}
.h-track{display:flex;gap:26px;padding:0 var(--pad);will-change:transform}
.h-card{flex:0 0 clamp(280px,32vw,400px);border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,3vw,42px);background:rgba(19,23,32,.6);display:flex;flex-direction:column}
.h-card .n{font-family:var(--serif);font-size:2.2rem;color:var(--em);line-height:1;margin-bottom:20px}
.h-card h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:.03em;margin-bottom:14px}
.h-card p{color:var(--text2);font-size:.9rem;line-height:1.85}

/* ============ CIERRES ============ */
.closes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:52px}
.close{background:var(--bg);padding:36px 26px}
.close-bar{height:52px;display:flex;align-items:flex-end;margin-bottom:22px}
.close-bar i{display:block;width:24px;border-radius:2px}
.close h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin-bottom:10px}
.close p{color:var(--text2);font-size:.82rem;line-height:1.8}
.close.bad{background:rgba(255,90,90,.03)}
.close.bad h4{color:#ff8a8a}

/* ============ PRUEBA (video) ============ */
#oficina{background:var(--bg2)}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
.proof figure{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:9/13;background:var(--bg3)}
.proof video,.proof img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.proof figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 18px;
  background:linear-gradient(to top,rgba(7,10,18,.92),transparent);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}

/* ============ HOY ============ */
#hoy{background:var(--bg)}
.offer{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px}
.offer-card{border:1px solid var(--line);border-radius:22px;padding:clamp(30px,4vw,48px);
  background:rgba(19,23,32,.45);display:flex;flex-direction:column}
.offer-card.live{border-color:var(--line2);
  background:radial-gradient(ellipse at 50% 0%,rgba(201,169,97,.09),transparent 65%),rgba(19,23,32,.6)}
.tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;margin-bottom:24px}
.tag.now{color:var(--em);border:1px solid var(--line2);background:rgba(201,169,97,.07)}
.tag.soon{color:var(--text3);border:1px solid rgba(255,255,255,.09)}
.tag.now::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--em);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.offer-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:16px}
.offer-card p{color:var(--text2);line-height:1.9;font-size:.94rem;margin-bottom:26px;flex-grow:1}
.offer-card .btn{align-self:flex-start}

/* ============ FAQ ============ */
.faq{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1rem,2.2vw,1.26rem);font-weight:400;
  transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--em)}
.faq summary::after,.faq summary::before{content:'';position:absolute;right:6px;top:50%;
  width:11px;height:1px;background:var(--em);transition:transform .4s var(--ease)}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(0)}
.faq-a{color:var(--text2);font-size:.94rem;line-height:1.95;padding:0 clamp(20px,8vw,90px) 28px 0;
  animation:faqIn .5s var(--out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============ CONTACTO ============ */
#contacto{background:radial-gradient(ellipse at 50% 0%,rgba(201,169,97,.09),transparent 58%),
  linear-gradient(to bottom,var(--bg),var(--bg2));border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);
  align-items:start;margin-top:46px}
.contact-copy p{color:var(--text2);line-height:1.95;margin-bottom:28px}
.ig-handle{color:var(--em)}
form{display:flex;flex-direction:column;gap:16px}
.field{position:relative}
.field label{position:absolute;left:0;top:15px;pointer-events:none;font-size:.85rem;color:var(--text3);
  transition:transform .35s var(--ease),font-size .35s var(--ease),color .35s var(--ease)}
.field input,.field textarea,.field select{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:15px 0 12px;color:var(--text);
  font-family:var(--sans);font-size:.92rem;font-weight:300;transition:border-color .35s var(--ease)}
.field select{color:var(--text2);cursor:pointer}
.field select option{background:var(--bg2);color:var(--text)}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--em)}
.field input:focus~label,.field textarea:focus~label,
.field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label{
  transform:translateY(-19px);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--em)}
.field-sel label{position:static;display:block;margin-bottom:2px;font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--em)}
.form-note{font-size:.68rem;color:var(--text3);line-height:1.8}
.form-msg{font-size:.82rem;line-height:1.8;padding:16px 18px;border-radius:12px;border:1px solid var(--line);
  background:rgba(201,169,97,.05);color:var(--text2);display:none}
.form-msg.show{display:block}
.form-msg a{color:var(--em)}
form button{align-self:flex-start;margin-top:8px}

/* ============ FOOTER ============ */
footer{padding:60px var(--pad) 42px;border-top:1px solid var(--line);background:var(--bg)}
.foot-top{max-width:var(--maxw);margin:0 auto 42px;display:flex;flex-wrap:wrap;gap:30px;
  justify-content:space-between;align-items:center}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px}
.foot-nav a{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);
  text-decoration:none;transition:color .3s var(--ease)}
.foot-nav a:hover{color:var(--em)}
.foot-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.risk{color:var(--text3);font-size:.68rem;line-height:1.95;max-width:780px;margin:0 auto 24px}
.risk strong{color:var(--text2);font-weight:400}
.foot-copy{color:var(--text3);font-size:.6rem;letter-spacing:.16em}

/* =============================================================
   PROFUNDIDAD 3D
   --t va de -1 (entrando por abajo) a 1 (saliendo por arriba).
   Lo calcula el JS en cada scroll; el resto lo hace el compositor.
   ============================================================= */
[data-3d]{
  transform:
    perspective(1400px)
    rotateX(calc(var(--t,0) * -7deg))
    translateY(calc(var(--t,0) * 26px))
    translateZ(calc(abs(var(--t,0)) * -70px))
    scale(calc(1 - abs(var(--t,0)) * .045));
  transform-origin:50% 50%;
  will-change:transform;
}
@supports not (width: abs(1px)){
  /* abs() es reciente: sin ella nos quedamos con la rotación */
  [data-3d]{transform:perspective(1400px) rotateX(calc(var(--t,0) * -7deg)) translateY(calc(var(--t,0) * 26px))}
}
.tl,.press,.closes,.offer,.proof{perspective:1400px}

/* brillo que recorre la tarjeta según su posición en pantalla */
[data-sheen]{position:relative;overflow:hidden}
[data-sheen]::after{
  content:'';position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(201,169,97,.14) 50%,transparent 58%);
  transform:translateX(calc(var(--t,0) * 62%));
  transition:opacity .5s var(--ease);
  opacity:calc(1 - abs(var(--t,0)));
}

/* =============================================================
   REVELADO CON MÁSCARA
   ============================================================= */
[data-mask]{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--out)}
[data-mask].in{clip-path:inset(0 0 0% 0)}
[data-mask] img,[data-mask] video{
  transform:scale(1.18);transition:transform 1.6s var(--out)}
[data-mask].in img,[data-mask].in video{transform:scale(1)}

/* =============================================================
   BARRIDO DE LUZ ENTRE SECCIONES
   ============================================================= */
.sweep{position:relative}
.sweep::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--em),transparent);
  transform:scaleX(var(--sw,0));transform-origin:center;
  opacity:calc(var(--sw,0) * .9);
}

/* =============================================================
   TÍTULOS QUE SE ARMAN LETRA POR LETRA
   ============================================================= */
.decode{display:inline-block}
.decode .dc{display:inline-block;opacity:0;transform:translateY(.35em) rotateX(-70deg);
  transform-origin:50% 100%;transition:opacity .6s var(--out),transform .8s var(--out)}
.decode.in .dc{opacity:1;transform:none}

/* ============ CURSOR ============ */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:950;pointer-events:none;border-radius:50%}
.cur-dot{width:6px;height:6px;background:var(--em)}
.cur-ring{width:34px;height:34px;border:1px solid var(--line2);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.cur-ring.hot{width:52px;height:52px;border-color:var(--em);background:rgba(201,169,97,.06)}
.cur-ring.big{width:76px;height:76px;border-color:var(--em);background:rgba(201,169,97,.1)}
html.has-cursor,html.has-cursor *{cursor:none !important}

/* ============ CORTINA ============ */
.curtain{position:fixed;inset:0;z-index:960;background:var(--bg);pointer-events:none;
  transform:translateY(100%);display:grid;place-items:center}
.curtain span{font-family:var(--serif);letter-spacing:.5em;text-indent:.5em;
  font-size:clamp(1rem,3vw,1.5rem);color:var(--em);opacity:0;transition:opacity .3s .25s}
.curtain.on{transform:translateY(0);transition:transform .6s var(--out)}
.curtain.on span{opacity:1}
.curtain.out{transform:translateY(-100%);transition:transform .6s var(--out)}
.curtain.out span{opacity:0;transition:opacity .2s}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .closes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .hist-grid{grid-template-columns:1fr}
  .hist-sticky{position:static}
  .portrait{max-width:360px}
  .contact-grid,.offer,.proof{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-links,#nav .pill{display:none}
  #burger{display:block}
  #hero-wrap{height:auto}
  .hero-sticky{position:relative;height:100svh}
  .hero-body{transform:none;opacity:1}
  #metodo{padding:clamp(80px,11vh,140px) 0}
  .h-sticky{position:static;height:auto;padding:0}
  .h-track{flex-direction:column;transform:none !important;padding:0 var(--pad)}
  .h-card{flex:1 1 auto}
  .marquee-run{animation-duration:24s}
}
@media (max-width:560px){
  .stats,.closes{grid-template-columns:1fr}
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  [data-rise]{opacity:1;transform:none}
  .split .w>i{transform:none}
  .marquee-run{animation:none}
  .hero-video{display:none}
  .hero-body{transform:none;opacity:1}
  #hero-wrap{height:auto}
  .hero-sticky{position:relative}
}

/* =============================================================
   PESTAÑA DESTACADA HACIA LA LANDING
   Tiene que verse distinta al resto del menú o se pierde.
   ============================================================= */
.nav-links a.nav-destacado{
  color:var(--em);border:1px solid var(--line2);border-radius:999px;
  padding:9px 16px;background:rgba(201,169,97,.07);letter-spacing:.12em;
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.nav-links a.nav-destacado::after{display:none}
.nav-links a.nav-destacado:hover{background:rgba(201,169,97,.16);border-color:var(--em);color:var(--em-l)}
#menu a.menu-destacado{color:var(--em)}

/* el logo de la landing es un enlace de regreso: que se note al pasar encima */
.mark{text-decoration:none;transition:opacity .3s var(--ease)}
.mark:hover{opacity:.75}