/* ==========================================================================
   PRECOLL S.A.S. — ESTILOS DE PÁGINA
   Composición y layout sobre design-system.css. No define tokens propios:
   todo color, espaciado, radio, sombra, tipografía y breakpoint sale del
   Design System. Cargar SIEMPRE después de design-system.css.
   Convención: BEM (Block__Element--Modifier)
   ========================================================================== */

/* ==========================================================================
   1. MARCADORES TEMPORALES DE MEDIA
   Bloque que ocupa exactamente el tamaño y la proporción del recurso final,
   para que al sustituirlo por la imagen real no cambie el layout.
   Reemplazo: sustituir el <div class="media-ph"> por el <img> o <picture>
   correspondiente. El contenedor exterior y su CSS no se tocan.
   ========================================================================== */
.media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  text-align: center;
  background-color: var(--color-surface);
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0 14px,
      rgba(90, 90, 90, 0.06) 14px 28px
    );
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}
.media-ph__tag {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.media-ph__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 34ch;
}

/* Proporciones de reserva de espacio (evitan saltos de layout / CLS) */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* ==========================================================================
   2. ACCESIBILIDAD — SALTO AL CONTENIDO
   ========================================================================== */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   3. HEADER / NAVEGACIÓN
   .nav__inner (Design System) ya usa justify-content: space-between. Para que
   eso deje el logo a la izquierda y el resto agrupado a la derecha, el HTML
   tiene exactamente DOS hijos: .nav__brand y .nav__group.
   ========================================================================== */
.nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Caja de 280×80. Se usa object-fit: contain y no un alto libre porque el
   archivo del header (1599×682) trae margen blanco alrededor y su proporción
   no coincide con la del footer: estirarlo a 280×80 deformaría la marca. */
.nav__logo {
  width: 100%;
  max-width: 280px;
  height: 80px;
  object-fit: contain;
  object-position: left center;
}
.nav__group {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* En pantallas estrechas el logo cede ancho para que quepan el CTA y el
   botón de menú sin romper la fila. */
@media (max-width: 599.98px) {
  .nav__brand { max-width: 150px; }
}

/* Botón hamburguesa */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.nav__toggle:hover { border-color: var(--color-ink); }
.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: '';
  position: relative;
}
.nav__toggle-icon::before { top: -6px; }
.nav__toggle-icon::after  { top: 4px; }
.nav__toggle[aria-expanded='true'] .nav__toggle-icon { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-icon::after  { transform: translateY(-4px) rotate(-45deg); }

/* Panel desplegable en móvil/tablet */
.nav__inner { position: relative; }
.nav__links.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--space-5) var(--container-padding);
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Los cinco enlaces más el logo y el botón "Cotizar" no caben en una fila por
   debajo de 960px, así que el menú colapsado se mantiene hasta ese punto (el
   Design System lo despliega desde 600px). Se usan los breakpoints existentes;
   no se introduce ninguno nuevo. */
@media (max-width: 959.98px) {
  .nav__links:not(.is-open) { display: none; }
}

