/* ============================================================================
   SoundMeans — hoja de estilos
   Identidad: turquesa #0CE4C8 · petróleo #012F43 · fondo oscuro
   Tipografías: Barlow Condensed (titulares) · Lato (texto)
   ============================================================================ */

/* ------------------------------------------------------------------- fuentes */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/lato-400.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/lato-700.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/lato-900.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/barlow-condensed-500.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');}

/* ------------------------------------------------------------------ variables */
:root{
  --accent:      #0CE4C8;
  --accent-soft: rgba(12,228,200,.12);
  --accent-line: rgba(12,228,200,.35);
  --petrol:      #012F43;
  --bg:          #0d0e10;
  --panel:       #131517;
  --card:        #191c1f;
  --border:      #26292d;
  --text:        #e9ebed;
  --muted:       #9aa2a8;
  --danger:      #f42958;
  --warn:        #fcb900;
  --on-accent:   #03231f;
  --radius:      18px;
  --font-head:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:   'Lato', 'Helvetica Neue', Arial, sans-serif;
  --header-h:    74px;
  /* curvas de animación (estilo Apple: suaves y largas) */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-io:     cubic-bezier(.65, 0, .35, 1);
}

/* --------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top, 0px) + 10px);
  -webkit-text-size-adjust:100%;
}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.05;margin:0;}
p{margin:0 0 1em;}
::selection{background:var(--accent);color:var(--on-accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
@supports (scrollbar-color: red blue){
  html{scrollbar-color:#3a3f44 var(--bg);}
}

/* grano sutil sobre toda la página (textura premium) */
body::after{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.028;
}

.container{
  width:min(1200px, 100% - clamp(2.5rem, 8vw, 4rem));
  margin-inline:auto;
}
.section{padding-block:clamp(4.5rem, 9vw, 7rem);position:relative;}
.section-alt{background:var(--panel);}

/* cabecera de sección */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font:700 .78rem/1 var(--font-body);
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--accent);border-radius:2px;
  transform-origin:left center;
}
.reveal .eyebrow::before, .eyebrow.reveal::before{transform:scaleX(0);transition:transform .8s var(--ease) .25s;}
.reveal.in .eyebrow::before, .eyebrow.reveal.in::before{transform:scaleX(1);}
.section-head h2{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  font-weight:700;text-transform:uppercase;letter-spacing:.015em;
  color:#fff;
}
.section-head .lead{
  max-width:640px;color:var(--muted);margin-top:1rem;font-size:1.02rem;
}
.section-head{margin-bottom:clamp(2.2rem, 5vw, 3.2rem);}
.section-head.center{text-align:center;}
.section-head.center .lead{margin-inline:auto;}
.section-head.center .eyebrow{justify-content:center;}

/* accesibilidad */
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:2200;
  background:var(--accent);color:var(--on-accent);
  padding:.7em 1.2em;border-radius:8px;font-weight:700;
  transition:top .2s;
}
.skip-link:focus{top:1rem;}

