/* ================================================================
   AKIM DE MÉXICO — Sistema de Identidad Digital
   styles.css — Fase 2: base maestra (reset + tokens + utilidades + animación)
   Sin estilos de contenido/secciones todavía — ver Fase 3.

   Índice
   01. Tokens de diseño (:root)
   02. Reset
   03. Elementos base
   04. Layout — contenedor / grid / flex
   05. Utilidades
   06. Accesibilidad (skip-link, foco)
   07. Componentes de cadena (chrome): franja reservada, header, botón
   08. Sistema de animación (scroll-reveal, parallax, microinteracciones)
   09. Reduced motion
   ================================================================ */


/* ================================================================
   01. TOKENS DE DISEÑO
   Paleta extraída del Manual de Marca v0.1 (mayo 2025):
   rojo vino del isotipo, gris del bloque de fondo, negro de las
   franjas, blanco de campo. No se introducen colores ajenos a la
   identidad; solo se derivan tintas de apoyo (hover, bordes).
   ================================================================ */

:root {

  /* — Color: superficie — */
  --color-paper:        #FFFFFF;   /* fondo primario */
  --color-paper-alt:     #F4F3F1;  /* fondo alterno, para ritmo entre secciones */

  /* — Color: tinta — */
  --color-ink:           #0A0A0A;  /* texto primario, franjas del logotipo */
  --color-ink-soft:       #4A4A4A; /* texto secundario */

  /* — Color: marca — */
  --color-wine:          #5C0808; /* vino — color de marca, tomado del isotipo */
  --color-wine-deep:      #3C0505; /* estado hover/activo sobre vino */
  --color-steel:         #9C9C9C; /* gris del bloque del isotipo — neutro secundario */
  --color-steel-light:    #E3E1DE; /* líneas, bordes, fondos sutiles */

  /* — Color: estado / utilidad — */
  --color-focus:          var(--color-wine);
  --color-border:          var(--color-steel-light);

  /* — Tipografía: familias —
     Display:  Archivo       → titulares, cifras grandes, peso industrial
     Cuerpo:   IBM Plex Sans → texto de lectura, técnico y legible
     Dato:     IBM Plex Mono → eyebrows, etiquetas, fichas técnicas, cifras de datos
  */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* — Tipografía: pesos — */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* — Tipografía: escala fluida (clamp: mínimo, preferido, máximo) — */
  --fs-display-xl: clamp(2.75rem, 2rem + 3.3vw, 6rem);      /* H1 / Hero */
  --fs-display-lg: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);    /* H2 / apertura de sección */
  --fs-display-md: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);  /* H3 */
  --fs-display-sm: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); /* H4 */
  --fs-body-lg:    clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); /* intro / lead */
  --fs-body:       1rem;        /* 16px — cuerpo base */
  --fs-small:      0.875rem;    /* 14px — captions, notas */
  --fs-eyebrow:    0.8125rem;   /* 13px — etiquetas mono en mayúsculas */

  /* — Tipografía: interlineado y tracking — */
  --lh-tight:  1.05;
  --lh-heading: 1.15;
  --lh-body:   1.6;
  --ls-tight:  -0.01em;
  --ls-eyebrow: 0.14em;

  /* — Espaciado: escala base 8px — */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */
  --space-9: 12rem;    /* 192px */

  /* — Layout — */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* — Bordes — estética industrial: sin esquinas redondeadas — */
  --radius-none: 0;
  --radius-sm:   2px;

  /* — Elevación — restringida a hairlines, sin sombras pesadas — */
  --border-hairline: 1px solid var(--color-border);

  /* — Movimiento — */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  200ms;
  --duration-base:  500ms;
  --duration-slow:  900ms;

  /* — Índice de apilamiento — */
  --z-pre-strip: 120;
  --z-header:    110;
  --z-overlay:   200;
}


/* ================================================================
   02. RESET
   ================================================================ */

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

* {
  margin: 0;
}

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

body {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

/* Respeta el ajuste de contenido en párrafos y titulares largos */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}


/* ================================================================
   03. ELEMENTOS BASE
   ================================================================ */

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
}

