/* ==========================================================================
   PDC SPORTS · Sitio nuevo — hoja de estilos
   Fuente de verdad: Lineamientos/design-system.md (tokens, componentes)
                      Lineamientos/web-spec-v2.md   (variantes V1–V9)
   Regla de oro: papel cálido de fondo, navy para estructurar, rojo solo
   para lo que se toca. Esquinas rectas. Separación por filete, no sombra.
   ========================================================================== */

/* ==========================================================================
   0 · TIPOGRAFÍA LOCAL — sin dependencia de Google Fonts en runtime
   ========================================================================== */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/BigShouldersDisplay-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/BigShouldersDisplay-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-400i.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1 · TOKENS — design-system.md §2.1, bloque canónico
   ========================================================================== */
:root {
  /* Capa 1 · Primitivos de marca [Extraído] */
  --red:            #DB353A;
  --red-dark:       #B4262B;
  --red-darker:     #8E1E22;
  --red-tint:       #FBEAEA;
  --navy:           #002E5D;
  --navy-deep:      #001B38;
  --navy-tint:      #E9EEF4;
  --gray:           #4B4B4D;
  --gray-mid:       #77777A;
  --gray-light:     #A8A7A4;
  --ink:            #1B1A18;
  --paper:          #F6F3ED;
  --paper-raised:   #FFFFFF;
  --line:           #E1DCD1;
  --line-strong:    #CFC8B8;

  /* Capa 1b · Primitivos que faltaban [Sugerido] */
  --rose:           #F2A6A8;
  --navy-abyss:     #000B17;
  --ice:            #EDEEF0;
  --logo-gray:      #C6C9CC;

  /* Capa 2 · Semánticos de superficie y texto [Sugerido] */
  --surface:              var(--paper);
  --surface-raised:       var(--paper-raised);
  --surface-sunken:       var(--navy-tint);
  --surface-inverse:      var(--navy);
  --surface-inverse-deep: var(--navy-deep);

  --text:                  var(--ink);
  --text-muted:            var(--gray);
  --text-subtle:           var(--gray-mid);
  --text-heading:          var(--navy);
  --text-on-inverse:       #FFFFFF;
  --text-on-inverse-muted: var(--ice);
  --accent-on-inverse:     var(--rose);

  --border:          var(--line);
  --border-strong:   var(--line-strong);
  --border-inverse:  rgba(255,255,255,0.20);

  --action:        var(--red);
  --action-hover:  var(--red-dark);
  --focus-ring:    var(--red);

  /* Capa 2b · Feedback [Sugerido] */
  --error:           #A81F26;
  --error-surface:   #F7E9E9;
  --success:         #146B45;
  --success-surface: #E6F2EC;
  --warning:         #7A4E00;
  --warning-surface: #F6EEDC;

  /* Capa 3 · Tipografía [Extraído] */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Work Sans", "Segoe UI", sans-serif;
  --lh-display: 0.96;
  --lh-body:    1.6;
  --ls-display: 0.005em;
  --ls-h4:      0.04em;
  --ls-label:   0.05em;
  --ls-tier:    0.12em;
  --ls-eyebrow: 0.18em;

  /* Capa 4 · Espaciado base 4 [Sugerido] */
  --sp-0: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 112px;

  /* Capa 5 · Layout [Extraído] */
  --container-w: 1280px;
  --edge:        clamp(20px, 5vw, 48px);
  --section-pad: clamp(64px, 8vw, 112px);
  --grid-rule:   2px;

  /* Capa 6 · Forma y elevación [Extraído] */
  --radius-s: 3px;
  --radius-0: 0;
  --shadow-header: 0 8px 24px -18px rgba(0,0,0,0.4);
  --shadow-cta:    0 10px 20px -8px rgba(219,53,58,0.55);

  /* Capa 7 · Movimiento [Extraído] */
  --ease-out:   cubic-bezier(.16,.8,.28,1);
  --dur-fast:   0.18s;
  --dur-icon:   0.20s;
  --dur-nav:    0.22s;
  --dur-base:   0.25s;
  --dur-media:  0.50s;
  --dur-reveal: 0.70s;

  /* Capa 8 · Scrim [Extraído] */
  --scrim-hero: linear-gradient(180deg,
      rgba(0,17,35,0.55) 0%, rgba(0,17,35,0.15) 32%,
      rgba(0,17,35,0.35) 62%, rgba(0,17,35,0.92) 100%);
  --scrim-page: linear-gradient(180deg,
      rgba(0,17,35,0.60) 0%, rgba(0,17,35,0.20) 40%,
      rgba(0,17,35,0.95) 100%);
}