/* ------------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:700 .95rem/1 var(--font-body);
  padding:.95em 1.7em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  position:relative;overflow:hidden;
  transform:translate(var(--tx,0), var(--ty,0));
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             background .3s, border-color .3s, color .3s;
}
.btn svg{width:1.05em;height:1.05em;transition:transform .45s var(--ease);}
.btn:hover svg{transform:translate(2px,-2px);}
/* brillo que recorre el botón al pasar el cursor */
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
  pointer-events:none;
}
.btn:hover::after{transform:translateX(120%);}
.btn-solid{background:var(--accent);color:var(--on-accent);}
.btn-solid:hover{box-shadow:0 14px 38px rgba(12,228,200,.3);}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost::after{background:linear-gradient(115deg, transparent 30%, rgba(12,228,200,.14) 50%, transparent 70%);}
.btn-dark{background:#0d0e10;color:#fff;}
.btn-dark:hover{box-shadow:0 14px 34px rgba(1,47,67,.5);}
.btn-outline-dark{border-color:rgba(3,35,31,.5);color:var(--on-accent);}
.btn-outline-dark:hover{border-color:#03231f;}
.btn-outline-dark::after{background:linear-gradient(115deg, transparent 30%, rgba(3,35,31,.12) 50%, transparent 70%);}

/* ------------------------------------------------------------------ cabecera */
#site-header{
  /* sticky en lugar de fixed: en iOS el compositor lo mantiene pegado
     durante el scroll (fixed "se despega" al plegarse la barra de Safari) */
  position:-webkit-sticky;position:sticky;top:0;z-index:100;
  background:var(--bg);
  transition:background .3s, border-color .3s, transform .5s var(--ease), opacity .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* "tapón" oscuro que se extiende por encima de la cabecera: evita que el
   contenido se transparente por la barra translúcida de Safari en iOS o
   durante el rebote del scroll */
#site-header::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;
  background:var(--bg);
}
#site-header.scrolled{
  background:rgba(13,14,16,.8);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:rgba(255,255,255,.06);
}
.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;position:relative;z-index:130;}
.brand img{height:30px;width:auto;transition:transform .45s var(--ease);}
.brand:hover img{transform:scale(1.04);}
#site-nav{display:flex;align-items:center;gap:.4rem;}
#site-nav ul{
  display:flex;align-items:center;gap:.2rem;
  list-style:none;margin:0;padding:0;
}
#site-nav ul a{
  display:block;padding:.55em .85em;border-radius:8px;
  font:700 .93rem/1 var(--font-body);
  color:#c9ced2;position:relative;
  transition:color .25s;
}
/* subrayado que crece al pasar / al estar activo */
#site-nav ul a::after{
  content:"";position:absolute;left:.85em;right:.85em;bottom:.28em;
  height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease);
}
#site-nav ul a:hover{color:#fff;}
#site-nav ul a:hover::after, #site-nav ul a.active::after{transform:scaleX(1);}
#site-nav ul a.active{color:#fff;}
.nav-cta{margin-left:.8rem;}
.nav-cta .btn{padding:.75em 1.4em;font-size:.88rem;}

#nav-toggle{
  display:none;
  background:none;border:0;padding:.6rem;cursor:pointer;
  position:relative;z-index:130;
}
#nav-toggle span{
  display:block;width:24px;height:2px;background:#fff;border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s;
}
#nav-toggle span + span{margin-top:6px;}
.nav-open #nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-open #nav-toggle span:nth-child(2){opacity:0;}
.nav-open #nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------------------------------------------------------------------- hero */
.hero{
  position:relative;overflow:clip;
  min-height:calc(100svh - var(--header-h));
  display:grid;align-items:center;
  padding-top:2.5rem;
  padding-bottom:5rem;
  background:
    radial-gradient(640px 440px at 78% 28%, rgba(12,228,200,.08), transparent 70%),
    radial-gradient(560px 440px at 4% 90%, rgba(1,47,67,.5), transparent 72%),
    var(--bg);
}

