/* ==========================================================================
   360° MKT Anonymous — landing.html page styles
   Load after css/base.css.
   ========================================================================== */

.reveal-word{ opacity:.14; transition:opacity .3s var(--ease); }
.split-char{ display:inline-block; will-change:transform; }
.mask-line{ overflow:hidden; }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; width:100%; z-index:500; padding:clamp(1rem,2vw,1.6rem) 0;
  transition:transform .5s var(--ease);
}
header.nav-hidden{ transform:translateY(-130%); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; position:relative; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{ height:clamp(58px,7vw,76px); width:auto; }
.nav-links{ display:flex; gap:2.4rem; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav-links a{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; position:relative; padding-bottom:4px; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--yellow); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-btn{
  display:inline-flex; align-items:center; padding:.65rem 1.5rem;
  border:1px solid var(--yellow); border-radius:100px;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:.78rem; color:var(--white);
  position:relative; overflow:hidden; z-index:1; flex:none;
}
.nav-btn::before{ content:''; position:absolute; inset:0; background:var(--yellow); z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav-btn:hover{ color:var(--black); }
.nav-btn:hover::before{ transform:scaleX(1); }

.menu-btn{ display:none; flex-direction:column; gap:6px; width:30px; z-index:950; position:relative; transition:opacity .3s var(--ease); }
.menu-btn span{ display:block; height:2px; width:100%; background:var(--white); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.menu-btn.is-open{ opacity:0; pointer-events:none; }
.menu-btn.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2){ opacity:0; }
.menu-btn.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-btn{ display:none; }
  .menu-btn{ display:flex; }
}

/* ---------- mobile menu overlay ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:800; background:rgba(3,2,0,.94);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  clip-path:circle(0px at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; padding:2rem;
}
.menu-overlay.open{ clip-path:circle(150% at calc(100% - 46px) 46px); pointer-events:auto; }
.menu-close{
  position:absolute; top:1.7rem; right:1.7rem; width:38px; height:38px;
  border:1px solid rgba(255,255,255,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.menu-close:hover{ border-color:var(--yellow); color:var(--yellow); transform:rotate(90deg); }
.menu-overlay-inner{ width:100%; max-width:460px; display:flex; flex-direction:column; gap:clamp(2rem,6vw,3rem); text-align:center; }
.menu-links{ display:flex; flex-direction:column; gap:.2rem; }
.menu-links a{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; font-size:clamp(1.9rem,8vw,2.6rem); line-height:1.3; color:var(--white); overflow:hidden; }
.menu-links a span{ display:inline-block; }
.menu-links a:hover{ color:var(--yellow); }
.menu-slogan{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.3rem,4.6vw,1.7rem); line-height:1.2;
  background:linear-gradient(90deg,#fff 35%,var(--yellow) 50%,#fff 65%);
  background-size:260% 100%; background-position:200% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 3.2s ease-in-out .8s infinite;
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 60%,100%{ background-position:-60% 0; } }
.menu-contact{ display:flex; flex-direction:column; gap:.6rem; color:var(--gray); font-size:.85rem; letter-spacing:.04em; }
.menu-contact a{ color:var(--white); }
.menu-contact a:hover{ color:var(--yellow); }

/* ---------- hero ---------- */
#hero{ position:relative; height:100svh; }
.hero-inner{ position:absolute; inset:0; }
.hero-inner .eyebrow{ position:absolute; top:clamp(6.5rem,14vh,9rem); left:0; right:0; width:max-content; margin:0 auto; justify-content:center; color:var(--gray); white-space:nowrap; }
.hero-title{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max-content; max-width:94vw; text-align:center; font-size:clamp(3.2rem, 10.5vw, 10.5rem); }
.hero-foot{ position:absolute; left:50%; bottom:clamp(3rem,8vh,5rem); transform:translateX(-50%); width:min(1360px,90vw); display:block; }
.hero-foot .lead{ text-align:center; margin:0 auto; }
.btn-wide{
  display:none; align-items:center; justify-content:center; gap:.7rem;
  width:90vw; margin:1.5rem auto 0;
  padding:1.15rem 1.5rem; border:1px solid var(--yellow); border-radius:100px;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.9rem; color:var(--white);
  position:relative; overflow:hidden; z-index:1;
}
.btn-wide::before{ content:''; position:absolute; inset:0; background:var(--yellow); z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.btn-wide:hover{ color:var(--black); }
.btn-wide:hover::before{ transform:scaleX(1); }
.btn-wide svg{ transition:transform .4s var(--ease); }
.btn-wide:hover svg{ transform:translateX(4px); }
.hero-title .accent{ color:var(--yellow); }
@media (max-width:760px){
  #hero{ display:flex; flex-direction:column; justify-content:center; padding-top:6rem; }
  .hero-inner{ position:relative; inset:auto; text-align:center; }
  .hero-inner .eyebrow{ position:static; margin:0 auto 1.4rem; white-space:normal; }
  .hero-title{ position:static; transform:none; width:auto; max-width:none; margin-inline:auto; }
  .hero-foot{ position:static; transform:none; width:auto; margin-top:2.2rem; }
  .hero-foot .lead{ text-align:center; margin-inline:auto; }
  .btn-wide{ display:flex; }
  .hero-inner .eyebrow{
    max-width:100%; gap:8px;
    font-size:.65rem; letter-spacing:.2em;
  }
  .hero-inner .eyebrow::before{ width:24px; }
}
.scroll-cue{
  position:fixed; right:2rem; bottom:2rem; z-index:400;
  display:flex; align-items:center; gap:.7rem; font-family:var(--f-accent);
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gray);
}
.scroll-cue .ln{ width:1px; height:46px; background:linear-gradient(var(--gray),transparent); position:relative; overflow:hidden; }
.scroll-cue .ln::after{ content:''; position:absolute; top:-46px; left:0; width:100%; height:46px; background:linear-gradient(var(--yellow),transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ top:-46px; } 100%{ top:46px; } }
@media (max-width:760px){ .scroll-cue{ right:1.2rem; bottom:1.2rem; } }

/* ---------- about (solid section, no webgl bleed-through) ----------
   Full-viewport height: while #about is pinned (see js/main-landing.js) the
   text stage below needs to center against the WHOLE screen, not just a box
   squeezed under the eyebrow, so the section itself is sized to the viewport
   and the eyebrow is pulled out of flow into a corner overlay. */
#about{
  position:relative; z-index:5; background:var(--charcoal);
  height:100svh; overflow:hidden;
}
.about-grid{ position:relative; height:100%; }
.about-head{ position:absolute; top:clamp(7rem,13vw,9.5rem); left:50%; transform:translateX(-50%); z-index:2; }
.about-head .eyebrow{ justify-content:center; }
/* masked label swap: "Nosotros" slides out upward, "Valores" slides in from
   below — both driven by the same scroll progress as the mission/vision cards
   fading in (see js/main-landing.js), so the label changes right as the cards
   arrive rather than staying stuck on "Nosotros". */
.eyebrow-mask{ position:relative; overflow:hidden; display:inline-block; height:1.1em; }
.eyebrow-text{ display:block; line-height:1.1; }
.eyebrow-text-alt{ position:absolute; top:0; left:0; width:max-content; transform:translateY(100%); }
.about-lead{
  color:var(--white); font-weight:500;
  font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.28;
  text-align:center; max-width:34ch; margin:0 auto;
}

/* ---------- about sticky stage ----------
   Pinned by JS for a long scroll span: text 1 reveals word by word, holds,
   fades out; text 2 (now centered/big like text 1, not the old small
   bottom-right note) does the same; then the mission/vision cards fade + rise
   into place. All three panels sit at inset:0 of the full-screen section, so
   each one centers against the entire viewport, and the sequence reads as one
   continuous stage rather than separate layouts. */
.about-sticky-stage{ position:absolute; inset:0; }
.stage-panel{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding-inline:clamp(1.2rem,5vw,3rem);
  opacity:0; pointer-events:none;
}
#stagePanel1{ opacity:1; pointer-events:auto; }

.mv-cards{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.2rem,3vw,2rem);
  width:100%;
}
.mv-card{
  position:relative; z-index:1;
  flex:1 1 280px; max-width:380px;
  border:1px solid rgba(249,195,0,.22); border-radius:20px;
  padding:clamp(1.6rem,3vw,2.4rem);
  text-align:left;
}
/* a small bright dot travels endlessly around the card's actual outline —
   offset-path:border-box traces this element's own (card-shaped, rounded)
   border exactly, so unlike a conic-gradient it never distorts on a
   non-square card; offset-anchor pins the glow (painted at 0,0 in the
   background) to the point riding that path. */
