/* ==========================================================================
   ACTIVA — Landing page
   Sistema de diseño basado en activa_brandbook_maestro_v1
   ========================================================================== */

:root {
  /* Brand colors */
  --c-green: #65F22E;
  --c-green-ink: #1F8A0E;
  --c-aqua: #15D8A8;
  --c-blue: #1E7BFF;
  --c-carbon: #151921;
  --c-carbon-2: #0F172A;
  --c-white: #FFFFFF;

  /* Tints (from brandbook panels) */
  --c-tint-slate: #F8FAFC;
  --c-tint-blue: #EFF6FF;
  --c-tint-cyan: #ECFEFF;
  --c-tint-blue-2: #DBEAFE;

  /* Text */
  --c-text: var(--c-carbon);
  --c-text-soft: #4B5565;
  --c-text-faint: #8A93A3;
  --c-text-on-dark: #F8FAFC;
  --c-text-on-dark-soft: #AEB8C9;

  /* Borders */
  --c-border: #E7EAF0;
  --c-border-dark: #232A38;

  /* Gradient (símbolo oficial) — reservado para acentos, nunca fondo dominante */
  --grad-activa: linear-gradient(120deg, #65F22E 0%, #15D8A8 50%, #1E7BFF 100%);
  --grad-activa-soft: linear-gradient(120deg, rgba(101,242,46,0.16) 0%, rgba(21,216,168,0.16) 50%, rgba(30,123,255,0.16) 100%);

  /* Radii — formas suaves, radios amplios */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-28: 112px;

  /* Type */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 2.1rem + 3.2vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-caption: 0.78rem;

  /* Shadows — sutiles, nunca pesadas */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.10);

  --max-width: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

body {
  font-family: var(--font-body);
  background: var(--c-tint-slate);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

section { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.eyebrow.on-dark { color: var(--c-aqua); }
.eyebrow.left { display: flex; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-12);
}
.section-head h2 { margin-top: var(--sp-3); }
.section-head p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--c-text-soft); }
.section-head.center { margin-inline: auto; text-align: center; }

/* reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--c-carbon);
  color: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #262E3D; box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn-ghost {
  background: var(--c-white);
  color: var(--c-carbon);
  border-color: var(--c-border);
}
.btn-ghost:hover { border-color: var(--c-carbon); transform: translateY(-2px); }

.btn-ghost-dark {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.25);
}
.btn-ghost-dark:hover { border-color: var(--c-white); transform: translateY(-2px); }

.btn-gradient {
  background: var(--grad-activa);
  background-clip: padding-box;
  color: var(--c-carbon-2);
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(21, 216, 168, 0.28);
}
.btn-gradient:hover { box-shadow: 0 10px 26px rgba(21, 216, 168, 0.36); transform: translateY(-2px); }

.btn-lg { padding: 18px 32px; font-size: 1rem; }
.btn-sm { padding: 11px 20px; font-size: var(--fs-caption); }
.btn-icon { width: 18px; height: 18px; flex: none; }

/* ---------- Nav ---------- */
/* Sin fondo/franja propia: el renglón del nav es 100% invisible, de borde a
   borde y en toda la página (arriba, con scroll, sobre secciones claras u
   oscuras, siempre). Lo único visible son las dos píldoras (.brand y
   .nav-pill de abajo), que ya traen su propio fondo sólido/difuminado
   siempre encendido — así nunca hay una barra/franja de fondo detrás de
   ellas, ni un hueco, ni una sombra ni línea de ningún tipo. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: var(--sp-4) 0;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
}
.nav-inner {
  pointer-events: auto;
  /* El contenido real compactado (logo + links + login + botón) mide
     ~1140px de ancho mínimo a partir de aquí; el tope solo importa en
     pantallas muy anchas (no reduce el pill, solo evita que se estire de
     más). */
  width: min(100% - 24px, 1340px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: 1.05rem;
  flex: none;
}
/* En la barra de navegación (fija sobre el contenido), el logo necesita su
   propio fondo blanco para no perderse sobre secciones con color/imagen
   detrás, tanto en compu como en celular. Fondo 100% sólido (sin transparencia
   ni backdrop-filter) para que nunca se alcance a ver ningún tono de la
   sección de fondo (p.ej. el azul oscuro de "Para empresas") detrás del pill.
   align-self: stretch hace que el pill del logo tenga exactamente el mismo
   alto que el pill de links/login de al lado (nav-pill); sin esto, el logo
   queda más bajo y el nav-inner lo centra dejando un hueco arriba/abajo que,
   mientras el nav no tiene fondo propio (antes de hacer scroll), deja ver el
   color/imagen de la sección detrás justo pegado al pill blanco. */