/* ==========================================================================
   2 · RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
svg { flex: none; }

/* Foco visible en todo interactivo — design-system §12.1 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-weight: 600;
}
.skip-link:focus {
  left: var(--edge);
  top: var(--edge);
}

.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;
}

/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--edge);
}
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }
.section--sunken { background: var(--surface-sunken); }
.section--inverse { background: var(--surface-inverse); color: var(--text-on-inverse-muted); }
.section-head { max-width: 62ch; }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-top: var(--sp-3); }

/* La firma estructural: filete de 2px — design-system §5.2 */
.grid-ruled {
  display: grid;
  gap: var(--grid-rule);
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.grid-ruled > * { background: var(--surface-raised); }

/* ==========================================================================
   4 · TIPOGRAFÍA UTILITARIA
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--red-dark);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px;
  background: var(--red); transform: rotate(45deg); flex: none;
}
.eyebrow--on-dark { color: var(--accent-on-inverse); }
.eyebrow--on-dark::before { background: var(--accent-on-inverse); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 62ch;
  color: var(--text-muted);
}
.h4-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.1rem; letter-spacing: var(--ls-h4); text-transform: uppercase;
  color: var(--text-heading);
}
.tier {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: var(--ls-tier); text-transform: uppercase;
}
.label {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.78rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-heading);
}
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.8rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-heading);
}
.text-link svg { width: 14px; height: 14px; transition: transform var(--dur-icon) var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   5 · BOTONES — design-system §11.1
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.01em;
  border-radius: var(--radius-0);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-hover); transform: translateY(-2px); box-shadow: var(--shadow-cta); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--gray-light); color: #fff; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); }
.btn-block { width: 100%; }

/* ==========================================================================
   6 · HEADER / NAVEGACIÓN — design-system §11.2
   NUNCA backdrop-filter: crea containing block y rompe el panel fixed del móvil.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,243,237,0.98);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-header);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  height: 84px;
  transition: height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .nav-row { height: 68px; }
.brand img { height: 42px; width: auto; transition: height var(--dur-base) var(--ease-out); }
.site-header.is-scrolled .brand img { height: 34px; }

.main-nav { display: flex; align-items: center; gap: var(--sp-6); }
.main-nav a {
  position: relative;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  color: var(--text);
  padding-block: 4px;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--action);
  transition: right var(--dur-base) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--text-heading); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-5); }
.nav-phone { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.nav-phone svg { width: 16px; height: 16px; color: var(--action); }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  position: relative;
}
.nav-toggle .icon-close { display: none; }
.main-nav.is-open ~ .nav-actions .nav-toggle .icon-menu,
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-phone { display: none; }
  .main-nav {
    position: fixed; inset: var(--header-h, 68px) 0 0 0;
    top: 68px;
    flex-direction: column; align-items: flex-start;
    gap: var(--sp-2);
    background: var(--surface);
    padding: var(--sp-6) var(--edge);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-nav) var(--ease-out), transform var(--dur-nav) var(--ease-out);
    overflow-y: auto;
  }
  .main-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav a { font-size: 1.2rem; padding-block: 10px; width: 100%; border-bottom: 1px solid var(--border); }
}

/* ==========================================================================
   7 · HERO — design-system §11.3
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  padding-top: 160px;
  padding-bottom: var(--sp-9);
  overflow: hidden;
  background: var(--navy);
}
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex; align-items: flex-end;
  padding-top: 150px;
  padding-bottom: var(--sp-8);
  overflow: hidden;
  background: var(--navy);
}
.hero-media, .page-hero-media {
  position: absolute; inset: 0;
}
.hero-media img, .page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
.page-hero .hero-scrim, .page-hero-media + .hero-scrim { background: var(--scrim-page); }
.hero-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-abyss) 100%);
}
/* A escala de hero, la retícula tile (§8.3) reemplaza a la pila de rombos:
   la pila es un motivo de tarjeta y, a pantalla completa, chocaba con el titular.

   MOVIMIENTO AMBIENTAL (nuevo en Sitio 2) — la trama deriva en diagonal sobre el
   eje de 45° del propio rombo, el único elemento del sistema que gira 45°.
   El recorrido es exactamente un tile (120×120), así que el bucle es invisible.
   Se compone en GPU (translate3d) y la capa se sobredimensiona para no descubrir
   bordes. Duración en el rango de los motion AMBIENTALES ya documentados
   (Ken Burns 22s, marquee 34s), no en el de los de interfaz.
   Requiere documentarse como variante en design-system §13 antes de producir. */
@keyframes diamond-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(120px, 120px, 0); }
}
.hero-fallback .diamond-stack {
  position: absolute; inset: -140px; display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.14'%3E%3Cpath d='M60 0 120 60 60 120 0 60Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  animation: diamond-drift 28s linear infinite;
  will-change: transform;
}
.hero-fallback .diamond-stack span { display: none; }

