/* ==========================================================================
   AZETA — 80 años · azeta.com.py
   Sistema de diseño basado en el KV de campaña:
   negro profundo, crema #f4eee9, esferas degradadas, TT Hoves Pro.
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: 'TT Hoves';
  src: url('../assets/fonts/tt-hoves-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Hoves';
  src: url('../assets/fonts/tt-hoves-demibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Fallback métrico: evita saltos de layout mientras carga TT Hoves */
@font-face {
  font-family: 'TT Hoves Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 98%;
  ascent-override: 92%;
  descent-override: 24%;
}

/* ---------- Tokens ---------- */
:root {
  --black: #050505;
  --ink: #0d0c0b;
  --cream: #f4eee9;
  --cream-bg: #efeae4;
  --gray: #98918b;        /* texto secundario */
  --gray-deep: #8a847e;   /* texto terciario y labels apagados (AA sobre negro) */

  /* Dorado de marca (PANTONE 2470 C): acento sutil, siempre en menor
     proporción que el plateado — nunca como color dominante */
  --gold: #9e8663;
  --gold-hi: #d6c59f;
  --gold-lo: #5c4b35;
  /* Dorado tipográfico: el color del énfasis en piezas display (claim,
     strong de títulos, cifras). Siempre el dorado de marca, en todos los
     fondos — solo en tamaños display, en texto corrido manda el gris */
  --gold-text: var(--gold);

  /* Superficies sobre fondo oscuro: crema con alfa */
  --surface: rgba(244, 238, 233, 0.04);
  --surface-hover: rgba(244, 238, 233, 0.08);
  --line: rgba(244, 238, 233, 0.14);

  /* Sobre fondo claro: ink con alfa */
  --line-dark: rgba(13, 12, 11, 0.14);
  --ink-soft: rgba(13, 12, 11, 0.3);
  --ink-mid: rgba(13, 12, 11, 0.55);

  /* Velos negros sobre fotografía (6 pasos) */
  --veil-0: rgba(5, 5, 5, 0.15);
  --veil-1: rgba(5, 5, 5, 0.3);
  --veil-2: rgba(5, 5, 5, 0.45);
  --veil-3: rgba(5, 5, 5, 0.62);
  --veil-4: rgba(5, 5, 5, 0.8);
  --veil-5: rgba(5, 5, 5, 0.94);

  /* Esfera del sistema (punto del eyebrow): la esfera dorada del logo */
  --sphere-hi: var(--gold-hi);
  --sphere-lo: var(--gold-lo);

  /* Hover de los orbs: cuánto se enciende la esfera (capa blanca en screen)
     y qué tan oscura queda la tinta del logo que se multiplica encima */
  --orb-solid: var(--cream);
  --orb-ink: 0.12;

  --font: 'TT Hoves', 'TT Hoves Fallback', 'Helvetica Neue', Arial, sans-serif;

  --size-display: clamp(3.4rem, 9.5vw, 8.5rem);
  --size-h2: clamp(2.2rem, 5.4vw, 4.6rem);
  --size-h3: clamp(1.4rem, 2.6vw, 2.2rem);
  --size-body: clamp(1rem, 1.15vw, 1.15rem);
  --size-eyebrow: 0.8rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-h: 76px;
  /* Columna de contenido: en pantallas anchas el texto no se estira, se
     centra en una sola medida compartida por todas las secciones */
  --content: 1280px;

  /* Radios unificados: lg para cards/marcos, md para celdas, inputs e imágenes */
  --radius-lg: 20px;
  --radius-md: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--cream);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.8s ease, color 0.8s ease;
}

/* Tema claro (se activa al entrar a la línea de tiempo, y de la cita
   de los 80 años en adelante queda fijo hasta el footer) */
body.theme-light {
  background: var(--cream-bg);
  color: var(--ink);
  --gray-deep: #5f5a56; /* AA sobre crema */
}
/* Los contenedores negros dentro de páginas claras vuelven al gris de fondo oscuro */
.dark-shell { --gray-deep: #8a847e; }

/* ---- Zona clara: celdas de empresas y footer ---- */
body.theme-light .company-cell { background: rgba(13, 12, 11, 0.05); }
@media (hover: hover) {
  body.theme-light .company-cell:hover { background: rgba(13, 12, 11, 0.09); }
}
/* los logos del grupo son blancos: en claro se invierten igual que la marca */
body.theme-light .company-cell img { filter: invert(0.92) hue-rotate(180deg); }
body.theme-light .footer-bottom { border-color: var(--line-dark); }
@media (hover: hover) {
  body.theme-light .footer-col a:hover { color: var(--ink); }
}

/* ---- Contenedor negro con gradiente (estilo fabrica) ---- */
.dark-shell {
  position: relative;
  color: var(--cream);
  /* luz que baja desde el centro-arriba y viñeta en la base, estilo fabrica */
  background:
    radial-gradient(58% 38% at 50% 0%, rgba(244, 238, 233, 0.022), transparent 55%),
    radial-gradient(130% 80% at 50% 115%, var(--veil-4), transparent 55%),
    linear-gradient(180deg, #0e0d0d, #090909 52%, #050505);
  border-radius: var(--radius-lg);
  --shell-inset: clamp(0.6rem, 1.4vw, 1.4rem);
  margin: clamp(2.5rem, 7vh, 4.5rem) var(--shell-inset);
  padding: clamp(3.5rem, 8vh, 6rem) calc(var(--gutter) - var(--shell-inset));
  isolation: isolate;
  overflow: hidden;
}
/* grano de película bien presente, como el contenedor de fabrica */
.dark-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: 0.28;
  pointer-events: none;
}

img, svg, video { display: block; max-width: 100%; }
/* Con width/height declarados en el HTML (anti-CLS), la altura renderizada
   debe seguir al ancho CSS; sin esto el atributo height fija la altura */
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Selección en dorado: el acento aparece solo cuando el lector interactúa */
::selection { background: var(--gold); color: var(--black); }
body.theme-light ::selection { background: var(--gold); color: var(--black); }

/* Toque: sin el retardo de doble tap ni el destello gris del sistema; los
   estados hover/active propios ya dan la respuesta visual. */
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Barras de scroll y controles nativos acordes al fondo de cada página */
:root { color-scheme: dark; }
body.theme-light { color-scheme: light; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
body.theme-light :focus-visible { outline-color: var(--ink); }
.cta-field input:focus-visible,
.cta-field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Salto al contenido: invisible hasta recibir foco por teclado */
.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 500;
  background: var(--cream);
  color: var(--black);
  padding: 0.65rem 1.1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-250%);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: none; outline-offset: 2px; }

/* ---------- Cursor custom (js/cursor.js) ----------
   El cursor nativo queda visible; el dot lo persigue con inercia. */
.az-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.az-cursor.is-on { opacity: 1; }
.az-cursor-dot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream);
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s var(--ease-out),
    height 0.3s var(--ease-out),
    background-color 0.3s ease,
    transform 0.2s ease;
}
.az-cursor.is-down .az-cursor-dot { transform: translate(-50%, -50%) scale(0.82); }
.az-cursor.is-link .az-cursor-dot {
  width: 44px;
  height: 44px;
  background: var(--cream);
  opacity: 0.9;
}
.az-cursor.is-orb .az-cursor-dot {
  width: 68px;
  height: 68px;
  background: var(--cream);
  mix-blend-mode: normal;
}
/* Sobre fondo claro el dot va en tinta sólida. Va después de is-link para
   ganarle por orden (misma especificidad) y excluye is-orb, que trae su
   propio disco crema con la etiqueta "Ver". */
.az-cursor.is-on-light:not(.is-orb) .az-cursor-dot {
  background: var(--ink);
  mix-blend-mode: normal;
}
.az-cursor-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.az-cursor.is-orb .az-cursor-label { opacity: 1; }

/* Solo para lectores de pantalla */
.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;
}

/* ---------- Utilidades tipográficas ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--size-eyebrow);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray);
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.section-title {
  font-size: var(--size-h2);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Acento tipográfico: los títulos van en Regular, el énfasis en DemiBold */
strong, .em { font-weight: 600; }

/* Énfasis dorado (rebrand 80 años). Va acotado a dos lugares, no a todo
   título con <strong>: el claim del hero y la línea de tiempo. En el resto de
   los titulares el dorado intercalado competía con la lectura en vez de
   rematarla, así que quedan en un solo color. El dorado también se mantiene en
   los textos corridos que llevan voz secundaria (el manifiesto de la home y el
   "Quiénes somos" de nosotros), que es donde marca el cambio de registro. */
.tl-intro .section-title strong { color: var(--gold-text); }
/* El punto final de los títulos hereda el color del título: en otro color
   leía como un error de tipeo más que como un remate. */
.section-title .dim { color: inherit; }