h1 { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-display-lg); }
h3 { font-size: var(--fs-display-md); }
h4 { font-size: var(--fs-display-sm); font-weight: var(--fw-bold); }
h5, h6 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }

p {
  max-width: 68ch;
}

/* Etiquetas técnicas / eyebrows — eco del propio manual de marca,
   que numera y rotula cada sección en mayúsculas monoespaciadas. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-wine);
}

small, .text-small {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

::selection {
  background-color: var(--color-wine);
  color: var(--color-paper);
}


/* ================================================================
   04. LAYOUT — contenedor / grid / flex
   ================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1600px;
}

/* Grid de 12 columnas, con variantes de conteo fijo */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--12 { grid-template-columns: repeat(12, 1fr); }
.grid--2  { grid-template-columns: repeat(2, 1fr); }
.grid--3  { grid-template-columns: repeat(3, 1fr); }
.grid--4  { grid-template-columns: repeat(4, 1fr); }

.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Utilidades de columna para el grid de 12 */
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-12 { grid-column: span 12; }

/* Flexbox */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Ritmo vertical entre secciones (se aplicará a <section> en Fase 3) */
.section-pad-y    { padding-block: var(--space-7); }
.section-pad-y-lg { padding-block: var(--space-9); }

.bg-paper     { background-color: var(--color-paper); }
.bg-paper-alt { background-color: var(--color-paper-alt); }
.bg-ink       { background-color: var(--color-ink); color: var(--color-paper); }
.bg-wine      { background-color: var(--color-wine); color: var(--color-paper); }


/* ================================================================
   05. UTILIDADES
   ================================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-wine   { color: var(--color-wine); }
.text-steel  { color: var(--color-steel); }

/* Regla fina — divisor estructural, no decorativo */
.hr {
  border: none;
  border-top: var(--border-hairline);
}


/* ================================================================
   06. ACCESIBILIDAD
   ================================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-2);
}

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


/* ================================================================
   07. COMPONENTES DE CADENA (CHROME)
   Solo el andamiaje estructural pedido en Fase 2: franja reservada,
   header y botón base. Sin estilos de Hero ni secciones de contenido.
   ================================================================ */

/* — Franja reservada para futuro sub-emprendimiento — */
.pre-strip {
  background-color: var(--color-ink);
  color: var(--color-paper);
  min-height: 2.75rem;
}

.pre-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: inherit;
}

.pre-strip__placeholder {
  display: block;
  width: 100%;
}

/* — Header — */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-paper);
  border-bottom: var(--border-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 4.5rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  height: 2rem;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.site-header__nav-list a {
  position: relative;
}

.site-header__menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-paper);
    border-bottom: var(--border-hairline);
    padding: var(--space-3) var(--container-pad) var(--space-4);
  }
  .site-header__nav.is-open .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .site-header__menu-toggle { display: inline-flex; }
}

/* — Botón base — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.75em 1.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  border-radius: var(--radius-none);
  border: 1px solid currentColor;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--color-paper);
}

.btn--primary:hover {
  background-color: var(--color-wine-deep);
  border-color: var(--color-wine-deep);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--ghost:hover {
  background-color: var(--color-ink);
  color: var(--color-paper);
}


/* ================================================================
   08. SISTEMA DE ANIMACIÓN
   Base para scroll-reveal (activado vía IntersectionObserver en
   script.js), parallax ligero y microinteracciones. Cero espectáculo:
   los desplazamientos son cortos y la duración es breve.
   ================================================================ */

/* — Scroll reveal genérico —
   JS agrega .is-visible cuando el elemento entra en viewport. */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal="fade"]  { transform: none; }
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(28px); }
[data-reveal="right"] { transform: translateX(-28px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Retraso escalonado para grupos de elementos (data-reveal-delay="1".."6") */
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }
[data-reveal-delay="6"] { transition-delay: 480ms; }

/* — Firma de marca: la "franja" —
   Regla horizontal que se dibuja de izquierda a derecha al entrar
   en viewport. Traduce, en movimiento, la textura de franjas del
   propio logotipo AKIM y las graduaciones del material de
   laboratorio del manual de marca. Se usa como divisor de sección,
   no como decoración suelta. */
.stripe-rule {
  position: relative;
  height: 1px;
  background-color: var(--color-border);
  overflow: hidden;
}

.stripe-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}

