/* ============================================================================
   FORESTAL ROBUR SpA — INGENIERÍA DE COSECHA
   ----------------------------------------------------------------------------
   La referencia no es un documento de archivo: es la ficha técnica de una
   máquina cara y la señalética de una faena bien gestionada. Superficie
   oscura de acero, tipografía condensada de letrero, cifras grandes con
   unidad chica, fotos a sangre y un plano de ingeniería como pieza firma.

   REGLAS DE LA CASA:
   · Sin build, sin librerías. Google Fonts es la única petición externa.
   · Solo se anima transform y opacity.
   · Todo estado oculto previo a animar cuelga de html.js, que un rescate
     de 4 s quita si main.js no llega: la página se lee igual.
   · prefers-reduced-motion apaga lo intrusivo (parallax, partículas) y
     deja los fundidos y los hover.
   ============================================================================ */

/* ─── 0. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* — SUPERFICIE: acero frío. Cada ratio está MEDIDO contra su fondo real
       con la fórmula WCAG, no estimado a ojo. — */
  --carbon:    #0E1113;   /* fondo base */
  --acero:     #161A1D;   /* superficie elevada (tarjetas, fichas) */
  --acero-2:   #1D2327;   /* superficie sobre superficie */
  --borde:     #2B3339;   /* línea estructural */
  --borde-vivo:#3D484F;   /* línea de foco / hover */

  /* — VERDE: el bosque como estructura, no como decorado — */
  --pino:      #16301F;   /* bloque verde profundo */
  --pino-2:    #1E4029;   /* verde de apoyo */
  --helecho:   #7FC08E;   /* verde claro de acento — 9,2:1 sobre carbón */

  /* — TEXTO — */
  --niebla:    #EAEFF1;   /* principal — 16,1:1 sobre carbón */
  --niebla-2:  #A6B2B8;   /* secundario — 8,0:1 sobre carbón */
  --niebla-3:  #7C888E;   /* terciario, solo etiquetas grandes — 4,6:1 */

  /* — SEÑAL: ámbar para cifras y CTA, naranja de máquina para gráficos — */
  --ambar:     #F2A93B;   /* 10,3:1 sobre carbón — cifras y botón */
  --naranja:   #E1701A;   /* el naranja real de la maquinaria — 5,9:1 */
  --rojo:      #E05941;   /* alertas — 6,3:1 sobre carbón */

  /* — TIPOGRAFÍA —
     Ver el porqué del trío en el comentario del <head> del HTML. */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-texto:   "Saira", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "Azeret Mono", "Consolas", monospace;

  /* — ESCALA FLUIDA — un solo juego de pasos para todo el sitio. */
  --paso--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --paso-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --paso-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --paso-2:  clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --paso-3:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --paso-4:  clamp(3rem, 1.8rem + 6vw, 7rem);
  /* El tope del paso 5 está MEDIDO contra Big Shoulders real: la línea más
     larga del titular ("DONDE LA MÁQUINA", 16 caracteres) ocupa ≈0,42 em
     por carácter, así que a 120 px mide ~806 px y cabe en las columnas del
     hero a 1440. El mínimo se midió igual a 375 px de ancho. Si se cambia
     el texto del titular, hay que volver a medir: una línea que se parte
     en dos rompe el recorte de la animación de entrada. */
  --paso-5:  clamp(2.9rem, 1.2rem + 7.2vw, 7.5rem);

  /* — RITMO — */
  --margen: clamp(1.15rem, 4vw, 5rem);
  --ancho: 1440px;
  --hueco: clamp(2.5rem, 6vw, 5rem);

  /* — MOVIMIENTO — la salida manda: expo.out, seco, sin rebote. */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 180ms;
  --entrada: 620ms;
}

/* ─── 1. BASE ───────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
[hidden]{ display: none !important; }

html{
  background: var(--carbon);
  scroll-behavior: smooth;
  /* La barra superior es fija: las anclas tienen que frenar antes. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  /* Sitio oscuro de punta a punta: sin esto la barra de scroll y los
     controles nativos (el desplegable del formulario, el calendario)
     salen claros y rompen la superficie. */
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  background: var(--carbon);
  color: var(--niebla);
  font-family: var(--f-texto);
  font-size: var(--paso-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Sin esto, el móvil espera ~300 ms por si viene un doble toque y cada
     toque se siente lento. */
  touch-action: manipulation;
  /* El resalte azul por defecto de Android no pega con nada de acá. */
  -webkit-tap-highlight-color: rgba(242, 169, 59, 0.2);
}

