/* ===========================
   Municipio Inteligente Pinamar
   styles.css
   =========================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --green-bright: #4ade80;
  --green-mid: #22c55e;
  --green-dark: #166534;
  --green-deeper: #15803d;
  --amber: #fbbf24;
  --bg-main: #040d08;
  --text-primary: #e8f5ec;
  --text-muted: rgba(232, 245, 236, 0.55);
  --text-faint: rgba(232, 245, 236, 0.3);
  --border-green: rgba(34, 197, 94, 0.12);
  --border-green-hover: rgba(34, 197, 94, 0.3);
  /* Fondo verde de TODAS las tarjetas (herramientas y comercios), en un solo lugar.
     El tema clásico lo redefine con el verde institucional #007242 (ver tema.css):
     antes las tarjetas usaban el verde del tema oscuro también en el claro y se
     veían pálidas y algo lima, fuera de la paleta de pinamar.gob.ar. */
  --card-bg: rgba(34, 197, 94, 0.12);
  --card-bg-hover: rgba(34, 197, 94, 0.17);
  /* Botón "Mapa" de los comercios: al revés que el resto de los botones —
     nace con el verde fuerte (el que antes tenía sólo en hover) y se ACLARA
     al pasar el cursor. */
  --btn-map-bg: rgba(34, 197, 94, 0.22);
  --btn-map-bg-hover: rgba(34, 197, 94, 0.08);
  /* La tipografía sale del sistema compartido (css/pinamar-ui.css, que TODAS las
     páginas cargan antes que esta hoja): Fira Sans, la del sitio oficial
     pinamar.gob.ar, + DM Mono para datos duros. Antes acá vivía Space Grotesk y el
     tema Clásico la pisaba con Fira Sans, así que la letra cambiaba al conmutar de
     tema y el sitio no coincidía con ninguna de las herramientas internas.
     ⚠️ Si se agrega una página nueva, tiene que cargar pinamar-ui.css: sin él estos
     dos var() quedan sin valor y el navegador cae a su fuente por defecto. */
  --font-main: var(--pin-font);
  --font-mono: var(--pin-font-mono);
}

html {
  scroll-behavior: smooth;
}

/* El atributo hidden siempre oculta, aunque haya display:flex/grid */
[hidden] { display: none !important; }

body {
  font-family: var(--font-main);
  background: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;            /* sin menú al mantener presionado (iOS) */
  -webkit-tap-highlight-color: transparent; /* sin flash gris al tocar */
}

/* Los campos de texto sí permiten escribir/seleccionar/pegar */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Las imágenes no se pueden arrastrar (comportamiento app) */
img { -webkit-user-drag: none; user-drag: none; }

/* Background grid */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.07) 0%, transparent 70%);
  top: -100px;
  left: -100px;
  pointer-events: none;
  z-index: 0;
}

/* ===== NAV ===== */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: rgba(4, 13, 8, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-green);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo-icon {
  height: 44px;
  width: auto;
  display: block;
}
/* 🔴 Sólo en la raíz. Ahí el logo va CENTRADO y es lo único que hay en el medio de
   la barra, así que aguanta —y pide— más tamaño. En las otras 5 páginas que usan
   esta clase el logo va a un costado acompañando texto: agrandarlo ahí lo
   desbalancearía. Por eso la regla va acotada a #homeNav y no se toca la de arriba. */
/* ── La barra de la raíz no corta la página ────────────────────────────────
   Antes tenía fondo casi opaco + una línea verde de borde: arriba de todo eso se
   lee como un recorte, porque la grilla del fondo se interrumpe. Ahora nace
   TRANSPARENTE y gana fondo sólo cuando el contenido empieza a pasar por debajo,
   que es cuando hace falta para leerla.
   ⚠️ Acotado a #homeNav: `nav` es un SELECTOR DE ELEMENTO y lo comparten otras
   cinco páginas. Cambiarlo ahí cambiaría todas de una. */
#homeNav {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .25s ease, border-color .25s ease;
}
#homeNav.pegado {
  background: rgba(4, 13, 8, 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border-green);
}
#homeNav .nav-logo-icon { height: 56px; }
/* 🔴 El SVG del logo es MONOCROMO (#007242): sobre el fondo casi negro del tema
   Futurista queda casi invisible. Se blanquea por filtro —funciona justamente
   porque es de un solo color— y en el tema claro se deja tal cual.
   Mismo tratamiento y misma razón que `.pin-brand-logo` en pinamar-ui.css.
   ⚠️ El override del tema claro está en tema.css (esa es la convención acá:
   styles.css es el tema oscuro, tema.css sólo lleva los overrides claros). */
.nav-logo-icon { filter: brightness(0) invert(1); opacity: .93; }
@media (max-width: 768px) { #homeNav .nav-logo-icon { height: 44px; } }

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-title {
  text-align: right;
}

.nav-logo-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.nav-logo-sub {
  font-size: 10px;
  color: rgba(34, 197, 94, 0.7);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  color: rgba(232, 245, 236, 0.6);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--green-bright); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: var(--green-bright);
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font-main);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.nav-cta:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.15);
}

.nav-cta-icon {
  flex-shrink: 0;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  z-index: 1;
  padding: 40px 40px 40px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(74, 222, 128, 0.8);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero h1 {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  background: linear-gradient(to right, #ffffff 20%, var(--green-bright) 50%, #ffffff 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine-text 5s linear infinite;
}

@keyframes shine-text {
  to { background-position: 200% center; }
}

.hero h1 span {
  color: var(--green-bright);
}

/* Bajada principal — debajo del título "Central Pinamar" */
.hero-lead {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 auto 22px;
}
.hero-lead span { color: var(--green-bright); }

.hero-sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--green-dark);
  border: 1px solid var(--green-mid);
  color: var(--green-bright);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font-main);
  letter-spacing: 0.02em;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--green-deeper);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.2);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(232, 245, 236, 0.15);
  color: rgba(232, 245, 236, 0.7);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font-main);
  display: inline-block;
}

