/* ============================================================
   BSD · Landing pública
   Extiende el sistema (tokens.css). Reglas invariables que se
   respetan acá: Manrope, paleta navy/mint sin agregados,
   border-radius 0 en todo, bullets cuadrados, tabular-nums.
   Los componentes nuevos de esta página (hero de video, sección
   fijada, puertas) están marcados NUEVO: son candidatos a subir
   al sistema, no a quedarse acá. Ver README.
   ============================================================ */

:root {
  /* Escala de display: por sobre la escala de documento, solo para portada web.
     El tope lo fija la línea más larga del titular ("distribuida en Chile"),
     que tiene que entrar en dos líneas y dejar aire para bajada, botones y pie. */
  --fs-display:  clamp(2.3rem, 4.7vw, 4.2rem);
  --fs-h1-web:   clamp(2.1rem, 4.6vw, 3.6rem);

  /* Velo navy obligatorio sobre fotografía (README §10.5) */
  --veil-top:    rgba(27, 58, 82, .30);
  --veil-bottom: rgba(16, 37, 56, .93);

  --head-h: 76px;
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--head-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: var(--w-black);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1-web); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); }
p  { margin: 0; }
/* figure trae `margin: 1em 40px` del navegador: sin esto la galería abre
   separaciones de 80px donde el grid pide 2. */
figure, figcaption { margin: 0; }

:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

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

/* ── Layout ───────────────────────────────────────────────── */
.wrap {
  max-width: var(--web-max);
  margin-inline: auto;
  padding-inline: var(--web-gutter);
}
.wrap--wide { max-width: 1420px; }

.section { padding-block: var(--web-section-y); }

.grid  { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* ── Tipografía de apoyo ──────────────────────────────────── */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mint-deep);
  margin: 0 0 14px;
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--body);
  max-width: 60ch;
}
.muted { color: var(--muted); }
.rule  { width: 124px; height: var(--rule-h); background: var(--mint); }
.num   { font-variant-numeric: tabular-nums; }

ul.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.bullets li { position: relative; padding-left: 20px; }
ul.bullets li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: var(--bullet-sq); height: var(--bullet-sq); background: var(--mint-deep);
}

.section-head { margin-bottom: clamp(32px, 4.5vw, 56px); max-width: 44ch; }
.section-head h2 { margin-bottom: 16px; }

