/* ============================================================
   GRUPO CESPAD — styles.css
   ------------------------------------------------------------
   ÍNDICE
   01. Tokens
   02. Reset y base
   03. Utilidades (container, reveal, iconos, fondos, cv-auto)
   04. Botones
   05. Tipografía de sección
   06. Header y navegación
   07. Hero + selector de deportes
   08. Stats
   09. Marquee
   10. Nosotros
   11. Deportes (tabs + card + swatches)
   12. Por qué elegirnos
   13. Comparativa
   14. Proceso
   15. Proyectos
   16. Testimonios
   17. Contacto y formulario
   18. Footer
   19. WhatsApp FAB
   20. Media queries
   21. Movimiento reducido
   ============================================================ */

/* ============================================================
   01. TOKENS
   ============================================================ */
:root {
  /* Color */
  --color-bg: #0a0a0a;
  --color-surface: #141414;
  --color-surface-2: #1e1e1e;
  --color-border: #2a2a2a;
  --color-accent: #c8f135;
  --color-accent-dark: #a3c822;
  --color-text: #f0f0f0;
  --color-text-muted: #9a9a9a;      /* subido desde #868686 para pasar contraste AA sobre #141414 */
  --color-white: #ffffff;
  --color-error: #ff6b5e;           /* subido desde #e74c3c: 4.5:1 sobre fondos oscuros */

  /* Color derivado del acento — evita repetir rgba(200,241,53,...) por todos lados */
  --accent-rgb: 200, 241, 53;
  --accent-04: rgba(var(--accent-rgb), 0.04);
  --accent-06: rgba(var(--accent-rgb), 0.06);
  --accent-12: rgba(var(--accent-rgb), 0.12);
  --accent-20: rgba(var(--accent-rgb), 0.20);
  --hairline: rgba(255, 255, 255, 0.06);

  /* Vidrio — 4B.2. Receta de cristal, no de blur.
     El problema del 4B/4B.1 era que un blur parejo con un borde plano se
     lee como "foto borrosa detrás de un rectángulo": nunca como un cuerpo
     de vidrio. Estas cuatro piezas son las que lo corrigen:

       frost  — ruido finísimo sobre la superficie. Es el "cristalizado":
                rompe el degradé perfecto que delata al blur digital.
       sheen  — reflejo especular CONCENTRADO arriba-izquierda y de caída
                corta. El degradé ancho a 135 grados del 4B.1 se leía como
                plástico; un cristal refleja en un punto, no en una franja.
       rim    — el canto. Lo pinta ::before con mask-composite, así queda
                SÓLO en el filo: claro arriba-izquierda, apagado al medio,
                un toque de acento (dispersión cromática) y claro otra vez
                abajo-derecha. Un borde de un solo color no tiene canto.
       filter — blur + saturate + contrast + brightness. El contraste y el
                brillo son los que despegan la pieza del fondo en vez de
                fundirla con él, que es lo que pedía el pedido.

     El tinte (el cuerpo) lo define cada componente, porque depende de
     sobre qué está apoyado. */
  --glass-frost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --glass-sheen: radial-gradient(118% 88% at 16% -8%,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.08) 24%,
    rgba(255, 255, 255, 0) 50%);
  --glass-rim: linear-gradient(135deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.16) 26%,
    rgba(var(--accent-rgb), 0.34) 50%,
    rgba(255, 255, 255, 0.10) 72%,
    rgba(255, 255, 255, 0.62) 100%);
  --glass-filter: blur(20px) saturate(1.7) contrast(1.12) brightness(0.88);
  /* filo interior arriba + espesor abajo: el grosor de la pieza */
  --glass-bevel:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.34),
    inset 0 -1.5px 1px rgba(0, 0, 0, 0.45);
  /* El inverso del bevel. El sistema tiene dos estados de superficie:
     ELEVADA (bevel + canto + backdrop-filter) para lo que flota — tarjetas,
     tabs, botones sobre foto — y HUNDIDA (esto) para lo que recibe algo —
     inputs y el panel de swatches. Antes cada uno de esos grupos tenía su
     propia receta inventada, que es lo que hacía ver cuatro lenguajes. */
  --glass-inset:
    inset 0 1.5px 3px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);

  /* Tipografía */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Tipografía — escala. Antes había 29 tamaños sueltos en 47 declaraciones
     y ni un token, mientras color, espaciado, radios, sombras y transiciones
     sí los tenían. Once de esos valores caían entre 0.7rem y 0.95rem, o sea
     diferencias que el ojo no distingue pero que prueban que no había regla.
     Los clamp() de los títulos grandes quedan como están a propósito: ahí el
     tamaño es fluido por viewport, no un escalón de esta escala. */
  --text-2xs: 0.75rem;     /* 12px — etiquetas micro en mayúscula */
  --text-xs: 0.8125rem;    /* 13px — eyebrows, badges, pies, errores */
  --text-sm: 0.875rem;     /* 14px — labels de formulario */
  --text-md: 0.9375rem;    /* 15px — texto de tarjeta y de lista */
  --text-base: 1rem;       /* 16px — cuerpo y inputs (menos ya hace zoom iOS) */
  --text-lg: 1.0625rem;    /* 17px — bajadas de sección */
  --text-xl: 1.5rem;       /* 24px — títulos de tarjeta (Bebas) */
  --text-2xl: 1.6rem;      /* 25.6px — label de tab en desktop */
  --text-3xl: 2.2rem;      /* 35.2px — encabezado de comparativa */
  --text-4xl: 3rem;        /* 48px — número de paso del proceso */

  /* Títulos de sección: dos pesos, no uno.
     Antes los 9 H2 median lo mismo y Deportes (que es el funnel) gritaba
     igual que Proceso. Ahora --title-lg es para las secciones donde el
     visitante decide algo (Deportes, Parquización, Proyectos, Contacto) y
     --title-sm para las que argumentan a favor de esa decisión (Nosotros,
     Por qué elegirnos, Comparativa, Proceso, Testimonios). */
  --title-lg: clamp(2.25rem, 6vw, 4rem);      /* hasta 64px */
  --title-sm: clamp(1.9rem, 4.6vw, 3rem);     /* hasta 48px */

  /* Espaciado */
  /* Escala de espaciado. Once escalones, nombrados por su valor en px: el
     nombre te dice cuánto mide, así que no hay que ir a buscarlo a ningún
     lado. Antes eran seis escalones con nombres de talle (2xs a xl) y saltos
     de 2x o 4x entre uno y otro: no tenía los valores intermedios que un
     componente necesita, y por eso el código los salteaba y escribía rem
     crudos. Había 26 valores distintos en 79 declaraciones.
     Si hace falta un escalón nuevo, se suma acá y se documenta. Lo que no se
     hace es volver a escribir un rem suelto. */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-112: 7rem;

  /* Layout */
  --container-max: 75rem;
  --container-pad: 1.25rem;
  --header-h: 4rem;
  --tap: 2.75rem;                   /* 44px: mínimo de área táctil */
  --swatch-size: 3.5rem;            /* diámetro de los círculos de pasto */

  /* Radios */
  --radius-pill: 999px;        /* pastillas: badge, dot del carrusel */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;

  /* Sombras */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow: 0.7s var(--ease-out);
  --reveal-delay: 0ms;
}

