/* ==========================================================================
   BCP — Páginas internas (capa sobre styles.css, design.md v1.0)
   Reutiliza el vocabulario del Home: .section, .container, .eyebrow,
   .h-monumental, .display, .frame, .frame__tag, .reveal, .line-mask,
   .btn, .link-arrow, .ghost-num, .vlabel, .pilares, .cifra, .cta, .filete.
   Aquí solo viven los patrones que el Home no tiene.
   ========================================================================== */

/* Ítem activo del mapa en el header */
.header__link.is-current { color: var(--oro); }
.header__nav a.is-current { color: var(--oro); }

/* --------------------------------------------------------------------------
   Hero interno: fotografía a sangre + titular abajo a la izquierda
   (misma altura de tratamiento que el Home, menor altura: 78vh)
   -------------------------------------------------------------------------- */
.hero--interno {
  height: 86vh;
  height: 86svh;
  min-height: 640px;
  max-height: 900px;
}
.hero--interno .hero__layer { top: -14%; height: 128%; object-position: center 72%; }
.hero--interno .hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.15) 60%, rgba(10, 10, 10, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.75) 100%);
  z-index: 2;
  pointer-events: none;
}
.hero--interno .hero__title {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 0;
  text-align: left;
  z-index: 3;
}
/* Una sola columna: eyebrow → titular (máx. 2–3 líneas) → subtítulo. El bloque
   debe despejar el header (146 px) con aire en 1366×768 — se verifica midiendo. */
.hero--interno .hero__title-inner { padding-bottom: 80px; }
.hero--interno .eyebrow { margin-bottom: 20px; color: var(--oro); text-shadow: none; }
.hero--interno .display { font-size: clamp(44px, 5.2vw, 76px); max-width: 900px; }
.hero--interno .hero__sub { max-width: 640px; font-size: 18px; margin-top: 28px; }
.hero--interno .hero__bottom { padding-bottom: 24px; }

/* --------------------------------------------------------------------------
   01 · Ficha corporativa (respiro claro) — KYC en 30 segundos
   -------------------------------------------------------------------------- */
.ficha__grid {
  display: grid;
  grid-template-columns: 56% 36%;
  justify-content: space-between;
  align-items: start;
  z-index: 1;
}
.ficha__intro { max-width: 640px; margin-bottom: 44px; }
.ficha__intro .lead { color: var(--negro); font-weight: 500; margin-top: 28px; }
.ficha__rows { list-style: none; border-top: 1px solid var(--borde-calido); }
.ficha__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borde-calido);
  align-items: baseline;
}
.ficha__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-oscuro);
}
.ficha__value { font-size: 16px; color: var(--negro); line-height: 1.55; }
.ficha__value small { display: block; font-size: 14px; color: var(--gris-texto); }
.ficha__flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--oro-oscuro);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-oscuro);
  vertical-align: middle;
}
.ficha__nota {
  margin-top: 28px;
  padding-left: 24px;
  border-left: 2px solid var(--oro-oscuro);
  color: var(--gris-texto);
  max-width: 560px;
}
.ficha__media { height: 560px; margin-top: 96px; }
.ficha__media--tall { height: 640px; }
.ficha__media img { object-position: 96% 55%; }

/* --------------------------------------------------------------------------
   02 · Plataforma empresarial — un solo interlocutor
   -------------------------------------------------------------------------- */
.plataforma { padding-bottom: 180px; }
.plataforma__head { margin-bottom: 64px; max-width: 820px; }
.plataforma__grid {
  display: grid;
  grid-template-columns: 46% 46%;
  justify-content: space-between;
  align-items: start;
}
.plataforma__text > p { margin-bottom: 22px; max-width: 520px; }
.plataforma__media { height: 560px; margin-top: 24px; }
.plataforma__media--invade {
  width: 88%;
  margin-left: auto;
  margin-bottom: -120px; /* invade la trayectoria */
  z-index: 3;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
}
.beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--borde-oscuro);
}
.beneficio__label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 8px;
}
.beneficio p { font-size: 14px; color: rgba(255, 255, 255, 0.62); line-height: 1.6; }
.plataforma__text .link-arrow { margin-top: 40px; }

/* --------------------------------------------------------------------------
   03 · Trayectoria 2020 → 2026 — hitos con año monumental
   -------------------------------------------------------------------------- */
.trayectoria { padding-top: 200px; }
.trayectoria__head {
  display: grid;
  grid-template-columns: 54% 34%;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 72px;
}
.trayectoria__head > p { max-width: 380px; color: rgba(255, 255, 255, 0.62); }
.hitos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--borde-oscuro);
}
.hito {
  position: relative;
  padding: 40px 40px 8px 0;
}
.hito + .hito { padding-left: 40px; border-left: 1px solid var(--borde-oscuro); }
.hito__bar {
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--degradado-oro);
  transform: scaleX(0);
  transform-origin: left;
}
.hito + .hito .hito__bar { left: 40px; }
.hito__idx {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--oro);
  margin-bottom: 18px;
}
.hito__year {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--blanco);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.hito__year small { font-size: 0.5em; color: rgba(255, 255, 255, 0.35); font-weight: 700; letter-spacing: 0; }
.hito h3 { font-size: 20px; margin-bottom: 12px; }
.hito p { font-size: 15px; color: rgba(255, 255, 255, 0.62); line-height: 1.65; }
.trayectoria__media { height: 420px; margin-top: 88px; width: 58%; }

/* --------------------------------------------------------------------------
   04 · Respaldo del grupo (respiro claro) — 15+ años, 4 compañías
   -------------------------------------------------------------------------- */
.respaldo__grid {
  display: grid;
  grid-template-columns: 38% 54%;
  justify-content: space-between;
  align-items: start;
}
.respaldo__left .lead { color: var(--negro); font-weight: 500; margin: 28px 0 40px; }
.respaldo__left .cifra { margin-bottom: 48px; }
.respaldo__media { height: 360px; }
.grupo { list-style: none; border-top: 1px solid var(--borde-calido); margin-top: 16px; }
.grupo__row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--borde-calido);
}
.grupo__idx { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro-oscuro); }
.grupo__name { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--negro); text-transform: uppercase; letter-spacing: -0.005em; }
.grupo__desc { display: block; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--gris-texto); text-transform: none; letter-spacing: 0; margin-top: 6px; }
.grupo__years { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--negro); white-space: nowrap; }
.grupo__years em { font-style: normal; color: var(--oro-oscuro); }

/* --------------------------------------------------------------------------
   05 · Dirección y forma de operar
   -------------------------------------------------------------------------- */
.direccion__grid {
  display: grid;
  grid-template-columns: 40% 50%;
  justify-content: space-between;
  align-items: start;
}
.direccion__head { margin-bottom: 64px; max-width: 760px; }
.directivos { list-style: none; border-top: 1px solid var(--borde-oscuro); margin-bottom: 40px; }
.directivo {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--borde-oscuro);
  align-items: baseline;
}
.directivo__idx { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro); }
.directivo__name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--blanco); }
.directivo__role { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }
.direccion__media { height: 320px; }
.direccion__right .direccion__media { margin-top: 48px; }
.direccion__right > p { margin-bottom: 8px; max-width: 520px; }
.direccion__right .pilares { margin-top: 28px; }
/* Variante clara (ajustes del cliente, 14-oct-2026): "Estructura y cumplimiento" pasa a fondo
   claro al retirarse "Compañías del grupo". Todo va en el modificador (regla de capa compartida). */
.direccion--claro .directivos { border-top-color: var(--borde-calido); }
.direccion--claro .directivo { border-bottom-color: var(--borde-calido); }
.direccion--claro .directivo__idx, .direccion--claro .pilar__num { color: var(--oro-oscuro); }
.direccion--claro .directivo__name { color: var(--negro); }
.direccion--claro .directivo__role, .direccion--claro .pilares p { color: var(--gris-texto); }
.direccion--claro .pilares li { border-bottom-color: var(--borde-calido); }
.direccion--claro .pilares li:first-child { border-top-color: var(--borde-calido); }

/* --------------------------------------------------------------------------
   CTA de dos puertas (interna)
   -------------------------------------------------------------------------- */
.cta--interna .cta__sub { max-width: 560px; }
.cta__puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 40px; margin-top: 12px; }
.puerta { padding-top: 22px; border-top: 1px solid var(--borde-oscuro); }
.puerta__label { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.puerta p { font-size: 15px; color: rgba(255, 255, 255, 0.62); margin-bottom: 22px; min-height: 48px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero--interno .hero__title-inner { padding-bottom: 72px; }
  .ficha__grid, .plataforma__grid, .trayectoria__head, .respaldo__grid, .direccion__grid { grid-template-columns: 1fr; }
  .ficha__media { margin-top: 48px; height: 420px; }
  .ficha__media--tall { height: 460px; }
  .plataforma { padding-bottom: 140px; }
  .plataforma__media--invade { width: 100%; margin-bottom: -100px; }
  .trayectoria { padding-top: 180px; }
  .trayectoria__head { gap: 24px; margin-bottom: 48px; }
  .hitos { grid-template-columns: 1fr; border-top: 0; }
  .hito { padding: 32px 0 28px; border-top: 1px solid var(--borde-oscuro); }
  .hito + .hito { padding-left: 0; border-left: 0; }
  .hito + .hito .hito__bar { left: 0; }
  .trayectoria__media { width: 100%; height: 340px; margin-top: 56px; }
  .respaldo__media { margin-bottom: 40px; }
  .cta__puertas { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .hero--interno { min-height: 560px; }
  .hero--interno .hero__title-inner { padding-bottom: 64px; }
  .hero--interno .display { font-size: clamp(36px, 10vw, 48px); }
  .hero--interno .hero__sub { font-size: 16px; margin-top: 20px; }
  .ficha__row { grid-template-columns: 1fr; gap: 6px; }
  .beneficios { grid-template-columns: 1fr; gap: 20px; }
  .grupo__row { grid-template-columns: 56px 1fr; }
  .grupo__years { grid-column: 2; }
  .ficha__media, .ficha__media--tall { height: 320px; }
  .plataforma__media, .trayectoria__media, .respaldo__media, .direccion__media { height: 280px; }
}

/* ==========================================================================
   NUESTRO CARBÓN v0.2 — concepto "El espécimen" (contenidos/nuestro-carbon-premium.md)
   Patrones propios de la página de producto. Nada de esto se reutiliza en otras páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero · El espécimen: producto anotado. 100vh (momento crítico de la página).
   Escenario con la relación 3:2 de la fotografía, alineado a la derecha; las
   llamadas de medición se posicionan en % del escenario (= % de la imagen).
   -------------------------------------------------------------------------- */
.hero--especimen {
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  max-height: 980px;
  background: var(--negro-abismo);
}
.especimen__stage {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 3 / 2;
  z-index: 1;
  will-change: transform;
}
.especimen__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.especimen__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--negro-abismo) 0%, rgba(10, 10, 10, 0.72) 20%, rgba(10, 10, 10, 0) 46%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0) 26%, rgba(10, 10, 10, 0) 72%, var(--negro-abismo) 100%);
  pointer-events: none;
}
.hero--especimen .hero__title {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: left;
  padding: 0;
  z-index: 3;
}
.hero--especimen .hero__title-inner { width: 100%; padding-bottom: 0; padding-top: 64px; }
.hero--especimen .display { font-size: clamp(48px, 6vw, 88px); max-width: 640px; }
@media (min-width: 1101px) and (max-height: 800px) {
  .hero--especimen .display { font-size: clamp(44px, 5.4vw, 74px); }
  .hero--especimen .hero__sub { margin-top: 20px; }
  .hero--especimen .hero__ctas { margin-top: 28px; }
}
.hero--especimen .hero__sub { max-width: 460px; font-size: 18px; margin-top: 28px; }
.hero--especimen .hero__ctas { margin-top: 36px; align-items: center; gap: 36px; }
.hero--especimen .hero__bottom { padding-bottom: 28px; z-index: 4; }

