/* ==========================================================================
   BenjaFocus - redesign stylesheet (Spanish home page)
   Standalone: does not depend on site.css. Self-hosted fonts, no CDN.
   ========================================================================== */

/* ---------- FONTS (self-hosted) ---------- */
@font-face{font-family:'Hanken';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-400.woff2) format('woff2');}
@font-face{font-family:'Hanken';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-600.woff2) format('woff2');}
@font-face{font-family:'Hanken';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hanken-700.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/fraunces-var-normal.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/fraunces-var-italic.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- TOKENS ---------- */
:root{
  --esmeralda-900:#081711;
  --esmeralda-700:#0C3A2E;
  --esmeralda-500:#146A4C;
  --oro-600:#B08D3C;
  --oro-400:#D9B45B;
  --crema:#F6F1E7;
  --crema-card:#FFFDF8;
  --tinta:#10201A;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.22,0.8,0.2,1);
  --nav-h:76px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--esmeralda-900);color:var(--crema);
  font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--oro-400);text-decoration:none}
::selection{background:rgba(217,180,91,.35)}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* accessible helpers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--oro-400);outline-offset:3px;border-radius:4px}
.on-cream :focus-visible,.on-cream :focus-visible{outline-color:var(--oro-600)}
.skip{position:absolute;left:14px;top:-60px;z-index:200;background:var(--oro-600);color:var(--esmeralda-900);
  font-weight:700;font-size:14px;padding:12px 20px;border-radius:0 0 12px 12px;transition:top .2s}
.skip:focus{top:0}

.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.28em;color:var(--oro-400);margin:0 0 22px}
.kicker.dark{color:var(--oro-600)}

/* icons */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.08em}

@keyframes rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto;z-index:90;background:rgba(8,23,17,.65);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(246,241,231,.08)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;color:var(--crema);flex:none}
/* the monogram is a finished mark: no container, no border. It needs room for the
   focus rings to read, so it runs taller than the wordmark's cap height. */