.nav .brand {
  background: var(--c-white);
  border: 1px solid rgba(231,234,240,0.9);
  border-radius: var(--r-pill);
  padding: 6px 16px 6px 6px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease);
  align-self: stretch;
}
.nav.scrolled .brand { box-shadow: var(--shadow-md); }
/* El círculo (fondo/borde/sombra + recorte) vive en el contenedor .brand-badge,
   NUNCA junto con object-fit en el propio <img>: combinar border-radius +
   object-fit + padding directamente en un <img> es una mezcla frágil que en
   algunos navegadores desplaza o recorta mal el contenido (la "A" aparecía
   descentrada/cortada dentro del círculo). Separando el círculo (que solo
   recorta) de la imagen (que solo hace contain) el resultado es consistente
   en cualquier navegador. */
.brand-badge {
  height: 30px;
  width: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-badge img {
  width: 100%;
  height: 100%;
  display: block;
  /* El PNG fuente no es perfectamente cuadrado; sin esto se estira/distorsiona,
     dando la impresión de que la marca no se ve completa. */
  object-fit: contain;
}

.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(231,234,240,0.9);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 6px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled .nav-pill { box-shadow: var(--shadow-md); background: rgba(255,255,255,0.92); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-links a {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-text-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-links a:hover { background: var(--c-tint-blue); color: var(--c-blue); }
.nav-links a.active-link { color: var(--c-blue); background: var(--c-tint-blue); }

.nav-cta { display: flex; align-items: center; gap: var(--sp-2); position: relative; flex: none; }

/* Login dropdown */
.nav-login { position: relative; }
.nav-login-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-login-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-login-menu a {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-text);
  transition: background 0.2s var(--ease);
}
.nav-login-menu a:hover { background: var(--c-tint-blue); color: var(--c-blue); }

.nav-login-mobile { display: none; }
/* Agrupa el ícono de login y el de hamburguesa para que queden pegados,
   uno junto al otro, en vez de repartidos por separado con espacio entre. */
.nav-mobile-actions { display: flex; align-items: center; gap: var(--sp-2); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-tint-slate);
  border: 1px solid var(--c-border);
  flex: none;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* Mobile nav sheet */
.mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  padding: 96px var(--sp-6) var(--sp-8);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-sheet.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-sheet a {
  font-size: 1.5rem;
  font-weight: 800;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border);
}
.mobile-sheet .btn { margin-top: var(--sp-8); width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding: 168px 0 var(--sp-20);
  background:
    radial-gradient(560px 420px at 88% 6%, rgba(101,242,46,0.14), transparent 60%),
    radial-gradient(620px 480px at 6% 30%, rgba(30,123,255,0.12), transparent 60%),
    var(--c-tint-slate);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-16);
  align-items: center;
}

.audience-switch {
  display: inline-flex;
  padding: 5px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-8);
}
.audience-switch button {
  border: 0;
  background: transparent;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-text-faint);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.audience-switch button.active {
  background: var(--c-carbon);
  color: var(--c-white);
}