/* Llamadas de medición */
.medidas {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 3 / 2; /* misma caja que el escenario */
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}
.medida { position: absolute; width: 0; height: 0; opacity: 0; }
.medida--1 { left: 56%; top: 34%; --l: 44px; }
.medida--2 { left: 89%; top: 44%; --l: 44px; }
.medida--3 { left: 79%; top: 79%; --l: 52px; }
.medida__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 6px rgba(217, 165, 20, 0.18);
}
.medida__line { position: absolute; left: 0; width: 1px; height: var(--l); }
.medida--up .medida__line { bottom: 0; background: linear-gradient(0deg, var(--oro), rgba(217, 165, 20, 0.25)); transform-origin: bottom; }
.medida--down .medida__line { top: 0; background: linear-gradient(180deg, var(--oro), rgba(217, 165, 20, 0.25)); transform-origin: top; }
.medida__label { position: absolute; left: 0; white-space: nowrap; display: flex; flex-direction: column; gap: 4px; max-width: none; }
.medida--up .medida__label { bottom: calc(var(--l) + 12px); }
.medida--down .medida__label { top: calc(var(--l) + 12px); }
.medida--r .medida__label { left: auto; right: 0; align-items: flex-end; text-align: right; }
.medida--2 .medida__label { left: 0; right: auto; align-items: flex-start; text-align: left; }
.medida__label b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanco);
}
.medida__label span {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Hero · VARIANTE B "La pila" (nuestro-carbon-b.html): macro documental a sangre,
   titular abajo a la izquierda y banda de lote con los tres parámetros.
   -------------------------------------------------------------------------- */
.hero--pila { height: 100vh; height: 100svh; min-height: 680px; max-height: 980px; }
.hero--pila .hero__layer { top: -10%; height: 120%; object-position: center 55%; }
.hero--pila .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.2) 55%, rgba(10, 10, 10, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.1) 40%, rgba(10, 10, 10, 0.85) 100%);
}
.hero--pila .hero__title-inner { padding-bottom: 168px; }
.hero--pila .display { font-size: clamp(44px, 5.6vw, 84px); max-width: 900px; }
.hero--pila .hero__sub { max-width: 560px; }
.hero--pila .hero__ctas { margin-top: 32px; align-items: center; gap: 36px; }
.hero--pila .hero__bottom { padding-bottom: 24px; }
.hero--pila .hero__bottom-inner { flex-direction: column; align-items: stretch; gap: 22px; }
.hero__bottom-row { display: flex; justify-content: space-between; align-items: center; }
.lote {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  display: flex;
  gap: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.lote li { display: flex; flex-direction: column; gap: 4px; }
.lote b { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanco); }
.lote span { font-size: 13px; color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
@media (max-width: 1100px) {
  .hero--pila .hero__title-inner { padding-bottom: 150px; }
  .lote { gap: 24px 36px; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .hero--pila .hero__title-inner { padding-bottom: 170px; }
  .hero--pila .display { font-size: clamp(36px, 10vw, 48px); }
  .lote { gap: 12px 24px; }
  .lote b, .lote span { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   01 · Parámetros de calidad — hoja de análisis: columna fija + tabla indexable
   -------------------------------------------------------------------------- */
.specs__layout {
  display: grid;
  grid-template-columns: 29% 67%; /* 34/60 → 29/67: la tabla suma la columna "Análisis de referencia" */
  justify-content: space-between;
  align-items: start;
}
.specs__aside { position: sticky; top: 140px; }
.specs__aside .h-monumental { font-size: clamp(32px, 3.2vw, 46px); }
.specs__aside .lead { margin-top: 28px; color: var(--negro); font-weight: 500; font-size: 18px; }
.specs__legend {
  margin-top: 24px;
  padding-left: 20px;
  border-left: 2px solid var(--oro-oscuro);
  font-size: 14px;
  color: var(--gris-texto);
}
.specs__aside .btn { margin-top: 40px; }
.specs { width: 100%; border-collapse: collapse; border-top: 2px solid var(--negro); }
.specs th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-oscuro);
  padding: 18px 20px 16px 0;
  border-bottom: 1px solid var(--negro);
}
.specs td {
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid var(--borde-calido);
  font-size: 15px;
  color: var(--gris-texto);
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease;
}
/* Sangría francesa: el índice ocupa los 44 px de la sangría negativa y el nombre del
   parámetro alinea a 44 px, así la segunda línea arranca bajo la primera palabra y no
   bajo el número (Freddy, 15-sep-2026). No se puede usar flex/grid: el <td> perdería
   `display: table-cell` y con él la alineación de columnas entre filas. */
.specs td:first-child { width: 31%; color: var(--negro); padding-left: 44px; text-indent: -44px; }
.specs td:nth-child(2) { width: 9%; font-family: var(--font-display); font-weight: 600; color: var(--negro); }
.specs td:nth-child(3) { width: 17%; }
.specs td:nth-child(5) { white-space: nowrap; }
/* Análisis de referencia (certificado entregado por BCP, 7-oct-2026): valor ar y db apilados;
   las filas sin dato remiten a la ficha técnica actualizada. */
.specs td.specs__val { width: 16%; font-family: var(--font-display); font-weight: 700; color: var(--negro); }
.specs__val span { display: block; white-space: nowrap; }
.specs__val small { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--gris-texto); }
.specs td.specs__val--ficha { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--gris-texto); }
.specs td b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--negro); }
.specs__idx {
  display: inline-block;
  width: 44px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--oro-oscuro);
}
.specs tbody tr:hover td { background-color: rgba(217, 165, 20, 0.07); }

/* --------------------------------------------------------------------------
   02 · Cadena de custodia — riel fijo que se dibuja con el scroll + estaciones
   -------------------------------------------------------------------------- */
.custodia__head {
  display: grid;
  grid-template-columns: 58% 32%;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 96px;
}
.custodia__head > p { color: rgba(255, 255, 255, 0.62); max-width: 380px; }
.custodia__grid {
  display: grid;
  grid-template-columns: 20% 72%;
  justify-content: space-between;
  align-items: start;
}
.custodia__rail { position: sticky; top: 160px; }
.rail { position: relative; padding-left: 30px; }
.rail__track { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--borde-oscuro); }
.rail__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--oro-luminoso), var(--oro));
  transform: scaleY(0);
  transform-origin: top;
}
.rail__steps { list-style: none; display: flex; flex-direction: column; gap: 40px; margin: 0; padding: 0; }
.rail__step {
  position: relative;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  transition: color 300ms ease;
}
.rail__step::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--negro);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.rail__step small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.38);
  transition: color 300ms ease;
}
.rail__step.is-done { color: rgba(255, 255, 255, 0.6); }
.rail__step.is-done::before { background: var(--oro-oscuro); border-color: var(--oro-oscuro); }
.rail__step.is-active { color: var(--blanco); }
.rail__step.is-active small { color: var(--oro); }
.rail__step.is-active::before { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 0 5px rgba(217, 165, 20, 0.18); }

.estaciones { list-style: none; margin: 0; padding: 0; }
.estacion {
  display: grid;
  grid-template-columns: 56% 36%;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 128px;
}
.estacion:last-child { padding-bottom: 0; }
.estacion:nth-child(even) { grid-template-columns: 36% 56%; }
.estacion:nth-child(even) .estacion__media { order: 2; }
.estacion__media { height: 440px; }
.estacion:first-child .estacion__media img { object-position: center 78%; }
.estacion__idx {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--oro);
  margin-bottom: 18px;
}
.estacion h3 { font-size: 26px; margin-bottom: 14px; }
.estacion p { font-size: 16px; color: rgba(255, 255, 255, 0.62); line-height: 1.65; max-width: 400px; }

/* --------------------------------------------------------------------------
   03 · Industrias atendidas — respiro: fotografía a sangre + cuatro líneas
   -------------------------------------------------------------------------- */
.industrias-break {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--negro-abismo);
  padding: 160px 0;
}
.break__bg { position: absolute; inset: -10% 0; z-index: 0; }
.break__bg::after { display: none; }
.break__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.72) 42%, rgba(10, 10, 10, 0.12) 100%),
    linear-gradient(180deg, var(--negro) 0%, rgba(17, 17, 17, 0) 22%, rgba(17, 17, 17, 0) 78%, var(--negro) 100%);
  pointer-events: none;
}
.break__content { z-index: 2; }
.industrias { list-style: none; margin: 0; padding: 0; max-width: 720px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.industrias li { padding: 28px 0 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.industrias h3 {
  font-size: clamp(26px, 2.7vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--blanco);
}
.industrias p { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, 0.66); max-width: 540px; }

/* --------------------------------------------------------------------------
   04 · Suministro y logística — ficha de despacho; el puerto invade el bloque 05
   -------------------------------------------------------------------------- */
.suministro__grid {
  display: grid;
  grid-template-columns: 58% 34%;
  justify-content: space-between;
  align-items: start;
  z-index: 2;
}
.suministro__formula {
  margin-top: 36px;
  max-width: 700px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--negro);
}
.despacho { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin: 56px 0 0; }
.despacho__item { padding: 22px 0 26px; border-top: 1px solid var(--negro); }
.despacho dt {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-oscuro);
}
.despacho dd { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--negro); }
.suministro__text .link-arrow { margin-top: 44px; }
.suministro__media img { position: absolute; inset: -8% 0; height: 116%; object-position: center 72%; }
.suministro__media {
  height: auto;
  min-height: 640px;
  align-self: stretch;
  margin-bottom: -280px; /* invade la solicitud */
  z-index: 3;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   05 · Solicitud — formulario en composición libre (sin tarjeta)
   -------------------------------------------------------------------------- */
.solicitud { padding-top: 320px; }
.solicitud__grid {
  display: grid;
  grid-template-columns: 38% 56%;
  justify-content: space-between;
  align-items: start;
}
.solicitud__text .h-monumental { font-size: clamp(36px, 3.4vw, 50px); }
.solicitud__text > p { margin-top: 24px; max-width: 400px; color: rgba(255, 255, 255, 0.7); }
.solicitud__text > p:first-of-type { margin-top: 32px; }
.form { margin: 0; }
.form__tipo {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin: 0 0 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--borde-oscuro);
}
.form__tipo legend { float: left; padding: 0; margin-right: 8px; padding-bottom: 16px; }
.form__tipo label { position: relative; padding: 0 0 16px; cursor: pointer; }
.form__tipo input { position: absolute; opacity: 0; width: 0; height: 0; }
.form__tipo span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 200ms ease;
}
.form__tipo span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
}
.form__tipo input:checked + span { color: var(--blanco); }
.form__tipo input:checked + span::after { transform: scaleX(1); }
.form__tipo input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 4px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.form__field { display: flex; flex-direction: column; gap: 10px; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}
.form__input {
  height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 17px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: rgba(255, 255, 255, 0.32); }