/* ============================================================
   02. RESET Y BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* [hidden] debe ganarle a cualquier display: flex/grid de componente */
[hidden] {
  display: none !important;
}

/* Los anclas no quedan tapadas por el header fijo */
:where(section, main)[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 300;
  padding: var(--space-12) var(--space-24);
  background: var(--color-accent);
  color: #0a0a0a;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: translate var(--transition-fast);
}

.skip-link:focus-visible {
  translate: -50% 0;
}

/* Sprite de íconos: presente en el DOM pero sin ocupar espacio */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================
   03. UTILIDADES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Íconos del sprite --- */
.icon {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* --- Canto de vidrio (4B.2) ---
   Un degradé no puede ir en `border`, así que el canto se pinta con un
   ::before del tamaño de la pieza y se le saca el centro con máscara:
   queda un aro de 1.5px que sigue el border-radius. Todo lo que use
   vidrio suma su selector acá y hereda el mismo canto. */
.sport-panel-icon::before,
.deportes-panel::before,
.deportes-tabs::before,
.deportes-tab::before,
.por-que-item::before,
.comparativa-col::before,
.parq-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--glass-rim);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* La columna premium de Comparativa: canto en acento, mismo recurso que
   el tab activo de Deportes. */
.comparativa-col--premium::before {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.95) 0%,
    rgba(var(--accent-rgb), 0.45) 30%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(var(--accent-rgb), 0.85) 100%);
}

/* El panel de Deportes lleva el canto al 55%: es el soporte, no la pieza
   protagonista. Los tabs que apoyan encima tienen que ganarle en brillo. */
.deportes-panel::before {
  opacity: 0.55;
}

/* Sin mask-composite no hay aro posible: se cae a un borde plano claro,
   que es exactamente lo que había antes del 4B.2. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .sport-panel-icon,
  .deportes-panel,
  .deportes-tabs,
  .deportes-tab,
  .por-que-item,
  .comparativa-col,
  .parq-nav {
    border: 1.5px solid rgba(255, 255, 255, 0.22);
  }

  .sport-panel-icon::before,
  .deportes-panel::before,
  .deportes-tabs::before,
  .deportes-tab::before,
  .por-que-item::before,
  .comparativa-col::before,
  .parq-nav::before {
    display: none;
  }
}

/* --- Reveal on scroll --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity var(--transition-slow) var(--reveal-delay),
    transform var(--transition-slow) var(--reveal-delay);
}

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

/* Escalón de 80ms. Para sumar un nivel nuevo: una línea más. */
[data-reveal-delay="1"] { --reveal-delay: 80ms; }
[data-reveal-delay="2"] { --reveal-delay: 160ms; }
[data-reveal-delay="3"] { --reveal-delay: 240ms; }
[data-reveal-delay="4"] { --reveal-delay: 320ms; }

/* --- Fondo de textura de pasto compartido (deportes + por qué) --- */
.bg-pasto {
  position: relative;
  background-color: #0d130c;
  background-image:
    linear-gradient(var(--pasto-veil-a, rgba(10, 15, 8, 0.60)), var(--pasto-veil-b, rgba(10, 15, 8, 0.88))),
    url('img/textura-pasto.webp');
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-pasto > .container {
  position: relative;
  z-index: 1;
}

/* --- Saltea render de secciones lejanas al viewport --- */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ============================================================
   04. BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  max-width: 100%;
  min-height: var(--tap);
  padding: var(--space-12) var(--space-32);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border: 1.5px solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-accent);
  color: #0a0a0a;
  border-color: var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
}

.btn--outline {
  max-width: 100%;
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  white-space: normal;
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-accent);
  color: #0a0a0a;
  transform: translateY(-2px);
}

.btn--full {
  width: 100%;
}

/* ============================================================
   05. TIPOGRAFÍA DE SECCIÓN
   ============================================================ */
.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-12);
  text-align: center;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--title-lg);
  line-height: 1.05;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin-bottom: var(--space-16);
  text-align: center;
  text-wrap: balance;
}

/* Segundo peso: secciones de apoyo. El letter-spacing sube un punto porque
   a menor cuerpo, Bebas necesita más aire para no cerrarse. */
.section-title--sm {
  font-size: var(--title-sm);
  letter-spacing: 0.07em;
}

.section-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

.section-header {
  margin-bottom: var(--space-64);
}

/* Las negritas dentro de texto atenuado suben a blanco: si quedan del mismo
   gris, el bold casi no se nota y la palabra clave se pierde. */
.section-desc strong,
.parquizacion-desc strong,
.parquizacion-list strong,
.nosotros-desc strong,
.por-que-desc strong,
.contacto-desc strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   06. HEADER Y NAVEGACIÓN
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal);
}

.site-header.scrolled {
  background-color: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.05em;
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.logo:hover {
  color: var(--color-accent);
}

/* Nav — mobile por defecto (panel desplegable) */
.nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  background-color: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-24);
}

.nav.is-open {
  display: flex;
}

.nav-link,
.nav-cta {
  width: 100%;
  padding: var(--space-16);
  text-align: center;
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link {
  color: var(--color-text);
}

.nav-link:hover {
  color: var(--color-accent);
}

.nav-cta {
  margin-top: var(--space-8);
  font-weight: 500;
  background-color: var(--color-accent);
  color: #0a0a0a;
}

.nav-cta:hover {
  background-color: var(--color-accent-dark);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: var(--tap);
  min-height: var(--tap);
  z-index: 101;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   07. HERO + SELECTOR DE DEPORTES
   ============================================================ */

/* Grid de una sola celda: las 3 capas se apilan SIN position:absolute,
   así el hero puede crecer si el contenido no entra (fix de mobile). */
.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero > .sport-selector,
.hero > .hero-veil,
.hero > .hero-content {
  grid-area: 1 / 1;
}

.sport-selector {
  z-index: 1;
  display: flex;
  overflow: hidden;
}

.sport-panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  transition: flex-grow var(--transition-slow);
}

.sport-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sport-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.45) 45%,
      rgba(10, 10, 10, 0.3) 100%);
  transition: background var(--transition-slow);
}

.sport-panel-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding-bottom: clamp(var(--space-32), 9vh, var(--space-112));
}