.hero-headline {
  font-size: var(--fs-display);
  line-height: 0.98;
}
.hero-headline .accent {
  background: var(--grad-activa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.audience-panel { display: none; }
.audience-panel.active { display: block; }

.hero-lead {
  margin-top: var(--sp-6);
  font-size: var(--fs-lead);
  color: var(--c-text-soft);
  max-width: 520px;
}

.hero-actions {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero-stats {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
}
.stat-highlight {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-7);
  border-radius: var(--r-pill);
  background: var(--c-tint-blue);
  color: var(--c-blue);
  font-size: 1.15rem;
  font-weight: 800;
}
.stat-highlight b { font-size: 1.6rem; font-weight: 900; }

/* Hero visual */
.hero-visual {
  position: relative;
  height: 560px;
}
.hero-blob {
  position: absolute;
  inset: 6% 4%;
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-activa-soft);
}
.hero-blob img {
  position: relative;
  width: 46%;
  filter: drop-shadow(0 24px 40px rgba(30,123,255,0.25));
  animation: float 6s ease-in-out infinite;
}

.sticker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  color: var(--c-white);
  animation: float 5.5s ease-in-out infinite;
}
.sticker svg { width: 46%; height: 46%; }
.sticker.s1 { top: -4%; left: 4%; width: 92px; height: 92px; background: var(--c-blue); transform: rotate(-8deg); animation-delay: 0.2s; }
.sticker.s2 { top: 14%; right: -6%; width: 78px; height: 78px; background: var(--c-green); color: var(--c-carbon); transform: rotate(10deg); animation-delay: 1s; }
.sticker.s3 { bottom: 10%; left: -8%; width: 84px; height: 84px; background: var(--c-carbon); transform: rotate(-6deg); animation-delay: 1.8s; }
.sticker.s4 { bottom: -5%; right: 10%; width: 96px; height: 96px; background: var(--c-aqua); color: var(--c-carbon); transform: rotate(8deg); animation-delay: 0.6s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); }
}

/* ---------- Marquee (convenios) ---------- */
.marquee-wrap {
  padding: var(--sp-10) 0;
  background: var(--c-white);
  border-block: 1px solid var(--c-border);
}
.marquee-label {
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--sp-8);
}
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  animation: scroll-x 48s linear infinite;
  flex: none;
  padding-inline: var(--sp-5);
  padding-block: var(--sp-3);
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Chip uniforme: mismo tamaño de caja para los 6 logos,
   sin importar la relación de aspecto o el fondo del archivo original */
.marquee-chip {
  flex: none;
  width: 208px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.marquee-chip:hover, .marquee-chip.is-selected {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--shadow-md);
  border-color: var(--c-blue);
}
.marquee-chip img {
  transition: filter 0.25s var(--ease);
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}
@keyframes scroll-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Cómo funciona ---------- */
.how {
  padding: var(--sp-28) 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.step-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.step-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--step-accent, var(--c-blue));
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.step-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.step-num {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--step-accent, var(--c-blue));
}
.step-logo {
  width: 40px;
  height: 40px;
  flex: none;
  background-color: var(--step-accent, var(--c-blue));
  -webkit-mask: url(../img/brand/activa-symbol.png) center / contain no-repeat;
  mask: url(../img/brand/activa-symbol.png) center / contain no-repeat;
}
.step-card:nth-child(1) { --step-accent: var(--c-blue); }
.step-card:nth-child(2) { --step-accent: var(--c-carbon); }
.step-card:nth-child(3) { --step-accent: var(--c-aqua); }
.step-card:nth-child(4) { --step-accent: var(--c-green); }
.step-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.step-card p { color: var(--c-text-soft); font-size: var(--fs-small); }

/* Swipe hint: only shown on narrow viewports, next to horizontally-scrollable card rows */
.swipe-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-5);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-text-faint);
}
.swipe-hint svg { width: 14px; height: 14px; }

/* ---------- Convenios grid ---------- */
.convenios { padding: var(--sp-28) 0; background: var(--c-white); border-block: 1px solid var(--c-border); }
.convenios-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.venues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.venue-card {
  --venue-accent: var(--c-blue);
  --venue-accent-tint: var(--c-tint-blue);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.venue-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.venue-media {
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: linear-gradient(150deg, var(--venue-accent-tint), var(--c-white) 70%);
}
/* Tile uniforme dentro de la card: mismo tamaño/marco para
   los 6 logos, sin importar su fondo o relación de aspecto original */
.venue-logo-tile {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--c-white);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.venue-logo-tile img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); }
.venue-body { position: relative; padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; border-top: 3px solid var(--venue-accent); }
.venue-body p { margin-top: auto; padding-top: var(--sp-3); }
.venue-tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--venue-accent, var(--c-blue));
  background: var(--venue-accent-tint, var(--c-tint-blue));
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.venue-body h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.venue-body p { font-size: var(--fs-small); color: var(--c-text-soft); }

/* ---------- Empresas panel ---------- */
.empresas {
  padding: var(--sp-28) 0;
  background: var(--c-carbon-2);
  color: var(--c-text-on-dark);
  overflow: hidden;
}
.empresas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.empresas h2 { color: var(--c-white); }
.empresas .lead { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--c-text-on-dark-soft); max-width: 480px; }