.mv-card::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle 9px at 0 0, var(--yellow) 0%, rgba(249,195,0,.7) 45%, transparent 72%);
  offset-path:border-box;
  offset-distance:0%;
  offset-anchor:0% 0%;
  offset-rotate:0deg;
  animation:mvBorderChase 3.6s linear infinite;
}
.mv-card:nth-child(2)::before{ animation-delay:-1.8s; }
@keyframes mvBorderChase{ to{ offset-distance:100%; } }
@media (prefers-reduced-motion: reduce){ .mv-card::before{ animation:none; } }
.mv-card-eyebrow{
  display:block; font-family:var(--f-accent); font-weight:400; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.24em; color:var(--yellow); margin-bottom:.8rem;
}
.mv-card h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.15; color:var(--white);
  margin-bottom:.8rem;
}
.mv-card p{ color:#c7c7c7; font-weight:300; font-size:clamp(.92rem,1.15vw,1.05rem); line-height:1.55; }

@media (max-width:820px){
  .about-num{ display:none; }
  .about-lead{ max-width:none; }
}
@media (max-width:600px){
  #stagePanel3{
    align-items:flex-start;
    padding:clamp(9.6rem,25svh,10.5rem) .9rem .75rem;
    overflow:hidden;
  }
  .mv-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
    width:100%; max-width:340px;
    flex:none;
  }
  .mv-card{
    width:100%; max-width:none; min-width:0;
    padding:.8rem .9rem;
    border-radius:12px;
  }
  .mv-card-eyebrow{ margin-bottom:.35rem; font-size:.6rem; letter-spacing:.18em; }
  .mv-card h3{ margin-bottom:.38rem; font-size:clamp(.86rem,4vw,1rem); line-height:1.1; }
  .mv-card p{ font-size:clamp(.65rem,2.8vw,.74rem); line-height:1.3; }
}
@media (max-width:600px) and (max-height:680px){
  #stagePanel3{ padding-top:9.25rem; }
  .mv-cards{ gap:.4rem; }
  .mv-card{ padding:.65rem .75rem; }
  .mv-card p{ font-size:.63rem; line-height:1.23; }
}