.form__input:focus { border-bottom-color: var(--oro); box-shadow: 0 1px 0 var(--oro); }
select.form__input {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23D9A514' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
select.form__input option { color: var(--negro); }
.form__input--area { height: auto; min-height: 72px; padding: 12px 0 10px; resize: vertical; line-height: 1.5; }
.form__foot { display: flex; align-items: center; gap: 28px; margin-top: 48px; flex-wrap: wrap; }
.form__foot .btn { border: 0; cursor: pointer; }
.form__nota { font-size: 14px; color: rgba(255, 255, 255, 0.5); }
/* Autorización de tratamiento de datos (Ley 1581, 28-oct-2026): réplica del vestido que
   bcp-forms.css da a la casilla de JetFormBuilder. Clase propia `form__autoriza`: el input
   de WP ya lleva `form__consent` y esta capa también se carga en WordPress. */
.form__autoriza { grid-column: 1 / -1; display: block; position: relative; cursor: pointer; }
.form__autoriza input { position: absolute; z-index: -1; opacity: 0; width: 1px; height: 1px; margin: 0; }
.form__autoriza span { display: block; position: relative; padding-left: 32px; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.form__autoriza span::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 2px;
  background: transparent no-repeat center / 11px 11px; transition: background-color 150ms ease, border-color 150ms ease;
}
.form__autoriza input:checked + span::before {
  border-color: var(--oro); background-color: var(--oro);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23111111' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.form__autoriza input:not(:checked):hover + span::before { border-color: var(--oro); }
.form__autoriza input:focus-visible + span::before { outline: 2px solid var(--oro); outline-offset: 3px; }
.form__autoriza a { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 3px; }
.form__autoriza a:hover { color: var(--oro); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero--especimen { min-height: 100svh; max-height: none; }
  .especimen__stage { top: auto; bottom: 0; height: 50%; right: -8%; }
  .especimen__vignette {
    background:
      linear-gradient(180deg, var(--negro-abismo) 0%, rgba(10, 10, 10, 0.55) 26%, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, 0) 78%, var(--negro-abismo) 100%),
      linear-gradient(90deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 40%);
  }
  .hero--especimen .hero__title { justify-content: flex-start; }
  .hero--especimen .hero__title-inner { padding-top: 168px; }
  .hero--especimen .hero__sub { margin-top: 20px; }
  .hero--especimen .hero__ctas { margin-top: 28px; gap: 20px 32px; }
  /* Las llamadas pasan a lista estática sobre el pie del hero */
  .medidas { inset: auto 24px 84px 24px; height: auto; aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 10px 28px; }
  .medida { position: static; width: auto; height: auto; opacity: 1; }
  .medida__dot, .medida__line { display: none; }
  .medida__label { position: static; }
  .medida--r .medida__label { align-items: flex-start; text-align: left; }

  .specs__layout { grid-template-columns: 1fr; }
  .specs__aside { position: static; margin-bottom: 48px; }

  .custodia__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
  .custodia__grid { grid-template-columns: 1fr; }
  .custodia__rail { position: static; margin-bottom: 48px; }
  .rail { padding-left: 0; }
  .rail__track { display: none; }
  .rail__steps { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
  .rail__step::before { position: static; display: inline-block; margin-right: 10px; vertical-align: middle; }
  .estacion, .estacion:nth-child(even) { grid-template-columns: 1fr; gap: 28px; padding-bottom: 80px; }
  .estacion:nth-child(even) .estacion__media { order: 0; }
  .estacion__media { height: 360px; }

  .industrias-break { min-height: 0; padding: 120px 0; }

  .suministro__grid { grid-template-columns: 1fr; }
  .despacho { grid-template-columns: 1fr 1fr; }
  .suministro__media { height: 420px; min-height: 0; align-self: auto; margin: 48px 0 0; }
  .solicitud { padding-top: var(--pad-section); }
  .solicitud__grid { grid-template-columns: 1fr; }
  .form { margin-top: 48px; }
}
@media (max-width: 760px) {
  .hero--especimen { min-height: 760px; }
  .hero--especimen .hero__title-inner { padding-top: 150px; }
  .hero--especimen .display { font-size: clamp(36px, 10vw, 48px); }
  .hero--especimen .hero__sub { font-size: 16px; }
  .especimen__stage { height: 42%; right: -18%; }
  .medidas { bottom: 76px; gap: 8px 20px; }
  .medida__label b { font-size: 12px; }
  .medida__label span { font-size: 12px; }

  .specs thead { display: none; }
  .specs, .specs tbody, .specs tr, .specs td { display: block; width: auto; }
  .specs tr { padding: 16px 0; border-bottom: 1px solid var(--borde-calido); }
  .specs td { padding: 4px 0; border: 0; }
  .specs td:first-child, .specs td:nth-child(2), .specs td:nth-child(3) { width: auto; }
  .specs td:first-child { padding-left: 44px; text-indent: -44px; }
  .specs td:nth-child(5) { white-space: normal; }
  .specs td.specs__val { width: auto; }
  .specs__val span { display: inline; }
  .specs__val span + span { margin-left: 14px; }
  .specs td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 128px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oro-oscuro);
  }
  .specs td:first-child::before { display: none; }
  .specs tbody tr:hover td { background-color: transparent; }

  .estacion__media { height: 280px; }
  .estacion h3 { font-size: 22px; }
  .industrias li { padding: 22px 0; }
  .despacho { grid-template-columns: 1fr; }
  .despacho__item { padding: 18px 0 20px; }
  .suministro__media { height: 300px; }
  .form__tipo { gap: 24px; flex-wrap: wrap; }
  .form__grid { grid-template-columns: 1fr; gap: 28px; }
  .form__foot .btn { width: 100%; }
}

/* ==========================================================================
   OPERACIONES v0.1 — concepto "El corredor" (contenidos/operaciones-premium.md)
   Patrones propios de la página. Mapa: SVG inline (Natural Earth, dominio público).
   ========================================================================== */

/* Mapa (compartido por hero y bloque 02) */
.mapa { display: block; width: 100%; height: auto; overflow: visible; }
.mapa__depto { fill: #141414; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.mapa__depto--op { fill: rgba(217, 165, 20, 0.14); stroke: var(--oro); stroke-width: 1.2; }
.mapa__ruta { fill: none; stroke: var(--oro); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.mapa__punto { fill: var(--oro); transform-box: fill-box; transform-origin: center; }
.mapa__punto--puerto { fill: var(--negro-abismo); stroke: var(--oro-luminoso); stroke-width: 2; }
.mapa__deptos { opacity: 0; }
.mapa__punto { opacity: 0; }
.mapa.is-static .mapa__deptos, .mapa.is-static .mapa__punto { opacity: 1; }
.mapa.is-static .mapa__ruta { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   Hero · El corredor: mapa monumental a la derecha, titular a la izquierda
   -------------------------------------------------------------------------- */
.hero--corredor {
  height: 100vh;
  height: 100svh;
  min-height: 700px;
  max-height: 980px;
  background: var(--negro-abismo);
}
.corredor__stage {
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 3%;
  height: 84%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  will-change: transform;
}
.corredor__stage .mapa { position: absolute; inset: 0; height: 100%; width: 100%; }
.corredor__vignette {
  position: absolute;
  inset: -12% -6%;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--negro-abismo) 0%, rgba(10, 10, 10, 0.6) 18%, rgba(10, 10, 10, 0) 40%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 22%, rgba(10, 10, 10, 0) 80%, var(--negro-abismo) 100%);
}
.hero--corredor .hero__title {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: left;
  padding: 0;
  z-index: 3;
}
.hero--corredor .hero__title-inner { width: 100%; padding-bottom: 0; padding-top: 64px; }
.hero--corredor .display { font-size: clamp(44px, 5.2vw, 76px); max-width: 620px; }
.hero--corredor .hero__sub { max-width: 480px; font-size: 18px; margin-top: 28px; }
.hero--corredor .hero__ctas { margin-top: 36px; align-items: center; gap: 36px; }
/* Nosotros: CTA en el hero, como las demás internas (design-review 14-oct-2026, chequeo 7) */
.hero--perfil .hero__ctas { margin-top: 36px; align-items: center; gap: 36px; }
@media (max-width: 760px) { .hero--perfil .hero__ctas { margin-top: 28px; gap: 20px 32px; } }
.hero--corredor .hero__bottom { padding-bottom: 28px; z-index: 4; }
@media (min-width: 1101px) and (max-height: 800px) {
  .hero--corredor .display { font-size: clamp(40px, 4.6vw, 64px); }
  .hero--corredor .hero__sub { margin-top: 20px; }
  .hero--corredor .hero__ctas { margin-top: 28px; }
}

/* Etiquetas del mapa (posición en % del escenario = % del viewBox recortado) */
.hitos-mapa { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; z-index: 2; }
.hito-mapa {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 14px;
  opacity: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.hito-mapa::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--oro); }
.hito-mapa--up { padding-left: 0; transform: translate(10px, calc(-100% - 10px)); }
.hito-mapa--down { padding-left: 0; transform: translate(-50%, 12px); align-items: center; text-align: center; }
.hito-mapa--up::before, .hito-mapa--down::before { display: none; }
.hito-mapa b { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanco); }
.hito-mapa span { font-size: 12px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.02em; }
.hito-mapa--zaragoza { left: 39.2%; top: 65.5%; }
.hito-mapa--libertador { left: 25.4%; top: 59.3%; }
.hito-mapa--tierralta { left: 19.5%; top: 54.9%; }
.hito-mapa--puerto { left: 32.6%; top: 19.0%; }

/* --------------------------------------------------------------------------
   01 · Áreas de operación — columna fija + lista con Zaragoza como fila insignia
   -------------------------------------------------------------------------- */