/* partículas: iconos SoundMeans flotando (como en la web original) */
.hero-snow{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.hero-snow img{
  position:absolute;height:auto;
  animation:snow-float 10s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes snow-float{
  from{transform:translateY(14px) rotate(-6deg);}
  to{transform:translateY(-26px) rotate(8deg);}
}

.hero-content{position:relative;will-change:transform,opacity;}
.hero-grid{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.hero-visual{
  position:relative;
  animation:levitate 7s ease-in-out infinite alternate;
}
.hero-visual img{
  width:100%;max-height:74svh;object-fit:contain;
  border-radius:26px;
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
  will-change:transform;
}
@keyframes levitate{
  from{transform:translateY(8px);}
  to{transform:translateY(-12px);}
}
.hero-pill{
  display:inline-flex;align-items:center;gap:.6em;
  border:1px solid var(--accent-line);border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font:700 .78rem/1 var(--font-body);
  letter-spacing:.16em;text-transform:uppercase;
  padding:.65em 1.2em;margin-bottom:1.7rem;
  transition:border-color .3s, background .3s, transform .45s var(--ease);
}
a.hero-pill:hover{
  border-color:var(--accent);
  background:rgba(12,228,200,.18);
  transform:translateY(-2px);
}
.hero-pill::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(12,228,200,.18);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(12,228,200,.45);}
  70%,100%{box-shadow:0 0 0 9px rgba(12,228,200,0);}
}
.hero h1{
  font-size:clamp(3.1rem, 5.8vw, 5.4rem);
  font-weight:700;text-transform:uppercase;letter-spacing:.012em;
  color:#fff;
}
.hero h1 em{font-style:normal;}
.hero h1 .accent .wi, .hero h1 em{
  color:var(--accent);
  background:linear-gradient(100deg, var(--accent), #7ff5e6 55%, var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero .sub{
  max-width:560px;
  color:#c6cccf;
  font-size:clamp(1.08rem, 1.8vw, 1.3rem);
  margin-top:1.5rem;
}
.hero .sub a{
  color:#fff;
  font-family:var(--font-head);font-weight:600;
  font-size:1.12em;letter-spacing:.04em;
  border-bottom:2px solid var(--accent);
  transition:color .25s;
}
.hero .sub a:hover{color:var(--accent);}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem;}
.stat .num{
  font:700 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--font-head);
  color:var(--accent);letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.stat .lbl{
  display:block;margin-top:.4rem;
  font:700 .76rem/1.4 var(--font-body);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  max-width:14em;
}

/* palabras del titular: máscara + subida */
.w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
.wi{display:inline-block;will-change:transform;}
body:not(.loaded) .hero h1 .wi{transform:translateY(112%);}
.hero h1 .wi{transition:transform 1.1s var(--ease);}
body.loaded .hero h1 .wi{transform:translateY(0);}

/* entrada escalonada del resto del hero */
.h-in{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms);}
body.loaded .h-in{opacity:1;transform:none;}

/* indicador de scroll */
.scroll-cue{
  position:absolute;left:50%;bottom:2.1rem;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(255,255,255,.25);border-radius:14px;
  pointer-events:none;
}
.scroll-cue::before{
  content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;
  border-radius:4px;background:var(--accent);transform:translateX(-50%);
  animation:cue 2s var(--ease-io) infinite;
}
@keyframes cue{
  0%{transform:translate(-50%,0);opacity:1;}
  70%{transform:translate(-50%,14px);opacity:0;}
  100%{transform:translate(-50%,0);opacity:0;}
}

/* --------------------------------------------------------------- claim / intro */
.claim{
  padding-block:clamp(4.5rem, 10vw, 8rem);
  border-block:1px solid var(--border);background:var(--panel);
  position:relative;overflow:clip;
}
.claim p{
  max-width:920px;margin:0 auto;text-align:center;
  font:500 clamp(1.5rem, 3.2vw, 2.3rem)/1.4 var(--font-head);
  color:#f2f4f5;letter-spacing:.01em;
}
.claim .w{padding-bottom:.12em;margin-bottom:-.12em;}
.claim .wi{transition:opacity .3s linear;opacity:.14;}
.claim .accent .wi{color:var(--accent);}

/* cifras clave bajo el texto */
.claim-stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.8rem, 7vw, 5.5rem);
  margin-top:clamp(2.6rem, 6vw, 4rem);
  text-align:center;
}
.claim-stats .stat .lbl{max-width:none;}

/* ------------------------------------------------------------------- novedad */
.novedad{background:var(--accent);color:var(--on-accent);overflow:clip;}
.novedad-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 5vw, 4rem);align-items:center;
  position:relative;
}
.novedad .eyebrow{color:var(--on-accent);}
.novedad .eyebrow::before{background:var(--on-accent);}
.novedad h2{
  font-size:clamp(2.6rem, 5.4vw, 4rem);
  font-weight:700;text-transform:uppercase;color:var(--on-accent);
}
.novedad p{color:rgba(3,35,31,.82);max-width:520px;margin-top:1.1rem;font-size:1.05rem;}
.novedad-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem;}
.novedad-media{position:relative;}
.novedad-media img{
  position:relative;
  width:100%;max-height:500px;object-fit:contain;
  mix-blend-mode:multiply;   /* el fondo blanco de la foto desaparece sobre el turquesa */
  will-change:transform;
}
/* revelado con barrido (el clip va en la imagen: si se aplicara al contenedor
   observado, IntersectionObserver nunca lo vería intersecar) */
.reveal-clip img{clip-path:inset(0 0 0 100%);transition:clip-path 1.2s var(--ease) .15s;}
.reveal-clip.in img{clip-path:inset(0 0 0 0);}