/* Reveal por líneas (split manual) */
.split-lines .line-wrap { display: block; overflow: hidden; }
.split-lines .line { display: block; will-change: transform; }

/* ==========================================================================
   Transición de página (cortina)
   ========================================================================== */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(100% 0 0 0);
}
.page-transition img { height: 22px; opacity: 0.85; }
/* Esfera clonada que se expande al navegar desde la constelación */
.orb-transition {
  position: fixed;
  z-index: 160;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  will-change: transform;
}
/* con JS activo, la página nueva arranca cubierta y la cortina se levanta */
html.js .page-transition { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
}
.preloader-inner { text-align: center; }
/* El logo se "llena" de izquierda a derecha a medida que carga */
.preloader-logo { position: relative; width: min(48vw, 270px); }
.preloader-logo img { width: 100%; height: auto; }
.preloader-logo-base { opacity: 0.16; }
.preloader-logo-fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

/* El header es fixed y transparente: al scrollear, el contenido pasaba por
   debajo y los títulos de sección chocaban con el logo y con "80 años". Un
   fondo que aparece recién cuando hay algo detrás resuelve el choque sin
   ensuciar el hero, que es donde la transparencia hace falta.
   z-index:-1 lo manda al fondo del contexto de apilado que crea el propio
   header: si no, al ser absoluto taparía a los hijos estáticos. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--black);
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.theme-light .site-header::before { background: var(--cream-bg); }
.site-header.is-scrolled::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-header::before { transition: none; }
}

.header-brand img { height: 14px; width: auto; }
.header-80 img { height: 10px; width: auto; }

/* En la home, los slots arrancan invisibles: el logo del hero "aterriza" ahí */
.home .header-brand, .home .header-80 { opacity: 0; }

/* Los SVG de marca son crema; en tema claro se invierten */
.brand-svg { transition: filter 0.8s ease; }
body.theme-light .brand-svg { filter: invert(0.92) hue-rotate(180deg); }

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.6rem 0;
}
.menu-toggle .burger {
  position: relative;
  width: 34px; height: 10px;
}
/* Solo el icono: el label queda para lectores de pantalla */
.menu-toggle .menu-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.company-visit {
  padding-top: 0;
  text-align: center;
}

/* ---------- Barra de secciones ----------
   El menú vivía sólo detrás de la hamburguesa y costaba encontrarlo. En
   pantallas anchas las secciones quedan a la vista; abajo de 1100px sigue la
   hamburguesa, que ahí sí es el patrón esperado y además no habría lugar. */
.header-nav { display: none; }
@media (min-width: 1100px) {
  .header-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 1.9vw, 2rem);
  }
  .header-nav a {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    white-space: nowrap;
    transition: color 0.3s var(--ease-out);
  }
  .header-nav a:hover,
  .header-nav a[aria-current="page"] { color: var(--cream); }
  body.theme-light .header-nav a:hover,
  body.theme-light .header-nav a[aria-current="page"] { color: var(--ink); }
  /* Con las secciones a la vista, la hamburguesa duplicaría la navegación */
  .menu-toggle { display: none; }
}

/* ---------- Selector de idioma (inyectado por js/i18n.js) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang-sep { opacity: 0.3; }
.lang-btn {
  background: none;
  border: 0;
  padding: 0.6rem 0;
  color: currentColor;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .lang-btn:hover { opacity: 0.75; }
}
.lang-btn.is-active { opacity: 1; }

.menu-toggle .burger::before,
.menu-toggle .burger::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.menu-toggle .burger::before { top: 0; }
.menu-toggle .burger::after { top: 8px; }
.menu-open .menu-toggle .burger::before { top: 4px; transform: rotate(45deg); }
.menu-open .menu-toggle .burger::after { top: 4px; transform: rotate(-45deg); }

/* ---------- Menú fullscreen ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  overscroll-behavior: contain;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) clamp(2rem, 6vh, 4rem);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.nav-overlay-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: end;
}
.nav-links li { overflow: hidden; }
.nav-links a {
  display: inline-block;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  transition: opacity 0.3s ease, transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .nav-links li:hover a { opacity: 0.45; transform: translateX(0.35em); }
}
.nav-links .nav-num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gray);
  vertical-align: super;
  margin-right: 0.6rem;
}
.nav-meta {
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--gray);
}
@media (hover: hover) {
  .nav-meta a:hover { color: var(--cream); }
}
.nav-meta .nav-claim { margin-bottom: 1.4rem; color: var(--cream); }

/* ==========================================================================
   Hero — acto 1 (lockup) + acto 2 (constelación)
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-lockup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Lockup con la geometría exacta de "logo final.svg" (viewBox 657.87 × 306):
   AZETA en x0 y104.89 (230.62×32.67) · esferas en x207.14 (318.48×306.24)
   · "80 años" en x408.05 y108.31 (249.82×24.22) */
.lockup-inner {
  position: relative;
  width: min(52vw, 760px);
  aspect-ratio: 657.87 / 306;
}
.lockup-azeta {
  position: absolute;
  left: 0;
  top: 34.28%;
  width: 35.06%;
  height: auto;
  will-change: transform;
}
.lockup-80 {
  position: absolute;
  left: 62.03%;
  top: 35.4%;
  width: 37.98%;
  height: auto;
  will-change: transform;
}
.lockup-spheres {
  position: absolute;
  left: 31.49%;
  top: 0;
  width: 48.41%;
  aspect-ratio: 318.48 / 306.24;
}
/* Cada esfera vive en un "orbit": el span flota (vida en reposo) y la img
   queda libre para la deconstrucción del scroll (transforms de heroTl) */
.lockup-orbit {
  position: absolute;
  display: block;
  will-change: transform;
}
.lockup-spheres img {
  width: 100%;
  opacity: 0.9;
  will-change: transform, opacity;
}
.lockup-orbit-a { width: 71.5%; left: 0;     top: 25.55%; }
.lockup-orbit-b { width: 52.6%; left: 9.4%;  top: 0; }
.lockup-orbit-c { width: 67.4%; left: 32.6%; top: 4.55%; }

/* ---------- Partículas del hero ---------- */
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--gray);
}
.hero-scroll-hint::after {
  content: '';
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--cream), transparent);
  animation: hint-drop 2.2s var(--ease-out) infinite;
}
@keyframes hint-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Claim central ---------- */
.hero-claim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.hero-claim h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.hero-claim .claim-2 { color: var(--gold-text); }
.hero-claim .claim-hint {
  margin-top: 2rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  /* Sheen periódico: barrido de luz sobre el texto para invitar a explorar */
  color: transparent;
  background: linear-gradient(100deg,
    var(--gray) 38%, var(--cream) 50%, var(--gray) 62%);
  background-size: 260% 100%;
  background-position: 88% 0;
  -webkit-background-clip: text;
  background-clip: text;
  /* El brillo es visible con background-position entre ~81% y ~19%: los
     extremos (88/12) quedan apenas fuera para que el salto de vuelta no se
     vea y la pausa entre pasadas sea corta. */
  animation: hint-sheen 2.8s ease-in-out 1.2s infinite;
}
@keyframes hint-sheen {
  0% { background-position: 88% 0; }
  62%, 100% { background-position: 12% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-claim .claim-hint {
    animation: none;
    background: none;
    color: var(--gray);
  }
}

/* ---------- Constelación de empresas ---------- */
.constellation { position: absolute; inset: 0; }

.orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  display: block;
  will-change: transform;
}
/* Ocultos hasta que la constelación se revela (main.js usa inert en
   .constellation para sacarlos del tab order); sin JS quedan visibles */
.js .orb { opacity: 0; }
.orb { cursor: grab; }
.orb.is-dragging { cursor: grabbing; }
.orb-depth { /* capa de parallax de profundidad por scroll (se crea en JS) */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: block;
  will-change: transform;
}
.orb-drift { /* capa de parallax por mouse */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: block;
}
.orb-float { /* capa de deriva "en reposo" (se crea en JS) */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: block;
  will-change: transform;
  /* contiene el multiply del logo: mezcla contra la esfera, no contra el negro
     de la página */
  isolation: isolate;
}
.orb-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out), filter 0.38s ease;
}
/* Disco sólido del hover: la esfera difusa se cuaja en un círculo plano y
   nítido. Se dimensiona por esfera porque cada webp ocupa una fracción distinta
   de su caja (de 0.59 a 0.88): con un tamaño único, al encenderse la esfera
   pegaría un salto. Cada --orb-fill es el diámetro visible medido sobre el
   propio archivo, así que el disco tapa el borde difuso en vez de dejar un halo. */
/* va en .orb y no en .orb-sphere para que el logo y el nombre también se midan
   contra el disco, no contra la caja del orb */