/* Panel de imágenes del hero — crossfade ambiental.
   Va DESPUÉS de .hero-fallback y ANTES de .hero-scrim en el marcado: así el
   scrim azul queda encima (regla de marca §8.2, "todo hero lleva scrim") y de
   paso baja el contraste de la foto contra el navy. Sin z-index a propósito:
   el orden de pintado lo resuelve el orden del DOM. */
.hero-gallery {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--gallery-w, 46%);
  overflow: hidden;
  /* El desvanecido izquierda→derecha: la foto se disuelve en el navy en vez
     de cortarse contra él. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 52%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 52%);
}
.hero-gallery img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero-gallery img.is-active { opacity: 1; }

/* Variante partida: el contenido se reserva su columna con padding-right, en el
   mismo porcentaje que ocupa la galería. Por debajo de 1280px ambos porcentajes
   resuelven contra la misma caja y coinciden; por encima el contenedor es más
   estrecho que el viewport, así que el texto termina ANTES de la galería —
   el hueco crece un poco, nunca se solapan. */
.hero--split .hero-inner,
.page-hero--split .page-hero-inner {
  padding-right: calc(var(--gallery-w, 46%) + var(--sp-6));
}
/* Con la foto al costado el texto ya no va encima de ella: el hero interior
   centra su contenido en vez de anclarlo abajo, que dejaba muerto el tercio
   superior — justamente el vacío que motivó este cambio. */
.page-hero--split {
  align-items: center;
  padding-top: 120px;
}
/* El scrim de página termina en 0.95 de opacidad porque está calibrado para
   sostener texto blanco ENCIMA de la foto. En la variante partida el texto va
   al lado, así que ese peso solo aplasta la imagen: se aligera el cierre.
   Solo de 861px hacia arriba: por debajo la galería pasa a fondo completo y el
   texto vuelve a caer sobre la foto, donde el scrim denso sí hace falta. */
@media (min-width: 861px) {
  .page-hero--split .hero-scrim {
    background: linear-gradient(180deg,
        rgba(0,17,35,0.55) 0%, rgba(0,17,35,0.18) 45%, rgba(0,17,35,0.70) 100%);
  }
}
/* En la columna estrecha los titulares bajan de escala y dejan que el ancho de
   columna gobierne el salto de línea (el tope en `ch` los partía de más). */