.areas__layout { display: grid; grid-template-columns: 34% 60%; justify-content: space-between; align-items: start; }
.areas__aside { position: sticky; top: 140px; }
.areas__aside .h-monumental { font-size: clamp(32px, 3.2vw, 46px); }
.areas__aside .lead { margin-top: 28px; color: var(--negro); font-weight: 500; font-size: 18px; }
.areas__geo { margin-top: 24px; padding-left: 20px; border-left: 2px solid var(--oro-oscuro); font-size: 15px; color: var(--gris-texto); }
.areas__lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--negro); }
.area { display: grid; grid-template-columns: 1fr; padding: 32px 0 36px; border-bottom: 1px solid var(--borde-calido); }
.area--insignia { grid-template-columns: 52% 42%; justify-content: space-between; align-items: end; padding-top: 40px; padding-bottom: 44px; }
.area__media { height: 420px; }
.area__idx { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro-oscuro); margin-bottom: 14px; }
.area h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.05; }
.area__depto { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro-oscuro); }
.area p { margin-top: 14px; font-size: 16px; color: var(--gris-texto); max-width: 520px; }
.area:not(.area--insignia) .area__text { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 0 32px; align-items: baseline; }
.area:not(.area--insignia) .area__idx { margin: 0; }
.area:not(.area--insignia) .area__depto { grid-column: 2; margin-top: 6px; }
.area:not(.area--insignia) p { grid-column: 3; grid-row: 1 / span 2; margin: 0; }

/* --------------------------------------------------------------------------
   02 · Corredor — mapa fijo cuyo trazo se dibuja con el scroll + tramos
   -------------------------------------------------------------------------- */
.corredor__head { display: grid; grid-template-columns: 58% 32%; justify-content: space-between; align-items: end; margin-bottom: 96px; }
.corredor__head > p { color: rgba(255, 255, 255, 0.62); max-width: 380px; }
.corredor__grid { display: grid; grid-template-columns: 34% 58%; justify-content: space-between; align-items: start; }
.corredor__mapa { position: sticky; top: 140px; }
.corredor__mapa .mapa { width: 100%; }
.tramos-idx { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--borde-oscuro); padding-top: 22px; }
.tramo-idx { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); transition: color 300ms ease; }
.tramo-idx small { margin-left: 14px; font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.38); transition: color 300ms ease; }
.tramo-idx.is-done { color: rgba(255, 255, 255, 0.6); }
.tramo-idx.is-active { color: var(--blanco); }
.tramo-idx.is-active small { color: var(--oro); }
.tramos { list-style: none; margin: 0; padding: 0; }
.tramo { padding-bottom: 120px; }
.tramo:last-child { padding-bottom: 0; }
.tramo__media { height: 400px; }
.tramo__text { margin-top: 32px; max-width: 520px; }
.tramo__idx { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro); margin-bottom: 16px; }
.tramo h3 { font-size: 26px; margin-bottom: 12px; }
.tramo p { font-size: 16px; color: rgba(255, 255, 255, 0.62); line-height: 1.65; }

/* --------------------------------------------------------------------------
   03 · Infraestructura en campo — respiro a sangre con enunciado y cuatro líneas
   -------------------------------------------------------------------------- */
.campo-break { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--negro-abismo); padding: 160px 0; }
.campo-break .break__bg { position: absolute; inset: -10% 0; z-index: 0; }
.campo-break .break__bg::after { display: none; }
.campo-break .break__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.68) 42%, rgba(10, 10, 10, 0.05) 100%),
    linear-gradient(180deg, var(--negro) 0%, rgba(17, 17, 17, 0) 22%, rgba(17, 17, 17, 0) 78%, var(--negro) 100%);
}
.campo-break .break__content { z-index: 2; }
.campo__enunciado { max-width: 760px; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.005em; text-transform: uppercase; color: var(--blanco); }
.campo__lista { list-style: none; margin: 56px 0 0; padding: 0; max-width: 720px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.campo__lista li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); align-items: baseline; }
.campo__lista b { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
.campo__lista span { font-size: 16px; color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   04 · Continuidad del suministro — fórmula + respaldo + una cifra segura
   -------------------------------------------------------------------------- */
.continuidad__grid { display: grid; grid-template-columns: 56% 34%; justify-content: space-between; align-items: start; }
.continuidad__formula { margin-top: 36px; max-width: 680px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; color: var(--negro); }
.respaldo-op { margin: 48px 0 0; }
.respaldo-op__item { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--negro); align-items: baseline; }
.respaldo-op dt { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro-oscuro); }
.respaldo-op dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--negro); }
.respaldo-op dd a { color: var(--oro-oscuro); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.continuidad__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; align-items: start; padding-top: 12px; }
.continuidad__cifras .cifra { max-width: none; }
.continuidad__media { grid-column: 1 / -1; height: 420px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero--corredor { min-height: 100svh; max-height: none; }
  .corredor__stage { top: auto; bottom: 0; height: 52%; right: -6%; }
  .corredor__vignette {
    background:
      linear-gradient(180deg, var(--negro-abismo) 0%, rgba(10, 10, 10, 0.6) 22%, rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, 0) 82%, var(--negro-abismo) 100%),
      linear-gradient(90deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 45%);
  }
  .hero--corredor .hero__title { justify-content: flex-start; }
  .hero--corredor .hero__title-inner { padding-top: 168px; }
  .hero--corredor .hero__sub { margin-top: 20px; }
  .hero--corredor .hero__ctas { margin-top: 28px; gap: 20px 32px; }
  .hitos-mapa { display: none; }
  .areas__layout { grid-template-columns: 1fr; }
  .areas__aside { position: static; margin-bottom: 48px; }
  .area--insignia { grid-template-columns: 1fr; gap: 24px; }
  .area__media { height: 340px; }
  .area:not(.area--insignia) .area__text { grid-template-columns: 90px 1fr; }
  .area:not(.area--insignia) p { grid-column: 2; grid-row: auto; margin-top: 12px; }
  .corredor__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
  .corredor__grid { grid-template-columns: 1fr; }
  .corredor__mapa { position: static; margin-bottom: 48px; display: grid; grid-template-columns: 44% 1fr; gap: 32px; align-items: center; }
  .tramos-idx { margin: 0; }
  .tramo { padding-bottom: 80px; }
  .tramo__media { height: 340px; }
  .campo-break { min-height: 0; padding: 120px 0; }
  .continuidad__grid { grid-template-columns: 1fr; }
  .continuidad__cifras { margin-top: 48px; }
}
@media (max-width: 760px) {
  .hero--corredor { min-height: 760px; }
  .hero--corredor .hero__title-inner { padding-top: 150px; }
  .hero--corredor .display { font-size: clamp(34px, 9.4vw, 46px); }
  .hero--corredor .hero__sub { font-size: 16px; }
  .corredor__stage { height: 44%; right: -22%; }
  .area h3 { font-size: 24px; }
  .area:not(.area--insignia) .area__text { grid-template-columns: 1fr; gap: 6px; }
  .area:not(.area--insignia) .area__depto { grid-column: 1; }
  .area:not(.area--insignia) p { grid-column: 1; }
  .area__media { height: 260px; }
  .corredor__mapa { grid-template-columns: 1fr; }
  .corredor__mapa .mapa { max-width: 320px; }
  .tramo__media { height: 260px; }
  .tramo h3 { font-size: 22px; }
  .campo__lista li { grid-template-columns: 1fr; gap: 6px; }
  .respaldo-op__item { grid-template-columns: 1fr; gap: 8px; }
  .continuidad__cifras { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .continuidad__media { height: 260px; }
}

/* Mapa del bloque 02: base visible; el trazo lo maneja el scrub */
.mapa.is-base .mapa__deptos, .mapa.is-base .mapa__punto { opacity: 1; }
.mapa__punto--puerto.is-lit { fill: var(--oro); }

/* --------------------------------------------------------------------------
   Hero · VARIANTE B "Territorio" (operaciones-b.html): fotografía aérea andina a
   sangre; el mapa pasa a artefacto flotante anotado a la derecha (70 % de alto).
   -------------------------------------------------------------------------- */
.hero--corredor-b .hero__layer { top: -10%; height: 120%; object-position: center 40%; }
.hero--corredor-b .hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.35) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0.2) 70%, var(--negro-abismo) 100%);
}
.hero--corredor-b .corredor__stage { top: 17%; bottom: 13%; height: 70%; right: 5%; z-index: 2; }
.hero--corredor-b .corredor__vignette { display: none; }
.hero--corredor-b .mapa__depto { fill: rgba(10, 10, 10, 0.55); stroke: rgba(255, 255, 255, 0.28); }
.hero--corredor-b .mapa__depto--op { fill: rgba(217, 165, 20, 0.22); }
@media (max-width: 1100px) {
  .hero--corredor-b .corredor__stage { top: auto; bottom: 0; height: 48%; right: -6%; }
}

/* ==========================================================================
   COMERCIALIZACIÓN INTERNACIONAL v0.1 — concepto "La hoja de términos"
   (contenidos/comercializacion-internacional-premium.md). Patrones propios.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero A · hoja de términos tipográfica sobre negro (titular 40 % · hoja 52 %)
   -------------------------------------------------------------------------- */
.hero--terminos {
  height: 100vh;
  height: 100svh;
  min-height: 720px;
  max-height: 1000px;
  background: var(--negro-abismo);
}
.hero--terminos .hero__title {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: left;
  padding: 0;
  z-index: 3;
}
.terminos__layout {
  width: 100%;
  display: grid;
  grid-template-columns: 44% 50%;
  justify-content: space-between;
  align-items: center;
  padding-top: 88px;
}
.hero--terminos .display { font-size: clamp(40px, 4.4vw, 64px); max-width: 100%; }
.hero--terminos .hero__sub { max-width: 440px; font-size: 18px; margin-top: 28px; }
.hero--terminos .hero__ctas { margin-top: 36px; align-items: center; gap: 36px; }
.hero--terminos .hero__bottom { padding-bottom: 28px; z-index: 4; }
@media (min-width: 1101px) and (max-height: 820px) {
  .terminos__layout { padding-top: 120px; }
  .hero--terminos .display { font-size: clamp(38px, 4vw, 56px); }
  .hero--terminos .hero__sub { margin-top: 20px; font-size: 17px; max-width: 400px; }
  .hero--terminos .hero__ctas { margin-top: 28px; }
}

/* La hoja: filas tipográficas con índice; se "imprime" fila a fila al cargar */
.terminos { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.terminos__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
}
.terminos__head span:last-child { color: rgba(255, 255, 255, 0.45); }
.termino {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  align-items: baseline;
  opacity: 0;
}
.termino dt {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco);
}
.termino dt i {
  font-style: normal;
  display: inline-block;
  width: 44px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--oro);
}
.termino dd { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
@media (min-width: 1101px) and (max-height: 820px) {
  .termino { padding: 12px 0; }
  .termino dd { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Hero B · fotografía marítima a sangre + hoja como banda inferior
   -------------------------------------------------------------------------- */
.hero--terminos-b .hero__layer { top: -10%; height: 120%; object-position: center 55%; }
.hero--terminos-b .hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.3) 55%, rgba(10, 10, 10, 0.1) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.2) 35%, rgba(10, 10, 10, 0.9) 100%);
}
.hero--terminos-b .hero__title { display: block; inset: auto 0 0 0; }
.hero--terminos-b .hero__title-inner { padding-bottom: 196px; width: auto; }
.hero--terminos-b .display { font-size: clamp(44px, 5.6vw, 84px); max-width: 900px; }
.hero--terminos-b .hero__sub { max-width: 560px; }
.hero--terminos-b .hero__bottom { padding-bottom: 24px; }
.hero--terminos-b .hero__bottom-inner { flex-direction: column; align-items: stretch; gap: 22px; }
.terminos--banda {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 18px;
}
.terminos--banda .termino { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; opacity: 1; }
.terminos--banda .termino dd { font-size: 13px; }
@media (min-width: 1101px) and (max-height: 820px) {
  .hero--terminos-b .hero__title-inner { padding-bottom: 176px; }
  .hero--terminos-b .display { font-size: clamp(40px, 4.8vw, 68px); }
}