.btn-ghost:hover {
  border-color: rgba(232, 245, 236, 0.3);
  color: var(--text-primary);
}

/* ===== STATS BAR ===== */
.stats-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(34, 197, 94, 0.1);
  border-top: 1px solid rgba(34, 197, 94, 0.1);
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
  margin: 0 auto 48px;
  max-width: 1280px;
  border-radius: 12px;
  overflow: hidden;
}

.stat-item {
  background: var(--bg-main);
  padding: 16px 32px;
  text-align: center;
}

.stat-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--green-bright);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: rgba(232, 245, 236, 0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ===== TOUCH / ACCESIBILIDAD ===== */
/* Tamaño mínimo de toque recomendado: 44x44px */
.nav-cta,
.btn-primary,
.btn-ghost,
.chip,
.benef-btn,
.benef-map-btn,
.cred-ampliar {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Con gestureHandling 'cooperative': un dedo desplaza la página, dos dedos mueven el mapa */
#map { touch-action: pan-y; }

/* ===== ACCESS BANNER ===== */
.access-banner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(232, 245, 236, 0.7);
  line-height: 1.5;
}

.access-banner svg {
  flex-shrink: 0;
  color: var(--green-bright);
}

.access-banner strong {
  color: var(--green-bright);
  font-weight: 600;
}

/* Aviso de acceso al PIE de la grilla de herramientas: texto suelto, sin recuadro.
   Reemplaza al .access-banner, que iba arriba de las tarjetas dentro de una caja. */
.tools-note {
  margin: 26px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tools-note strong {
  color: var(--green-bright);
  font-weight: 600;
}

.vinc-hint {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: -20px auto 32px;
  padding: 0 20px;
  font-size: 12px;
  color: rgba(232, 245, 236, 0.38);
  text-align: center;
}
.vinc-hint a {
  color: rgba(34, 197, 94, 0.6);
  text-decoration: none;
}
.vinc-hint a:hover { color: var(--green-bright); }

/* ===== SECTION ===== */
.section {
  position: relative;
  z-index: 1;
  padding: 0 40px 80px;
  max-width: 1280px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(34, 197, 94, 0.5);
  letter-spacing: 0.1em;
}

.section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.section-desc {
  font-size: 14px;
  color: rgba(232, 245, 236, 0.45);
  margin-left: auto;
  max-width: 280px;
  line-height: 1.5;
}

/* ===== TOOLS GRID ===== */
/* Grilla de herramientas (index + centralinterna).
   GRID y no flex a propósito: con flex, las tarjetas de la ÚLTIMA fila se estiran
   para llenar el ancho sobrante y quedan más grandes que las de arriba (se notó al
   pasar de 8 a 7 tarjetas en centralinterna). Con columnas fijas, todas miden
   igual siempre y la fila incompleta deja el hueco. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;   /* todas las filas con la misma altura, no solo las de una misma fila */
  gap: 16px;
}
@media (max-width: 1024px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tools-grid { grid-template-columns: repeat(2, 1fr); } }

.tool-card {
  background: var(--card-bg);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  padding: 22px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
  /* Sin flex-basis ni max-width: el ancho lo define la columna del grid, así
     todas las tarjetas miden exactamente igual (ver .tools-grid). */
}

.tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.tool-card:hover {
  border-color: rgba(45, 212, 191, 0.7);
  background: var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.25), 0 0 40px rgba(34, 197, 94, 0.1);
}

.tool-card:hover::before { opacity: 1; }

/* Spotlight que sigue al mouse */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(74, 222, 128, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tool-card:hover::after { opacity: 1; }

.tool-card.featured {
  border-color: rgba(34, 197, 94, 0.4);
  background: var(--card-bg);
}

.tool-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 18px;
  color: var(--green-bright);
}

.tool-icon svg { display: block; }

.tool-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(34, 197, 94, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
}

.tool-tag.live {
  color: var(--green-bright);
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.07);
}

.tool-tag.soon {
  color: rgba(232, 245, 236, 0.3);
  border-color: rgba(232, 245, 236, 0.1);
}

.tool-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tool-desc {
  font-size: 13px;
  color: rgba(232, 245, 236, 0.45);
  line-height: 1.6;
}

.tool-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 18px;
  color: rgba(34, 197, 94, 0.3);
  transition: all 0.2s;
}

.tool-card:hover .tool-arrow {
  color: var(--green-bright);
  transform: translate(2px, -2px);
}

/* ===== NEWS ===== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.news-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid var(--border-green);
  border-radius: 12px;
  transition: border-color 0.2s, background 0.2s;
}

.news-item:hover {
  border-color: var(--border-green-hover);
  background: rgba(34, 197, 94, 0.08);
}

.news-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-bright);
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.07);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.news-text {
  font-size: 14px;
  color: rgba(232, 245, 236, 0.6);
  line-height: 1.6;
}

.news-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ===== REVEAL (entrada al scrollear) ===== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tool-card::after { display: none; }
}

/* ===== ABOUT ===== */
.about-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(34, 197, 94, 0.1);
  border-radius: 12px;
  padding: 32px;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232, 245, 236, 0.7);
}

.about-card strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ===== FOOTER ===== */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(34, 197, 94, 0.08);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-location {
  font-size: 11px;
  color: rgba(232, 245, 236, 0.25);
  letter-spacing: 0.04em;
}

