/* ============================================================
   STAR GROUP MIAMI — shared design system
   Liquid-glass / Apple-modern, built on real project photography.
   ============================================================ */

/* ---------------- Nexa: the brand typeface, self-hosted ----------------
   Three cuts published as separate families upstream (Nexa Light /
   NexaRegular / Nexa Bold); declared here as one "Nexa" family at three
   weights so CSS weight matching picks the right cut. Requests above 700
   resolve down to Bold, so nothing gets faux-bolded.                    */
@font-face{
  font-family:'Nexa';
  src:url('fonts/nexa-light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('fonts/nexa-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('fonts/nexa-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --font-display:'Nexa', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-body:'Nexa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --black:#0a0a0b;
  --black-2:#121214;
  --black-3:#1a1a1d;
  --ink:#f6f4ef;
  --ink-dim:#aca89f;
  --ink-faint:#6d6a63;

  --gold:#f5a623;
  --gold-2:#ffcf6b;
  --gold-deep:#c97e12;

  --line:rgba(246,244,239,0.10);
  --line-strong:rgba(246,244,239,0.22);
  --glass:rgba(246,244,239,0.045);
  --glass-strong:rgba(246,244,239,0.09);

  --paper:#f3efe6;
  --paper-dim:#d8d2c2;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.32,.48,1);

  --maxw:1280px;
  --nav-h:82px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }

body{
  margin:0; background:var(--black); color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  /* clip (not hidden) — `hidden` would create a scroll container and break position:sticky */
  overflow-x:clip;
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-0.01em; }
a{ color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .wrap{ padding:0 22px; } }

::selection{ background:var(--gold); color:#241905; }

/* ---------------- utility type ---------------- */
.eyebrow{
  font-size:12px; font-weight:800; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:10px;
}
.eyebrow.muted{ color:var(--ink-faint); }
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; display:inline-block; }

.display{ font-weight:700; text-transform:uppercase; letter-spacing:0.01em; }
.lede{ color:var(--ink-dim); font-size:16px; max-width:56ch; }

/* ---------------- motion base ---------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
.reveal[data-delay="4"]{ transition-delay:.4s; }

/* directional variants — pair on the same element as .reveal (e.g. a photo
   sliding in from the left while its text counterpart comes from the right)
   so the two halves converge instead of both just rising in place. Needs
   the compound selector so it reliably beats the plain .reveal rule above
   regardless of stylesheet order. */
.reveal.reveal-left{ transform:translateX(-56px); }
.reveal.reveal-left.in{ transform:none; }
.reveal.reveal-right{ transform:translateX(56px); }
.reveal.reveal-right.in{ transform:none; }
/* Below ~700px these sections stack into one column, so the horizontal
   offset has nothing to converge toward — it just pushes the pre-reveal
   element past the edge of a narrow viewport and forces the whole page to
   scroll sideways. Falls back to the site's normal vertical rise instead. */
@media (max-width:700px){
  .reveal.reveal-left, .reveal.reveal-right{ transform:translateY(24px); }
  .reveal.reveal-left.in, .reveal.reveal-right.in{ transform:none; }
}

@keyframes riseIn{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  /* the Unidades choreography hides plain descendants (not .reveal itself),
     so they need their own escape hatch here */
  #unidades .section-head .eyebrow, #unidades .section-head h2, #unidades .section-head > p,
  #unidades .unit-card .unit-icon-box, #unidades .unit-card h3, #unidades .unit-card > p,
  #unidades .unit-card .unit-rows, #unidades .unit-card .unit-bottom{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* ---------------- glass surfaces ---------------- */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.glass::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,244,239,.35), transparent);
  opacity:.5; pointer-events:none;
}

/* Neon-outlined icon plate. The source icons are dark line art, so they keep
   a light plate for legibility and the glow lives on the ring around them. */
.icon-chip{
  position:relative; width:64px; height:64px; border-radius:18px; flex:none;
  background:linear-gradient(160deg, var(--paper), #e7e1d2);
  display:grid; place-items:center;
  border:1px solid rgba(245,166,35,.5);
  box-shadow:
    0 0 0 1px rgba(245,166,35,.14),
    0 0 18px rgba(245,166,35,.26),
    0 14px 30px -14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.icon-chip img{ width:30px; height:30px; object-fit:contain; }
.icon-chip.round{ border-radius:50%; }

/* the glow intensifies when the card it sits in is hovered */
.unit-card:hover .icon-chip,
.pillar-card:hover .icon-chip,
.service-row:hover .icon-chip,
.respaldo-row:hover .icon-chip,
.icon-chip:hover{
  border-color:rgba(245,166,35,.85);
  box-shadow:
    0 0 0 1px rgba(245,166,35,.3),
    0 0 26px rgba(245,166,35,.55),
    0 0 58px rgba(245,166,35,.22),
    0 14px 30px -14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------------- neon travelling edge ----------------
   A gold arc rides continuously around the card border. The conic gradient
   is masked to a 1px ring so only the outline shows.                      */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes edgeSpin{ to{ --ang:360deg; } }

.neon-edge{ position:relative; }
.neon-edge::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; z-index:2;
  background:conic-gradient(from var(--ang),
    transparent 0deg 236deg,
    rgba(245,166,35,.55) 286deg,
    #ffd98a 312deg,
    rgba(245,166,35,.55) 338deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:edgeSpin 5.5s linear infinite;
}
/* nth-child, not nth-of-type: these cards are a mix of <a> and <div>,
   so type-based counting would put two of them in sync. */
.neon-edge:nth-child(2)::after{ animation-delay:-1.83s; }
.neon-edge:nth-child(3)::after{ animation-delay:-3.66s; }

/* ---------------- scroll guide: neon line down the left edge ---------------- */
.scroll-guide{
  position:fixed; left:0; top:0; width:2px; height:100vh; z-index:90;
  background:rgba(246,244,239,.07); pointer-events:none;
}
.scroll-guide i{
  display:block; width:100%; height:0;
  background:linear-gradient(180deg, rgba(245,166,35,0), rgba(245,166,35,.55) 40%, var(--gold));
  box-shadow:0 0 10px rgba(245,166,35,.85), 0 0 26px rgba(245,166,35,.45);
}
.scroll-guide i::after{
  content:""; position:absolute; left:50%; width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  border-radius:50%; background:var(--gold);
  box-shadow:0 0 12px var(--gold), 0 0 28px rgba(245,166,35,.7);
  top:var(--head,0px);
}

@media (prefers-reduced-motion: reduce){
  .neon-edge::after{ animation:none; --ang:300deg; }
}

/* ---------------- buttons ---------------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px;
  font-size:12.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:border-color .3s var(--ease-out), transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), color .3s var(--ease-out);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%); transition:transform .45s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before{ transform:translateY(0); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:.08s; }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* SVG, not "→": the Nexa Bold cut has no U+2192, so a text arrow would fall
   back to a different font on every OS. */
.btn .arw{
  display:inline-flex; align-items:center; overflow:hidden;
  width:0; opacity:0; transform:translateX(-6px);
  transition:width .35s var(--ease-out), opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.btn .arw svg{ width:14px; height:14px; flex:none; }
.btn:hover .arw, .btn:focus-visible .arw{ width:16px; opacity:1; transform:translateX(0); }

.btn-gold{ background:var(--gold); color:#221703; }
.btn-gold::before{ background:var(--gold-2); }
.btn-gold:hover{ box-shadow:0 14px 34px -12px rgba(245,166,35,.55); }

.btn-line{ border-color:var(--line-strong); color:var(--ink); background:var(--glass); backdrop-filter:blur(12px); }
.btn-line::before{ background:var(--ink); }
.btn-line:hover{ color:var(--black); border-color:var(--ink); }

.btn-line-dark{ border-color:rgba(10,10,11,.25); color:var(--black); background:rgba(255,255,255,.55); backdrop-filter:blur(10px); }
.btn-line-dark::before{ background:var(--black); }
.btn-line-dark:hover{ color:var(--ink); }

/* ---------------- nav ---------------- */
.site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 0; transition:padding .35s var(--ease-out); }
.site-nav.scrolled{ padding:12px 0; }
.nav-shell{
  max-width:var(--maxw); margin:0 auto; padding:10px 12px 10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-radius:999px;
  background:rgba(10,10,11,0.42);
  border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.8);
  transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.site-nav.scrolled .nav-shell{ background:rgba(10,10,11,0.72); box-shadow:0 20px 50px -20px rgba(0,0,0,.85); }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
/* real SG monogram artwork (white + gold on transparency) */
.brand .mk{ display:block; height:30px; width:auto; flex:none; }
.footer-logo{ display:block; width:132px; height:auto; margin-bottom:16px; }
.brand .mk svg{ width:18px; height:18px; }
.brand .word{ font-family:var(--font-display); font-size:15px; font-weight:800; letter-spacing:0.02em; }
.brand .word b{ color:var(--gold); }
.brand .word small{ display:block; font-family:var(--font-body); font-weight:600; font-size:9px; letter-spacing:0.22em; color:var(--ink-faint); text-transform:uppercase; margin-top:1px; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  position:relative; padding:10px 16px; border-radius:999px; text-decoration:none;
  font-size:12.5px; font-weight:700; letter-spacing:0.03em; color:var(--ink-dim);
  transition:color .3s var(--ease-out), background .3s var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--ink); background:var(--glass-strong); }
.nav-links a.active{ color:var(--black); background:var(--gold); }
@media (max-width:980px){ .nav-links{ display:none; } }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{ padding:11px 20px; }
@media (max-width:640px){ .nav-cta .btn span:not(.arw){ display:none; } .nav-cta .btn{ padding:11px 14px; } }

.nav-burger{
  display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--glass); align-items:center; justify-content:center; flex:none; cursor:pointer;
}
@media (max-width:980px){ .nav-burger{ display:flex; } }
.nav-burger span{ width:16px; height:1.4px; background:var(--ink); position:relative; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:16px; height:1.4px; background:var(--ink); transition:transform .3s var(--ease-out); }
.nav-burger span::before{ top:-5px; } .nav-burger span::after{ top:5px; }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:rgba(8,8,9,0.97); backdrop-filter:blur(30px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease-out);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-size:28px; font-weight:700; text-decoration:none; color:var(--ink); text-transform:uppercase; }
.mobile-menu a.active{ color:var(--gold); }

/* ---------------- hero: scroll-scrubbed frame sequence ----------------
   A tall track pins a 100vh stage; scroll progress drives the canvas
   frame index, so the house opens up as you move down the page.        */
/* padding:0 is load-bearing — the global `section` rule would otherwise
   add 120px and push the pinned stage down, breaking the full-bleed hero. */
.hero-scroll{ position:relative; height:400vh; padding:0; }
@media (max-width:900px){ .hero-scroll{ height:320vh; } }

.hero-stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:flex-end;
  /* still frame behind the canvas: the hero still reads if JS never runs */
  background:var(--black) url('hero/h001.jpg') center/cover no-repeat;
}
/* A full 100vh stage forces the 16:9 footage into a tall, narrow box, so
   "cover" was cropping most of the house off the sides on phones (hero.js
   switches to "contain" here too — this shortens the black letterbox that
   comes with it, and keeps the plain-CSS fallback frame in sync). */
@media (max-width:760px){
  /* background-position offset (96px) mirrors hero.js's navPad so the CSS
     fallback frame and the canvas agree on where the house sits — if they
     ever disagree (e.g. briefly, before the canvas has painted) you get a
     visible "double house" as the two crops slide past each other. */
  .hero-stage{ height:74vh; min-height:420px; background-size:contain; background-position:center 96px; }
  /* The lede paragraph was the tallest single block in the overlay and the
     Thesis section right below the hero already restates the same pitch —
     dropping it here is what actually stops the text from riding up onto
     the (now letterboxed, no longer edge-to-edge) photo. */
  .hero-lede{ display:none; }
}

/* no pinning when motion is reduced — one still frame, copy flows normally */
.hero-scroll.reduced{ height:auto; }
.hero-scroll.reduced .hero-stage{ position:relative; height:auto; min-height:100vh; }
.hero-scroll.reduced .hero-ui{ display:block; }
.hero-scroll.reduced .hero-panel{
  grid-area:auto; opacity:1 !important; transform:none !important; margin-bottom:54px;
}
.hero-scroll.reduced .hero-panel:last-child{ margin-bottom:0; }
.hero-scroll.reduced .hero-rail,
.hero-scroll.reduced .scroll-cue,
.hero-scroll.reduced .hero-loading{ display:none; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
/* Light touch: a scrim at the top so the nav stays legible, and a fade at
   the bottom so the render dissolves into the page. The middle stays clear
   — with no copy over the video, the house is the whole point. */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,6,.74) 0%, rgba(5,5,6,.30) 11%, rgba(5,5,6,0) 28%,
    rgba(5,5,6,0) 55%, rgba(5,5,6,.55) 78%, rgba(5,5,6,.90) 91%, rgba(5,5,6,.98) 100%);
}
/* Recalibrated for the shorter, top-anchored mobile crop: a small scrim
   behind the logo, clear over the house, then a soft dissolve into the
   solid black where the buttons sit — instead of the photo cutting off
   abruptly against flat black. */