/* ── Contexto oscuro: invierte todo de una ────────────────── */
.on-dark,
.band--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.on-dark h1, .on-dark h2, .on-dark h3,
.band--navy h1, .band--navy h2, .band--navy h3 { color: #fff; }
.on-dark .eyebrow, .band--navy .eyebrow { color: var(--mint); }
.on-dark .lede, .band--navy .lede { color: rgba(255,255,255,.80); }
.on-dark .muted, .band--navy .muted { color: rgba(255,255,255,.60); }
.on-dark ul.bullets li::before,
.band--navy ul.bullets li::before { background: var(--mint); }
.band--light { background: var(--bg-light); }

/* ── Marca ────────────────────────────────────────────────── */
.brand-mark { flex: none; }
.brand-mark.sm { width: 17px; height: 19px; }
.brand-mark.md { width: 30px; height: 33px; }
.brand-mark.lg { width: 42px; height: 47px; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.wordmark {
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: 1;
  font-size: 1.28rem;
  color: var(--navy);
}
.wordmark .b { color: var(--mint-deep); }
.on-dark .wordmark, .band--navy .wordmark, .site-head .wordmark { color: #fff; }
.on-dark .wordmark .b, .band--navy .wordmark .b, .site-head .wordmark .b { color: var(--mint); }

/* ── Cabecera ─────────────────────────────────────────────── */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--head-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background .32s var(--ease), border-color .32s var(--ease);
  border-bottom: var(--hairline) solid transparent;
}
.site-head[data-solid='true'] {
  background: rgba(16, 37, 56, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.12);
}
.site-head .in {
  display: flex; align-items: center; gap: 28px; width: 100%;
  max-width: 1420px; margin-inline: auto; padding-inline: var(--web-gutter);
}
.site-head nav {
  margin-left: auto; display: flex; align-items: center; gap: 30px;
}
.site-head nav a {
  font-size: var(--fs-sm); font-weight: var(--w-semi); color: rgba(255,255,255,.80);
  padding-block: 6px; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.site-head nav a:hover,
.site-head nav a[aria-current='true'] { color: #fff; border-bottom-color: var(--mint); }

/* Ingreso al portal de clientes: es un enlace externo, así que se distingue de las
   anclas de la página con un borde completo en vez del subrayado mint del hover. */
.site-head nav .nav-ingreso {
  border: var(--hairline) solid rgba(255,255,255,.38); padding: 8px 14px; color: #fff;
}
.site-head nav .nav-ingreso:hover { border-color: var(--mint); color: var(--mint); }

/* Selector de idioma */
.lang { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.lang button {
  font: inherit; font-size: var(--fs-micro); font-weight: var(--w-bold);
  letter-spacing: var(--track-tag); text-transform: uppercase;
  background: none; border: 0; cursor: pointer; padding: 6px 7px;
  color: rgba(255,255,255,.55); transition: color .18s;
}
.lang button:hover { color: #fff; }
.lang button[aria-pressed='true'] { color: var(--mint); }
.lang .sep { color: rgba(255,255,255,.28); font-size: var(--fs-micro); }

/* Menú móvil */
.burger {
  display: none; margin-left: auto; width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer; padding: 10px 8px;
}
.burger span {
  display: block; height: 2px; background: #fff; margin-block: 4px;
  transition: transform .28s var(--ease), opacity .2s;
}
body[data-menu='open'] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body[data-menu='open'] .burger span:nth-child(2) { opacity: 0; }
body[data-menu='open'] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .burger { display: block; }
  .site-head nav {
    position: fixed; inset: var(--head-h) 0 auto; flex-direction: column;
    align-items: flex-start; gap: 0; padding: 12px var(--web-gutter) 26px;
    background: rgba(16, 37, 56, .98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: var(--hairline) solid rgba(255,255,255,.12);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .24s var(--ease), transform .24s var(--ease);
  }
  .site-head nav a { width: 100%; padding-block: 14px; font-size: 1.05rem; border-bottom: 0; }
  .site-head nav .nav-ingreso { margin-top: 10px; padding: 12px 14px; text-align: center; }
  body[data-menu='open'] .site-head nav { transform: none; opacity: 1; pointer-events: auto; }
  body[data-menu='open'] { overflow: hidden; }
  .lang { margin: 12px 0 0; }
}

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border: var(--hairline) solid transparent;
  font-size: var(--fs-sm); font-weight: var(--w-bold);
  letter-spacing: .01em; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--mint  { background: var(--mint); color: var(--navy-deep); }
.btn--mint:hover { background: #4FE3D1; }
.btn--navy  { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); }
.btn--ghost { border-color: rgba(255,255,255,.38); color: #fff; }
.btn--ghost:hover { border-color: var(--mint); color: var(--mint); }
.btn--ghost-dark { border-color: var(--border-2); color: var(--navy); }
.btn--ghost-dark:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ══ NUEVO · Hero de video ════════════════════════════════════
   Referencia Squadron/xcimer: video a sangre, velo navy, y la
   cabecera + presentación por encima en una placa traslúcida.
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: calc(var(--head-h) + 40px) clamp(48px, 7vh, 90px);
  background: var(--navy-deep);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--veil-top) 0%, rgba(20,45,66,.62) 46%, var(--veil-bottom) 100%),
    linear-gradient(94deg, rgba(16,37,56,.72) 0%, rgba(16,37,56,.10) 62%);
}
.hero .in { position: relative; width: 100%; }

.hero__plate {
  position: relative;
  max-width: min(94vw, 740px);
  border-left: var(--rule-h) solid var(--mint);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 38px);
  margin-bottom: 28px;
}
/* La placa va en un pseudo-elemento y se desvanece hacia la derecha: si el
   traslúcido termina en canto recto, se lee como un recuadro pegado encima
   de la foto y no como parte de la portada. */
.hero__plate::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(16,37,56,.50) 0%, rgba(16,37,56,.18) 62%, rgba(16,37,56,0) 100%);
  backdrop-filter: blur(2px) saturate(115%);
  -webkit-backdrop-filter: blur(2px) saturate(115%);
  -webkit-mask-image: linear-gradient(90deg, #000 48%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 48%, transparent 100%);
}
.hero__plate > * { position: relative; z-index: 1; }
.hero h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  color: #fff;
  margin: 0;
}
.hero h1 .soft {
  display: block;
  font-weight: var(--w-light);
  color: var(--mint);
}
.hero__lede {
  max-width: 54ch; font-size: var(--fs-lede); line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: 22px; margin-top: clamp(40px, 6vh, 72px);
  border-top: var(--hairline) solid rgba(255,255,255,.22);
  font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--track-tag); text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.hero__foot .sep { color: var(--mint); }

.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.66);
}
.scroll-cue i {
  display: block; width: 1px; height: 26px; background: rgba(255,255,255,.4);
  position: relative; overflow: hidden;
}
.scroll-cue i::after {
  content: ''; position: absolute; inset: 0; background: var(--mint);
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Botón de sonido/pausa del video */
.hero__vidbtn {
  position: absolute; right: var(--web-gutter); top: calc(var(--head-h) + 22px); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(16,37,56,.20); border: var(--hairline) solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.72); cursor: pointer;
  padding: 9px 14px; font: inherit; font-size: var(--fs-micro);
  font-weight: var(--w-bold); letter-spacing: var(--track-tag); text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .18s, color .18s;
}
.hero__vidbtn:hover { border-color: var(--mint); color: var(--mint); }

