/* ==========================================================================
   UnoMAS — styles.css
   --------------------------------------------------------------------------
   Réplica visual de la landing anterior (que era un bundle React parcheado),
   ahora como CSS propio. Valores tipográficos y de color tomados por
   computed-style del sitio original para mantener paridad:
   fondo #050508, acento #4ADE80, Inter (400–900) + JetBrains Mono.
   Estructura: tokens → base → hero → cómo funciona → experiencia →
   comunidad → footer → utilidades/responsive.
   ========================================================================== */

/* ── Tokens ── */
:root {
  --bg: #050508;
  --bg-soft: #0a0a0f;
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.8);
  --white: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-faint: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.025);
  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, monospace;
  --pad-x: clamp(24px, 5vw, 48px);
}

/* ── Base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
section { scroll-margin-top: 24px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* Texto solo para lectores de pantalla (patrón estándar) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container-wide { max-width: min(1680px, 96vw); padding: 0 clamp(16px, 3vw, 32px); }

/* Encabezados de sección compartidos */
.section-head { text-align: left; margin-bottom: 72px; }
.section-head-center { text-align: center; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green-soft);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 0 16px;
}
.section-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.section-title em { font-style: normal; color: var(--green); }
.section-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ══════════════════════════ HERO ══════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Carrusel de fondo: slides apilados con fade + zoom sutil */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  transform: scale(1.05);
}
.hero-slide.is-active { opacity: 1; }
/* Overlay: oscurece más a la izquierda (donde vive el texto) y en bordes */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(5,5,8,0.94) 0%, rgba(5,5,8,0.86) 35%, rgba(5,5,8,0.62) 60%,
      rgba(5,5,8,0.28) 88%, rgba(5,5,8,0.12) 100%),
    linear-gradient(to bottom,
      rgba(5,5,8,0.45) 0%, rgba(5,5,8,0) 28%, rgba(5,5,8,0) 72%, rgba(5,5,8,0.45) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(180px, 26vh, 280px);
  padding-bottom: 12vh;
  padding-left: clamp(32px, 7vw, 120px);
  padding-right: clamp(24px, 5vw, 80px);
}