/* 4B.2: cristal. Apoyan sobre fotos aéreas, así que el tinte es más denso
   y el brightness más bajo que en el resto del sitio: sobre una foto clara
   un vidrio suave desaparece. El SVG no se toca, sigue heredando color. */
.sport-panel-icon {
  position: relative;
  width: clamp(var(--tap), 11vw, 4rem);
  height: clamp(var(--tap), 11vw, 4rem);
  padding: var(--space-12);
  border-radius: 50%;
  background:
    var(--glass-sheen),
    linear-gradient(165deg, rgba(8, 12, 6, 0.14), rgba(8, 12, 6, 0.32));
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* blur corto: son piezas chicas y están sobre el LCP, no conviene
     pedirle al compositor un radio grande acá arriba. */
  backdrop-filter: blur(8px) saturate(2) contrast(1.3) brightness(0.88);
  -webkit-backdrop-filter: blur(8px) saturate(2) contrast(1.3) brightness(0.88);
  box-shadow: var(--glass-bevel), 0 6px 18px rgba(0, 0, 0, 0.45);
  transition:
    transform var(--transition-normal),
    background-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sport-panel-icon { background: rgba(8, 12, 6, 0.88); }
}

.sport-panel-icon:hover,
.sport-panel-icon:focus-visible {
  background: linear-gradient(var(--color-accent), var(--color-accent));
  color: #0a0a0a;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
}

/* En hover el cristal se vuelve macizo: el canto acompaña. */
.sport-panel-icon:hover::before,
.sport-panel-icon:focus-visible::before {
  background: linear-gradient(var(--color-accent), var(--color-accent));
}

.sport-panel-label {
  font-family: var(--font-display);
  /* clamp con vw: nunca desborda el ancho del panel en mobile */
  font-size: clamp(0.95rem, 3.4vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  opacity: 0.92;
}

.hero-veil {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(10, 10, 10, 0.30) 0%,
      rgba(10, 10, 10, 0.25) 25%,
      rgba(10, 10, 10, 0.15) 50%,
      rgba(10, 10, 10, 0.25) 75%,
      rgba(10, 10, 10, 0.40) 100%);
}

.hero-content {
  z-index: 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: calc(var(--header-h) + var(--space-32)) 38svh;
  padding-inline: var(--space-16);
  pointer-events: none;
}

.hero-content a {
  pointer-events: auto;
}

/* El H1 tiene dos partes: kicker (keyword + geo) y marca.
   Visualmente es igual que antes; el kicker ocupa el lugar del eyebrow. */
.hero-title {
  margin-bottom: var(--space-16);
}

.hero-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 2.6vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-8);
}

.hero-brand {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 10rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: rgba(240, 240, 240, 0.92);
  max-width: 40rem;
  margin-bottom: var(--space-32);
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}

.scroll-arrow {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  opacity: 0.6;
  animation: pulse-down 2s ease-in-out infinite;
  transition: opacity var(--transition-fast);
}

.scroll-arrow:hover {
  opacity: 1;
}

.scroll-arrow .icon {
  width: 24px;
  height: 24px;
}

@keyframes pulse-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ============================================================
   08. STATS
   ============================================================ */
.stats {
  padding-block: var(--space-64);
  background-color: var(--color-accent);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  gap: var(--space-16);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  color: #0a0a0a;
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.7);
}

/* ============================================================
   09. MARQUEE
   ============================================================ */
.marquee-specs {
  padding-block: var(--space-16);
  background-color: var(--color-surface);
  border-block: 1px solid var(--color-border);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
}

/* La animación arranca sólo cuando el JS duplicó el contenido.
   Sin JS el marquee queda estático pero legible (no se va de pantalla). */
.marquee-track.is-ready {
  animation: marquee-scroll 34s linear infinite;
  will-change: transform;
}

.marquee-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-inline: var(--space-20);
  white-space: nowrap;
}

.marquee-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   9b. GRAIN — 4B
   Textura de ruido sutil para las secciones lisas: las cuatro que NO tienen
   el bg-pasto texturado encima (Nosotros, Parquización, Proceso y Contacto).
   SVG feTurbulence inline como data URI: 0 requests extra, ~700 bytes, y
   sumar selectores acá no suma un solo byte más.
   pointer-events: none para no interferir con clicks.
   isolation: isolate contiene el mix-blend-mode a la sección.
   Deportes, Por qué elegirnos e Insumos NO reciben grain: ya tienen la
   textura de pasto.
   4A.13: entran Parquización y Proceso. Eran las dos únicas secciones del
   sitio sin ninguna textura, planas sobre negro puro, y Parquización encima
   queda entre dos secciones de pasto, así que el contraste hacía que se
   leyera como un hueco. El color base no cambia: lo que faltaba no era
   luz, era superficie. */
.nosotros,
.parquizacion,
.proceso,
.contacto {
  position: relative;
  isolation: isolate;
}

.nosotros::before,
.parquizacion::before,
.proceso::before,
.contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Sobre negro casi puro, overlay no rinde: la fórmula del modo da
   2 × fondo × fuente, así que con un fondo al 4% de luminancia el ruido
   queda en nada por más que se suba la opacidad. Las dos secciones que
   apoyan sobre --color-bg usan screen, que sí levanta los negros, y ahí
   el grano se ve. En #141414 overlay alcanza y se deja como estaba. */
.parquizacion::before,
.proceso::before {
  mix-blend-mode: screen;
  opacity: 0.05;
}

.nosotros > .container,
.parquizacion > .container,
.proceso > .container,
.contacto > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   10. NOSOTROS
   ============================================================ */
.nosotros {
  padding-block: var(--space-112);
  background-color: var(--color-surface);
}

.nosotros-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-64);
  align-items: center;
}

.nosotros-img-wrap {
  position: relative;
}

.nosotros-img {
  width: 100%;
  height: 28rem;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-2);
}

.nosotros-float-card {
  position: absolute;
  bottom: -1.5rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-24);
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
  color: #0a0a0a;
}

.float-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  stroke-width: 2.5;
  line-height: 1;
}

.float-text {
  font-size: var(--text-md);
  font-weight: 700;
  max-width: 10rem;
  line-height: 1.3;
}

.nosotros-text {
  padding-top: var(--space-16);
}

.nosotros-desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
  line-height: 1.75;
  text-align: center;
  text-wrap: pretty;
}

/* ============================================================
   11. DEPORTES
   ============================================================ */
.deportes {
  padding-block: var(--space-112);
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}

/* Container más ancho SOLO para Deportes: scoped, no afecta otras secciones */
.deportes .container {
  max-width: 90rem;
}

.deportes::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, var(--accent-06), transparent 45%),
    radial-gradient(circle at 90% 80%, var(--accent-04), transparent 45%);
}