.hero--split .hero-title {
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  max-width: none;
}
.page-hero--split .page-hero-inner h1 {
  font-size: clamp(2.2rem, 4.4vw, 4.1rem);
  max-width: none;
}

.hero-inner, .page-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container-w); margin-inline: auto;
  padding-inline: var(--edge);
  color: #fff;
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: rgba(255,255,255,.7);
  margin-bottom: var(--sp-5);
}
.breadcrumb svg { width: 12px; height: 12px; }
.breadcrumb a:hover { color: #fff; }

.hero-title {
  color: #fff;
  font-size: clamp(2.9rem, 7.6vw, 6.4rem);
  max-width: 15ch;
  overflow: hidden;
}
.hero-title .word { display: inline-block; will-change: transform; }
.page-hero-inner h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  max-width: 18ch;
}
.hero-lede, .page-hero-inner .lede {
  color: rgba(255,255,255,.88);
  max-width: 56ch;
  margin-top: var(--sp-5);
}
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* V9 · Selector de ruta */
.route-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-rule);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  margin-top: var(--sp-7);
  max-width: 760px;
}
.route-card {
  background: rgba(0,17,35,.45);
  padding: var(--sp-5);
  transition: background var(--dur-base) var(--ease-out);
}
.route-card:hover { background: rgba(0,17,35,.2); }
.route-card .eyebrow { margin-bottom: var(--sp-3); }
.route-card h3 { color: #fff; font-size: 1.35rem; }
.route-card p { color: rgba(255,255,255,.8); font-size: 0.94rem; margin-top: 8px; margin-bottom: var(--sp-4); }
.route-card .text-link { color: #fff; }
@media (max-width: 620px) {
  .route-select { grid-template-columns: 1fr; }
}
/* El home carga además el selector de ruta (V9), que necesita ancho: su galería
   se queda en el 40% para no estrangular la columna de texto. */
.hero--split { --gallery-w: 40%; }

/* Las dos tarjetas de ruta viven ahora en una columna más estrecha, así que se
   compactan: con el padding y el cuerpo de origen crecían a lo alto y empujaban
   el contenido fuera del hero. */
.hero--split .route-card { padding: var(--sp-4); }
.hero--split .route-card h3 { font-size: 1.15rem; }
.hero--split .route-card p { margin-bottom: var(--sp-3); }
/* Con la galería al costado se quedan sin ancho antes que en el hero a sangre:
   colapsan a una columna mucho más arriba. */
@media (max-width: 1080px) {
  .hero--split .route-select { grid-template-columns: 1fr; }
}

/* Alineación por jerarquía entre las dos tarjetas de ruta.
   Sin esto, en cuanto un eyebrow o un título se parte en dos líneas todo lo que
   va debajo en esa tarjeta baja y deja de casar con la de al lado. Las cuatro
   filas —eyebrow · título · descripción · enlace— se declaran en el contenedor
   y cada tarjeta las adopta con `subgrid`, así que cada nivel arranca a la misma
   altura en ambas por largo que sea el texto. La descripción toma 1fr para que
   el enlace quede al pie, como en el resto del sistema.
   Solo aplica mientras hay dos columnas: apiladas no hay nada que alinear. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 621px) {
    .route-select {
      grid-template-rows: auto auto 1fr auto;
      row-gap: 0;
    }
    .route-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
  }
  /* En el hero partido el colapso llega antes: entre 621 y 1080 ya está apilado. */
  @media (min-width: 621px) and (max-width: 1080px) {
    .hero--split .route-select {
      grid-template-rows: none;
      row-gap: var(--grid-rule);
    }
    .hero--split .route-card {
      display: block;
      grid-row: auto;
    }
  }
}

/* Móvil: en vez de perder la fotografía, la galería pasa a fondo completo bajo
   el scrim. El hero móvil también gana foto. */
@media (max-width: 860px) {
  .hero--split .hero-inner,
  .page-hero--split .page-hero-inner {
    padding-right: var(--edge);
  }
  .hero-gallery {
    inset: 0;
    width: 100%;
    opacity: .45;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.hero-scrollcue {
  position: absolute; right: var(--edge); bottom: var(--sp-6);
  writing-mode: vertical-rl;
  color: rgba(255,255,255,.7);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 2;
}
@media (max-width: 700px) { .hero-scrollcue { display: none; } }

/* ==========================================================================
   8 · V4 · BARRA DE CIFRAS
   ========================================================================== */
.stat-bar { background: var(--surface-inverse); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-rule);
  background: rgba(255,255,255,.14);
}
.stat-item {
  background: var(--surface-inverse);
  padding: var(--sp-7) var(--sp-5);
  text-align: left;
}
.stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  line-height: 0.96;
  color: #fff;
}
.stat-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-on-inverse);
  margin-top: var(--sp-2);
}
@media (max-width: 780px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   9 · SERVICIOS — 11.4 (4:3) + V3 (1:1)
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-rule);
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.service-card { background: var(--surface-raised); display: flex; flex-direction: column; }
.service-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.service-media--square { aspect-ratio: 1 / 1; }
.service-media img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; transition: transform var(--dur-media) var(--ease-out); }
.service-card:hover .service-media img { transform: scale(1.04); }
.service-icon {
  position: absolute; left: 18px; top: -23px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--action); color: #fff;
}
.service-icon svg { width: 22px; height: 22px; }
.service-body { padding: 40px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.service-body h3 { font-size: 1.3rem; }
.service-body p { font-size: 0.94rem; color: var(--text-muted); margin-top: var(--sp-3); flex: 1; }
.service-body .text-link { margin-top: var(--sp-4); }
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services-grid { grid-template-columns: 1fr; } }
/* Variante de 4 tarjetas (p. ej. /viajar): 2 columnas siempre, para no dejar
   una celda vacía huérfana en la última fila de una rejilla de 3. */
