/* ============================================
   DROGUERÍA SUKER — styles.css v=20260608
   Archetype: Glassmorphism Modern (navy/gold)
   ============================================ */

/* 1. VARIABLES */
:root {
  --navy:       #1B2A4E;
  --navy-dark:  #111B33;
  --navy-mid:   #243666;
  --navy-light: #2D4580;
  --gold:       #E5B826;
  --gold-dark:  #C9A020;
  --gold-light: #F0CB50;
  --gold-pale:  #FDF7DC;
  --white:      #FFFFFF;
  --gray-50:    #F8F9FA;
  --gray-100:   #F1F3F5;
  --gray-200:   #E9ECEF;
  --gray-400:   #CED4DA;
  --gray-600:   #6C757D;
  --gray-800:   #343A40;
  --whatsapp:   #25D366;
  --whatsapp-d: #1EB754;

  --shadow-xs: 0 1px 4px rgba(27,42,78,.06);
  --shadow-sm: 0 2px 12px rgba(27,42,78,.08);
  --shadow-md: 0 8px 32px rgba(27,42,78,.12);
  --shadow-lg: 0 20px 60px rgba(27,42,78,.18);
  --shadow-xl: 0 32px 80px rgba(27,42,78,.22);
  --shadow-gold: 0 8px 32px rgba(229,184,38,.28);

  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 100px;

  --ease:   cubic-bezier(0.16,1,0.3,1);
  /* Curvas premium reutilizables */
  --ease-expo:   cubic-bezier(0.16,1,0.3,1);     /* expo-out: entradas suaves */
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);      /* equilibrada */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1); /* rebote sutil */
  --t-fast: .2s  cubic-bezier(0.16,1,0.3,1);
  --t-base: .35s cubic-bezier(0.16,1,0.3,1);
  --t-slow: .6s  cubic-bezier(0.16,1,0.3,1);

  --nav-h:  76px;
  --cont:   1280px;
  --sect-py: 6rem;
}

/* 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Accesibilidad / SEO: texto solo para lectores de pantalla y buscadores */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button { border: none; background: none; cursor: pointer; font: inherit; }
input, textarea { font: inherit; border: none; outline: none; }

.container {
  max-width: var(--cont);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section {
  padding-block: var(--sect-py);
}

/* 3. TYPOGRAPHY */
h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; line-height: 1.3; }
p  { line-height: 1.7; }

.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-pale);
  padding: .35rem .9rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.section-header h2 { color: var(--navy); margin-bottom: .75rem; }
.section-header p { color: var(--gray-600); max-width: 520px; margin-inline: auto; }

/* 4. BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .95rem;
  transition: all var(--t-base);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.32) 50%,
    transparent 60%);
  transform: translateX(-100%);
  transition: transform .75s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }
.btn:active { transform: translateY(-1px) scale(.99); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy-dark);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 48px rgba(229,184,38,.48);
}
.btn-navy {
  background: var(--navy);
  color: var(--white);
}
.btn-navy:hover {
  background: var(--navy-mid);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}
.btn-outline-white {
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--white);
}
.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white);
}
.btn-whatsapp:hover {
  background: var(--whatsapp-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,.35);
}

/* 5. SPLASH — Cinematic intro */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
  transition: opacity .7s cubic-bezier(.4,0,.2,1);
  animation: splashSafety .01s 6s forwards;
}
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}
.splash.is-exiting { opacity: 0; pointer-events: none; }
.splash.is-out     { visibility: hidden; }

/* Resplandor dorado que sube detrás del logo durante la ignición (continuidad con el hero) */
.splash-bloom {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 86vw;
  height: 62vh;
  transform: translateX(-50%) translateY(12%) scale(.9);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center bottom,
              rgba(229,184,38,.30) 0%, rgba(229,184,38,.10) 40%, transparent 72%);
  filter: blur(30px);
  opacity: 0;
  animation: splashBloomRise 2.8s cubic-bezier(.4,0,.2,1) .7s both;
}
@keyframes splashBloomRise {
  0%   { opacity: 0;   transform: translateX(-50%) translateY(12%) scale(.9); }
  45%  { opacity: .9;  }
  100% { opacity: .72; transform: translateX(-50%) translateY(0) scale(1.06); }
}
.splash-logo-wrap, .splash-name, .splash-tagline { z-index: 1; }
.splash-name, .splash-tagline { position: relative; }