.footer-left {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-right {
  font-size: 12px;
  color: rgba(232, 245, 236, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.footer-logo {
  height: 36px;
  width: auto;
  opacity: 0.7;
}

.version-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(34, 197, 94, 0.5);
  border: 1px solid rgba(34, 197, 94, 0.15);
  padding: 3px 10px;
  border-radius: 4px;
}

/* ===== BENEFICIOS (Central Interna) ===== */
.benef-stats {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto 56px;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.benef-stat {
  flex: 1 1 200px;
  max-width: 300px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid var(--border-green);
  border-radius: 14px;
  padding: 20px 24px;
  text-align: center;
}

.benef-stat-num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--green-bright);
  letter-spacing: -0.02em;
}

.benef-stat-num .amber { color: var(--amber); }

.benef-stat-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.benef-block {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px 64px;
}

/* Credencial digital */
.cred-section {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto 64px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cred-intro {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.5;
}

.cred-card { width: 100%; max-width: 380px; }
.ver-card { width: 100%; }

.cred-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px;
  background: linear-gradient(155deg, #0c3320 0%, #061a0f 55%, #04130b 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cred-card::before {
  content: '';
  position: absolute;
  inset: -60% -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(74, 222, 128, 0.14) 50%, transparent 58%);
  animation: cred-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

/* La banda entra desde fuera del borde izquierdo, cruza y sale fuera del derecho;
   luego queda fuera de cuadro (pausa) hasta el próximo barrido, así el reinicio
   del loop nunca se ve. */
@keyframes cred-sheen {
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

.cred-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.cred-logo { height: 30px; width: auto; }

.cred-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(74, 222, 128, 0.8);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 9px;
  border-radius: 100px;
}

.cred-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.cred-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--green-bright);
  overflow: hidden;
}
/* Cuando hay foto del proveedor (Google/Microsoft), la mostramos en vez de las iniciales. */
.cred-avatar.con-foto { background: none; border-color: rgba(74, 222, 128, 0.3); padding: 0; }
.cred-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cred-name { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.2; }
.cred-role { font-size: 12px; color: var(--green-bright); margin-top: 2px; }
.cred-legajo { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.cred-qr {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto 14px;
}

.cred-qr img, .cred-qr canvas { display: block; }

/* Mensaje cuando el pase del QR no se pudo generar (sin conexión, etc.) */
.cred-qr-msg {
  color: #0d2b18;
  font-family: var(--font-main);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  padding: 24px 12px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contador regresivo de vencimiento del pase del QR */
.cred-qr-timer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(232, 245, 236, 0.5);
  min-height: 16px;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.cred-qr-timer.urgente { color: var(--amber); }

.cred-ampliar {
  width: 100%;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--green-bright);
  padding: 10px;
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}

.cred-ampliar:hover { background: rgba(34, 197, 94, 0.2); }

.cred-foot {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 14px;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

/* Credencial con dorso (flip 3D): el frente muestra el QR; el dorso, lo que ve
   el comercio al escanear. Se gira con los botones ⟲ de cada cara. */
.cred-flip {
  width: 100%;
  max-width: 380px;
  perspective: 1400px;
}

.cred-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.35, 0.1, 0.2, 1);
}

.cred-flip.volteada .cred-flip-inner { transform: rotateY(180deg); }

.cred-flip .cred-card {
  max-width: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cred-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La cara que quedó oculta no debe capturar clics */
.cred-flip.volteada .cred-card:not(.cred-back) { pointer-events: none; }
.cred-flip:not(.volteada) .cred-back { pointer-events: none; }

.cred-back .ver-title { font-size: 14px; text-align: center; margin-bottom: 14px; position: relative; z-index: 1; }
.cred-back .ver-row { position: relative; z-index: 1; font-size: 14px; }
.cred-back .cred-voltear { margin-top: 22px; }

.cred-voltear {
  position: relative;
  z-index: 1;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 12px;
  cursor: pointer;
  padding: 10px 0 0;
  transition: color 0.2s;
}

.cred-voltear:hover { color: var(--green-bright); }

/* Cómo funciona */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 8px 0 28px;
}

.step { display: flex; gap: 14px; }

.step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--green-bright);
  font-family: var(--font-mono);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.step strong { display: block; font-size: 15px; color: var(--text-primary); margin-bottom: 2px; }
.step p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.ver-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-green);
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 420px;
}

.ver-title { font-size: 13px; color: var(--green-bright); margin-bottom: 12px; font-weight: 600; }

.ver-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(34, 197, 94, 0.08);
  font-size: 13px;
}

.ver-row:first-of-type { border-top: none; }
.ver-row span { color: var(--text-muted); }
.ver-row b { color: var(--text-primary); font-family: var(--font-mono); }

/* Mapa */
.map-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(66, 133, 244, 0.12);
  border: 1px solid rgba(66, 133, 244, 0.4);
  color: #93b4f7;
  padding: 9px 16px;
  border-radius: 100px;
  font-family: var(--font-main);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.loc-btn:hover { background: rgba(66, 133, 244, 0.22); border-color: rgba(66, 133, 244, 0.65); }
.loc-btn:disabled { opacity: 0.6; cursor: default; }
.nearest-info { font-size: 13px; color: var(--text-muted); }
.nearest-info b { color: var(--green-bright); }

#map {
  height: 620px;
  border-radius: 16px;
  border: 1px solid var(--border-green);
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 4px;
}