.stripe-rule.is-visible::after {
  transform: scaleX(1);
}

/* — Parallax ligero —
   El valor de traslado lo escribe script.js en --parallax-y
   (en px) según el desplazamiento del scroll. El scale(1.12) da
   margen para que la traslación nunca deje ver un borde vacío
   dentro del recorte object-fit: cover — el <figure> contenedor
   ya recorta el sobrante con overflow: hidden. */
[data-parallax] {
  transform: scale(1.12) translateY(calc(var(--parallax-y, 0) * 1px));
  transform-origin: center;
  will-change: transform;
}

/* — Microinteracción: subrayado animado en enlaces de navegación — */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-fast) var(--ease-out);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* — Microinteracción: elevación sutil sin sombra pesada — */
.lift-on-hover {
  transition: transform var(--duration-fast) var(--ease-out);
}

.lift-on-hover:hover {
  transform: translateY(-3px);
}

/* — Transición de página / header al hacer scroll —
   script.js alterna .is-condensed sobre [data-site-header]. */
.site-header {
  transition: height var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.site-header.is-condensed {
  box-shadow: 0 1px 0 var(--color-border);
}


/* ================================================================
   09. REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  [data-parallax] {
    transform: none;
  }
}


/* ================================================================
   10. SECCIÓN: INFRAESTRUCTURA Y LABORATORIO
   Primera sección de contenido construida (Fase 3). Reutiliza
   únicamente tokens y utilidades ya definidos arriba — ninguna
   clase de esta sección introduce color, tipografía o espaciado
   fuera del sistema.
   ================================================================ */

.section {
  padding-block: var(--space-8);
}

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.section-head h2 {
  margin-block: var(--space-2) var(--space-3);
}

.section-head .lead {
  font-size: var(--fs-body-lg);
  color: var(--color-ink-soft);
  max-width: 56ch;
}

.section-head p + p {
  margin-top: var(--space-2);
}

/* — Media editorial — */
.editorial-media {
  margin-bottom: var(--space-5);
  align-items: start;
}

.editorial-media__primary,
.editorial-media__secondary {
  overflow: hidden;
}

@media (max-width: 900px) {
  .editorial-media__primary,
  .editorial-media__secondary {
    grid-column: span 12;
  }
}

/* — Reserva de imagen (placeholder de composición) —
   Se retira en cuanto se integra la fotografía real: basta con
   sustituir este <div data-img-slot> por <img class="editorial-media__img">
   manteniendo el mismo contenedor <figure> y su aspect-ratio. */
.img-slot {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-3);
  background-color: var(--color-paper-alt);
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-steel-light) 0px,
    var(--color-steel-light) 1px,
    transparent 1px,
    transparent 12px
  );
  border: 1px dashed var(--color-steel);
}

.img-slot__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.img-slot__ratio {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-steel);
}

/* Cuando exista <img> real dentro de <figure>, ocupa el mismo marco */
.editorial-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* — Lista de datos operativos (Infraestructura) — */
.infra-data {
  border-top: var(--border-hairline);
}

.infra-data li {
  padding-block: var(--space-3);
  border-bottom: var(--border-hairline);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
}

.infra-data li strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

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


/* ================================================================
   11. SECCIÓN: HERO
   Sin fotografía: la firma visual es .hero__mark, una textura
   generativa (repeating-linear-gradient) derivada de las franjas
   del logotipo AKIM — no un patrón genérico ni una imagen de
   relleno. Se sustituye por <img>/<video> real sin romper el grid.
   ================================================================ */

.hero {
  padding-top: var(--space-8);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: center;
  padding-bottom: var(--space-7);
}

.hero__content {
  grid-column: span 7;
}

.hero__content .eyebrow {
  margin-bottom: var(--space-3);
}

.hero__content h1 {
  margin-bottom: var(--space-4);
}