.orb:has(.orb-sphere[style*="sphere-1"]) { --orb-fill: 0.657; }
.orb:has(.orb-sphere[style*="sphere-2"]) { --orb-fill: 0.589; }
.orb:has(.orb-sphere[style*="sphere-3"]) { --orb-fill: 0.665; }
.orb:has(.orb-sphere[style*="sphere-4"]) { --orb-fill: 0.710; }
.orb:has(.orb-sphere[style*="sphere-5"]) { --orb-fill: 0.770; }
.orb:has(.orb-sphere[style*="sphere-6"]) { --orb-fill: 0.797; }
.orb:has(.orb-sphere[style*="sphere-7"]) { --orb-fill: 0.845; }
.orb:has(.orb-sphere[style*="sphere-8"]) { --orb-fill: 0.884; }
.orb:has(.orb-sphere[style*="sphere-9"]) { --orb-fill: 0.865; }

.orb-sphere::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * var(--orb-fill, 0.75));
  height: calc(100% * var(--orb-fill, 0.75));
  border-radius: 50%;
  background: var(--orb-solid);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.32s ease, transform 0.42s var(--ease-out);
}
.orb-sphere::after { /* grain animado; el mask sigue el borde difuso de la esfera */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 48%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 48%, transparent 70%);
  animation: sphere-grain 0.85s steps(1) infinite;
  transition: opacity 0.38s ease;
}
@keyframes sphere-grain {
  0%    { background-position: 0 0; }
  12.5% { background-position: -28px 22px; }
  25%   { background-position: 34px -14px; }
  37.5% { background-position: -12px -30px; }
  50%   { background-position: 26px 18px; }
  62.5% { background-position: -34px 6px; }
  75%   { background-position: 10px 32px; }
  87.5% { background-position: -20px -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-sphere::after { animation: none; }
}
.orb-logo { /* se mide contra el disco, no contra la caja del orb: si no, en las
     esferas chicas (sphere-2 ocupa 0.59 de su caja) el logo se sale del disco y
     el multiply lo recorta contra el negro */
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * var(--orb-fill, 0.75));
  height: calc(100% * var(--orb-fill, 0.75));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  mix-blend-mode: multiply;
  transition: opacity 0.4s ease, transform 0.55s var(--ease-out);
}
.orb-logo img { /* el PNG es blanco: brightness lo baja a tinta conservando el
     alpha, así no hacen falta los archivos _oscuro */
  width: calc(100% * var(--logo-w, 0.66));
  height: auto;
  max-width: none;
  max-height: none;
  filter: brightness(1);
  transition: filter 0.5s var(--ease-out);
}

/* Ancho de cada logo como fracción del diámetro del disco. Con un tamaño único
   (el max-width/max-height que había) los wordmarks anchos llenaban el disco y
   los logos altos quedaban diminutos: Nueva Americana se veía ~3x más grande
   que Abasto Norte. Cada valor normaliza el ÁREA DE TINTA medida sobre el
   archivo, con tope en el rectángulo inscrito en el círculo. */
.orb:has(img[src*="abc_blanco"])                   { --logo-w: 0.626; }
.orb:has(img[src*="personal_blanco"])              { --logo-w: 0.858; }
.orb:has(img[src*="mariano_blanco"])               { --logo-w: 0.863; }
.orb:has(img[src*="del_sol_blanco"])               { --logo-w: 0.806; }
.orb:has(img[src*="banco_atlas_blanco"])           { --logo-w: 0.824; }
.orb:has(img[src*="inmobiliaria_del_este_blanco"]) { --logo-w: 0.848; }
.orb:has(img[src*="azeta_mys_blanco"])             { --logo-w: 0.850; }
.orb:has(img[src*="nueva_americana_blanco"])       { --logo-w: 0.893; }
.orb:has(img[src*="ferrex_blanco"])                { --logo-w: 0.619; }
.orb:has(img[src*="shopping_mariscal_blanco"])     { --logo-w: 0.879; }
.orb:has(img[src*="mercurio_blanco"])              { --logo-w: 0.650; }
.orb:has(img[src*="vanguardia_blanco"])            { --logo-w: 0.619; }
.orb:has(img[src*="azenta_blanco"])                { --logo-w: 0.861; }
.orb:has(img[src*="avanza_blanco"])                { --logo-w: 0.834; }
/* Wordmarks finos que nunca recibieron su medida: caían al 0.66 por defecto,
   o sea al 67% del ancho inscribible, mientras el resto de los finos va al 88%. */
.orb:has(img[src*="acapuedo_blanco"])              { --logo-w: 0.714; }
.orb:has(img[src*="grupo_suenolar_blanco"])        { --logo-w: 0.880; }
.orb:has(img[src*="atlas_inversiones_blanco"])     { --logo-w: 0.867; }
.orb:has(img[src*="atlas_seguros_blanco"])         { --logo-w: 0.858; }
.orb:has(img[src*="plaza_norte_blanco"])           { --logo-w: 0.880; }
.orb-name { /* colgado del borde del disco, no de la caja del orb */
  position: absolute;
  top: calc(50% + var(--orb-fill, 0.75) * 50% + 0.8rem);
  left: 50%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}
/* Hover: se invierte la polaridad. La esfera difusa se cuaja en un disco sólido
   claro y el logo pasa a tinta oscura. Va escalonado —primero cuaja el disco,
   después aparece la marca— para que se lea como causa y efecto y no como un
   fundido plano. */
.orb.is-touched,
.orb.is-peek { z-index: 5; }
@media (hover: hover) {
  .orb:hover { z-index: 5; }
} /* .orb no tiene z-index propio: sin esto, un orb
     agrandado queda tapado por otro posterior en el DOM */