/* --------------------------------------------------------------------------
   01 · Cómo comprar — escena horizontal con scrub (sticky CSS, sin pin de GSAP).
   El titular vive DENTRO de la escena: la pantalla fija no tiene vacíos.
   -------------------------------------------------------------------------- */
.comprar { padding: 0; }
.comprar__scene { position: relative; height: 340vh; }
.comprar__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 56px;
  padding: 120px 0 96px;
}
.comprar__head { display: grid; grid-template-columns: 58% 32%; justify-content: space-between; align-items: end; width: 100%; }
.comprar__head > p { color: rgba(255, 255, 255, 0.62); max-width: 380px; }
.pasos {
  list-style: none;
  margin: 0;
  padding: 0 0 0 max(40px, calc((100vw - var(--container)) / 2 + 40px));
  display: flex;
  will-change: transform;
}
.paso {
  flex: 0 0 440px;
  padding: 36px 56px 0 0;
  margin-right: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
}
.paso::before { content: ''; position: absolute; top: -1px; left: 0; width: 56px; height: 3px; background: var(--degradado-oro); }
.paso__idx {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--oro);
  margin-bottom: 22px;
}
.paso__idx i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.paso h3 { font-size: 26px; margin-bottom: 14px; }
.paso p { font-size: 16px; color: rgba(255, 255, 255, 0.62); line-height: 1.65; }
.paso__doc { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.paso__doc b { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(217, 165, 20, 0.8); }
.comprar__progress { position: absolute; left: 0; right: 0; bottom: 64px; height: 1px; background: rgba(255, 255, 255, 0.12); }
.comprar__fill { position: absolute; inset: 0; background: var(--degradado-oro); transform: scaleX(0); transform-origin: left; }
@media (min-width: 1101px) and (max-height: 820px) {
  .comprar__pin { gap: 36px; padding: 100px 0 80px; }
  .comprar__head .h-monumental { font-size: clamp(32px, 3.2vw, 44px); }
  .paso h3 { font-size: 22px; }
  .paso p { font-size: 15px; }
  .paso__idx { font-size: 40px; margin-bottom: 16px; }
}

/* --------------------------------------------------------------------------
   02 · Documentación por despacho — expediente + verificación del vendedor
   -------------------------------------------------------------------------- */
.expediente__grid { display: grid; grid-template-columns: 56% 36%; justify-content: space-between; align-items: start; }
.expediente__docs .lead { margin-top: 28px; color: var(--negro); font-weight: 500; font-size: 18px; max-width: 620px; }
.docs { list-style: none; margin: 44px 0 0; padding: 0; border-top: 2px solid var(--negro); }
.doc { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--borde-calido); align-items: baseline; }
.doc__idx { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro-oscuro); }
.doc h3 { font-size: 20px; margin-bottom: 6px; }
.doc p { font-size: 15px; color: var(--gris-texto); }
.kyc { padding-top: 12px; }
.kyc__title { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-oscuro); padding-bottom: 14px; border-bottom: 2px solid var(--negro); }
.kyc__rows { margin: 0; }
.kyc__row { padding: 16px 0; border-bottom: 1px solid var(--borde-calido); }
.kyc__row dt { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro-oscuro); }
.kyc__row dd { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--negro); }
.kyc__row dd a { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; }
.kyc .link-arrow { margin-top: 28px; }

/* --------------------------------------------------------------------------
   03 · Puertos del Atlántico — respiro marítimo
   -------------------------------------------------------------------------- */
.mar-break { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: var(--negro-abismo); padding: 160px 0; }
.mar-break .break__bg { position: absolute; inset: -10% 0; z-index: 0; }
.mar-break .break__bg::after { display: none; }
.mar-break .break__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.55) 50%, rgba(10, 10, 10, 0.15) 100%),
    linear-gradient(180deg, var(--negro) 0%, rgba(17, 17, 17, 0) 22%, rgba(17, 17, 17, 0) 78%, var(--negro) 100%);
}
.mar-break .break__content { z-index: 2; width: 100%; }
.mar__enunciado { max-width: 760px; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.005em; text-transform: uppercase; color: var(--blanco); }
.mar-break .link-arrow { margin-top: 40px; }

/* --------------------------------------------------------------------------
   04 · Mercados — listas tipográficas + contexto con fuente
   -------------------------------------------------------------------------- */
.mercados__grid { display: grid; grid-template-columns: 54% 38%; justify-content: space-between; align-items: start; }
.mercados__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.mercados__label { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.mercados__lista { list-style: none; margin: 0; padding: 0; }
.mercados__lista li { padding: 16px 0; border-bottom: 1px solid var(--borde-oscuro); font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; color: var(--blanco); }
.mercados__nota { margin-top: 36px; max-width: 560px; font-size: 15px; color: rgba(255, 255, 255, 0.62); padding-left: 20px; border-left: 2px solid var(--oro); }
.contexto__media { height: 360px; }
.contexto__datos { margin: 32px 0 0; }
.contexto__dato { padding: 20px 0; border-top: 1px solid var(--borde-oscuro); }
.contexto__dato dt { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.contexto__dato dd { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.contexto__dato small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   CTA · Request a Quote
   -------------------------------------------------------------------------- */
.rfq__lista { list-style: none; margin: 8px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 240px)); gap: 24px 32px; }
.rfq__lista li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--borde-oscuro); }
.rfq__lista b { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.rfq__lista span { font-size: 14px; color: rgba(255, 255, 255, 0.62); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero--terminos { min-height: 100svh; max-height: none; height: auto; padding-bottom: 96px; }
  .hero--terminos .hero__title { position: relative; display: block; }
  .terminos__layout { grid-template-columns: 1fr; gap: 48px; padding-top: 168px; }
  .hero--terminos .hero__ctas { margin-top: 28px; gap: 20px 32px; }
  .termino { grid-template-columns: 170px 1fr; gap: 16px; }
  .hero--terminos-b { height: 100svh; padding-bottom: 0; }
  .hero--terminos-b .hero__title { position: absolute; }
  .hero--terminos-b .hero__title-inner { padding-bottom: 230px; }
  .terminos--banda { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .comprar { padding: var(--pad-section) 0; }
  .comprar__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .comprar__scene { height: auto; }
  .comprar__pin { position: static; height: auto; overflow: visible; padding: 0; gap: 0; display: block; }
  .pasos { flex-direction: column; transform: none !important; padding: 0 40px; }
  .paso { flex: auto; margin-right: 0; padding: 32px 0 36px; }
  .comprar__progress { display: none; }
  .expediente__grid { grid-template-columns: 1fr; }
  .kyc { margin-top: 48px; }
  .mar-break { min-height: 0; padding: 120px 0; }
  .mercados__grid { grid-template-columns: 1fr; }
  .contexto { margin-top: 56px; }
  .rfq__lista { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .terminos__layout { padding-top: 150px; gap: 40px; }
  .hero--terminos .display { font-size: clamp(36px, 10vw, 48px); }
  .hero--terminos .hero__sub { font-size: 16px; }
  .termino { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .terminos__head { flex-direction: column; gap: 4px; }
  .hero--terminos-b .hero__title-inner { padding-bottom: 250px; }
  .hero--terminos-b .display { font-size: clamp(34px, 9.4vw, 46px); }
  .terminos--banda { grid-template-columns: 1fr; gap: 10px; }
  .terminos--banda .termino dd { font-size: 12px; }
  .pasos { padding: 0 24px; }
  .paso h3 { font-size: 22px; }
  .paso__idx { font-size: 36px; }
  .doc { grid-template-columns: 1fr; gap: 6px; }
  .mercados__cols { grid-template-columns: 1fr; gap: 32px; }
  .contexto__media { height: 260px; }
  .rfq__lista { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   CONTACTO / COTIZACIÓN v0.2 — concepto "Dos puertas" (contenidos/contacto-premium.md)
   Hero B + UN formulario progresivo elegido desde las rutas + sede como banda a sangre.
   Los formularios reutilizan .form__* de Nuestro Carbón.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (variante B aprobada): Medellín al amanecer a sangre + rutas como banda
   -------------------------------------------------------------------------- */
.hero--rutas {
  height: 100vh;
  height: 100svh;
  min-height: 720px;
  max-height: 1000px;
  background: var(--negro-abismo);
}
.hero--rutas-b .hero__layer { top: -10%; height: 120%; object-position: center 45%; }
.hero--rutas-b .hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.35) 55%, rgba(10, 10, 10, 0.15) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.25) 30%, rgba(10, 10, 10, 0.92) 100%);
}
.hero--rutas-b .hero__title-inner { padding-bottom: 232px; }
.hero--rutas-b .display { font-size: clamp(44px, 5.4vw, 80px); max-width: 960px; }
.hero--rutas-b .hero__sub { max-width: 560px; }
.hero--rutas-b .hero__bottom { padding-bottom: 24px; }
.hero--rutas-b .hero__bottom-inner { flex-direction: column; align-items: stretch; gap: 20px; }
.rutas--banda { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; }
.ruta {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  text-decoration: none;
  color: var(--blanco);
  transition: padding-left 300ms ease;
}
.ruta::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--degradado-oro); }
.ruta--corporativa::before { background: rgba(255, 255, 255, 0.35); }
.ruta__idx { grid-row: 1 / span 3; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro); padding-top: 6px; }
.ruta__title { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.05; }
.ruta--comercial .ruta__title { color: var(--oro); }
.ruta__desc { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.66); line-height: 1.55; max-width: 460px; }
.ruta__cta { display: inline-flex; flex-direction: column; gap: 6px; margin-top: 12px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blanco); width: max-content; }
.ruta__cta .link-arrow__line { width: 48px; }
.ruta:hover { padding-left: 8px; }
.ruta:hover .ruta__cta .link-arrow__line { transform: scaleX(1.4); transform-origin: left; }
.ruta:focus-visible { outline: 2px solid var(--oro); outline-offset: 6px; }
@media (min-width: 1101px) and (max-height: 820px) {
  .hero--rutas-b .hero__title-inner { padding-bottom: 236px; }
  .hero--rutas-b .display { font-size: clamp(40px, 4.6vw, 64px); }
}