.deportes-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  padding: var(--space-24);
  /* 4B.2: el panel es la pieza de cristal grande que sostiene a los tabs.
     Va más tenue que ellos a propósito: si los dos tienen el mismo peso,
     los tabs dejan de despegarse y la jerarquía se pierde. */
  background:
    var(--glass-frost),
    var(--glass-sheen),
    linear-gradient(170deg, rgba(18, 22, 16, 0.34), rgba(18, 22, 16, 0.48));
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-bevel), var(--shadow-lg);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .deportes-panel { background: rgba(20, 20, 20, 0.92); }
}

/* --- Tabs --- */
.deportes-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 4B.2: cristal en el contenedor mobile. En desktop esto se apaga y el
     cristal pasa a cada tab por separado (ver media query). */
  background:
    var(--glass-frost),
    var(--glass-sheen),
    linear-gradient(170deg, rgba(10, 14, 8, 0.42), rgba(10, 14, 8, 0.56));
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--glass-bevel), var(--shadow-sm);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .deportes-tabs { background: rgba(10, 14, 8, 0.88); }
}

.deportes-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--tap);
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.deportes-tab:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 60%;
  background: rgba(255, 255, 255, 0.08);
}

.deportes-tab-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
  transition: transform var(--transition-fast);
}

.deportes-tab-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
}

.deportes-tab:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
}

.deportes-tab:hover:not(.is-active) .deportes-tab-icon {
  transform: translateY(-2px);
}

.deportes-tab.is-active {
  background: var(--accent-12);
  color: var(--color-accent);
}

.deportes-tab.is-active::after,
.deportes-tab.is-active + .deportes-tab::after {
  opacity: 0;
}

.deportes-tab:focus-visible {
  outline-offset: -3px;
}

/* --- Card --- */
.deportes-card {
  background: rgba(30, 30, 30, 0.55);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.deporte-detail {
  display: flex;
  flex-direction: column;
  animation: detail-in 0.35s var(--ease-out);
}

@keyframes detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.deporte-detail-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-2);
  /* width/height reales por breakpoint más abajo: mobile usa el ratio
     intrínseco del <img> (foto completa), desktop fuerza una altura para
     tener cover consistente entre tabs. */
}

.deporte-detail-img {
  display: block;
  object-fit: cover;
  /* width/height reales por breakpoint más abajo */
}

.deporte-detail-hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-32);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.deporte-detail-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 0.05em;
  color: var(--color-white);
  margin: 0;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.deporte-detail-desc-inline {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
  margin: 0;
  line-height: 1.4;
}

.deporte-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-20) var(--space-24);
}

/* --- Specs --- */
.deporte-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.deporte-specs li {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  background: var(--accent-06);
  border: 1px solid var(--accent-20);
  border-radius: var(--radius-sm);
}

.spec-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.spec-value {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text);
}

/* --- Swatches de color --- */
.deporte-colores {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-16);
  /* Hundida, igual que los inputs: es el panel que contiene a los swatches. */
  background: rgba(10, 14, 8, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-inset);
}

.deporte-colores-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.deporte-colores-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

.color-swatch {
  width: var(--swatch-size);
  height: var(--swatch-size);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* La textura llega por la variable --swatch definida inline en el HTML */
  background-image: var(--swatch);
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-2);
  transition: border-color var(--transition-fast);
}

.color-swatch:hover { border-color: rgba(255, 255, 255, 0.5); }

/* Sin zoom: sólo el aro verde. Menos repaint y menos CSS. */
.color-swatch.is-active {
  border-color: var(--color-accent);
  border-width: 2.5px;
}

.deporte-colores-selected {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.deporte-colores-selected [data-color-out] {
  color: var(--color-white);
  font-weight: 600;
}

.deporte-detail-body > .btn {
  align-self: flex-start;
}

/* ============================================================
   11b. PARQUIZACIÓN — banda de cross-sell (segunda línea de negocio)
   Deliberadamente MÁS SIMPLE que Deportes: carrusel de obras, 3 bullets
   y un CTA. No compite con el funnel principal, lo complementa.
   ============================================================ */
.parquizacion {
  padding-block: var(--space-112);
  background-color: var(--color-bg);
}

.parquizacion-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

/* --- Carrusel de obras (Bloque 3) ---
   La altura del viewport es la misma clamp() que tenia la foto fija, asi el
   alto de la seccion no se movio al sumar el carrusel. El desplazamiento usa
   `translate` (no `transform`) para quedar en el compositor, igual que el
   nav-pulse y el FAB del 4B. */
.parq-carrusel {
  position: relative;
}

.parq-viewport {
  width: 100%;
  height: clamp(17rem, 62vw, 26rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  /* pan-y: el navegador se queda con el scroll vertical y el JS solo
     interpreta el gesto horizontal. Sin esto el swipe traba la pagina. */
  touch-action: pan-y;
}

.parq-track {
  display: flex;
  height: 100%;
  transition: translate var(--transition-normal);
}

/* Mientras el dedo arrastra, la foto tiene que seguirlo sin delay. */
.parq-track.is-dragging {
  transition: none;
}

.parq-slide {
  flex: 0 0 100%;
  height: 100%;
}

.parq-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* el arrastre nativo de la imagen compite con el swipe */
  -webkit-user-drag: none;
  user-select: none;
}

/* --- Flechas: solo desktop (en mobile y tablet manda el swipe) --- */
.parq-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: none;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: var(--space-12);
  color: var(--color-text);
  border-radius: 50%;
  /* 4B.2: mismo cristal que el resto, con tinte denso porque apoya
     directamente sobre la foto y tiene que leerse sí o sí. */
  background:
    var(--glass-sheen),
    linear-gradient(165deg, rgba(10, 14, 8, 0.34), rgba(10, 14, 8, 0.56));
  box-shadow: var(--glass-bevel), 0 6px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px) saturate(2) contrast(1.3) brightness(0.62);
  -webkit-backdrop-filter: blur(12px) saturate(2) contrast(1.3) brightness(0.62);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .parq-nav { background: rgba(10, 14, 8, 0.9); }
}

.parq-nav--prev { left: 0.9rem; }
.parq-nav--next { right: 0.9rem; }

/* Una sola flecha en el sprite: la de "anterior" es la misma espejada. */
.parq-nav--prev .icon { scale: -1 1; }

.parq-nav:hover {
  color: var(--color-accent);
}

.parq-nav:hover::before {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.90) 0%,
    rgba(var(--accent-rgb), 0.35) 40%,
    rgba(255, 255, 255, 0.40) 60%,
    rgba(var(--accent-rgb), 0.80) 100%);
}

.parq-nav[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* --- Dots --- */
.parq-dots {
  display: flex;
  justify-content: center;
  /* sin gap: cada dot ya es un boton de 44px, el aire lo pone el padding
     interno. Con gap quedaban demasiado separados entre si. */
  margin-top: var(--space-4);
}

.parq-dot {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
}

.parq-dot::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.28);
  transition: background-color var(--transition-fast), width var(--transition-fast);
}