.orb.is-touched .orb-sphere,
.orb.is-peek .orb-sphere { transform: scale(1.16); }
@media (hover: hover) {
  .orb:hover .orb-sphere { transform: scale(1.16); }
}
.orb.is-touched .orb-sphere::before,
.orb.is-peek .orb-sphere::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: hover) {
  .orb:hover .orb-sphere::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
}
.orb.is-touched .orb-sphere::after,
.orb.is-peek .orb-sphere::after { /* el disco va plano: el grano animado le
     devolvería la textura difusa de la que lo estamos sacando */
  opacity: 0;
}
@media (hover: hover) {
  .orb:hover .orb-sphere::after { /* el disco va plano: el grano animado le
     devolvería la textura difusa de la que lo estamos sacando */
  opacity: 0;
}
}
.orb.is-touched .orb-logo,
.orb.is-peek .orb-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.14s;
}
@media (hover: hover) {
  .orb:hover .orb-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.14s;
}
}
.orb.is-touched .orb-logo img,
.orb.is-peek .orb-logo img {
  filter: brightness(var(--orb-ink));
  transition-delay: 0.14s;
}
@media (hover: hover) {
  .orb:hover .orb-logo img {
  filter: brightness(var(--orb-ink));
  transition-delay: 0.14s;
}
}
.orb.is-touched .orb-name,
.orb.is-peek .orb-name { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  .orb:hover .orb-name { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Secciones generales
   ========================================================================== */
.section {
  position: relative;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
}
/* Todo el contenido de sección comparte la misma columna centrada */
.section > * { max-width: var(--content); margin-inline: auto; }

/* .section define su propio padding más abajo en el archivo: esta regla, con
   dos clases, asegura que margen + padding del contenedor sumen el gutter y
   el contenido quede alineado con el del resto de la página */
.section.dark-shell {
  /* el contenedor ocupa exactamente la columna de contenido del sitio:
     limitado por el gutter y por el ancho máximo, centrado */
  width: min(calc(100% - var(--gutter) * 2), var(--content));
  margin: clamp(2.5rem, 7vh, 4.5rem) auto;
  padding: clamp(3rem, 7vh, 5rem) clamp(1.5rem, 3.4vw, 3.25rem);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* ---------- Video ---------- */
.video-section { padding: clamp(5rem, 12vh, 9rem) 0; }
.video-frame {
  /* Llega hasta los márgenes de la página en vez de topear en --content
     (1280px): en pantallas anchas quedaba chico y con mucho aire al costado.
     100% del contenedor y no 100vw, que incluiría el ancho de la barra de
     scroll y provocaría desborde horizontal. */
  width: calc(100% - var(--gutter) * 2);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transform-origin: center;
  will-change: transform;
}
.video-frame video {
  width: 100%;
  height: auto;
  display: block;
  /* El redondeo va también en el video y no solo en el contenedor: con el
     transform del scrub encima, el overflow:hidden del padre no recorta de
     forma confiable un elemento reemplazado. */
  border-radius: inherit;
}

/* ---------- Manifiesto ---------- */
.manifesto { max-width: var(--content); margin: 0 auto; position: relative; z-index: 1; }
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 2.4rem 0 clamp(3rem, 6vw, 5rem);
}
.manifesto-media { overflow: hidden; border-radius: var(--radius-md); }
.manifesto-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
@media (hover: hover) {
  .manifesto-cell:hover .manifesto-media img { transform: scale(1.05); }
}
.manifesto-cell figcaption {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.manifesto-cell figcaption span {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: 0.05em;
}
.manifesto-text {
  font-size: clamp(1.7rem, 3.6vw, 3.3rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.manifesto-text .dim { color: var(--gold-text); }
.manifesto-foot {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.link-line {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Variante un poco más grande, para cuando el link-line va solo en la
   sección en vez de acompañar un bloque de texto (ej. el cierre de Hitos). */
.link-line-lg {
  font-size: 0.98rem;
}
.link-line::after {
  content: '';
  width: 3.2rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .link-line:hover::after { transform: scaleX(0.4); }
}

/* ---------- Datos ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
body.theme-light .stats-grid { border-color: var(--line-dark); }
.stat {
  padding: 2.6rem 2rem 0 0;
  border-right: 1px solid var(--line);
  margin-right: 2rem;
}
.stat:last-child { border-right: 0; margin-right: 0; }
body.theme-light .stat { border-color: var(--line-dark); }
.stat-num {
  font-size: clamp(3rem, 6.5vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-num sup { font-size: 0.45em; vertical-align: 0.8em; letter-spacing: 0; }
/* Dupla de imágenes entre Empresas y Sostenibilidad */
.photo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 var(--gutter);
}
.photo-duo-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.photo-duo-item img {
  width: 100%;
  height: 210%;
  margin-top: -34%;
  object-fit: cover;
  will-change: transform;
}

.stat-tag {
  margin-top: 1.1rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray-deep);
}
.stat-label {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--gray);
  max-width: 26ch;
}

/* ==========================================================================
   Línea de tiempo horizontal
   ========================================================================== */
.timeline-section {
  position: relative;
  color: var(--ink);
  /* El crema va horneado en el mural, así que la sección tiene que traer el
     mismo fondo: si dependiera del body.theme-light, mientras corre el
     crossfade se ve el rectángulo claro del mural recortado sobre el negro. */
  background: var(--cream-bg);
}
.timeline-viewport {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.tl-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: clamp(3rem, 6vw, 6rem);
  padding: 0 var(--gutter);
  will-change: transform;
}

/* Mural continuo: su altura dicta el ancho del track. La composición sigue al
   arte final del cliente: el mural arriba y debajo la línea de años con los
   hitos colgando, en vez de superponerlos sobre el cielo del mural. */
.tl-mural {
  --mural-h: 58svh;
  --tl-gap: 4svh;   /* aire entre el arte y la línea de años */
  --year-r: 42px;   /* radio del círculo del año */
  /* 21 hitos sobre un mural de 9.134·h. Los --x salen de la posición real de
     cada empresa en el arte, que no está repartida de forma pareja: el par más
     junto (Biggie→Plaza Norte y Acapuedo→Sueñolar) deja 3.6% del mural, o sea
     0.33·h por ficha. Atar el ancho a la altura del mural (y no a vw) mantiene
     la proporción en cualquier viewport, que es lo que evita que se pisen. */
  --item-w: calc(var(--mural-h) * 0.30);
  flex: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  /* La altura declara el bloque completo (arte + línea + año + título) para que
     align-self pueda centrarlo; si se dejara estirar, el conjunto quedaría
     pegado arriba con el hueco muerto abajo */
  align-self: center;
  height: calc(var(--mural-h) + var(--tl-gap) + var(--year-r) * 2 + 6.2rem);
}
/* línea punteada horizontal que conecta los círculos de los años */
.tl-mural::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mural-h) + var(--tl-gap) + var(--year-r));
  height: 0;
  border-top: 2px dashed rgba(158, 134, 99, 0.5);
}
.tl-mural-img {
  display: block;
  height: var(--mural-h);
  width: auto; /* ancho = alto × (7344/804) ≈ 9.13·h */
  /* El fondo crema va horneado en el asset (compuesto sobre #efeae4 al convertir):
     mix-blend-mode no funciona aquí por el stacking context del track pinneado */
  user-select: none;
  -webkit-user-drag: none;
}

.tl-intro {
  flex: none;
  width: min(78vw, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}
.tl-intro .section-title { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.tl-intro .tl-sub { color: var(--gray-deep); max-width: 42ch; }

/* Hitos colgados de la línea de años, centrados sobre su edificio (--x) */
.tl-item {
  position: absolute;
  top: calc(var(--mural-h) + var(--tl-gap));
  left: var(--x);
  translate: -50% 0; /* propiedad translate, no transform: no pisa los tweens de GSAP */
  z-index: 1;
  width: var(--item-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tl-year {
  width: calc(var(--year-r) * 2);
  height: calc(var(--year-r) * 2);
  border-radius: 50%;
  background: var(--gold);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
/* Acá Puedo, Atlas Seguros y Atlas Inversiones comparten un hito de dos años */
.tl-year--split {
  font-size: 0.9rem;
  line-height: 1.15;
}
.tl-title {
  margin-top: 1.1rem;
  font-size: clamp(0.8rem, 0.95vw, 1.05rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Qué empresa es cada hito: el año y el título solos no lo dicen */
.tl-who {
  margin-top: 0.5rem;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--gray-deep);
  text-wrap: balance;
}

.tl-outro {
  flex: none;
  width: min(70vw, 560px);
  /* aire extra al final del recorrido, además del gutter del track: el cierre
     no debería quedar pegado al borde */
  margin-right: clamp(1.5rem, 4vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.tl-outro .big {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.tl-outro .big .dim { color: var(--gold-text); }

/* ==========================================================================
   Cita full-bleed (fotograma final del film)
   ========================================================================== */
.quote-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem var(--gutter);
}
.quote-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 116%;
  top: -8%;
  object-fit: cover;
  will-change: transform;
}
.quote-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--veil-3), var(--veil-2) 45%, var(--veil-4));
}
.quote-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  max-width: 1000px;
}
.quote-inner .eyebrow { color: var(--cream); }
.quote-text {
  font-size: clamp(1.8rem, 4.4vw, 3.8rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.quote-cite {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--gray);
}

.eyebrow-count { color: var(--gray-deep); letter-spacing: 0.1em; margin-left: 0.3rem; }

/* ---------- Banda de foto (páginas internas) ---------- */
.photo-band { position: relative; overflow: hidden; }
/* variante enmarcada: respeta la columna de contenido, como .video-frame */
.photo-band--inset {
  width: min(calc(100% - var(--gutter) * 2), var(--content));
  margin-inline: auto;
  border-radius: var(--radius-lg);
}
.photo-band--inset figcaption { left: clamp(1.2rem, 2.5vw, 2.2rem); }
/* Variante para fotos que no deben perder alto (ej. la fachada histórica de
   Ferretería Americana): en vez del banner de altura fija, sigue la
   proporción real de la foto, así no se come cielo ni vereda de más. */
.photo-band--natural img { height: auto; aspect-ratio: 16 / 9; }
.photo-band img {
  width: 100%;
  height: clamp(320px, 58vh, 560px);
  object-fit: cover;
  filter: saturate(0.85);
  will-change: transform;
}
.photo-band figcaption {
  position: absolute;
  left: var(--gutter);
  bottom: 1.2rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--cream);
  text-shadow: 0 1px 8px var(--veil-3);
}

/* ==========================================================================
   Marquees (logos + claim)
   ========================================================================== */

/* ---------- Card de contacto (CTA, estilo fabrica) ---------- */

.claim-marquee { overflow: hidden; padding: clamp(3.5rem, 9vh, 6.5rem) 0; }
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

.claim-run {
  white-space: nowrap;
  font-size: clamp(3rem, 7vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.claim-run .dim { color: var(--gold-text); }
.claim-run > span { padding-right: 1.4em; }

/* ==========================================================================
   Empresas — grid simple de logos
   ========================================================================== */
.index-note {
  color: var(--gray);
  font-size: 0.95rem;
  text-align: right;
}
/* Flex en vez de grid: con 17 empresas la última fila queda incompleta,
   y así se centra sola en lugar de dejar el hueco a la derecha.
   Cambiar de columnas = cambiar sólo --cols. */
.companies-grid {
  --cols: 5;
  --grid-gap: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
}
.company-cell {
  flex: 0 0 calc((100% - var(--grid-gap) * (var(--cols) - 1)) / var(--cols));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(96px, 10vw, 140px);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: background 0.35s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .company-cell:hover { background: var(--surface-hover); transform: translateY(-3px); }
}
/* --logo-h viene por celda: altura calculada para que todos los logos ocupen
   la misma área visual pese a sus proporciones dispares */
.company-cell img {
  height: calc(var(--logo-h, 32px) * var(--logo-scale, 1));
  width: auto;
  max-width: 62%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.35s ease;
}
@media (hover: hover) {
  .company-cell:hover img { opacity: 1; }
}

/* ---------- Sub-marcas de una empresa (universo de marcas) ---------- */
.subbrands {
  --cols: 3;
  --grid-gap: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
}
.subbrand {
  flex: 0 0 calc((100% - var(--grid-gap) * (var(--cols) - 1)) / var(--cols));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: center;
  padding: 2.1rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: background 0.35s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  a.subbrand:hover { background: var(--surface-hover); transform: translateY(-3px); }
}
.subbrand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
}
.subbrand-logo img {
  height: calc(var(--logo-h, 32px) * 1.15);
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
@media (hover: hover) {
  a.subbrand:hover .subbrand-logo img { opacity: 1; }
}
/* Reemplazo del logo mientras el archivo de la marca no existe: hereda el
   color del tema, así se lee igual en la versión clara y en la oscura. La
   tarjeta no lleva pie —el wordmark ya dice el nombre—, así que se centra. */
.subbrand:has(.subbrand-wordmark) { justify-content: center; }
.subbrand-wordmark {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.subbrand-name { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--gray); }
.subbrand-note {
  color: var(--gray);
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 34ch;
}
@media (max-width: 760px) { .subbrands { --cols: 2; } }

/* Razón social en el hero de empresa */
.company-razon { color: var(--gray-deep); font-size: 0.82rem; margin-top: 0.9rem; max-width: 46ch; }

/* ---------- Sostenibilidad / RSE: carrusel y grilla de noticias ---------- */
.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.news-intro { display: flex; flex-direction: column; gap: 1.1rem; max-width: 46ch; }
.news-title {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.news-lede { color: var(--gray); font-size: 0.98rem; max-width: 48ch; }
.news-actions { display: flex; align-items: center; gap: 0.9rem; }
.news-arrow {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--cream);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .news-arrow:hover { background: var(--cream); color: var(--black); border-color: var(--cream); }
}

.news-track {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.news-track::-webkit-scrollbar { display: none; }
.news-track .news-card {
  flex: none;
  width: clamp(270px, 27vw, 400px);
  scroll-snap-align: start;
}

/* Panel elevado sin borde, como las cards de fabrica: superficie apenas
   más clara que el contenedor, y lift al pasar el mouse */
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background 0.35s ease, transform 0.55s var(--ease-out);
}
@media (hover: hover) {
  .news-card:hover { background: var(--surface-hover); transform: translateY(-4px); }
}
.news-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
@media (hover: hover) {
  .news-card:hover .news-card-img img { transform: scale(1.05); }
}
.news-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem;
  flex: 1;
}
/* fecha • categoría en una línea sobre el título, sin píldora */
.news-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gray-deep);
}
.news-chip { color: var(--gray); }
.news-sep { color: var(--gray-deep); }
.news-date { color: var(--gray-deep); }
.news-card h3 { font-size: 1.06rem; font-weight: 400; line-height: 1.38; }

.news-filters { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.news-filter {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .news-filter:hover { color: var(--cream); border-color: var(--cream); }
}
.news-filter.is-active { background: var(--cream); color: var(--black); border-color: var(--cream); }
/* cantidad de acciones por categoría (la inyecta page.js) */
.filter-count {
  margin-left: 0.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gray-deep);
  font-variant-numeric: tabular-nums;
}
.news-filter.is-active .filter-count { color: rgba(5, 5, 5, 0.55); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

/* Banda de cierre: newsletter + contacto de sostenibilidad */
.news-follow {
  position: relative;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  /* la columna de botones se dimensiona a su contenido: quedan en fila */
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: end;
  padding: clamp(2.2rem, 4.5vw, 3.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.news-follow-sphere {
  position: absolute;
  right: -70px;
  top: -90px;
  width: clamp(180px, 22vw, 300px);
  opacity: 0.85;
  pointer-events: none;
  /* vida propia: flotado suave, cada esfera con su ritmo */
  animation: sphere-float 9s ease-in-out infinite;
}
@keyframes sphere-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.news-follow-sphere--sm {
  right: 36%;
  top: auto;
  bottom: -48px;
  width: clamp(90px, 9vw, 130px);
  opacity: 0.75;
  animation-duration: 12s;
  animation-delay: -3s;
}
.news-follow-sphere--xs {
  right: 24%;
  top: 12%;
  width: clamp(38px, 4vw, 58px);
  opacity: 0.8;
  animation-duration: 7s;
  animation-delay: -1.5s;
}
.news-follow-sphere--e {
  right: auto;
  left: 45%;
  top: -36px;
  width: clamp(64px, 6.5vw, 96px);
  opacity: 0.8;
  animation-duration: 10s;
  animation-delay: -6s;
}
.news-follow-sphere--f {
  right: auto;
  left: 26%;
  top: auto;
  bottom: -14px;
  width: clamp(24px, 2.6vw, 38px);
  opacity: 0.75;
  animation-duration: 6s;
  animation-delay: -4s;
}
.news-follow-sphere--g {
  right: auto;
  left: 46%;
  top: 54%;
  width: clamp(44px, 4.6vw, 66px);
  opacity: 0.7;
  animation-duration: 11s;
  animation-delay: -8s;
}
.news-follow-copy { position: relative; display: grid; gap: 1rem; justify-items: start; }
.news-follow-copy h3 {
  font-size: var(--size-h3);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.news-follow-copy p { color: var(--gray); font-size: 0.95rem; max-width: 40ch; }
.news-follow-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.4rem;
}

/* Botones píldora (misma familia que el botón del formulario CTA) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1rem 1.9rem;
  transition: background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .btn-pill:hover { border-color: var(--cream); transform: translateY(-2px); }
}
.btn-pill--solid { background: var(--cream); border-color: var(--cream); color: var(--black); }
@media (hover: hover) {
  .btn-pill--solid:hover { background: #fff; border-color: #fff; }
}

/* ==========================================================================
   CTA final + footer
   ========================================================================== */
.cta-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* el contenido vive sobre la foto oscura: siempre crema, aunque el body
     esté en tema claro */
  color: var(--cream);
  /* --cta-edge: mismo borde lateral que el footer (el gutter del viewport),
     así el contenedor de la foto va más ancho que la columna de contenido
     --cta-pad: aire interno, el mismo que usa el contenedor de sostenibilidad */
  --cta-edge: var(--gutter);
  --cta-pad: clamp(1.5rem, 3.4vw, 3.25rem);
  padding: clamp(6rem, 11vh, 9rem) calc(var(--cta-edge) + var(--cta-pad));
}
/* Fondo fotográfico dentro de un contenedor con radio, no a sangre */
.cta-media {
  position: absolute;
  top: clamp(1.2rem, 3.5vh, 3rem);
  bottom: clamp(1.2rem, 3.5vh, 3rem);
  /* mismo borde lateral que la columna de contenido */
  left: var(--cta-edge);
  right: var(--cta-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 122%;
  top: -11%;
  object-fit: cover;
  will-change: transform;
}
/* velo dentro del contenedor, así respeta las esquinas redondeadas */
.cta-media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* dos velos que dejan la figura despejada: uno lateral bajo el formulario
     y otro que sube desde la base; con el titular centrado verticalmente,
     el velo inferior sube un poco más para sostener el contraste */
  background:
    linear-gradient(to top, var(--veil-4) 0%, var(--veil-2) 38%, var(--veil-1) 55%, transparent 76%),
    linear-gradient(100deg, var(--veil-3) 0%, var(--veil-1) 26%, transparent 50%);
}
.cta-section > *:not(.cta-media) { position: relative; z-index: 1; }

/* Esferas del KV flotando sobre la fotografía; van encima del velo y quedan
   recortadas por el contenedor redondeado */
.cta-orbs { position: absolute; inset: 0; z-index: 1; display: block; }
.cta-orbs img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  transform: translate(-50%, -50%);
  opacity: 0.92;
  will-change: transform;
}



.cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: center;
  width: 100%;
}

/* Card del formulario (estilo fabrica) */
.cta-form-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.cta-form-mark { height: 14px; width: auto; align-self: flex-start; filter: brightness(0.08); }
/* Toggle "quiero trabajar" / "tengo una consulta": mismo formulario, dos
   motivos. Sólo cambia título, placeholder, nota y si se pide el CV. */
.cta-form-tabs { display: flex; gap: 0.5rem; }
.cta-form-tab {
  flex: 1;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: rgba(13, 12, 11, 0.055);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.cta-form-tab.is-active { background: var(--ink); color: var(--cream); }
/* [hidden] pierde contra .cta-field{display:flex} por el empate de
   especificidad con la hoja de estilos del navegador: hay que reafirmarlo acá. */
.cta-field[hidden] { display: none; }
@media (hover: hover) {
  .cta-form-tab:not(.is-active):hover { background: rgba(13, 12, 11, 0.1); }
}
.cta-form-title {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.5rem;
}
/* El acento va en "Contanos" y no en la voz secundaria. Se resuelve pintando
   el título y devolviendo el .dim a tinta, para no envolver la primera palabra
   en un <strong> nuevo: ese markup es la clave de i18n del título. */
.cta-form-title { color: var(--gold-text); }
.cta-form-title .dim { color: var(--ink); font-weight: 400; }
.cta-field { display: flex; flex-direction: column; gap: 0.45rem; }
.cta-field label { font-size: 0.78rem; font-weight: 600; }
.cta-field input,
.cta-field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(13, 12, 11, 0.055);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  transition: border-color 0.3s ease, background 0.3s ease;
  resize: vertical;
}
.cta-field input::placeholder,
.cta-field textarea::placeholder { color: var(--gray); }
.cta-field input:focus,
.cta-field textarea:focus {
  outline: none;   /* lo reemplaza el borde de abajo y el anillo de :focus-visible */
  border-color: var(--ink);
  background: rgba(13, 12, 11, 0.03);
}

.cta-form-send {
  margin-top: 0.4rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 1.05rem 2.2rem;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .cta-form-send:hover { transform: translateY(-2px); }
}
.cta-form-note { font-size: 0.82rem; color: var(--gray-deep); line-height: 1.5; text-align: center; }

/* Columna de texto */
.cta-copy {
  align-self: center;
  text-align: left;
}
.cta-title {
  font-size: clamp(2.5rem, 5.2vw, 5.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
}
.cta-title .dim { color: var(--gray-deep); }
/* Sobre la fotografía el texto necesita más peso que sobre el fondo negro:
   los grises apagados se pierden contra las zonas claras de la imagen. */
.cta-copy .cta-title .dim { color: var(--cream); }
.cta-copy .cta-sub { color: rgba(244, 238, 233, 0.88); }
.cta-sub {
  margin-top: 1.8rem;
  color: var(--gray);
  max-width: 52ch;
  position: relative;
  z-index: 1;
}
/* Datos de contacto directo, sólo en la página dedicada de Contacto */
.contact-info-list {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}
.contact-info-list a,
.contact-info-list address {
  color: rgba(244, 238, 233, 0.88);
  font-style: normal;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .contact-info-list a:hover { color: var(--cream); }
}

@media (max-width: 960px) {
  .cta-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cta-form-card { order: 2; width: min(480px, 100%); margin: 0 auto; }
  .cta-copy {
  align-self: end; order: 1; }
}
.cta-actions {
  margin-top: 3rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 2.2rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--cream);
  transition: background 0.35s ease, color 0.35s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn-solid { background: var(--cream); color: var(--black); }
@media (hover: hover) {
  .btn-solid:hover { background: transparent; color: var(--cream); }
}
.btn-ghost { color: var(--cream); }
@media (hover: hover) {
  .btn-ghost:hover { background: var(--cream); color: var(--black); }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 2.4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 3rem;
  margin-bottom: 4.5rem;
}
.footer-brand img { height: 22px; }
.footer-brand img + p { margin-top: 1.4rem; }
.footer-brand p { color: var(--gray); font-size: 0.9rem; max-width: 30ch; }
.footer-col h3 {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray-deep);
  margin-bottom: 1.3rem;
}
.footer-col ul { display: grid; gap: 0.55rem; }
.footer-col a { color: var(--gray); font-size: 0.92rem; transition: color 0.3s ease; }
@media (hover: hover) {
  .footer-col a:hover { color: var(--cream); }
}
.footer-col address { font-style: normal; color: var(--gray); font-size: 0.92rem; line-height: 1.7; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--gray-deep);
}
.footer-80 img { height: 14px; opacity: 0.7; }

/* Redes sociales */
.footer-social { display: flex; gap: 0.9rem; margin-top: 1.6rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gray);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .footer-social a:hover { color: var(--cream); border-color: var(--gray); transform: translateY(-2px); }
}
.footer-social svg { width: 16px; height: 16px; display: block; }

/* Logo gigante a lo awwwards: todo el ancho, anclado al borde inferior */
.footer-mega {
  margin: clamp(2.5rem, 6vh, 5rem) calc(-1 * var(--gutter)) -2.4rem;
  overflow: hidden;
  line-height: 0;
}
.footer-mega img {
  width: 100%;
  height: auto;
  opacity: 0.07;
  transform: translateY(8%);
}

/* ==========================================================================
   Páginas internas
   ========================================================================== */
.page-hero {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.6rem;
  /* en pantallas anchas el texto se alinea con la columna de contenido
     centrada de .section, no con el gutter del viewport */
  padding: calc(var(--header-h) + 4rem)
           max(var(--gutter), calc((100% - var(--content)) / 2))
           clamp(3rem, 7vh, 5rem);
  position: relative;
  overflow: hidden;
}
.page-hero .page-title {
  font-size: var(--size-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 12ch;
}
.page-hero .page-intro { color: var(--gray); max-width: 52ch; }
.page-hero .hero-sphere {
  position: absolute;
  right: -6%;
  top: 6%;
  width: clamp(200px, 30vw, 460px);
  opacity: 0.9;
  will-change: transform;
  pointer-events: none;
}
/* Hero de sostenibilidad: titular un escalón por debajo del display
   (la frase es larga) y constelación en vez de una sola esfera grande */
.sos-hero .page-title {
  font-size: clamp(2.6rem, 6.8vw, 5.8rem);
  max-width: 14ch;
}
.sos-hero .hero-sphere,
.about-hero .hero-sphere,
.work-hero .hero-sphere {
  right: -2%;
  top: 10%;
  width: clamp(150px, 19vw, 290px);
}
.sos-hero .hero-sphere--b,
.about-hero .hero-sphere--b,
.work-hero .hero-sphere--b {
  right: 21%;
  top: 56%;
  width: clamp(64px, 7vw, 110px);
  opacity: 0.85;
}
.sos-hero .hero-sphere--c,
.about-hero .hero-sphere--c,
.work-hero .hero-sphere--c {
  right: 35%;
  top: 16%;
  width: clamp(38px, 4.5vw, 68px);
  opacity: 0.85;
}
.sos-hero .hero-sphere--d,
.about-hero .hero-sphere--d {
  right: 8%;
  top: 74%;
  width: clamp(28px, 3.2vw, 50px);
  opacity: 0.8;
}

/* Hero de artículo RSE: títulos largos, un escalón bajo el display */
.article-hero { min-height: 46vh; }
.article-hero .page-title {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  max-width: 26ch;
}

/* Sección "1946 → 2026" de nosotros: el tiempo como protagonista */
.about-years {
  text-align: center;
}
.years-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(1rem, 3.4vw, 2.8rem);
  margin-top: 1.8rem;
}
.years-big {
  font-size: clamp(3.4rem, 13vw, 11rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.years-arrow {
  font-size: clamp(1.5rem, 4.6vw, 3.6rem);
  color: var(--gray-deep);
}
.years-note {
  margin-top: 1.6rem;
  color: var(--gray);
  font-size: 0.95rem;
}

.prose {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
}
.prose h2 { font-size: var(--size-h3); font-weight: 400; letter-spacing: -0.015em; margin-top: 1.5rem; }
.prose p { color: var(--gray); }
.prose strong { color: var(--cream); font-weight: 600; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.pillar {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  transition: background 0.35s ease, transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .pillar:hover { background: var(--surface-hover); transform: translateY(-4px); }
}
.pillar-icon {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  margin-bottom: 0.4rem;
  transition: transform 0.6s var(--ease-out), border-color 0.35s ease;
}
.pillar-icon svg { width: 24px; height: 24px; }
@media (hover: hover) {
  .pillar:hover .pillar-icon { transform: translateY(-4px); border-color: var(--cream); }
}
.pillar h3 { font-size: 1.15rem; font-weight: 400; }
.pillar p { color: var(--gray); font-size: 0.9rem; }
/* atajo del pilar a su filtro en la grilla de novedades */
.pillar .link-line {
  margin-top: 0.5rem;
  color: var(--gray);
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .pillar .link-line:hover { color: var(--cream); }
}

/* ---------- Página de empresa ---------- */
.company-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
  overflow: hidden;
}
/* Contenedor oscuro sobre página clara (sin transición de tema): el card
   usa la misma columna que el resto de la página (igual que .section.dark-shell
   de la home), con el gutter como margen lateral */
.company-hero.dark-shell {
  width: min(calc(100% - var(--gutter) * 2), var(--content));
  min-height: calc(88vh - var(--header-h) - 2rem);
  margin: calc(var(--header-h) + 1.5rem) auto 0;
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 3.4vw, 3.25rem);
}
.company-hero-copy { display: grid; gap: 1.7rem; justify-items: start; }
.company-logo-wrap { margin: 0; line-height: 0; font-size: 0; }
.company-hero-copy .company-logo { max-height: 74px; max-width: min(70vw, 380px); width: auto; }
/* Los dos logos apilados (ícono arriba, palabra abajo). Con el max-height
   común de 74px rendían ~113px y ~80px de ancho, contra los ~350px de un
   wordmark horizontal: en el hero se leían como logos de otra jerarquía.
   Un alto propio les devuelve presencia sin desbordar la fila; el de Abasto
   sale de igualar su área de tinta con la de Acapuedo. */
.company-hero-copy .company-logo[src*="acapuedo"] { max-height: 112px; }
.company-hero-copy .company-logo[src*="abasto_blanco"] { max-height: 125px; }
.company-hero-copy p { color: var(--gray); max-width: 46ch; }
.company-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.12 / 1;
  max-height: 74vh;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.company-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Foco vertical del recorte. 14% por defecto: los retratos verticales del
     sitio viejo llevan las caras arriba. Las fotos donde el sujeto está al
     medio (fachadas, carteles) lo sobrescriben con --focus-y desde el
     generador; sin esto el recorte se come el edificio y deja el cielo. */
  object-position: 50% var(--focus-y, 14%);
}
.company-sphere {
  position: absolute;
  z-index: 0;
  width: min(46%, 250px);
  left: -5%;
  bottom: -2%;
  opacity: 0.9;
  will-change: transform;
}
.company-sphere-solo { width: min(76%, 420px); will-change: transform; }

.company-stats { padding-top: 0; }
.company-stats .stat-num {
  font-size: clamp(1.8rem, 3.8vw, 3.4rem);
  letter-spacing: -0.02em;
}

/* Las fichas de empresa traen 2 enlaces (anterior / siguiente) y las noticias
   3 (anterior / todas / siguiente). Con dos columnas fijas el tercero caía a
   una segunda fila y además heredaba la alineación a la derecha, que es lo que
   se veía desarmado. Las columnas se generan según cuántos enlaces haya. */
.company-nav {
  border-top: 1px solid var(--line);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.company-nav a {
  padding: 2.6rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background 0.35s ease;
}
@media (hover: hover) {
  .company-nav a:hover { background: var(--surface-hover); }
}
.company-nav a + a { border-left: 1px solid var(--line); }
/* El primero tira a la izquierda, el último a la derecha y lo del medio queda
   centrado: así los tres enlaces se leen como una sola fila. */
.company-nav a:last-child { text-align: right; align-items: flex-end; }
.company-nav a:not(:first-child):not(:last-child) { text-align: center; align-items: center; }
.company-nav .dir {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray-deep);
}
/* El titular va completo en el HTML —así coincide con el diccionario— y el
   recorte lo hace el CSS: dos líneas y puntos suspensivos, sin partir palabras
   ni depender del ancho de la columna. */
.company-nav .name {
  font-size: 1.3rem;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 760px) {
  /* Tres columnas no entran: se apilan y todo vuelve a alinearse a la izquierda */
  .company-nav { grid-auto-flow: row; }
  .company-nav a + a { border-left: 0; border-top: 1px solid var(--line); }
  .company-nav a:last-child,
  .company-nav a:not(:first-child):not(:last-child) { text-align: left; align-items: flex-start; }
}

/* ---------- Empresa: layout case study ---------- */
/* Titular editorial del hero: el tagline pasa de bajada a título */
.company-hero-copy .company-headline {
  color: var(--cream);
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* Cifras destacadas bajo el hero (las 2 primeras del JSON) */
.case-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem);
}
.case-highlight {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.case-highlight .stat-num { font-size: clamp(2.4rem, 5vw, 4.4rem); }

/* Ficha lateral fija + narrativa en una sola columna de lectura */
.company-case {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: clamp(2.4rem, 6vw, 6.5rem);
  align-items: start;
}
.case-ficha {
  position: sticky;
  top: calc(var(--header-h) + 2.4rem);
  display: grid;
  gap: 1.6rem;
}
.case-ficha dl { display: grid; border-top: 1px solid var(--line); }
.ficha-row {
  display: grid;
  gap: 0.4rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--line);
}
.ficha-row dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--gray-deep);
}
.ficha-row dd { font-size: 0.98rem; line-height: 1.4; }
.ficha-row dd a {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.1em;
  transition: border-color 0.35s ease;
}
@media (hover: hover) {
  .ficha-row dd a:hover { border-color: var(--cream); }
}
.case-copy { display: grid; gap: 2.2rem; justify-items: start; }
.company-case .about-lede-text { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.case-paras { display: grid; gap: 1.5rem; max-width: 62ch; }
.case-paras p { color: var(--gray); }

/* Fotos dentro de la columna de narrativa */
.case-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-photo img { width: 100%; height: auto; }
.case-photo figcaption {
  padding: 0.75rem 0.2rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gray-deep);
}
.case-photo-duo {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
}
.case-photo-duo .case-photo { aspect-ratio: 4 / 3; }
.case-photo-duo .case-photo img { height: 100%; object-fit: cover; }