/* Logo container — el contenedor controla escala (pop + zoom lento), la imagen gira */
.splash-logo-wrap {
  width: 110px; height: 110px;
  position: relative;
  opacity: 0;
  transform: scale(.12);
  will-change: transform, opacity;
}
/* Entrada: aparece y crece de golpe, sobre-rebote leve, luego ZOOM lento y elegante */
.splash-logo-wrap.logo-in {
  animation: splashScale 2.4s both;
}
/* Salida: continúa el zoom y se desvanece */
.splash-logo-wrap.logo-out {
  animation: splashScaleOut .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes splashScale {
  0%   { opacity: 0; transform: scale(.12);  animation-timing-function: cubic-bezier(.13,.78,.2,1); }
  45%  { opacity: 1; transform: scale(1.06); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  56%  {            transform: scale(.99);  animation-timing-function: cubic-bezier(.42,0,.18,1); }
  100% {            transform: scale(1.14); }
}
@keyframes splashScaleOut {
  from { opacity: 1; transform: scale(1.14); }
  to   { opacity: 0; transform: scale(1.5);  }
}

/* La imagen del logo GIRA rápido y frena (la "S" da vueltas y se detiene) */
.splash-logo-img {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(229,184,38,.3));
}
.logo-in .splash-logo-img { animation: splashSpin 2.4s both; }
@keyframes splashSpin {
  0%   { transform: rotate(-1080deg); animation-timing-function: cubic-bezier(.13,.78,.2,1); }
  45%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Anillo orbital tipo "cometa" — acento tecnológico mientras gira */
.splash-orbit {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: conic-gradient(from 90deg,
              rgba(229,184,38,0) 0deg,
              rgba(229,184,38,0) 205deg,
              rgba(229,184,38,.85) 320deg,
              #F7DC85 357deg,
              rgba(229,184,38,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0;
  pointer-events: none;
}
.logo-in .splash-orbit { animation: orbitSpin 1s linear infinite, orbitLife 2.4s ease both; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitLife {
  0%   { opacity: 0; }
  12%  { opacity: .95; }
  42%  { opacity: .95; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Pulso de "lock" — destello que marca el momento exacto en que se detiene el giro */
.splash-lock {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(229,184,38,.85);
  opacity: 0;
  pointer-events: none;
}
.logo-in .splash-lock { animation: lockPing .75s cubic-bezier(.2,.8,.2,1) 1.04s both; }
@keyframes lockPing {
  0%   { opacity: 0;   transform: scale(.92); }
  30%  { opacity: .9;  }
  100% { opacity: 0;   transform: scale(1.65); }
}

/* Pulse rings around logo — halo ambiental suave detrás del logo */
.splash-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(229,184,38,.22);
  animation: ringPulse 2.4s ease-out infinite;
  pointer-events: none;
}
.splash-ring-1 { inset: -10px; animation-delay: 1s; }
.splash-ring-2 { inset: -22px; animation-delay: 1.4s; }
.splash-ring-3 { inset: -36px; animation-delay: 1.8s; }
@keyframes ringPulse {
  0%   { transform: scale(.85); opacity: .45; }
  100% { transform: scale(1.3);  opacity: 0;  }
}

/* Texts */
.splash-name {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  text-align: center;
}
.splash-name.txt-in  { opacity: 1;  transform: translateY(0); }
.splash-name.txt-out { opacity: 0;  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease; }

.splash-tagline {
  font-size: .72rem;
  color: var(--gold);
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s ease .15s;
  text-align: center;
}
.splash-tagline.txt-in  { opacity: .75; }
.splash-tagline.txt-out { opacity: 0; transition: opacity .3s ease; }

/* 6. HEADER */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
}
.header.is-scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 20px rgba(27,42,78,.1);
}
.header .container {
  height: 100%;
  max-width: 1660px;
  padding-inline: clamp(1rem, 2.2vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}
.logo:hover { opacity: .85; }
.logo-img {
  width: 68px; height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 12px rgba(229,184,38,.45));
  transition: transform var(--t-base), filter var(--t-base);
  outline: 2px solid rgba(229,184,38,.35);
  outline-offset: 2px;
}
.logo:hover .logo-img {
  transform: scale(1.08);
  filter: drop-shadow(0 6px 20px rgba(229,184,38,.65));
  outline-color: var(--gold);
}
.logo-text {
  font-size: 2.15rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none; /* gradient + text-shadow no mezclan */
}

.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav-link {
  padding: .5rem .85rem;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 500;
  color: var(--navy);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.nav-link:hover, .nav-link.is-active {
  background: var(--gold-pale);
  color: var(--navy-dark);
}
.header:not(.is-scrolled) .nav-link { color: rgba(255,255,255,.85); }
.header:not(.is-scrolled) .nav-link:hover { background: rgba(255,255,255,.12); color: var(--white); }
.header:not(.is-scrolled) .logo-text { color: var(--white); }

.nav-wa-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  background: var(--whatsapp);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: .85rem;
  font-weight: 600;
  transition: all var(--t-base);
  white-space: nowrap;
}
.nav-wa-btn:hover {
  background: var(--whatsapp-d);
  transform: translateY(-1px);
}
.nav-wa-btn svg { width: 17px; height: 17px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 8px;
  margin-left: auto;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.hamburger:hover { background: rgba(27,42,78,.08); }
.hamburger span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
  transform-origin: center;
}
.header:not(.is-scrolled) .hamburger span { background: var(--white); }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(17,27,51,.95);
  backdrop-filter: blur(8px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  opacity: 0;
  transition: opacity var(--t-base);
}
.nav-overlay.is-open { opacity: 1; }
.nav-overlay .nav-link {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 600;
  padding: .75rem 2rem;
}
.nav-overlay .nav-link:hover { background: rgba(229,184,38,.15); color: var(--gold); }
.nav-overlay .nav-wa-btn {
  margin-top: 1.5rem;
  font-size: 1rem;
  padding: .8rem 2rem;
}

/* 7. HERO */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background: var(--navy-dark);
}
/* ── Resplandor dorado volumétrico (sube desde abajo, "respirando") ── */
.hero-bloom {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-bloom .bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .5; /* base visible cuando la animación está desactivada (reduced-motion) */
  will-change: transform, opacity;
}
.bloom-1 {
  width: 82vw; height: 52vh; left: 50%; bottom: -22vh;
  background: radial-gradient(ellipse at center,
              rgba(229,184,38,.40) 0%, rgba(229,184,38,.12) 40%, transparent 70%);
  animation: bloomBreathe 14s ease-in-out infinite;
}
.bloom-2 {
  width: 50vw; height: 42vh; left: 60%; bottom: -14vh;
  background: radial-gradient(ellipse at center,
              rgba(240,203,80,.36) 0%, transparent 66%);
  animation: bloomDrift 19s ease-in-out infinite;
}
.bloom-3 {
  width: 38vw; height: 32vh; left: 22%; bottom: -12vh;
  background: radial-gradient(ellipse at center,
              rgba(229,184,38,.20) 0%, transparent 70%);
  animation: bloomBreathe 22s ease-in-out infinite reverse;
}
@keyframes bloomBreathe {
  0%, 100% { transform: translateX(-50%) translateY(0)   scale(1);    opacity: .42; }
  50%      { transform: translateX(-50%) translateY(-4vh) scale(1.12); opacity: .64; }
}
@keyframes bloomDrift {
  0%, 100% { transform: translateX(-50%) translateY(0)   scale(1);   opacity: .34; }
  50%      { transform: translateX(-44%) translateY(-3vh) scale(1.1); opacity: .52; }
}


/* ── Rotador de lockups en el eyebrow ── */
.hero-eyebrow .eyebrow-static { white-space: nowrap; }
.lockup-rotator {
  display: inline-block;
  color: var(--gold-light);
  transition: opacity .35s ease, transform .35s ease;
}
.lockup-rotator.is-swapping { opacity: 0; transform: translateY(-6px); }

.hero .container {
  position: relative;
  z-index: 5;
  max-width: 1860px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(1.2rem, 2vw, 2rem);
  row-gap: 2rem;
  padding-inline: clamp(.6rem, 1.2vw, 1.1rem);
  padding-block: 3rem 2.6rem;
}
/* Columna de texto: el video se alinea a este bloque (eyebrow → subtítulo) */
.hero-content { max-width: 620px; grid-column: 1; grid-row: 1; }
.hero-content .hero-sub { margin-bottom: 0; }
.hero .container > .hero-actions { grid-column: 1; grid-row: 2; margin-bottom: 0; align-self: start; }

/* ── Video de presentación del hero ──
   Alineado al bloque de texto (col. 2) pero un poco más alto que él:
   sobresale ~2.5rem arriba y abajo, centrado; el ancho sale del 16:9 */
.hero-3d {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  height: calc(100% + 5rem);
  width: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  /* panel glassmorphism que enmarca el objeto 3D */
  background:
    radial-gradient(120% 100% at 70% 20%, rgba(229,184,38,.10), transparent 60%),
    linear-gradient(160deg, rgba(36,54,102,.32), rgba(17,27,51,.18));
  border: 1px solid rgba(229,184,38,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 40px 80px rgba(8,14,30,.45);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .hero-3d {
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
            backdrop-filter: blur(6px) saturate(1.1);
  }
}
/* resplandor interior detrás del objeto */
.hero-3d-glow {
  position: absolute;
  left: 50%; top: 52%;
  width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,184,38,.30) 0%, rgba(229,184,38,.06) 45%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: h3dGlow 7s ease-in-out infinite;
}
@keyframes h3dGlow {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}
.hero-video-el {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 16:9 en panel 16:9 → llena sin bandas */
  border-radius: inherit;
  cursor: pointer;          /* clic para pausar/reproducir */
}

/* Modo solo póster (celular): sin reproducción ni controles */
.hero-3d.poster-only .hero-video-el { cursor: default; }
.hero-3d.poster-only .hero-video-controls,
.hero-3d.poster-only .hero-video-state { display: none; }

/* ── Indicador de pausa centrado (clic atraviesa hacia el video) ── */
.hero-video-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.hero-video-state svg {
  width: 42px; height: 42px;
  color: var(--navy-dark);
  margin-left: 4px; /* centra ópticamente el triángulo */
}
.hero-video-state::before {
  content: "";
  position: absolute;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-light), var(--gold));
  box-shadow: 0 12px 34px rgba(8,14,30,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-video-state svg { position: relative; z-index: 1; }
.hero-3d.is-paused .hero-video-state {
  opacity: 1;
  animation: hvStateIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes hvStateIn {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Esquinas tipo corchete (marco HUD) ── */
.hero-3d-corner {
  position: absolute;
  z-index: 3;
  width: 22px; height: 22px;
  border: 2px solid rgba(240,203,80,.55);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(240,203,80,.35));
  animation: hcIn .8s ease .4s both;
}
.hc-tl { top: 14px; left: 14px;  border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.hc-tr { top: 14px; right: 14px; border-left: 0;  border-bottom: 0; border-top-right-radius: 7px; }
.hc-bl { bottom: 14px; left: 14px;  border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }
.hc-br { bottom: 14px; right: 14px; border-left: 0;  border-top: 0; border-bottom-right-radius: 7px; }
@keyframes hcIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Controles del video (sonido + pantalla completa) ── */
.hero-video-controls {
  position: absolute;
  z-index: 4;
  right: 1rem; bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.hero-video-btn {
  position: relative;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--navy-dark);
  background: linear-gradient(150deg, var(--gold-light), var(--gold));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 22px rgba(8,14,30,.4), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: h3bIn .8s cubic-bezier(.22,1,.36,1) .6s both;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  will-change: transform;
}
@keyframes h3bIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hero-video-btn svg { width: 22px; height: 22px; }
.hero-video-btn:hover,
.hero-video-btn:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px rgba(8,14,30,.5), 0 0 0 4px rgba(229,184,38,.22);
  outline: none;
}
.hero-video-btn:active { transform: translateY(-1px) scale(.98); }
/* Alterna icono del botón de sonido (muted por defecto → altavoz tachado) */
.hero-video-sound .hvs-on { display: none; }
.hero-video-sound[aria-pressed="true"] .hvs-muted { display: none; }
.hero-video-sound[aria-pressed="true"] .hvs-on { display: block; }
/* Pista sutil de "toca para oír" mientras está en silencio */
.hero-video-sound:not([aria-pressed="true"])::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(229,184,38,.55);
  animation: hvsPing 2.4s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none;
}
@keyframes hvsPing {
  0%   { transform: scale(.85); opacity: .8; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
/* ── Pantalla completa: el contenedor llena la pantalla ── */
.hero-3d:fullscreen,
.hero-3d:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%; height: 100%;
  border: none;
  border-radius: 0;
  background: #0B1322;
  transform: none !important;  /* anula el tilt del parallax en fullscreen */
}
.hero-3d:fullscreen .hero-video-el,
.hero-3d:-webkit-full-screen .hero-video-el {
  object-fit: contain;     /* video completo, sin recortes */
  border-radius: 0;
}
.hero-3d:fullscreen .hero-3d-corner,
.hero-3d:-webkit-full-screen .hero-3d-corner { display: none; }
.hero-3d:fullscreen .hero-video-controls,
.hero-3d:-webkit-full-screen .hero-video-controls { right: 1.4rem; bottom: 1.4rem; }
.hero-3d:fullscreen .hero-video-state svg,
.hero-3d:-webkit-full-screen .hero-video-state svg { width: 56px; height: 56px; }
.hero-3d:fullscreen .hero-video-state::before,
.hero-3d:-webkit-full-screen .hero-video-state::before { width: 110px; height: 110px; }

@media (prefers-reduced-motion: reduce) {
  .hero-3d-corner { animation: none; opacity: 1; }
  .hero-video-btn { animation: none; }
  .hero-video-sound:not([aria-pressed="true"])::after { animation: none; opacity: 0; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.hero h1 { color: var(--white); margin-bottom: 1.25rem; }
.hero h1 em { font-style: italic; color: var(--gold); }

/* ── Título hero: DROGUERÍA / SUKER ── */
.hero-brand-title {
  display: flex;
  flex-direction: column;
  gap: .05em;
  line-height: 1;
  margin-bottom: 1.5rem;
  letter-spacing: -.03em;
}
.hbt-line {
  display: block;
  font-family: 'Anton', 'Sora', sans-serif;
  font-size: clamp(3.4rem, 9.5vw, 6.8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: .02em;
  line-height: .92;
  /* Sutil contorno blanco para dar volumen */
  -webkit-text-stroke: 1px rgba(255,255,255,.15);
}
.hbt-gold {
  /* eslogan dorado con brillo que recorre el texto */
  color: var(--gold-light);
  background: linear-gradient(100deg,
    var(--gold-dark) 0%,
    var(--gold-light) 35%,
    #fff7df 50%,
    var(--gold-light) 65%,
    var(--gold-dark) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  animation: goldSheen 6s ease-in-out infinite;
}
@keyframes goldSheen {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hbt-gold {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--gold-light);
    color: var(--gold-light);
  }
}

/* ── Título hero: eslogan principal ── */
.hero-slogan-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
  margin-bottom: 1.75rem;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.hst-line {
  display: block;
  font-family: 'Sora', 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.02;
}

/* ── Frase tagline con barra lateral dorada ── */
.hero-tagline-quote {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.5rem;
  max-width: 480px;
}
.htq-bar {
  flex-shrink: 0;
  width: 4px;
  height: 100%;
  align-self: stretch;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border-radius: 4px;
  opacity: .9;
}
.htq-text {
  font-size: clamp(1.05rem, 2.2vw, 1.32rem);
  color: rgba(255,255,255,.80);
  font-style: italic;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}
.htq-text strong {
  font-style: normal;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: -.01em;
}

.hero-sub {
  font-size: clamp(.95rem,1.8vw,1.15rem);
  color: rgba(255,255,255,.72);
  margin-bottom: 2.5rem;
  max-width: 480px;
}
.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .9rem;
  margin-bottom: 3rem;
}
.hero-actions .btn { flex: 0 0 auto; }
.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-strip-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.6);
  font-size: .88rem;
}
.hero-strip-item svg { color: var(--gold); flex-shrink: 0; }

/* 8. SERVICES */
.services { background: var(--white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 2.25rem 2rem;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base);
}
@supports (backdrop-filter: blur(10px)) {
  .service-card { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); }
}
.service-card:hover {
  transform: translateY(-6px) perspective(800px) rotateX(1deg);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
  background: var(--white);
}
.service-icon {
  width: 60px; height: 60px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  line-height: 1;
  transition: transform var(--t-base);
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(3deg); }
.service-card h3 { color: var(--navy); margin-bottom: .5rem; }
.service-card p { color: var(--gray-600); font-size: .92rem; }

/* 9. CATEGORIES */
.categories { background: var(--gray-50); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.25rem;
  transition: all var(--t-base);
  text-decoration: none;
  color: inherit;
}
.cat-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(229,184,38,.14), var(--shadow-md);
  transform: translateY(-5px);
  background: var(--gold-pale);
}
.cat-icon-box {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.75rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.cat-card:hover .cat-icon-box {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(27,42,78,.25);
}
.cat-card h3 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}
.cat-card span {
  font-size: .8rem;
  color: var(--gold-dark);
  font-weight: 600;
  transition: color var(--t-fast);
}
.cat-card:hover span { color: var(--navy); }

/* 10. OFERTAS */
.ofertas { background: var(--navy-dark); overflow: hidden; position: relative; }
.ofertas::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(229,184,38,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(36,54,102,.5) 0%, transparent 60%);
  pointer-events: none;
}
.ofertas-cargo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ofertas .container { position: relative; z-index: 1; }
.ofertas .section-eyebrow { background: rgba(229,184,38,.15); color: var(--gold); }
.ofertas .section-header h2 { color: var(--white); }
.ofertas .section-header p { color: rgba(255,255,255,.6); }
.ofertas-banner {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  border-radius: var(--r-xl);
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.ofertas-banner-text { color: var(--navy-dark); }
.ofertas-banner-text strong { font-size: 1.5rem; font-weight: 800; display: block; }
.ofertas-banner-text span { font-size: .9rem; opacity: .75; }
.ofertas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.oferta-card {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  padding: 2rem;
  transition: all var(--t-base);
  overflow: hidden;
}
.oferta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(229,184,38,.04) 0%, transparent 60%);
  transition: opacity var(--t-base);
}
.oferta-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(229,184,38,.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.oferta-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 1.1rem;
  padding: .35rem .85rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.25rem;
}
.oferta-card h3 { color: var(--white); margin-bottom: .5rem; font-size: 1.15rem; }
.oferta-card p { color: rgba(255,255,255,.55); font-size: .9rem; margin-bottom: 1.5rem; }
.oferta-card .btn-gold { font-size: .88rem; padding: .65rem 1.4rem; }