/* ===== Google Maps InfoWindow — tema oscuro ===== */
.gmap-popup {
  font-family: var(--font-main);
  color: var(--text-primary);
  max-width: 290px;
}
.gmap-popup-logo-wrap {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  margin-bottom: 10px;
}
.gmap-popup-logo-img {
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
  display: block;
}
.gmap-popup-logo-wrap .benef-popup-disc {
  position: absolute;
  top: 8px;
  right: 8px;
}
.gm-style .gm-style-iw-c {
  background: #08160d !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; padding: 12px 14px 12px !important; }
.gm-style .gm-style-iw-t::after { background: #08160d !important; }
.gm-style .gm-ui-hover-effect > span { background-color: rgba(74,222,128,.8) !important; }

.benef-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.benef-popup-logo { height: 38px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.benef-popup-disc {
  display: inline-block; font-family: var(--font-mono); font-weight: 700;
  font-size: 12px; color: #04140a; background: var(--c); padding: 3px 8px; border-radius: 6px;
}
.gmap-popup strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.benef-popup-cat { font-size: 11px; color: var(--text-muted); margin: 2px 0 5px; }
.gmap-popup p { font-size: 11px; color: rgba(232,245,236,.6); margin: 0 0 5px; line-height: 1.45; }
.gmap-popup small { color: var(--green-bright); font-size: 11px; }
.benef-popup-actions { display: flex; gap: 6px; margin-top: 8px; }
.benef-popup-actions a {
  flex: 1; text-align: center; font-size: 11px; padding: 7px 4px; border-radius: 6px;
  text-decoration: none; border: 1px solid var(--border-green);
  color: var(--green-bright); background: rgba(34,197,94,.1);
}
.benef-popup-actions a.sv { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.4); color: #a5b4fc; }
.chip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--cc, var(--green-mid)); }

/* Toolbar: chips + buscador */
.benef-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 8px 0 20px;
}

.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  font-family: var(--font-main);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-green);
  background: rgba(34, 197, 94, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.chip:hover { border-color: var(--border-green-hover); color: var(--text-primary); }
.chip.active { background: rgba(34, 197, 94, 0.15); border-color: var(--green-mid); color: var(--green-bright); }

.benef-search {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-green);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 13px;
  min-width: 220px;
}

.benef-search::placeholder { color: var(--text-faint); }
.benef-search:focus { outline: none; border-color: var(--border-green-hover); }
.benef-desc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.benef-desc-label { font-size: 13px; color: var(--text-muted); }

/* Grid de comercios */
/* Grilla de comercios — mismo criterio que .tools-grid: GRID y no flex, para que
   la última fila incompleta no se estire y todas las tarjetas midan igual.
   Acá va `auto-fill` en vez de columnas fijas porque la cantidad de comercios es
   variable: se adapta sola al alto sin tocar breakpoints. `auto-fill` y NO
   `auto-fit`: auto-fit colapsa las columnas vacías y vuelve a estirar las tarjetas,
   que es justo el problema que se está corrigiendo. */
.benef-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.benef-card {
  /* Sin flex-basis ni max-width: el ancho lo define la columna del grid.
     El display:flex de abajo es para el CONTENIDO (logo arriba + body que estira). */
  background: var(--card-bg);
  border: 1px solid var(--border-green);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
}

.benef-card:hover {
  border-color: var(--border-green-hover);
  background: var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.benef-logo-wrap {
  position: relative;
  height: 120px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.benef-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }

.benef-disc {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: #1a1205;
  background: var(--amber);
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.benef-card-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.benef-name { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.benef-cat { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--c); margin-bottom: 10px; }
.benef-detail { font-size: 13px; color: rgba(232, 245, 236, 0.55); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.benef-addr { font-size: 11px; color: var(--text-faint); margin-bottom: 14px; }

.benef-actions { display: flex; gap: 8px; }
.benef-btn {
  flex: 1;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--border-green);
  color: var(--green-bright);
  padding: 9px 6px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
}
.benef-btn:hover { background: rgba(34, 197, 94, 0.2); border-color: var(--green-mid); }
/* "Mapa" INVERTIDO: nace con el verde fuerte y se aclara al pasar el cursor
   (el resto de los botones hace lo contrario). */
.benef-btn.map { background: var(--btn-map-bg); border-color: var(--green-mid); }
/* En hover el relleno se aclara pero el CONTORNO se refuerza: pasa del verde medio
   al verde institucional pleno (--green-bright = #007242 en el tema claro). */
.benef-btn.map:hover { background: var(--btn-map-bg-hover); border-color: var(--green-bright); }
.benef-btn.sv { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.35); color: #a5b4fc; }
.benef-btn.sv:hover { background: rgba(99, 102, 241, 0.22); border-color: rgba(99, 102, 241, 0.6); }

.benef-empty { color: var(--text-muted); text-align: center; padding: 40px; width: 100%; }

/* Acceso al panel de estadísticas */
.benef-admin-link { text-align: center; max-width: 1280px; margin: 0 auto; padding: 8px 40px 64px; }
.benef-admin-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34, 197, 94, 0.1); border: 1px solid var(--border-green);
  color: var(--green-bright); padding: 13px 24px; border-radius: 100px;
  text-decoration: none; font-family: var(--font-main); font-size: 14px; transition: all 0.2s;
}
.benef-admin-btn:hover { background: rgba(34, 197, 94, 0.2); border-color: var(--green-mid); }
.benef-admin-note { display: block; margin-top: 10px; font-size: 12px; color: var(--text-faint); }