.services-grid--2up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .services-grid--2up { grid-template-columns: 1fr; } }

/* ==========================================================================
   10 · V1 · SECCIÓN A SANGRE ALTERNADA
   ========================================================================== */
.bleed-row {
  display: grid;
  grid-template-columns: 50vw 1fr;
  min-height: 480px;
}
.bleed-row.is-reversed { grid-template-columns: 1fr 50vw; }
.bleed-row.is-reversed .bleed-media { order: 2; }
.bleed-media { position: relative; overflow: hidden; }
.bleed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed-body {
  display: flex; align-items: center;
  padding: var(--sp-8) var(--edge);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.bleed-body > div { max-width: 620px; margin-inline: auto; width: 100%; }
.bleed-body h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 10px; }
.bleed-body p { margin-top: var(--sp-4); color: var(--text-muted); max-width: 56ch; }
@media (max-width: 860px) {
  .bleed-row, .bleed-row.is-reversed { grid-template-columns: 1fr; min-height: 0; }
  .bleed-media { aspect-ratio: 4/3; order: 0 !important; }
}

/* ==========================================================================
   11 · BANDA PROMOCIONAL
   ========================================================================== */
.promo-band {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center;
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 58%, var(--red-darker) 145%);
  overflow: hidden;
}
.promo-band::before {
  content: "";
  position: absolute; inset: -140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16'%3E%3Cpath d='M60 0 120 60 60 120 0 60Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  /* Misma deriva que el hero: el sistema se lee como uno solo. */
  animation: diamond-drift 28s linear infinite;
  will-change: transform;
}
.promo-inner { position: relative; z-index: 1; max-width: 620px; padding-block: var(--sp-8); }
.promo-inner h2 { color: #fff; margin-top: var(--sp-3); }
.promo-inner p { color: rgba(255,255,255,.85); margin-top: var(--sp-4); }
.promo-inner .btn { margin-top: var(--sp-6); }

/* ==========================================================================
   12 · V5 · LÍNEA DE TIEMPO DE EVENTOS
   ========================================================================== */
.timeline { position: relative; padding-block: var(--sp-6); }
.timeline-track {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-6);
}
.timeline-point { position: relative; text-align: center; flex: 1; }
/* Racimo de rombos centrado sobre el filete. Antes eran dos rombos posicionados
   en absoluto y el tercero se superponia al segundo; 2025 tiene seis eventos. */