/* Título con el logo "1+" en línea, dimensionado al cap-height */
.hero-title {
  display: flex;
  align-items: baseline;
  font-size: clamp(56px, 7.5vw, 130px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
  animation: heroTitleIn 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-logo {
  width: clamp(50px, 6.6vw, 115px);
  height: auto;
  margin-right: clamp(14px, 1.8vw, 32px);
  align-self: center;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6));
  animation: heroLogoIn 1000ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroLogoIn {
  0%   { opacity: 0; transform: translateX(-34px) scale(0.55) rotate(-12deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
}

.hero-sub {
  max-width: 620px;
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.75), 0 0 28px rgba(0,0,0,0.55);
  animation: heroFadeIn 900ms ease 150ms both;
}
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Rotador de deporte: ventana de 1 línea, el reel se desplaza con JS */
.sport-rotator {
  display: inline-block;
  position: relative;
  height: 1.35em;
  line-height: 1.35;
  overflow: hidden;
  vertical-align: top;
  font-weight: 900;
}
.sport-reel {
  display: block;
  will-change: transform;
  transition: transform 720ms cubic-bezier(0.85, 0, 0.15, 1);
}
.sport-item { display: block; height: 1.35em; line-height: 1.35; white-space: nowrap; }

/* Bullets destacados */
.hero-bullets {
  list-style: none;
  margin: 28px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  animation: heroFadeIn 900ms ease 280ms both;
}
.hero-bullets li { display: flex; align-items: flex-start; gap: 14px; color: rgba(255,255,255,0.88); }
.bullet-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  color: var(--green);
  margin-top: 1px;
  filter: drop-shadow(0 0 14px rgba(74, 222, 128, 0.35));
}
.hero-bullets li > span { display: flex; flex-direction: column; gap: 2px; }
.hero-bullets strong {
  font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hero-bullets em {
  font-style: normal;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* Badges de stores (chips negros) */
.store-badges {
  display: flex;
  gap: 16px;
  margin-top: clamp(8px, 2vh, 24px);
  animation: heroFadeIn 900ms ease 400ms both;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 190px;
  min-width: 190px;
  height: 56px;
  padding: 12px 20px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.badge:hover { transform: translateY(-2px) scale(1.02); border-color: rgba(74, 222, 128, 0.6); }
/* Badges "Próximamente": informativos, no clickeables (la app aún no salió).
   Sin cursor de link ni hover de elevación; un punto verde sutil indica "pronto". */
.badge-soon { cursor: default; }
.badge-soon:hover { transform: none; border-color: rgba(255,255,255,0.25); }
.badge-icon { width: 26px; height: 28px; flex-shrink: 0; color: #fff; }
.badge-icon-play { color: #fff; }
.badge-text { font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; text-align: left; }

/* Tarjeta glass de beneficios (abajo-derecha) */
.hero-card {
  position: absolute;
  bottom: clamp(32px, 5vh, 64px);
  right: clamp(32px, 5vw, 80px);
  width: clamp(420px, 42vw, 620px);
  padding: 18px 26px 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  z-index: 15;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: heroFadeIn 900ms ease 500ms both;
}
.hero-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hero-card-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-card-title { font-size: 14px; font-weight: 700; margin-left: auto; }
.hero-card-track { position: relative; min-height: 78px; }
/* visibility:hidden además de opacity para sacar los slides inactivos del
   árbol de accesibilidad (un SR leería los 5 superpuestos); el delay de la
   transición de visibility preserva el fade-out. */
.benefit-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 20px;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
  pointer-events: none;
}
.benefit-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}
.benefit-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  color: var(--green);
  filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.3));
}
.benefit-body strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.benefit-body p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.78); text-wrap: pretty; }
.hero-card-dots { display: flex; gap: 12px; justify-content: flex-end; margin-top: 10px; }
.hero-card-dots button {
  position: relative;
  width: 18px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.45);
  border: none; padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
/* Hit area táctil extendida (~24px de alto) sin cambiar el visual del dot */
.hero-card-dots button::before {
  content: '';
  position: absolute;
  inset: -11px -3px;
}
.hero-card-dots button.is-active { background: var(--green); width: 28px; }
.hero-card-dots button:hover { background: rgba(255,255,255,0.7); }

/* ── Mockup de iPhone sobre el área de la pelota ──
   Marco recreado en CSS (cuerpo titanio + pantalla); las capturas reales de la
   app ya incluyen su barra de estado y la Dynamic Island, así que no se dibuja
   isla aparte. Posicionado a la derecha, centrado en vertical sobre la pelota. */
.hero-mockup {
  /* Alto del teléfono (lo hereda .phone). Depende SOLO del ancho (vw) — nunca
     de la altura, así cambiar el alto de la ventana no lo afecta. 820px lo
     limita en monitores enormes. Las ventanas demasiado bajas para mostrarlo
     se resuelven ocultándolo por aspect-ratio (ver media query más abajo). */
  --ph: min(36vw, 820px);
  position: absolute;
  z-index: 6;                 /* sobre el fondo; bajo hero-content y hero-card */
  top: 45%;                   /* centrado en vertical con leve sesgo arriba (sobre la pelota) */
  /* Horizontal: idealmente centrado sobre la pelota (26vw desde la derecha),
     pero el right nunca baja de lo necesario para que el borde izquierdo del
     teléfono quede a la derecha del texto (ancho del teléfono = --ph*0.46;
     texto ≈ padding-left + ~640px; +60px de aire y scrollbar). */
  right: max(60px, min(26vw, calc(100vw - var(--ph) * 0.46 - clamp(32px, 7vw, 120px) - 700px)));
  transform: translateY(-50%);
  pointer-events: none;
  animation: mockupIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}