.brand-mark{display:flex;align-items:center;flex:none}
.brand-mark img{width:auto;height:34px;display:block}
.brand b{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
.navlinks{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font-size:14px;font-weight:600;white-space:nowrap}
.navlinks .lnk{color:rgba(246,241,231,.8);transition:color .2s}
.navlinks .lnk:hover{color:var(--oro-400)}
.btn-gold{background:var(--oro-600);color:var(--esmeralda-900)!important;padding:12px 24px;border-radius:999px;
  font-weight:700;transition:background .25s ease,transform .25s ease;white-space:nowrap;display:inline-block}
.btn-gold:hover{background:var(--oro-400)}
.lbl-short{display:none}

/* language switcher */
.langsw{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.langsw span{color:var(--oro-400);font-weight:600}
.langsw a{color:rgba(246,241,231,.55);font-weight:600;transition:color .2s}
.langsw a:hover{color:var(--oro-400)}
.langsw .bar{width:1px;height:11px;background:rgba(246,241,231,.25)}

/* hamburger */
.burger{display:none;width:44px;height:44px;border:1px solid rgba(246,241,231,.2);border-radius:12px;
  background:transparent;cursor:pointer;padding:0;place-items:center;flex:none}
.burger span{display:block;width:19px;height:1.6px;background:var(--crema);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

@media(max-width:980px){
  .burger{display:grid}
  /* solid, not translucent: the hero headline sits right behind this panel and
     any alpha at all makes the menu labels hard to read */
  .navlinks{position:absolute;top:var(--nav-h);left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:10px clamp(20px,4vw,40px) 24px;
    background:var(--esmeralda-900);
    border-bottom:1px solid rgba(246,241,231,.1);white-space:normal}
  .navlinks.open{display:flex}
  .navlinks .lnk{padding:16px 2px;font-size:16px;border-bottom:1px solid rgba(246,241,231,.08)}
  .navlinks .btn-gold{margin-top:18px;text-align:center;padding:15px 24px}
  .navlinks .langsw{margin-top:18px;justify-content:center;font-size:12px}
}
@media(max-width:560px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .navlinks .lbl-full{display:inline}
  .navlinks .lbl-short{display:none}
  .brand b{font-size:18px}
  .brand-mark img{height:29px}
  .brand{gap:9px}
}

/* ============ HERO ============ */
/* minmax(0,1fr) + min-width:0 on the item: without both, the grid track grows to
   the item's min-content and overflow:hidden clips the hero copy on small screens */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;overflow:hidden;
  background:radial-gradient(620px 620px at 74% 44%,rgba(217,180,91,.09),transparent 62%),
             radial-gradient(1100px 700px at 72% 40%,rgba(20,106,76,.38),transparent 65%),
             radial-gradient(700px 500px at 20% 85%,rgba(176,141,60,.08),transparent 60%),
             var(--esmeralda-900)}
/* the canvas bleeds 8% past the right edge by design, so the hero has to clip it */
#gl{position:absolute;top:0;right:-8%;width:62%;height:100%;pointer-events:none;z-index:0;opacity:0}
#gl.on{opacity:1;transition:opacity 1.6s ease}
.hero-in{position:relative;z-index:1;width:100%;min-width:0;padding-top:150px;padding-bottom:60px}
h1{margin:0 0 38px;font-family:var(--serif);font-weight:500;font-size:clamp(52px,9.6vw,152px);
  line-height:.98;letter-spacing:-.03em}
h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
h1 .line>span{display:block}
h1 .line.gold>span{font-style:italic;color:var(--oro-400)}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.hero-row p{margin:0;max-width:440px;font-size:17.5px;line-height:1.7;color:rgba(246,241,231,.72);text-wrap:pretty}
.hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta-main{background:var(--oro-600);color:var(--esmeralda-900);padding:18px 34px;border-radius:999px;
  font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:10px;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.cta-main .ico{width:18px;height:18px;stroke-width:1.9}
.cta-main:hover{background:var(--oro-400);transform:translateY(-2px);box-shadow:0 14px 34px rgba(217,180,91,.25)}
.cta-ghost{border:1px solid rgba(246,241,231,.3);color:var(--crema);padding:17px 30px;border-radius:999px;
  font-weight:600;font-size:16px;transition:border-color .25s ease,color .25s ease;display:inline-block}
.cta-ghost:hover{border-color:var(--oro-400);color:var(--oro-400)}
.hero-stats{margin-top:72px;border-top:1px solid rgba(246,241,231,.14);padding-top:30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:28px;max-width:760px}
.stat b{font-family:var(--serif);font-size:clamp(32px,3.4vw,40px);font-weight:600;color:var(--crema);display:block}
.stat b.gold{color:var(--oro-400);letter-spacing:1px}
/* direct child only: a descendant selector here also hits the counter <span> inside <b> */
.stat>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:rgba(246,241,231,.5);margin-top:6px;line-height:1.5}
.scroll-hint{position:absolute;bottom:28px;right:clamp(20px,4vw,40px);font-family:var(--mono);
  font-size:11px;letter-spacing:.3em;color:rgba(246,241,231,.4)}
@media(max-width:820px){
  /* keeps hero copy legible over the 3D object on narrow screens */
  .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,23,17,.55),rgba(8,23,17,.82))}
  .hero-in{padding-top:128px}
  .hero-stats{margin-top:52px}
  .scroll-hint{display:none}
}

/* ============ MARQUEE ============ */
.mq-strip{background:var(--oro-600);overflow:hidden;padding:15px 0;border-top:1px solid rgba(8,23,17,.2)}
.mq-track{display:flex;gap:56px;width:max-content;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.22em;color:var(--esmeralda-900);white-space:nowrap}

/* ============ REVEALS ============ */
.rev.in{opacity:1;transform:none}

/* ============ SECTIONS ON CREAM ============ */
.on-cream{background:var(--crema);color:var(--tinta)}
h2{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.025em;color:var(--esmeralda-700)}
h2 em{font-style:italic;color:var(--oro-600)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:70px;flex-wrap:wrap}
/* scoped to .lede so the mono tags in this row (.tag-demo, .t-note) keep their own size */
.sec-head>p.lede{margin:0;max-width:340px;font-size:15.5px;line-height:1.7;color:rgba(16,32,26,.65)}

/* The method's thesis. It carries the whole argument, so it is set as a display
   statement rather than supporting copy, sized to sit under the h2 without
   competing with it. */
.statement{margin:0 0 clamp(46px,5.6vw,72px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(12,58,46,.22);
  font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.3vw,44px);
  line-height:1.14;letter-spacing:-.025em;color:var(--esmeralda-700);
  max-width:19ch;text-wrap:balance}
