/* ============================================================
   LVT Group — capa web

   Los tokens mandan. Aquí solo vive lo que un sitio necesita y una
   pieza A4 no tiene: cabecera fija, navegación, rejilla fluida,
   estados de foco y puntos de ruptura.

   Reglas duras heredadas, verificables: monocromo carbón/marfil,
   sin sombras, sin degradados, sin border-radius, bronce prohibido
   en pantalla, escala tipográfica de 11 pasos.

   La escala NO se interpola. `clamp()` produciría 34,7 px y 22,1 px,
   que no son pasos del sistema y que la auditoría marca. Lo que se
   hace es saltar de paso a paso en cada punto de ruptura: 56 → 40 →
   28 es una decisión tipográfica; clamp() es una renuncia a tenerla.
   ============================================================ */

@import url('/02-marca/tokens/lvt-group-tokens.css');

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

html { -webkit-text-size-adjust: 100%; }

/* La cabecera es sticky: sin este margen, un enlace de ancla deja el destino
   escondido debajo de ella y parece que el enlace no funcionó. */
:target, [id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--lvt-fondo);
  color: var(--lvt-texto);
  font: 400 17px/1.65 var(--lvt-font-texto);
  overflow-x: hidden;   /* red: ningún hijo debe desbordar, pero si pasa no rompe el móvil */
}

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

/* ---------- Enlaces ----------
   Subrayado siempre presente en el cuerpo: un enlace que solo se
   distingue por color no existe para quien no distingue ese color. */
a { color: inherit; }
.contenido a:not(.boton):not(.marca-enlace) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lvt-n-400);
}
.contenido a:not(.boton):not(.marca-enlace):hover { text-decoration-color: currentColor; }

/* Foco visible y con contorno propio. Nunca `outline: none`. */
:focus-visible {
  outline: 2px solid var(--lvt-carbon);
  outline-offset: 3px;
}
[data-tema='oscuro'] :focus-visible,
.cabecera :focus-visible,
.pie :focus-visible { outline-color: var(--lvt-marfil); }

/* Salto al contenido: primer tabulador de la página. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lvt-marfil); color: var(--lvt-carbon);
  padding: var(--lvt-space-m) var(--lvt-space-l);
  font: 500 13px/1 var(--lvt-font-display); letter-spacing: 0.18em; text-transform: uppercase;
}
.saltar:focus { left: 0; }

/* ---------- Contenedor y rejilla ---------- */
.contenedor {
  width: 100%; max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--lvt-space-l);
}
@media (min-width: 700px)  { .contenedor { padding-inline: var(--lvt-space-xl); } }
@media (min-width: 1100px) { .contenedor { padding-inline: var(--lvt-space-xxl); } }

.rejilla { display: grid; gap: var(--lvt-space-xl); }
@media (min-width: 800px) {
  .rejilla { grid-template-columns: repeat(12, 1fr); column-gap: var(--lvt-space-l); }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
  .desde-6 { grid-column: 6 / -1; }
  .desde-7 { grid-column: 7 / -1; }
}

/* ---------- Ritmo vertical ---------- */
.seccion { padding-block: var(--lvt-space-xxl); }
@media (min-width: 800px) { .seccion { padding-block: var(--lvt-space-xxxl); } }
.seccion--oscura {
  background: var(--lvt-negro-profundo); color: var(--lvt-marfil);
}
.seccion--papel { background: var(--lvt-blanco-papel); }

/* ---------- Tipografía de sitio ----------
   Cada tamaño es un paso declarado de la escala de 11. */
.eyebrow {
  font: 500 12px/1.4 var(--lvt-font-display);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lvt-texto-secundario);
  margin: 0 0 var(--lvt-space-l);
}
.seccion--oscura .eyebrow, .cabecera .eyebrow { color: var(--lvt-n-400); }
@media (min-width: 700px) { .eyebrow { font-size: 13px; } }

.display {
  font: 700 28px/1.1 var(--lvt-font-display);
  letter-spacing: -0.01em; margin: 0 0 var(--lvt-space-l);
}
@media (min-width: 700px)  { .display { font-size: 40px; } }
@media (min-width: 1100px) { .display { font-size: 56px; } }

