/* ===================================================
   EXTRUPLÁSTICOS MH — Estilos principales
   =================================================== */

/* ---------- Variables ---------- */
:root {
  --color-blue: #1a3a6b;
  --color-blue-light: #2c5aa0;
  --color-blue-dark: #0f2440;
  --color-green: #3a9b5c;
  --color-green-light: #4db872;
  /* Verde accesible para texto sobre blanco (contraste 5.06:1). */
  --color-green-dark: #2f7d4a;
  --color-white: #ffffff;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f0f2f5;
  --color-gray-200: #e2e6ea;
  --color-gray-300: #cdd3da;
  /* Gris claro para texto sobre fondo oscuro (contraste 6.5:1 sobre gray-900). */
  --color-gray-400: #98a2ae;
  --color-gray-500: #6c757d;
  --color-gray-700: #3d4550;
  --color-gray-900: #1a1d23;
  --color-error: #ffb4ac;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  --container-max: 1200px;
  --section-padding: 100px;

  /* Altura real del header: la usan el hero, el menú móvil y el scroll a anclas. */
  --header-h: 80px;

  --radius: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);

  --transition: 0.3s ease;

  /* Capas: valores bajos y explícitos, sin números arbitrarios. */
  --z-menu: 90;
  --z-header: 100;
  --z-lightbox: 200;
  --z-skip: 300;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  /* Compensa el header fijo al saltar a una ancla. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-family);
  line-height: var(--line-height-base);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` evita el scroll horizontal sin crear un contenedor de scroll
     (a diferencia de `hidden`, no rompe position: sticky/fixed). */
  overflow-x: clip;
}

/* Bloquea el scroll del fondo mientras el menú móvil o el lightbox están abiertos. */
body.is-nav-open,
body.is-scroll-locked {
  overflow: hidden;
}

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

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

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

/* Foco visible y consistente en todo el sitio. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* Salto al contenido principal para usuarios de teclado y lector de pantalla. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  padding: 12px 20px;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

.section-overtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-green-dark);
  margin-bottom: 8px;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.0625rem;
  color: var(--color-gray-500);
  max-width: 640px;
  line-height: 1.7;
}

.section-header {
  margin-bottom: 56px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  text-align: center;
}

.btn--primary {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-blue-light);
}

.btn--outline {
  border: 2px solid var(--color-blue);
  color: var(--color-blue);
  padding: 10px 30px;
}

.btn--outline:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.btn--full {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn__icon {
  flex-shrink: 0;
}

/* ---------- Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   NAVBAR
   =================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-gray-200);
  transition: box-shadow var(--transition);
}

.navbar--scrolled {
  box-shadow: var(--shadow-md);
}

.navbar .container {
  max-width: 1400px;
  padding: 0 40px;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Se fija el ancho y se deja la altura automática: el logo nunca se deforma. */
.navbar__logo img {
  width: 265px;
  height: auto;
}

.navbar__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
}

.navbar__link:hover {
  color: var(--color-blue);
  background-color: var(--color-gray-50);
}

.navbar__link--active {
  color: var(--color-blue);
}

.navbar__link--cta {
  background-color: var(--color-blue);
  color: var(--color-white);
  margin-left: 8px;
}

.navbar__link--cta:hover {
  background-color: var(--color-blue-light);
  color: var(--color-white);
}

/* Dropdown */
.navbar__dropdown {
  position: relative;
}

.navbar__link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
}

.navbar__link--dropdown:hover {
  color: var(--color-blue);
  background-color: var(--color-gray-50);
}

.navbar__dropdown-arrow {
  transition: transform var(--transition);
}

.navbar__link--dropdown[aria-expanded='true'] .navbar__dropdown-arrow {
  transform: rotate(180deg);
}

.navbar__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* `visibility` nunca se interpola (0s): sólo se retrasa al cerrar. Interpolarla
     deja el panel a medio mostrar ante cualquier recálculo de estilos. */
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0.3s;
}

.navbar__dropdown.open .navbar__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0s;
}