.statement em{font-style:italic;color:var(--oro-600)}
.statement .statement-tail{display:block;margin-top:.9em;font-family:var(--sans);
  font-style:normal;font-weight:700;font-size:14.5px;letter-spacing:.02em;
  line-height:1.5;color:rgba(16,32,26,.62)}
/* On wide screens it moves under the empty right half of the section head and tilts
   a degree and a half, so the eye travels diagonally from the h2 into the method rows.
   Narrow screens keep it upright and full width: there is no room to spare there. */
@media(min-width:900px){
  .statement{max-width:26ch;margin-left:auto;margin-right:clamp(0px,2.4vw,34px);
    transform:rotate(-1.4deg);transform-origin:100% 50%}
}
.sec-head>p{margin:0}

/* ============ METODO ============ */
#metodo{padding:clamp(84px,10vw,130px) 0}
#metodo h2{font-size:clamp(40px,5.4vw,76px);line-height:1.02;max-width:820px;text-wrap:balance}
.mrow{border-top:1px solid rgba(12,58,46,.2);padding:34px 0;display:grid;
  grid-template-columns:clamp(52px,9vw,130px) 1fr clamp(26px,5vw,60px);gap:clamp(12px,2vw,24px);align-items:start}
.mrow:last-of-type{border-bottom:1px solid rgba(12,58,46,.2)}
.mrow .num{font-family:var(--mono);font-size:13px;color:var(--oro-600);padding-top:16px}
.mrow-main{min-width:0}
.mrow h3{margin:0;transition:transform .4s var(--ease)}
.mrow-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--serif);font-weight:500;font-size:clamp(25px,3.4vw,46px);color:var(--esmeralda-700);
  letter-spacing:-.02em;line-height:1.12}
.mrow-btn em{font-style:italic;font-size:.5em;color:var(--oro-600);vertical-align:middle;white-space:nowrap}
.mrow .desc{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s var(--ease),opacity .5s}
.mrow .desc p{margin:16px 0 0;max-width:560px;font-size:16px;line-height:1.7;color:rgba(16,32,26,.7)}
.mrow .arrow{font-size:26px;color:var(--oro-600);padding-top:12px;text-align:right;line-height:1;
  transition:transform .4s var(--ease),opacity .3s;opacity:.45}
.mrow .arrow .ico{width:.92em;height:.92em}
.mrow.act h3{transform:translateX(14px)}
.mrow.act .desc{max-height:380px;opacity:1}
.mrow.act .arrow{opacity:1;transform:translate(3px,-3px)}
@media(max-width:640px){
  .mrow{grid-template-columns:1fr auto;row-gap:0}
  .mrow .num{padding-top:0;grid-column:1;grid-row:1;font-size:12px}
  .mrow .arrow{grid-column:2;grid-row:1;padding-top:0;font-size:22px}
  .mrow .mrow-main{grid-column:1 / -1;grid-row:2;margin-top:10px}
  .mrow.act h3{transform:translateX(6px)}
}

/* ============ 60 SEGUNDOS ============ */
#sesenta{background:linear-gradient(180deg,var(--esmeralda-700),var(--esmeralda-900));padding:clamp(84px,10vw,130px) 0}
.ses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:clamp(40px,6vw,80px);align-items:center}
#sesenta h2{color:var(--crema);font-size:clamp(36px,4.6vw,64px);line-height:1.04;margin-bottom:26px;text-wrap:balance}
#sesenta h2 em{color:var(--oro-400)}
#sesenta p{margin:0 0 16px;font-size:17px;line-height:1.75;color:rgba(246,241,231,.7);text-wrap:pretty}
.cron-wrap{perspective:1200px}
.cron{background:var(--esmeralda-900);border:1px solid rgba(217,180,91,.35);border-radius:24px;
  padding:clamp(24px,4.5vw,40px);box-shadow:0 50px 100px rgba(0,0,0,.5),0 0 80px rgba(217,180,91,.07) inset;
  transform:rotateY(0) rotateX(0);transition:transform .6s var(--ease)}
.cron-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cron-label{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:rgba(246,241,231,.5)}
.cron-dot{width:9px;height:9px;border-radius:50%;background:var(--oro-400);flex:none}
.cron-num{font-family:var(--serif);font-weight:600;font-size:clamp(64px,15vw,104px);color:var(--oro-400);
  line-height:1.15;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.cron-bar{height:5px;background:rgba(246,241,231,.12);border-radius:999px;margin:8px 0 32px;overflow:hidden}
.cron-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-600),var(--oro-400));
  border-radius:999px;width:0}