.timeline-tip-trigger {
  background: none; border: none; padding: 0; cursor: default;
  position: absolute; left: 50%; top: calc(-1 * var(--sp-6) - 1px);
  transform: translate(-50%, -50%);
  display: flex; gap: 5px; align-items: center;
}
.timeline-point .diamond {
  width: 9px; height: 9px; background: var(--action);
  transform: rotate(45deg); flex: none;
}
.timeline-year { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--text-heading); }
.timeline-point .timeline-tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff;
  padding: 10px 14px; font-size: 0.78rem; white-space: normal;
  max-width: 220px; width: max-content;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.timeline-point:hover .timeline-tip, .timeline-point:focus-within .timeline-tip { opacity: 1; }
/* Los extremos de la línea anclan el tooltip hacia adentro para no desbordar el viewport */
.timeline-point:first-child .timeline-tip { left: 0; transform: translateX(0); }
.timeline-point:last-child .timeline-tip { left: auto; right: 0; transform: translateX(0); }
.timeline-list { display: none; }
@media (max-width: 1000px) {
  .timeline-track { display: none; }
  .timeline-list { display: block; }
  .timeline-list li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--sp-3); align-items: baseline; }
  .timeline-list .diamond { width: 8px; height: 8px; background: var(--action); transform: rotate(45deg); flex: none; }
}

/* ==========================================================================
   13 · V6 · TARJETA DE CASO
   ========================================================================== */
.case-card { background: var(--surface-raised); border: 1px solid var(--line-strong); }
.case-media { position: relative; aspect-ratio: 21/9; overflow: hidden; }
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-tag {
  position: absolute; left: 0; top: 0;
  background: rgba(0,17,35,.72); color: #fff;
  padding: 10px 16px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.case-body { padding: var(--sp-7); }
.case-body h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.case-body p { margin-top: var(--sp-4); color: var(--text-muted); max-width: 68ch; }
.case-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--grid-rule);
  background: var(--line-strong);
  margin-top: var(--sp-6);
}
.case-gallery figure { margin: 0; position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--surface-raised); }
.case-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 780px) { .case-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   14 · V8 · FICHA DE PERSONA
   ========================================================================== */
.people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.person-card { text-align: left; }
.person-photo { aspect-ratio: 1/1; background: var(--navy-tint); overflow: hidden; position: relative; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo .diamond-stack { position: absolute; inset: 0; }
.person-card h4 { font-size: 1.1rem; margin-top: var(--sp-4); }
.person-card .label { margin-top: 4px; color: var(--text-muted); }
@media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   15 · V2 · FICHA EXPANDIBLE (details/summary nativo)
   ========================================================================== */
.expandable-list { border-top: 2px solid var(--line-strong); }
.expandable-item { border-bottom: 2px solid var(--line-strong); }
.expandable-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--text-heading);
}
.expandable-item summary::-webkit-details-marker { display: none; }
.expandable-item summary .chevron { width: 18px; height: 18px; flex: none; color: var(--action); transition: transform var(--dur-base) var(--ease-out); stroke-width: 1.8; }
.expandable-item[open] summary .chevron { transform: rotate(180deg); }
.expandable-body { padding-bottom: var(--sp-6); max-width: 70ch; color: var(--text-muted); }
.expandable-body ul { margin-top: var(--sp-3); }
.expandable-body li { padding: 6px 0; padding-left: 18px; position: relative; }
.expandable-body li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--action); transform: rotate(45deg); }