/* 11. NOSOTROS */
.nosotros { background: var(--white); }
.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,6vw,5rem);
  align-items: center;
}
.nosotros-text h2 { color: var(--navy); margin-bottom: 1.25rem; }
.nosotros-text p {
  color: var(--gray-600);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.nosotros-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.nosotros-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: .55rem 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  transition: all var(--t-fast);
}
.nosotros-badge svg { color: var(--gold); }
.nosotros-badge:hover { border-color: var(--gold); background: var(--gold-pale); }
.nosotros-visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 440px;
  margin-inline: auto;
}
.nosotros-bg-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gray-50) 100%);
}
.nosotros-visual svg { position: relative; z-index: 1; width: 100%; height: 100%; }

/* 12. CONTACTO */
.contacto { background: var(--gray-50); }
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 2rem;
  align-items: start;
}
.contact-info-card, .contact-form-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.contact-info-card h3, .contact-form-card h3 {
  color: var(--navy);
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--gray-200);
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.25rem;
  font-size: .92rem;
  color: var(--gray-600);
}
.contact-item:last-child { margin-bottom: 0; }
.contact-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: .95rem;
}
.contact-item strong { display: block; color: var(--navy); font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.contact-item span { color: var(--gray-600); }
.contact-phone-note {
  font-size: .75rem;
  color: var(--gold-dark);
  font-weight: 600;
  background: var(--gold-pale);
  padding: .15rem .5rem;
  border-radius: 4px;
  display: inline-block;
  margin-top: .25rem;
}

/* Map */
.map-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  height: 100%;
  min-height: 320px;
}
.map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

/* Contact form */
.form-field {
  margin-bottom: 1.1rem;
}
.form-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.form-field input, .form-field textarea {
  width: 100%;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: .75rem 1rem;
  font-size: .92rem;
  color: var(--navy);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-field input:focus, .form-field textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,42,78,.08);
  background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-submit {
  width: 100%;
  padding: .9rem 1.5rem;
  background: var(--whatsapp);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: all var(--t-base);
  cursor: pointer;
  border: none;
}
.form-submit:hover {
  background: var(--whatsapp-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,.35);
}

/* 13. FOOTER */
.footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,.7);
  padding-block: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-light) 70%, transparent 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand {}
.footer-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-logo-img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(229,184,38,.3));
}
.footer-logo-text { font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.2; }
.footer-logo-text span { display: block; font-size: .65rem; color: rgba(255,255,255,.45); font-weight: 400; letter-spacing: .04em; }
.footer-tagline { font-size: .9rem; line-height: 1.6; margin-bottom: 1.5rem; }
.footer-social { display: flex; gap: .85rem; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.social-link img {
  width: 34px; height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.28));
  transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease;
  will-change: transform;
}
.social-link:hover img,
.social-link:focus-visible img {
  transform: scale(1.22) translateY(-2px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.social-link:active img { transform: scale(1.08); }

.footer-col h4 {
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a {
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--gold); }
.footer-hours-item {
  font-size: .88rem;
  margin-bottom: .5rem;
  display: flex;
  gap: .5rem;
  align-items: baseline;
}
.footer-hours-item strong { color: rgba(255,255,255,.8); }
.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .82rem;
}
.footer-bottom a { color: rgba(255,255,255,.4); transition: color var(--t-fast); }
.footer-bottom a:hover { color: var(--gold); }

/* 14. FLOATING ELEMENTS */
.float-wa {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 800;
  height: 68px;
  padding: 0 26px 0 18px;
  background: linear-gradient(135deg, #25d366 0%, #1aad52 100%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow:
    0 8px 32px rgba(37,211,102,.55),
    0 0 0 3px rgba(37,211,102,.2),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .25s cubic-bezier(0.22,1,0.36,1), box-shadow .25s ease;
  animation: waPulse 2.4s ease-in-out infinite;
  text-decoration: none;
  outline: 2px solid rgba(37,211,102,.4);
  outline-offset: 3px;
}
@keyframes waPulse {
  0%,100% {
    box-shadow: 0 8px 32px rgba(37,211,102,.55), 0 0 0 3px rgba(37,211,102,.2), inset 0 1px 0 rgba(255,255,255,.25);
    outline-color: rgba(37,211,102,.4);
  }
  50% {
    box-shadow: 0 8px 40px rgba(37,211,102,.75), 0 0 0 10px rgba(37,211,102,0), inset 0 1px 0 rgba(255,255,255,.25);
    outline-color: rgba(37,211,102,.15);
  }
}
.float-wa:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 16px 48px rgba(37,211,102,.7), 0 0 0 4px rgba(37,211,102,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.float-wa svg { width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.2)); }
.float-wa-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

.float-wa-title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1;
}
.float-wa-sub {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .05em;
  opacity: .88;
  line-height: 1;
}