/* six steps now, so the rows sit tighter to keep the card in proportion */
.evts{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
.evt{display:flex;align-items:center;gap:14px;opacity:.38;transition:opacity .3s}
.evt i{width:11px;height:11px;border-radius:50%;flex:none;background:transparent;
  border:1.5px solid rgba(246,241,231,.4);transition:background .3s,border-color .3s}
.evt b{flex:1;font-size:15.5px;font-weight:600;color:var(--crema)}
.evt span{font-family:var(--mono);font-size:13px;color:var(--oro-400)}
.evt.on{opacity:1}
.evt.on i{background:var(--oro-400);border-color:var(--oro-400)}
.cron-reset{margin-top:28px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  color:rgba(246,241,231,.45);background:none;border:0;padding:6px 0;cursor:pointer;font-weight:400}
.cron-reset:hover{color:var(--oro-400)}
.cron-reset[hidden]{display:none}
/* Says out loud what the clock does not cover, so the minute reads as a real claim
   about being first rather than an implausible full sale in sixty seconds. */
.cron-after{margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(246,241,231,.1);
  font-size:14px;line-height:1.6;color:rgba(246,241,231,.62);max-width:44ch}
.cron-static{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(246,241,231,.45)}

/* ============ RESULTADOS ============ */
#resultados{padding:clamp(84px,10vw,130px) 0}
#resultados h2{font-size:clamp(36px,4.8vw,68px);line-height:1.04}
.tag-demo{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:rgba(16,32,26,.75);
  border:1px dashed rgba(16,32,26,.45);border-radius:999px;padding:8px 17px;white-space:nowrap;
  background:rgba(176,141,60,.07)}
.case{background:var(--crema-card);border:1px solid rgba(12,58,46,.14);border-radius:26px;
  padding:clamp(24px,4.5vw,48px) clamp(20px,4.5vw,52px);box-shadow:0 30px 80px rgba(12,58,46,.1)}
.case-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px;flex-wrap:wrap;gap:12px}
.case-top b{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--esmeralda-700)}
.case-top span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(16,32,26,.55)}
.frow{display:grid;grid-template-columns:clamp(92px,17vw,210px) 1fr clamp(52px,9vw,110px);
  gap:clamp(10px,2vw,20px);align-items:center;margin-bottom:15px}
.frow .flabel{font-size:14.5px;font-weight:600;color:rgba(16,32,26,.7);text-align:right;line-height:1.25}
.frow .bar{height:34px;border-radius:8px;width:0;transition:width .2s}
.frow .fval{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--esmeralda-700);
  font-variant-numeric:tabular-nums}
.frow.hl .flabel,.frow.hl .fval{color:var(--oro-600)}
.case-metrics{margin-top:38px;padding-top:30px;border-top:1px solid rgba(12,58,46,.12);
  display:flex;gap:clamp(26px,5vw,56px);flex-wrap:wrap}
.case-metrics b{font-family:var(--serif);font-size:clamp(28px,3.2vw,34px);font-weight:600;color:var(--oro-600);
  display:block;font-variant-numeric:tabular-nums}
/* direct child only, so the .mcount <span> inside <b> keeps the serif figure style */
.case-metrics>div>span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:rgba(16,32,26,.55);margin-top:4px}
.case-note{margin:22px 0 0;font-size:13.5px;line-height:1.6;color:rgba(16,32,26,.62);max-width:70ch}
@media(max-width:560px){
  .tag-demo{white-space:normal;border-radius:14px;line-height:1.5;text-align:center}
  .frow{grid-template-columns:1fr auto;row-gap:6px}
  .frow .flabel{text-align:left;grid-column:1;grid-row:1}
  .frow .fval{grid-column:2;grid-row:1;text-align:right}
  .frow .bar{grid-column:1 / -1;grid-row:2;height:24px}
}

/* ============ TESTIMONIOS ============ */
#testimonios{padding:0 0 clamp(84px,10vw,130px)}
#testimonios h2{font-size:clamp(36px,4.8vw,68px);line-height:1.04}
.t-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(16,32,26,.55);
  max-width:320px;text-align:right;line-height:1.6}