.navbar__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  transition: color var(--transition), background-color var(--transition);
}

.navbar__sublink:hover {
  color: var(--color-blue);
  background-color: var(--color-gray-50);
}

/* Hamburger */
.navbar__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius);
}

.navbar__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-gray-700);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.navbar__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===================================================
   HERO CAROUSEL
   =================================================== */
.hero {
  padding-top: var(--header-h);
}

.hero__carousel {
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--header-h));
  min-height: 500px;
  max-height: 800px;
}

.hero__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  /* `visibility` saca las diapositivas inactivas del orden de tabulación
     y del árbol de accesibilidad, no sólo de la vista. */
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.hero__slide--active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s linear 0s;
}

.hero__slide-bg {
  position: absolute;
  inset: 0;
}

.hero__slide-bg--gradient {
  background: linear-gradient(160deg, var(--color-blue-dark) 0%, var(--color-blue) 50%, var(--color-blue-light) 100%);
}

.hero__slide--logo::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero__slide--logo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(200deg, rgba(58, 155, 92, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero__slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Las diapositivas "Producción" y "Desarrollo técnico" comparten la misma
   fotografía panorámica de la planta (1280×576): al recortarse en vertical
   sólo cuenta el eje horizontal, así que cada una fija su propio punto focal.
   Producción -> zona de máquinas y materia prima (derecha).
   Desarrollo técnico -> puesto de trabajo del operario (centro izquierda). */
.hero__slide--produccion .hero__slide-bg img {
  object-position: 72% center;
}

.hero__slide--desarrollo .hero__slide-bg img {
  object-position: 38% center;
}

.hero__slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 36, 64, 0.78) 0%, rgba(26, 58, 107, 0.6) 100%);
}

.hero__slide-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

/* El logo entregado es un PNG con fondo blanco opaco (sin canal alfa real).
   Sobre fondos oscuros se presenta en una placa blanca para que se lea como
   una decisión de diseño y no como un recorte defectuoso.
   Sustituir por SVG o PNG con transparencia cuando la empresa lo facilite. */
.hero__slide-logo {
  /* Tamaño nativo del archivo (407×92): nunca se amplía. */
  width: 340px;
  height: auto;
  margin-bottom: 28px;
  padding: 10px 16px;
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.hero__slide--logo .btn--primary {
  background-color: var(--color-white);
  color: var(--color-blue);
}

.hero__slide--logo .btn--primary:hover {
  background-color: var(--color-gray-100);
}

.hero__overtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-green-dark);
  margin-bottom: 14px;
}

.hero__overtitle--light {
  color: var(--color-green-light);
}

.hero__title {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-blue-dark);
  margin-bottom: 18px;
  max-width: 22ch;
  text-wrap: balance;
}

.hero__title--light {
  color: var(--color-white);
}

.hero__subtitle {
  font-size: 1.0625rem;
  color: var(--color-gray-500);
  line-height: 1.7;
  margin-bottom: 30px;
  max-width: 56ch;
}

.hero__subtitle--light {
  color: rgba(255, 255, 255, 0.88);
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Controles del carrusel */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: var(--color-blue-dark);
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition);
}

.hero__arrow:hover {
  background-color: var(--color-white);
}

.hero__arrow--prev {
  left: 24px;
}

.hero__arrow--next {
  right: 24px;
}

.hero__indicators {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 4px;
}

/* Punto pequeño pero con área táctil de 44 px. */
.hero__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.hero__indicator::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.75);
  transition: background-color var(--transition), transform var(--transition);
}

.hero__indicator[aria-current='true']::before {
  background-color: var(--color-white);
  border-color: var(--color-white);
  transform: scale(1.25);
}

/* ===================================================
   ABOUT BRIEF
   =================================================== */
.about-brief {
  padding: var(--section-padding) 0;
  background-color: var(--color-white);
}

.about-brief__card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.about-brief__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-brief__title {
  font-size: 2.25rem;
}