/* Modal QR pantalla completa */
.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(2, 8, 5, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.qr-modal[hidden] { display: none; }

.qr-modal-box {
  background: #08160d;
  border: 1px solid var(--border-green-hover);
  border-radius: 20px;
  padding: 26px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.qr-modal-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 16px;
}

.qr-modal-box #qrcodeBig { background: #fff; padding: 16px; border-radius: 14px; display: inline-block; }
.qr-modal-name { font-size: 15px; color: var(--text-primary); margin: 16px 0; }

/* ===== MODAL DE LOGIN (ingreso personal) ===== */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(2, 8, 5, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;                      /* el modal scrollea si el teclado achica la pantalla */
  -webkit-overflow-scrolling: touch;
}
.login-modal[hidden] { display: none; }
.login-box {
  position: relative;
  margin: auto;                          /* centrado vertical, pero permite scroll con teclado */
  background: linear-gradient(155deg, #0c3320 0%, #061a0f 60%, #04130b 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 20px;
  padding: 32px 28px 26px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.login-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.login-close:hover { color: var(--text-primary); }
.login-logo { height: 56px; width: auto; margin-bottom: 18px; }
.login-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.login-label {
  display: block; text-align: left;
  font-size: 12px; font-family: var(--font-mono); color: var(--green-bright);
  letter-spacing: 0.05em; margin: 0 0 6px 2px;
}
.login-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-green);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 15px;
  margin-bottom: 16px;
}
.login-input:focus { outline: none; border-color: var(--green-mid); background: rgba(34, 197, 94, 0.06); }
.login-error { color: #fca5a5; font-size: 12px; min-height: 16px; margin-bottom: 10px; text-align: left; }
.login-ok { color: #5dba80; font-size: 13px; min-height: 16px; margin-bottom: 10px; text-align: left; line-height: 1.5; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; color: var(--text-faint); font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(232, 245, 236, 0.12); }
.login-social {
  position: relative;
  width: 100%; display: flex; align-items: center; justify-content: center;
  padding: 11px 44px; border-radius: 8px;
  border: 1px solid rgba(232, 245, 236, 0.18); background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary); font-size: 14px; font-weight: 600; font-family: inherit;
  text-align: center; line-height: 1.3;
  cursor: pointer; margin-bottom: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Logo anclado a la izquierda (mismo punto en todos los botones); el texto queda
   centrado en el botón independientemente del largo. */
.login-social svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); flex-shrink: 0; }
.login-social:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(232, 245, 236, 0.32); }
.login-social:disabled { opacity: 0.6; cursor: default; }
.login-submit {
  width: 100%;
  background: var(--green-dark);
  border: 1px solid var(--green-mid);
  color: var(--green-bright);
  padding: 13px;
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.login-submit:hover { background: var(--green-deeper); box-shadow: 0 0 24px rgba(34, 197, 94, 0.25); }
.login-foot { margin-top: 18px; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.login-hint { color: var(--text-faint); font-family: var(--font-main); letter-spacing: 0; text-transform: none; font-size: 11px; }
.login-link {
  display: inline-block; margin-top: 14px;
  color: var(--green-bright); font-size: 13px; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.login-link:hover { border-color: var(--green-bright); }
.login-pass-wrap { position: relative; margin-bottom: 16px; }
.login-pass-wrap .login-input { padding-right: 46px; margin-bottom: 0; }
.login-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  color: var(--green-bright); padding: 0; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.login-eye:hover { background: rgba(34,197,94,0.12); }
.field-error { color: #fca5a5; font-size: 12px; text-align: left; margin: -8px 2px 12px; min-height: 0; }
.field-error:empty { margin: 0; }
.back-benef { display: inline-block; margin-top: 16px; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.back-benef:hover { color: var(--green-bright); }

/* ===== PÁGINA DE VERIFICACIÓN (comercio) ===== */
.verify-wrap {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  padding: 12px 12px 80px;
}
.verify-card {
  background: linear-gradient(155deg, #0c3320 0%, #061a0f 55%, #04130b 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 22px; padding: 18px 20px 16px;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: verify-fade 0.5s ease both;
}
@keyframes verify-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.verify-card.is-error { border-color: rgba(239, 68, 68, 0.4); }
.verify-logo { height: 24px; width: auto; max-width: 70%; margin-bottom: 10px; }
.verify-check {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-bright);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.15), 0 0 24px rgba(74, 222, 128, 0.35);
  animation: verify-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes verify-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.verify-check.error { background: #ef4444; box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.15); }
.verify-status {
  font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green-bright); margin-bottom: 10px;
}
.verify-card.is-error .verify-status { color: #fca5a5; }
.verify-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 20px;
  color: var(--green-bright); margin: 0 auto 8px;
}
.verify-name { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.verify-badge {
  display: inline-block; margin: 6px 0;
  font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.05em;
  color: var(--green-bright);
  background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 3px 12px; border-radius: 100px;
}
.verify-legajo { font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.verify-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.verify-reg { margin-top: 12px; }
.verify-sel-logo {
  background: #fff; border-radius: 10px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 12px; margin-bottom: 8px;
}
.verify-sel-logo img { max-width: 100%; max-height: 40px; object-fit: contain; display: block; }
.verify-reg-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.verify-select {
  width: 100%; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-green); border-radius: 10px;
  padding: 9px 12px; color: var(--text-primary);
  font-family: var(--font-main); font-size: 14px; margin-bottom: 10px;
}
.verify-select:focus { outline: none; border-color: var(--green-mid); }

/* Botón confirmar con glow pulsante */
@keyframes confirm-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0), 0 0 14px rgba(74,222,128,0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(74,222,128,0.18), 0 0 28px rgba(74,222,128,0.55); }
}
/* Descuento del comercio elegido. Se muestra antes de confirmar para que el
   comercio y el titular estén mirando lo mismo. El porcentaje grande porque es
   el dato que se lee de un vistazo desde el otro lado del mostrador. */
.verify-dto {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--border-green); text-align: left;
}
.verify-dto-pct {
  font-family: var(--font-mono), monospace; font-size: 22px; font-weight: 700;
  color: var(--green-bright); line-height: 1; flex-shrink: 0;
}
.verify-dto-txt { font-size: 13.5px; line-height: 1.45; color: var(--text-primary); }

.verify-confirm {
  width: 100%; background: var(--green-dark);
  border: 1px solid var(--green-mid); color: var(--green-bright);
  padding: 13px; border-radius: 10px;
  font-family: var(--font-main); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background 0.2s, transform 0.1s;
  animation: confirm-glow 1.8s ease-in-out infinite;
}
.verify-confirm:hover { background: var(--green-deeper); transform: scale(1.01); }
.verify-confirm:active { transform: scale(0.98); }
.verify-confirm:disabled { opacity: 0.6; cursor: default; animation: none; box-shadow: none; }

.verify-done { margin-top: 12px; font-size: 15px; color: var(--green-bright); font-weight: 600; }
.verify-close-btn {
  display: block; width: 100%; margin-top: 10px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(232,245,236,0.15);
  background: rgba(232,245,236,0.06); color: var(--text-muted);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
}
.verify-close-btn:hover { background: rgba(232,245,236,0.11); color: var(--text-primary); border-color: rgba(232,245,236,0.3); }
.verify-done b { color: #fff; }
.verify-msg { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.verify-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.12);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--text-faint);
}

/* ===== BOTÓN MICROSOFT + PANEL ESTADÍSTICAS ===== */
.ms-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: none; border-radius: 10px; padding: 13px;
  font-family: var(--font-main); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; margin-bottom: 12px;
}
.ms-btn:hover { box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); transform: translateY(-1px); }