/* --------------------------------------------------------------------------
   01 · La solicitud — formulario progresivo (aside 34 % · formulario 58 %)
   -------------------------------------------------------------------------- */
.prog__layout { display: grid; grid-template-columns: 34% 58%; justify-content: space-between; align-items: start; }
.prog__aside { position: sticky; top: 140px; }
.prog__switch { display: flex; flex-direction: column; margin-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.prog__ruta {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--borde-oscuro);
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: color 200ms ease, padding-left 200ms ease;
}
.prog__ruta-idx { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.35); }
.prog__ruta:hover { color: rgba(255, 255, 255, 0.8); }
.prog__ruta.is-active { color: var(--oro); }
.prog__ruta.is-active .prog__ruta-idx { color: var(--oro); }
.prog__ruta:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.prog__nota { margin-top: 24px; max-width: 380px; font-size: 15px; color: rgba(255, 255, 255, 0.62); }
.prog__rail { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.prog__dot { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.3); transition: color 300ms ease; }
.prog__dot small { margin-left: 14px; font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.38); transition: color 300ms ease; }
.prog__dot.is-done { color: rgba(255, 255, 255, 0.6); }
.prog__dot.is-active { color: var(--blanco); }
.prog__dot.is-active small { color: var(--oro); }
[data-only][hidden] { display: none !important; }

.prog__wrap { position: relative; }
.prog { position: relative; margin: 0; padding-top: 28px; }
.prog__progress { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.14); }
.prog__fill { position: absolute; inset: 0; background: var(--degradado-oro); transform: scaleX(0.33); transform-origin: left; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.prog__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.prog.is-ready .prog__step:not(.is-active) { display: none; }
.prog__legend { display: flex; align-items: baseline; gap: 18px; padding: 0; margin-bottom: 36px; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--blanco); }
.prog__num { font-size: clamp(40px, 3.6vw, 52px); font-weight: 800; line-height: 1; color: var(--oro); }
.prog .form__grid { gap: 32px 40px; }
.prog__nav { display: flex; align-items: center; gap: 20px; margin-top: 44px; flex-wrap: wrap; }
.prog__nav .btn { cursor: pointer; }
.prog__nav [hidden], .prog__ok[hidden] { display: none !important; }
.prog__aside .h-monumental { font-size: clamp(32px, 3.2vw, 46px); }
.prog__nav .btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.35); color: var(--blanco); background: none; }
.prog__nav .btn--ghost:disabled { opacity: 0.35; cursor: default; }
.prog__nav .form__nota { margin-left: auto; }
.prog__ok { margin-top: 28px; padding-left: 20px; border-left: 2px solid var(--oro); font-size: 16px; color: var(--blanco); }

/* --------------------------------------------------------------------------
   02 · Sede — banda a sangre sobre el mapa de Google (filtrado) + datos corporativos
   -------------------------------------------------------------------------- */
.sede-banda { position: relative; min-height: 72vh; display: flex; align-items: center; overflow: hidden; background: var(--negro-abismo); padding: 140px 0; }
.sede-banda__mapa { position: absolute; inset: 0; z-index: 0; }
.mapa-sede__iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.88) brightness(0.9) sepia(0.25); }
.sede-banda__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.9) 34%, rgba(10, 10, 10, 0.45) 62%, rgba(10, 10, 10, 0.05) 100%),
    linear-gradient(180deg, var(--negro) 0%, rgba(17, 17, 17, 0) 18%, rgba(17, 17, 17, 0) 82%, var(--negro-abismo) 100%);
}
/* Mapa bajo demanda (14-oct-2026): hasta el clic, la banda es el negro plano del sistema con el
   botón «Ver mapa» (sin degradados ni patrones: design.md §12); con el clic, main.js crea el iframe. */
.sede-banda__mapa:not(.is-loaded) {
  z-index: 2; /* el botón queda por encima del velo; con el iframe cargado vuelve al fondo */
}
.mapa-carga { position: absolute; right: 12%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mapa-carga__btn { background: transparent; cursor: pointer; } /* <button>: sin el fondo gris del navegador */
.mapa-carga__nota { font-size: 12px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.sede-banda__content { z-index: 2; pointer-events: none; }
.sede-banda__content a, .sede-banda__content address { pointer-events: auto; }
.sede__dir { font-style: normal; margin-top: 32px; display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 520px; }
.sede__dir b { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--blanco); margin-bottom: 6px; }
.sede__dir a { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; width: max-content; }
.sede__nota { margin-top: 28px; max-width: 460px; font-size: 15px; color: rgba(255, 255, 255, 0.62); padding-left: 20px; border-left: 2px solid var(--oro); }
.sede__nota a { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.sede-banda .link-arrow { margin-top: 36px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero--rutas { min-height: 100svh; max-height: none; }
  .hero--rutas-b .hero__title-inner { padding-bottom: 300px; }
  .rutas--banda { grid-template-columns: 1fr; gap: 12px; }
  .ruta { padding-top: 14px; }
  .ruta__desc { display: none; }
  .prog__layout { grid-template-columns: 1fr; }
  .prog__aside { position: static; }
  .prog__wrap { margin-top: 48px; }
  .prog__rail { display: none; }
  .sede-banda { min-height: 0; padding: 120px 0; }
  .mapa-carga { display: none; }
  .sede-banda__shade { background: linear-gradient(180deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.86) 100%); }
}
@media (max-width: 760px) {
  .hero--rutas-b .display { font-size: clamp(34px, 9.4vw, 46px); }
  .hero--rutas-b .hero__title-inner { padding-bottom: 280px; }
  .ruta__title { font-size: 18px; }
  .prog__ruta { font-size: 15px; }
  .prog__legend { font-size: 22px; margin-bottom: 28px; }
  .prog__num { font-size: 36px; }
  .prog .form__grid { grid-template-columns: 1fr; gap: 26px; }
  .prog__nav { gap: 14px; }
  .prog__nav .form__nota { margin-left: 0; width: 100%; }
  .sede__dir { font-size: 16px; }
}

/* ==========================================================================
   OTRAS LÍNEAS DE NEGOCIO v0.2 — concepto "Cuatro mundos" (contenidos/otras-lineas-premium.md)
   Dispositivos nuevos en el sitio: paneles a pantalla completa apilados con pin (sticky),
   índice fijo lateral, recorrido de renders con scrub, cifra a escala de pantalla,
   acordeón horizontal. Nada de eyebrow+H2+filas.
   ========================================================================== */

.page-mundos { background: var(--negro-abismo); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Índice fijo lateral
   -------------------------------------------------------------------------- */
.mundos-idx {
  position: fixed;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.mundos-idx.is-visible { opacity: 1; pointer-events: auto; }
.mundos-idx a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: rgba(255, 255, 255, 0.38); transition: color 250ms ease; }
.mundos-idx span { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; }
.mundos-idx small { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity 250ms ease, transform 250ms ease; }
.mundos-idx a::before { content: ''; width: 24px; height: 1px; background: currentColor; transition: width 250ms ease; }
.mundos-idx a.is-active { color: var(--oro); }
.mundos-idx a.is-active::before { width: 40px; }
.mundos-idx:hover small, .mundos-idx a:focus-visible small { opacity: 1; transform: none; }
.mundos-idx a:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.mundos-idx.is-light a { color: rgba(17, 17, 17, 0.45); }
.mundos-idx.is-light a.is-active { color: var(--oro-oscuro); }

/* --------------------------------------------------------------------------
   Portada A · tipografía a escala de pantalla; es cubierta por el mundo 01
   -------------------------------------------------------------------------- */
.portada { position: relative; height: 100vh; height: 100svh; min-height: 640px; z-index: 1; }
.portada__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--negro-abismo); display: flex; align-items: flex-end; will-change: transform, opacity; }
.portada__inner { width: 100%; padding-top: 150px; padding-bottom: 40px; }
.portada__list { margin: 20px 0 0; display: flex; flex-direction: column; }
.portada__line {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  column-gap: 24px;
  padding: 0;
  text-decoration: none;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: clamp(44px, 6.6vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color 250ms ease;
}
.portada__line .line-mask { display: block; }
.portada__n { font-size: clamp(14px, 1.2vw, 18px); letter-spacing: 0.2em; color: var(--oro); font-weight: 700; }
.portada__line:hover { color: var(--oro); }
.portada__line--out { color: rgba(255, 255, 255, 0.42); }
.portada__line--out:hover { color: rgba(255, 255, 255, 0.8); }
.portada__line:focus-visible { outline: 2px solid var(--oro); outline-offset: 8px; }
.portada__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.portada__sub { max-width: 520px; font-size: 16px; color: rgba(255, 255, 255, 0.7); }
@media (min-width: 1101px) and (max-height: 820px) {
  .portada__line { font-size: clamp(40px, 6vw, 84px); }
  .portada__foot { margin-top: 24px; padding-top: 16px; }
  .portada__inner { padding-bottom: 32px; }
}

/* --------------------------------------------------------------------------
   Portada B · cuatro puertas verticales (acordeón horizontal a pantalla completa)
   -------------------------------------------------------------------------- */
.portada--puertas .portada__pin { display: block; }
.portada__eyebrow { position: absolute; left: 0; right: 0; top: 150px; z-index: 3; padding: 0 40px; margin: 0; }
.puertas-h { position: absolute; inset: 0; display: flex; }
.puerta-h {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 40px 64px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  color: var(--blanco);
  overflow: hidden;
  transition: flex-grow 700ms cubic-bezier(0.22, 1, 0.36, 1), background-color 400ms ease;
  background: var(--negro-abismo);
}
.puerta-h:first-child { border-left: 0; }
.puerta-h:hover, .puerta-h:focus-visible { flex-grow: 2.4; outline: none; }
.puerta-h__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.8) saturate(0.75); transition: filter 700ms ease, transform 1200ms ease; transform: scale(1.08); }
.puerta-h::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.puerta-h:hover .puerta-h__bg, .puerta-h:focus-visible .puerta-h__bg { filter: brightness(1) saturate(1); transform: scale(1); }
.puerta-h__n { position: relative; z-index: 1; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--oro); }
.puerta-h__title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; transition: font-size 600ms cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 600ms ease; }
.puerta-h:hover .puerta-h__title, .puerta-h:focus-visible .puerta-h__title { font-size: clamp(26px, 2.7vw, 40px); letter-spacing: -0.01em; }
.puerta-h__desc { position: relative; z-index: 1; font-size: 14px; color: rgba(255, 255, 255, 0.7); max-width: 320px; opacity: 0; transform: translateY(8px); transition: opacity 400ms ease 150ms, transform 400ms ease 150ms; }
.puerta-h:hover .puerta-h__desc, .puerta-h:focus-visible .puerta-h__desc { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Mundos: paneles apilados con pin. Cada uno cubre al anterior.
   -------------------------------------------------------------------------- */
.mundo { position: relative; z-index: 2; }
.mundo--ingenieria { height: 320vh; }
.mundo--seguros, .mundo--maquinaria, .mundo--plataforma { height: 100vh; height: 100svh; min-height: 720px; }
.mundo__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 720px; overflow: hidden; background: var(--negro); box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.55); }
.mundo__content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 150px; padding-bottom: 56px; }
.mundo__head { display: grid; grid-template-columns: 200px 1fr; column-gap: 40px; align-items: start; max-width: 1040px; }
.mundo__num { font-family: var(--font-display); font-size: clamp(88px, 11vw, 168px); font-weight: 800; line-height: 0.8; letter-spacing: -0.03em; color: var(--oro); }
.mundo__title { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; color: var(--blanco); margin-top: 4px; }
.mundo__title--xl { font-size: clamp(44px, 6vw, 96px); max-width: 1100px; }
.mundo__lead { margin-top: 22px; max-width: 620px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.mundo__foot { display: grid; grid-template-columns: 1fr 360px; column-gap: 48px; align-items: end; }
.mundo__quien { display: flex; gap: 20px; align-items: baseline; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 15px; color: rgba(255, 255, 255, 0.72); max-width: 720px; }
.mundo__quien b { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); white-space: nowrap; }
@media (min-width: 1101px) and (max-height: 820px) {
  .mundo__content { padding-top: 130px; padding-bottom: 40px; }
  .mundo__num { font-size: clamp(72px, 9vw, 128px); }
  .mundo__title { font-size: clamp(28px, 3vw, 40px); }
  .mundo__lead { margin-top: 14px; font-size: 16px; }
}