.about-brief__desc {
  font-size: 1rem;
  color: var(--color-gray-500);
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-brief__capabilities {
  display: grid;
  gap: 16px;
}

.capability {
  padding: 24px 28px;
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-green);
}

.capability__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-green-dark);
  margin-bottom: 6px;
}

.capability__value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-blue-dark);
  line-height: 1.6;
}

/* ===================================================
   PRODUCTS
   =================================================== */
.products {
  padding: var(--section-padding) 0;
  background-color: var(--color-gray-50);
}

.products__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.products__text {
  padding-top: 16px;
}

.products__images {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.products__image-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 240px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

.products__image-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.5s ease;
}

.products__image-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 36, 64, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
}

.products__image-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 32px;
  border: 2px solid var(--color-white);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.products__image-link:hover .products__image-overlay,
.products__image-link:focus-visible .products__image-overlay {
  background-color: rgba(15, 36, 64, 0.6);
}

.products__image-link:hover .products__image-label,
.products__image-link:focus-visible .products__image-label {
  opacity: 1;
  transform: translateY(0);
}

.products__image-link:hover img {
  transform: scale(1.05);
}

/* ===================================================
   CLIENTS
   =================================================== */
.clients {
  padding: var(--section-padding) 0;
  background-color: var(--color-white);
}

.clients__marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.clients__track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.clients__marquee:hover .clients__track,
.clients__marquee:focus-within .clients__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 180px;
  height: 100px;
  padding: 20px 24px;
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}

/* Sin atenuar: varios logos de cliente son claros y con grayscale + opacidad
   reducida resultaban ilegibles, que es justo lo contrario de lo que esta
   sección debe transmitir. */
.client-logo img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* ===================================================
   CTA / CONTACTO
   =================================================== */
.cta {
  padding: var(--section-padding) 0;
  background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-blue) 100%);
}

.cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.cta__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
}

.cta__desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

/* Datos de contacto y ubicación */
.cta__contact {
  display: grid;
  gap: 4px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cta__contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}

.cta__contact-item svg {
  flex-shrink: 0;
  color: var(--color-green-light);
}

.cta__contact-item a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transition: text-decoration-color var(--transition);
}

.cta__contact-item a:hover {
  text-decoration-color: var(--color-white);
}

/* Formulario */
.cta__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

.form-group input,
.form-group textarea {
  font-family: var(--font-family);
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: border-color var(--transition), background-color var(--transition);
}

.form-group textarea {
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 3px solid var(--color-green-light);
  outline-offset: 1px;
  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.14);
}

.form-group input[aria-invalid='true'],
.form-group textarea[aria-invalid='true'] {
  border-color: var(--color-error);
  background-color: rgba(255, 122, 106, 0.12);
}

.form-error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-error);
}

.form-error:empty {
  display: none;
}

/* Campo trampa para bots: fuera de pantalla pero presente en el DOM. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.form-consent a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-status {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: var(--radius);
}

.form-status:empty {
  display: none;
}

.form-status--success {
  color: var(--color-white);
  background-color: rgba(77, 184, 114, 0.22);
  border: 1px solid var(--color-green-light);
}

.form-status--error {
  color: var(--color-error);
  background-color: rgba(255, 122, 106, 0.14);
  border: 1px solid var(--color-error);
}

.cta .btn--primary {
  background-color: var(--color-green);
  margin-top: 8px;
}

.cta .btn--primary:hover {
  background-color: var(--color-green-light);
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);
  padding-top: 64px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* Misma razón que en el hero: el logo lleva fondo blanco propio. */
.footer__brand img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
  padding: 8px 12px;
  background-color: var(--color-white);
  border-radius: var(--radius);
}

.footer__brand p {
  font-size: 0.875rem;
  color: var(--color-gray-400);
  max-width: 320px;
}

.footer h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-200);
  margin-bottom: 12px;
}

.footer__links ul {
  display: flex;
  flex-direction: column;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.875rem;
  color: var(--color-gray-400);
  transition: color var(--transition);
}