.scroll-top-btn {
  position: fixed;
  bottom: 6.5rem;
  right: 2rem;
  z-index: 800;
  width: 44px; height: 44px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  color: var(--navy);
  transition: all var(--t-base);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.scroll-top-btn.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); transform: translateY(-2px); }
.scroll-top-btn svg { width: 18px; height: 18px; }

/* 15. REVEAL ANIMATIONS */
.reveal {
  opacity: 0;
  transform: perspective(1400px) rotateX(4deg) translateY(30px) scale(0.982);
  transform-origin: 50% 100%;
  filter: blur(8px);
  transition:
    opacity  1.0s cubic-bezier(0.16,1,0.3,1),
    transform 1.15s cubic-bezier(0.16,1,0.3,1),
    filter   0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}
/* Safety: prevent split+reveal invisible */
.reveal[data-split] { opacity: 1; transform: none; filter: none; }
.reveal-delay-1 { transition-delay: .3s; }
.reveal-delay-2 { transition-delay: .6s; }
.reveal-delay-3 { transition-delay: .9s; }
.reveal-delay-4 { transition-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important; transform: none !important; }
}

/* ── Velo de difuminado en el borde inferior de cada sección ─────────
   Crea la ilusión de que el contenido "emerge" desde la niebla al bajar.
   El ::after es un gradiente transparente→color de fondo que cubre
   los últimos 120px de la sección; desaparece en :hover para no
   tapar enlaces.                                                       */
.section {
  position: relative;
  overflow: visible;
}
.section::after {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, var(--section-fade-color, var(--ink)) 100%);
  opacity: .4;
  transition: opacity .5s ease;
  z-index: 1;
}
.nosotros-min::after  { --section-fade-color: var(--ink); }
.canales-min::after   { --section-fade-color: var(--ink); }
.catalog-min::after   { --section-fade-color: var(--ink-2); }
.proveedores-min::after { --section-fade-color: var(--ink); }
.faq-min::after       { --section-fade-color: var(--ink-2); }
.contact-min::after   { --section-fade-color: var(--ink-2); }
/* Quitar el velo cuando el scroll llega al final de la sección */
.section.section-seen::after { opacity: 0; }

/* 16. RESPONSIVE */
@media (max-width: 1180px) {
  .contacto-grid { grid-template-columns: 1fr 1fr; }
  .contact-form-card { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > *:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  :root { --sect-py: 4.5rem; }
  .nav { display: none; }
  .nav-wa-btn { display: none; }
  .hamburger { display: flex; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .nosotros-grid { grid-template-columns: 1fr; }
  .nosotros-visual { max-width: 340px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  /* Hero: apila texto, botones y video en una columna */
  .hero .container { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .hero-content { max-width: 730px; grid-column: 1; grid-row: 1; }
  .hero .container > .hero-actions { grid-column: 1; grid-row: 2; }
  .hero-3d {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    align-self: auto;
    height: auto;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  :root { --sect-py: 3.5rem; --nav-h: 64px; }
  .services-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .cat-card { padding: 1.25rem .85rem; }
  .ofertas-grid { grid-template-columns: 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .map-card { min-height: 260px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .float-wa { bottom: 1.25rem; right: 1.25rem; height: 60px; padding: 0 18px 0 14px; gap: 9px; }
  .float-wa svg { width: 28px; height: 28px; }
  .float-wa-title { font-size: .9rem; }
  .float-wa-sub { font-size: .68rem; }
  .scroll-top-btn { bottom: 5.5rem; right: 1.25rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-strip { gap: 1rem; }
  .hero-3d { border-radius: 22px; }
  .hero-video-controls { right: .8rem; bottom: .8rem; gap: .5rem; }
  .hero-video-btn { width: 44px; height: 44px; }
  .hero-video-btn svg { width: 20px; height: 20px; }
  .hero-3d-corner { width: 16px; height: 16px; }
  .hc-tl, .hc-tr { top: 10px; }
  .hc-bl, .hc-br { bottom: 10px; }
  .hc-tl, .hc-bl { left: 10px; }
  .hc-tr, .hc-br { right: 10px; }
}

@media (max-width: 479px) {
  .cat-grid { gap: .65rem; }
  .cat-icon-box { width: 52px; height: 52px; font-size: 1.4rem; }
  .cat-card h3 { font-size: .85rem; }
  .nosotros-badges { gap: .5rem; }
}

/* hover guard for touch devices — evita estados "pegados" al tocar */
@media (hover: none) {
  .service-card:hover,
  .cat-card:hover,
  .oferta-card:hover,
  .nosotros-card:hover,
  .contact-min-map:hover,
  .footer-logo:hover .footer-logo-img { transform: none; }
  .nosotros-card:hover .nc-icon { transform: none; filter: none; }
  .contact-min-map:hover iframe { transform: scale(1.01); }
  .catalog-row:hover { padding-left: .5rem; background: none; }
}

/* ════════════════════════════════════════════
   16. VIDA E INTERACTIVIDAD POR SECCIÓN
   ════════════════════════════════════════════ */

/* ── Barra de progreso de lectura ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold) 55%, var(--gold-light));
  box-shadow: 0 0 12px rgba(229,184,38,.55), 0 0 2px rgba(240,203,80,.8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .12s linear;
  z-index: 9990;
  pointer-events: none;
}

/* ── Marquee informativo ── */
.marquee {
  position: relative;
  z-index: 3;
  background: linear-gradient(100deg, var(--gold-dark), var(--gold) 45%, var(--gold-light));
  padding-block: .85rem;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeMove 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-half {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
}
.mq-item {
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy-dark);
  white-space: nowrap;
  letter-spacing: .01em;
}
.mq-sep { color: rgba(27,42,78,.4); font-size: .8rem; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ── Encabezados de sección: subrayado que se dibuja ── */
.section-header h2 { position: relative; }
.section-header h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -12px;
  width: 58px; height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  transform: translateX(-50%) scaleX(0);
  transition: transform .7s var(--ease) .3s;
}
.section-header.is-visible h2::after { transform: translateX(-50%) scaleX(1); }
.section-header .section-eyebrow {
  transform: scale(.8);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1) .15s, opacity .4s ease .15s;
}
.section-header.is-visible .section-eyebrow { transform: scale(1); opacity: 1; }

/* ── Respiración de iconos (bucle sutil) ── */
@keyframes iconBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── SERVICIOS: iconos vivos + foco dorado que sigue al mouse ── */
.service-icon {
  animation: iconBreath 4.5s ease-in-out infinite;
  transition: scale .35s cubic-bezier(.34,1.56,.64,1), rotate .35s var(--ease), box-shadow .35s;
}
.services-grid .service-card:nth-child(2) .service-icon { animation-delay: -1.1s; }
.services-grid .service-card:nth-child(3) .service-icon { animation-delay: -2.2s; }
.services-grid .service-card:nth-child(4) .service-icon { animation-delay: -3.3s; }
.service-card:hover .service-icon {
  scale: 1.14;
  rotate: -5deg;
  box-shadow: 0 10px 26px rgba(27,42,78,.32);
}
[data-tilt] { position: relative; }
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(170px circle at var(--mx,50%) var(--my,50%), rgba(229,184,38,.18), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
[data-tilt]:hover::after { opacity: 1; }

/* ── CATEGORÍAS: iconos que respiran + brillo barrido + flecha viva ── */
.cat-icon-box {
  animation: iconBreath 5s ease-in-out infinite;
  transition: scale .35s cubic-bezier(.34,1.56,.64,1), rotate .35s var(--ease), box-shadow .35s;
}
.cat-grid .cat-card:nth-child(4n+2) .cat-icon-box { animation-delay: -1.25s; }
.cat-grid .cat-card:nth-child(4n+3) .cat-icon-box { animation-delay: -2.5s; }
.cat-grid .cat-card:nth-child(4n)   .cat-icon-box { animation-delay: -3.75s; }
.cat-card:hover .cat-icon-box {
  scale: 1.15;
  rotate: -6deg;
  box-shadow: 0 10px 26px rgba(27,42,78,.28);
}
.cat-card { position: relative; overflow: hidden; }
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(229,184,38,.16) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}
.cat-card:hover::after { transform: translateX(130%); }
.cat-card span { transition: color var(--t-fast), transform .3s var(--ease); }
.cat-card:hover span { transform: translateX(4px); }

/* ── OFERTAS: insignias que llaman la atención + brillo en banner ── */
.oferta-badge { animation: badgeRing 5.2s ease-in-out infinite; }
.ofertas-grid .oferta-card:nth-child(2) .oferta-badge { animation-delay: .9s; }
.ofertas-grid .oferta-card:nth-child(3) .oferta-badge { animation-delay: 1.8s; }
@keyframes badgeRing {
  0%, 78%, 100% { transform: rotate(0) scale(1); }
  82%           { transform: rotate(-4deg) scale(1.09); }
  86%           { transform: rotate(3deg)  scale(1.09); }
  90%           { transform: rotate(-2deg) scale(1.05); }
  94%           { transform: rotate(1deg)  scale(1.02); }
}
.oferta-card:hover {
  transform: translateY(-8px);
  border-color: rgba(229,184,38,.55);
  box-shadow: 0 22px 56px rgba(0,0,0,.4), 0 0 0 1px rgba(229,184,38,.18);
}
.ofertas-banner { position: relative; overflow: hidden; }
.ofertas-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.45) 50%, transparent 58%);
  transform: translateX(-160%);
  animation: bannerSheen 6s ease-in-out infinite 2s;
  pointer-events: none;
}
@keyframes bannerSheen {
  0%, 60%   { transform: translateX(-160%); }
  80%, 100% { transform: translateX(160%); }
}

/* ── NOSOTROS: ilustración flotante + halo pulsante ── */
.nosotros-visual { animation: visualFloat 7s ease-in-out infinite; }
@keyframes visualFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.nosotros-bg-circle { animation: circlePulse 6s ease-in-out infinite; }
@keyframes circlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,184,38,.16); transform: scale(1); }
  50%      { box-shadow: 0 0 60px 14px rgba(229,184,38,.13); transform: scale(1.025); }
}
.nosotros-badge { transition: all var(--t-fast), scale .3s cubic-bezier(.34,1.56,.64,1); }
.nosotros-badge:hover { scale: 1.06; box-shadow: var(--shadow-sm); }

/* ── CONTACTO: items deslizantes + iconos saltarines + mapa vivo ── */
.contact-item {
  padding: .45rem .6rem;
  margin-left: -.6rem;
  border-radius: var(--r-md);
  transition: background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.contact-item:hover {
  background: var(--white);
  transform: translateX(6px);
  box-shadow: var(--shadow-xs);
}
.contact-icon { transition: scale .35s cubic-bezier(.34,1.56,.64,1), rotate .35s var(--ease); }
.contact-item:hover .contact-icon { scale: 1.15; rotate: -8deg; }
.map-card { transition: transform .4s var(--ease), box-shadow .4s ease; }
.map-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.form-field input:focus, .form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(229,184,38,.18);
}
.form-submit svg { transition: transform .3s var(--ease); }
.form-submit:hover svg { transform: scale(1.18) rotate(-8deg); }

/* ── CATEGORÍAS: escena flotante de fondo (fondo claro) ── */
.categories { position: relative; overflow: hidden; }
.categories-cargo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.categories .container { position: relative; z-index: 1; }

/* Variantes para fondo claro: sombras suaves en azul */
.cargo-float.on-light { filter: drop-shadow(0 10px 22px rgba(27,42,78,.16)); }
.cargo-float.on-light.is-mid { opacity: .75; }
.cargo-float.on-light.is-far { opacity: .32; }
.cargo-drift.on-light .cargo-bob { filter: drop-shadow(0 10px 22px rgba(27,42,78,.16)); }

/* ── SERVICIOS: escena de fondo (pulso vital + moto delivery) ── */
.services { position: relative; overflow: hidden; }
.services-cargo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.services .container { position: relative; z-index: 1; }

/* Línea de electrocardiograma */
.services-ecg {
  position: absolute;
  left: 0; right: 0;
  top: 22px;
  height: 90px;
}
.services-ecg svg { width: 100%; height: 100%; display: block; }
.ecg-base {
  fill: none;
  stroke: rgba(229,184,38,.16);
  stroke-width: 2.5;
}
.ecg-pulse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 90 1600;
  animation: ecgTravel 7s linear infinite;
  filter: drop-shadow(0 0 6px rgba(229,184,38,.5));
}
@keyframes ecgTravel { to { stroke-dashoffset: -1690; } }