.value-cards{
  display:grid; grid-template-columns:repeat(4, minmax(150px,1fr));
  gap:clamp(.7rem,1.8vw,1.1rem);
  width:100%; max-width:1140px;
}
.value-card{
  border:1px solid rgba(249,195,0,.22); border-radius:14px;
  padding:clamp(.9rem,1.8vw,1.3rem);
  text-align:left;
}
.value-card h4{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(.9rem,1.3vw,1.05rem); letter-spacing:.02em; color:var(--yellow);
  margin-bottom:.5rem;
}
.value-card p{ color:#c7c7c7; font-weight:300; font-size:clamp(.74rem,.92vw,.85rem); line-height:1.45; }
@media (max-width:900px){
  .value-cards{ grid-template-columns:repeat(2,1fr); max-width:520px; }
}
@media (max-width:600px){
  /* Values live inside a pinned, one-viewport stage. Anchor the grid below
     the sticky label instead of vertically centering an overflowing block. */
  #stagePanel4{
    align-items:flex-start;
    padding:clamp(9rem,23svh,10.25rem) .75rem .75rem;
    overflow:hidden;
  }
  .value-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(0,1fr));
    gap:clamp(.35rem,1.8vw,.55rem);
    width:100%; max-width:440px;
    height:calc(100svh - clamp(9.75rem,25svh,11rem));
    max-height:510px;
  }
  .value-card{
    min-width:0;
    padding:clamp(.55rem,2.5vw,.75rem);
    border-radius:10px;
    overflow:hidden;
  }
  .value-card h4{
    margin-bottom:.28rem;
    font-size:clamp(.7rem,3.25vw,.84rem);
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  .value-card p{
    font-size:clamp(.61rem,2.65vw,.72rem);
    line-height:1.28;
  }
}
@media (max-width:600px) and (max-height:680px){
  #stagePanel4{ padding-top:7.6rem; }
  .value-cards{ height:calc(100svh - 8.25rem); }
  .value-card{ padding:.48rem .55rem; }
  .value-card h4{ font-size:.68rem; margin-bottom:.2rem; }
  .value-card p{ font-size:.59rem; line-height:1.2; }
}