/* Los bloques a sangre respetan el notch y la barra de gestos: sin esto,
   en un iPhone en horizontal el texto se mete bajo la muesca. */
.portada, .plancha__dato, .terreno__cuerpo, .pie, .barra{
  padding-left: max(var(--margen), env(safe-area-inset-left));
  padding-right: max(var(--margen), env(safe-area-inset-right));
}

img, svg, canvas, video{ display: block; max-width: 100%; }
a{ color: inherit; }
::selection{ background: var(--ambar); color: var(--carbon); }

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

.saltar{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ambar); color: var(--carbon);
  padding: 0.85rem 1.4rem;
  font-family: var(--f-mono); font-size: var(--paso--1);
  text-decoration: none;
}
.saltar:focus{ left: 0; }

/* ─── 2. PIEZAS COMPARTIDAS ─────────────────────────────────────────────── */

/* Etiqueta de sección: mono, chica, en caja. Es el rótulo de la ficha. */
.etiqueta{
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--helecho);
  margin-bottom: 1.4rem;
}
.etiqueta--claro{ color: var(--ambar); }
.punto{
  width: 7px; height: 7px;
  background: currentColor;
  flex-shrink: 0;
}

/* Titular: la display condensada, en mayúsculas, apretada. */
.titulo{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-3);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.parrafo{
  max-width: 58ch;
  color: var(--niebla-2);
  font-size: var(--paso-1);
  line-height: 1.55;
  margin-top: 1.5rem;
}