.stats-diag {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(232, 245, 236, 0.4);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 10px;
  margin-top: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow: auto;
}
.stats-diag:empty { display: none; }

.stats-loading, .stats-empty { color: var(--text-muted); text-align: center; padding: 40px 20px; line-height: 1.6; }
.stats-empty { border: 1px dashed var(--border-green); border-radius: 14px; }

.stats-kpis { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.stats-kpi {
  position: relative;
  flex: 1 1 160px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid var(--border-green);
  border-radius: 14px;
  padding: 18px 22px;
  transition: border-color 0.2s, background 0.2s;
}
.stats-kpi:hover { border-color: var(--border-green-hover); background: rgba(34, 197, 94, 0.08); }
.stats-kpi-ico { position: absolute; top: 14px; right: 16px; font-size: 18px; opacity: 0.55; }
.stats-kpi-num { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--green-bright); letter-spacing: -0.02em; }
.stats-kpi-num.amber { color: var(--amber); }
.stats-kpi-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.stats-card { background: rgba(34, 197, 94, 0.05); border: 1px solid var(--border-green); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.stats-h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.stats-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stats-grid2 .stats-card { margin-bottom: 0; }

.stats-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stats-bar-logo {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  padding: 2px;
}
.stats-bar-logo-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0; }
.stats-bar-label { flex: 0 0 150px; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.stats-bar-track { flex: 1; height: 10px; background: rgba(34, 197, 94, 0.08); border-radius: 100px; overflow: hidden; }
.stats-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-mid), var(--green-bright)); border-radius: 100px; }
.stats-bar-val { flex: 0 0 32px; text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--green-bright); }

/* Chip de descuento (% del comercio) */
.stats-desc-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #1a1205;
  background: var(--amber);
  padding: 1px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}

.stats-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(34, 197, 94, 0.08); font-size: 12px; color: var(--text-muted); }
.stats-note b { color: var(--amber); font-family: var(--font-mono); }

.stats-line { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(34, 197, 94, 0.08); font-size: 13px; color: var(--text-muted); }
.stats-line:first-child { border-top: none; }
.stats-line b { color: var(--green-bright); font-family: var(--font-mono); }

/* Mini gráfico de columnas por día */
.stats-days { display: flex; align-items: stretch; gap: 5px; }
.stats-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.stats-day-v { font-family: var(--font-mono); font-size: 10px; color: var(--green-bright); min-height: 13px; }
.stats-day-col { width: 100%; max-width: 30px; height: 90px; display: flex; align-items: flex-end; background: rgba(34, 197, 94, 0.06); border-radius: 6px; overflow: hidden; }
.stats-day-fill { width: 100%; background: linear-gradient(180deg, var(--green-bright), var(--green-mid)); border-radius: 6px 6px 0 0; }
.stats-day-l { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); white-space: nowrap; }

.stats-table { font-size: 12px; }
.stats-tr { display: grid; grid-template-columns: 110px 1fr 1fr 110px; gap: 10px; padding: 9px 8px; border-top: 1px solid rgba(34, 197, 94, 0.08); color: var(--text-muted); border-radius: 6px; align-items: center; }
.stats-tr:not(.stats-th):hover { background: rgba(34, 197, 94, 0.06); }
.stats-th { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; border-top: none; }
.stats-mono { font-family: var(--font-mono); font-size: 11px; }

/* Encabezado de "Mis estadísticas" */
.mystats-head { position: relative; z-index: 1; text-align: center; padding: 36px 20px 8px; }
.mystats-title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 18px 0 10px; }
.mystats-title span { color: var(--green-bright); }
.mystats-sub { font-size: 14px; color: var(--text-muted); max-width: 480px; margin: 0 auto; line-height: 1.5; }
.stats-section { padding-top: 28px; }

/* Menú "Estadísticas" del nav (los admins ven dos opciones) */
.nav-stats { position: relative; }
.nav-stats-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: rgba(5, 18, 11, 0.97);
  border: 1px solid var(--border-green-hover);
  border-radius: 12px;
  padding: 6px;
  z-index: 60;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.nav-stats-menu a {
  display: block;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-stats-menu a:hover { background: rgba(34, 197, 94, 0.12); color: var(--green-bright); }

/* ===== UTILIDADES RESPONSIVE ===== */
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
@media (min-width: 769px) { .show-mobile { display: none !important; } }

/* Botón volver (flecha ←) en el nav de Central Interna */
.nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid var(--border-green);
  border-radius: 11px;
  color: var(--green-bright);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.nav-back:hover { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.5); }