.parq-dot[aria-current="true"]::before {
  width: 1.4rem;
  background: var(--color-accent);
}

.parquizacion-text .section-eyebrow,
.parquizacion-text .section-title { text-align: left; }

.parquizacion-desc {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-16);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.parquizacion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-32);
}

.parquizacion-list li {
  position: relative;
  padding-left: var(--space-24);
  font-size: var(--text-md);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.parquizacion-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ============================================================
   12. POR QUÉ ELEGIRNOS
   ============================================================ */
.por-que {
  padding-block: var(--space-112);
  --pasto-veil-a: rgba(10, 15, 8, 0.40);
  --pasto-veil-b: rgba(10, 15, 8, 0.92);
}

/* La grilla se arma según la cantidad de tarjetas VISIBLES: una tarjeta con
   [hidden] no ocupa columna, así que al ocultar una no queda hueco.
   Salta de 1 a 3 columnas sin pasar por 2, justamente para que 3 tarjetas
   nunca dejen una huérfana sola en la última fila. auto-fit deja que vuelva
   a 4 columnas solo si en el futuro se reactiva la tarjeta oculta. */
.por-que-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
}

@media (min-width: 760px) {
  .por-que-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

.por-que-item {
  position: relative;
  padding: var(--space-32) var(--space-24);
  /* 4B.2: cristal completo. Es la pieza más grande del sistema, así que
     es donde más se notaba el blur plano: la superficie quedaba muerta.
     El frost le da grano y el canto le da espesor. El tinte sigue siendo
     verde-oscuro para dialogar con el bg-pasto de la sección. */
  background:
    var(--glass-frost),
    var(--glass-sheen),
    linear-gradient(165deg, rgba(15, 20, 12, 0.46), rgba(15, 20, 12, 0.62));
  border-radius: var(--radius-md);
  text-align: center;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-bevel), var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .por-que-item { background: rgba(15, 20, 12, 0.92); }
}

.por-que-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-bevel), 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* En hover el canto se enciende del lado del acento. */
.por-que-item:hover::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.14) 24%,
    rgba(var(--accent-rgb), 0.55) 50%,
    rgba(255, 255, 255, 0.10) 72%,
    rgba(255, 255, 255, 0.58) 100%);
}

.por-que-icon {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-16);
  color: var(--color-accent);
}

.por-que-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  color: var(--color-white);
  margin-bottom: var(--space-8);
}

.por-que-desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ============================================================
   13. COMPARATIVA
   ============================================================ */
.comparativa {
  padding-block: var(--space-112);
  background-color: var(--color-surface);
}

.comparativa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  max-width: 62rem;
  margin-inline: auto;
  margin-bottom: var(--space-32);
}

/* Las dos columnas son tarjetas, así que van con el mismo cristal y el
   mismo --radius-md que las de Por qué elegirnos. Antes eran superficies
   sólidas con radio de contenedor: la regla del sistema es contenedor =
   --radius-lg, tarjeta = --radius-md. */
.comparativa-col {
  position: relative;
  padding: var(--space-48) var(--space-32);
  border-radius: var(--radius-md);
}

.comparativa-col--estandar {
  background:
    var(--glass-frost),
    var(--glass-sheen),
    linear-gradient(165deg, rgba(26, 26, 26, 0.55), rgba(26, 26, 26, 0.70));
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-bevel), var(--shadow-sm);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .comparativa-col--estandar { background: var(--color-surface-2); }
}

/* La premium sigue destacando, pero con el mismo recurso que el tab activo
   de Deportes: cristal teñido de acento, no una receta aparte. */
.comparativa-col--premium {
  background:
    var(--glass-frost),
    var(--glass-sheen),
    linear-gradient(165deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-bevel), 0 0 40px rgba(var(--accent-rgb), 0.15), var(--shadow-lg);
}

.comparativa-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-8) var(--space-16);
  background-color: var(--color-accent);
  color: #0a0a0a;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  white-space: nowrap;
}

.comparativa-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-24);
  text-align: center;
}

.comparativa-col--estandar .comparativa-heading { color: var(--color-text-muted); }
.comparativa-col--premium .comparativa-heading  { color: var(--color-accent); }

.comparativa-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.comparativa-list li {
  position: relative;
  padding-left: var(--space-32);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Marcador compartido: sólo cambian contenido y colores por variante */
.comparativa-list li::before {
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: 50%;
}

.comparativa-col--estandar .comparativa-list li::before {
  content: '✕';
  color: #ff6b5e;
  background: rgba(255, 107, 94, 0.14);
}

.comparativa-col--premium .comparativa-list li { color: var(--color-text); }

.comparativa-col--premium .comparativa-list li::before {
  content: '✓';
  color: #0a0a0a;
  background: var(--color-accent);
}

.comparativa-footer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.comparativa-footer a {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
  transition: border-color var(--transition-fast);
}

.comparativa-footer a:hover {
  border-color: var(--color-accent);
}

/* ============================================================
   14. PROCESO
   ============================================================ */
.proceso {
  padding-block: var(--space-112);
  background-color: var(--color-bg);
}

.proceso-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  max-width: 28rem;
  margin-inline: auto;
}

/* Línea conectora: pseudo-elemento, no markup vacío */
.proceso-step {
  position: relative;
  text-align: center;
  padding: var(--space-24);
}

.proceso-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: 1px;
  height: 1rem;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

.proceso-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-8);
}

.proceso-step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  color: var(--color-white);
  margin-bottom: var(--space-8);
}

.proceso-step-desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ============================================================
   14b. INSUMOS Y MATERIALES
   Publico distinto al del resto del sitio. El resto vende resultados y
   muestra fotos; esto vende materia prima y lista especificaciones, asi
   que la composicion es una ficha y no una galeria de tarjetas.
   La lista arma el mensaje de WhatsApp (main.js, modulo 10). Sin JS la
   seccion sigue sirviendo: el CTA manda el saludo generico.
   ============================================================ */
.insumos {
  padding-block: var(--space-112);
}

/* Sin un solo insumo cargado la seccion no existe. Se puede publicar
   vacia y aparece sola cuando haya contenido. */
.insumos:not(:has(.insumo)) {
  display: none;
}

.insumos-intro .section-eyebrow,
.insumos-intro .section-title {
  text-align: left;
}

.insumos-desc {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: var(--space-32);
  text-wrap: pretty;
}