/* Manecilla del reloj girando */
.clock-hand {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: clockSpin 9s linear infinite;
}
@keyframes clockSpin { to { transform: rotate(360deg); } }

/* ── OFERTAS: insignias de descuento con marco vistoso ── */
.oferta-badge {
  position: relative;
  background: linear-gradient(110deg,
    var(--gold-dark) 0%, var(--gold) 35%,
    var(--gold-light) 50%, var(--gold) 65%, var(--gold-dark) 100%);
  background-size: 220% 100%;
  border: 2px dashed rgba(27,42,78,.45);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18),
    0 0 20px rgba(229,184,38,.45),
    0 4px 14px rgba(0,0,0,.35);
  animation: badgeRing 5.2s ease-in-out infinite, badgeShimmer 3.2s linear infinite;
}
@keyframes badgeShimmer { to { background-position: -220% 0; } }

/* Halo expansivo alrededor de la insignia */
.oferta-badge::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 2px solid rgba(229,184,38,.55);
  animation: badgeHalo 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes badgeHalo {
  0%        { transform: scale(.92); opacity: .9; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}
.ofertas-grid .oferta-card:nth-child(2) .oferta-badge::after { animation-delay: .85s; }
.ofertas-grid .oferta-card:nth-child(3) .oferta-badge::after { animation-delay: 1.7s; }

/* ── NOSOTROS: escena de confianza ── */
.nosotros { position: relative; overflow: hidden; }
.nosotros-cargo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nosotros .container { position: relative; z-index: 1; }

/* ── CONTACTO: escena de comunicación ── */
.contacto { position: relative; overflow: hidden; }
.contacto-cargo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.contacto .container { position: relative; z-index: 1; }

/* Puntos de la burbuja de chat "escribiendo…" */
.chat-dot { animation: dotBlink 1.4s ease-in-out infinite; }
.chat-dot:nth-of-type(2) { animation-delay: .22s; }
.chat-dot:nth-of-type(3) { animation-delay: .44s; }
@keyframes dotBlink {
  0%, 60%, 100% { opacity: 1; }
  30%           { opacity: .25; }
}

/* Redes sociales en la tarjeta de contacto */
.contact-social {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--gray-200);
}
.contact-social > strong {
  display: block;
  color: var(--navy);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
.contact-social > span {
  display: block;
  color: var(--gray-600);
  font-size: .85rem;
  margin-bottom: .85rem;
}
.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.contact-social-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--white);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s ease,
              background .3s ease, color .3s ease;
}
.contact-social-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.contact-social-btn:hover {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
  color: var(--navy-dark);
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--shadow-gold);
}

/* ════════════════════════════════════════════
   17. TIPOGRAFÍA CON ESTILO (legible primero)
   ════════════════════════════════════════════ */
h1, h2, h3,
.logo-text,
.splash-name,
.footer-logo-text {
  font-family: 'Sora', 'Poppins', -apple-system, sans-serif;
}
h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.025em; }
h3 { letter-spacing: -.012em; }