.footer__links a:hover {
  color: var(--color-white);
}

.footer__contact p {
  font-size: 0.875rem;
  color: var(--color-gray-400);
  margin-bottom: 10px;
}

.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-green-light);
  transition: color var(--transition);
}

.footer__contact a:hover {
  color: var(--color-white);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
}

.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: center;
}

.footer__bottom p,
.footer__bottom a {
  font-size: 0.8125rem;
  color: var(--color-gray-400);
}

.footer__bottom a:hover {
  color: var(--color-white);
}

/* ===================================================
   PÁGINA DE CATÁLOGO
   =================================================== */
.catalog-hero {
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: 64px;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.catalog-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 22ch;
  text-wrap: balance;
}

.catalog-hero__desc {
  font-size: 1.0625rem;
  color: var(--color-gray-500);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 32px;
}

.catalog-hero__nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.catalog-hero__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 24px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius);
  color: var(--color-gray-700);
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.catalog-hero__nav-link:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background-color: var(--color-gray-50);
}

.catalog-section {
  padding: var(--section-padding) 0;
  background-color: var(--color-white);
}

.catalog-section--alt {
  background-color: var(--color-gray-50);
}

.catalog-section__header {
  margin-bottom: 48px;
}

.catalog-category {
  margin-bottom: 56px;
}

.catalog-category:last-of-type {
  margin-bottom: 48px;
}

.catalog-category__header {
  margin-bottom: 32px;
  padding-left: 16px;
  border-left: 3px solid var(--color-blue);
}

.catalog-category__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  margin-bottom: 8px;
}

.catalog-category__desc {
  font-size: 0.9375rem;
  color: var(--color-gray-500);
  line-height: 1.7;
  max-width: 600px;
}

/* Rejilla de producto */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.catalog-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.catalog-card:hover {
  border-color: var(--color-blue-light);
  box-shadow: var(--shadow-md);
}

/* La imagen ampliable es un <button>: accesible por teclado y con rol correcto. */
.catalog-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 220px;
  padding: 24px;
  background-color: var(--color-white);
  transition: opacity 0.2s ease;
}

.catalog-card__button:hover {
  opacity: 0.85;
}

.catalog-card__button img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Tarjeta con dos vistas del mismo producto: cada imagen se amplía por separado. */
.catalog-card__duo {
  display: flex;
}

.catalog-card__duo .catalog-card__button {
  flex: 1;
  min-width: 0;
  padding: 20px 12px;
}

.catalog-card__caption {
  padding: 0 20px 18px;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: 1.5;
}

/* CTA intercalada */
.catalog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 40px;
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.catalog-section--alt .catalog-cta {
  background-color: var(--color-white);
}

.catalog-cta__text {
  font-size: 1rem;
  color: var(--color-gray-700);
  line-height: 1.6;
  max-width: 560px;
}

/* Bloque de desarrollo (inyectados) */
.catalog-develop {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
}

/* Bloques de servicio consecutivos (desarrollo y maquila de inyección). */
.catalog-develop + .catalog-develop {
  margin-top: 24px;
}

.catalog-develop__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  margin-bottom: 16px;
}

.catalog-develop__desc {
  font-size: 1rem;
  color: var(--color-gray-500);
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 640px;
}

.catalog-develop__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 32px;
}

.catalog-develop__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.catalog-develop__list li svg {
  flex-shrink: 0;
  color: var(--color-green-dark);
}

.catalog-develop__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* CTA final */
.catalog-final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-blue) 100%);
}

.catalog-final-cta__inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.catalog-final-cta__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
}

.catalog-final-cta__desc {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 32px;
}

.catalog-final-cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.catalog-final-cta__btn-wa {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.catalog-final-cta__btn-wa:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* ===================================================
   LIGHTBOX
   =================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0);
  visibility: hidden;
  opacity: 0;
  /* `visibility` cambia de golpe (nunca interpolada): al abrir debe ser
     inmediata para que el botón de cierre pueda recibir el foco, y al cerrar
     se retrasa hasta que termina el desvanecido. */
  transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox.is-active {
  visibility: visible;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.85);
  transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