.empresas-list { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.empresas-list li {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-border-dark);
}
.empresas-list li:first-child { border-top: 0; }
.check {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-activa);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check svg { width: 16px; height: 16px; color: var(--c-carbon-2); }
.empresas-list p { color: var(--c-text-on-dark-soft); font-size: var(--fs-small); }
.empresas-list strong { display: block; color: var(--c-white); font-weight: 700; margin-bottom: 2px; }

.empresas-actions { margin-top: var(--sp-10); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.empresas-card {
  position: relative;
  background: #161D2B;
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.empresas-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(46, 196, 130, 0.16), transparent 55%),
    linear-gradient(-30deg, rgba(59, 130, 246, 0.14), transparent 60%);
  pointer-events: none;
}
.empresas-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  pointer-events: none;
}
.empresas-card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-border-dark);
}
.empresas-card-title { font-weight: 900; font-size: var(--fs-h3); color: var(--c-white); }
.empresas-metric-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8) var(--sp-6);
}
.empresas-metric-grid.five .empresas-metric:last-child { grid-column: 1 / -1; }
.empresas-card-note { margin-top: var(--sp-6); text-align: right; font-size: var(--fs-caption); color: var(--c-text-on-dark-soft); }
.empresas-metric b { font-size: 2.5rem; font-weight: 800; display: block; }
.empresas-metric span { font-size: var(--fs-small); color: var(--c-text-on-dark-soft); }
.dashboard-preview .empresas-metric span { color: var(--c-text-soft); }

/* ---------- Planes ---------- */
.planes { padding: var(--sp-28) 0; }
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}
.plan-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan-example-note { display: block; font-size: var(--fs-caption); color: var(--c-text-soft); margin: 0 0 var(--sp-4); }
.plan-card.featured {
  background: var(--c-carbon-2);
  color: var(--c-white);
  border-color: var(--c-carbon-2);
  position: relative;
}
.plan-badge {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  background: var(--grad-activa);
  color: var(--c-carbon-2);
  font-size: var(--fs-caption);
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--r-pill);
}
.plan-name { font-size: var(--fs-caption); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-blue); }
.plan-card.featured .plan-name { color: var(--c-aqua); }
.plan-price { margin-top: var(--sp-4); display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-price .period { font-size: var(--fs-small); color: var(--c-text-faint); font-weight: 600; }
.plan-card.featured .plan-price .period { color: var(--c-text-on-dark-soft); }
.plan-desc { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-text-soft); }
.plan-card.featured .plan-desc { color: var(--c-text-on-dark-soft); }
.plan-features { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.plan-features li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); }
.plan-features svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-blue); }
.plan-card.featured .plan-features svg { color: var(--c-aqua); }
.plan-card .btn { margin-top: var(--sp-8); width: 100%; }

.plans-extra {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.plans-extra.single { grid-template-columns: 1fr; }
.stats-block { margin-top: var(--sp-16); }
.plans-extra-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  background: var(--c-tint-slate);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}
.plans-extra-card.muted {
  background: transparent;
  border-style: dashed;
}
.plans-extra-tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--sp-2);
}
.plans-extra-card.muted .plans-extra-tag { color: var(--c-text-faint); }
.plans-extra-card h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); }
.plans-extra-card p { font-size: var(--fs-small); color: var(--c-text-soft); max-width: 42ch; }
.plans-extra-card .btn { flex: none; }

/* ---------- CTA final ---------- */
.cta-final {
  padding: var(--sp-28) 0;
  text-align: center;
}
.cta-final-panel {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-20) var(--sp-8);
  position: relative;
  overflow: hidden;
}
.cta-final-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 260px at 12% 20%, rgba(101,242,46,0.12), transparent 60%),
    radial-gradient(420px 260px at 88% 80%, rgba(30,123,255,0.12), transparent 60%);
}
.cta-final-panel > * { position: relative; }
.cta-final h2 { font-size: var(--fs-h2); max-width: 640px; margin-inline: auto; }
.cta-final p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--c-text-soft); max-width: 480px; margin-inline: auto; }
.cta-final-actions { margin-top: var(--sp-8); display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--c-carbon); color: var(--c-text-on-dark); padding: var(--sp-16) 0 var(--sp-8); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-10);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--c-border-dark);
}
.footer-brand .brand { color: var(--c-white); }
/* En el footer el símbolo va sin marco blanco: se deja "flotando" sobre el
   fondo oscuro, tanto en compu como en celular. */