/* Titular del hero (las líneas visibles usan Sora vía .hst-line) */
.hero h1 {
  font-family: 'Sora', Georgia, serif;
  font-size: clamp(2.9rem, 6.6vw, 5.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.012em;
  /* Iluminado: sombra de profundidad + leve halo dorado */
  text-shadow: 0 6px 30px rgba(0,0,0,.3), 0 0 42px rgba(229,184,38,.12);
}
.hero h1 em {
  font-weight: 700;
  /* Degradado más ancho con banda brillante para el barrido de luz (sheen) */
  background: linear-gradient(100deg,
              var(--gold) 0%, var(--gold) 28%,
              #FFF1C2 45%, var(--gold-light) 60%, var(--gold) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold); /* respaldo para navegadores sin clip */
  /* El glow hace que el texto "emita luz" */
  filter: drop-shadow(0 0 22px rgba(229,184,38,.45));
  animation: emSheen 7s ease-in-out infinite;
}
@keyframes emSheen {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* Títulos de sección con degradado (fondos claros) */
.section-header h2,
.nosotros-text h2 {
  background: linear-gradient(115deg, var(--navy) 25%, var(--navy-light) 65%, #4A66A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Ofertas (fondo oscuro): degradado blanco → dorado */
.ofertas .section-header h2 {
  background: linear-gradient(115deg, #FFFFFF 35%, var(--gold-light) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Ajustes móvil ── */
@media (max-width: 767px) {
  .mq-item { font-size: .8rem; }
  .marquee-half { gap: 1.5rem; padding-right: 1.5rem; }
  .marquee-track { animation-duration: 24s; }
  .categories-cargo { display: none; }
  .services-cargo { display: none; }
  .nosotros-cargo { display: none; }
  .contacto-cargo { display: none; }
}

/* ── Escena cinematográfica: tablet/móvil ── */
@media (max-width: 991px) {
  /* Las tarjetas necesitan el espacio libre del lado derecho (solo escritorio amplio) */

  .bloom-1 { width: 120vw; height: 40vh; }
  .bloom-2 { width: 80vw; }
}
/* Nota: NO se desactivan las animaciones ambientales bajo prefers-reduced-motion,
   porque Windows lo trae activado por defecto y dejaría la escena plana (el cliente
   quiere el movimiento cinematográfico). Son micro-movimientos suaves, no intrusivos. */


/* ============================================================
   ⬛ REDISEÑO MINIMALISTA "SCROLLYTELLING" (v=20260615a)
   Lienzo casi negro + oro · tipografía gigante · scroll fijado
   ============================================================ */
:root { --ink: #0B1322; --ink-2: #0E1828; }

body.theme-dark { background: var(--ink); color: #E8ECF4; }

/* ── Campo de estrellas de fondo (canvas fijo, detrás de todo) ── */
.starfield-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}
/* Secciones transparentes: el campo de estrellas (canvas fijo sobre el
   --ink del body) se ve UNIFORME detrás de todos los textos, recuadros
   e imágenes. Se usa un velo muy leve solo donde ayuda a la lectura. */
.hero,
.catalog-min,
.nosotros-min,
.contact-min,
.story { background: transparent; }
.footer { background: rgba(11,19,34,.35); }

/* Tipografía display condensada (Anton) para titulares minimalistas */
.display-lg, .story-headline {
  font-family: 'Anton', 'Sora', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .95;
}

/* ---- Header sobre lienzo oscuro (también al hacer scroll) ---- */
.header.is-scrolled {
  background: rgba(11,19,34,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.header.is-scrolled .logo-text { color: #fff; }
.header.is-scrolled .nav-link { color: rgba(255,255,255,.85); background: transparent; }
.header.is-scrolled .nav-link:hover,
.header.is-scrolled .nav-link.is-active { background: rgba(229,184,38,.16); color: var(--gold-light); }
.header.is-scrolled .hamburger span { background: #fff; }
/* Item activo sobre header oscuro (no desplazado): dorado sutil, no píldora blanca */
.header:not(.is-scrolled) .nav-link.is-active { background: rgba(229,184,38,.16); color: var(--gold-light); }

/* ---- HERO (landing) ---- */
.hero { background: var(--ink); }
.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: rgba(255,255,255,.5);
  font-family: 'Sora', sans-serif; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; z-index: 6;
  transition: color var(--t-base);
}
.scroll-hint svg { width: 22px; height: 22px; animation: hintBob 2.4s cubic-bezier(0.4,0,0.2,1) infinite; }
.scroll-hint:hover { color: var(--gold); }
@keyframes hintBob {
  0%   { transform: translateY(0);   opacity: .45; }
  50%  { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(0);   opacity: .45; }
}

/* ---- STORY: escenario fijado + constelación ---- */
.story { position: relative; background: var(--ink); }
.story-stage {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 72% 58% at 50% 66%, rgba(229,184,38,.10), transparent 70%),
    var(--ink);
}
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.story-inner { position: relative; z-index: 2; text-align: center; padding: 0 6vw; pointer-events: none; }
.story-headlines { position: relative; display: grid; place-items: center; }
.story-headline {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(2.3rem, 8.4vw, 7rem);
  color: #fff;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .55s ease, transform .55s ease;
  text-shadow: 0 0 44px rgba(229,184,38,.18);
}
.story-headline.is-active { opacity: 1; transform: none; }
.story-sub {
  margin-top: 1.5rem;
  color: rgba(229,184,38,.85);
  font-family: 'Sora', sans-serif;
  font-size: clamp(.68rem, 1.4vw, .88rem);
  letter-spacing: .3em; text-transform: uppercase;
}
.story-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); z-index: 3; }
.story-rail-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(229,184,38,.6);
  transition: width .15s linear;
}

/* ---- Cabeceras minimalistas (catálogo / contacto) ---- */
.min-head { max-width: 760px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.min-eyebrow {
  display: inline-block; color: var(--gold);
  font-family: 'Sora', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.min-eyebrow::before {
  content: ''; display: inline-block; width: 26px; height: 2px;
  background: var(--gold); vertical-align: middle; margin-right: .7rem;
}
.display-lg { font-size: clamp(2.2rem, 6vw, 4.6rem); color: #fff; margin-bottom: 1.1rem; }
.min-head p { color: rgba(255,255,255,.58); font-size: clamp(.95rem, 1.6vw, 1.12rem); max-width: 560px; line-height: 1.6; }

/* ---- CATÁLOGO minimalista (lista editorial) ---- */
.catalog-min { background: var(--ink); padding-block: clamp(5rem, 12vh, 9rem); }
.catalog-list { border-top: 1px solid rgba(255,255,255,.13); }
.catalog-row {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding: clamp(1.25rem, 3.2vw, 2.1rem) .5rem;
  border-bottom: 1px solid rgba(255,255,255,.13);
  text-decoration: none; color: #fff;
  transition: padding-left .4s cubic-bezier(.22,1,.36,1), background .4s ease;
}
/* barra de acento vertical que crece al pasar el cursor */
.catalog-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border-radius: 3px;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(229,184,38,.5);
  transition: height .45s cubic-bezier(.22,1,.36,1);
}
.catalog-row:hover { padding-left: 1.6rem; background: linear-gradient(90deg, rgba(229,184,38,.08), transparent 60%); }
.catalog-row:hover::before { height: 62%; }
.cr-num { font-family: 'Anton', sans-serif; color: rgba(229,184,38,.55); font-size: 1.05rem; transition: color .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.catalog-row:hover .cr-num { color: var(--gold); transform: scale(1.2); }
.cr-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 3vw, 2rem); letter-spacing: -.01em; transition: color .3s ease; }
.catalog-row:hover .cr-name { color: var(--gold-light); }
.cr-go { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.45); font-family: 'Sora', sans-serif; font-size: .85rem; white-space: nowrap; transition: color .3s ease; }
.cr-go svg { width: 18px; height: 18px; transition: transform .3s ease; }
.catalog-row:hover .cr-go { color: var(--gold); }
.catalog-row:hover .cr-go svg { transform: translateX(5px); }

/* ══════════════════════════════════════════════════════
   NOSOTROS — Carrusel marquee infinito
   ══════════════════════════════════════════════════════ */
.nosotros-min {
  background: var(--ink-2);
  padding-top: clamp(4rem, 10vh, 7rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

/* — Cabecera de Nosotros: texto + sellos DIGEMID (BPA / BPT) — */
.nosotros-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.nosotros-head .min-head { margin-bottom: 0; }
.cert-seals { display: flex; flex-wrap: wrap; justify-content: center; flex-shrink: 0; gap: clamp(1.4rem, 3vw, 2.6rem); }
.cert-seal { margin: 0; text-align: center; }
.cert-seal img {
  display: block; margin-inline: auto;
  width: clamp(120px, 14vw, 185px); height: auto;
}
.cert-seal figcaption {
  margin-top: .85rem;
  font-family: 'Sora', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .05em; line-height: 1.5;
  color: rgba(255,255,255,.55);
}
.cert-seal figcaption strong {
  display: block; color: var(--gold);
  font-size: .78rem; letter-spacing: .18em; margin-bottom: .2rem;
}
@media (max-width: 920px) {
  .nosotros-head { flex-direction: column; align-items: flex-start; }
  .cert-seals { align-self: center; }
  .cert-seal img { width: clamp(110px, 32vw, 150px); }
}

/* — Contenedor del carrusel (full-width, overflow oculto) — */
.nosotros-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 2rem;
  /* Degradado en bordes: las tarjetas se desvanecen al entrar/salir */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* — Track: una sola fila horizontal continua (sin wrap) —
   Contiene 2 sets idénticos (12 tarjetas). La animación lo desplaza
   exactamente -50% → el SET 2 cae justo donde estaba el SET 1 = bucle sin cortes.
   El empalme es perfecto porque cada tarjeta separa con margin-right
   (no 'gap'), así media pista = un set completo incluyendo su separación. */
.nosotros-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  align-items: stretch;
  animation: nosotrosBelt var(--belt-duration, 40s) linear infinite;
  /* Arranca "ya en movimiento": el primer vistazo nunca ve la cinta alineada al borde */
  animation-delay: -8s;
  /* Capa propia en GPU → desplazamiento fluido sin repintar */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* — Pausa al pasar el cursor (o al enfocar con teclado) — */
.nosotros-marquee:hover .nosotros-track,
.nosotros-marquee:focus-within .nosotros-track {
  animation-play-state: paused;
}

/* — Pausa cuando la sección no está en pantalla (JS pone .is-offscreen) — */
.nosotros-marquee.is-offscreen .nosotros-track,
.prov-marquee.is-offscreen .prov-track {
  animation-play-state: paused;
}

@keyframes nosotrosBelt {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* — Tarjeta individual — */
.nosotros-card {
  flex: 0 0 270px;          /* ancho fijo → uniformidad en todos los breakpoints */
  margin-right: 1.25rem;    /* separación uniforme (clave para el empalme -50%) */
  min-height: 210px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(229,184,38,.2);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  cursor: default;
  transition:
    border-color .35s ease,
    box-shadow    .35s ease,
    background    .35s ease;
}

/* Resplandor dorado superior al hacer hover */
.nosotros-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(229,184,38,.15), transparent 65%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* Línea de acento dorada en la parte superior */
.nosotros-card::before {
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.nosotros-card:hover {
  border-color: rgba(229,184,38,.55);
  background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%);
  box-shadow: 0 8px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(229,184,38,.12);
}
.nosotros-card:hover::after  { opacity: 1; }
.nosotros-card:hover::before { transform: scaleX(1); }

/* — Icono SVG de cada tarjeta — */
.nc-card-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(229,184,38,.1);
  border: 1px solid rgba(229,184,38,.22);
  flex-shrink: 0;
  transition: background .35s ease, border-color .35s ease;
}
.nc-card-icon svg {
  width: 20px; height: 20px;
  stroke: var(--gold);
  transition: stroke .3s ease;
}
.nosotros-card:hover .nc-card-icon {
  background: rgba(229,184,38,.18);
  border-color: rgba(229,184,38,.45);
}

/* — Título — */
.nosotros-card h3 {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
  transition: color .3s ease;
}
.nosotros-card:hover h3 { color: var(--gold-light); }

/* — Descripción — */
.nosotros-card p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.5);
  font-size: .875rem;
  line-height: 1.6;
  margin: 0;
}

/* — Accesibilidad: prefers-reduced-motion → cuadrícula estática (solo SET 1) — */
@media (prefers-reduced-motion: reduce) {
  .nosotros-marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .nosotros-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    animation: none;
  }
  .nosotros-card { flex: 0 0 clamp(240px, 45%, 290px); margin-right: 0; }
  /* el SET 2 duplicado se oculta para no repetir tarjetas sin movimiento */
  .nosotros-card[aria-hidden="true"] { display: none; }
}

/* — Móvil: tarjetas un poco más anchas para que se lean bien — */
@media (max-width: 767px) {
  .nosotros-card { flex: 0 0 240px; min-height: 190px; padding: 1.4rem 1.25rem; }
  .nosotros-marquee { padding-block: 1.5rem; }
}

/* — Touch: quitar efecto hover pegado — */
@media (hover: none) {
  .nosotros-card:hover {
    border-color: rgba(229,184,38,.2);
    background: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
    box-shadow: 0 4px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .nosotros-card:hover h3 { color: var(--white); }
  .nosotros-card:hover::after,
  .nosotros-card:hover::before { opacity: 0; transform: scaleX(0); }
}

/* ══════════════════════════════════════════════════════
   CANALES DE VENTA — 2 tarjetas premium (dark / gold)
   ══════════════════════════════════════════════════════ */
.canales-min { background: var(--ink); padding-block: clamp(5rem, 12vh, 9rem); }

/* cabecera centrada */
.min-head-center { margin-inline: auto; text-align: center; }
.min-head-center p { margin-inline: auto; }

/* grid de 2 columnas centradas */
.canales-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  gap: 1.75rem;
  justify-content: center;
  perspective: 1400px;
}

/* — Tarjeta — */
.canal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(229,184,38,.18);
  border-radius: 20px;
  padding: 2rem 1.85rem 1.85rem;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    border-color .4s ease,
    box-shadow .5s ease,
    background .4s ease;
}
/* línea de acento dorada superior que crece al hover */
.canal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
/* resplandor dorado de fondo */
.canal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% -10%, rgba(229,184,38,.16), transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.canal-card:hover {
  transform: translateY(-10px) rotateX(2.5deg);
  border-color: rgba(229,184,38,.5);
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 26px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(229,184,38,.12);
}
.canal-card:hover::before { transform: scaleX(1); }
.canal-card:hover::after  { opacity: 1; }

/* — Cabecera: icono + títulos — */
.canal-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.canal-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(229,184,38,.2), rgba(229,184,38,.06));
  border: 1px solid rgba(229,184,38,.32);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.canal-icon svg { width: 28px; height: 28px; stroke: var(--gold-light); }
.canal-card:hover .canal-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 22px rgba(229,184,38,.32);
}
.canal-titles h3 {
  color: var(--white); font-family: 'Sora', sans-serif;
  font-size: 1.18rem; font-weight: 700; line-height: 1.2; margin: 0 0 .2rem;
  transition: color .3s ease;
}
.canal-card:hover .canal-titles h3 { color: var(--gold-light); }
.canal-sub {
  display: block; color: var(--gold);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}

/* — Descripción — */
.canal-desc {
  position: relative; z-index: 1;
  color: rgba(255,255,255,.6);
  font-size: .92rem; line-height: 1.65; margin: 0 0 1.25rem;
}

/* — Lista de beneficios — */
.canal-list {
  position: relative; z-index: 1;
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: flex; flex-direction: column; gap: .65rem;
}
.canal-list li {
  position: relative;
  color: rgba(255,255,255,.82);
  font-size: .9rem; font-weight: 500;
  padding-left: 1.5rem;
}
.canal-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(229,184,38,.18);
}

/* Televentas: reparte los puntos de la lista a lo alto para equilibrar con la tarjeta del formulario */
.canales-grid > .canal-card:first-child .canal-list { flex: 1; justify-content: space-evenly; }

/* — CTA — */
.canal-cta {
  position: relative; z-index: 1;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--gold);
  font-family: 'Sora', sans-serif;
  font-size: .86rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none;
  padding: .7rem 1.3rem;
  border-radius: 100px;
  border: 1px solid rgba(229,184,38,.35);
  background: rgba(229,184,38,.06);
  transition: background .3s ease, border-color .3s ease, color .3s ease, gap .35s cubic-bezier(.22,1,.36,1);
}
.canal-cta svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.canal-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  gap: .8rem;
}
.canal-cta:hover svg { transform: translateX(4px); }