.lightbox__content {
  position: relative;
  max-width: min(1200px, 92vw);
  max-height: 85vh;
  transform: scale(0.94);
  transition: transform 0.3s ease;
}

.lightbox.is-active .lightbox__content {
  transform: scale(1);
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  background-color: var(--color-white);
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--color-white);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ===================================================
   PÁGINAS SIMPLES (privacidad, 404, gracias)
   =================================================== */
.page {
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: var(--section-padding);
  min-height: 70vh;
}

.page__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  line-height: 1.2;
  margin-bottom: 16px;
  max-width: 24ch;
  text-wrap: balance;
}

.page__body {
  max-width: 720px;
}

.page__body h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  margin: 32px 0 12px;
}

.page__body p,
.page__body li {
  font-size: 1rem;
  color: var(--color-gray-500);
  line-height: 1.75;
  margin-bottom: 12px;
}

.page__body ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
}

/* Sólo los enlaces de texto: sin `:not(.btn)` esta regla ganaba en
   especificidad a `.btn--primary` y pintaba la etiqueta del mismo azul que
   el fondo del botón, dejándola invisible. */
.page__body a:not(.btn) {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page__note {
  padding: 20px 24px;
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-green);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

.page__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ===================================================
   RESPONSIVE
   =================================================== */

/* Escritorio pequeño / tablet grande */
@media (max-width: 1024px) {
  :root {
    --section-padding: 80px;
  }

  .navbar .container {
    padding: 0 24px;
  }

  .navbar__logo img {
    width: 230px;
  }

  .hero__title {
    font-size: 2.25rem;
  }

  .hero__carousel {
    max-height: 700px;
  }

  .about-brief__card {
    padding: 40px 32px;
  }

  .about-brief__title {
    font-size: 1.875rem;
  }

  .products__layout {
    gap: 40px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .catalog-hero__title {
    font-size: 2rem;
  }

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

  .catalog-develop {
    padding: 40px 32px;
  }
}

/* Tablet y móvil: navegación colapsada */
@media (max-width: 768px) {
  :root {
    --section-padding: 64px;
    /* Header compacto: deja el hero cerca del borde superior. */
    --header-h: 64px;
  }

  .section-title {
    font-size: 1.625rem;
  }

  /* --- Header móvil --- */
  .navbar .container {
    padding: 0 16px;
  }

  /* Ancho fluido dentro del rango pedido (132–172 px) manteniendo proporción. */
  .navbar__logo img {
    width: clamp(132px, 42vw, 172px);
    height: auto;
  }

  .navbar__toggle {
    display: flex;
  }

  .navbar__menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 12px 16px 20px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0.3s;
  }

  .navbar__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0s;
  }

  .navbar__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .navbar__link,
  .navbar__link--dropdown {
    width: 100%;
    padding: 12px 12px;
    font-size: 1rem;
  }

  .navbar__link--dropdown {
    justify-content: space-between;
  }

  /* Botón de cotización compacto dentro del menú: nunca a ancho completo. */
  .navbar__link--cta {
    width: auto;
    align-self: flex-start;
    margin: 12px 0 0;
    padding: 12px 28px;
  }

  .navbar__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-gray-200);
    border-radius: 0;
    margin-left: 12px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .navbar__dropdown.open .navbar__submenu {
    max-height: 220px;
  }

  /* --- Hero móvil --- */
  .hero__carousel {
    /* `svh` evita el salto de altura al ocultarse la barra del navegador. */
    height: calc(100svh - var(--header-h));
    min-height: 440px;
    max-height: 600px;
  }

  /* En móvil sólo se ve una franja estrecha de la fotografía: los puntos
     focales se separan un poco más para que cada diapositiva siga mostrando
     su zona característica. */
  .hero__slide--produccion .hero__slide-bg img {
    object-position: 76% center;
  }

  .hero__slide--desarrollo .hero__slide-bg img {
    object-position: 34% center;
  }

  /* Reserva el espacio inferior de los controles: nunca tapan el texto. */
  .hero__slide-content {
    padding-bottom: 84px;
  }

  .hero__title {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 14px;
    max-width: 17ch;
  }

  .hero__subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 46ch;
  }

  .hero__slide-logo {
    width: 190px;
    margin-bottom: 18px;
  }

  /* Flechas abajo, a los lados de los puntos: fuera del bloque de texto. */
  .hero__arrow {
    top: auto;
    bottom: 12px;
    transform: none;
    width: 44px;
    height: 44px;
  }

  .hero__arrow--prev {
    left: 12px;
  }

  .hero__arrow--next {
    right: 12px;
  }

  .hero__indicators {
    bottom: 12px;
  }

  /* --- Resto de secciones --- */
  .about-brief__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-brief__card {
    padding: 36px 24px;
  }

  .about-brief__title {
    font-size: 1.625rem;
  }

  .products__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .products__images {
    flex-direction: row;
    gap: 16px;
  }

  .products__image-link {
    flex: 1;
    height: 200px;
  }

  .cta__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .client-logo {
    width: 150px;
    height: 88px;
    padding: 16px 20px;
  }

  .client-logo img {
    max-height: 46px;
  }

  .clients__track {
    gap: 20px;
  }

  .catalog-hero {
    padding-top: calc(var(--header-h) + 44px);
    padding-bottom: 48px;
  }

  .catalog-hero__title {
    font-size: 1.75rem;
  }

  .catalog-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }

  .catalog-final-cta__title {
    font-size: 1.625rem;
  }

  .page {
    padding-top: calc(var(--header-h) + 36px);
  }

  .page__title {
    font-size: 1.75rem;
  }
}