/* Sección de info dentro del menú móvil de Central Interna */
.interno-menu-info {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border-green);
  margin-bottom: 6px;
}
.interno-menu-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 3px;
}
.interno-menu-user {
  font-size: 12px;
  color: rgba(232, 245, 236, 0.5);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interno-menu-logout {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(232, 245, 236, 0.7) !important;
  margin-top: 4px;
}
.interno-menu-logout:hover { color: #f87171 !important; background: rgba(248, 113, 113, 0.08) !important; }

/* ===== MENÚ MÓVIL (hamburguesa) ===== */
.nav-burger {
  display: none; /* solo visible en móvil */
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid var(--border-green);
  border-radius: 11px;
  color: var(--green-bright);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.nav-burger:hover { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.6); }
@keyframes navMenuSlideIn {
  from { opacity: 0; transform: translateX(calc(100% + 16px)); }
  to   { opacity: 1; transform: translateX(0); }
}
.nav-mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  min-width: 220px;
  background: #08160d;
  border: 1px solid var(--border-green);
  border-radius: 14px;
  padding: 8px;
  z-index: 200;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: navMenuSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nav-mobile-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: rgba(232, 245, 236, 0.8);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile-menu a:hover,
.nav-mobile-menu a:active { background: rgba(34, 197, 94, 0.12); color: var(--green-bright); }
.nav-mobile-cta {
  margin-top: 6px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid var(--border-green);
  color: var(--green-bright) !important;
  font-weight: 600;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

  /* --- Nav --- */
  nav {
    padding: 12px 16px;
    gap: 0;
  }
  /* Home: en móvil dejamos el grid de 3 columnas y usamos flex —
     logo a la izquierda, hamburguesa pegada a la derecha. */
  #homeNav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .nav-links { display: none; }
  .nav-title { display: none; }
  .nav-right { gap: 10px; }
  .nav-logo-icon { height: 36px; }
  .nav-cta { padding: 8px 12px; font-size: 12px; gap: 6px; }
  /* En móvil el acceso al portal y las secciones van dentro del menú hamburguesa */
  .nav-right > .nav-cta[data-login-open] { display: none; }
  .nav-burger { display: inline-flex; }

  /* --- Hero --- */
  .hero { padding: 40px 20px 36px; }
  .hero h1 { font-size: 40px; letter-spacing: -0.02em; }
  .hero-lead { font-size: 21px; margin-bottom: 16px; }
  .hero-sub { font-size: 15px; }
  .hero-badge { font-size: 10px; margin-bottom: 20px; }
  .btn-primary, .btn-ghost { padding: 11px 20px; font-size: 13px; }

  /* --- Stats bar --- */
  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
    margin: 0 16px 40px;
    border-radius: 10px;
  }
  .stat-item { padding: 14px 8px; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 9px; }

  /* --- Sections --- */
  .section {
    padding: 0 16px 48px;
  }
  .section-header { gap: 10px; margin-bottom: 24px; }
  .section-title { font-size: 18px; }
  .section-desc { display: none; }

  /* --- Tool cards (index/centralinterna) --- */
  .tools-grid {
    grid-template-columns: 1fr;   /* una sola columna en móvil */
    grid-auto-rows: auto;         /* altura natural: no estirar las cortas */
    gap: 12px;
  }

  /* --- Novedades --- */
  .news-item {
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
  }
  .news-text { font-size: 13px; }

  /* --- Access banner --- */
  .access-banner { padding: 12px 14px; font-size: 12px; margin: 0 16px 32px; }

  /* --- Credencial QR --- */
  .cred-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 16px;
  }
  .cred-card { padding: 18px; border-radius: 16px; }
  .cred-name { font-size: 16px; }
  .cred-qr { padding: 10px; }

  /* --- Título beneficios: 2 renglones ("Beneficios para" / "el Personal Municipal") --- */
  .benef-hero-strip .hero h1 { font-size: 30px; line-height: 1.12; }

  /* --- Stats beneficios: 3 en fila compactas (como el inicio) --- */
  .benef-stats {
    padding: 0 16px;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: nowrap;
  }
  .benef-stat { flex: 1 1 0; min-width: 0; max-width: none; padding: 14px 6px; border-radius: 12px; }
  .benef-stat-num { font-size: 18px; }
  .benef-stat-label { font-size: 9px; letter-spacing: 0.03em; line-height: 1.25; margin-top: 4px; }

  /* --- Bloque beneficios --- */
  .benef-block { padding-left: 16px; padding-right: 16px; padding-bottom: 48px; }

  /* --- Mapa --- */
  #map { height: 340px; border-radius: 12px; }

  /* InfoWindow compacto en mobile (para que no se corte dentro del mapa) */
  .gmap-popup { max-width: 220px; }
  .gmap-popup-logo-wrap { height: 48px; padding: 5px 10px; margin-bottom: 8px; }
  .gmap-popup-logo-img { max-height: 38px; }
  .gm-style .gm-style-iw-d { padding: 10px 12px !important; }
  .gmap-popup strong { font-size: 13px; }
  .benef-popup-cat { font-size: 10px; margin: 1px 0 4px; }
  .gmap-popup p { font-size: 10px; line-height: 1.4; margin-bottom: 4px; }
  .gmap-popup small { font-size: 10px; }
  .benef-popup-disc { font-size: 11px; padding: 2px 7px; }
  .benef-popup-actions { gap: 5px; margin-top: 7px; }
  .benef-popup-actions a { padding: 7px 3px; font-size: 10px; }

  /* Estadísticas en mobile */
  .stats-grid2 { grid-template-columns: 1fr; }
  .stats-bar-label { flex: 0 0 100px; font-size: 12px; }
  .stats-tr { grid-template-columns: 85px 1fr 75px; }
  .stats-tr span:nth-child(3) { display: none; } /* oculta la 3ª columna en tabla angosta */
  .stats-th span:nth-child(3) { display: none; }
  .stats-day-l { font-size: 8px; }
  .mystats-title { font-size: 30px; }

  /* --- Toolbar chips + buscador --- */
  .benef-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .cat-chips { gap: 6px; }
  .chip { font-size: 12px; padding: 6px 12px; }
  .benef-search { min-width: 0; width: 100%; }

  /* --- Tarjetas comercios --- */
  .benef-grid { grid-template-columns: 1fr; gap: 12px; }
  .benef-logo-wrap { height: 100px; }

  /* --- Cómo funciona (credencial) --- */
  .steps { gap: 14px; }
  .step strong { font-size: 14px; }
  .step p { font-size: 12px; }
  .ver-card { max-width: 100%; }
  .ver-row { font-size: 12px; }

  /* --- Footer --- */
  .footer {
    padding: 24px 16px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    text-align: center;
  }
  .footer-left { display: none; }
  .footer-right { justify-content: center; font-size: 11px; }
  .footer-logo { height: 28px; }

  /* --- Modal QR --- */
  .qr-modal-box { padding: 20px; }

  /* --- About card --- */
  .about-card { font-size: 14px; padding: 20px; }
}