/* — Formulario de registro (dentro de Fuerza de Ventas) — */
.lead-title {
  position: relative; z-index: 1;
  color: var(--gold-light);
  font-family: 'Sora', sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 .9rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(229,184,38,.16);
}
.lead-form { display: flex; flex-direction: column; gap: .85rem; margin-top: .25rem; }
.lead-field { display: flex; flex-direction: column; gap: .35rem; }
.lead-field label {
  color: var(--gold);
  font-family: 'Sora', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.lead-field input,
.lead-field select {
  width: 100%;
  color: #E8ECF4;
  font-size: .92rem;
  padding: .68rem .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(229,184,38,.25);
  border-radius: 10px;
  outline: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.lead-field input::placeholder { color: rgba(255,255,255,.3); }
.lead-field input:focus,
.lead-field select:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(229,184,38,.14);
}
.lead-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* flecha dorada propia (la nativa no se puede tematizar) */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23E5B826'%20stroke-width='2'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 16px;
  padding-right: 2.4rem;
}
.lead-field select option { background: var(--ink-2); color: #E8ECF4; }
/* honeypot: fuera de la vista de humanos, visible para bots */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lead-submit { border: 1px solid rgba(229,184,38,.35); cursor: pointer; font: inherit; font-family: 'Sora', sans-serif; font-size: .86rem; font-weight: 700; }
.lead-submit:disabled { opacity: .55; cursor: wait; }
.lead-status { display: none; font-size: .85rem; line-height: 1.5; margin: 0; }
.lead-status.is-ok    { display: block; color: #7DDE92; }
.lead-status.is-error { display: block; color: #F0A6A6; }

/* — Responsive — */
@media (max-width: 780px) {
  .canales-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .canal-card { padding: 1.7rem 1.5rem 1.5rem; border-radius: 16px; }
  .canal-icon { width: 50px; height: 50px; }
  .canal-icon svg { width: 25px; height: 25px; }
  .canal-titles h3 { font-size: 1.08rem; }
}

/* — Touch: sin hover pegado — */
@media (hover: none) {
  .canal-card:hover { transform: none; }
}

/* — Accesibilidad — */
@media (prefers-reduced-motion: reduce) {
  .canal-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════
   PROVEEDORES — carrusel de logos en bucle infinito
   Mismo sistema que el marquee de Nosotros (CSS puro):
   2 sets idénticos + translateX(-50%) + pausa al hover.
   ══════════════════════════════════════════════════════ */
.proveedores-min { background: var(--ink-2); padding-block: clamp(5rem, 12vh, 9rem); }

.prov-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.75rem;        /* espacio para el lift en hover */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.prov-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  align-items: center;
  animation: provBelt var(--prov-duration, 100s) linear infinite;
  /* Capa propia en GPU → giro fluido sin repintar */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* el carrusel de logos NO se pausa al pasar el cursor: gira de forma continua */
@keyframes provBelt {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* — Chip de cada logo (panel claro para que los logos a color luzcan) — */
.prov-logo {
  flex: 0 0 auto;
  margin-right: 1.5rem;
  height: 116px;
  min-width: 158px;               /* ancho mínimo para que los logos cuadrados no queden estrechos */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.1rem;              /* ancho automático: el chip se ajusta a cada logo */
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(236,240,246,.92));
  border: 1px solid rgba(229,184,38,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease,
    border-color .4s ease;
}
.prov-logo img {
  height: 54px;                   /* altura fija → TODOS los logos lucen igual de altos */
  width: auto;
  max-width: 240px;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.prov-logo:hover {
  transform: translateY(-8px);
  border-color: rgba(229,184,38,.6);
  box-shadow:
    0 22px 46px rgba(0,0,0,.42),
    0 0 0 1px rgba(229,184,38,.25),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.prov-logo:hover img { transform: scale(1.06); }

/* — Responsive — */
@media (max-width: 767px) {
  .prov-logo {
    height: 96px; min-width: 124px;
    padding: 0 1.5rem; margin-right: 1rem; border-radius: 14px;
  }
  .prov-logo img { height: 44px; max-width: 188px; }
}

/* — Touch: sin hover pegado — */
@media (hover: none) {
  .prov-logo:hover { transform: none; }
}

/* — Accesibilidad: sin movimiento → logos en cuadrícula centrada (solo SET 1) — */
@media (prefers-reduced-motion: reduce) {
  .prov-marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .prov-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }
  .prov-logo { margin-right: 0; }
  .prov-logo[aria-hidden="true"] { display: none; }
}


/* badge estático (sin link WhatsApp) */
.nc-cta-badge {
  color: var(--gold-light);
  gap: .5rem;
  cursor: default;
}
.nc-cta-badge svg { width: 15px; height: 15px; transition: none; }
.nosotros-card:hover .nc-cta-badge svg { transform: none; }


/* ---- FAQ / Preguntas frecuentes ---- */
.faq-min { background: var(--ink); padding-block: clamp(5rem, 12vh, 9rem); }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-item {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.faq-item[open] {
  border-color: rgba(229,184,38,.4);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  color: var(--white);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--gold-light); }
.faq-q { transition: color .3s ease; }
/* icono +/- */
.faq-ico {
  position: relative;
  flex: 0 0 auto;
  width: 22px; height: 22px;
}
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.faq-ico::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-ico::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
/* respuesta */
.faq-a {
  padding: 0 1.5rem 1.35rem;
  color: rgba(255,255,255,.6);
  font-size: .94rem;
  line-height: 1.7;
}
.faq-a p { margin: 0; }
.faq-a a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(240,203,80,.4); transition: border-color .3s ease; }
.faq-a a:hover { border-bottom-color: var(--gold-light); }
.faq-item[open] .faq-a { animation: faqIn .4s ease; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-a { animation: none; }
}

/* ---- CONTACTO minimalista ---- */
.contact-min { background: var(--ink-2); padding-block: clamp(5rem, 12vh, 9rem); }
.contact-min-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.contact-min-info { display: flex; flex-direction: column; }
.cmi-row { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem .6rem 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 8px; transition: padding-left .35s cubic-bezier(.22,1,.36,1), background .35s ease; }
.cmi-row:hover { padding-left: .7rem; background: linear-gradient(90deg, rgba(229,184,38,.06), transparent 70%); }
.cmi-row strong { color: var(--gold); font-family: 'Sora', sans-serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; transition: color .3s ease; }
.cmi-row:hover strong { color: var(--gold-light); }
.cmi-row span { color: #E8ECF4; font-size: 1.02rem; line-height: 1.5; }
.cmi-row a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(229,184,38,.4); transition: color .2s ease; }
.cmi-row a:hover { color: var(--gold-light); }
.cmi-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .2rem; }
.cmi-social a {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.cmi-social a img {
  width: 40px; height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.3));
  transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease;
  will-change: transform;
}
.cmi-social a:hover img,
.cmi-social a:focus-visible img {
  transform: scale(1.22) translateY(-3px);
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.38));
}
.cmi-social a:active img { transform: scale(1.08); }
.btn.btn-lg { margin-top: 2rem; align-self: flex-start; font-size: 1.05rem; padding: 1rem 1.9rem; }
.contact-min-map {
  border-radius: 18px; overflow: hidden; min-height: 340px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.contact-min-map:hover {
  transform: translateY(-4px);
  border-color: rgba(229,184,38,.35);
  box-shadow: 0 38px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(229,184,38,.12);
}
.contact-min-map iframe {
  display: block; height: 100%; min-height: 340px;
  filter: invert(.9) hue-rotate(180deg) brightness(.95) contrast(.95);
  transform: scale(1.01);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.contact-min-map:hover iframe { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .contact-min-map:hover iframe { transform: scale(1.01); }
}

/* ---- Footer en near-black ---- */
.footer { background: var(--ink-2); border-top: 1px solid rgba(255,255,255,.07); }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  /* En móvil el story NO se fija (lo controla el JS); se auto-reproduce el morph */
  .story-stage { height: 100vh; height: 100svh; }
  .story-headline { font-size: clamp(2rem, 10.5vw, 3.8rem); }
  .contact-min-grid { grid-template-columns: 1fr; }
  .contact-min-map { min-height: 280px; }
  .contact-min-map iframe { min-height: 280px; }
}
@media (max-width: 600px) {
  .catalog-row { grid-template-columns: auto 1fr; gap: 1rem; }
  .cr-go { display: none; }
  .scroll-hint { bottom: 16px; }
}

/* ============================================================
   FX PREMIUM — tilt 3D, botones magnéticos, parallax, zoom
   (la lógica vive en fx.js; aquí solo preparamos las capas)
   ============================================================ */
[data-magnetic] { will-change: transform; }
[data-tilt]     { will-change: transform; }
.hero-3d        { will-change: transform; }

/* el panel 3D del hero suaviza su vuelta al centro tras el parallax */
.hero-3d.fx-parallax-reset { transition: transform .6s cubic-bezier(.22,1,.36,1); }

/* zoom sutil del logo del footer */
.footer-logo-img {
  transition: transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease;
  will-change: transform;
}
.footer-logo:hover .footer-logo-img {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 6px 16px rgba(229,184,38,.45));
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo:hover .footer-logo-img { transform: none; }
}

/* ============================================================
   MÓVIL — refinamiento visual premium (componentes actuales)
   Se ubica al final para tener prioridad sobre reglas previas.
   ============================================================ */
@media (max-width: 767px) {
  /* — Header compacto y proporcionado — */
  .header .container { gap: .9rem; }
  .logo { gap: .55rem; }
  .logo-img { width: 44px; height: 44px; outline-offset: 1px; }
  .logo-text { font-size: 1.42rem; letter-spacing: -.01em; }

  /* — Menú móvil más espaciado y elegante — */
  .nav-overlay { gap: .35rem; }
  .nav-overlay .nav-link { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; }

  /* — Hero: aire, jerarquía y respiración — */
  .hero .container { gap: 2.4rem; padding-block: 2.5rem 2rem; }
  .hero-content { max-width: 100%; }
  .hero-eyebrow { font-size: .67rem; letter-spacing: .11em; margin-bottom: 1.1rem; }
  .hero-slogan-title { margin-bottom: 1.3rem; max-width: 17ch; gap: .04em; }
  .hst-line { font-size: clamp(2rem, 8.6vw, 2.95rem); line-height: 1.08; }
  .hero-sub { font-size: 1rem; line-height: 1.55; margin-bottom: 2rem; max-width: 100%; }

  /* — Botones full-width tipo app premium — */
  .hero-actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .7rem; width: 100%; margin-bottom: 2.2rem; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 1rem 1.4rem; font-size: 1rem; }

  /* — Panel del video del hero (16:9) — */
  .hero-3d { border-radius: 22px; }

  /* — Encabezados de sección — */
  .min-head { margin-bottom: 2.1rem; }
  .min-eyebrow { font-size: .67rem; letter-spacing: .2em; margin-bottom: .9rem; }
  .min-eyebrow::before { width: 20px; margin-right: .55rem; }
  .display-lg { font-size: clamp(1.95rem, 8.2vw, 2.7rem); margin-bottom: .9rem; }
  .min-head p { font-size: 1rem; line-height: 1.6; }

  /* — Tarjetas Nosotros — */
  .nosotros-track .nosotros-card { margin-right: 1rem; }
  .nosotros-card { padding: 1.6rem 1.4rem; border-radius: 14px; }
  .nosotros-card h3 { font-size: 1.05rem; }
  .nosotros-card p { font-size: .92rem; }

  /* — Catálogo (lista editorial) — */
  .catalog-row { padding-block: 1.3rem; gap: .9rem; }
  .cr-num { font-size: .9rem; }
  .cr-name { font-size: 1.3rem; letter-spacing: -.005em; }

  /* — FAQ acordeón — */
  .faq-list { gap: .8rem; }
  .faq-item summary { padding: 1.05rem 1.15rem; font-size: .95rem; gap: .75rem; }
  .faq-item summary { line-height: 1.4; }
  .faq-a { padding: 0 1.15rem 1.15rem; font-size: .9rem; }
  .faq-ico { width: 20px; height: 20px; }

  /* — Contacto — */
  .cmi-row { padding-block: .95rem; }
  .cmi-row span { font-size: .98rem; }
  .cmi-social { gap: .9rem; }
  .cmi-social a img { width: 38px; height: 38px; }
  .btn.btn-lg { width: 100%; justify-content: center; align-self: stretch; margin-top: 1.6rem; }

  /* — Footer ordenado — */
  .footer-social { gap: .75rem; }
  .footer-bottom { gap: .35rem; }
}