@media (min-width: 960px) {
  .nav__toggle { display: none; }
  .nav__links.is-open {
    position: static;
    flex-direction: row;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* ==========================================================================
   4. HERO PRINCIPAL (Home)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 78vh;
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
  background: var(--color-surface-dark);
  color: var(--color-white);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media > .media-ph {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Overlay oscuro: garantiza legibilidad del texto sobre la imagen de fondo.
   Aclarado a petición del cliente para que se distinga el equipo de la planta.

   El aclarado NO es uniforme, y la razón está medida. La franja inferior era
   la más oscura con diferencia (0.94) y allí solo hay texto pequeño que va
   sobradísimo de contraste, así que admite bajar mucho. La franja media es
   donde cae el acento rojo del título, y ese rojo sobre la foto es el punto
   más ajustado de todo el hero: cada punto que se aclara ahí le resta
   legibilidad. Por eso la parte de abajo baja 14 puntos y la de arriba solo 4.
   No aclarar más el tramo medio sin volver a medir el rojo del título. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(23, 23, 23, 0.80) 0%,
    rgba(23, 23, 23, 0.70) 45%,
    rgba(23, 23, 23, 0.54) 100%
  );
}
/* .hero__content ES un .container: no se le pone max-width propio. Al hacerlo,
   el margin-inline:auto del contenedor centraba el bloque y el texto del hero
   arrancaba 264px a la derecha del borde donde arrancan las demás secciones.
   El ancho de lectura se limita en los hijos, no en el contenedor. */
.hero__title,
.hero__lead {
  max-width: 46rem;
}
.hero__title {
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.hero__title-accent {
  display: block;
  color: var(--color-primary);
}
.hero__lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

/* Specs rápidas del hero. El marcado usa <dt> antes de <dd> (orden válido en
   una lista de definición); el orden visual value → label se resuelve aquí. */
.hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.22);
}
.spec {
  display: flex;
  flex-direction: column-reverse;
}
.hero__specs dd { margin: 0; }
.spec__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-white);
}
.spec__unit {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.8);
}
.spec__label {
  display: block;
  margin-top: var(--space-1);
  order: 1;
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

@media (min-width: 960px) {
  .hero { min-height: 86vh; }
  .hero__lead { font-size: var(--text-lg); }
  .hero__specs { gap: var(--space-8); }
  .spec__value { font-size: var(--text-3xl); }
}

/* ==========================================================================
   5. HERO INTERIOR (Nosotros, Productos, Contacto)
   ========================================================================== */
.hero-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
  background: var(--color-surface-dark);
  color: var(--color-white);
}
.hero-inner__media { position: absolute; inset: 0; z-index: -2; }
.hero-inner__media img { width: 100%; height: 100%; object-fit: cover; }
/* Velo suave: deja ver la fotografía. La legibilidad del texto se sostiene
   con la sombra proyectada de abajo, no oscureciendo más la imagen. */
.hero-inner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(23, 23, 23, 0.62) 0%,
    rgba(23, 23, 23, 0.36) 60%,
    rgba(23, 23, 23, 0.22) 100%
  );
}
/* Mismo criterio que .hero__content: el límite de ancho va en los hijos.
   El título usa 60rem: es el ancho que produce el corte en tres renglones
   ("Más de 40 años fortaleciendo / las redes eléctricas que / conectan a
   Colombia") sin forzar saltos manuales con <br>, que se romperían al
   cambiar de pantalla. */
.hero-inner__title { max-width: 60rem; }
.hero-inner__lead { max-width: 46rem; }
.hero-inner__title {
  color: var(--color-white);
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
}
.hero-inner__lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
  margin-bottom: 0;
}
/* La etiqueta de acento también va sobre la foto ahora más clara */
.hero-inner .hero-label__accent {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   6. SECCIONES: ENCABEZADO, REJILLAS Y VARIANTE CON FOTO DE FONDO
   ========================================================================== */
/* Secciones encadenadas que se leen como un solo bloque: la mitad del ritmo
   vertical de .section, para que no queden franjas blancas entre ellas. */
.section--tight { padding-block: var(--space-6); }

.section-head { max-width: 52rem; margin-bottom: var(--space-6); }
.section-head__title { margin-bottom: var(--space-3); }
.section-head__lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.section--dark .section-head__title,
.section--photo .section-head__title { color: var(--color-white); }
.section--dark .section-head__lead,
.section--photo .section-head__lead { color: rgba(255, 255, 255, 0.78); }

/* El Design System fija .section-label__text con white-space: nowrap, lo que
   funciona con etiquetas cortas ("CATÁLOGO") pero desborda la pantalla con las
   largas de Nosotros ("MISIÓN, VISIÓN Y POLÍTICA DE CALIDAD" mide ~584px a
   30px). Por debajo de 960px se permite que envuelvan en dos líneas: se
   conserva el tamaño de 30px y se evita el scroll horizontal. */
@media (max-width: 959.98px) {
  .section-label { flex-wrap: wrap; }
  .section-label__text { white-space: normal; }
}

/* La línea de .section-label usa --color-border (gris claro): sobre fondo
   oscuro se aclara para que siga siendo visible. El texto rojo del Design
   System no se altera. */
.section--dark .section-label::after,
.section-label--on-dark::after {
  background: rgba(255, 255, 255, 0.25);
}

.grid {
  display: grid;
  gap: var(--space-5);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--space-6); }
}

/* Sección con fotografía de fondo y degradado oscuro encima */
.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  padding-block: var(--space-7) var(--space-4);
  background: var(--color-surface-dark);
  color: var(--color-white);
}
.section__media { position: absolute; inset: 0; z-index: -2; }
.section__media img { width: 100%; height: 100%; object-fit: cover; }

/* La fotografía va sin degradado ni oscurecido, por decisión del cliente.
   La legibilidad del texto blanco se sostiene con la sombra de .stat, no
   alterando la imagen. */