@media (max-width:760px){
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(5,5,6,.65) 0%, rgba(5,5,6,.22) 13%, rgba(5,5,6,0) 22%,
      rgba(5,5,6,0) 42%, rgba(5,5,6,.85) 58%, rgba(5,5,6,.98) 72%, rgba(5,5,6,1) 100%);
  }
}

.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* ---------------- hero overlay: context in the bottom band ----------------
   Sits in the dark band at the foot of the video so the reveal stays clear
   while the visitor still gets the pitch, the CTAs and the numbers.      */
.hero-ui{
  position:relative; z-index:3; width:100%;
  padding-bottom:clamp(38px,6vh,66px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:end;
}
@media (max-width:900px){ .hero-ui{ grid-template-columns:1fr; gap:24px; } }
.hero-lede{ color:rgba(246,244,239,.84); font-size:15.5px; max-width:46ch; margin:0; }
.hero-ui .hero-actions{ margin-top:24px; }
.hero-ui .hero-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:0;
}
.hero-ui .stat-pill{ min-width:0; }
@media (max-width:520px){
  .hero-ui .hero-stats{ grid-template-columns:1fr 1fr; }
  .hero-lede{ font-size:14.5px; }
}

/* ---------------- thesis: the page's headline, below the reveal ---------------- */
/* Small bottom padding on purpose — the next section brings its own 120px. */
.thesis{ padding:clamp(80px,11vh,130px) 0 clamp(24px,3.5vh,46px); text-align:center; }
/* centred block: the eyebrow loses its leading dash so it sits symmetrically */
.thesis .eyebrow{ justify-content:center; }
.thesis .eyebrow::before{ display:none; }
.thesis-title{
  font-size:clamp(23px,2.9vw,38px); line-height:1.14; max-width:28ch; margin:18px auto 0;
}
.thesis-title .g{ color:var(--gold); }
.thesis-foot{
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start;
  margin-top:52px; padding-top:42px; border-top:1px solid var(--line);
}
@media (max-width:860px){ .thesis-foot{ grid-template-columns:1fr; gap:34px; } }
.thesis-foot p{ color:var(--ink-dim); font-size:15.5px; max-width:52ch; margin:0; }
/* force three equal columns so the pills never wrap 2+1 */
.thesis-foot .hero-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:0;
}
.thesis-foot .stat-pill{ min-width:0; }
.thesis-foot .hero-actions{ margin-top:26px; }