.seccion{
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(4.5rem, 11vh, 8.5rem) var(--margen);
}
.seccion--oscura{
  max-width: none;
  background: var(--acero);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.seccion--oscura > *{ max-width: var(--ancho); margin-inline: auto; }
.seccion__cabeza{ max-width: 62rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* Botones: rectos, macizos, sin redondeo de juguete. */
.boton{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;                    /* toque cómodo: > 44px */
  padding: 0.9rem 1.6rem;
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--rapido) ease-out,
              color var(--rapido) ease-out,
              border-color var(--rapido) ease-out;
}
.boton--fuerte{ background: var(--ambar); color: var(--carbon); border-color: var(--ambar); }
.boton--fuerte:hover{ background: #FFC163; border-color: #FFC163; }
.boton--linea{ background: transparent; color: var(--niebla); border-color: var(--borde-vivo); }
.boton--linea:hover{ border-color: var(--niebla); background: rgba(234,239,241,0.06); }

/* ─── 3. BARRA SUPERIOR ─────────────────────────────────────────────────── */
.barra{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.7rem var(--margen);
  background: rgba(14,17,19,0.88);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(10px);
}
.barra__marca{
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex-shrink: 0;
  min-height: 44px;    /* es un enlace: tiene que ser tocable en móvil */
}
/* El logo va en blanco sobre transparente: sin recuadro, hereda el fondo y
   contrasta contra el acero. La versión con papel crema del arte original
   metía un parche claro en medio de una superficie oscura. */
.barra__marca img{ width: 40px; height: auto; }
.barra__nombre{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.barra__nombre b{ color: var(--helecho); font-weight: 800; }

/* Nav deslizable en móvil: no se colapsa en hamburguesa, se arrastra.
   Para seis destinos cortos es más rápido que abrir un menú. */
.barra__nav{
  display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.barra__nav::-webkit-scrollbar{ display: none; }
.barra__nav a{
  display: flex; align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.06em;
  color: var(--niebla-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--rapido) ease-out, border-color var(--rapido) ease-out;
}
.barra__nav a:hover{ color: var(--niebla); border-bottom-color: var(--ambar); }
.barra__cta{
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 1.1rem;
  background: var(--ambar); color: var(--carbon);
  font-family: var(--f-mono); font-size: var(--paso--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: background var(--rapido) ease-out;
}
.barra__cta:hover{ background: #FFC163; }
@media (max-width: 900px){
  .barra__cta{ display: none; }     /* el CTA vive en la portada y al final */
  .barra__nombre{ display: none; }
}

/* ─── 4. PORTADA ────────────────────────────────────────────────────────── */
.portada{
  position: relative;
  /* `isolation` NO es decorativo acá: crea el contexto de apilamiento que
     mantiene la foto (z-index -2) DENTRO de la portada. Sin él, un hijo con
     z-index negativo se propaga al contexto raíz y queda tapado por el
     fondo opaco del body — el hero se ve negro y la foto no aparece. */
  isolation: isolate;
  min-height: min(92vh, 56rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3.5rem, 9vh, 7rem) var(--margen) 0;
  /* La portada va a SANGRE: sin max-width, para que la foto llegue a los
     dos bordes de la pantalla. Quien se limita a los 1440 del documento es
     el contenido, no el fondo. */
  overflow: hidden;
}
.portada__cuerpo,
.portada .cifras{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
}
.portada__foto{
  position: absolute; inset: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -2;
}
.portada__foto img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 60%;
  filter: saturate(0.72) brightness(0.58) contrast(1.08);
}
/* El velo, en dos capas planas: la vertical cierra en el color exacto del
   fondo para que la foto no termine en una línea recta; la horizontal
   carga el peso a la izquierda, que es donde vive el titular, y deja
   respirar la derecha, que es donde se ve el valle. */
.portada__foto::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(14,17,19,0.55) 0%,
      rgba(14,17,19,0.40) 40%,
      rgba(14,17,19,0.88) 85%,
      var(--carbon) 100%),
    linear-gradient(to right,
      rgba(14,17,19,0.80) 0%,
      rgba(14,17,19,0.52) 42%,
      rgba(14,17,19,0.18) 72%,
      rgba(14,17,19,0.35) 100%);
}
/* Profundidad: la foto se desplaza más lento que el contenido. Fuera del
   hilo principal (scroll-driven CSS) y solo donde hay soporte; sin él
   queda quieta, que es un fallback digno, no un parche. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .portada__foto img{
      animation: fondo-sube linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes fondo-sube{
      from{ transform: translateY(-3%) scale(1.06); }
      to  { transform: translateY(4%)  scale(1.06); }
    }
  }
}

.portada__cuerpo{ position: relative; max-width: 60rem; }
/* El titular NO lleva ninguna palabra resaltada en el color de acento: es
   el cliché número uno de landing y aquí la fuerza la da el peso de la
   condensada, no un subrayado de color. El ámbar se guarda para las cifras
   y los botones, donde significa algo. */
.portada__titular{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-5);
  /* 0,9 y no 0,86: con menos, la tilde de MÁQUINA choca con la línea de
     arriba. En una condensada en mayúsculas los diacríticos son el límite
     real del interlineado. */
  line-height: 0.9;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}
/* El recorte que hace posible la entrada "desde abajo" también corta los
   diacríticos que sobresalen por arriba: sin este colchón, la Á de MÁQUINA
   pierde la tilde. El padding abre la caja hacia arriba y el margen
   negativo devuelve la línea a su sitio, así el recorte sigue existiendo
   donde importa (abajo) sin comerse los acentos. */
.portada__titular .linea{
  display: block;
  overflow: hidden;
  padding-top: 0.14em;
  margin-top: -0.14em;
}
.portada__titular .linea > span{ display: block; }

.portada__bajada{
  max-width: 46ch;
  margin-top: 1.8rem;
  font-size: var(--paso-1);
  line-height: 1.5;
  color: var(--niebla-2);
}
.portada__acciones{
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 2.4rem;
}

/* Cifras de la portada: número grande, unidad chica, mono tabular. */
.cifras{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  margin-top: clamp(3rem, 8vh, 5.5rem);
}
.cifra{
  background: rgba(14,17,19,0.82);
  padding: 1.1rem 1.2rem 1.3rem;
}
.cifra dt{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--niebla-3);
}
.cifra dd{
  display: flex; align-items: baseline; gap: 0.25rem;
  margin-top: 0.5rem;
}
.cifra__valor{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 0.85;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.cifra__unidad{
  font-family: var(--f-mono);
  font-size: var(--paso-0);
  color: var(--helecho);
}
.cifra__texto{
  font-family: var(--f-texto);
  font-size: var(--paso-0);
  font-weight: 500;
  line-height: 1.25;
  color: var(--niebla);
}
/* Cifra sin confirmar: se dice, no se inventa. */
.cifra__valor--pendiente{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--niebla-3);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ENTRADA DE LA PORTADA — @keyframes puros.
   Nada de observer ni rAF: una pestaña abierta en segundo plano no corre
   rAF, y la portada tiene que estar pintada cuando el visitante llegue. */
html.js .portada__titular .linea > span{ animation: sube 800ms var(--curva) both; }
html.js .portada__titular .linea:nth-child(2) > span{ animation-delay: 90ms; }
html.js .portada__titular .linea:nth-child(3) > span{ animation-delay: 180ms; }
html.js .portada .etiqueta{ animation: aparece 600ms var(--curva) both; }
html.js .portada__bajada{ animation: aparece 700ms var(--curva) 300ms both; }
html.js .portada__acciones{ animation: aparece 700ms var(--curva) 400ms both; }
html.js .cifras{ animation: aparece 800ms var(--curva) 500ms both; }
@keyframes sube{ from{ transform: translateY(105%); } to{ transform: translateY(0); } }
@keyframes aparece{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }

/* Con reduced-motion la portada NO se queda quieta del todo: se funde.
   Se quita el desplazamiento, que es lo que molesta, y se conserva un
   fundido corto — apagarlo entero deja la página con aire de error. */
@media (prefers-reduced-motion: reduce){
  html.js .portada__titular .linea > span,
  html.js .portada .etiqueta,
  html.js .portada__bajada,
  html.js .portada__acciones,
  html.js .cifras{
    animation: fundido 260ms ease-out both;
  }
  @keyframes fundido{ from{ opacity: 0; } to{ opacity: 1; } }
}

/* ─── 5. REVELADO AL SCROLL ─────────────────────────────────────────────── */
/* El estado oculto cuelga de html.js. main.js agrega .revelado al entrar.
   Si el JS muere, el rescate quita .js y todo queda visible. */
html.js .revelable{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--entrada) var(--curva),
              transform var(--entrada) var(--curva);
}
html.js .revelable.revelado{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html.js .revelable{ transition-duration: 1ms; transform: none; }
}

/* ─── 6. EL SISTEMA (pieza firma) ───────────────────────────────────────── */
.seccion--sistema{ position: relative; }

.plano{
  margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  border: 1px solid var(--borde);
  background:
    /* Retícula de plano: rayas duras de 1px, no un degradado. */
    repeating-linear-gradient(0deg, rgba(127,192,142,0.055) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(127,192,142,0.055) 0 1px, transparent 1px 40px),
    var(--acero);
}
.plano__lienzo{ width: 100%; }
.plano__lienzo svg{ width: 100%; height: auto; display: block; }
.plano__pie{
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--borde);
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--niebla-3);
}
.plano__cota{ color: var(--helecho); }
/* Control de pausa del carro. Lo crea main.js: sin JS no hay animación
   que pausar y un botón muerto sería peor que ninguno. */