/* Mundo 01 · recorrido de renders */
.recorrido { position: absolute; inset: 0; z-index: 1; }
/* max-width: none es OBLIGATORIO: `img { max-width: 100% }` del sistema clampaba este
   112% a 100% y, anclada en left:-6%, la capa dejaba un vacío a la derecha (Freddy,
   15-sep-2026). Toda capa de fondo que sobrepase el 100% necesita esta línea. */
.recorrido__capa { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; opacity: 0; will-change: opacity, transform; }
.recorrido__capa.is-on { opacity: 1; }
.mundo--ingenieria .mundo__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.12) 35%, rgba(10, 10, 10, 0.1) 60%, rgba(10, 10, 10, 0.85) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.05) 60%);
}
.subtitulos { list-style: none; margin: 0; padding: 0; position: relative; min-height: 132px; }
.subtitulo { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; row-gap: 4px; align-content: start; opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; pointer-events: none; }
.subtitulo.is-on { opacity: 1; transform: none; pointer-events: auto; }
.subtitulo b { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; color: var(--blanco); }
.subtitulo i { font-style: normal; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); white-space: nowrap; }
.subtitulo i [data-count] { font-size: 22px; letter-spacing: -0.01em; }
.subtitulo > span { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); max-width: 680px; margin-top: 8px; }
.caso-tag { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.caso-tag__label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); }
.caso-tag__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--blanco); }
.caso-tag__alcance { font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.caso-tag__render { position: relative; height: 18px; margin-top: 6px; }
.recorrido__cap { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); opacity: 0; transition: opacity 400ms ease; white-space: nowrap; }
.recorrido__cap.is-on { opacity: 1; }
.recorrido__barra { display: block; height: 1px; background: rgba(255, 255, 255, 0.16); margin-top: 10px; position: relative; }
.recorrido__fill { position: absolute; inset: 0; background: var(--degradado-oro); transform: scaleX(0); transform-origin: left; }

/* Mundo 02 · cifra a escala de pantalla */
.mundo--seguros .mundo__pin { background: #0d0d0d; }
.mundo__gigante {
  position: absolute; right: -2vw; bottom: -6vh; z-index: 1;
  font-family: var(--font-display); font-size: clamp(320px, 52vw, 760px); font-weight: 800; line-height: 0.8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(217, 165, 20, 0.35); pointer-events: none; user-select: none;
}
.mundo__foot--seguros { grid-template-columns: 1fr; }
.coberturas-h { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 40px; }
.coberturas-h li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.coberturas-h b { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blanco); }
.coberturas-h span { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }

/* Mundo 03 · acordeón horizontal */
.mundo--maquinaria .mundo__pin { background: var(--blanco-calido); }
.mundo--maquinaria .eyebrow { color: var(--oro-oscuro); }
.mundo--maquinaria .mundo__num { color: var(--oro-oscuro); }
.mundo--maquinaria .mundo__title { color: var(--negro); }
.mundo--maquinaria .mundo__lead { color: var(--gris-texto); }
.mundo--maquinaria .mundo__quien { color: var(--negro); border-top-color: var(--borde-calido); }
.mundo--maquinaria .mundo__quien b { color: var(--oro-oscuro); }
.esquemas-h { display: flex; height: clamp(280px, 40vh, 420px); gap: 8px; }
.esquema-h {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 28px 28px; text-decoration: none; color: var(--blanco); overflow: hidden; background: var(--negro-abismo);
  transition: flex-grow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.esquema-h:hover, .esquema-h:focus-visible { flex-grow: 2.2; outline: none; }
.esquema-h__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.6) saturate(0.7); transform: scale(1.06); transition: filter 600ms ease, transform 1000ms ease; }
.esquema-h::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.esquema-h:hover .esquema-h__bg, .esquema-h:focus-visible .esquema-h__bg { filter: brightness(1) saturate(1); transform: scale(1); }
.esquema-h__num { position: absolute; z-index: 1; top: 24px; left: 28px; font-family: var(--font-display); font-size: clamp(40px, 4vw, 64px); font-weight: 800; line-height: 1; color: var(--oro); }
.esquema-h__title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; transition: font-size 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.esquema-h:hover .esquema-h__title, .esquema-h:focus-visible .esquema-h__title { font-size: clamp(24px, 2.2vw, 32px); }
.esquema-h__body { position: relative; z-index: 1; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 360px; opacity: 0; transform: translateY(8px); transition: opacity 350ms ease 120ms, transform 350ms ease 120ms; }
.esquema-h:hover .esquema-h__body, .esquema-h:focus-visible .esquema-h__body { opacity: 1; transform: none; }

/* Mundo 04 · cierre */
.mundo--plataforma .mundo__pin { background: var(--negro-abismo); }
.mundo__content--cierre { justify-content: center; }
.mundo__content--cierre .mundo__num { margin-bottom: 8px; font-size: clamp(56px, 6vw, 96px); }
.mundo__content--cierre .mundo__lead { max-width: 760px; }
.cierre__row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-top: 44px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .mundos-idx { right: 16px; gap: 14px; }
  .mundos-idx small { display: none; }
  .portada__line { grid-template-columns: 56px 1fr; font-size: clamp(44px, 11vw, 96px); }
  .portada__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .puertas-h { flex-direction: column; }
  .puerta-h { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 16px 24px; justify-content: center; }
  .puerta-h__title { font-size: 24px; white-space: normal; }
  .puerta-h:hover, .puerta-h:focus-visible { flex-grow: 1.8; }
  .portada__eyebrow { top: 120px; padding: 0 24px; }
  .mundo--ingenieria { height: 260vh; }
  .mundo__content { padding-top: 120px; padding-bottom: 40px; }
  .mundo__head { grid-template-columns: 1fr; row-gap: 8px; }
  .mundo__num { font-size: clamp(64px, 14vw, 120px); }
  .mundo__foot { grid-template-columns: 1fr; row-gap: 24px; }
  .caso-tag { display: none; }
  .subtitulos { min-height: 150px; }
  .coberturas-h { grid-template-columns: 1fr; gap: 14px; }
  .coberturas-h span { display: none; }
  .mundo__gigante { font-size: clamp(220px, 60vw, 420px); right: -6vw; bottom: -4vh; }
  .mundos-idx { display: none; }
  .esquemas-h { flex-direction: column; height: auto; gap: 6px; }
  .esquema-h { min-height: 96px; padding: 14px 20px 14px 84px; justify-content: center; }
  .esquema-h__num { left: 20px; top: 50%; transform: translateY(-50%); font-size: 32px; }
  .esquema-h__bg { filter: brightness(0.7) saturate(0.85); }
  .esquema-h__body { display: none; }
  .mundo--seguros, .mundo--maquinaria, .mundo--plataforma, .mundo__pin { min-height: 100svh; }
}
@media (max-width: 760px) {
  .portada__line { font-size: clamp(24px, 6.4vw, 48px); grid-template-columns: 40px 1fr; column-gap: 12px; }
  .portada__n { font-size: 11px; }
  .mundo__title { font-size: clamp(26px, 7.6vw, 36px); }
  .mundo__lead { font-size: 15px; }
  .subtitulo b { font-size: 22px; }
  .subtitulo > span { font-size: 14px; }
  .mundo__title--xl { font-size: clamp(34px, 9.4vw, 46px); }
  .cierre__row { gap: 20px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .recorrido__capa { transition: none; }
}

/* ==========================================================================
   SOSTENIBILIDAD v0.1 — "El expediente" (14-sep-2026)
   Hero A "Índice": índice editorial asimétrico cuya imagen a sangre cambia por capítulo al pasar el puntero.
   Hero B "Carpeta": tapa tipográfica de expediente que se abre con el scroll y descubre el índice.
   01 capítulos con folio, compromiso · marco · verificación e imagen que se descubre con el scroll;
   02 territorio con cinta continua de municipios; 03 contacto corporativo.
   ========================================================================== */
.page-expediente { background: var(--negro-abismo); }

/* ---- Hero ----
   OJO: NO declarar una regla base `.expediente` — comercializacion-internacional.html usa
   `class="section section--light expediente"` como prefijo BEM sin estilos, y una regla base
   aquí (misma especificidad, archivo posterior) le pintaría la sección clara de negro.
   El arnés de paridad NO compara color ni background: la regresión sería invisible.
   Todo lo del hero va en el modificador `.expediente--carpeta`. */
.expediente__title { font-family: var(--font-display); font-size: clamp(52px, 6.6vw, 108px); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; margin: 18px 0 0; }
.hero-alt .hero-fade { opacity: 0; }

/* ---- Hero · Carpeta ---- */
.expediente--carpeta { position: relative; background: var(--negro-abismo); color: var(--blanco); overflow: visible; }
.carpeta__scene { height: 200vh; position: relative; }
.carpeta__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.carpeta__interior { position: absolute; inset: 0; display: flex; align-items: center; padding: calc(var(--header-h) + 24px) 0 48px; isolation: isolate; }
.carpeta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) saturate(0.9); will-change: transform; }
/* El velo va ENCIMA de la imagen y debajo del índice (z-index dentro del contexto aislado del
   interior; antes quedaba debajo de la imagen y no velaba nada — corregido el 14-oct-2026). */