/* loading veil */
.hero-loading{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  background:rgba(5,5,6,.72); backdrop-filter:blur(6px);
  transition:opacity .7s var(--ease-out), visibility .7s;
}
.hero-loading.done{ opacity:0; visibility:hidden; }
.hero-loading .bar{ width:min(240px,44vw); height:2px; background:var(--line-strong); overflow:hidden; border-radius:2px; }
.hero-loading .bar i{ display:block; height:100%; width:0%; background:var(--gold); transition:width .25s linear; }
.hero-loading .pct{ margin-top:14px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }

.hero-stats{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }
.stat-pill{
  padding:14px 20px; border-radius:16px; background:rgba(12,11,9,.55); border:1px solid var(--line);
  backdrop-filter:blur(16px); min-width:132px;
  transition:transform .4s var(--ease-spring), border-color .3s var(--ease-out);
}
.stat-pill:hover{ transform:translateY(-4px); border-color:rgba(245,166,35,.4); }
/* tabular figures keep the pill from twitching while the number counts up */
.stat-pill .n{
  font-family:var(--font-display); font-size:24px; font-weight:800;
  color:var(--gold-2); line-height:1; font-variant-numeric:tabular-nums;
}
.stat-pill .l{ font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

/* No CSS animation here: an animation with fill-mode `both` outranks inline
   styles, which would stop hero.js from fading the cue out on scroll. */
/* Rotated onto the right edge — the bottom band now holds the hero copy. */
.scroll-cue{
  position:absolute; right:18px; top:50%; z-index:3;
  transform:translateY(-50%) rotate(90deg); transform-origin:center;
  display:flex; align-items:center; gap:10px;
  color:var(--ink-faint); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
}
@media (max-width:980px){ .scroll-cue{ display:none; } }
.scroll-cue .ln{ width:1px; height:34px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.scroll-cue .ln::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold-2); animation:scrollDrop 2.2s ease-in-out infinite; }
@keyframes scrollDrop{ 0%{ top:-100%; } 60%,100%{ top:100%; } }
@media (max-width:720px){ .scroll-cue{ display:none; } }