/* ==========================================================================
   15b · FICHAS DE EVENTO — /eventos, texto indexable (spec §3)
   ========================================================================== */
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-rule); background: var(--line-strong); border: 1px solid var(--line-strong); }
.event-card { background: var(--surface-raised); padding: var(--sp-6); }
.event-card .tier { color: var(--red-dark); }
.event-card h3 { font-size: 1.35rem; margin-top: var(--sp-3); }
.event-card .event-meta { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-3); color: var(--text-muted); font-size: 0.92rem; }
.event-card .event-meta svg { width: 16px; height: 16px; color: var(--action); }
/* Con un numero impar de fichas la celda sobrante dejaba ver el fondo --line-strong
   como un bloque vacio. La ultima ficha pasa a modulo unico a ancho completo, que es
   lo que la reticula de filete ya admite (web-spec §4.8). */
.event-grid .event-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 700px) { .event-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   16 · BANDA DE VALOR
   ========================================================================== */
.value-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-rule); background: var(--line-strong); border: 1px solid var(--line-strong); }
.value-item { background: var(--surface-raised); padding: var(--sp-6); }
.value-item svg { width: 30px; height: 30px; color: var(--action); }
.value-item .h4-label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.05rem; margin-top: var(--sp-3); }
.value-item p { font-size: 0.92rem; color: var(--text-muted); margin-top: 6px; }
@media (max-width: 780px) { .value-band { grid-template-columns: 1fr; } }

/* ==========================================================================
   17 · CONTACTO — design-system §11.6
   ========================================================================== */
.contact-section { background: var(--surface-sunken); }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px,6vw,72px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.field { margin-top: var(--sp-5); }
/* Etiqueta de campo — especificación literal de design-system §11.6.
   El :not() deja fuera la casilla de consentimiento, que es una frase con
   enlace y no un nombre de campo: en caja alta y 700 sería ilegible. */
.field label:not(.consent) {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-heading);
}
/* Marcador de campo opcional (design-system §11.6).
   Se marca la minoría: 5 de los 8 campos son obligatorios, así que señalar los
   3 opcionales añade menos ruido que poner asterisco en cinco. Va dentro del
   <label>, de modo que el lector de pantalla lo anuncia junto al nombre del
   campo, y en texto explícito en vez de un símbolo que exigiría leyenda.
   Tamaño fijo en 0.72rem —el escalón más pequeño del sistema, el del eyebrow—
   y no relativo: con la etiqueta ya fijada por el manual en 0.78rem, un 0.86em
   habría caído a 10.7px, por debajo de todo lo que la escala contempla. */
.field label .opcional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 6px;
}
/* El :not() excluye la casilla de consentimiento, que vive dentro de un .field
   pero no es un campo de texto: con `width: 100%` se estiraba a todo el ancho
   de la columna y separaba la marca de su etiqueta. */
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; margin-top: 8px;
  padding: 13px 14px;
  font-family: var(--font-body); font-size: 0.98rem; color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--action);
  outline: 2px solid var(--focus-ring); outline-offset: 3px;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
  border: 2px solid var(--error);
}
.field.is-valid input, .field.is-valid select, .field.is-valid textarea {
  border-color: var(--success);
}
.field-error {
  display: none; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 0.78rem; color: var(--error);
}
.field-error svg { width: 16px; height: 16px; flex: none; }
.field.is-invalid .field-error { display: flex; }
.field:disabled, .field[aria-disabled="true"] { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }

.field-consent { margin-top: var(--sp-6); }
.field-consent .consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.86rem; color: var(--text-muted);
}
.consent input { margin-top: 3px; }
.consent a { color: var(--text-heading); text-decoration: underline; }

.form-submit { margin-top: var(--sp-6); }