@keyframes mockupIn {
  from { opacity: 0; transform: translateY(-50%) translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
.phone {
  position: relative;
  height: var(--ph);                 /* --ph definido en .hero-mockup; escala con el viewport */
  will-change: transform;            /* el parallax/tilt del scroll se aplica acá (ver app.js) */
  transform-origin: center 60%;      /* el tilt 3D pivota un poco por debajo del centro */
  aspect-ratio: 1206 / 2622;  /* ratio exacto de las capturas (iPhone 17 Pro) */
  padding: calc(var(--ph) * 0.0075);          /* marco titanio fino, proporcional al teléfono */
  border-radius: calc(var(--ph) * 0.069);     /* ~15% del ancho: redondeo de iPhone */
  background: linear-gradient(150deg, #43464d 0%, #191b20 42%, #0b0c0f 100%);
  box-shadow:
    0 0 80px 16px rgba(0, 0, 0, 0.55),       /* halo difuso detrás: separa el mock del fondo */
    0 50px 100px -24px rgba(0, 0, 0, 0.9),    /* sombra proyectada: sensación de flotación */
    0 16px 44px -12px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.10),
    inset 0 0 14px rgba(0, 0, 0, 0.5);
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ph) * 0.0615);   /* concéntrico: radio del marco menos el padding */
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px #050505;   /* bezel negro muy fino entre marco y pantalla */
}
.phone-shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 650ms ease-in-out;
}
.phone-shot.is-active { opacity: 1; }

/* Slide de video: el logo animado de la app, a modo de splash de apertura.
   El video (cuadrado) se muestra más chico y centrado sobre la pantalla negra,
   como la pantalla de inicio de la app. */
.phone-shot-video {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-video {
  width: 45%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* El video sale apagado de la codificación H.264: fondo ~rgb(12,12,12) (negros
     levantados, se veía un recuadro), el "1" gris (~189) en vez de blanco y el
     verde desvaído (~84,172,88) lejos del verde de marca (#4ade80 = 74,222,128).
     La cadena de filtros lo corrige sobre las muestras reales:
       · brightness 1.269 + contrast 1.136 → fondo a negro puro (0) y "1" a blanco
         puro (255) — resuelto analíticamente para esos dos grises neutros.
       · saturate 1.08 + hue-rotate 14deg → empujan el verde a ~(77,237,129),
         casi clavado al de marca, sin tocar los neutros (los grises no se alteran
         con saturación ni rotación de tono). */
  filter: brightness(1.269) contrast(1.136) saturate(1.08) hue-rotate(14deg);
}

/* Brillo/reflejo que cruza la pantalla al iniciarse el giro 3D (manejado por JS) */
.phone-glare {
  position: absolute;
  top: -20%; bottom: -20%; left: -60%; right: -60%;   /* más ancho: barre toda la pantalla */
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.12) 47%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.12) 53%,
    transparent 58%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-60%);
  mix-blend-mode: screen;     /* brillo aditivo sobre la captura */
  z-index: 3;
}