.t-rail{overflow:hidden}
.t-track{display:flex;gap:24px;width:max-content;padding:4px 0;margin:0;list-style:none}
.tcard{width:min(430px,84vw);background:var(--crema-card);border:1px solid rgba(12,58,46,.14);
  border-radius:20px;padding:32px 34px;display:flex;flex-direction:column;gap:16px;margin:0}
.tcard .stars{color:var(--oro-600);letter-spacing:3px;font-size:14px}
.tcard blockquote{font-family:var(--serif);font-size:18.5px;line-height:1.55;margin:0;color:var(--tinta)}
.tcard blockquote::before{content:"\201C"}
.tcard blockquote::after{content:"\201D"}
.tcard .who{margin-top:auto;font-size:14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tcard .who strong{font-weight:700}
.tcard .who .dot{width:3px;height:3px;border-radius:50%;background:rgba(16,32,26,.35);flex:none}
.tcard .who span{color:rgba(16,32,26,.55)}
.tcard.dark{background:var(--esmeralda-700);border-color:transparent;color:var(--crema)}
.tcard.dark blockquote{color:var(--crema)}
.tcard.dark .stars{color:var(--oro-400)}
.tcard.dark .who span{color:rgba(246,241,231,.6)}
.tcard.dark .who .dot{background:rgba(246,241,231,.4)}
@media(max-width:760px){.t-note{text-align:left;max-width:none}}

/* ============ FUNDADOR ============ */
#fundador{background:var(--esmeralda-900)}
.f-grid{padding:clamp(84px,10vw,130px) 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(56px,6.5vw,90px);align-items:center}
/* the source photo is 928x1152. Capping the box at 470px keeps roughly two source
   pixels per CSS pixel so it stays sharp on retina, and matching its aspect ratio
   means object-fit crops nothing. */
.f-photo{position:relative;max-width:470px;margin-inline:auto;width:100%}
.f-photo .ph{position:relative;border-radius:4px;overflow:hidden}
.f-photo img{width:100%;height:auto;aspect-ratio:29/36;object-fit:cover;object-position:50% 8%;
  filter:saturate(.85) contrast(1.04)}
.f-photo .ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(8,23,17,.85))}
.f-cap{position:absolute;left:26px;bottom:24px;z-index:2}
.f-cap b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--crema)}
.f-cap span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--oro-400);margin-top:4px}
/* An even outset on all four sides, like a gallery matte. The prototype offset it
   diagonally, which just reads as a misaligned frame. */
.f-frame{position:absolute;inset:-14px;border:1px solid rgba(217,180,91,.45);
  border-radius:6px;pointer-events:none}
#fundador blockquote{margin:0 0 30px;font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,3.6vw,50px);line-height:1.16;letter-spacing:-.015em;color:var(--crema);text-wrap:balance}
#fundador blockquote em{font-style:italic;color:var(--oro-400)}
#fundador .bio{margin:0;font-size:16.5px;line-height:1.8;color:rgba(246,241,231,.68);max-width:540px;text-wrap:pretty}
/* no fixed height here: it would override the aspect-ratio above and crop the portrait again */
@media(max-width:520px){.f-frame{inset:-10px}.f-cap{left:18px}}

/* ============ FAQ ============ */
#faq{padding:clamp(84px,10vw,130px) 0}
#faq .wrap{max-width:880px}
#faq .kicker{text-align:center}
#faq h2{font-size:clamp(32px,4vw,54px);text-align:center;margin-bottom:56px}
.faq-item{border-top:1px solid rgba(12,58,46,.2)}
.faq-item:last-child{border-bottom:1px solid rgba(12,58,46,.2)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;
  background:none;border:0;padding:26px 4px;cursor:pointer;text-align:left;
  font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.2vw,21px);color:var(--esmeralda-700);line-height:1.3}
.faq-q i{font-style:normal;font-size:24px;color:var(--oro-600);flex:none;line-height:1}
.faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s var(--ease),opacity .45s}
.faq-a p{margin:0 4px 26px;font-size:15.5px;line-height:1.75;color:rgba(16,32,26,.7)}
.faq-item.open .faq-a{max-height:420px;opacity:1}

/* ============ AGENDA ============ */
#agenda{background:radial-gradient(900px 600px at 30% 20%,rgba(20,106,76,.3),transparent 60%),var(--esmeralda-900);
  padding:clamp(84px,10vw,130px) 0}