/* ---------------- sections ---------------- */
section{ position:relative; padding:120px 0; }
@media (max-width:720px){ section{ padding:80px 0; } }
.section-head{ max-width:640px; margin-bottom:56px; }
/* Kept just under .thesis-title so the page H1 stays the largest type. */
.section-head h2{ font-size:clamp(24px,3vw,35px); margin-top:16px; line-height:1.1; }
.section-head p{ color:var(--ink-dim); margin-top:16px; font-size:15.5px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }

.divider{ height:1px; background:var(--line); border:none; margin:0; }

/* ---------------- unit cards (home) ---------------- */
.units{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.units.two{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .units, .units.two{ grid-template-columns:1fr; } }

/* unit logos are white+gold artwork on transparency — no plate needed.
   Fixed band height so a horizontal and a vertical lockup sit level. */
.unit-logo{ display:flex; align-items:center; height:112px; margin-bottom:22px; }
.unit-logo img{ width:auto; max-width:100%; object-fit:contain; }
/* Mesh-gradient card: dark at the top, an amber glow rising from the
   bottom edge — same construction as the reference, recoloured to brand. */
.unit-card{
  position:relative; padding:32px 28px 28px; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:
    radial-gradient(120% 65% at 50% 118%, rgba(255,207,107,.85) 0%, rgba(245,166,35,.42) 32%, rgba(245,166,35,0) 62%),
    radial-gradient(75% 50% at 12% -8%, rgba(255,224,163,.16), transparent 62%),
    #0b0a08;
  border:1px solid rgba(255,214,120,.16);
  text-decoration:none; color:var(--ink);
  transition:transform .45s var(--ease-out), border-color .4s var(--ease-out), box-shadow .45s var(--ease-out);
}
.unit-card:hover{ transform:translateY(-8px); border-color:rgba(255,207,107,.4); box-shadow:0 40px 90px -28px rgba(0,0,0,.85); }

.unit-card h3{ font-size:21px; margin-bottom:10px; }
.unit-card p{ color:rgba(246,244,239,.72); font-size:14px; margin:0; }

/* ---------------- unit card v2: vertical liquid-glass panel ----------------
   Narrower/taller than the old mesh-gradient card, a floating squircle icon
   instead of a sphere, two highlight rows with their own mini icon + arrow
   (echoing the referenced "choose offer type" card), and compact corner
   buttons instead of a full-width button pair. Amber stands in for the
   reference's green throughout. */
.units.two{ justify-items:center; }
.unit-card{ max-width:380px; width:100%; }
@media (max-width:900px){ .unit-card{ max-width:420px; } }

.unit-card.glass-v2{
  padding:34px 28px 26px; background:rgba(24,22,18,.55);
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(245,166,35,.16), transparent 60%);
  border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.unit-card.glass-v2:hover{ border-color:rgba(245,166,35,.32); }

.unit-icon-box{
  position:relative; width:60px; height:60px; margin:0 auto 22px; border-radius:18px;
  background:linear-gradient(155deg, #fff3d8 0%, #f5a623 55%, #b06e10 100%);
  box-shadow:0 14px 30px -10px rgba(245,166,35,.55), inset 0 2px 3px rgba(255,255,255,.6), inset 0 -6px 10px rgba(0,0,0,.25);
  display:grid; place-items:center; transform:rotate(-6deg);
  transition:transform .5s var(--ease-spring);
}
.unit-card.glass-v2:hover .unit-icon-box{ transform:rotate(0deg) scale(1.06); }
.unit-icon-box svg{ width:26px; height:26px; color:#2a1c05; }

.unit-card.glass-v2 h3{ text-align:center; font-size:20px; }
.unit-card.glass-v2 > p{ text-align:center; color:var(--ink-dim); font-size:13.5px; margin:8px 0 24px; }

.unit-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.unit-row{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  text-decoration:none; color:inherit;
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.unit-row:hover{ background:rgba(245,166,35,.08); border-color:rgba(245,166,35,.28); }
.unit-row-icon{
  flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:rgba(245,166,35,.16); border:1px solid rgba(245,166,35,.3);
}
.unit-row-icon svg{ width:16px; height:16px; color:var(--gold-2); }
.unit-row-text{ flex:1; min-width:0; }
.unit-row-text b{ display:block; font-size:13px; font-weight:700; color:var(--ink); }
.unit-row-text span{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:1px; }
.unit-row-arrow{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:var(--ink-dim);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.unit-row-arrow svg{ width:11px; height:11px; }
.unit-row:hover .unit-row-arrow{ background:var(--gold); color:#221703; border-color:var(--gold); transform:translateX(2px); }

.unit-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.08);
}
.unit-bottom .btn{ padding:10px 18px; font-size:10.5px; }

/* frosted pill — reads against the gold glow the way the reference's
   light "Skip" pill reads against its purple mesh */
.btn-frost{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(10px); }
.btn-frost::before{ background:#fff; }
.btn-frost:hover{ color:#241905; border-color:#fff; }

/* ---------------- Unidades de negocio: choreographed entrance ----------------
   Upgrade over the site's plain fade-and-rise .reveal: the section head
   pulls into focus from a blur, then each card tumbles in from a slight
   tilt with a spring overshoot, and only once a card has landed do its own
   contents cascade in one at a time (badge → title → copy → buttons).
   Everything still keys off the existing .reveal/.in classes that
   IntersectionObserver toggles in main.js — no JS changes needed. */

/* section head: container just carries the trigger; children animate */
#unidades .section-head.reveal{ opacity:1; transform:none; }
#unidades .section-head .eyebrow,
#unidades .section-head h2,
#unidades .section-head > p{
  opacity:0; transform:translateY(22px); filter:blur(6px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
}
#unidades .section-head.in .eyebrow{ opacity:1; transform:none; filter:blur(0); }
#unidades .section-head.in h2{ opacity:1; transform:none; filter:blur(0); transition-delay:.14s; }
#unidades .section-head.in > p{ opacity:1; transform:none; filter:blur(0); transition-delay:.28s; }

/* cards: tumble in from opposite tilts with a spring overshoot + blur-focus */
#unidades .units .unit-card.reveal{
  --tilt:-5deg;
  opacity:0; transform:translateY(50px) scale(.9) rotate(var(--tilt)); filter:blur(14px);
  transition:opacity .7s var(--ease-out), transform 1.05s var(--ease-spring), filter .8s var(--ease-out);
}
#unidades .units .unit-card.reveal:nth-child(2){ --tilt:5deg; }
#unidades .units .unit-card.reveal.in{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); filter:blur(0); }

/* card contents: hidden until the card lands, then cascade one at a time */
#unidades .unit-card .unit-icon-box,
#unidades .unit-card h3,
#unidades .unit-card > p,
#unidades .unit-card .unit-rows,
#unidades .unit-card .unit-bottom{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
#unidades .unit-card .unit-icon-box{ transform:translateY(10px) scale(.35) rotate(-30deg); transition:opacity .5s var(--ease-out), transform .65s var(--ease-spring); }
#unidades .unit-card.in .unit-icon-box{ opacity:1; transform:rotate(-6deg); transition-delay:.5s; }
#unidades .unit-card.in h3{ opacity:1; transform:none; transition-delay:.62s; }
#unidades .unit-card.in > p{ opacity:1; transform:none; transition-delay:.72s; }
#unidades .unit-card.in .unit-rows{ opacity:1; transform:none; transition-delay:.82s; }
#unidades .unit-card.in .unit-bottom{ opacity:1; transform:none; transition-delay:.94s; }
.unit-card .go .arw svg{ width:13px; height:13px; flex:none; }
.unit-card:hover .go .arw{ transform:translateX(4px); }
.unit-card.soon{ opacity:.6; cursor:default; }
.unit-card.soon:hover{ transform:none; border-color:var(--line); box-shadow:none; }
.unit-card .badge-soon{ position:absolute; top:20px; right:20px; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-faint); }

/* ---------------- zones (photo cards) ---------------- */
.zones{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:800px){ .zones{ grid-template-columns:1fr; } }
.zone-card{
  position:relative; border-radius:24px; overflow:hidden; min-height:460px;
  display:flex; align-items:flex-end; border:1px solid var(--line);
  transition:transform .5s var(--ease-out);
}
.zone-card:hover{ transform:translateY(-6px); }
.zone-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.zone-card:hover img{ transform:scale(1.06); }
.zone-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,5,4,.92) 6%, rgba(6,5,4,.15) 55%, transparent 80%); }
.zone-content{ position:relative; z-index:2; padding:32px; }
.zone-content .eyebrow{ color:var(--gold-2); margin-bottom:10px; }
.zone-content h3{ font-size:27px; margin-bottom:12px; color:#fff; }
.zone-content p{ color:rgba(246,244,239,.78); font-size:14px; max-width:44ch; margin:0 0 20px; }

/* ---------------- pillars / why-us ---------------- */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }
.pillar-card{
  padding:30px 24px; border-radius:22px; background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(16px); transition:transform .4s var(--ease-spring), border-color .35s var(--ease-out);
}
.pillar-card:hover{ transform:translateY(-6px); border-color:rgba(245,166,35,.3); }
.pillar-card .icon-chip{ margin-bottom:20px; }
.pillar-card:hover .icon-chip{ transform:scale(1.08) rotate(4deg); }
.pillar-card h4{ font-size:16px; margin-bottom:10px; }
.pillar-card p{ color:var(--ink-dim); font-size:13.5px; margin:0; }

/* ---------------- services grid ---------------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .services{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .services{ grid-template-columns:1fr; } }
.service-row{
  display:flex; align-items:center; gap:16px; padding:20px; border-radius:18px;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(14px);
  transition:transform .4s var(--ease-spring), border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.service-row:hover{ transform:translateY(-4px) translateX(2px); border-color:rgba(245,166,35,.3); background:var(--glass-strong); }
.service-row .icon-chip{ width:50px; height:50px; border-radius:14px; }
.service-row .icon-chip img{ width:24px; height:24px; }
.service-row span{ font-size:14px; font-weight:600; }

/* ---------------- featured service (photo split) ---------------- */
.feature-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .feature-split{ grid-template-columns:1fr; gap:32px; } }
.feature-split.reverse .feature-media{ order:2; }
.feature-media{ position:relative; }
.feature-media .ph{
  border-radius:22px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
/* for a naturally portrait source photo — 4:3 would crop it down to a sliver */
.feature-media .ph.tall{ aspect-ratio:3/4; }
.feature-media .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.feature-media:hover .ph img{ transform:scale(1.05); }
.feature-media .ph2{
  position:absolute; width:52%; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:4px solid var(--black); box-shadow:0 30px 60px -20px rgba(0,0,0,.85);
  right:-8%; bottom:-10%;
  transition:transform .5s var(--ease-out);
}
.feature-media:hover .ph2{ transform:translateY(-6px); }
.feature-media .ph2 img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){ .feature-media .ph2{ display:none; } }
.feature-text h3{ font-size:clamp(22px,2.8vw,32px); margin-bottom:16px; }
.feature-text p{ color:var(--ink-dim); font-size:15px; max-width:48ch; }