.footer-brand .brand-badge { background: transparent; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
.footer-brand p { margin-top: var(--sp-4); color: var(--c-text-on-dark-soft); font-size: var(--fs-small); max-width: 280px; }
.footer-col h4 { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-on-dark-soft); margin-bottom: var(--sp-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-size: var(--fs-small); color: var(--c-text-on-dark-soft); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--c-white); }
.footer-bottom {
  padding-top: var(--sp-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--c-text-on-dark-soft);
}
.footer-socials { display: flex; gap: var(--sp-2); }
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-socials svg { width: 16px; height: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 420px; order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .empresas-grid { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .plans-extra { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .plans-extra-card { flex-direction: column; align-items: flex-start; }
  .plans-extra-card .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .venues-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero { padding-top: 140px; }
  .convenios-head { flex-direction: column; align-items: flex-start; }
  .venues-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero-stats { gap: var(--sp-6); }
  .empresas-metric-grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* Cards row -> horizontal swipe carousel: less vertical scrolling, easier to compare items at a glance.
     Cada tarjeta queda centrada en pantalla (con un poco de la anterior/siguiente asomando a los lados),
     alineada con el título centrado de la sección, en vez de pegada al borde izquierdo. */
  .steps,
  .plans-grid {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 5%;
    padding-inline: 5%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--sp-1);
  }
  .steps::-webkit-scrollbar,
  .plans-grid::-webkit-scrollbar { display: none; }
  .steps .step-card,
  .plans-grid .plan-card {
    scroll-snap-align: center;
    flex: 0 0 100%;
    min-width: 0;
  }
  /* Undo the tablet-breakpoint centered/capped-width stack so the carousel can use the full phone width */
  .plans-grid { max-width: none; margin-inline: 0; }
  .swipe-hint { display: inline-flex; }

  /* Hero visual: shrink and tuck in the stickers so they don't overflow/clip on narrow screens */
  .hero-visual { height: 320px; }
  .hero-blob { inset: 8% 10%; }
  .sticker.s1 { top: 0; left: 0; width: 58px; height: 58px; }
  .sticker.s2 { top: 10%; right: 0; width: 50px; height: 50px; }
  .sticker.s3 { bottom: 8%; left: 0; width: 54px; height: 54px; }
  .sticker.s4 { bottom: 0; right: 6%; width: 60px; height: 60px; }

  .empresas-card { padding: var(--sp-6); min-height: 0; }
  .cta-panel { padding: var(--sp-6); }
  .cta-final-panel { padding: var(--sp-10) var(--sp-5); }
}

/* Nav: compactado para que el pill completo (todos los links + login +
   Agendar demo) quepa sin recortarse en ventanas "no pantalla completa"
   (p.ej. 1280px de ancho, tamaño típico de laptop sin maximizar), en vez de
   colapsar al menú hamburguesa tan pronto. Se reduce gap/padding/tamaño de
   letra de los links y de los botones — todo el contenido sigue presente,
   solo más compacto. */
.nav-links { gap: 2px; }
.nav-links a { padding: 8px 10px; font-size: 0.82rem; }
.nav-cta { gap: var(--sp-1); }
.nav-cta .btn-sm { padding: 9px 14px; font-size: 0.72rem; gap: 4px; }
.nav .brand { padding: 6px 14px 6px 6px; font-size: 0.95rem; }
/* Por debajo de este ancho, incluso el pill compactado ya no cabe sin
   recortarse contra el borde de la ventana (p.ej. "Agendar demo" cortado a la
   mitad). Medido con el contenido real compactado (~1138px + márgenes),
   con margen de sobra. Por debajo de eso se usa el menú hamburguesa (que sí
   cabe siempre). */
@media (max-width: 1200px) {
  .nav-pill { display: none; }
  .nav-toggle { display: flex; }
  .nav-login-mobile { display: flex; }
  .nav-login-mobile .nav-login-menu { right: -6px; }
}

/* ==========================================================================
   SUBPAGES — Buscar establecimientos / Para empresas / Para colaboradores /
   Quiénes somos
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-text-faint);
  margin-bottom: var(--sp-5);
  transition: color 0.2s var(--ease);
}
.back-link:hover { color: var(--c-text); }
.back-link svg { width: 15px; height: 15px; }

.page-hero {
  padding: 168px 0 var(--sp-16);
  background:
    radial-gradient(560px 420px at 88% 6%, rgba(101,242,46,0.14), transparent 60%),
    radial-gradient(620px 480px at 6% 30%, rgba(30,123,255,0.12), transparent 60%),
    var(--c-tint-slate);
  overflow: hidden;
}
.page-hero .container { max-width: 760px; text-align: center; }
.page-hero.wide .container { max-width: 900px; }
.page-hero .back-link { justify-content: center; }
.page-hero h1 { font-size: var(--fs-h2); margin-top: var(--sp-3); }
.page-hero p.lead { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--c-text-soft); }
.page-hero .hero-actions { margin-top: var(--sp-8); justify-content: center; }
.page-hero.on-dark { background: var(--c-carbon); }
.page-hero.on-dark p.lead { color: var(--c-text-on-dark-soft); }

.content-section { padding: var(--sp-28) 0; background: var(--c-white); }
.content-section.alt { background: var(--c-tint-slate); border-block: 1px solid var(--c-border); }
.content-section.on-dark { background: var(--c-carbon); color: var(--c-text-on-dark); }
.content-section.on-dark .section-head p { color: var(--c-text-on-dark-soft); }
.content-section.tight { padding: var(--sp-16) 0; }

/* ---------- Buscar establecimientos ---------- */
.search-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-10);
  padding: var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.search-toolbar-fields { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1; }