.insumos-cta-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* Contador de marcados. Lo enciende el JS; sin JS nunca aparece. */
.insumos-contador {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--space-8);
  border-radius: var(--radius-pill);
  background: #0a0a0a;
  color: var(--color-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.insumos-nota {
  margin-top: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* Salida al funnel de obra: el que cayo acá por error tiene que poder
   volver sin scrollear para arriba. */
.insumos-salida {
  display: inline-block;
  margin-top: var(--space-16);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 600;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
  transition: color var(--transition-fast);
}

.insumos-salida:hover {
  color: var(--color-accent);
}

/* --- El panel: superficie ELEVADA, la del sistema --- */
.insumos-panel {
  position: relative;
  margin-top: var(--space-32);
  border-radius: var(--radius-lg);
  background:
    var(--glass-frost),
    var(--glass-sheen),
    linear-gradient(170deg, rgba(14, 19, 11, 0.46), rgba(14, 19, 11, 0.60));
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-bevel), var(--shadow-md);
  overflow: hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .insumos-panel { background: rgba(14, 19, 11, 0.92); }
}

.insumos-panel-head,
.insumos-panel-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insumos-panel-head {
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.insumos-panel-estado {
  color: var(--color-text);
  font-weight: 600;
}

.insumos-panel-pie {
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-md);
}

/* --- Las filas --- */
.insumo {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.insumo:first-child {
  border-top: 0;
}

/* El input real vive fuera de la vista pero sigue siendo el control:
   recibe foco, teclado y lectores de pantalla. La marca visible es
   .insumo-marca. */
.insumo-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El <label> envuelve toda la fila: el area tactil es la fila entera,
   muy por encima de los 44px minimos. */
.insumo-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--space-16);
  row-gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.insumo-fila:hover {
  background: rgba(255, 255, 255, 0.03);
}

.insumo-check:focus-visible + .insumo-fila {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.insumo-check:checked + .insumo-fila {
  background: rgba(var(--accent-rgb), 0.07);
}

.insumo-tile {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: var(--space-12);
  border-radius: var(--radius-sm);
  background: rgba(10, 14, 8, 0.5);
  box-shadow: var(--glass-inset);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.insumo-check:checked + .insumo-fila .insumo-tile {
  color: var(--color-accent);
}

.insumo-texto {
  display: block;
  min-width: 0;
}

.insumo-nombre {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  color: var(--color-white);
  line-height: 1.1;
}

.insumo-spec {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Unidad de venta: el unico lugar del sitio donde algo se vende por
   cantidad y no por proyecto. */
.insumo-unidad {
  grid-column: 2;
  justify-self: start;
  font-size: var(--text-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* La casilla visible. El control real es el input de arriba. */
.insumo-marca {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.insumo-marca .icon {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 3;
}

.insumo-check:checked + .insumo-fila .insumo-marca {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0a0a0a;
}

/* ============================================================
   15. PROYECTOS
   ============================================================ */
.proyectos {
  padding-block: var(--space-112);
  background-color: var(--color-surface);
}

.masonry {
  column-count: 1;
  column-gap: var(--space-16);
}

.masonry img {
  width: 100%;
  margin-bottom: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  break-inside: avoid;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.masonry img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   16. TESTIMONIOS
   ============================================================ */
.testimonios {
  padding-block: var(--space-64);
}

.testimonios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
}

.testimonio {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-32);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal);
}

.testimonio:hover {
  border-color: var(--color-accent);
}

.testimonio-texto {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.75;
  font-style: italic;
}

.testimonio-autor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonio-autor strong {
  font-size: var(--text-md);
  color: var(--color-white);
}

.testimonio-autor span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

/* ============================================================
   17. CONTACTO Y FORMULARIO
   ============================================================ */
.contacto {
  padding-block: var(--space-112);
  background-color: var(--color-surface);
}

.contacto-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-64);
  align-items: start;
}

.contacto-desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-32);
  line-height: 1.75;
  font-size: var(--text-lg);
  text-align: center;
  text-wrap: pretty;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.contact-info li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.contact-info a {
  color: var(--color-text);
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
}

.contact-info a:hover {
  color: var(--color-accent);
}

/* Iconos del sprite, ya no emojis. Se alinean con la primera línea del
   texto, por eso el margin-top y no un align-items: center en el <li>. */
.ci-icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: var(--space-4);
  flex-shrink: 0;
  color: var(--color-accent);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-32);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* Superficie HUNDIDA: un input recibe, no flota. Comparte tinte y borde
   con el resto del sistema, pero el relieve va para adentro. */
.form-input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-12) var(--space-16);
  background-color: rgba(10, 14, 8, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-inset);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);              /* 16px: evita el auto-zoom de iOS */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--glass-inset), 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.form-input.is-invalid {
  border-color: var(--color-error);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: var(--space-40);
}