.plano__pausa{
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 0.9rem;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--borde-vivo);
  color: var(--niebla-2);
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--rapido) ease-out, border-color var(--rapido) ease-out;
}
.plano__pausa:hover{ color: var(--niebla); border-color: var(--niebla); }
.plano__pausa svg{ width: 12px; height: 12px; fill: currentColor; }

.piezas{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.pieza{ background: var(--acero); padding: 1.5rem 1.4rem 1.7rem; }
.pieza__n{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  font-weight: 600;
  color: var(--ambar);
  letter-spacing: 0.1em;
}
.pieza h3{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--paso-2);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0.7rem 0 0.6rem;
}
.pieza p{ font-size: var(--paso--1); color: var(--niebla-2); line-height: 1.55; }

/* ─── 7. CICLO DE OPERACIONES ───────────────────────────────────────────── */
.ciclo{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.paso{
  background: var(--acero);
  padding: 1.6rem 1.4rem 1.8rem;
  min-height: 13rem;
  transition: background var(--rapido) ease-out;
}
.paso:hover{ background: var(--acero-2); }
.paso__n{
  font-family: var(--f-mono);
  font-size: var(--paso-1);
  font-weight: 600;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.paso h3{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--paso-2);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0.6rem 0 0.7rem;
}
.paso p{ font-size: var(--paso--1); color: var(--niebla-2); line-height: 1.55; }
.paso--nota{
  background: var(--pino);
  display: flex; flex-direction: column; justify-content: center; gap: 0.7rem;
}
.paso--nota p{ color: var(--niebla); font-size: var(--paso-0); }
.paso--nota b{ color: var(--helecho); }

/* ─── 8. PLANCHA — foto a sangre ────────────────────────────────────────── */
.plancha{
  position: relative;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
}
.plancha img{
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover; object-position: center 38%;
  filter: saturate(0.9) contrast(1.05) brightness(0.82);
}
.plancha__dato{
  position: absolute; left: 0; bottom: 0;
  padding: clamp(1.2rem, 4vw, 2.6rem) var(--margen);
  max-width: 40rem;
  background: linear-gradient(to top, rgba(14,17,19,0.92), rgba(14,17,19,0));
  width: 100%;
}
.plancha__dato .etiqueta{ margin-bottom: 0.5rem; }
.plancha__frase{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--paso-2);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
@media (max-width: 700px){
  .plancha img{ aspect-ratio: 4 / 3; }
}

/* ─── 9. PARQUE DE MAQUINARIA ───────────────────────────────────────────── */
.parque{ display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.equipo{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--acero);
}
.equipo__foto{ overflow: hidden; }
.equipo__foto img{
  width: 100%; height: 100%;
  min-height: 17rem;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 900ms var(--curva);
}
.equipo:hover .equipo__foto img{ transform: scale(1.03); }
@media (prefers-reduced-motion: reduce){
  .equipo:hover .equipo__foto img{ transform: none; }
}
.equipo--invertido .equipo__foto{ order: 2; }
.equipo__datos{ padding: clamp(1.6rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.equipo__nombre{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-3);
  line-height: 0.9;
  text-transform: uppercase;
}
.equipo__rol{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.07em;
  color: var(--ambar);
  margin: 0.7rem 0 1.6rem;
}
.specs div{
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--borde);
}
.specs div:last-child{ border-bottom: 1px solid var(--borde); }
.specs dt{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--niebla-3);
  flex-shrink: 0;
}
.specs dd{ font-size: var(--paso--1); color: var(--niebla); text-align: right; }