/* Botones laterales del marco (titanio un poco más claro) */
.phone-btn {
  position: absolute;
  background: linear-gradient(180deg, #4a4d54, #2a2c31);
  border-radius: 3px;
}
.phone-btn-action  { left: calc(var(--ph) * -0.004);  top: 20%; width: calc(var(--ph) * 0.004); height: 4.2%; border-radius: 2px 0 0 2px; }
.phone-btn-volup   { left: calc(var(--ph) * -0.004);  top: 30%; width: calc(var(--ph) * 0.004); height: 7%;   border-radius: 2px 0 0 2px; }
.phone-btn-voldown { left: calc(var(--ph) * -0.004);  top: 39%; width: calc(var(--ph) * 0.004); height: 7%;   border-radius: 2px 0 0 2px; }
.phone-btn-power   { right: calc(var(--ph) * -0.004); top: 30%; width: calc(var(--ph) * 0.004); height: 10%;  border-radius: 0 2px 2px 0; }
/* Sin blur disponible, el fondo casi transparente no garantiza lectura:
   caer a un fondo sólido oscuro. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-card { background: rgba(5, 5, 8, 0.88); }
}
/* Ocultar la card por ancho y también en viewports bajos donde se
   superpondría con los bullets del hero. */
@media (max-width: 1100px), (max-height: 680px) and (max-width: 1300px) {
  .hero-card { display: none; }
}
/* El mockup se dimensiona por ANCHO y permanece visible aunque la ventana sea
   baja (en ese caso se recorta arriba/abajo, no se achica ni se oculta). Solo
   se oculta cuando el ancho es chico (mobile), donde compite con el texto. */
@media (max-width: 1100px) {
  .hero-mockup { display: none; }
}

/* ══════════════════════ CÓMO FUNCIONA ══════════════════════ */
.cf {
  position: relative;
  padding: 120px 0;
  background: var(--bg);
  overflow: hidden;
}
/* Líneas de borde degradadas arriba/abajo de la sección */
.cf::before, .cf::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 222, 128, 0.3), transparent);
}
.cf::before { top: 0; }
.cf::after { bottom: 0; }
.cf .section-head { text-align: center; }

.cf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
.cf-step {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.cf-step:hover {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.04);
  transform: translateY(-4px);
}
.cf-step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(74, 222, 128, 0.85);
  letter-spacing: 0.18em;
  margin-bottom: 22px;
}
.cf-step-icon {
  width: 38px; height: 38px;
  color: var(--green);
  margin-bottom: 20px;
  filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.25));
}
.cf-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.cf-step p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.55; text-wrap: pretty; }

.cf-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cf-feature { padding: 32px 28px; border-right: 1px solid var(--line); }
.cf-feature:last-child { border-right: none; }
.cf-feature-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.cf-feature-stat {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.cf-feature-body { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.55; text-wrap: pretty; }

/* ═══════════════════════ LA EXPERIENCIA ═══════════════════════ */
.exp { padding: 80px 0 0; overflow: hidden; }
.exp .section-head { margin-bottom: 48px; padding: 0 var(--pad-x); }

/* Grilla de tarjetas de beneficios (placeholder hasta tener capturas reales).
   3 columnas desktop → 2 tablet → 1 mobile. */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.exp-card {
  padding: 32px 28px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.exp-card:hover {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.04);
  transform: translateY(-4px);
}
.exp-card-icon {
  width: 40px; height: 40px;
  color: var(--green);
  margin-bottom: 20px;
  filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.25));
}
.exp-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.exp-card p {
  font-size: 14.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Marquee de texto */
.text-marquee {
  margin-top: 48px;
  padding: 32px 0;
  background: var(--bg-soft);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.text-marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeText 40s linear infinite;
}
@keyframes marqueeText { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.text-marquee-track span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  padding-right: 0.25em;
}
.text-marquee-track i { font-style: normal; color: rgba(74, 222, 128, 0.6); }

/* ═══════════════════════ COMUNIDAD ═══════════════════════ */
.com { padding: 120px 0; }
.com .section-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.principle {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.principle:hover { border-color: rgba(74, 222, 128, 0.35); transform: translateY(-4px); }
.principle-img { height: 256px; overflow: hidden; }
.principle-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Encuadre por tarjeta: cada ilustración tiene los rostros a distinta altura y
   cada tarjeta tiene un ancho distinto (span), así que el recorte vertical
   varía. Centramos en las caras de cada una.
   - 1 Bienvenido (1:1, span-2): rostros arriba, recorte grande → subir el foco.
   - 2 Puntualidad (1.79:1, span-2): recorte chico, leve ajuste.
   - 3 Juego limpio / 5 Actitud (apaisadas, span-1): la altura entra casi exacta,
     no hay recorte vertical → el default alcanza.
   - 4 Celebrá (1:1, span-3): copa arriba y rostros al centro → bajar el foco. */
.bento > .principle:nth-child(1) .principle-img img { object-position: 50% 8%; }
.bento > .principle:nth-child(2) .principle-img img { object-position: 50% 14%; }
.principle.span-3 .principle-img img { object-position: 50% 46%; }
.principle-body { padding: 24px; }
.principle h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.principle p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.55; }

.community-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 24px);
  padding: clamp(20px, 2vw, 40px);
}
.community-cta p {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}
.btn-primary {
  display: inline-block;
  background: var(--green);
  color: #06140b;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: clamp(12px, 1.4vw, 18px) clamp(28px, 3vw, 44px);
  border-radius: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(74, 222, 128, 0.35); }