/* ---------- activaciones (infinite wheel carousel) ----------
   ~8 cards ride the rim of a large circle whose center sits just below the
   viewport; a continuous JS-driven rotation (see main-landing.js) sweeps them
   across the top arc, each card tangent-rotated to its position — a natural,
   perpetual "spinning on an axis" carousel rather than a flat side-scroll. */
#activaciones{
  position:relative; z-index:5; background:var(--charcoal);
  padding:clamp(4rem,10vw,6rem) 0 clamp(9rem,16vw,12rem);
  overflow:hidden;
}
.activations-wheel{
  position:relative; height:clamp(380px,46vw,560px);
  width:100%; overflow:hidden;
}
.activation-card{
  position:absolute; top:0; left:0;
  width:clamp(230px,27vw,350px); aspect-ratio:3/4;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 28% 14%, rgba(249,195,0,.24), transparent 55%),
    linear-gradient(155deg, #18140a 0%, #0c0a06 60%, #050300 100%);
  border:1px solid rgba(249,195,0,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(.9rem,1.6vw,1.3rem);
  will-change:transform,opacity;
}
.activation-card img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.activation-card::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(5,3,0,.85) 100%);
}
.activation-card .ac-num{
  position:relative; z-index:2;
  font-family:var(--f-display); font-weight:600; color:var(--yellow);
  font-size:.8rem; letter-spacing:.05em;
}
.activation-card .ac-label{
  position:relative; z-index:2;
  display:block; font-family:var(--f-accent); font-weight:400; text-transform:uppercase;
  font-size:.62rem; letter-spacing:.18em; color:var(--gray); margin-top:.3rem;
}
.activations-head{ text-align:center; margin-top:clamp(2.5rem,6vw,4rem); }
.activations-title{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.2;
  max-width:24ch; margin:0 auto; color:var(--white);
}
@media (max-width:760px){
  .activations-wheel{ height:clamp(300px,86vw,420px); }
  .activation-card{ width:clamp(175px,54vw,250px); }
}

/* ---------- ambient liquid grain (Nosotros/Valores only) ----------
   A continuously drifting, warm-tinted film-grain texture (feTurbulence)
   behind the Nosotros/Valores content — no longer tied to the pointer, and
   scoped to #about only: Activaciones stays flat charcoal/black.
   js/main-landing.js writes a single --liquid-opacity custom property on the
   page root, driven by scroll position — 0 through the hero, ramping to 1
   exactly as "Nosotros" fills the whole screen, fading out again on the way
   back up to the hero. */
#about{ position:relative; }
#about::before{
  content:'';
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--liquid-opacity, 0);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='wn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0.6 0.3 0 0 0 0.4 0.25 0 0 0 0.05 0.05 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wn)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  background-attachment: fixed;
  mix-blend-mode: screen;
  animation: liquidFlow 30s ease-in-out infinite alternate;
}
@keyframes liquidFlow{
  0%{ background-position: 0px 0px; }
  33%{ background-position: 90px 60px; }
  66%{ background-position: 160px 130px; }
  100%{ background-position: 40px 200px; }
}
@media (prefers-reduced-motion: reduce){
  #about::before{ animation:none; }
}