.section__overlay { display: none; }

/* Franja de encabezado que precede a una banda fotográfica: el título y la
   imagen son una sola unidad, así que se recorta el espacio entre ambos en
   lugar de dejar el ritmo completo de .section. */
.section--photo-head {
  padding-block: var(--space-6) var(--space-3);
}

/* El encabezado ya no vive sobre la foto: lo único que queda dentro es la
   fila de cifras, anclada al borde inferior. */
.section__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

/* ==========================================================================
   7. PROCESO — pasos numerados sobre fondo oscuro
   ========================================================================== */
.step {
  padding-top: var(--space-4);
  border-top: var(--border-width-accent) solid var(--color-primary);
}
/* Sobre el fondo oscuro de la sección, el rojo de marca da 3,8:1 y WCAG AA pide
   4,5:1 para texto pequeño. El blanco del Design System da 17,9:1. El acento
   rojo del bloque se mantiene en la línea superior de cada paso. */
.step__number {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-white);
}
.step__title {
  margin: var(--space-2) 0;
  font-size: var(--text-lg);
  color: var(--color-white);
}
.step__body {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0;
}

/* ==========================================================================
   8. ESTADÍSTICAS DESTACADAS ("Por qué Precoll SAS")
   ========================================================================== */
.stat { padding: var(--space-5) 0; }
.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  margin-bottom: 0;
}
.stat__title {
  margin: var(--space-2) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.stat__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.section--dark .stat__title,
.section--photo .stat__title { color: var(--color-white); }
.section--dark .stat__body,
.section--photo .stat__body { color: rgba(255, 255, 255, 0.9); }
/* La cifra grande es roja sobre fondo claro; sobre foto o fondo oscuro va en
   blanco para mantener el contraste. */
.section--dark .stat__value,
.section--photo .stat__value { color: var(--color-white); }

/* Sobre la fotografía sin oscurecer: texto centrado y sombra proyectada para
   que se lea sobre cualquier zona clara de la imagen. */
.section--photo .stat {
  text-align: center;
  padding-block: var(--space-4);
  border-radius: var(--radius-md);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
  transition: transform var(--transition-base), background-color var(--transition-base);
}
/* Al pasar el puntero, el bloque se eleva y gana un fondo que lo separa de la
   fotografía, para que el dato quede destacado. Hereda el respeto a
   prefers-reduced-motion del Design System. */
.section--photo .stat:hover {
  transform: translateY(-6px);
  background: rgba(0, 0, 0, 0.42);
}
.section--photo .stat:hover .stat__value { color: var(--color-primary); }

/* Texto descriptivo: 16px semibold. Sin justificar — en columnas angostas de
   4, justificar obliga a estirar los espacios y a partir palabras con guion.
   Los subtítulos y la cifra siguen centrados heredando de .stat. */
.section--photo .stat__body {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Línea blanca de separación entre bloques. Vertical en la fila de 4 columnas
   (como el diseño aprobado) y horizontal cuando quedan apilados en una sola.
   En la rejilla de 2 columnas se omite: ahí una línea a un solo lado queda
   descolgada respecto a la retícula. */
@media (max-width: 599.98px) {
  .section--photo .stat + .stat {
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.45);
    padding-top: var(--space-5);
  }
}
@media (min-width: 960px) {
  .section--photo .stat + .stat {
    border-left: var(--border-width) solid rgba(255, 255, 255, 0.45);
    padding-left: var(--space-5);
  }
}

/* ==========================================================================
   9. CATÁLOGO — columna de foto dentro de la tabla técnica
   ========================================================================== */
/* Las fotos de poste son verticales (768×1376). A 120px de ancho quedaban
   estrechas y altísimas; con un encuadre 4/5 y más ancho se aprecia el poste
   sin que la fila de la tabla se dispare. El encuadre se sube al 40% porque
   el centro exacto de estas tomas cae en la pila de extremos. */
.catalog__photo {
  width: 220px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: center 40%;
}
.table--catalog td { vertical-align: middle; }

@media (max-width: 599.98px) {
  /* En móvil la tabla colapsa a tarjetas (Design System): la foto pasa a
     ocupar el ancho completo de la tarjeta en vez de una celda estrecha, y se
     separa la etiqueta del valor para que no queden pegados. */
  .table--catalog .catalog__photo { width: 100%; max-width: 220px; }
  .table--catalog td {
    gap: var(--space-4);
    align-items: flex-start;
  }
}

/* ==========================================================================
   10. CERTIFICACIONES
   ========================================================================== */
/* Aire entre el enunciado de la sección y los tres símbolos (48 px). El
   .section-head genérico deja 32 px, que aquí se quedaban cortos. */
.section-head--certs { margin-bottom: var(--space-7); }

/* Los tres certificados pasan a tres columnas ya en tablet. Se usa una rejilla
   propia en vez de .grid--3 porque esa clase es compartida: a 600 px reparte en
   2 + 1, un escalón que en otras secciones funciona pero aquí dejaría un
   certificado descolgado. Cabe de sobra: a 600 px cada columna mide ~173 px y
   el símbolo está limitado a 160 px. */
.certs__grid { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .certs__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Símbolo CIDET — la presentación la manda el Reglamento de Uso del Símbolo
   CIDET (RG-CP-0005 V4), no el Design System. Tres cosas vienen de ahí:

   · SIN RECUADRO. El numeral 6 lista los recuadros entre los usos incorrectos,
     así que el símbolo va limpio sobre el fondo, sin borde ni caja.
   · El NÚMERO PEGADO AL SÍMBOLO. El numeral 5.1 describe el uso correcto como
     un solo bloque: triángulo, debajo "CIDET", y debajo el número. Por eso la
     separación es mínima (space-2) y no la de una tarjeta.
   · LATO REGULAR. El numeral 5.3 exige esa tipografía para el número, centrada
     respecto al símbolo. Peso 400: "Regular" es literal, un semibold sintético
     ya no sería Lato Regular.

   No cambiar nada de esto por criterio estético sin revisar el reglamento. */
/* El archivo del simbolo venia con un lienzo casi vacio: el simbolo ocupaba
   212 px de ancho dentro de 582, y ese blanco sobrante separaba el numero del
   simbolo y rompia el bloque unico del numeral 5.1. La imagen esta recortada a
   su contenido, asi que aqui se limita el ancho para que no crezca de mas.

   El archivo sale del simbolo oficial de CIDET (ReglamentoSelloCIDET.jpg,
   920 x 500), recortado a su contenido: 342 x 366 px. Se muestra a 187 px,
   un 15 % menos que los 220 px anteriores, a peticion del cliente. Si se
   vuelve a cambiar el tamano, no pasar de 342 px o el navegador tendria que
   estirar la imagen y se veria blanda. */
.cert-card__media img {
  display: block;
  width: 100%;
  max-width: 187px;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}
.cert-card__number {
  font-family: var(--font-cert);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  text-align: center;
  margin-bottom: 0;
}
/* La llamada a la nota. Es una referencia, no parte del número: por eso va en
   rojo y en <sup>, separada del último carácter. Se usa --color-primary-dark y
   no --color-primary porque el mismo asterisco aparece también sobre el gris
   --color-surface del bloque de abajo, donde el rojo vivo se queda en 4,38:1 y
   no llega al 4,5:1 exigido. El oscuro da 6,84:1 sobre blanco y 6,38:1 sobre el
   gris, y así la marca es idéntica arriba y abajo. */
.cert-card__ref {
  color: var(--color-primary-dark);
  font-weight: var(--weight-bold);
  font-size: 0.85em;
  margin-left: 2px;
  letter-spacing: 0.05em;
}
/* Todo el bloque (símbolo + número) abre el certificado en PDF */
.cert-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  transition: transform var(--transition-base);
}
.cert-card__link:hover { transform: translateY(-4px); }
.cert-card__link:hover .cert-card__number { color: var(--color-primary); }

/* --- Bloque agrupado de declaraciones (numeral 8.2.3) ---------------------
   Secundario respecto a los símbolos: fondo gris del Design System, borde
   suave y texto en --color-muted (6,44:1 sobre ese gris). Nada de recuadro
   rojo ni de aviso legal agresivo. */
.cert-notas {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 960px) {
  .cert-notas {
    margin-top: var(--space-8);
    padding: var(--space-6);
  }
}
.cert-notas__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.cert-notas__icono { flex: none; }
.cert-notas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Cada nota en una sola fila, una debajo de otra (no en columnas): la marca
   colgando a la izquierda y el texto alineado consigo mismo al envolver. */
.cert-notas__item {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.cert-notas__marca {
  flex: none;
  min-width: 1.75rem;
  color: var(--color-primary-dark);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
}
.cert-notas__texto {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   11. CARRUSEL DE CLIENTES
   Desplazamiento por página con scroll nativo (permite arrastrar en táctil y
   navegar con teclado); el avance automático lo controla main.js cada 6 s.
   ========================================================================== */
/* Las flechas flanquean la fila de tarjetas, en una sola línea. */
.clients__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.clients__viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.clients__track {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.5s ease;
}

.client {
  flex: 0 0 280px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.client__logo {
  width: 140px;
  height: 90px;
  object-fit: contain;
}
.client__name {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-muted);
}

.clients__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--color-white);
  color: var(--color-ink);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.clients__btn:hover {
  border-color: var(--color-ink);
  color: var(--color-primary);
}

/* Con las flechas dentro de la fila, en móvil hay que ceder ancho para que la
   tarjeta siga entrando completa junto a los dos botones. */
@media (max-width: 599.98px) {
  .clients__row { gap: var(--space-2); }
  .clients__btn { width: 36px; height: 36px; }
  .client { flex-basis: 240px; }
}

/* ==========================================================================
   11bis. NOSOTROS — historia, línea de tiempo, pilares y planta
   ========================================================================== */

/* Bloque de texto corrido, justificado y en negrilla.
   Se justifica SIN hyphens: auto a propósito: el guionado automático fue lo
   que partía palabras a mitad en el Home. Sin él, justificar solo reparte los
   espacios entre palabras. */
.prose p {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-relaxed);
  text-align: justify;
  color: var(--color-text-muted);
}
.prose p:last-child { margin-bottom: 0; }

/* Línea de tiempo societaria */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  position: relative;
}
/* Eje vertical continuo */
.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: var(--space-2);
  bottom: var(--space-2);
  width: var(--border-width);
  background: var(--color-border);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--space-6);
}
.timeline__item:last-child { padding-bottom: 0; }
/* Punto rojo sobre el eje */
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) + 1px);
  top: var(--space-2);
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.timeline__year {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.timeline__body {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .split--historia { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* Pilares: misión, visión y política de calidad */
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pillar__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.pillar__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.pillar__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
/* Justificado y en negrilla, mismo criterio que .prose (sin hyphens: auto). */
.pillar__body {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-relaxed);
  text-align: justify;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Política de calidad: ocupa el ancho completo, imagen al lado del texto */
.pillar--wide { margin-top: var(--space-6); }
@media (min-width: 960px) {
  .pillar--wide {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: var(--space-7);
  }
  .pillar--wide .pillar__media img { aspect-ratio: 4 / 3; }
}

/* Planta de producción */
.planta__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.planta__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Etiqueta propia del bloque planta. No reutiliza .info-item__label porque esa
   clase también la usa la tarjeta de contacto del Home y allí debe conservar
   su tamaño actual. */
.planta__label {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Sobre el gris #F7F7F7 el rojo de marca queda en 4,38:1, justo por debajo
     del 4,5:1 que exige WCAG AA. --color-primary-dark sube a 6,38:1. */
  color: var(--color-primary-dark);
  margin-bottom: var(--space-1);
}
.planta__highlight {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.planta__body {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   11ter. PRODUCTOS — destacados del hero, pestañas, tarjetas de referencia
   ========================================================================== */

/* Hero de Productos: además del título lleva CTAs y una fila de destacados,
   así que necesita más alto que el hero interior estándar. */
.hero-inner--productos { min-height: 62vh; }
/* 22px es el valor del boceto de Productos; Nosotros conserva sus 20px. */
.hero-inner--productos .hero-inner__lead { font-size: 22px; }
.hero-inner__title-accent { color: var(--color-primary); }
.hero-inner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Botones más grandes solo en este hero: el .btn global conserva su tamaño
   base, que es el que ya usan Home y Nosotros. */
.hero-inner__actions .btn {
  font-size: 18px;
  padding: 16px 24px;
}

/* Destacados: tarjeta flotante sobre la foto, con el ícono en caja blanca.
   Los valores de color de este bloque salen del boceto y no de la paleta de
   marca; quedan acotados a este componente. */
.highlights {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
/* Más ancha y más baja que el valor original del boceto: con 267px y el ícono
   de 72px, "510 – 1350 kgf" no cabía en un renglón. */
.highlight {
  flex: 0 0 296px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(8, 12, 20, 0.55);
  border: var(--border-width) solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.highlight__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  object-fit: contain;
}
/* Interlineado ajustado: la cuarta tarjeta ("Asesoría técnica especializada")
   ocupa dos renglones y, por el estirado del flex, marcaba el alto de las
   cuatro. Con leading-tight bajan todas sin reducir el tamaño de letra. */
.highlight__value {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: 0;
}
.highlight__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: #cfd4dc;
  margin-top: 3px;
  margin-bottom: 0;
}

/* En pantallas estrechas la tarjeta fija de 267px no cabe: pasa a ancho libre */
@media (max-width: 599.98px) {
  .highlight { flex: 1 1 100%; }
}

/* Pestañas de segmento (patrón ARIA tablist/tab/tabpanel).
   El contenedor tipo pastilla va en .tabs__list, que es el div que envuelve
   los 3 botones; .tabs envuelve además los paneles y no debe ser flex. */
.tabs__list {
  display: flex;
  gap: 6px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: var(--space-6);
}
.tabs__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.tabs__tab[aria-selected='false'] {
  background: transparent;
  color: var(--color-text);
}
.tabs__tab[aria-selected='false']:hover { color: var(--color-primary); }
.tabs__tab[aria-selected='true'] {
  background: var(--color-primary);
  color: var(--color-white);
}
.tabs__icon { flex-shrink: 0; }
.tabs__panel[hidden] { display: none; }

/* Tabla técnica con celdas delineadas y datos que no se parten en dos
   renglones (altura, carga y certificación). */
.table--bordered { border: var(--border-width) solid var(--color-border); }
.table--bordered th,
.table--bordered td { border: var(--border-width) solid var(--color-border); }
.table--bordered thead th {
  background: var(--color-bg-alt);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
/* Los datos técnicos van en negrilla; la referencia, en rojo de marca. */
.table--bordered td[data-label='Altura'],
.table--bordered td[data-label='Carga'],
.table--bordered td[data-label='Aplicación'],
.table--bordered td[data-label='Certificación'] {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
/* La tabla se apoya sobre el gris #F7F7F7 de .section--alt, donde el rojo de
   marca se queda en 4,38:1. Aquí se usa el rojo oscuro del Design System
   (6,38:1); en el resto del sitio los enlaces rojos van sobre blanco y no
   necesitan cambio. */
.table--bordered td[data-label='Ref.'] {
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
}
.table--bordered td a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--color-primary-dark);
}
@media (min-width: 600px) {
  .table__nowrap { white-space: nowrap; }
}

/* Bajo 600px los tres nombres no caben en una fila de pastilla */
@media (max-width: 599.98px) {
  .tabs__list { flex-direction: column; }
}

/* Imagen de viguetas: 2038×771 px, panorámica con las dos piezas lado a lado.
   No se le impone aspect-ratio ni object-fit: cover — recortaría una de ellas. */
.viguetas__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.viguetas__media img {
  width: 100%;
  height: auto;
}

/* Tarjeta de referencia por altura: borde izquierdo rojo, con la altura y la
   miniatura en la cabecera. No lleva enlace a la ficha técnica: la ficha es
   por segmento, no por altura, y se descarga desde la tabla técnica. */
.ref-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-left: var(--border-width-accent) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.ref-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Miniatura vertical: las fotos de poste son verticales, así que un recorte
   apaisado se comía el poste y dejaba a la vista solo la pila de extremos.
   El 40% desplaza el encuadre hacia la zona donde el poste se aprecia entero. */
.ref-card__thumb {
  width: 124px;
  height: 164px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--radius-sm);
}
.ref-card__height {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin-bottom: 0;
}
/* La unidad "m" va en negro y negrilla, como el resto de la cifra */
.ref-card__unit {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.ref-card__label {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0;
}
/* Regla divisoria entre el bloque de altura y el de cargas */
.ref-card__label--loads {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}
/* Último bloque de la tarjeta: el margen inferior lo pone ya el padding de
   .ref-card, así que aquí se deja en cero para no duplicar el espacio. */
.ref-card__loads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

/* Caja de contacto rápido: fondo azul marino del boceto, ícono blanco dentro
   de un círculo translúcido, textos en blanco/gris claro. El rojo de marca se
   reserva únicamente para el botón. */
.quick-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  background: #0F1E33;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.quick-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}
.quick-contact__text { flex: 1 1 20rem; }
.quick-contact__title {
  font-size: var(--text-xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}
.quick-contact__body {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
}
/* Botón más grande que el .btn base, solo en esta caja */
.quick-contact .btn {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-6);
}

/* ==========================================================================
   11quater. CONTACTO — rejilla, datos directos, tarjeta de llamada y mapa
   ========================================================================== */

/* Una sola vez en el DOM: llamada, formulario, datos. En móvil se lee en ese
   orden; en escritorio las áreas recolocan el formulario a la izquierda con
   los datos y la llamada apilados a la derecha. */
.contact-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-areas:
    'call'
    'form'
    'data';
}
.contact-grid__call { grid-area: call; }
.contact-grid__form { grid-area: form; }
.contact-grid__data { grid-area: data; }

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      'form data'
      'form call';
    align-items: start;
    gap: var(--space-6);
  }
}

/* Alto fijo de 440px, no relativo al viewport: así mide lo mismo en cualquier
   pantalla. Nosotros y Productos conservan su hero de 46vh.
   Decisión del cliente tras comparar ambas opciones: con un piso común de
   480px la etiqueta "Contacto" bajaba demasiado y quedaba desbalanceada
   respecto a los títulos de Nosotros y Productos. */
.hero-inner--contacto {
  min-height: 440px;
  /* El contenido de esta página es corto (título de un renglón) y con el
     anclaje inferior heredado caía 94px más abajo que en Nosotros y
     Productos, donde el texto llena el hero. Anclado arriba, la etiqueta
     queda a los mismos 64px del borde que en las otras dos páginas. */
  align-items: flex-start;
}
/* Encuadre centrado: es el que deja dentro del recorte la acción completa
   —el arco de soldadura, las chispas, la canasta de acero y los paquetes de
   varilla en primer plano—. Encuadrar desde arriba dejaba fuera esa franja y
   la foto perdía fuerza. El texto puede cruzar la soldadura: se sostiene con
   el degradado del overlay y la sombra proyectada. */
.hero-inner--contacto .hero-inner__media img { object-position: center 45%; }
/* Más aire bajo la etiqueta: el título y la bajada descienden y el bloque
   queda más centrado sobre la foto, sin mover la etiqueta de sus 64px. */
.hero-inner--contacto .hero-label { margin-bottom: var(--space-8); }

/* Mismo borde y radio que el recuadro de datos de contacto, para que ambas
   columnas se lean como piezas hermanas. */
.contact-panel {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* Campos, rótulos y botón del formulario: +2px sobre el tamaño base */
.contact-panel .form-input,
.contact-panel .form-select,
.contact-panel .form-textarea {
  font-size: var(--text-md);
}
.contact-panel .form-label { font-size: var(--text-base); }
.contact-panel .btn,
.call-card .btn { font-size: var(--text-base); }
.contact-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.contact-panel__lead {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px) {
  .contact-panel { padding: var(--space-6); }
}

/* Datos de contacto directo: los cuatro bloques van dentro de un recuadro
   común, separados entre sí por una línea. */
.contact-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  display: grid;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-primary);
  background: rgba(232, 5, 31, 0.08);
  border-radius: var(--radius-pill);
}
/* +2px y negrilla respecto al tamaño base del sistema */
.contact-item__label {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.contact-item__value {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: 0;
}
.contact-item__value a { color: var(--color-text); }
.contact-item__value a:hover { color: var(--color-primary); }

/* Tarjeta de llamada directa */
.call-card {
  background: var(--color-bg-alt);
  border-left: var(--border-width-accent) solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5);
}
.call-card__text {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Mapa con tarjeta de dirección superpuesta */
.map-block { position: relative; }
.map-block .map-frame { min-height: 380px; }
.map-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.map-card__address {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.map-card__code {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Desde tablet la tarjeta flota sobre el mapa, como en el boceto */
@media (min-width: 960px) {
  .map-card {
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-6);
    width: 22rem;
    margin-top: 0;
  }
}

/* ==========================================================================
   12. UBICACIÓN / MAPA
   ========================================================================== */
.map-frame {
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  display: block;
}
.info-list { display: grid; gap: var(--space-4); }
.info-item__label {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.info-item__value {
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 0;
}
.info-item__value a { color: var(--color-text); }
.info-item__value a:hover { color: var(--color-primary); }

.split { display: grid; gap: var(--space-6); }
@media (min-width: 960px) {
  .split { grid-template-columns: 1.35fr 1fr; align-items: center; gap: var(--space-7); }
  /* El panel del formulario ocupa menos ancho que la columna de texto. */
  .split--form { grid-template-columns: 1.55fr 1fr; }
}

/* ==========================================================================
   13. SECCIÓN DE COTIZACIÓN (fondo rojo de marca)
   ========================================================================== */
.quote {
  background: var(--color-primary);
  color: var(--color-white);
}
/* Sobre el rojo de marca, el rojo de la etiqueta no contrasta: se invierte a
   blanco. Es el mismo componente, no una etiqueta distinta. */
.quote .section-label__text { color: var(--color-white); }
.quote .section-label::after { background: rgba(255, 255, 255, 0.35); }
.quote__title { color: var(--color-white); }
.quote__lead {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}
/* Sobre el rojo de marca, el blanco al 92% da 4,09:1 y WCAG AA pide 4,5:1.
   El blanco puro llega a 4,70:1 y es prácticamente el mismo tono. */
.quote__contact {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-white);
}
.quote__contact a { color: var(--color-white); text-decoration: underline; }
.quote__panel {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) {
  .quote__panel { padding: var(--space-5); }
}
/* Dentro del panel los campos van más compactos que el .form-group estándar */
.quote__panel .form-group { margin-bottom: var(--space-4); }
.quote__panel .form-textarea { min-height: 96px; }

/* Variante compacta usada en Productos (~20% + 10% adicional). Va como
   modificador para no encoger también la cotización del Home, ya aprobada. */
.quote--compact { padding-block: var(--space-6); }
.quote--compact .quote__panel { padding: var(--space-3); }
.quote--compact .quote__panel .form-group { margin-bottom: var(--space-3); }
.quote--compact .quote__panel .form-textarea { min-height: 68px; }
.quote--compact .quote__title { font-size: var(--text-xl); }
/* Bloque de contacto: 2px más y en negrilla para que se lea sobre el rojo */
.quote--compact .quote__contact {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
@media (min-width: 960px) {
  .quote--compact .split--form { gap: var(--space-5); }
}

/* Botón a lo ancho del panel, alineado con los campos */
.btn--block { width: 100%; }

/* Rejilla interna del formulario */
.form-grid { display: grid; gap: 0 var(--space-4); }
@media (min-width: 600px) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid__full { grid-column: 1 / -1; }
}
.form-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* Autorizaciones de tratamiento de datos.
   Van en un <fieldset> sin borde: agrupa semánticamente las dos casillas sin
   añadir una caja visual que compita con el formulario. */
.form-consent {
  border: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.form-consent__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.form-consent__box {
  width: 18px;
  height: 18px;
  margin-top: 2px;          /* alinea con la primera línea del texto */
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.form-consent__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  cursor: pointer;
}
.form-consent__text a {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}
.form-consent__req {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.form-consent__opt { color: var(--color-muted); }
.form-consent__box.is-error {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Honeypot antispam: fuera de pantalla, sin tabulación ni lectura */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensaje de resultado del envío */
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.form-status[hidden] { display: none; }
.form-status--error {
  background: rgba(232, 5, 31, 0.08);
  border: var(--border-width) solid rgba(232, 5, 31, 0.25);
  color: var(--color-primary-dark);
}
/* Confirmación de envío. Verde no está en la paleta de marca, así que el
   estado correcto se resuelve con la superficie neutra y el borde de la
   propia escala, apoyándose en el texto para comunicar el resultado. */
.form-status--ok {
  background: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }

.footer__logo {
  width: 100%;
  max-width: 280px;
  height: 80px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--space-4);
}
.footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}
.footer__heading {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-3);
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
/* Canales específicos (PQR, protección de datos): van bajo los documentos
   legales a los que pertenecen, separados del contacto comercial. */
.footer__list--canales {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.14);
  gap: var(--space-3);
}
.footer__canal {
  display: block;
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   PÁGINA 404
   Solo la usa 404.html. No añade colores ni tipografías: reutiliza los mismos
   bloques del resto del sitio (.section, .section-label, .section-head,
   .hero__actions, .btn). Lo único que aporta es una altura mínima, para que
   en pantallas altas el pie no quede flotando a media página con el contenido
   arriba y un hueco vacío debajo.
   ========================================================================== */
.error-page {
  display: flex;
  align-items: center;
  min-height: 62vh;
}
.error-page__ayuda {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
}
/* Subrayados: dentro de un párrafo, el color por sí solo no basta para
   distinguir un enlace (WCAG 1.4.1). Es la misma convención que ya usa
   .quote__contact en el resto del sitio. */
.error-page__ayuda a { text-decoration: underline; }