.hero__content .lead {
  font-size: var(--fs-body-lg);
  color: var(--color-ink-soft);
  max-width: 52ch;
  margin-bottom: var(--space-5);
}

.hero__actions {
  margin-top: var(--space-2);
}

/* — Firma visual: franjas generativas — */
.hero__mark {
  grid-column: span 5;
  align-self: stretch;
  min-height: 22rem;
  background-image: repeating-linear-gradient(
    115deg,
    var(--color-wine) 0px,
    var(--color-wine) 3px,
    transparent 3px,
    transparent 14px,
    var(--color-steel-light) 14px,
    var(--color-steel-light) 16px,
    transparent 16px,
    transparent 30px
  );
  background-color: var(--color-paper-alt);
  opacity: 0.9;
}

@media (max-width: 900px) {
  .hero__content,
  .hero__mark {
    grid-column: span 12;
  }
  .hero__mark {
    min-height: 12rem;
    order: -1;
  }
}

/* — Franja de evidencia — */
.hero__evidence {
  background-color: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-5);
}

.evidence-grid {
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.evidence-grid__item dt {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-sm);
  color: var(--color-paper);
  margin-bottom: var(--space-1);
}

.evidence-grid__item dd {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.64);
  max-width: 22ch;
}

.evidence-clients {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.8);
}

.evidence-clients__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-paper);
  margin-right: var(--space-2);
}

@media (max-width: 900px) {
  .evidence-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}


/* ================================================================
   12. SECCIÓN: NOSOTROS / HISTORIA (línea de tiempo + archivo)
   La marca de cada hito es un trazo horizontal, no un punto —
   mismo lenguaje de "graduación de laboratorio" que ya usa
   .stripe-rule, en vez de introducir un ícono nuevo.
   ================================================================ */

.historia-layout {
  align-items: start;
}

.timeline {
  position: relative;
  padding-left: clamp(2rem, 6vw, 4rem);
  border-left: 1px solid var(--color-border);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-6);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: calc(-1 * clamp(2rem, 6vw, 4rem) - 1px);
  width: clamp(1.5rem, 4vw, 2.5rem);
  height: 2px;
  background-color: var(--color-wine);
}

.timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-wine);
  margin-bottom: var(--space-1);
}

.timeline__item p {
  color: var(--color-ink-soft);
  max-width: 62ch;
}

/* — Fotografía de archivo (1968) —
   Sticky: acompaña los tres hitos mientras se hace scroll, en vez
   de quedar huérfana arriba de la columna. */
.historia-archive {
  position: sticky;
  top: calc(4.5rem + var(--space-4)); /* alto del header + respiro */
}

.historia-archive__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-steel);
}

.historia-archive__img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-hairline);
}

.historia-archive figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  max-width: 42ch;
}

@media (max-width: 900px) {
  .historia-layout .timeline,
  .historia-layout .historia-archive {
    grid-column: span 12;
  }
  .historia-archive {
    position: static;
    margin-bottom: var(--space-5);
  }
}



/* ================================================================
   ENTREGA PUBLICABLE — secciones completas
   ================================================================ */