/* ---------------- stat band ---------------- */
.stat-band{ background:var(--black-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 0; }
.stat-band .wrap{ display:flex; justify-content:center; align-items:center; gap:60px; flex-wrap:wrap; text-align:center; }
.stat-band .item .n{
  font-family:var(--font-display); font-size:clamp(30px,4vw,46px);
  font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;
}
.stat-band .item .l{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

/* ---------------- team ---------------- */
/* 5 confirmed team members fit one clean row instead of the old 4-col grid
   leaving a lone orphan card on its own line. */
.team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media (max-width:1100px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.team-card{
  border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--black-2);
  transition:transform .45s var(--ease-out), border-color .35s var(--ease-out);
}
.team-card:hover{ transform:translateY(-6px); border-color:rgba(245,166,35,.3); }
.team-photo{ aspect-ratio:3/4; overflow:hidden; background:var(--black-3); position:relative; }
.team-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .5s var(--ease-out), transform 1s var(--ease-out); }
.team-card:hover .team-photo img{ filter:grayscale(0) contrast(1.05); transform:scale(1.05); }
.team-photo.empty{ display:grid; place-items:center; }
.team-photo.empty span{ font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--ink-faint); }
.team-info{ padding:16px 18px 20px; }
.team-info .name{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.team-info .role{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:800; }

/* ---------------- founder ---------------- */
/* align-items:start, not center — centering left the text column's top edge
   ~180px below the (much taller) photo's top edge, which meant a visitor
   landing mid-scroll (e.g. via an anchor link) could catch the two reveal
   elements straddling the trigger threshold at different moments and see
   the text permanently stuck off-screen. */
.founder{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; }
@media (max-width:900px){ .founder{ grid-template-columns:1fr; gap:34px; } }
/* liquid-glass treatment: a frosted border ring, a specular highlight along
   the top edge, and a soft ambient glow — the same construction as the
   site's .glass utility, sized up for a full photo card. */
.founder-photo{
  position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 30px 60px -20px rgba(245,166,35,.10);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.founder-photo::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  pointer-events:none;
}
/* black shadow along the base of the photo, like a vignette pulling the
   portrait down into the dark section it sits in */
.founder-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,3,2,.75) 0%, rgba(4,3,2,.24) 24%, transparent 46%);
}
.founder-photo img{
  position:relative; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.founder-photo:hover img{ transform:scale(1.06); }
.founder-text h3{ font-size:clamp(24px,3vw,34px); }
.founder-text .role{ color:var(--gold); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-top:10px; display:block; }
.founder-text p{ color:var(--ink-dim); font-size:15px; margin-top:18px; max-width:56ch; }

/* ---------------- video banner ---------------- */
.video-banner{
  position:relative; min-height:340px; border-radius:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.video-banner img,
.video-banner video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.video-banner .play{
  position:relative; z-index:2; width:88px; height:88px; border-radius:50%;
  background:rgba(246,244,239,.12); border:1px solid rgba(246,244,239,.35); backdrop-filter:blur(10px);
  display:grid; place-items:center; transition:transform .4s var(--ease-spring), background .3s var(--ease-out);
}
.video-banner .play:hover{ transform:scale(1.08); background:rgba(245,166,35,.25); }
.video-banner .play svg{ width:26px; height:26px; margin-left:3px; }
.video-banner .vb-label{ position:relative; z-index:2; margin-top:18px; color:var(--ink); font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }

/* ---------------- watermark bg ---------------- */
.watermark{ position:relative; overflow:hidden; }
.watermark::before{
  content:""; position:absolute; inset:-10% -10%; background:url('img/watermark-sg.png'); background-size:340px;
  opacity:.035; pointer-events:none; z-index:0;
}
.watermark > *{ position:relative; z-index:1; }

/* ---------------- gallery: coverflow carousel ----------------
   The active card sits square to the viewer; neighbours are scaled,
   turned away on the Y axis and dimmed, so depth reads at a glance.
   JS writes each card's transform from its offset to the active index. */
.coverflow{ --cf-w:clamp(210px, 24vw, 320px); }
.cf-stage{
  position:relative; height:clamp(300px, 34vw, 448px); overflow:hidden;
  perspective:1500px; transform-style:preserve-3d;
}
.cf-item{
  position:absolute; top:0; left:50%; width:var(--cf-w); aspect-ratio:3/4;
  margin-left:calc(var(--cf-w) / -2);
  border-radius:22px; overflow:hidden; border:1px solid var(--line);
  background:var(--black-2); cursor:pointer;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
  transition:transform .75s var(--ease-out), opacity .75s var(--ease-out), filter .75s var(--ease-out);
  will-change:transform, opacity;
}
.cf-item img{ width:100%; height:100%; object-fit:cover; }
.cf-item[data-pos="0"]{ cursor:default; box-shadow:0 46px 90px -30px rgba(0,0,0,.9); }
.cf-item[data-pos="0"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,.42), 0 0 40px rgba(245,166,35,.18);
}
.cf-item[data-hidden="1"]{ pointer-events:none; }

/* bottom scrim so a caption always reads over the photo underneath it */
.cf-shade{
  position:absolute; inset:auto 0 0 0; height:62%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,4,5,.92) 0%, rgba(4,4,5,.55) 42%, transparent 100%);
}
.cf-cap{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  color:#fff; font-size:14px; font-weight:700; line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.cf-item[data-pos="0"] .cf-cap{ opacity:1; transform:none; }
.cf-cap .eyebrow{ color:var(--gold-2); font-size:10px; margin:0 0 6px; }
.cf-cap .eyebrow::before{ background:var(--gold-2); width:14px; }

.cf-nav{ display:flex; justify-content:center; gap:14px; margin-top:34px; }
.cf-btn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:var(--glass); border:1px solid var(--line-strong); color:var(--ink);
  display:grid; place-items:center; backdrop-filter:blur(12px);
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out), transform .4s var(--ease-spring), color .3s;
}
.cf-btn svg{ width:17px; height:17px; }
.cf-btn:hover{ background:var(--gold); border-color:var(--gold); color:#221703; transform:translateY(-2px); }
.cf-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.cf-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.cf-dot{
  width:6px; height:6px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background:var(--line-strong); transition:background .35s var(--ease-out), width .35s var(--ease-out);
}
.cf-dot.on{ background:var(--gold); width:20px; border-radius:3px; }
.cf-dot:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------------- respaldo (list) ---------------- */
.respaldo{ display:grid; gap:18px; }
.respaldo-row{
  display:flex; gap:20px; padding:24px; border-radius:18px; background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(14px); transition:border-color .35s var(--ease-out), transform .4s var(--ease-out);
}
.respaldo-row:hover{ border-color:rgba(245,166,35,.3); transform:translateX(6px); }
.respaldo-row .icon-chip{ width:52px; height:52px; border-radius:14px; }
.respaldo-row .icon-chip img{ width:24px; height:24px; }
.respaldo-row h4{ font-size:15.5px; margin-bottom:6px; }
.respaldo-row p{ color:var(--ink-dim); font-size:13.5px; margin:0; }

/* ---------------- quote statement ---------------- */
.statement{ position:relative; text-align:center; overflow:hidden; }

/* Ambient background footage, dimmed and scrimmed so the quote stays the
   focal point. Two layers do the legibility work: a flat tint that sits
   right on the video (so it reads correctly even before the vignette
   below finishes loading) and a radial vignette that darkens the edges
   where the wide "correctas —" and "sobre el lugar" lines run close to
   full width. */
.statement-video{ position:absolute; inset:0; z-index:0; }
.statement-video video{
  width:100%; height:100%; object-fit:cover;
  opacity:1; filter:saturate(0) contrast(1.08);
}
/* Scrim eased off further so the footage reads clearly; still measured
   above 4.5:1 (WCAG AA) behind the text after this pass — see the verify
   script run alongside this change. */
.statement-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 68% at 50% 45%, rgba(10,9,7,.08), rgba(10,9,7,.42) 72%, rgba(10,9,7,.68) 100%);
}
.statement > .wrap{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){ .statement-video video{ display:none; } }