/* ─── 10. OFICIOS ───────────────────────────────────────────────────────── */
.oficios{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.oficio{
  background: var(--carbon);
  padding: 1.7rem 1.5rem 1.9rem;
  display: flex; flex-direction: column;
}
.oficio h3{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-2);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--helecho);
  margin-bottom: 0.9rem;
}
.oficio p{ font-size: var(--paso--1); color: var(--niebla-2); line-height: 1.6; }
.oficio__epp{
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--f-mono) !important;
  font-size: var(--paso--1);
  letter-spacing: 0.04em;
  color: var(--niebla-3) !important;
  border-top: 1px solid var(--borde);
}

/* ─── 11. TERRENO ───────────────────────────────────────────────────────── */
.seccion--terreno{
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.terreno__foto{ overflow: hidden; }
.terreno__foto img{
  width: 100%; height: 100%;
  min-height: 22rem;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
}
.terreno__cuerpo{
  padding: clamp(3rem, 7vw, 5.5rem) var(--margen);
  background: var(--pino);
  display: flex; flex-direction: column; justify-content: center;
}
.terreno__cuerpo .parrafo{ color: rgba(234,239,241,0.85); }
.terreno__lista{
  list-style: none;
  margin-top: 2rem;
  display: grid; gap: 0.9rem;
  max-width: 46rem;
}
.terreno__lista li{
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--paso-0);
  color: rgba(234,239,241,0.9);
  line-height: 1.5;
}
.terreno__lista li::before{
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 2px;
  background: var(--helecho);
}
.terreno__lista b{ color: var(--niebla); font-weight: 600; }

/* ─── 12. CUMPLIMIENTO ──────────────────────────────────────────────────── */
.cumple{ list-style: none; display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.cumple li{
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: var(--acero);
  padding: 1.15rem 1.4rem;
}
.cumple p{ font-size: var(--paso-0); color: var(--niebla-2); }
.tic{
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 0.25rem;
  fill: none;
  stroke: var(--helecho);
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
}
html.js .revelable .tic{ stroke-dashoffset: 30; transition: stroke-dashoffset 500ms var(--curva); }
html.js .revelable.revelado .tic{ stroke-dashoffset: 0; }

/* ─── 13. TRAYECTORIA ───────────────────────────────────────────────────── */
.trayectoria{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--hueco);
  align-items: start;
}
.trayectoria__cifra{
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-4);
  line-height: 0.8;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.hitos{ list-style: none; }