/* Galería de renders ancla a un párrafo puntual (el master plan de Mariano,
   por ahora): 2x2 en vez de foto única, con su propio pie para el crédito. */
.case-renders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  margin: 1.8rem 0;
}
.case-renders img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.case-renders figcaption {
  grid-column: 1 / -1;
  padding-top: 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gray-deep);
}
@media (max-width: 640px) {
  .case-renders { grid-template-columns: 1fr; }
}

/* Grillas de "Datos" con menos de 4 cifras (el resto fue al hero) */
.stats-grid-1 { grid-template-columns: 1fr; }
.stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* 6 cifras: 2 filas de 3 en vez de las 4+2 desparejas de la grilla base */
.stats-grid-6 { grid-template-columns: repeat(3, 1fr); }
.stats-note {
  grid-column: 1 / -1;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--gray-deep);
  font-size: 0.78rem;
}
body.theme-light .stats-note { border-color: var(--line-dark); }

/* ---- Zona clara de las páginas de empresa: el hero queda oscuro y al
   pasarlo page.js enciende body.theme-light (mismo mecanismo que la
   línea de tiempo de la home) ---- */
body.theme-light .case-highlight {
  border-color: var(--line-dark);
  background: rgba(13, 12, 11, 0.03);
}
body.theme-light .stat-label { color: var(--ink-mid); }
body.theme-light .case-ficha dl { border-color: var(--line-dark); }
body.theme-light .ficha-row { border-color: var(--line-dark); }
body.theme-light .ficha-row dd a { border-color: var(--line-dark); }
@media (hover: hover) {
  body.theme-light .ficha-row dd a:hover { border-color: var(--ink); }
}
body.theme-light .case-paras p { color: var(--ink-mid); }
body.theme-light .about-lede-cols p { color: var(--ink-mid); }
body.theme-light .sector { border-color: var(--line-dark); }
@media (hover: hover) {
  body.theme-light .sector:hover { background: rgba(13, 12, 11, 0.04); }
}
body.theme-light .company-nav { border-color: var(--line-dark); }
body.theme-light .company-nav a + a { border-color: var(--line-dark); }
@media (hover: hover) {
  body.theme-light .company-nav a:hover { background: rgba(13, 12, 11, 0.05); }
}
/* sub-marcas: logos blancos se invierten y las cards toman fondo tinta */
body.theme-light .subbrand { background: rgba(13, 12, 11, 0.05); }
@media (hover: hover) {
  body.theme-light a.subbrand:hover { background: rgba(13, 12, 11, 0.09); }
}
body.theme-light .subbrand-logo img { filter: invert(0.92) hue-rotate(180deg); }
body.theme-light .subbrand-name { color: var(--ink-mid); }
body.theme-light .subbrand-note { color: var(--ink-mid); }