.a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(40px,6vw,90px);align-items:center}
#agenda h2{color:var(--crema);font-size:clamp(38px,5vw,72px);line-height:1.02;margin-bottom:30px;text-wrap:balance}
#agenda h2 em{color:var(--oro-400)}
.checks{display:flex;flex-direction:column;gap:15px;font-size:16.5px;color:rgba(246,241,231,.75);
  margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:14px;align-items:flex-start;line-height:1.5}
.checks .ico{color:var(--oro-400);width:20px;height:20px;stroke-width:2.1;margin-top:2px}
.a-note{margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(246,241,231,.45)}
.form-card{background:var(--crema);border-radius:26px;padding:clamp(24px,4vw,40px) clamp(20px,4vw,42px);
  box-shadow:0 60px 120px rgba(0,0,0,.5);color:var(--tinta)}
.form-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px}
.form-top b{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--esmeralda-700)}
.form-top span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--oro-600)}
.fields{display:flex;flex-direction:column;gap:12px}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.f-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:rgba(12,58,46,.85);text-transform:uppercase}
.fields input{padding:14px 16px;border-radius:12px;border:1px solid rgba(12,58,46,.25);
  background:var(--crema-card);font-family:var(--sans);font-size:15px;color:var(--tinta);outline:none;
  min-width:0;width:100%;transition:border-color .2s,box-shadow .2s}
.fields input:focus{border-color:var(--oro-600);box-shadow:0 0 0 3px rgba(176,141,60,.16)}
.fields input:focus-visible{outline:none}
fieldset.budget{border:0;padding:0;margin:6px 0 0;min-width:0}
fieldset.budget legend{padding:0;margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* must out-specify `.fields input` above, or the radios inherit width:100% and overflow the page */
.fields input.chip-in{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  opacity:0;pointer-events:none;clip-path:inset(50%)}
.chip{border-radius:999px;padding:9px 16px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  cursor:pointer;border:1px solid rgba(12,58,46,.3);background:transparent;color:var(--esmeralda-700);
  transition:background .2s,color .2s,border-color .2s;display:inline-block;letter-spacing:0}
.chip:hover{border-color:var(--oro-600)}
.chip-in:checked+.chip{background:var(--esmeralda-700);color:var(--crema);border-color:var(--esmeralda-700)}
.chip-in:focus-visible+.chip{outline:2px solid var(--oro-600);outline-offset:2px}
.submit{margin-top:12px;background:var(--oro-600);color:var(--esmeralda-900);border:none;border-radius:999px;
  padding:17px;font-family:var(--sans);font-weight:700;font-size:16px;cursor:pointer;transition:background .25s ease}
.submit:hover{background:var(--oro-400)}
.form-foot{margin:14px 0 0;font-size:13px;color:rgba(16,32,26,.62);text-align:center;line-height:1.5}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-ok{display:none;text-align:center;padding:24px 0}
.form-ok .tick{width:58px;height:58px;border-radius:50%;background:rgba(176,141,60,.16);display:grid;
  place-items:center;margin:0 auto 18px;color:var(--oro-600)}
.form-ok .tick .ico{width:26px;height:26px;stroke-width:2.4}
.form-ok h3{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--esmeralda-700);margin:0 0 10px}
.form-ok p{font-size:15.5px;color:rgba(16,32,26,.7);margin:0 0 24px;line-height:1.6}
.cal-btn{display:inline-block;background:var(--esmeralda-700);color:var(--crema)!important;border-radius:999px;
  padding:16px 30px;font-weight:700;font-size:15.5px;transition:background .25s}
.cal-btn:hover{background:var(--esmeralda-500)}
.form-card.done .form-fields{display:none}
.form-card.done .form-ok{display:block}

/* ============ FOOTER ============ */
.site-footer{background:var(--esmeralda-900);border-top:1px solid rgba(246,241,231,.1);overflow:hidden}
.foot-top{padding-top:56px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-top small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(246,241,231,.45)}
.foot-links{display:flex;gap:clamp(14px,2.2vw,26px);font-size:14px;font-weight:600;flex-wrap:wrap;align-items:center}
.foot-links a,.foot-links button{color:rgba(246,241,231,.7);transition:color .2s;background:none;border:0;
  padding:0;font:inherit;cursor:pointer}
.foot-links a:hover,.foot-links button:hover{color:var(--oro-400)}
.foot-word{text-align:center;font-family:var(--serif);font-weight:600;font-size:clamp(46px,12.5vw,190px);
  line-height:1.06;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(217,180,91,.3);
  margin:18px 0 0;padding:0 10px 40px;user-select:none}