/* ═══════════════════════ PREGUNTAS FRECUENTES ═══════════════════════ */
/* Acordeón nativo con <details>/<summary>: el marcador propio del navegador se
   oculta y se reemplaza por un "+" verde que rota a "×" al abrir. */
.faq { padding: 120px 0; border-top: 1px solid var(--line); }
.faq .section-head { margin-bottom: 48px; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 24px;
  transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: rgba(74, 222, 128, 0.35); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 400;
  color: var(--green);
  line-height: 1;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 0 24px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ═══════════════════════ FOOTER ═══════════════════════ */
.footer { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.05); }

.wordmark-band {
  text-align: center;
  padding: clamp(48px, 7vh, 96px) var(--pad-x) clamp(28px, 4vh, 60px);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  font-size: 12vw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark-logo { height: 0.72em; width: auto; flex-shrink: 0; }
.wordmark-tagline {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: rgba(134, 239, 172, 0.6);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--line);
}
.footer-col h3 {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-col ul a {
  font-size: 14px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-col ul a:hover { color: var(--white); }
.contact-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-faint);
  margin-bottom: 6px;
}
.contact-label svg { width: 16px; height: 16px; color: var(--green); }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: var(--white);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.social-link:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.social-link svg { width: 20px; height: 20px; }
.hecho-con {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(180, 255, 200, 0.55);
}
.hecho-con span { display: block; white-space: nowrap; }
.footer-note { font-size: 13px; color: var(--text-faint); line-height: 1.55; margin-bottom: 16px; }
.btn-ghost {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--green);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 8px;
  padding: 10px 18px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.btn-ghost:hover { background: rgba(74, 222, 128, 0.08); border-color: var(--green); }

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
/* Contraste AA: 0.5 sobre #050508 ≈ 5.3:1 (el 0.3 original daba ~2.5:1) */
.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.footer-bottom-right { display: flex; gap: 24px; }
.footer-bottom-right a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-bottom-right a:hover { color: var(--white); }

/* ═══════════════════ RESPONSIVE / MOTION ═══════════════════ */
@media (max-width: 1100px) {
  .cf-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .bento { grid-template-columns: 1fr; }
  .span-1, .span-2, .span-3 { grid-column: span 1; }
  .community-cta { padding: 32px 24px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cf-features { grid-template-columns: 1fr; }
  .cf-feature { border-right: none; border-bottom: 1px solid var(--line); }
  .cf-feature:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .hero-content { padding-top: 80px; padding-bottom: 6vh; }
  .hero-title { margin-bottom: 12px; }
  .hero-sub { font-size: 24px; }
  .hero-bullets { margin: 18px 0 22px; gap: 10px; }
  .cf-steps { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: 1fr; }
  .text-marquee-track span { font-size: 14px; }
  /* Badges lado a lado repartiéndose el ancho */
  .store-badges { width: 100%; max-width: 360px; gap: 10px; }
  .badge { flex: 1 1 0; width: auto; min-width: 0; padding: 10px 12px; gap: 8px; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .wordmark { font-size: 16vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .hero-logo, .hero-sub, .hero-bullets, .store-badges, .hero-card { animation: none !important; }
  .hero-mockup { animation: none !important; }
  .phone-shot { transition: none !important; }
  .sport-reel { transition: none !important; }
  .hero-slide { transition: none; }
  .text-marquee-track { animation: none; }
}