.statement .mk-lg{ width:30px; height:30px; margin:0 auto 30px; color:var(--gold); }
.statement h2{ font-size:clamp(24px,3.6vw,40px); line-height:1.3; max-width:900px; margin:0 auto; font-weight:500; }
.statement h2 .g{ color:var(--gold); font-weight:700; }
.statement h2 .w{ color:var(--ink); font-weight:700; }
/* Lighter than --ink-faint on purpose: that token reads fine on flat black,
   but this line sits over the (now fully visible) background footage, and
   the darker grey was disappearing into it. */
.statement h2 .d{ color:rgba(246,244,239,.72); font-weight:500; }

/* ---------------- contact ---------------- */
.contact-section{ background:var(--black-2); border-top:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
.contact-info .info-row{ display:flex; gap:12px; margin-top:22px; font-size:14px; color:var(--ink-dim); }
.contact-info .info-row .k{ color:var(--gold-2); font-weight:800; min-width:96px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding-top:2px; }
.contact-info .socials{ display:flex; gap:10px; margin-top:30px; }
.contact-info .socials a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center;
  color:var(--ink-dim); transition:all .35s var(--ease-spring);
}
.contact-info .socials a:hover{ background:var(--gold); color:#221703; border-color:var(--gold); transform:translateY(-3px) scale(1.06); }
.contact-info .socials svg{ width:17px; height:17px; }

.form-panel{ padding:36px; border-radius:24px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px; font-weight:700; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(0,0,0,.28); border:1px solid var(--line-strong); border-radius:12px;
  padding:13px 15px; color:var(--ink); font-family:inherit; font-size:14px;
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(0,0,0,.4); }
.field textarea{ resize:vertical; min-height:100px; }
.form-submit{ width:100%; justify-content:center; margin-top:4px; }
.form-panel.iframe-embed{ display:flex; }
.form-panel.iframe-embed iframe{ min-width:0; }
@media (max-width:520px){ .form-panel.iframe-embed{ padding:18px; } }

/* ---------------- footer ---------------- */
footer{ background:var(--black); padding:80px 0 30px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr auto; gap:32px; align-items:start; padding-bottom:44px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
/* 1fr grid tracks default to a min-width of their content's min-content size,
   which on a phone-width column is wider than the track itself — this is
   what was pushing the "Comenzar" column (and its subscribe form) past the
   viewport edge. min-width:0 lets the track actually shrink to fit. */
.footer-col{ min-width:0; }
.footer-brand p{ color:var(--ink-faint); font-size:12.5px; max-width:30ch; margin-top:14px; }
.footer-col h4{ font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint); font-weight:800; margin-bottom:16px; }
.footer-col a{
  display:block; width:fit-content; text-decoration:none; color:var(--ink-dim); font-size:13.5px; margin-bottom:10px;
  transition:color .3s var(--ease-out), transform .35s var(--ease-out);
}
.footer-col a:hover{ color:var(--ink); transform:translateX(5px); }
.footer-social{ display:flex; flex-direction:column; gap:10px; }
@media (max-width:900px){ .footer-social{ flex-direction:row; } }
.footer-social a{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center;
  color:var(--ink-dim); transition:all .35s var(--ease-spring);
}
.footer-social a:hover{ color:#221703; background:var(--gold); border-color:var(--gold); transform:translateY(-3px) scale(1.06); }
.footer-social svg{ width:20px; height:20px; }
.footer-subscribe{ display:flex; gap:0; margin-top:6px; border-radius:999px; overflow:hidden; border:1px solid var(--line-strong); max-width:280px; }
.footer-subscribe input{ flex:1; min-width:0; background:transparent; border:none; padding:11px 16px; color:var(--ink); font-family:inherit; font-size:13px; }
.footer-subscribe input:focus{ outline:none; }
.footer-subscribe button{ background:var(--gold); color:#221703; border:none; padding:0 18px; font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.footer-bottom{ padding-top:26px; border-top:1px solid var(--line); text-align:center; font-size:11.5px; color:var(--ink-faint); }

/* ---------------- misc page hero (non full-bleed, for interior pages top strip) ---------------- */
.page-crumb{ padding:calc(var(--nav-h) + 30px) 0 0; }
.page-crumb .wrap{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-faint); }
.page-crumb a{ text-decoration:none; color:var(--ink-faint); transition:color .2s; }
.page-crumb a:hover{ color:var(--gold); }