.form-status {
  display: none; align-items: flex-start; gap: 12px;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--success-surface);
  border-left: 3px solid var(--success);
  color: var(--text);
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; color: var(--success); flex: none; margin-top: 2px; }
.form-status.is-error { background: var(--error-surface); border-left-color: var(--error); }
.form-status.is-error svg { color: var(--error); }

.contact-info { display: flex; flex-direction: column; gap: var(--sp-6); }
.info-block { display: flex; gap: var(--sp-4); align-items: flex-start; }
.info-icon { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--text-heading); }
.info-icon svg { width: 20px; height: 20px; }
.info-block .h4-label { margin-bottom: 4px; }
.linklike { text-decoration: none; }
.linklike:hover { text-decoration: underline; }
.social-row { display: flex; gap: 10px; }
.social-btn {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); color: var(--text-heading);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover { background: var(--action); color: #fff; border-color: var(--action); }

/* ==========================================================================
   18 · FOOTER — design-system §11.7 / §5.3
   Regla A1: selectores de clase, nunca de elemento, cuando hay desajuste semántico.
   ========================================================================== */
.site-footer { background: var(--surface-inverse-deep); color: #fff; padding-block: var(--sp-8) var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand img { height: 34px; }
.footer-brand p { margin-top: var(--sp-4); color: var(--text-on-inverse-muted); max-width: 34ch; font-size: 0.92rem; }
/* Identificación legal del responsable del tratamiento — Ley 29733, web-spec §5.7.
   Separación por filete de 2 px, nunca por sombra. Especificidad .footer-brand .footer-legal
   para ganar a .footer-brand p, que es más específico que una clase suelta. */
.footer-brand .footer-legal { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 2px solid var(--border-inverse); color: var(--text-on-inverse-muted); max-width: 42ch; font-size: 0.82rem; line-height: 1.55; }
.footer-col .h4 { color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; letter-spacing: var(--ls-h4); text-transform: uppercase; }
.footer-col ul { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-on-inverse-muted); font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-inverse);
  font-size: 0.85rem; color: var(--text-on-inverse-muted);
}
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-inverse); color: #fff; }
.footer-social a:hover { background: var(--action); border-color: var(--action); }
.footer-social svg { width: 16px; height: 16px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ==========================================================================
   19 · MOTIVO GRÁFICO: EL ROMBO — design-system §9
   ========================================================================== */
.diamond { display: inline-block; }
.diamond-stack {
  display: grid; grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px;
  gap: 6px; justify-content: center; align-content: center;
}
.diamond-stack span { display: block; transform: rotate(45deg); }
.diamond-stack span:nth-child(odd) { background: rgba(219,53,58,.85); }
.diamond-stack span:nth-child(even) { background: rgba(255,255,255,.12); }

/* Placeholder de vacío — sin fotografía disponible */
.media-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-abyss) 100%);
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   20 · PÁGINA ESTÁTICA (privacidad, términos)
   ========================================================================== */
.legal-copy { max-width: 74ch; }
.legal-copy h2 { font-size: 1.6rem; margin-top: var(--sp-8); }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p, .legal-copy li { color: var(--text-muted); margin-top: var(--sp-3); }
.legal-copy ul { margin-top: var(--sp-3); }
.legal-copy li { padding-left: 18px; position: relative; }
.legal-copy li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--action); transform: rotate(45deg); }

/* ==========================================================================
   21 · REVELADO Y MOVIMIENTO
   ========================================================================== */
/* Visible por defecto: si GSAP no carga, [data-reveal] nunca queda oculto.
   gsap.from() aplica opacity:0 inline solo cuando sí va a animar. */
[data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* La regla global ya congelaría la deriva, pero se anula explícitamente:
     no debe quedar ni un frame de movimiento ambiental. */
  .hero-fallback .diamond-stack,
  .promo-band::before {
    animation: none !important;
    transform: none !important;
  }
  /* Sin crossfade: el JS deja fija la primera imagen y no arranca el ciclo. */
  .hero-gallery img { transition: none !important; }
}