@media (max-width: 700px) {
  .hero { align-items: flex-end; }
  .hero__plate { max-width: none; }
  .hero__vidbtn { display: none; }
}

/* ══ NUEVO · Banda con video de fondo ════════════════════════
   Cierra la página como la abre el hero. El navy de .band--navy
   queda de respaldo: si el video no carga, la banda se ve igual.
   ═══════════════════════════════════════════════════════════ */
.band--video { position: relative; isolation: isolate; overflow: hidden; }
.band__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.band__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(16,37,56,.95) 0%, rgba(16,37,56,.86) 48%, rgba(16,37,56,.62) 100%),
    linear-gradient(180deg, rgba(27,58,82,.40) 0%, rgba(16,37,56,.72) 100%);
}

/* ── Horizonte de paneles (único decorativo del sistema) ──── */
.panel-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
          mask-image: linear-gradient(180deg, transparent, #000 85%);
}
.panel-horizon .rows { display: flex; flex-direction: column; gap: 6px; height: 100%; padding-inline: 32px; }
/* Las 64 barras por fila del sistema, dibujadas con un degradado repetido en
   vez de 64 <span>: mismo resultado, sin 256 nodos por instancia y sin
   depender de JS para que aparezca un elemento decorativo. */
.panel-horizon .row {
  height: 11px;
  --celda: calc((100% - 63 * 3px) / 64);
  background: repeating-linear-gradient(90deg,
    var(--mint) 0 var(--celda),
    transparent var(--celda) calc(var(--celda) + 3px));
}
.panel-horizon .row.r2 { transform: translateX(8px);  opacity: .85; }
.panel-horizon .row.r3 { transform: translateX(-4px); opacity: .65; }
.panel-horizon .row.r4 { transform: translateX(12px); opacity: .45; }

/* ── Cifras ───────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.stat { border-top: var(--rule-h) solid var(--mint); padding-top: 20px; }
.stat .v {
  font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: var(--w-black);
  letter-spacing: var(--track-display); line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.stat .v .unit {
  font-size: .36em; font-weight: var(--w-bold); color: var(--mint);
  margin-left: 8px; letter-spacing: 0;
}
.stat .k {
  margin-top: 12px; font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--track-tag); text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ══ NUEVO · Sección fijada (scrollytelling) ══════════════════
   Referencia xcimer: el bloque queda quieto y lo que cambia es
   el dibujo y el mensaje. Sin librería: sticky + un cálculo de
   progreso de scroll que fija data-step en el escenario.
   ═══════════════════════════════════════════════════════════ */