/* -------------------------------------------------------------- cuenta atrás */
.countdown{
  display:inline-flex;flex-wrap:wrap;align-items:center;
  gap:.6rem 1.4rem;
  margin-top:1.8rem;
  border:1px solid var(--accent-line);border-radius:18px;
  background:var(--accent-soft);
  padding:.95rem 1.5rem;
}
.cd-label{
  font:700 .8rem/1.3 var(--font-body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.cd-timer{display:flex;align-items:baseline;gap:.55rem;}
.cd-seg{display:flex;flex-direction:column;align-items:center;min-width:2.6ch;}
.cd-num{
  font:700 clamp(1.6rem, 3vw, 2.1rem)/1 var(--font-head);
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.cd-lbl{
  margin-top:.3rem;
  font:700 .62rem/1 var(--font-body);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.cd-sep{
  font:700 1.5rem/1 var(--font-head);color:var(--accent);
  align-self:flex-start;
}

/* --------------------------------------------------------------- promociones */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:1.6rem;
}
/* con 4 packs, una sola fila en escritorio */
@media (min-width: 1100px){
  .promo-grid.cols-4{grid-template-columns:repeat(4, 1fr);}
}
.pack{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  cursor:pointer;
  transition:transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease);
}
.pack:hover{
  transform:translateY(-8px);
  border-color:var(--accent-line);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.pack-media{
  position:relative;background:#fff;
  aspect-ratio:4/3;
  display:grid;place-items:center;
  padding:1.4rem;
  overflow:hidden;
}
.pack-media img{
  max-height:100%;object-fit:contain;
  transition:transform .9s var(--ease);
}
.pack:hover .pack-media img{transform:scale(1.05);}
.pack[data-estado="agotado"] .pack-media img{filter:grayscale(.55);opacity:.8;}
.badge{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  font:600 .82rem/1 var(--font-head);
  letter-spacing:.14em;text-transform:uppercase;
  padding:.5em 1em;border-radius:999px;
}
.badge.ok{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px rgba(12,228,200,.35);}
.pack--tinted .badge.ok{background:#03231f;color:var(--accent);box-shadow:0 6px 18px rgba(3,35,31,.3);}
.badge.off{background:var(--danger);color:#fff;}
.badge.soon{background:var(--warn);color:#231a00;}
.pack-body{
  padding:1.5rem 1.5rem 1.6rem;
  display:flex;flex-direction:column;gap:.85rem;flex:1;
}
.pack-body h3{
  font-size:1.55rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;
}
.pack-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.35rem;
}
.pack-list li{
  position:relative;padding-left:1.15rem;
  color:var(--muted);font-size:.95rem;line-height:1.45;
}
.pack-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border-radius:2px;
  background:var(--accent);opacity:.85;
}
.pack-precio{
  font:700 1.7rem/1 var(--font-head);
  color:var(--accent);letter-spacing:.02em;margin:0;
}
.pack-nota{color:var(--muted);font-size:.88rem;font-style:italic;margin:0;}
.pack-cta{margin-top:auto;}
.pack-pdf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:.15rem;
  color:var(--muted);font-size:.88rem;font-weight:700;
  transition:color .25s;
}
.pack-pdf svg{width:15px;height:15px;}
.pack-pdf:hover{color:var(--accent);}
.promo-empty{
  grid-column:1/-1;text-align:center;color:var(--muted);
  border:1px dashed var(--border);border-radius:var(--radius);
  padding:3rem 1.5rem;margin:0;
}
.promo-foot{
  margin-top:1.7rem;color:var(--muted);font-size:.85rem;text-align:center;
}
/* pistas de scroll horizontal (solo móvil) */
.promo-swipe-hint{display:none;}
.promo-dots{display:none;}

/* ------------------------------------------------------------------ servicios */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:1.4rem;
}
.service{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  transition:transform .6s var(--ease), border-color .4s;
}
.service:hover{transform:translateY(-6px);border-color:var(--accent-line);}
.service .icon{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);
  margin-bottom:1.2rem;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.service:hover .icon{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 26px rgba(12,228,200,.2);}
.service .icon svg{width:24px;height:24px;}
.service h3{
  font-size:1.45rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;margin-bottom:.6rem;
}
.service p{color:var(--muted);font-size:.97rem;margin:0;}

/* ------------------------------------------------------------------- contacto */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:1.4rem;
}
.contact-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.8rem 1.6rem;
  transition:transform .6s var(--ease), border-color .4s;
}
.contact-card:hover{transform:translateY(-6px);border-color:var(--accent-line);}
.contact-card h3{
  font-size:1.5rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;
}
.c-cargo{
  margin:.4rem 0 0;
  font:700 .72rem/1 var(--font-body);
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
}
.c-links{
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.65rem;
}
.c-link{
  display:inline-flex;align-items:center;gap:.6em;
  color:var(--muted);font-size:.95rem;line-height:1.3;
  transition:color .25s, transform .4s var(--ease);
  word-break:break-all;
}
.c-link svg{width:17px;height:17px;flex:none;color:var(--accent);}
.c-link:hover{color:#fff;transform:translateX(3px);}
.c-link.c-mail{color:var(--text);}
.c-link.c-mail:hover{color:var(--accent);}

/* foco de luz que sigue el cursor (tarjetas .spot) */
@media (pointer:fine){
  .spot{position:relative;}
  .spot::before{
    content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:1;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(12,228,200,.1), transparent 65%);
    opacity:0;transition:opacity .45s var(--ease);
    pointer-events:none;
  }
  .spot:hover::before{opacity:1;}
  .spot > *{position:relative;z-index:2;}
}