.pre-strip__text { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-align:center; padding:.65rem 1rem; }
.site-header__logo img { width: 168px; height: auto; }
.historia-archive--panel { padding: var(--space-4); background: var(--color-ink); color: var(--color-paper); }
.historia-archive--panel p { color: rgba(255,255,255,.7); margin-bottom:var(--space-3); }
.archive-year { display:block; font: var(--fw-black) var(--fs-display-md)/1 var(--font-display); color:#fff; margin-top:var(--space-3); }
.archive-divider { height:1px; background:rgba(255,255,255,.18); }
.technical-card { min-height:100%; background:var(--color-ink); color:var(--color-paper); padding:var(--space-4); display:flex; flex-direction:column; justify-content:center; }
.technical-card h3,.section-dark h2,.section-dark h3,.clients-section h2 { color:var(--color-paper); }
.check-list { margin-top:var(--space-3); }
.check-list li { padding:var(--space-2) 0; border-top:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.75); }
.section-dark .lead,.clients-section .lead { color:rgba(255,255,255,.75); }
.eyebrow--light { color:#fff; opacity:.78; }
.quality-layout { align-items:start; }
.quality-facts { border-top:1px solid rgba(255,255,255,.22); }
.quality-facts div { padding:var(--space-3) 0; border-bottom:1px solid rgba(255,255,255,.22); }
.quality-facts dt { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:#fff; }
.quality-facts dd { color:rgba(255,255,255,.65); margin-top:.35rem; }
.sector-card,.product-card { border:var(--border-hairline); padding:var(--space-4); background:var(--color-paper); }
.sector-card h3,.product-card h3 { margin:.5rem 0 var(--space-2); }
.sector-number,.product-code { font-family:var(--font-mono); color:var(--color-wine); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; font-size:var(--fs-small); }
.text-link { display:inline-block; margin-top:var(--space-3); color:var(--color-wine); font-family:var(--font-mono); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; }
.product-card small { display:block; margin-top:var(--space-3); padding-top:var(--space-2); border-top:var(--border-hairline); font-family:var(--font-mono); color:var(--color-ink); }
.catalog-cta { margin-top:var(--space-5); padding:var(--space-4); border-top:2px solid var(--color-wine); display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); }
.process-list { border-top:var(--border-hairline); }
.process-list li { display:grid; grid-template-columns:5rem 1fr; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:var(--border-hairline); }
.process-list li>span { font:var(--fw-black) var(--fs-display-md)/1 var(--font-display); color:var(--color-wine); }
.process-list h3 { margin-bottom:.35rem; }
.clients-section { color:#fff; }
.client-strip { font:var(--fw-bold) clamp(1.2rem,2.5vw,2.2rem)/1.5 var(--font-display); }
.client-strip span { opacity:.45; margin:0 .35em; }
.faq-list { border-top:var(--border-hairline); }
.faq-list details { border-bottom:var(--border-hairline); padding:var(--space-3) 0; }
.faq-list summary { cursor:pointer; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-body-lg); }
.faq-list details p { padding-top:var(--space-2); color:var(--color-ink-soft); }
.contact-section { background:var(--color-paper-alt); }
.contact-data { font-style:normal; margin-top:var(--space-4); }
.contact-data p { padding:var(--space-2) 0; border-top:var(--border-hairline); display:flex; flex-direction:column; }
.contact-data strong { font-family:var(--font-mono); text-transform:uppercase; font-size:var(--fs-small); letter-spacing:.08em; }
.contact-data a { color:var(--color-wine); }
.contact-form { background:#fff; padding:var(--space-4); border:var(--border-hairline); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-3); }
.form-full { grid-column:1/-1; }
.contact-form label { display:flex; flex-direction:column; gap:.45rem; font-family:var(--font-mono); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.05em; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid var(--color-steel); padding:.85rem; background:#fff; text-transform:none; letter-spacing:normal; font-family:var(--font-body); }
.form-note { font-size:var(--fs-small); color:var(--color-ink-soft); margin-top:var(--space-2); }
.site-footer { background:var(--color-ink); color:#fff; padding-top:var(--space-6); }
.footer-grid { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:var(--space-5); padding-bottom:var(--space-5); }
.footer-grid>div { display:flex; flex-direction:column; gap:.55rem; }
.footer-grid p,.footer-grid span,.footer-grid a { color:rgba(255,255,255,.65); font-size:var(--fs-small); }
.footer-grid strong { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-small); }
.footer-logo { width:170px; background:#fff; margin-bottom:var(--space-2); }
.footer-legal { border-top:1px solid rgba(255,255,255,.15); padding:var(--space-3) var(--container-pad); color:rgba(255,255,255,.5); font-size:var(--fs-small); }
@media (max-width:900px){
  .site-header__inner { height:4rem; gap:.75rem; }
  .site-header__logo img { width:126px; }
  .site-header__cta { display:none; }
  .quality-layout>*,.contact-layout>* { grid-column:span 12; }
  .catalog-cta { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .section { padding-block:var(--space-6); }
  .form-grid,.footer-grid { grid-template-columns:1fr; }
  .process-list li { grid-template-columns:3.5rem 1fr; }
  .client-strip { line-height:1.7; }
}