.search-input-wrap { position: relative; flex: 1; min-width: 220px; }
.search-input-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--c-text-faint); }
.search-input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--c-tint-slate);
  font-size: var(--fs-small);
  font-weight: 600;
}
.search-input:focus { outline: 2px solid var(--c-blue); background: var(--c-white); }
.filter-select {
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--c-tint-slate);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-text-soft);
}
.filter-select:focus { outline: 2px solid var(--c-blue); }
.view-toggle { display: inline-flex; padding: 5px; background: var(--c-tint-slate); border-radius: var(--r-pill); flex: none; }
.view-toggle button {
  border: 0;
  background: transparent;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-text-faint);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.view-toggle button.active { background: var(--c-carbon); color: var(--c-white); }

.results-count { font-size: var(--fs-small); font-weight: 700; color: var(--c-text-faint); margin-bottom: var(--sp-5); }

.establecimientos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.establecimiento-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.establecimiento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.establecimiento-card { position: relative; }
.establecimiento-tokens {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--c-blue);
  background: var(--c-tint-blue);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.establecimiento-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); padding-right: 96px; }
.establecimiento-logo {
  width: 56px; height: 56px; border-radius: var(--r-md);
  overflow: hidden; flex: none; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; background: var(--c-white);
}
.establecimiento-logo img { width: 100%; height: 100%; object-fit: cover; }
.establecimiento-head h3 { font-size: 1.05rem; }
.establecimiento-card p.desc { font-size: var(--fs-small); color: var(--c-text-soft); margin-bottom: var(--sp-3); }
.establecimiento-sucursales-count {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-blue);
  background: var(--c-tint-blue);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.establecimiento-sucursales {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 132px;
  overflow-y: auto;
  padding: var(--sp-3);
  margin-top: auto;
  background: var(--c-bg-soft, #F8FAFC);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  scrollbar-width: thin;
}
.establecimiento-sucursal { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-caption); color: var(--c-text-soft); }
.establecimiento-sucursal svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--c-blue); }
.no-results { text-align: center; padding: var(--sp-20) 0; color: var(--c-text-faint); font-weight: 600; }

.map-view { display: none; }
.map-view.active { display: block; }
.establecimientos-grid.hidden-view { display: none; }
#establecimientos-map {
  width: 100%;
  height: 560px;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  background: var(--c-tint-slate);
}
.leaflet-popup-content b { display: block; margin-bottom: 2px; }
.leaflet-popup-content span { font-size: 12px; color: var(--c-text-soft); }
.leaflet-popup-content span.popup-address { display: block; margin-top: 4px; color: var(--c-text); }

/* ---------- Para empresas / Para colaboradores — CTA panel ---------- */
.cta-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-10);
  align-items: center;
  background: var(--c-carbon);
  color: var(--c-text-on-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
}
.cta-panel h3 { font-size: var(--fs-h3); color: var(--c-white); }
.cta-panel p { margin-top: var(--sp-3); color: var(--c-text-on-dark-soft); }
.cta-panel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.cta-panel-note { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--c-text-on-dark-soft); }
.cta-panel-note a { color: var(--c-text-on-dark); text-decoration: underline; }