.scrolly { position: relative; background: var(--navy); color: rgba(255,255,255,.82); }
.scrolly__track { position: relative; }
.scrolly__stage {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.scrolly__inner {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
  width: 100%; max-width: 1420px; margin-inline: auto;
  padding-inline: var(--web-gutter);
}

/* Columna de texto: los pasos se apilan y solo uno se ve */
.scrolly__copy { position: relative; min-height: 340px; }
.scrolly__step {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.scrolly__step[data-on='true'] { opacity: 1; transform: none; pointer-events: auto; }
.scrolly__step .n {
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--mint); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.scrolly__step .n::after {
  content: ''; height: 1px; flex: 1; background: rgba(45,212,191,.32);
}
.scrolly__step h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: #fff;
  letter-spacing: var(--track-title); margin-bottom: 18px;
}
.scrolly__step p { color: rgba(255,255,255,.78); font-size: var(--fs-lede); line-height: 1.55; max-width: 46ch; }

/* Columna de dibujo */
.scrolly__art { position: relative; aspect-ratio: 4 / 3; }
.scrolly__fig {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(.985);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.scrolly__fig[data-on='true'] { opacity: 1; transform: none; }
.scrolly__fig svg { width: 100%; height: 100%; }

/* Progreso */
.scrolly__progress {
  display: flex; gap: 8px; margin-top: 34px;
  width: 100%; max-width: 1420px; margin-inline: auto;
  padding-inline: var(--web-gutter);
}
.scrolly__progress i {
  height: 2px; flex: 1; background: rgba(255,255,255,.18); position: relative; overflow: hidden;
}
.scrolly__progress i::after {
  content: ''; position: absolute; inset: 0; background: var(--mint);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.scrolly__progress i[data-done='true']::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .scrolly__inner { grid-template-columns: 1fr; gap: 28px; }
  .scrolly__art { aspect-ratio: 16 / 11; order: -1; }
  .scrolly__copy { min-height: 280px; }
}

/* ══ NUEVO · Puertas por público ══════════════════════════════
   Referencia Collective Energy: foto de fondo, texto encima,
   velo navy obligatorio (README §10.5).
   ═══════════════════════════════════════════════════════════ */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.door {
  position: relative; min-height: clamp(420px, 56vh, 620px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 3vw, 42px);
  overflow: hidden; isolation: isolate; color: #fff;
}
.door__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* Las tres fotos son aéreas con harto cielo arriba: el recorte se baja para
     que la tarjeta muestre la planta y no la bruma. */
  object-position: center 62%;
  transition: transform 1.1s var(--ease);
}
.door:hover .door__bg { transform: scale(1.055); }
.door::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--veil-top) 0%, rgba(18,41,60,.72) 52%, var(--veil-bottom) 100%);
  transition: background .35s var(--ease);
}
.door:hover::before {
  background: linear-gradient(180deg, rgba(27,58,82,.42) 0%, rgba(18,41,60,.80) 52%, rgba(13,125,112,.90) 100%);
}
.door .k {
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--mint); margin-bottom: 14px;
}
.door h3 { color: #fff; font-size: clamp(1.4rem, 2.1vw, 1.9rem); margin-bottom: 14px; }
.door p  { color: rgba(255,255,255,.84); font-size: var(--fs-sm); line-height: 1.55; }
.door .go {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: var(--w-bold); color: #fff;
  border-bottom: 2px solid var(--mint); padding-bottom: 5px; align-self: flex-start;
}
.door .go .arr { transition: transform .2s var(--ease); }
.door:hover .go .arr { transform: translateX(5px); }

@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }

/* ── Bloque a sangre con foto ─────────────────────────────── */
.bleed {
  position: relative; isolation: isolate; color: #fff;
  padding-block: clamp(72px, 11vw, 150px);
  overflow: hidden;
}
.bleed__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Velo direccional: cierra donde va el texto y abre donde no, para que la foto
   se vea. Un velo parejo al 80% deja la fotografía en negro y sobra ponerla. */