/* — Teléfonos pequeños — */
@media (max-width: 430px) {
  .hst-line { font-size: clamp(1.78rem, 9.4vw, 2.4rem); }
  .hero-sub { font-size: .96rem; }
  .display-lg { font-size: clamp(1.7rem, 9vw, 2.3rem); }
  .nosotros-card { padding: 1.45rem 1.25rem; }
  .cr-name { font-size: 1.18rem; }
  .float-wa { height: 56px; padding: 0 16px 0 12px; gap: 8px; }
  .float-wa svg { width: 26px; height: 26px; }
  .float-wa-title { font-size: .85rem; }
  .float-wa-sub { font-size: .64rem; }
  .scroll-top-btn { bottom: 5rem; }
}

/* ════════════════════════════════════════════
   OPTIMIZACIÓN MÓVIL — misma estética, menos GPU/batería.
   Solo dispositivos táctiles; en PC no cambia nada.
   Se congelan animaciones decorativas de fondo (quedan como
   textura fija) y se quita el blur de las entradas; los
   carruseles y transiciones principales se conservan.
   ════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Iconos flotantes de las tarjetas (≈60 animadores): quedan estáticos */

  /* Fondos grandes del hero: blooms y glow fijos (mismo look, cero costo) */
  .hero-bloom .bloom { animation: none; }
  .hero-3d-glow { animation: none; }

  /* Texto dorado del eslogan: gradiente fijo (sin repintar el título) */
  .hbt-gold { animation: none; background-position: 65% 0; }

  /* Entradas al hacer scroll: fade + rise sin blur (más fluido en móvil) */
  .reveal {
    filter: none;
    transition:
      opacity  .9s cubic-bezier(0.16,1,0.3,1),
      transform 1s  cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
  }
  .reveal.is-visible { filter: none; }
}