/* Móvil */
@media (max-width: 480px) {
  :root {
    --section-padding: 48px;
  }

  .container {
    padding: 0 16px;
  }

  .section-title {
    font-size: 1.4375rem;
  }

  .hero__carousel {
    min-height: 420px;
    max-height: 560px;
  }

  .hero__title {
    font-size: 1.625rem;
    max-width: 16ch;
  }

  .hero__slide-logo {
    width: 168px;
    margin-bottom: 14px;
  }

  .hero__actions .btn {
    /* Ancho ajustado al texto: no ocupa toda la fila. */
    padding: 12px 28px;
  }

  .about-brief__card {
    padding: 28px 20px;
  }

  .about-brief__title {
    font-size: 1.4375rem;
  }

  .products__images {
    flex-direction: column;
  }

  .products__image-link {
    height: 180px;
  }

  .client-logo {
    width: 132px;
    height: 78px;
    padding: 14px 16px;
  }

  .client-logo img {
    max-height: 40px;
  }

  .clients__track {
    gap: 16px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .catalog-hero__title {
    font-size: 1.5rem;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-card__button {
    height: 200px;
  }

  .catalog-develop {
    padding: 32px 20px;
  }

  .catalog-develop__title {
    font-size: 1.25rem;
  }

  .catalog-final-cta {
    padding: 56px 0;
  }

  .catalog-final-cta__title {
    font-size: 1.4375rem;
  }

  .lightbox {
    padding: 12px;
  }
}

/* Pantallas muy estrechas (320 px) */
@media (max-width: 360px) {
  .hero__title {
    font-size: 1.5rem;
  }

  .hero__subtitle {
    font-size: 0.875rem;
  }

  .navbar__link--cta {
    padding: 12px 22px;
  }
}

/* ===================================================
   MOVIMIENTO REDUCIDO
   =================================================== */
@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;
  }

  /* El contenido revelado al hacer scroll debe verse igual, sin animación. */
  .reveal {
    opacity: 1;
    transform: none;
  }

  .clients__track {
    animation: none;
  }

  /* Sin marquesina, la fila de logos debe poder recorrerse manualmente. */
  .clients__marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}