.hitos li{
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-top: 1px solid var(--borde);
}
.hitos li:last-child{ border-bottom: 1px solid var(--borde); }
.hito__anio{
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: var(--paso-1);
  color: var(--helecho);
  font-variant-numeric: tabular-nums;
}
.hito__texto{ font-size: var(--paso-0); color: var(--niebla-2); }
.hito--pendiente .hito__anio,
.hito--pendiente .hito__texto{
  color: var(--niebla-3);
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─── 14. CONTACTO ──────────────────────────────────────────────────────── */
.seccion--contacto{ border-top: 1px solid var(--borde); }
.contacto{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--hueco);
  align-items: start;
}
.canales{ margin-top: 2.5rem; display: grid; gap: 1.3rem; }
.canal__etq{
  display: block;
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--niebla-3);
  margin-bottom: 0.3rem;
}
.canal__valor{
  display: inline-block;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-2);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ambar);
  border-bottom: 2px solid transparent;
  transition: border-color var(--rapido) ease-out;
  word-break: break-word;
}
a.canal__valor:hover{ border-bottom-color: var(--ambar); }
.canal__valor--pendiente{
  font-family: var(--f-mono);
  font-size: var(--paso-0);
  font-weight: 400;
  text-transform: none;
  color: var(--niebla-3);
}

.formulario{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.4rem;
  background: var(--acero);
  border: 1px solid var(--borde);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.campo{ grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.45rem; }
.campo--medio{ grid-column: auto; }
.formulario label{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--niebla-2);
}
.formulario input,
.formulario select,
.formulario textarea{
  font-family: var(--f-texto);
  font-size: var(--paso-0);
  color: var(--niebla);
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  min-height: 48px;
  transition: border-color var(--rapido) ease-out;
}
.formulario select{ appearance: none; cursor: pointer; }
.formulario select option{ background: var(--carbon); color: var(--niebla); }
.formulario textarea{ resize: vertical; min-height: 6rem; }
.formulario input:hover,
.formulario select:hover,
.formulario textarea:hover{ border-color: var(--borde-vivo); }
.formulario input:focus-visible,
.formulario select:focus-visible,
.formulario textarea:focus-visible{ border-color: var(--ambar); outline-offset: 1px; }
.formulario .boton{ grid-column: 1 / -1; justify-self: start; }
html:not(.js) .formulario .boton{ display: none; }
.aviso{
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  color: var(--rojo);
  line-height: 1.5;
}

/* ─── 15. PIE ───────────────────────────────────────────────────────────── */
.pie{
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--margen);
  border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; gap: var(--hueco);
  align-items: flex-start; justify-content: space-between;
}
.pie__marca{ display: flex; align-items: center; gap: 1rem; }
.pie__marca img{ width: 56px; height: auto; }
.pie__nombre{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--paso-1);
  text-transform: uppercase;
  line-height: 1;
}
.pie__lema{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.1em;
  color: var(--helecho);
  margin-top: 0.3rem;
}
.pie__datos{ display: grid; gap: 0.8rem; }
.pie__datos div{ display: flex; gap: 0.9rem; align-items: baseline; }
.pie__datos dt{
  font-family: var(--f-mono);
  font-size: var(--paso--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--niebla-3);
  min-width: 5.5rem;
}
.pie__datos dd{ font-size: var(--paso--1); color: var(--niebla-2); }

/* ─── 16. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1080px){
  .ciclo, .piezas, .oficios{ grid-template-columns: repeat(2, 1fr); }
  .paso{ min-height: 0; }
  .trayectoria, .contacto{ grid-template-columns: 1fr; }
  .cifras{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .equipo{ grid-template-columns: 1fr; }
  .equipo--invertido .equipo__foto{ order: 0; }
  .seccion--terreno{ grid-template-columns: 1fr; }
  .terreno__foto img{ min-height: 15rem; }
}
@media (max-width: 620px){
  .ciclo, .piezas, .oficios{ grid-template-columns: 1fr; }
  .formulario{ grid-template-columns: 1fr; }
  .campo--medio{ grid-column: 1 / -1; }
  .portada{ min-height: 0; }
  .hitos li{ grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Encuadre de la foto de la torre: estaba como style="object-position" en el
   HTML y lo bloquea la CSP con style-src 'self' (30-08-2026). */
.foto--torre { object-position: 32% 50%; }