.carpeta__interior::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 10, 10, 0.66) 0%, rgba(10, 10, 10, 0.42) 33%, rgba(10, 10, 10, 0.04) 52%, rgba(10, 10, 10, 0.42) 72%, rgba(10, 10, 10, 0.48) 100%), linear-gradient(to top, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.06) 55%, rgba(10, 10, 10, 0) 100%); }
.carpeta__num .eyebrow { color: var(--oro-luminoso); } /* oro luminoso de la paleta: AA sobre el cielo dorado */
.carpeta__toc { position: relative; z-index: 2; display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: end; }
.carpeta__six { display: block; font-family: var(--font-display); font-size: clamp(120px, 16vw, 260px); font-weight: 800; line-height: 0.82; letter-spacing: -0.04em; color: var(--oro); margin-top: 18px; }
.carpeta__six-sub { margin: 22px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 380px; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); color: var(--blanco); text-decoration: none; transition: color 250ms ease; }
.toc a:hover, .toc a:focus-visible { color: var(--oro); outline: none; }
.toc__t { font-family: var(--font-display); font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; }
.toc__dots { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, 0.4); transform: translateY(-5px); }
.toc__p { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.12em; color: var(--oro); }
.carpeta__nota { margin: 22px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.carpeta__tapa { position: absolute; inset: 0; background: var(--negro-abismo); will-change: transform; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.carpeta__tapa::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--degradado-oro); }
.carpeta__tapa-inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-h) + 24px) 40px 48px; }
.tapa__head { display: flex; justify-content: space-between; align-items: flex-start; }
.tapa__meta { margin: 0; text-align: right; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.7; color: rgba(255, 255, 255, 0.6); }
.expediente__title--tapa { font-size: clamp(48px, 7.2vw, 120px); margin: 0; }
.tapa__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.tapa__foot-r { text-align: right; }

/* ---- 01 · Capítulos ---- */
.capitulos { padding: 112px 0 40px; background: var(--negro-abismo); color: var(--blanco); }
.capitulos__kicker { display: flex; justify-content: space-between; gap: 24px; margin: 0 0 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); }
.capitulos__list { list-style: none; margin: 0; padding: 0; }
.capitulo { display: grid; grid-template-columns: 1.3fr 5fr 4fr; grid-template-areas: "folio body fig"; column-gap: 56px; align-items: start; padding: 72px 0 80px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.capitulo:nth-child(even) { grid-template-columns: 4fr 5fr 1.3fr; grid-template-areas: "fig body folio"; }
.capitulo:nth-child(even) .capitulo__folio { text-align: right; }
.capitulo__folio { grid-area: folio; font-family: var(--font-display); font-size: clamp(88px, 9.6vw, 152px); font-weight: 800; line-height: 0.8; letter-spacing: -0.03em; color: var(--oro-oscuro); }
.capitulo__body { grid-area: body; }
.capitulo__estado { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.capitulo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px rgba(217, 165, 20, 0.22); }
.capitulo__title { font-family: var(--font-display); font-size: clamp(28px, 2.7vw, 42px); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; margin: 16px 0 34px; max-width: 560px; }
.capitulo__dl { display: grid; gap: 16px; margin: 0; }
.capitulo__dl > div { display: grid; grid-template-columns: 124px 1fr; column-gap: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.capitulo__dl dt { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding-top: 3px; }
.capitulo__dl dd { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 520px; }
.capitulo__fig { grid-area: fig; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #0d0d0d; clip-path: inset(0 0 0 100%); }
.capitulo:nth-child(even) .capitulo__fig { clip-path: inset(0 100% 0 0); }
.capitulo__fig img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95) saturate(0.95) contrast(1.05); will-change: transform; }

/* ---- 02 · Territorio ---- */
.territorio { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 88px; overflow: hidden; background: var(--negro-abismo); color: var(--blanco); }
.territorio__media { position: absolute; inset: 0; }
.territorio__media img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: brightness(0.72) saturate(0.9); will-change: transform; }
.territorio__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.45) 50%, rgba(10, 10, 10, 0.12) 100%); }
.territorio__marquee { position: absolute; left: 0; right: 0; top: 34%; overflow: hidden; white-space: nowrap; pointer-events: none; }
.marquee__track { display: inline-flex; animation: marquee 60s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: clamp(56px, 8.6vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7); padding-right: 0.4em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.territorio__inner { position: relative; display: grid; grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: end; }
.territorio__p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 640px; margin: 18px 0 0; }
.territorio__ref { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); text-align: right; }
.territorio__ref a { color: var(--oro); text-decoration: none; border-bottom: 1px solid rgba(217, 165, 20, 0.5); }

/* ---- 03 · Contacto corporativo ---- */
.corp { position: relative; background: var(--negro); color: var(--blanco); padding: 0 0 120px; }
.corp__inner { display: grid; grid-template-columns: 6fr 6fr; column-gap: 64px; align-items: end; padding-top: 112px; }
.corp__title { font-family: var(--font-display); font-size: clamp(44px, 5.4vw, 88px); font-weight: 800; line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; margin: 18px 0 0; }
.corp__p { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); max-width: 520px; margin: 0; }
.corp__ctas { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; margin-top: 40px; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .carpeta__toc { grid-template-columns: 1fr; row-gap: 28px; }
  .capitulo, .capitulo:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: "folio" "fig" "body"; row-gap: 28px; padding: 56px 0 64px; }
  .capitulo:nth-child(even) .capitulo__folio { text-align: left; }
  .capitulo__folio { font-size: 72px; }
  .capitulo__fig { aspect-ratio: 16 / 9; }
  .territorio__inner, .corp__inner { grid-template-columns: 1fr; row-gap: 32px; }
  .territorio__ref { text-align: left; }
  .carpeta__tapa-inner { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 760px) {
  .expediente__title { font-size: clamp(40px, 11vw, 64px); }
  .carpeta__scene { height: 160vh; }
  .carpeta__interior { padding-bottom: 32px; align-items: flex-end; }
  .carpeta__toc { grid-template-columns: 1fr; row-gap: 24px; }
  .carpeta__six { font-size: 96px; }
  .carpeta__six-sub { display: none; }
  .toc a { padding: 11px 0; }
  .toc__t { font-size: 14px; }
  .tapa__head { flex-direction: column; gap: 10px; }
  .tapa__meta { text-align: left; }
  .expediente__title--tapa { font-size: clamp(36px, 10.5vw, 60px); }
  .tapa__foot { grid-template-columns: 1fr; row-gap: 10px; }
  .tapa__foot-r { text-align: left; }
  .capitulos { padding-top: 72px; }
  .capitulo__dl > div { grid-template-columns: 1fr; row-gap: 6px; }
  .capitulo__title { margin-bottom: 24px; }
  .territorio { padding-bottom: 64px; min-height: 84vh; }
  .territorio__marquee { top: 24%; }
  .corp__inner { padding-top: 80px; }
  .corp__title { font-size: clamp(30px, 8.4vw, 44px); }
  .corp { padding-bottom: 88px; }
  .corp__ctas { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .capitulo__fig, .capitulo:nth-child(even) .capitulo__fig { clip-path: none; }
}

/* ==========================================================================
   Política de tratamiento de datos personales (Ley 1581 de 2012, 28-oct-2026)
   Página legal fuera del mapa 8.1. Prefijo propio `pdatos` (0 coincidencias en las
   8 páginas canónicas): ninguna regla de esta capa compartida puede pisar a otra página.
   ========================================================================== */
.pdatos-portada { padding-top: calc(var(--header-h) + 112px); padding-bottom: 104px; }
.pdatos-portada__titulo { max-width: 980px; margin-top: 24px; }
.pdatos-portada__lead { max-width: 680px; margin-top: 28px; color: rgba(255, 255, 255, 0.72); }
.pdatos-portada__ficha {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 24px 72px;
  margin: 64px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--borde-oscuro);
}
.pdatos-portada__ficha dt {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}
.pdatos-portada__ficha dd { margin: 10px 0 0; font-size: 16px; color: var(--blanco); }
.pdatos-portada__ficha a { color: var(--blanco); text-decoration: none; border-bottom: 1px solid rgba(217, 165, 20, 0.6); }
.pdatos-portada__ficha a:hover { color: var(--oro); }

/* Retícula asimétrica: índice fijo + capítulos (≈ 30/62, nunca 50/50 — design.md §12.8) */
.pdatos__grid {
  display: grid;
  grid-template-columns: 28% 62%;
  justify-content: space-between;
  align-items: start;
}
.pdatos__indice { position: sticky; top: 120px; }
.pdatos__indice-tit {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-oscuro);
}
.pdatos__indice-lista {
  list-style: none;
  counter-reset: pdatos;
  margin: 20px 0 0;
  padding: 0;
  border-left: 1px solid var(--borde-calido);
}
.pdatos__indice-lista li { counter-increment: pdatos; }
.pdatos__indice-lista a {
  display: flex;
  gap: 14px;
  padding: 7px 0 7px 20px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gris-texto);
  text-decoration: none;
  transition: color 200ms ease;
}
.pdatos__indice-lista a::before {
  content: counter(pdatos, decimal-leading-zero);
  flex: 0 0 22px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.75;
  color: var(--oro-oscuro);
}
.pdatos__indice-lista a:hover { color: var(--negro); }

.pdatos__cap { padding: 56px 0; border-top: 1px solid var(--borde-calido); scroll-margin-top: 120px; }
.pdatos__cap:first-child { padding-top: 0; border-top: 0; }
.pdatos__cap:last-child { padding-bottom: 0; }
.pdatos__h {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 24px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.pdatos__num {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--oro-oscuro);
}
.pdatos__texto p,
.pdatos__lista li { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--gris-texto); }
.pdatos__texto p + p { margin-top: 16px; }
.pdatos__texto a {
  color: var(--negro);
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
}
.pdatos__texto a:hover { color: var(--oro-oscuro); }
.pdatos__lista { list-style: none; margin: 20px 0; padding: 0; }
.pdatos__lista li { position: relative; padding-left: 28px; }
.pdatos__lista li + li { margin-top: 12px; }
.pdatos__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 2px;
  background: var(--oro);
}
.pdatos__ficha { margin: 8px 0 0; } /* sin filete inferior: lo pone el capítulo siguiente */
.pdatos__fila {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--borde-calido);
}
.pdatos__fila dt {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--negro);
}
.pdatos__fila dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris-texto); }
.pdatos__cap > p + .pdatos__ficha,
.pdatos__cap > .pdatos__lista + p { margin-top: 20px; }

@media (max-width: 1240px) {
  .pdatos-portada { padding-top: 200px; }
}
@media (max-width: 991px) {
  .pdatos__grid { grid-template-columns: 1fr; }
  .pdatos__indice { position: static; margin-bottom: 56px; }
  .pdatos__indice-lista { columns: 2; column-gap: 40px; }
  .pdatos__indice-lista li { break-inside: avoid; }
}
@media (max-width: 640px) {
  .pdatos-portada { padding-top: 160px; padding-bottom: 72px; }
  .pdatos-portada__ficha { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .pdatos__indice-lista { columns: 1; }
  .pdatos__cap { padding: 44px 0; }
  .pdatos__h { gap: 14px; }
  .pdatos__texto p,
  .pdatos__lista li { font-size: 16px; }
  .pdatos__fila { grid-template-columns: 1fr; gap: 6px; }
}