/* The slogan section sits between Nosotros and Activaciones, and opens still
   showing that same yellow grain (matching where Nosotros left off) right at
   its own top edge, fading to flat black further down — so by the time
   Activaciones begins (now flat black itself, no grain of its own) there's
   nothing left to seam against. This is a static, spatial mask (fixed to the
   section's own box) rather than a scroll-scrubbed opacity — a scroll-driven
   scalar fade applies the SAME opacity value across the whole section at any
   instant, so at the exact moment a boundary line is on screen, the section
   above it always reads opacity 1 while this one reads whatever the current
   scalar happens to be — a visible hard cut right at the seam. Anchoring the
   fade to the section's own top edge instead means the seam always matches,
   regardless of scroll position. */
#slogan::before{
  content:'';
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='wn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0.6 0.3 0 0 0 0.4 0.25 0 0 0 0.05 0.05 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wn)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  background-attachment: fixed;
  mix-blend-mode: screen;
  animation: liquidFlow 30s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, black 0, black 8vh, transparent 55vh);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 8vh, transparent 55vh);
}
@media (prefers-reduced-motion: reduce){
  #slogan::before{ animation:none; }
}

/* ---------- slogan sticky convergence ----------
   "Del insight" opens pinned to the top-left corner, "al impacto." to the
   bottom-right; js/main-landing.js scrubs both toward dead-center as the
   section scrolls, holds them together briefly, then releases the pin. */
#slogan{
  position:relative; z-index:5; background:var(--charcoal);
  height:100svh; overflow:hidden;
}
.slogan-stage{ position:relative; width:100%; height:100%; }
.slogan-word{
  position:absolute; margin:0; white-space:nowrap; line-height:.92;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(1.9rem,9vw,8.2rem);
  color:var(--white); will-change:transform;
}
.slogan-word.accent{ color:var(--yellow); }
.slogan-word-1{ top:clamp(6.5rem,11vw,8.5rem); left:6%; }
.slogan-word-2{ bottom:clamp(6rem,10vw,7.5rem); right:6%; }
.slogan-caption{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(90%,42ch); margin:0; text-align:center;
  font-size:clamp(.8rem,1.1vw,.95rem); line-height:1.6; font-weight:300;
  color:#9c9c9c; letter-spacing:.01em;
}

/* ---------- "enter experience" audio gate ----------
   Browsers won't let audio autoplay with sound until a real user gesture, so
   this full-screen gate turns that requirement into a deliberate moment: it
   sits above everything (including the preloader) once the preloader clears,
   and the one click both starts the track and reveals the hero. */