.form-select option {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

.form-textarea {
  resize: vertical;
  min-height: 5rem;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  min-height: 1rem;
}

.required-mark {
  color: var(--color-accent);
  margin-left: 2px;
}

.label-opcional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-xs);
}

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer {
  padding-block: var(--space-32);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.footer-brand:hover {
  color: var(--color-accent);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-social {
  display: flex;
  gap: var(--space-8);
}

.social-link {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.social-link:hover {
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ============================================================
   19. WHATSAPP FAB
   ============================================================ */
.whatsapp-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  /* El glow verde solo no alcanzaba: encima del CTA lima se sumaba verde
     sobre verde y los dos se fundían. Ahora van tres capas: un filo oscuro
     que lo despega de lo que tenga atrás sea oscuro o lima, una sombra real
     de elevación, y el glow verde atenuado, que es lo que le da carácter
     sobre los fondos oscuros.
     El halo va DIFUSO y no como aro de 1.5px: un borde duro alrededor de un
     círculo se lee como sticker troquelado. Difuso separa igual y no dibuja
     un contorno. */
  box-shadow:
    0 0 10px 3px rgba(8, 10, 8, 0.45),
    var(--shadow-md),
    0 0.5rem 1.5rem rgba(37, 211, 102, 0.26);
  /* 4B: transition solo sobre transform (compositable). La sombra
     queda estática — la "vida" del hover viene del scale. */
  transition: transform var(--transition-fast);
  animation: fab-in 1.4s 0.05s var(--ease-out) both;
}

.whatsapp-fab .icon {
  width: 28px;
  height: 28px;
}

.whatsapp-fab:hover {
  transform: scale(1.1);
}

@keyframes fab-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   20. MEDIA QUERIES
   ============================================================ */

/* ── Mobile chico: el hero necesita menos aire abajo ── */
@media (max-width: 599px) {
  .hero-content {
    padding-block: calc(var(--header-h) + var(--space-16)) 34svh;
  }

  .sport-panel:focus-within {
    flex-grow: 4;
  }

  /* El círculo no puede bajar de --tap (44px, área táctil mínima),
     pero el padding de 0.8rem le comía casi la mitad al dibujo del
     ícono en pantallas chicas donde el clamp cae al piso. Menos
     padding = mismo círculo, ícono más grande adentro. */
  .sport-panel-icon {
    padding: var(--space-8);
  }
}

/* ── Mobile muy chico: más aire lateral y FAB más discreto ── */
@media (max-width: 380px) {
  :root {
    --container-pad: 1.5rem;
  }

  .whatsapp-fab {
    width: 3rem;
    height: 3rem;
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .whatsapp-fab .icon {
    width: 24px;
    height: 24px;
  }
}

/* ── Tablet ── */
@media (min-width: 600px) {
  :root {
    --container-pad: 2rem;
  }

  /* .por-que-grid ya no entra acá: se arma con auto-fit según las tarjetas
     visibles (ver sección 12), para que ocultar una no deje hueco. */
  .testimonios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparativa-grid {
    grid-template-columns: 1fr 1fr;
  }

  .masonry {
    column-count: 2;
  }

  .proceso-steps {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    gap: 0;
  }

  .proceso-step:not(:last-child)::after {
    left: auto;
    right: -0.5rem;
    bottom: auto;
    top: 3.5rem;
    width: 1rem;
    height: 1px;
    background: linear-gradient(to right, var(--color-accent), transparent);
  }
}

/* ── Deportes: imagen edge-to-edge por debajo de desktop (mobile + tablet) ── */
@media (max-width: 991px) {
  /* Ajuste 4A.10: se saca el bleed de .deportes-card (margin-inline
     negativo + reseteo de padding/border/radius de los ajustes 4A/4A.2).
     La card vuelve a heredar su ancho, padding, border y radius normales
     de la regla base — queda contenida dentro de .deportes-panel como el
     resto del contenido, sin edge-to-edge. .deporte-detail-hero no tiene
     margin-inline propio (se confirmó al revisar antes de tocar nada), así
     que no hace falta ningún cambio ahí más allá de lo que ya tenía. */

  /* Sin min/max-height forzado: la altura sale del ratio intrínseco real
     de cada <img> (width/height del HTML), así se ve la foto completa
     sin que cover tenga que recortar para llenar un alto que no le
     corresponde. Cada deporte tendrá una altura de card distinta según
     su foto sea vertical (pádel/tenis) u horizontal (fútbol/rugby/hockey):
     es el comportamiento esperado. */
  .deporte-detail-hero {
    width: 100%;
    height: auto;
    /* Piso para fotos muy panorámicas (ej. tenis 1200x586, ~166px de alto
       a 375px de ancho): sin esto el overlay de título+descripción tapa
       más de la mitad de la foto. No afecta a las fotos que ya superan
       este alto por su propio ratio (pádel, fútbol, rugby, hockey). */
    min-height: 280px;
    border-radius: 0;
  }

  .deporte-detail-img {
    width: 100%;
    height: auto;
    /* min-height DIRECTO en el <img>, no height:100% del padre: probé
       height:100% primero y no funciona acá — .deporte-detail-hero tiene
       height:auto, y un min-height en el padre NO lo vuelve "definite"
       para que un height:100% del hijo se resuelva contra él (cae a auto
       igual, por spec). Con min-height puesto directo en el <img> no hay
       ninguna referencia a un padre que resolver: el propio <img> se
       clampea a 280px y object-fit:cover recorta el contenido para
       cubrirlo, sin dejar hueco. El .deporte-detail-hero (auto) termina
       heredando esa misma altura porque el <img> es su único contenido
       en flujo. */
    min-height: 280px;
    /* La regla defensiva aspect-ratio:attr() se probó y confirmó inválida
       (ningún browser la soporta hoy — computed value queda en "auto",
       ignorada). Se saca: el intrinsic sizing del width/height reales del
       <img> en el HTML ya resuelve el ratio solo, sin necesitarla. */
    object-fit: cover;
    display: block;
  }

  /* ── 4A.11: un solo contenedor, no dos ──────────────────────────────
     Antes había .deportes-panel con padding y adentro .deportes-card con
     su propio fondo, borde y radio. Dos cajas anidadas, cada una con su
     margen, y la foto apretada en el medio.

     Ahora el panel es la única caja: padding 0, gap 0 y overflow hidden,
     así los tres bloques (tabs, foto, colores) se apilan pegados y a todo
     el ancho, y el radio del panel les recorta las esquinas.

     El vidrio no se toca: ni el filtro, ni el canto, ni el frost. Lo único
     que cambia son márgenes, radios y de quién es el padding. */
  .deportes-panel {
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  /* Arriba sigue el radio del panel para que el canto acompañe la curva;
     abajo recto, que es lo que lo pega a la foto. */
  .deportes-tabs {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* El respiro de arriba sale de acá y no de un padding en el panel: un
     padding dejaría ver una franja de panel encima de los tabs, con las
     esquinas redondeadas, y volvería el efecto de caja dentro de caja que
     justamente sacamos. Más alto de tab da el mismo aire sin sumar borde. */
  .deportes-tab {
    padding-block: var(--space-20);
  }

  /* La card deja de ser una caja visible. Era el segundo contenedor. */
  .deportes-card {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* El body deja de repartir padding y gap: los colores tienen que ir
     pegados a la foto y a todo el ancho. El aire lateral se lo queda
     únicamente el botón, más abajo. */
  .deporte-detail-body {
    padding: 0;
    gap: 0;
  }

  .deporte-colores {
    /* Pegado a la foto y al ancho completo. Quedan las hairlines de arriba
       y abajo, que hacen de costura entre bloques. */
    border-radius: 0;
    border-inline-width: 0;
    padding-inline: var(--space-16);
    /* Tamaño ideal. Como ahora pueden encoger, en pantallas angostas bajan
       solos hasta donde entren, y nunca por debajo de los 44px de área
       táctil: con 4 swatches el piso son ~54px a 320px de ancho. */
    --swatch-size: 5rem;
  }

  /* nowrap: el último no cae nunca a una segunda fila. */
  .deporte-colores-swatches {
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: var(--space-8);
  }

  /* ...pero si no entran, encogen en vez de desbordar. flex-basis da el
     tamaño ideal, flex-shrink 1 les deja ceder, y aspect-ratio los mantiene
     redondos al ceder (con width y height fijos se deformarían).
     La regla base tiene flex-shrink: 0, que es lo que los desbordaba. */
  .deporte-colores .color-swatch {
    flex: 0 1 var(--swatch-size);
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }

  /* El botón es el único que recupera aire lateral, y separado del bloque
     de colores. */
  .deporte-detail-body > .btn {
    margin: var(--space-20) var(--container-pad) var(--space-24);
  }
}

/* ── Desktop ── */
@media (min-width: 992px) {
  :root {
    --container-pad: 2.5rem;
    --header-h: 5rem;
  }

  /* Nav horizontal */
  .nav-toggle {
    display: none;
  }

  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    gap: var(--space-48);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding-block: 0;
  }

  .nav-link,
  .nav-cta {
    width: auto;
    padding: var(--space-8) var(--space-20);
  }

  .nav-cta {
    margin-top: 0;
    border-radius: var(--radius-sm);
    position: relative;
    isolation: isolate;
  }

  /* 4B: pulse compuesto en GPU. Un anillo pseudo se escala + fade,
     transform+opacity son compositables. Reemplaza el nav-pulse
     viejo con box-shadow (que Lighthouse flaggeaba como no compuesto). */
  .nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--color-accent);
    pointer-events: none;
    animation: nav-pulse-ring 1.5s ease-in-out 2s infinite;
    will-change: transform, opacity;
  }

  @keyframes nav-pulse-ring {
    0%   { transform: scale(1);    opacity: 0.55; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-cta::before { animation: none; }
  }

  /* Hero */
  .hero-content {
    max-width: 55rem;
    margin-inline: auto;
    padding-block: calc(var(--header-h) + var(--space-32)) 40svh;
  }

  .sport-panel:hover,
  .sport-panel:focus-within {
    flex-grow: 1.5;
  }

  .sport-panel:hover .sport-panel-overlay {
    background: linear-gradient(to top,
        rgba(10, 10, 10, 0.72) 0%,
        rgba(10, 10, 10, 0.18) 50%,
        rgba(10, 10, 10, 0.05) 100%);
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
  }

  /* Deportes: tabs a la izquierda como cards verticales */
  .deportes-panel {
    grid-template-columns: 260px 1fr;
    gap: var(--space-32);
    padding: var(--space-32);
  }

  .deportes-tabs {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    /* align-self:start evita que el align-items:stretch default del grid
       de .deportes-panel estire esta columna a la altura del detail activo
       (variable por deporte desde 4A.5/4A.6). height:44rem le da a la
       columna la misma referencia que tenía el hero fijo pre-4A.5, y
       grid-template-rows reparte los 5 tabs parejo en esa altura (display
       de este selector ya es grid, heredado de la regla base). */
    align-self: start;
    height: 44rem;
    grid-template-rows: repeat(5, 1fr);
  }

  /* El contenedor deja de ser una pieza de vidrio: el canto pasa a cada tab. */
  .deportes-tabs::before {
    display: none;
  }

  .deportes-tab {
    flex-direction: row;
    justify-content: space-evenly;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-20);
    /* 4B.2: cada tab es una pieza de cristal propia, con frost, especular
       concentrado y canto. El tinte es más denso que en 4B.1 porque el tab
       apoya sobre el panel (que ya es vidrio) y sobre la textura de pasto:
       con 0.35 los dos vidrios se sumaban en una sopa gris. */
    background:
      var(--glass-frost),
      var(--glass-sheen),
      linear-gradient(165deg, rgba(14, 19, 11, 0.46), rgba(14, 19, 11, 0.62));
    border-radius: var(--radius-md);
    box-shadow: var(--glass-bevel), var(--shadow-sm);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .deportes-tab { background: rgba(14, 19, 11, 0.92); }
  }

  .deportes-tab:not(:last-child)::after {
    display: none;
  }

  .deportes-tab-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .deportes-tab-label {
    font-size: var(--text-2xl);
    letter-spacing: 0.1em;
  }

  .deportes-tab:hover:not(.is-active) {
    background:
      var(--glass-frost),
      var(--glass-sheen),
      linear-gradient(165deg, rgba(22, 30, 18, 0.52), rgba(22, 30, 18, 0.66));
    transform: translateY(-2px);
    box-shadow: var(--glass-bevel), var(--shadow-md);
  }

  .deportes-tab.is-active {
    /* 4B.2: el activo es el mismo cristal teñido de acento. El filo verde
       de la izquierda (4A) ya no puede ser un border-left, porque el borde
       es el canto: lo hace un inset box-shadow de 4px, que da lo mismo en
       pantalla y no descuadra el padding. */
    background:
      var(--glass-frost),
      var(--glass-sheen),
      linear-gradient(165deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.12));
    box-shadow:
      inset 4px 0 0 var(--color-accent),
      var(--glass-bevel),
      0 8px 24px rgba(var(--accent-rgb), 0.22);
  }

  /* El canto del activo va en acento, no en blanco. */
  .deportes-tab.is-active::before {
    background: linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.95) 0%,
      rgba(var(--accent-rgb), 0.45) 30%,
      rgba(255, 255, 255, 0.35) 55%,
      rgba(var(--accent-rgb), 0.85) 100%);
  }

  .deporte-detail-hero {
    width: 100%;
    height: auto;
    max-height: 44rem;
    min-height: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .deporte-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* El overflow:hidden del card clip-ea a su propio radio: sin esto el
     top-left/bottom-left del hero se ven redondeados igual que el resto
     de la card, aunque el hero mismo pida esquinas rectas. */
  .deportes-card {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  :root { --swatch-size: 6rem; }

  .deporte-detail-hero-overlay {
    padding: var(--space-40);
  }

  .deporte-detail-body {
    padding: var(--space-32) var(--space-32) var(--space-32);
    gap: var(--space-24);
  }

  .deporte-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }

  /* Cuando el deporte no tiene selector de color, las specs van en 4 columnas */
  .deporte-specs--ancho {
    grid-template-columns: repeat(4, 1fr);
  }

  .parquizacion-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-64);
  }

  /* Desktop: aparecen las flechas. El swipe sigue funcionando en tablets
     con puntero tactil, no se desactiva nada. */
  .parq-nav {
    display: grid;
  }

  /* Insumos: intro a la izquierda, panel a la derecha. Con el panel a
     ancho completo quedaba media pantalla muerta al lado del texto. */
  .insumos-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-32);
    align-items: start;
  }

  .insumos-intro {
    position: sticky;
    top: calc(var(--header-h) + var(--space-32));
  }

  .insumos-panel {
    margin-top: 0;
  }

  /* La unidad entra al lado del nombre recien acá: abajo dejaba dos
     columnas flacas y partia los nombres en dos renglones. */
  .insumo-fila {
    grid-template-columns: auto 1fr auto auto;
    column-gap: var(--space-20);
    padding: var(--space-20) var(--space-24);
  }

  .insumo-unidad {
    grid-column: 3;
    justify-self: end;
    text-align: right;
  }

  .nosotros-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }

  .nosotros-img {
    height: 34rem;
  }

  .nosotros-float-card {
    right: -2rem;
  }

  .nosotros-text {
    padding-top: 0;
  }

  .testimonios-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contacto-inner {
    grid-template-columns: 1fr 1fr;
  }

  .masonry {
    column-count: 3;
  }

  .whatsapp-fab {
    right: 4rem;
  }
}

/* ── Wide ── */
@media (min-width: 1380px) {
  :root {
    --container-pad: 3rem;
  }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============================================================
   21. MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee-track.is-ready {
    animation: none;
  }
}