.bleed::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(16,37,56,.94) 0%, rgba(16,37,56,.80) 44%, rgba(16,37,56,.46) 100%),
    linear-gradient(180deg, rgba(27,58,82,.30) 0%, rgba(16,37,56,.55) 100%);
}
.bleed h2 { color: #fff; }
.bleed .lede { color: rgba(255,255,255,.82); }

/* ── Galería de plantas ───────────────────────────────────── */
.plants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.plant { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.plant img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.plant:hover img { transform: scale(1.05); }
.plant figcaption {
  position: absolute; inset: auto 0 0; padding: 18px 20px;
  background: linear-gradient(180deg, transparent, rgba(16,37,56,.88));
  color: #fff;
}
.plant .nm { font-weight: var(--w-bold); font-size: 1.02rem; letter-spacing: -.01em; }
.plant .mt {
  font-size: var(--fs-micro); font-weight: var(--w-semi);
  letter-spacing: var(--track-tag); text-transform: uppercase;
  color: var(--mint); margin-top: 4px; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .plants { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plants { grid-template-columns: 1fr; } }

/* ── Tarjetas de capacidad (sección IA) ───────────────────── */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.14); }
.cap { background: var(--navy); padding: clamp(24px, 2.6vw, 34px); }
.cap .ic { color: var(--mint); margin-bottom: 18px; }
.cap h3 { color: #fff; font-size: 1.1rem; margin-bottom: 10px; }
.cap p  { color: rgba(255,255,255,.72); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 860px) { .caps { grid-template-columns: 1fr; } }

/* ── Clientes ─────────────────────────────────────────────── */
/* Nombres, no logotipos: usar la marca de un cliente en material propio
   necesita su autorización, y no tenemos los archivos. */
.clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); }
.client {
  background: #fff; padding: clamp(34px, 4vw, 56px) clamp(24px, 3vw, 44px);
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(150px, 15vw, 196px);
}
/* Caja de alto fijo con `contain`: las marcas van de 5,7:1 (Santander) a 1,1:1
   (McDonald's). Cada una crece hasta donde le da su proporción dentro de la misma
   caja, así ninguna domina por ser más ancha ni desaparece por ser cuadrada. */
.client img {
  width: 100%; max-width: 320px; height: clamp(52px, 5.5vw, 76px);
  object-fit: contain; object-position: center;
}
/* Corrección óptica: una marca cuadrada a la misma altura que una de 5:1 se lee
   más chica, porque ocupa mucha menos superficie. Sube un escalón. */
.client img.cuadrada { height: clamp(72px, 7.6vw, 104px); }
@media (max-width: 560px) {
  .clients { grid-template-columns: 1fr; }
  .client { min-height: 128px; }
}

/* ── Equipo ───────────────────────────────────────────────── */
.team {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: var(--hairline) solid var(--border);
}
.person { background: #fff; padding: 26px 22px; display: flex; flex-direction: column; }
.person .nm { font-weight: var(--w-bold); color: var(--navy); letter-spacing: -.012em; }
.person .rl {
  font-size: var(--fs-micro); font-weight: var(--w-semi); letter-spacing: var(--track-tag);
  text-transform: uppercase; color: var(--mint-deep); margin-top: 5px;
}
.person a { display: block; margin-top: auto; padding-top: 14px; font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }
.person a:hover { color: var(--navy); }

/* Perfil desplegable: <details> nativo, así abre sin JS y el teclado lo alcanza solo. */
.person .bio { margin-top: 14px; }
.person .bio > summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-micro); font-weight: var(--w-bold);
  letter-spacing: var(--track-tag); text-transform: uppercase;
  color: var(--mint-deep); display: inline-flex; align-items: center; gap: 7px;
  padding-block: 4px;
}
.person .bio > summary::-webkit-details-marker { display: none; }
.person .bio > summary::after {
  content: '+'; font-size: 1.05em; line-height: 1; color: var(--mint-deep);
}
.person .bio[open] > summary::after { content: '–'; }
.person .bio > summary:hover { color: var(--navy); }
.person .bio p {
  margin-top: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--body);
  border-left: 2px solid var(--border-2); padding-left: 12px;
}