/* ---------- Para colaboradores — login + dashboard preview ---------- */
.login-box {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 420px;
  margin-inline: auto;
}
.login-box .lock-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-activa);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
  color: var(--c-white);
}
.login-box .lock-icon svg { width: 24px; height: 24px; }
.login-box h3 { font-size: 1.15rem; }
.login-box p { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--c-text-soft); }
.login-box form { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.login-box .btn { width: 100%; }
.login-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-text-faint);
  background: none;
  padding: 0;
  border-radius: 0;
  display: block;
}

/* ---------- Login modal (dropdown "Soy colaborador" / "Soy empresa") ---------- */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease);
}
.login-modal.open { opacity: 1; visibility: visible; }
.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.login-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s var(--ease);
}
.login-modal.open .login-modal-panel { transform: translateY(0) scale(1); }
.login-modal-close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.login-modal-close:hover { background: var(--c-tint-slate); color: var(--c-text); }
.login-modal-close svg { width: 16px; height: 16px; }
body.modal-open { overflow: hidden; }

.dashboard-preview {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.dashboard-preview-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-5); }
.dashboard-preview-head span { font-weight: 800; }
.dashboard-preview-head .tag { font-size: var(--fs-caption); font-weight: 700; color: var(--c-text-faint); background: var(--c-tint-slate); padding: 5px 12px; border-radius: var(--r-pill); }

/* ---------- Refer a friend / empresa form ---------- */
.refer-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
  max-width: 640px;
  margin-inline: auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: var(--fs-caption); font-weight: 700; color: var(--c-text-soft); }
.form-field input, .form-field textarea {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-tint-slate);
  font-size: var(--fs-small);
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--c-blue); background: var(--c-white); }
.form-field textarea { resize: vertical; min-height: 90px; }
.form-actions { grid-column: 1 / -1; margin-top: var(--sp-2); }
.form-actions .btn { width: 100%; }
.form-success {
  display: none;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-tint-cyan);
  color: var(--c-carbon);
  font-size: var(--fs-small);
  font-weight: 600;
}
.form-success.visible { display: block; }

/* ---------- Quiénes somos ---------- */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.about-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.about-card .about-num { font-size: var(--fs-caption); font-weight: 800; color: var(--c-blue); letter-spacing: 0.05em; text-transform: uppercase; }
.about-card h3 { margin-top: var(--sp-3); font-size: 1.1rem; }
.about-card p { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--c-text-soft); }

.stats-title {
  text-align: center;
  color: var(--c-green);
  font-weight: 900;
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-8);
}
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); text-align: center; }
.about-stats .stat b { font-size: var(--fs-h3); display: block; }
.about-stats .stat span { font-size: var(--fs-small); color: var(--c-text-soft); }

@media (max-width: 1024px) {
  .establecimientos-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-panel { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

@media (max-width: 720px) {
  .establecimientos-grid { grid-template-columns: 1fr; }
  .search-toolbar { flex-direction: column; align-items: stretch; }
  .search-toolbar-fields { flex-direction: column; }
  .view-toggle { align-self: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  #establecimientos-map { height: 380px; }
  .page-hero { padding: 120px 0 var(--sp-10); }
  .login-box { padding: var(--sp-6); }
  .refer-card { padding: var(--sp-6); }
}

/* ---------- Extra-small phones ---------- */
@media (max-width: 480px) {
  .hero-actions .btn,
  .page-hero .hero-actions .btn,
  .cta-panel-actions .btn,
  .cta-final-actions .btn,
  .empresas-actions .btn {
    width: 100%;
  }
  .hero-visual { height: 260px; }
  .sticker.s1 { width: 48px; height: 48px; }
  .sticker.s2 { width: 42px; height: 42px; }
  .sticker.s3 { width: 44px; height: 44px; }
  .sticker.s4 { width: 50px; height: 50px; }
  .plan-card { padding: var(--sp-6); }
  .step-card { padding: var(--sp-5); }
  .login-box { padding: var(--sp-5); max-width: none; }
  .empresas-card { padding: var(--sp-5); }
  .cta-panel { padding: var(--sp-5); }
}