/* Pantallas muy chicas (iPhone SE, Galaxy A) */
@media (max-width: 390px) {
  .hero h1 { font-size: 34px; }
  .benef-hero-strip .hero h1 { font-size: 24px; }
  .hero-lead { font-size: 18px; }
  .nav-cta span { display: none; } /* solo muestra el ícono del botón */
  .stats-bar { grid-template-columns: repeat(2, 1fr); margin: 0 8px 32px; }
  /* La tercera placa (24/7) ocupa toda la fila — sin hueco vacío */
  .stats-bar .stat-item:last-child { grid-column: 1 / -1; }
  .benef-actions { flex-direction: column; }
  .benef-btn { width: 100%; }
}

/* ===== BENEFICIOS — layout desktop (bento) =====
   En pantallas grandes la página deja de ser una pila de bloques centrados:
   héroe compacto con stats al costado, credencial y mapa lado a lado, y
   grilla densa de comercios. En mobile no cambia nada. */
@media (min-width: 1100px) {

  /* --- Héroe compacto: título a la izquierda, stats a la derecha --- */
  .benef-hero-strip {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 40px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .benef-hero-strip .hero { text-align: left; padding: 0; }
  .benef-hero-strip .hero h1 { font-size: 36px; margin-bottom: 12px; }
  .benef-hero-strip .hero h1 br { display: none; }
  .benef-hero-strip .hero-badge { margin-bottom: 16px; }
  .benef-hero-strip .hero-sub { font-size: 15px; margin: 0; max-width: 560px; }
  .benef-hero-strip .benef-stats { margin: 0; padding: 0; flex-wrap: nowrap; flex-shrink: 0; }
  .benef-hero-strip .benef-stat { flex: 0 0 auto; min-width: 130px; padding: 14px 18px; }
  .benef-hero-strip .benef-stat-num { font-size: 24px; }

  /* --- Bento: credencial a la izquierda, mapa ocupando el resto --- */
  .benef-bento {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto 56px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .benef-bento .cred-section { max-width: none; margin: 0; padding: 0; gap: 14px; }
  .benef-bento #mapa { margin: 0; padding: 0; display: flex; flex-direction: column; }
  .benef-bento #mapa .section-header { display: none; }
  .benef-bento .map-toolbar { margin: 0 0 12px; }
  .benef-bento #map { flex: 1; height: auto; min-height: 540px; margin-top: 0; }

  /* Sin el "02" del mapa a la vista, el número de comercios quedaría colgado */
  #comercios .section-num { display: none; }

  /* --- Comercios: grilla densa con el logo arriba, como la tarjeta clásica ---
     (el grid ya viene de la regla base; acá solo se aprieta el gap y el interior) */
  .benef-grid { gap: 14px; }
  .benef-logo-wrap { height: 110px; }
  .benef-card-body { padding: 14px 16px; }
  .benef-name { font-size: 15px; }
  .benef-detail { font-size: 12px; margin-bottom: 10px; }
  .benef-addr { margin-bottom: 12px; }
  .benef-btn { padding: 8px 6px; font-size: 11px; }
}

/* ===== TRANSICIONES DE PÁGINA ===== */
@keyframes pinamarFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pinamarFadeOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* Salida al navegar (clase puesta por app-touch.js) */
body.page-exit { animation: pinamarFadeOut 0.18s ease-in forwards; pointer-events: none; }

/* Entrada de página — cada bloque aparece en secuencia */
nav                                            { animation: pinamarFadeUp 0.4s ease-out both; }
.hero, .benef-hero-strip, .mystats-head        { animation: pinamarFadeUp 0.4s 0.07s ease-out both; }
.benef-bento                                   { animation: pinamarFadeUp 0.4s 0.11s ease-out both; }
.section, .stats-section, .benef-block         { animation: pinamarFadeUp 0.4s 0.13s ease-out both; }
footer                                         { animation: pinamarFadeUp 0.4s 0.18s ease-out both; }

/* Tarjetas de comercios — stagger vía CSS var --i (seteada en beneficios.js) */
.benef-card { animation: pinamarFadeUp 0.32s calc(var(--i,0) * 0.038s + 0.04s) ease-out both; }

/* KPIs de estadísticas — aparecen uno por uno */
.stats-kpi:nth-child(1) { animation: pinamarFadeUp 0.3s 0.07s ease-out both; }
.stats-kpi:nth-child(2) { animation: pinamarFadeUp 0.3s 0.13s ease-out both; }
.stats-kpi:nth-child(3) { animation: pinamarFadeUp 0.3s 0.19s ease-out both; }
.stats-kpi:nth-child(4) { animation: pinamarFadeUp 0.3s 0.25s ease-out both; }

/* Cards de estadísticas */
.stats-card, .stats-grid2 { animation: pinamarFadeUp 0.35s 0.09s ease-out both; }

/* Accesibilidad: respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  nav, .hero, .benef-hero-strip, .mystats-head, .benef-bento,
  .section, .stats-section, .benef-block, footer, .benef-card,
  .stats-kpi, .stats-card, .stats-grid2, body.page-exit { animation: none !important; }
}