/* ==========================================================================
   Página Nosotros
   ========================================================================== */
.about-hero .page-title { max-width: none; }

/* Manifiesto */
.about-lede { max-width: 1200px; margin: 0 auto; display: grid; gap: 2.4rem; }
.about-lede-text {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.015em;
}
.about-lede-text .dim { color: var(--gold-text); }
.about-lede-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: 1.5rem;
}
.about-lede-cols p { color: var(--gray); max-width: 46ch; }
/* El cierre del manifiesto cruza las dos columnas: es la frase que enlaza
   con el claim del hero, y partida por la mitad perdía el remate. */
.about-lede-cols p.about-lede-close { grid-column: 1 / -1; max-width: 74ch; }
.about-lede-cols p.about-lede-close .dim { color: var(--gold-text); }

/* Hitos: tabla numerada */
.milestones { border-top: 1px solid var(--line); }
.milestone-head,
.milestone {
  display: grid;
  grid-template-columns: 5.5rem 8rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.milestone-head {
  font-size: 0.72rem;
  color: var(--gray-deep);
  padding: 0.9rem 0;
}
.milestone-head span:first-child { visibility: hidden; }
.milestone { transition: background 0.35s ease; }
@media (hover: hover) {
  .milestone:hover { background: var(--surface); }
}
.ms-num { font-size: 0.72rem; color: var(--gray-deep); letter-spacing: 0.06em; }
.ms-year {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ms-what { font-size: clamp(1rem, 1.5vw, 1.25rem); }
/* La empresa es la mitad del dato de cada hito, no una nota al pie:
   iba en 0.85rem y gris, y se perdía contra el año y el título. */
.ms-who { font-size: 0.95rem; color: var(--cream); text-align: right; }
body.theme-light .ms-who { color: var(--ink); }

/* Sectores */
.sectors { border-top: 1px solid var(--line); }
.sector {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease;
}
@media (hover: hover) {
  .sector:hover { background: var(--surface); }
}
.sector-name {
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: -0.015em;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .sector:hover .sector-name { transform: translateX(0.4em); }
}
.sector-qty {
  font-size: 0.78rem;
  color: var(--gray-deep);
  font-variant-numeric: tabular-nums;
}

/* ---- Acordeón de rubros (nosotros) ----
   .sector y .sectors se comparten con el listado "Del mismo sector" de las 23
   fichas, así que la variante cuelga del contenedor y no toca la clase base.
   El botón hereda la tipografía y el color para verse igual que el enlace que
   reemplaza; lo que cambia es que ahora despliega en lugar de navegar. */
.sectors-acordeon .sector-row { border-bottom: 1px solid var(--line); }
.sectors-acordeon .sector {
  width: 100%;
  border-bottom: 0;
  background: none;
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.sector-meta { display: flex; align-items: center; gap: 0.85rem; flex: none; }
/* Chevron dibujado con dos bordes: gira media vuelta al abrir */
.sector-chevron {
  width: 0.44rem;
  height: 0.44rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.5;
  transform: translateY(-0.13rem) rotate(45deg);
  transition: transform 0.45s var(--ease-out), opacity 0.35s ease;
}
.sector-row.is-open .sector-chevron {
  transform: translateY(0.06rem) rotate(-135deg);
  opacity: 0.85;
}
/* El alto lo mide y lo pone page.js al abrir y cerrar. Se prefiere a animar
   grid-template-rows de 0fr a 1fr —que ahorraría el JS— porque ese truco
   depende de un soporte más nuevo y acá no hay forma de degradar: si no
   interpola, el panel no se abre.
   El interior lleva visibility para que, plegado, sus enlaces queden fuera del
   tabulador y de los lectores de pantalla. */
.sector-panel {
  height: 0;
  overflow: hidden;
  transition: height 0.45s var(--ease-out);
}
.sector-panel-inner {
  visibility: hidden;
  transition: visibility 0.45s;
}
.sector-row.is-open .sector-panel-inner { visibility: visible; }
.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
  padding-bottom: 0.7rem;
  list-style: none;
}
.sector-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* área de toque */
  font-size: 0.95rem;
  color: var(--gray);
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .sector-list a:hover { color: var(--ink); }
  body:not(.theme-light) .sector-list a:hover { color: var(--cream); }
}
@media (prefers-reduced-motion: reduce) {
  .sector-panel, .sector-panel-inner, .sector-chevron { transition: none; }
}

/* Principios */
/* Flex en vez de grid: con cinco tarjetas la última fila queda incompleta y
   así se centra, igual que la grilla de empresas. Cambiar de columnas =
   cambiar sólo --cols. */
.principles {
  --cols: 3;
  --grid-gap: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
}
/* Los títulos se mantienen en palabras que entren en el ancho de columna: un
   ítem flex no baja de su ancho mínimo de contenido, así que una palabra muy
   larga ensancha su tarjeta y empuja a la siguiente de fila. */
.principle {
  flex: 0 0 calc((100% - var(--grid-gap) * (var(--cols) - 1)) / var(--cols));
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: 2rem 1.8rem 2.2rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pr-num { font-size: 0.72rem; color: var(--gray-deep); letter-spacing: 0.1em; }
.principle h3 { font-size: var(--size-h3); font-weight: 400; letter-spacing: -0.015em; }
.principle p { color: var(--gray); font-size: 0.95rem; }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  /* banda de newsletter: texto arriba, botones en fila debajo */
  .news-follow { grid-template-columns: 1fr; align-items: start; }

  .stat:nth-child(2) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .companies-grid { --cols: 3; }
  .principles { --cols: 1; }
  .about-lede-cols { grid-template-columns: 1fr; }
  .company-case { grid-template-columns: 1fr; }
  .case-ficha { position: static; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .header-center { position: static; transform: none; }
  .menu-toggle .menu-label { display: none; }
  .header-brand img { height: 16px; }
  .header-80 img { height: 12px; }
  .nav-overlay { align-items: stretch; overflow-y: auto; }
  .nav-overlay-grid { align-content: end; }
  .nav-links a { font-size: clamp(1.6rem, 7.5vw, 2.6rem); }
  /* En mobile el lockup se apila (adaptación responsive del logo) */
  .lockup-inner {
    width: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .lockup-azeta, .lockup-80, .lockup-spheres { position: static; }
  .lockup-azeta { width: min(200px, 56vw); }
  .lockup-80 { width: min(217px, 60vw); }
  .lockup-spheres { width: 110px; }
  .nav-overlay-grid { grid-template-columns: 1fr; }
  /* En touch el nombre es la única preview: se muestra, más compacto */
  .orb-name { font-size: 0.62rem; }
  .hero-claim h1 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); padding: 0 1.5rem; }
  .video-frame { width: 94vw; border-radius: var(--radius-md); }
  .companies-grid { --cols: 2; }
  /* En mobile la foto recortada muestra fragmentos raros: fondo sólido
     con la misma luz del dark-shell; las esferas flotantes se quedan */
  .cta-bg { display: none; }
  .cta-media {
    background:
      radial-gradient(58% 38% at 50% 0%, rgba(244, 238, 233, 0.03), transparent 55%),
      radial-gradient(130% 80% at 50% 115%, var(--veil-4), transparent 55%),
      linear-gradient(180deg, #0e0d0d, #090909 52%, #050505);
  }
  .cta-media::after { content: none; }
  .cta-copy { align-self: start; padding-bottom: 0; }
  .milestone-head { display: none; }
  .milestone {
    grid-template-columns: 3.6rem 1fr;
    row-gap: 0.35rem;
    padding: 1.1rem 0;
  }
  .milestone .ms-year { grid-column: 2; }
  .milestone .ms-what { grid-column: 2; }
  .milestone .ms-who { grid-column: 2; text-align: left; }
  /* en pantallas angostas la dupla sigue lado a lado, pero en vertical */
  .photo-duo-item { aspect-ratio: 3 / 4; }
  .company-cell { --logo-scale: 0.78; min-height: 84px; }
  .index-note { text-align: left; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .news-follow { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .news-follow-sphere { right: -60px; top: -70px; width: 170px; }
  /* en apilado, las esferas chicas se cruzan con el texto */
  .news-follow-sphere--sm, .news-follow-sphere--xs,
  .news-follow-sphere--e, .news-follow-sphere--f, .news-follow-sphere--g { display: none; }
  .sos-hero .hero-sphere--b, .sos-hero .hero-sphere--c, .sos-hero .hero-sphere--d { display: none; }
  .news-track .news-card { width: min(78vw, 320px); }
  .company-hero { grid-template-columns: 1fr; gap: 2rem; }
  .company-hero.dark-shell { min-height: 0; }
  .case-highlights { grid-template-columns: 1fr; }
  .stats-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-5, .stats-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .company-hero-visual { order: -1; }
  .company-photo { width: 100%; aspect-ratio: 4 / 3; }
  .company-sphere { width: min(40%, 160px); }
  .company-sphere-solo { width: min(52%, 240px); }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  /* En mobile el mural crece (el arte se lee más grande) y las fichas se
     estrechan: con 20 hitos el ancho por hito es lo que manda */
  .tl-mural {
    --mural-h: 46svh;
    --tl-gap: 3svh;
    --year-r: 26px;
    --item-w: calc(var(--mural-h) * 0.4);
  }
  .tl-year { font-size: 0.82rem; }
  .tl-year--split { font-size: 0.6rem; }
  .tl-title { font-size: 0.72rem; line-height: 1.2; margin-top: 0.7rem; }
  .tl-who { font-size: 0.58rem; margin-top: 0.35rem; letter-spacing: 0.03em; }
  .tl-intro, .tl-outro { width: 82vw; }
}

/* ==========================================================================
   Reduced motion: sin pins ni scrubs, todo visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .preloader, .page-transition { display: none; }
  /* .js .orb tiene especificidad (0,2,0): hay que igualarla para ganar acá */
  .home .header-brand, .home .header-80, .js .orb { opacity: 1; }
  .hero-scroll-hint::after { animation: none; }
  /* Sin pin ni scrub: el mural se recorre con scroll horizontal nativo */
  .timeline-viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}