.titulo {
  font: 700 24px/1.15 var(--lvt-font-display);
  letter-spacing: -0.01em; margin: 0 0 var(--lvt-space-m);
}
@media (min-width: 700px) { .titulo { font-size: 28px; } }

.subtitulo {
  font: 600 17px/1.3 var(--lvt-font-display);
  margin: 0 0 var(--lvt-space-s);
}
@media (min-width: 700px) { .subtitulo { font-size: 20px; } }

.lede { font: 400 20px/1.55 var(--lvt-font-texto); margin: 0 0 var(--lvt-space-l); }
@media (min-width: 700px) { .lede { font-size: 24px; } }

p { margin: 0 0 var(--lvt-space-m); max-width: 68ch; }
.apunte { font-size: 15px; color: var(--lvt-texto-secundario); }
.seccion--oscura .apunte { color: var(--lvt-n-400); }
.dato {
  font: 400 12px/1.5 var(--lvt-font-datos);
  font-variant-numeric: tabular-nums;
  color: var(--lvt-texto-secundario);
}
.seccion--oscura .dato { color: var(--lvt-n-400); }

.filete { height: 1px; background: var(--lvt-borde); border: 0; margin: 0 0 var(--lvt-space-xl); }
.seccion--oscura .filete { background: var(--lvt-n-700); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--lvt-negro-profundo); color: var(--lvt-marfil);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lvt-space-l);
  min-height: 68px;
}
.marca-enlace { display: inline-flex; align-items: center; text-decoration: none; padding-block: var(--lvt-space-s); }
.marca-enlace img { width: 132px; }
@media (min-width: 700px) { .marca-enlace img { width: 156px; } }

.nav__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--lvt-space-l);
}
.nav__lista a {
  display: block;
  font: 500 12px/1 var(--lvt-font-display);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lvt-n-400); text-decoration: none;
  padding-block: 14px;               /* área táctil ≥ 44 px con el interlineado */
  border-bottom: var(--lvt-border-marca) solid transparent;
}
.nav__lista a:hover { color: var(--lvt-marfil); }
.nav__lista a[aria-current='page'] {
  color: var(--lvt-marfil); border-bottom-color: var(--lvt-marfil);
}

/* Menú de móvil. El botón solo existe por debajo de 900 px. */
.nav__boton {
  display: inline-flex; align-items: center; gap: var(--lvt-space-s);
  background: none; border: 0; cursor: pointer;
  color: var(--lvt-marfil);
  font: 500 12px/1 var(--lvt-font-display);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 0; min-height: 44px;
}
.nav__boton span { display: block; width: 20px; height: 1px; background: currentColor; position: relative; }
.nav__boton span::before, .nav__boton span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
}
.nav__boton span::before { top: -6px; }
.nav__boton span::after  { top: 6px; }
.nav__boton[aria-expanded='true'] span { background: transparent; }

/* El cambio a hamburguesa es a 1080 px, no a 900. Cinco etiquetas largas en
   español —«A QUÉ NOS DEDICAMOS» sola mide casi 200 px con su tracking— más el
   lockup no caben en una línea por debajo de eso, y el menú envolvía a dos
   filas. El umbral se fija midiendo dónde deja de caber, no por convención. */
@media (max-width: 1079px) {
  .nav__lista {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--lvt-negro-profundo);
    padding: var(--lvt-space-s) var(--lvt-space-l) var(--lvt-space-xl);
    border-top: 1px solid var(--lvt-n-800);
  }
  .nav[data-abierto='si'] .nav__lista { display: flex; }
  .nav__lista a { padding-block: 18px; border-bottom: 1px solid var(--lvt-n-800); }
  .nav__lista a[aria-current='page'] { border-bottom-color: var(--lvt-marfil); }
  .cabecera__fila { position: relative; }
}
@media (min-width: 1080px) { .nav__boton { display: none; } }
.nav { position: static; }

/* ---------- Héroe ---------- */
.heroe { position: relative; background: var(--lvt-negro-profundo); color: var(--lvt-marfil); }
.heroe__lienzo { position: absolute; inset: 0; overflow: hidden; }
.heroe__lienzo img { width: 100%; height: 100%; object-fit: cover; }
/* Velo sólido, no degradado: el sistema prohíbe degradados. Es un campo
   plano de carbón que ocupa la mitad de la composición y sobre el que el
   texto tiene contraste medido, no estimado. */