.audio-gate{
  position:fixed; inset:0; z-index:2500; background:var(--void);
  display:none; align-items:center; justify-content:center;
}
.audio-gate-inner{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; text-align:center; }
.audio-gate-mark{
  width:64px; height:64px;
  overflow:visible;
  filter:drop-shadow(0 0 8px rgba(249,195,0,.22));
  animation:agMarkPulse 2.4s ease-in-out infinite;
}
.audio-gate-mark circle{
  transform-box:view-box;
  transform-origin:center;
  will-change:transform,stroke-dashoffset;
}
.audio-gate-mark circle:nth-child(1){ animation:agArcOuter 5.2s linear infinite; }
.audio-gate-mark circle:nth-child(2){ animation:agArcMiddle 3.8s linear infinite reverse; }
.audio-gate-mark circle:nth-child(3){ animation:agArcInner 2.8s ease-in-out infinite alternate; }
@keyframes agMarkPulse{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(249,195,0,.18)); }
  50%{ filter:drop-shadow(0 0 13px rgba(249,195,0,.46)); }
}
@keyframes agArcOuter{
  to{ transform:rotate(360deg); stroke-dashoffset:-72; }
}
@keyframes agArcMiddle{
  from{ transform:rotate(40deg); stroke-dashoffset:0; }
  to{ transform:rotate(400deg); stroke-dashoffset:-54; }
}
@keyframes agArcInner{
  from{ transform:rotate(-30deg); stroke-dashoffset:0; }
  to{ transform:rotate(210deg); stroke-dashoffset:-38; }
}
.audio-gate-label{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(1.1rem,2.2vw,1.5rem); color:var(--white);
}
.audio-gate-progress{
  width:clamp(180px,22vw,260px); height:2px; border-radius:2px;
  background:rgba(249,195,0,.16); overflow:hidden;
}
.audio-gate-progress-fill{
  width:0%; height:100%; background:var(--yellow); border-radius:2px;
  transition:width .2s linear;
}
.audio-gate-start-btn{
  display:inline-flex; align-items:center; padding:1.1rem 2.6rem;
  border-radius:100px; background:var(--yellow); color:#0a0a0a;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:.9rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.audio-gate-start-btn:hover{ transform:scale(1.04); box-shadow:0 0 32px -8px rgba(249,195,0,.55); }
@media (prefers-reduced-motion: reduce){
  .audio-gate-mark,
  .audio-gate-mark circle{ animation:none; }
}

/* ---------- mute toggle ---------- */
.mute-btn{
  position:fixed; left:clamp(1.2rem,3vw,2rem); bottom:clamp(1.2rem,3vw,2rem); z-index:400;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(249,195,0,.5);
  background:rgba(5,3,0,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; color:var(--yellow);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.mute-btn:hover{ border-color:var(--yellow); background:rgba(249,195,0,.14); }
.mute-btn .mute-icon-off{ display:none; }
.mute-btn.is-muted .mute-icon-on{ display:none; }
.mute-btn.is-muted .mute-icon-off{ display:block; }

/* ---------- "nuestros servicios" (sticky stacking cards) ----------
   Six cards stack one on top of the next using plain CSS position:sticky —
   deliberately NOT a GSAP ScrollTrigger pin. Native sticky is browser scroll
   behavior, not scroll-jacking: there's no JS freezing the scroll or fighting
   the user's input, which is exactly what kept causing the "jump" complaints
   in the pinned mask-reveal this page used to have (see #process below).
   Each .service-sticky participates directly in .services-stack (the wrapper
   uses display:contents), so cards stay pinned inside one shared containing
   block. Later cards are later in both DOM order and z-index, letting every
   new card land on top while a small edge of the previous cards remains. */
#services{
  position:relative; z-index:5; background:var(--charcoal);
  padding-top:clamp(5rem,11vw,7rem);
}
#services > .process-head{
  position:sticky;
  top:clamp(7rem,13vw,9.5rem);
  z-index:20;
  margin-bottom:0;
  pointer-events:none;
}
#services > .process-head.is-released{
  position:absolute;
  left:0;
  right:0;
}
#services > .process-head .eyebrow{
  width:max-content;
  margin-inline:auto;
  padding:.55rem 1rem;
  border-radius:999px;
  background:var(--charcoal);
}
.services-stack{
  --service-step:16px;
  position:relative;
  padding-bottom:0;
}
#services.has-released-heading .services-stack{
  margin-top:var(--services-heading-space, 0px);
}
/* The wrappers must not become the sticky containing blocks. With `contents`,
   every sticky panel is constrained by the complete stack, so previous cards
   remain parked while the following cards land above them. */
.service-wrap{ display:contents; }
.service-sticky{
  --stack-index:0;
  position:sticky;
  top:calc(var(--stack-index) * var(--service-step));
  height:calc(100svh - (var(--stack-index) * var(--service-step)));
  min-height:520px;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(1.2rem,4vw,2rem);
}
/* each card sticks a little lower than the one before, so a sliver of every
   earlier card in the pile still peeks out past the current one's top edge —
   without this offset every card lands in the exact same spot and simply
   replaces the last one, which doesn't read as a "stack" at all. */