/* Tarjeta que cierra la grilla del equipo */
.person--cta {
  background: var(--navy); color: #fff; justify-content: center; gap: 8px;
  transition: background .2s var(--ease);
}
.person--cta:hover { background: var(--navy-deep); }
.person--cta .nm { color: #fff; font-size: 1.15rem; }
.person--cta .go { font-size: var(--fs-sm); color: rgba(255,255,255,.72); line-height: 1.45; }
.person--cta .arr { color: var(--mint); margin-top: 6px; transition: transform .2s var(--ease); }
.person--cta:hover .arr { transform: translateX(5px); }

@media (max-width: 1000px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .team { grid-template-columns: 1fr; } }

/* ── Equivalencias de CO₂ ─────────────────────────────────── */
.equiv { margin-top: clamp(38px, 4.5vw, 62px); max-width: 860px; }
.equiv__t {
  font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--track-tag); text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 20px;
}
.equiv__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 44px); }
.equiv__i { display: flex; align-items: flex-start; gap: 16px; color: var(--mint); }
.equiv__i svg { width: 32px; height: 32px; flex: none; margin-top: 2px; }
.equiv__i .v {
  display: block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: var(--w-black);
  letter-spacing: var(--track-title); color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.equiv__i .k { display: block; margin-top: 5px; font-size: var(--fs-sm); color: rgba(255,255,255,.76); }
.equiv__nota {
  margin-top: 26px; padding-top: 16px;
  border-top: var(--hairline) solid rgba(255,255,255,.16);
  font-size: var(--fs-micro); line-height: 1.6; color: rgba(255,255,255,.52); max-width: 72ch;
}
@media (max-width: 620px) { .equiv__row { grid-template-columns: 1fr; } }

/* ── Contacto ─────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-line { display: grid; gap: 4px; margin-bottom: 26px; }
.contact-line .k {
  font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--mint);
}
.contact-line .v { font-size: 1.06rem; color: #fff; font-weight: var(--w-medium); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── Pie ──────────────────────────────────────────────────── */
.site-foot { background: var(--navy-deep); color: rgba(255,255,255,.62); padding-block: 56px 30px; position: relative; }
.site-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.site-foot h4 {
  color: rgba(255,255,255,.55); font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--track-tag); text-transform: uppercase; margin-bottom: 14px;
}
.site-foot a:hover { color: var(--mint); }
.site-foot .links { display: grid; gap: 9px; font-size: var(--fs-sm); }
/* Enlace que sale del sitio: se separa de los anclas internos con una hairline
   para que no se lea como una sección más de esta misma página. */
.site-foot .links .fuera {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 7px; padding-top: 14px;
  border-top: var(--hairline) solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
}
.site-foot .links .fuera .arr { font-size: .85em; color: var(--mint); }
.site-foot .legal {
  margin-top: 44px; padding-top: 20px; border-top: var(--hairline) solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--fs-micro); letter-spacing: .04em; color: rgba(255,255,255,.44);
}
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr; gap: 30px; } }

/* ── Aparición al entrar en pantalla ──────────────────────── */
/* Solo se esconde si el JS llegó a marcar el documento: el contenido no puede
   depender de que corra un script. */
.js .rv { opacity: 0; transform: translateY(16px); }
/* El selector tiene que ganarle a `.js .rv`: con `.rv-on` a secas pierde por
   especificidad y el contenido no vuelve a aparecer nunca. */
.js .rv.rv-on,
.rv-on { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* ── Responsive general ───────────────────────────────────── */
@media (max-width: 900px) {
  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Menos movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  /* La sección fijada deja de fijarse: los pasos se leen apilados */
  .scrolly__stage { position: static; height: auto; padding-block: var(--web-section-y); }
  .scrolly__copy  { min-height: 0; display: grid; gap: 48px; }
  .scrolly__step  { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .scrolly__art   { display: none; }
  .scrolly__track { height: auto !important; }
}

/* ── Impresión ────────────────────────────────────────────── */
@media print {
  .site-head, .hero__media, .hero__vidbtn, .scroll-cue { display: none; }
  .hero { min-height: 0; }
  body { color: #000; }
}