.heroe__campo { position: relative; background: var(--lvt-negro-profundo); }
.heroe__interior { position: relative; padding-block: var(--lvt-space-xxl); }
@media (min-width: 900px) {
  .heroe { display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; }
  .heroe__lienzo { position: relative; inset: auto; grid-column: 2; }
  .heroe__campo { grid-column: 1; grid-row: 1; display: flex; align-items: center; }
  .heroe__interior { padding-block: var(--lvt-space-xxxl); }
}
@media (max-width: 899px) {
  .heroe { display: block; }
  .heroe__lienzo { position: relative; height: 52vw; min-height: 220px; }
}

/* ---------- Líneas de negocio ----------
   Cinco líneas, no cuatro (obras civiles entró el 23 de julio). Cinco es un
   número incómodo de maquetar: en cualquier rejilla de 2, 3 o 4 columnas deja
   una fila coja. Se resuelve con una sola fila de 5 en escritorio —se lee como
   un índice 01–05— y bajando a 3 y 2 en anchos menores, donde una fila corta al
   final es tolerable. El gap horizontal se aprieta a space-l para que 5 columnas
   de texto quepan sin ahogarse. */
.lineas { display: grid; gap: var(--lvt-space-xl) var(--lvt-space-l); }
@media (min-width: 560px)  { .lineas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px)  { .lineas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .lineas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.linea { min-width: 0; padding-top: var(--lvt-space-m); border-top: var(--lvt-border-marca) solid var(--lvt-carbon); }
.seccion--oscura .linea { border-top-color: var(--lvt-marfil); }
.linea__n { font: 400 12px/1.4 var(--lvt-font-datos); color: var(--lvt-texto-secundario); margin-bottom: var(--lvt-space-xs); }
.seccion--oscura .linea__n { color: var(--lvt-n-400); }
.linea__t { font: 600 17px/1.25 var(--lvt-font-display); margin: 0 0 var(--lvt-space-s); }
.linea p { font-size: 15px; margin: 0; }

/* ---------- Numerales en secuencia ---------- */
.numerales { display: grid; gap: var(--lvt-space-l); margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .numerales { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lvt-space-xl); } }
.numerales li { display: grid; grid-template-columns: 40px 1fr; gap: var(--lvt-space-m); align-items: start; }
/* Peso 500: IBM Plex Mono se carga en 400 y 500. Pedir 600 no da un 600,
   da el 500 engordado por síntesis. Ver HANDOFF, trampas técnicas. */
.numerales .n { font: 500 24px/1 var(--lvt-font-datos); color: var(--lvt-texto-secundario); font-variant-numeric: tabular-nums; }
.seccion--oscura .numerales .n { color: var(--lvt-n-400); }
.numerales p { margin: 0; font-size: 15px; }