/* ============ EXIT POPUP ============ */
.pop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,12,8,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pop.on{display:flex}
.popcard{position:relative;max-width:460px;width:100%;border:1px solid rgba(217,180,91,.35);border-radius:24px;
  padding:38px 34px;background:linear-gradient(165deg,#0d2b21,#081711);box-shadow:0 60px 120px rgba(0,0,0,.6);
  max-height:92vh;overflow-y:auto}
.popcard .kicker{margin-bottom:14px}
.popcard h3{font-family:var(--serif);font-weight:600;font-size:clamp(25px,5vw,30px);line-height:1.12;
  margin:0 0 10px;color:var(--crema)}
.popcard h3 em{font-style:italic;color:var(--oro-400)}
.popcard p{color:rgba(246,241,231,.72);font-size:15px;line-height:1.65;margin:0 0 22px}
.popcard .field{margin-bottom:12px}
.popcard label{color:rgba(246,241,231,.6)}
.popcard input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(246,241,231,.18);
  background:rgba(4,14,9,.6);color:var(--crema);font-family:var(--sans);font-size:15px;outline:none;
  transition:border-color .2s,box-shadow .2s}
.popcard input:focus{border-color:var(--oro-400);box-shadow:0 0 0 3px rgba(217,180,91,.15)}
.popcard input:focus-visible{outline:none}
.popcard .submit{width:100%;margin-top:8px}
.popclose{position:absolute;top:12px;right:14px;background:none;border:0;color:rgba(246,241,231,.6);
  font-size:26px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:10px}
.popclose:hover{color:var(--oro-400)}
.pop-ok{text-align:center;padding:6px 0}
.pop-ok p{color:var(--oro-400);margin-bottom:18px}

/* ============ COOKIE BANNER ============ */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;gap:16px;align-items:center;
  justify-content:center;flex-wrap:wrap;padding:16px clamp(16px,4vw,40px);background:rgba(8,23,17,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid rgba(217,180,91,.28)}
.ckbar.on{display:flex}
.ckbar p{color:rgba(246,241,231,.75);font-size:13.5px;margin:0;max-width:62ch;line-height:1.55}
.ckbar a{color:var(--oro-400);text-decoration:underline}
.ckbtns{display:flex;gap:10px;flex-wrap:wrap}
.ckbar button{font-family:var(--sans);font-size:13px;font-weight:700;border-radius:999px;padding:11px 22px;cursor:pointer}
.ck-accept{background:var(--oro-600);color:var(--esmeralda-900);border:1px solid var(--oro-600)}
.ck-accept:hover{background:var(--oro-400);border-color:var(--oro-400)}
.ck-reject{background:transparent;color:var(--crema);border:1px solid rgba(246,241,231,.3)}
.ck-reject:hover{border-color:var(--oro-400);color:var(--oro-400)}

/* ==========================================================================
   MOTION: every animation lives here, so `prefers-reduced-motion: reduce`
   simply gets none of it. Content stays fully visible and usable without JS.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .js .kicker-hero{animation:fade .9s .15s both}
  .js h1 .line>span{animation:rise 1s .25s var(--ease) both}
  .js h1 .line.gold>span{animation-delay:.42s}
  .js .hero-row{animation:fade 1s .75s both}
  .js .hero-stats{animation:fade 1s .95s both}
  .js .scroll-hint{animation:pulse 2.6s infinite}
  .js .cron-dot{animation:pulse 1.6s infinite}
  .mq-track{animation:mq 26s linear infinite}
  .t-track{animation:mq 124s linear infinite}
  .t-rail:hover .t-track,.t-rail:focus-within .t-track{animation-play-state:paused}
  .js .rev{opacity:0;transform:translateY(56px)}
  /* must out-specify .js .rev above, or revealed sections stay invisible */
  .js .rev.in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s var(--ease)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* marquees become static, wrapped, fully readable lists */
  .mq-track{width:auto;flex-wrap:wrap;justify-content:center;gap:14px 34px;white-space:normal}
  .mq-dup{display:none}
  .t-rail{overflow:visible}
  .t-track{width:auto;flex-wrap:wrap;justify-content:center;gap:20px}
  .tcard{width:min(430px,100%)}
  .cron{transform:none!important}
}