/* -------------------------------------------------------------- colaboradores */
.partners{
  padding-block:clamp(3rem, 6vw, 4.5rem);
  border-top:1px solid var(--border);
  background:var(--panel);
  overflow:clip;
}
.partners h2{
  text-align:center;
  font:700 .78rem/1 var(--font-body);
  letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  margin-bottom:2.4rem;
}
.partners-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(2.5rem, 7vw, 5.5rem);
}
.partner{display:flex;}
.partner img{
  height:34px;width:auto;max-width:none;
  opacity:.55;transition:opacity .3s;
}
.partner:hover img{opacity:1;}

/* -------------------------------------------------------------- visor de PDF */
.pdf-modal{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:2rem;
  visibility:hidden;pointer-events:none;
}
.pdf-modal.show{visibility:visible;pointer-events:auto;}
.pdf-backdrop{
  position:absolute;inset:0;
  background:rgba(8,9,11,.72);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .45s var(--ease);
}
.pdf-modal.show .pdf-backdrop{opacity:1;}
.pdf-dialog{
  position:relative;
  width:min(940px, 94vw);height:min(88svh, 920px);
  display:flex;flex-direction:column;
  background:#141618;border:1px solid var(--border);border-radius:20px;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  opacity:0;transform:translateY(28px) scale(.95);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.pdf-modal.show .pdf-dialog{opacity:1;transform:none;}
.pdf-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1rem .85rem 1.4rem;
  border-bottom:1px solid var(--border);
}
.pdf-head h4{
  font:600 1.3rem/1.2 var(--font-head);
  text-transform:uppercase;letter-spacing:.02em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pdf-actions{display:flex;gap:.5rem;flex:none;}
.pdf-btn{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.55em .95em;border-radius:999px;
  border:1px solid var(--border);background:transparent;
  color:#cfd4d7;font:700 .85rem/1 var(--font-body);
  cursor:pointer;transition:color .25s, border-color .25s;
}
.pdf-btn:hover{color:var(--accent);border-color:var(--accent-line);}
.pdf-btn svg{width:14px;height:14px;}
.pdf-body{flex:1;background:#2b2e31;}
#pdf-frame{width:100%;height:100%;border:0;display:block;}
body.pdf-abierto{overflow:hidden;}

/* ------------------------------------------------------- solicitud de oferta */
.of-modal{
  position:fixed;inset:0;z-index:320;
  display:grid;place-items:center;padding:1.4rem;
  visibility:hidden;pointer-events:none;
}
.of-modal.show{visibility:visible;pointer-events:auto;}
.of-backdrop{
  position:absolute;inset:0;
  background:rgba(8,9,11,.72);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .45s var(--ease);
}
.of-modal.show .of-backdrop{opacity:1;}
.of-dialog{
  position:relative;
  width:min(460px, 100%);
  background:#141618;border:1px solid var(--border);border-radius:22px;
  padding:2.1rem 1.9rem 1.7rem;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.of-modal.show .of-dialog{opacity:1;transform:none;}
.of-x{
  position:absolute;top:.9rem;right:.9rem;
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:#cfd4d7;
  cursor:pointer;transition:color .25s, border-color .25s;
}
.of-x:hover{color:var(--accent);border-color:var(--accent-line);}
.of-x svg{width:15px;height:15px;}
.of-dialog h4{
  font:600 1.7rem/1.1 var(--font-head);
  text-transform:uppercase;letter-spacing:.02em;color:#fff;
  margin-bottom:.5rem;
}
.of-pack{
  display:inline-block;
  font:700 .78rem/1 var(--font-body);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:999px;padding:.5em 1em;
  margin:0 0 1.4rem;
}
.of-label{
  display:block;
  font:700 .78rem/1 var(--font-body);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.55rem;
}
.of-input{
  width:100%;
  background:#0d0e10;border:1px solid var(--border);border-radius:12px;
  padding:.95em 1.1em;
  font:400 1.02rem/1.3 var(--font-body);color:var(--text);
  transition:border-color .25s, box-shadow .25s;
}
.of-input::placeholder{color:#5c646a;}
.of-input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(12,228,200,.18);
}
.of-error{
  color:var(--danger);font-size:.88rem;margin:.6rem 0 0;
}
.of-send{width:100%;margin-top:1.1rem;}
.of-send.sending{opacity:.75;}
.of-micro{
  margin:1.2rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.55;
}
.of-micro a{color:var(--accent);}
.of-success{text-align:center;padding:1rem 0 .4rem;}
.of-check{
  width:64px;height:64px;margin:0 auto 1.2rem;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);
  animation:of-pop .6s var(--ease);
}
.of-check svg{width:30px;height:30px;}
@keyframes of-pop{
  from{transform:scale(.4);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.of-success p{color:var(--muted);max-width:34ch;margin:.4rem auto 1em;}
.of-demo{
  font-size:.78rem;font-style:italic;color:#5c646a !important;
}
body.of-abierto{overflow:hidden;}

/* ----------------------------------------------------------------------- pie */
footer{background:#0a0b0d;border-top:1px solid var(--border);}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  padding-block:clamp(3rem, 6vw, 4.5rem);
}
.footer-brand img{height:26px;margin-bottom:1rem;}
.footer-brand p{color:var(--muted);font-size:.93rem;max-width:34ch;margin:0;}
.footer-col h4{
  font:700 .75rem/1 var(--font-body);
  letter-spacing:.3em;text-transform:uppercase;color:#fff;
  margin-bottom:1.1rem;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.footer-col a{color:var(--muted);font-size:.95rem;transition:color .25s, padding-left .3s var(--ease);}
.footer-col a:hover{color:var(--accent);padding-left:4px;}
.footer-bottom{
  border-top:1px solid var(--border);
  padding-block:1.4rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  color:var(--muted);font-size:.85rem;
}
.footer-bottom p{margin:0;}

/* ------------------------------------------------------------------ aparición */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease) var(--delay, 0ms), transform 1s var(--ease) var(--delay, 0ms);
}
.reveal.in{opacity:1;transform:none;}
.reveal-card{transform:translateY(34px) scale(.965);}
.reveal-card.in{transform:none;}

/* -------------------------------------------------------------------- móvil */
@media (max-width: 940px){
  #nav-toggle{display:block;}
  /* cabecera sólida (sin transparencia) que cubre hasta el borde superior
     del móvil, incluida la zona del notch / barra de estado */
  #site-header{
    background:var(--bg);
    padding-top:env(safe-area-inset-top, 0px);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  #site-header.scrolled{
    background:var(--bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom-color:rgba(255,255,255,.08);
  }
  /* al llegar al pie, la cabecera se desvanece en el sitio (sin deslizarse
     hacia arriba: cruzaría la zona de la barra de estado del iPhone) */
  #site-header.footer-visible{
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
  }
  .nav-open #site-header.footer-visible{opacity:1;transform:none;pointer-events:auto;}
  #site-nav{
    position:fixed;inset:0;z-index:120;
    background:rgba(11,12,14,.92);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
    flex-direction:column;justify-content:center;align-items:center;
    gap:0;
    opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease), visibility 0s linear .45s;
  }
  .nav-open #site-nav{opacity:1;visibility:visible;transition:opacity .45s var(--ease);}
  #site-nav ul{flex-direction:column;align-items:center;gap:.4rem;}
  #site-nav ul a{
    font:600 2.2rem/1.25 var(--font-head);
    text-transform:uppercase;letter-spacing:.04em;
    padding:.35em .5em;
  }
  #site-nav ul a::after{left:.5em;right:.5em;bottom:.22em;}
  /* entrada escalonada de los enlaces */
  #site-nav li, .nav-cta{
    opacity:0;transform:translateY(22px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav-open #site-nav li{opacity:1;transform:none;}
  .nav-open #site-nav li:nth-child(1){transition-delay:.08s;}
  .nav-open #site-nav li:nth-child(2){transition-delay:.14s;}
  .nav-open #site-nav li:nth-child(3){transition-delay:.2s;}
  .nav-open #site-nav li:nth-child(4){transition-delay:.26s;}
  .nav-open #site-nav li:nth-child(5){transition-delay:.32s;}
  .nav-open .nav-cta{opacity:1;transform:none;transition-delay:.4s;}
  .nav-cta{margin:2rem 0 0;}

  body.nav-open{overflow:hidden;}

  .hero{padding-bottom:6rem;}
  .hero-grid{grid-template-columns:1fr;gap:2.6rem;}
  .hero-visual{max-width:440px;margin-inline:auto;}
  .hero-visual img{max-height:46svh;}
  .stat .lbl{letter-spacing:.16em;}

  .novedad-grid{grid-template-columns:1fr;}
  .novedad-media{order:-1;}
  .novedad-media img{max-height:300px;}

  /* packs: carrusel horizontal con snap */
  .promo-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(76vw, 320px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-inline:calc(50% - 50vw);
    padding-inline:calc(50vw - 50%);
    padding-bottom:1rem;
    scrollbar-width:none;
    /* difuminado del borde derecho: sugiere que hay más contenido */
    -webkit-mask-image:linear-gradient(to right, #000 86%, rgba(0,0,0,.15));
    mask-image:linear-gradient(to right, #000 86%, rgba(0,0,0,.15));
  }
  .promo-grid::-webkit-scrollbar{display:none;}
  .pack{scroll-snap-align:center;}

  .promo-swipe-hint{
    display:flex;align-items:center;gap:.55em;
    margin:0 0 1.2rem;
    font:700 .78rem/1 var(--font-body);
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent);
  }
  .promo-swipe-hint span{
    display:inline-block;font-size:1.15em;letter-spacing:0;
    animation:hint-slide 1.6s var(--ease-io) infinite;
  }
  @keyframes hint-slide{
    0%,100%{transform:translateX(0);opacity:.5;}
    50%{transform:translateX(7px);opacity:1;}
  }

  .promo-dots{
    display:flex;justify-content:center;align-items:center;gap:.55rem;
    margin-top:1.1rem;
  }
  .promo-dots button{
    width:8px;height:8px;border-radius:999px;
    background:#3c4247;border:0;padding:0;cursor:pointer;
    transition:background .3s, width .4s var(--ease);
  }
  .promo-dots button.active{background:var(--accent);width:24px;}

  .footer-grid{grid-template-columns:1fr;gap:2.2rem;}
}

@media (max-width: 520px){
  :root{--header-h:64px;}
  .brand img{height:26px;}
  .hero h1{font-size:clamp(3rem, 15vw, 4.4rem);}
  .hero-actions .btn{flex:1;justify-content:center;}
  .scroll-cue{display:none;}
}

/* ------------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal, .reveal-card, .h-in{opacity:1 !important;transform:none !important;}
  body:not(.loaded) .hero h1 .wi{transform:none;}
  .claim .wi{opacity:1 !important;}
  .reveal-clip img{clip-path:none;}
}