/* ---------- Cifra suelta ---------- */
.cifras { display: grid; gap: var(--lvt-space-xl); }
@media (min-width: 620px) { .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cifra__v { font: 700 40px/1 var(--lvt-font-display); font-variant-numeric: tabular-nums; margin-bottom: var(--lvt-space-s); }
.cifra__e { font: 400 13px/1.5 var(--lvt-font-datos); color: var(--lvt-texto-secundario); }
.seccion--oscura .cifra__e { color: var(--lvt-n-400); }

/* ---------- Banda de imagen ---------- */
.banda { position: relative; overflow: hidden; }
.banda img { width: 100%; height: 46vw; max-height: 560px; min-height: 240px; object-fit: cover; }

/* ---------- Endoso demostrado ----------
   Las dos cajas van sobre fondo marfil, nunca sobre blanco papel: una caja de
   blanco papel sobre una sección de blanco papel es la misma tinta y la caja
   desaparece. La pieza impresa las pone sobre marfil por este mismo motivo. */
.endoso-par { display: grid; gap: var(--lvt-space-l); }
@media (min-width: 480px) { .endoso-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.endoso-par > div { min-width: 0; }

.endoso-caso {
  border: 1px solid var(--lvt-n-300);
  background: var(--lvt-blanco-papel);
  padding: var(--lvt-space-l) var(--lvt-space-m) var(--lvt-space-m);
  text-align: center; min-height: 176px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--lvt-space-l);
}
.endoso-caso__marca { font: 700 24px/1 var(--lvt-font-display); letter-spacing: 0.06em; color: var(--lvt-carbon); }
/* El endoso se apila cuando no cabe en línea, en vez de partir «LVT GROUP»
   por la mitad. El tracking de 0,22 em lo hace ancho por diseño; forzarlo en
   una sola línea dentro de una caja estrecha es lo que rompe la fórmula. */
.endoso-caso .lvt-endoso {
  justify-content: center; flex-wrap: wrap; gap: var(--lvt-space-xs) var(--lvt-space-s);
}
.endoso-caso .lvt-endoso img { height: 24px; }
.endoso-caso .lvt-endoso span {
  font-size: 11px; line-height: 1.5; color: var(--lvt-carbon);
  letter-spacing: 0.14em;   /* 0,22 em no cabe a este ancho; se reduce, no se parte */
}

/* ---------- Pie ---------- */
.pie { background: var(--lvt-negro-profundo); color: var(--lvt-marfil); padding-block: var(--lvt-space-xxl); }
.pie__rejilla { display: grid; gap: var(--lvt-space-xl); }
@media (min-width: 800px) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie img { width: 148px; margin-bottom: var(--lvt-space-l); }
.pie h2 { font: 500 12px/1.4 var(--lvt-font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--lvt-n-400); margin: 0 0 var(--lvt-space-m); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--lvt-space-s); }
.pie a { color: var(--lvt-marfil); text-decoration: none; font-size: 15px; }
.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__legal {
  margin-top: var(--lvt-space-xxl); padding-top: var(--lvt-space-l);
  border-top: 1px solid var(--lvt-n-800);
  display: flex; flex-wrap: wrap; gap: var(--lvt-space-s) var(--lvt-space-xl);
  justify-content: space-between;
  font: 400 12px/1.6 var(--lvt-font-datos); color: var(--lvt-n-400);
}

/* Marcador de dato pendiente. Existe para que nadie publique el sitio
   creyendo que una razón social de ejemplo es la real. */
.pendiente {
  font: 400 12px/1.5 var(--lvt-font-datos);
  border: 1px dashed var(--lvt-n-500);
  padding: 2px 8px; display: inline-block; color: inherit;
}

/* ---------- Movimiento ----------
   Mismo vocabulario que la pieza «Quiénes somos», con la misma red:
   el estado oculto vive bajo .js-motion y el script lo retira si no
   llegan frames. Ver desactivar() en sitio.js. */
.js-motion .entra { opacity: 0; transform: translateY(18px); }
.js-motion .entra.visible {
  opacity: 1; transform: none;
  transition: opacity 1000ms cubic-bezier(.16,.7,.3,1), transform 1000ms cubic-bezier(.16,.7,.3,1);
}
.js-motion .asienta { opacity: 0; transform: translateY(28px); }
.js-motion .asienta.visible {
  opacity: 1; transform: none;
  transition: opacity 1500ms cubic-bezier(.12,.75,.2,1), transform 1500ms cubic-bezier(.12,.75,.2,1);
}
.js-motion .sostiene { opacity: 0; transform: translateY(22px); }
.js-motion .sostiene.visible {
  opacity: 1; transform: none;
  transition: opacity 1200ms cubic-bezier(.12,.75,.2,1), transform 1200ms cubic-bezier(.12,.75,.2,1);
}
.js-motion .d1.visible { transition-delay: 120ms; }
.js-motion .d2.visible { transition-delay: 240ms; }
.js-motion .d3.visible { transition-delay: 360ms; }
.js-motion .d4.visible { transition-delay: 480ms; }
.js-motion .d5.visible { transition-delay: 600ms; }
.js-motion .revela img { transform: scale(1.06); transition: transform 1500ms cubic-bezier(.16,.7,.3,1); }
.js-motion .revela.visible img { transform: none; }
.js-motion .barre { transform: scaleX(0); transform-origin: left; }
.js-motion .barre.visible { transform: none; transition: transform 850ms cubic-bezier(.16,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Impresión ---------- */
@media print {
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cabecera, .nav, .saltar { display: none; }
  .entra, .asienta, .sostiene, .barre, .revela img {
    opacity: 1 !important; transform: none !important;
  }
  .seccion { padding-block: var(--lvt-space-xl); }
}