.service-wrap:nth-child(1) .service-sticky{ --stack-index:0; z-index:1; }
.service-wrap:nth-child(2) .service-sticky{ --stack-index:1; z-index:2; }
.service-wrap:nth-child(3) .service-sticky{ --stack-index:2; z-index:3; }
.service-wrap:nth-child(4) .service-sticky{ --stack-index:3; z-index:4; }
.service-wrap:nth-child(5) .service-sticky{ --stack-index:4; z-index:5; }
.service-wrap:nth-child(6) .service-sticky{ --stack-index:5; z-index:6; }
.service-card{
  position:relative; width:92vw; max-width:920px; flex:none; min-height:min(58vh,500px);
  border-radius:28px; padding:clamp(2.2rem,4vw,3.2rem);
  background:
    linear-gradient(155deg, rgb(24,19,4) 0%, rgb(10,10,10) 55%, #0a0a0a 100%) padding-box,
    linear-gradient(135deg, rgba(249,195,0,.95), rgba(199,120,24,.45) 45%, rgba(249,195,0,0) 78%) border-box;
  border:1px solid transparent;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 0 60px -20px rgba(249,195,0,.28);
  display:flex; flex-direction:column; justify-content:flex-end; gap:1rem;
}
.service-icon-wrap{
  width:clamp(56px,6vw,66px); height:clamp(56px,6vw,66px); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none;
  background:rgba(249,195,0,.08); border:1px solid rgba(249,195,0,.25);
  margin-bottom:auto;
}
.service-icon{ width:46%; height:46%; color:var(--yellow); }
.service-num{
  font-family:var(--f-accent); font-weight:400; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.22em; color:var(--yellow);
}
.service-card h3{
  font-family:var(--f-display); font-weight:700; text-transform:none;
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.1; color:var(--white); margin:0;
}
.service-card p{
  font-family:var(--f-body); font-weight:300; color:#c7c7c7;
  font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6; max-width:60ch; margin:0;
}
@media (max-width:700px){
  .services-stack{ --service-step:10px; padding-bottom:0; }
  .service-sticky{
    height:calc(100svh - (var(--stack-index) * var(--service-step)));
    min-height:440px;
    padding-inline:1rem;
  }
  .service-card{
    width:100%;
    min-height:clamp(360px,68svh,520px);
    max-height:calc(100svh - 5.5rem);
    border-radius:20px;
    padding:clamp(1.4rem,5vw,2rem);
    gap:.75rem;
  }
  .service-icon-wrap{ width:52px; height:52px; }
  .service-card h3{ font-size:clamp(1.55rem,7vw,2.1rem); }
  .service-card p{ font-size:clamp(.9rem,3.8vw,1rem); line-height:1.5; }
}
@media (max-height:620px){
  .service-sticky{ min-height:360px; }
  .service-card{ min-height:310px; max-height:calc(100svh - 3rem); }
  .service-icon-wrap{ width:44px; height:44px; }
  .service-card p{ font-size:.88rem; }
  /* on short viewports (landscape phones especially) the card's centered
     content can start well above where the sticky title sits at its normal
     clamp(7rem,13vw,9.5rem) offset — the "Nuestros servicios" pill would
     float on top of the card itself. Pull it up near the very top edge so
     there's always clearance regardless of how short the card ends up. */
  #services > .process-head{ top:1rem; }
}

/* ---------- "cómo trabajamos" (process card carousel) ----------
   A plain, non-pinned infinite marquee of five steps — no scroll-jacking on
   purpose: this section replaced an earlier pinned mask-reveal sequence that
   kept reading as a jarring "jump" at the section boundary. The track holds
   the 5 cards twice back to back; js/main-landing.js runs one continuous,
   linear translateX loop from 0 to -50%, which is exactly one full set's
   width — so the wrap-around is invisible and the loop never has to reset. */
#process{
  position:relative; z-index:5; background:var(--charcoal);
  padding:clamp(5rem,11vw,7rem) 0 clamp(4rem,8vw,5.5rem);
  overflow:hidden;
}
.process-head{ text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.process-carousel{ position:relative; overflow:hidden; width:100%; }
.process-glow{
  position:absolute; top:0; left:0; width:420px; height:420px;
  border-radius:50%; pointer-events:none; z-index:3;
  background:radial-gradient(circle, rgba(249,195,0,.26) 0%, rgba(249,195,0,.08) 45%, transparent 72%);
  filter:blur(38px); mix-blend-mode:screen;
  opacity:0; will-change:transform;
}
.process-track{
  display:flex; gap:clamp(1rem,2vw,1.5rem); width:max-content;
  will-change:transform; cursor:grab; user-select:none; touch-action:pan-y;
}
.process-track:active{ cursor:grabbing; }
.process-card{
  position:relative; border-radius:22px; flex:0 0 clamp(240px,24vw,320px);
  padding:clamp(1.6rem,3vw,2rem) clamp(1.3rem,2.4vw,1.7rem);
  background:
    linear-gradient(155deg, rgba(24,19,4,.96) 0%, rgba(10,10,10,.98) 55%, #0a0a0a 100%) padding-box,
    linear-gradient(135deg, rgba(249,195,0,.95), rgba(199,120,24,.45) 45%, rgba(249,195,0,0) 78%) border-box;
  border:1px solid transparent;
  box-shadow:0 0 46px -24px rgba(249,195,0,.4);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.7rem;
  height:clamp(360px,42vw,460px);
}
.process-icon-wrap{
  width:clamp(46px,5vw,54px); height:clamp(46px,5vw,54px); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none;
  background:rgba(249,195,0,.08); border:1px solid rgba(249,195,0,.25);
  margin-bottom:auto;
}
.process-icon{ width:44%; height:44%; color:var(--yellow); }
.process-num{
  font-family:var(--f-accent); font-weight:400; text-transform:uppercase;
  font-size:.7rem; letter-spacing:.22em; color:var(--yellow);
}
.process-card h3{
  font-family:var(--f-display); font-weight:700; text-transform:none;
  font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.1; color:var(--white); margin:0;
}
.process-card p{
  font-family:var(--f-body); font-weight:300; color:#c7c7c7;
  font-size:clamp(.86rem,1.05vw,.98rem); line-height:1.55; margin:0;
}
.process-foot{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.process-title{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.2;
  max-width:26ch; margin:0 auto; color:var(--white);
}
.process-title-line{ display:block; }

/* ---------- footer ---------- */
#site-footer{
  position:relative; z-index:5; background:var(--charcoal);
  padding:clamp(4.5rem,10vw,7rem) 0 clamp(1.6rem,3vw,2.2rem);
  overflow:hidden;
}
/* same warm grain texture as #about ("Nosotros"), just always on — the
   footer isn't scroll-faded in/out like that one, so opacity is a flat 1
   instead of reading the --liquid-opacity variable. */
#site-footer::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='wn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0.6 0.3 0 0 0 0.4 0.25 0 0 0 0.05 0.05 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wn)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  background-attachment: fixed;
  mix-blend-mode: screen;
  animation: liquidFlow 30s ease-in-out infinite alternate;
}
#site-footer > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  #site-footer::before{ animation:none; }
}
.footer-cta{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(1.8rem,3.5vw,2.6rem);
  padding-bottom:clamp(3.5rem,7vw,5rem);
}
.footer-headline{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.05; color:var(--white);
  font-size:clamp(2.2rem,5.6vw,4.4rem); max-width:16ch;
}
.footer-cta-btn{
  display:inline-flex; align-items:center; padding:1.1rem 2.4rem;
  border-radius:100px; background:var(--yellow); color:#0a0a0a;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:.85rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.footer-cta-btn:hover{ transform:scale(1.04); box-shadow:0 0 32px -8px rgba(249,195,0,.55); }
.footer-bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem 1.6rem;
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-self:start; }
.footer-links a{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gray); }
.footer-links a:hover{ color:var(--white); }
.footer-email{ font-family:var(--f-display); font-weight:600; font-size:.85rem; color:var(--yellow); justify-self:center; }
.footer-loc{ font-size:.74rem; letter-spacing:.04em; color:#5c5c5c; justify-self:end; }
@media (max-width:700px){
  #process{ padding-top:7.5rem; }
  .footer-bar{ grid-template-columns:1fr; text-align:center; }
  .footer-links, .footer-email, .footer-loc{ justify-self:center; }
}
@media (max-width:760px){ .mute-btn{ left:1.2rem; bottom:1.2rem; } }