/* =========================================================
   INTERBANDAS — MVP estilos
   Sistema de diseño derivado de "Plan MVP - Página web de
   Interbandas.md", sección 10 (Dirección visual).
   ========================================================= */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; }

/* ---------- Tokens ---------- */
:root {
  /* Color — paleta de marca confirmada + neutros propuestos (plan, sección 10) */
  --forest: #175A35;        /* verde bosque: franjas sólidas y botón principal */
  --forest-deep: #0E2E1D;   /* variante oscura para pie de página */
  --forest-ink: #0B2216;    /* texto sobre fondos claros cuando se necesita máximo contraste */
  --emerald: #2B9B5C;       /* verde esmeralda: acentos, encabezados, líneas */
  --emerald-tint: #E6F1EA;  /* tinte muy claro del acento, para paneles suaves */
  --bg: #F7F8F6;
  --surface: #FFFFFF;
  --text: #20241F;
  --text-muted: #55605A;
  --border: #DEE4DD;
  --white: #FFFFFF;

  /* Tipografía */
  /* Antonio: la misma tipografía condensada del logotipo real de Inter
     Bandas Ltda. (confirmado extrayendo los nombres de fuente incrustados
     en Archivos/PRESENTACION INTERBANDAS.pdf: Antonio-Regular/Light). */
  --font-display: 'Antonio', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* Escala tipográfica (máx. variación deliberada) */
  /* Techo del hero subido de 4rem a 4.75rem: en pantallas de escritorio
     anchas (~1360px+) el título se había quedado corto de presencia frente
     al resto de la composición; la curva sigue creciendo de forma fluida
     hasta ahí en vez de topar antes de tiempo. */
  --fs-hero: clamp(2.25rem, 1.2rem + 4.2vw, 4.75rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  /* Escalón intermedio para h3 (aplicaciones, pasos, contacto, confirmación
     de formulario): antes cada uno tenía un valor suelto (0.95/1.05/1.1/
     1.15rem) sin relación entre sí; ahora comparten un mismo peldaño de la
     escala. */
  --fs-h3: 1.05rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* Layout */
  --max-width: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 6px;
  --section-pad: clamp(3.5rem, 6vw, 6.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  /* Corrige el scroll horizontal fantasma que provoca el panel de navegación
     móvil (position:fixed + transform:translateX(100%) cuenta su ancho en
     scrollWidth aunque esté fuera de pantalla). Se declara dos veces a
     propósito: "hidden" para navegadores viejos, "clip" (más correcto para
     este caso) sobrescribe en los que lo soportan. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-weight: 600;
  color: var(--forest-ink);
  /* Evita títulos de dos líneas con una última línea de una sola palabra
     huérfana; se ignora sin efecto en navegadores que no lo soportan
     todavía, así que es una mejora sin riesgo. */
  text-wrap: balance;
}

p { color: var(--text); }
p + p { margin-top: 1em; }

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

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.65); }
/* Fondo blanco con un resplandor verde muy suave en una esquina, en vez de
   un blanco plano: el mismo recurso de "aurora" del hero, a una escala e
   intensidad mucho más discretas, para que las secciones de texto no se
   sientan totalmente vacías sin llegar a competir con el contenido. */
.section--surface {
  position: relative;
  isolation: isolate;
  background: var(--surface);
}
.section--surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(ellipse 55% 50% at 100% 0%, rgba(43,155,92,0.07), transparent 65%);
}
/* Antes era la misma cuadrícula de puntos que el resto del sitio; ahora es
   un lavado de gradiente radial en los mismos verdes de marca, coherente
   con el fondo del hero pero a menor intensidad al ser una franja de
   apoyo, no la principal. */
.section--tint {
  background-color: var(--emerald-tint);
  background-image:
    radial-gradient(ellipse 65% 60% at 15% 0%, rgba(43,155,92,0.16), transparent 65%),
    radial-gradient(ellipse 55% 55% at 100% 100%, rgba(23,90,53,0.12), transparent 65%);
}

.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
/* Título a la izquierda y texto de apoyo a la derecha, alineados por la
   base: aprovecha el ancho completo en secciones de catálogo en vez de
   apilar título + párrafo en una columna angosta. */
.section-head--split { max-width: none; display: grid; gap: 0.75rem 3rem; align-items: end; }
.section-head--split h2 { margin-bottom: 0; }
.section-head--split .lead { max-width: 46ch; font-size: 1.1rem; }
@media (min-width: 860px) {
  .section-head--split { grid-template-columns: 1fr 1fr; }
}

/* Sección oscura (Aplicaciones): mismo verde casi negro del hero y del
   pie de página, para dar ritmo claro/oscuro a la página. */
.section--dark {
  position: relative;
  isolation: isolate;
  background-color: var(--forest-ink);
  background-image:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(43,155,92,0.22), transparent 65%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(23,90,53,0.35), transparent 65%);
  color: rgba(255,255,255,0.82);
}
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .lead, .section--dark p { color: rgba(255,255,255,0.72); }
.section--dark .eyebrow { color: #5FD08F; }

/* Fondo del catálogo: un tinte muy leve para que las tarjetas blancas
   se despeguen del fondo. */
.section--catalog { background: linear-gradient(180deg, var(--bg), #EEF2EE); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 0.75rem;
}

.section-head h2 { font-size: var(--fs-h2); margin-bottom: 0.65rem; }
/* Interlineado de párrafo (1.6, pensado para texto de cuerpo a ~17px) se
   sentía suelto en el tamaño más grande del texto "lead"; 1.5 mantiene la
   lectura cómoda sin la sensación de espacio de más. */
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); font-family: var(--font-body); text-wrap: pretty; }

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

.skip-link {
  position: absolute;
  /* -3rem quedaba más corto que la altura real del enlace (padding +
     texto, ~3.2rem), así que siempre asomaba una franja verde de unos
     3px en la esquina superior izquierda de cada página. Bug real,
     visible incluso sin foco: -5rem lo deja completamente fuera. */
  left: 1rem; top: -5rem;
  background: var(--forest);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Etiqueta de contenido provisional ---------- */
/* Solo visible en modo de revisión (?revision=1 -> body.review-mode). En la
   presentación normal la página no debe verse "en construcción". */
.tag-provisional {
  display: none;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A6A1E;
  background: #FBF2DD;
  border: 1px dashed #D8B45B;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  white-space: normal;
}
.tag-provisional::before { content: "◐"; font-size: 0.85em; }
body.review-mode .tag-provisional { display: inline-flex; }

/* ---------- Ribbon de revisión ---------- */
.review-ribbon { display: none; }
body.review-mode .review-ribbon {
  display: block;
  background: var(--forest-ink);
  color: #E7EDE9;
  font-size: 0.8rem;
  padding: 0.6rem var(--gutter);
}
.review-ribbon__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.review-ribbon p { color: inherit; }
.review-ribbon strong { color: var(--emerald); font-weight: 600; }
.review-ribbon button {
  flex-shrink: 0;
  color: #C9D4CD;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
}
.review-ribbon button:hover { color: var(--white); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  min-height: 44px;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
/* Retroalimentación táctil: un ligero "hundimiento" al presionar, además
   de volver a su posición de reposo. Es una transición breve disparada
   por el usuario, no se restringe por prefers-reduced-motion (mismo
   criterio que el resto de micro-hover del sitio). */
.btn:active { transform: translateY(0) scale(0.97); }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform 0.15s var(--ease); }
.btn:hover .icon { transform: translateX(2px); }

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: var(--white);
  box-shadow: 0 14px 26px -14px rgba(23,90,53,0.6);
}
.btn--primary:hover { background: #124827; box-shadow: 0 18px 30px -14px rgba(23,90,53,0.68); }
/* Brillo que cruza el botón al pasar el cursor: refuerzo visual simple
   sobre el botón principal (la acción más importante de cada sección),
   no un loop automático. */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--outline {
  background: transparent;
  color: var(--forest);
  border: 1.5px solid var(--forest);
}
.btn--outline:hover { background: var(--forest); color: var(--white); }

/* Variantes para fondos oscuros (hero): un botón verde bosque sobre el
   verde casi negro del hero no tenía contraste suficiente, así que la
   acción principal pasa a blanco con texto verde, y la secundaria a un
   contorno claro. */
.btn--light {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--forest-ink);
  box-shadow: 0 16px 30px -16px rgba(0,0,0,0.6);
}
.btn--light:hover { background: #E9F5EE; }
.btn--outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn--outline-light:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn--ghost {
  background: transparent;
  color: var(--forest-ink);
  padding-inline: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--border);
}
.btn--ghost:hover { text-decoration-color: var(--emerald); color: var(--emerald); }

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

/* ---------- Encabezado ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 248, 246, 0.92);
  /* Sin backdrop-filter a propósito: un backdrop-filter en un ancestro
     crea un nuevo "containing block" para los descendientes con
     position:fixed, y el menú móvil (position:fixed) vive dentro de
     este encabezado — con el filtro puesto, el panel quedaba atrapado
     dentro de la caja del encabezado (~60-76px) en vez de ocupar toda
     la pantalla. Bug real, verificado midiendo el panel en el navegador. */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 0 0 rgba(11,34,22,0);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* 88px (72px con scroll) en vez de 76/60: el logo real creció a pedido
     del cliente (68px de alto) y necesitaba más aire vertical alrededor
     para no verse apretado contra los bordes del encabezado. */
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(247, 248, 246, 0.98);
  box-shadow: 0 8px 24px rgba(11,34,22,0.08);
}
.site-header.is-scrolled .site-header__inner { height: 72px; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
/* Logo real (vectorial, extraído del PDF de marca del cliente): el óvalo +
   wordmark ya forman una unidad completa, por eso se muestra a su relación
   de aspecto natural en vez de forzarlo a una caja cuadrada. Se encoge junto
   con el encabezado al hacer scroll, igual que ya hacía el wordmark de
   texto que reemplaza. */
.logo__image {
  /* El wordmark del logo real es manuscrito y de trazo fino (una sola
     línea para la "I" de "INTER"); a menos de ~48px de alto se ve débil,
     así que el logo del encabezado se muestra más grande que el antiguo
     wordmark de texto que reemplaza. Pedido del cliente: más grande
     todavía (48px -> 58px -> 68px). */
  height: 68px;
  width: auto;
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .logo__image { height: 54px; }
.logo__sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  max-width: 9ch;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border);
}

.main-nav__list {
  display: flex;
  gap: 2.25rem;
}
.main-nav__list a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-ink);
  padding-bottom: 0.35rem;
  transition: color 0.15s var(--ease);
}
/* Subrayado que crece desde la izquierda en vez de un cambio de color
   instantáneo: la misma idea de "revelado" que el resto del sitio usa
   para fotografías y secciones, aplicada a un detalle pequeño. */
.main-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--emerald);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.main-nav__list a:hover,
.main-nav__list a:focus-visible,
.main-nav__list a.is-active { color: var(--emerald); }
.main-nav__list a:hover::after,
.main-nav__list a:focus-visible::after,
.main-nav__list a.is-active::after { transform: scaleX(1); }

.main-nav__close { display: none; }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--forest-ink);
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(11, 34, 22, 0.45);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

/* ---------- Icon utility ---------- */
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ---------- Fotografía de producto: marco tipo ficha técnica ----------
   Cada espacio de fotografía (hero + 5 categorías) muestra ahora una
   imagen real de referencia de la línea de producto, dentro del mismo
   marco que ya definía el sitio: esquina cortada, numeración de figura
   y una anotación breve, en vez de la ilustración de línea que se usaba
   mientras no había fotografía disponible. */
.media-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg);
  overflow: hidden;
  border: 1px solid rgba(23,90,53,0.14);
  /* Esquina cortada: referencia a una ficha técnica / etiqueta industrial,
     en vez de un rectángulo con radio uniforme. Es el mismo recurso en las
     6 fotografías del sitio (ver Decisiones de diseño). */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
/* La sombra vive en el contenedor, no en .media-placeholder: clip-path
   recorta cualquier box-shadow puesto en el propio elemento recortado. */
.product-card__media {
  position: relative;
}

.media-placeholder__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.company__media:hover .media-placeholder__photo { transform: scale(1.04); }

/* Velo de gradiente para que la anotación siga siendo legible sobre
   fotografía real, sin depender de un fondo sólido como antes. */
.media-placeholder__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(11,34,22,0.62) 100%);
  pointer-events: none;
}

.media-placeholder::before,
.media-placeholder::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(255,255,255,0.75);
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}
.media-placeholder::before { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.media-placeholder::after { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }

.media-placeholder__info {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.media-placeholder__caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}

/* Numeración de figura tipo plano técnico ("FIG. 01"…"FIG. 06"), generada
   por CSS counter en el orden real del documento: no requiere mantener
   números a mano y refuerza la lectura de "ficha técnica" en cada espacio
   de fotografía (hero + 5 categorías), sin inventar ningún dato del
   producto. */
main { counter-reset: fig; }
.media-placeholder { counter-increment: fig; }
.media-placeholder__scale {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  background: rgba(11,34,22,0.4);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  line-height: 1.5;
}
.media-placeholder__scale::before { content: "FIG. " counter(fig, decimal-leading-zero); }

.media-placeholder--portrait { aspect-ratio: 4 / 5; }

/* ---------- Hero ---------- */
/* Décima pasada (2026-09-13): hero oscuro. La fotografía de producto
   generada para el hero tiene fondo verde casi negro con viñeta; en vez de
   encerrarla en un marco sobre un fondo claro, el hero adopta ese mismo
   tono y la imagen se funde con él (máscara radial en los bordes). El
   producto queda "flotando" en la composición y el título en blanco gana
   contraste. Se mantienen la cortina en ángulo y la entrada escalonada. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
  background-color: #08140D;
  color: rgba(255,255,255,0.8);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 55% 70% at 78% 45%, rgba(23,90,53,0.55), transparent 70%),
    radial-gradient(ellipse 45% 60% at 0% 0%, rgba(43,155,92,0.18), transparent 65%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.35));
}
.hero .eyebrow { color: #5FD08F; }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
/* En celular la fotografía va primero (Plan MVP, sección 10). */
.hero__media { position: relative; order: -1; margin-inline: calc(var(--gutter) * -0.5); }

.hero__visual { position: relative; }
.hero__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  /* Funde los bordes de la fotografía con el fondo del hero. */
  -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
  transition: transform 1.2s var(--ease);
}
.hero__media:hover .hero__photo { transform: scale(1.03); }
.hero__caption {
  position: absolute;
  right: 10%;
  bottom: 3%;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding-left: 2.25rem;
  background: linear-gradient(90deg, rgba(95,208,143,0.8), rgba(95,208,143,0.8)) left center / 1.75rem 1px no-repeat;
}

/* Coreografia de entrada del hero (una sola vez, al cargar la pagina) */
.hero__in { opacity: 0; transform: translateY(22px); }
.hero.is-ready .hero__in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__in { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .hero.is-ready .hero__in--1 { transition-delay: 0.05s; }
  .hero.is-ready .hero__in--2 { transition-delay: 0.16s; }
  .hero.is-ready .hero__in--3 { transition-delay: 0.30s; }
  .hero.is-ready .hero__in--4 { transition-delay: 0.42s; }
  .hero.is-ready .hero__in--5 { transition-delay: 0.6s; }
}

.hero__shutter {
  position: absolute;
  inset: 0;
  background: var(--forest);
  transform-origin: right;
  /* Borde de corte en ángulo (como una guillotina/lámina), en vez de un
     rectángulo plano: el "notorio pero elegante" del hero. */
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__shutter { transition: transform 0.9s var(--ease) 0.5s; }
}
.hero.is-ready .hero__shutter { transform: scaleX(0); }

.hero__title { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.9rem; max-width: 14ch; color: var(--white); }
.hero__subtitle { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255,255,255,0.72); margin-bottom: 1.75rem; max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Índice de las 5 líneas de producto: miniatura + número + nombre. En
   celular se desplaza horizontalmente dentro de su propio contenedor (con
   snap), sin generar scroll horizontal en la página. */
.line-index {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.line-index::-webkit-scrollbar { display: none; }
.line-index__item {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.line-index__item img {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
}
.line-index__num {
  align-self: end;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: #5FD08F;
}
.line-index__name {
  align-self: start;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}
.line-index__item:hover,
.line-index__item:focus-visible {
  background: rgba(95,208,143,0.1);
  border-color: rgba(95,208,143,0.45);
  transform: translateY(-2px);
}

/* ---------- Empresa ---------- */
.company {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.company__body .section-head { margin-bottom: 1.5rem; }
.company__intro { max-width: 62ch; }
.company__intro p { color: var(--text-muted); }
.company__intro p + p { margin-top: 1.05em; }
.company__intro .company__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--forest-ink);
  font-weight: 500;
}
.company__media {
  position: relative;
  margin: 0;
  filter: drop-shadow(0 22px 34px rgba(11,34,22,0.2));
  padding-bottom: 2.5rem;
}
@media (min-width: 960px) {
  .company { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}
.company__facts {
  position: relative;
  margin: -3.5rem 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  /* Placa técnica (nameplate industrial): fondo verde bosque oscuro +
     remaches en las esquinas. Ahora se apoya sobre el borde inferior de la
     fotografía, en vez de flotar sola junto al texto. */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  background-color: var(--forest-deep);
  background-image:
    radial-gradient(circle, var(--emerald) 1.4px, transparent 1.6px),
    radial-gradient(circle, var(--emerald) 1.4px, transparent 1.6px),
    radial-gradient(circle, var(--emerald) 1.4px, transparent 1.6px),
    radial-gradient(circle, var(--emerald) 1.4px, transparent 1.6px),
    radial-gradient(ellipse 75% 75% at 100% 0%, rgba(43,155,92,0.28), transparent 65%);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 100% 100%;
  background-position:
    12px 12px,
    calc(100% - 12px) 12px,
    12px calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px),
    0 0;
}
.company__facts dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5FD08F;
}
.company__facts dd { font-size: 1rem; font-weight: 500; color: var(--white); margin: 0.3rem 0 0; }
.company__facts > div { min-width: 150px; }
.company__tag { margin-top: 1.25rem; }

/* ---------- Productos: catálogo en cuadrícula ---------- */
/* Reemplaza las 5 franjas alternadas (imagen/texto a todo el ancho), que
   con fotografías de proporciones distintas dejaban grandes huecos
   verticales y hacían la sección muy larga. Ahora: 2 tarjetas destacadas
   arriba (Correas, Bandas) y 3 abajo, todas con la misma altura de imagen
   por fila, conservando el marco de ficha técnica (esquina cortada, FIG.),
   la cortina de revelado y los chips. */
.catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem;
  box-shadow: 0 1px 0 rgba(11,34,22,0.04);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  scroll-margin-top: 110px;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(43,155,92,0.35);
  box-shadow: 0 28px 48px -30px rgba(11,34,22,0.45);
}
.product-card:target { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint); }
.product-card__media { position: relative; }
.product-card .media-placeholder { aspect-ratio: 4 / 3; border-radius: 6px 0 6px 6px; }
.product-card:hover .media-placeholder__photo { transform: scale(1.05); }

/* Cortina de revelado al entrar en pantalla (mismo lenguaje del hero). */
.product-card__shutter {
  position: absolute;
  inset: 0;
  background: var(--forest);
  transform-origin: right;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.product-card:nth-child(even) .product-card__shutter { transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .product-card__shutter { transition: transform 0.85s var(--ease) 0.1s; }
  .reveal.is-visible .product-card__shutter { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card__shutter { display: none; }
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 0.7rem 0.6rem;
}
.product-card__heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.55rem; }
.product-card__body h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); margin-bottom: 0; }
.product-card__body p { color: var(--text-muted); font-size: 0.98rem; max-width: 52ch; }
.product-card__index {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--forest);
  border-radius: 4px;
  padding: 0.3em 0.6em;
}
.product-card__cta {
  margin-top: auto;
  padding-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
}
.product-card__cta .icon { width: 1.1em; height: 1.1em; transition: transform 0.25s var(--ease); }
.product-card__cta:hover { color: var(--emerald); }
.product-card:hover .product-card__cta .icon { transform: translateX(4px); }
/* Toda la tarjeta es clicable a través del enlace (área táctil grande),
   sin anidar elementos interactivos. */
.product-card__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

@media (min-width: 700px) {
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .product-card:last-child { grid-column: 1 / -1; }
  .product-card:last-child .media-placeholder { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .catalog { grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
  .product-card { grid-column: span 4; }
  .product-card--feature:nth-child(1) { grid-column: span 5; }
  .product-card--feature:nth-child(2) { grid-column: span 7; }
  .product-card:last-child { grid-column: span 4; }
  .product-card .media-placeholder,
  .product-card:last-child .media-placeholder { aspect-ratio: auto; height: 250px; }
  .product-card--feature .media-placeholder { height: 340px; }
}
.catalog__note { margin-top: 1.5rem; }

/* Enlace secundario dentro de la tarjeta de Correas: se eleva sobre la capa
   clicable de .product-card__cta::after para que siga siendo su propio
   destino (el bloque de termosoldables) y no el formulario. */
.product-card__more {
  position: relative;
  z-index: 1;
  color: var(--forest);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(43,155,92,0.45);
}
.product-card__more:hover { color: var(--emerald); text-decoration-color: currentColor; }

/* ---------- Línea destacada: correas termosoldables y eslabonadas ----------
   Información de la ficha comercial que envió el cliente (2026-09-13). La
   ficha original era un collage de recortes con fondos distintos; aquí se
   presenta como una ficha técnica del sitio: tipos en tabla de
   especificaciones y dos fotografías de catálogo sobre el mismo fondo gris
   claro, generadas con Higgsfield sin logos ni texto. */
.spotlight {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(11,34,22,0.45);
  scroll-margin-top: 110px;
}
.spotlight:target { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint); }
.spotlight__body {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-top: 4px solid var(--emerald);
}
.spotlight__body h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  margin-bottom: 0.75rem;
  max-width: 16ch;
}
.spotlight__intro { color: var(--text-muted); max-width: 48ch; }

.spec-list { margin-top: 1.75rem; border-top: 1px solid var(--border); }
.spec-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}
.spec-list dt {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--forest-ink);
  line-height: 1.2;
}
.spec-list dt span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--emerald);
}
.spec-list dd { margin: 0; color: var(--text-muted); }
.spec-list__types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spec-list__types li {
  font-size: 0.9rem;
  color: var(--forest);
  background: var(--emerald-tint);
  border-left: 2px solid var(--emerald);
  border-radius: 2px;
  padding: 0.35em 0.7em;
}
.spec-list__types strong { font-weight: 600; color: var(--forest-ink); }
@media (min-width: 560px) {
  .spec-list__row { grid-template-columns: 11rem 1fr; align-items: center; }
}

/* Mismo enlace "Cotizar esta línea" de las tarjetas (lleva a Contacto con
   Correas preseleccionada), sin la capa que vuelve clicable toda la tarjeta. */
.spotlight__cta { margin-top: 0.5rem; }
.spotlight__cta::after { display: none; }
.spotlight__cta:hover .icon { transform: translateX(4px); }

.spotlight__media {
  position: relative;
  background: #EFF0EE;
  padding: clamp(1rem, 3vw, 2rem);
  display: grid;
  gap: 1rem;
  align-content: center;
}
.spotlight__media figure { position: relative; margin: 0; border-radius: 8px; overflow: hidden; }
.spotlight__media img { width: 100%; height: auto; transition: transform 0.6s var(--ease); }
.spotlight__media figure:hover img { transform: scale(1.04); }
.spotlight__media figcaption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(11,34,22,0.72);
  padding: 0.3em 0.65em;
  border-radius: 3px;
}
.spotlight__inset { box-shadow: 0 18px 36px -18px rgba(11,34,22,0.5); }

@media (min-width: 560px) and (max-width: 959.98px) {
  .spotlight__media { grid-template-columns: 1.3fr 1fr; align-items: center; }
}
@media (min-width: 960px) {
  .spotlight { grid-template-columns: 1fr 1.05fr; }
  .spotlight__body { border-top: 0; border-left: 4px solid var(--emerald); }
  .spotlight__media { padding: 2.5rem; gap: 0; }
  /* La foto de eslabonadas se superpone a la esquina inferior de la de
     termosoldables, como una ficha apoyada sobre otra. */
  .spotlight__media .spotlight__inset {
    width: 50%;
    margin: -5.5rem 0 0 auto;
    border: 5px solid var(--white);
    z-index: 1;
  }
  .spotlight__media .spotlight__main { margin-right: 12%; }
}
@media (prefers-reduced-motion: no-preference) {
  .spotlight__inset { transition: transform 0.8s var(--ease) 0.25s, opacity 0.8s var(--ease) 0.25s; }
  .spotlight.reveal:not(.is-visible) .spotlight__inset { transform: translateY(24px); opacity: 0; }
}

.category-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; margin-top: 0.9rem; }
/* Chips de especificación técnica ("Tipo V", "Sincrónica"...): etiqueta
   plana de ficha técnica con borde de acento a la izquierda, no un botón. */
.category-chips span {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--emerald-tint);
  border-left: 2px solid var(--emerald);
  border-radius: 2px;
  padding: 0.4em 0.7em;
}
@media (prefers-reduced-motion: no-preference) {
  .category-chips span {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .reveal.is-visible .category-chips span { opacity: 1; transform: none; }
  .category-chips span:nth-child(1) { transition-delay: 0.25s; }
  .category-chips span:nth-child(2) { transition-delay: 0.32s; }
  .category-chips span:nth-child(3) { transition-delay: 0.39s; }
  .category-chips span:nth-child(4) { transition-delay: 0.46s; }
}

/* ---------- Aplicaciones ---------- */
.applications__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.app-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.app-card:hover { border-color: rgba(95,208,143,0.4); transform: translateY(-3px); }
@media (prefers-reduced-motion: no-preference) {
  .app-card:nth-child(2) { transition-delay: 0.1s; }
  .app-card:nth-child(3) { transition-delay: 0.2s; }
}
.app-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.app-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,34,22,0.55));
}
.app-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.app-card:hover .app-card__media img { transform: scale(1.05); }
.app-card__body { padding: 1.25rem 1.35rem 1.5rem; border-top: 2px solid var(--emerald); }
.app-card__line {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5FD08F;
  margin-bottom: 0.35rem;
}
.app-card h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.section--dark .app-card p { font-size: 0.95rem; color: rgba(255,255,255,0.68); }

/* ---------- Cómo cotizar ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  position: relative;
}
@media (min-width: 860px) {
  .steps::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 1px;
    background: var(--border);
    z-index: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .steps::before {
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.8s var(--ease) 0.15s;
    }
    .steps.is-visible::before { transform: scaleX(1); }
  }
}
.step {
  position: relative;
  z-index: 1;
  padding-top: 0.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .step:nth-child(2) { transition-delay: 0.12s; }
  .step:nth-child(3) { transition-delay: 0.24s; }
}
.step__number {
  font-family: var(--font-display);
  font-size: 2.75rem;
  color: var(--border);
  -webkit-text-stroke: 1px var(--emerald);
  color: transparent;
  line-height: 1;
  margin-bottom: 0.75rem;
  display: block;
}
.step__icon {
  display: inline-flex;
  width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--emerald-tint);
  color: var(--forest);
  margin-bottom: 1rem;
}
.step__icon .icon { width: 1.25rem; height: 1.25rem; }
.step h3 { font-family: var(--font-body); text-transform: none; font-size: var(--fs-h3); font-weight: 600; margin-bottom: 0.4rem; }
.step p { color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Contacto ---------- */
/* Marca de agua: el óvalo del logo real, sin el wordmark, muy tenue, de
   fondo. Le da color y presencia de marca a la sección sin repetir el
   logo completo por tercera vez (ya está en el encabezado y el pie de
   página). Se recorta a propósito con el borde de la sección, como una
   marca de agua editorial, no un logo mostrado de nuevo; por eso el
   z-index -1 (misma técnica que el lavado radial de .section--surface)
   y overflow:hidden en la sección para que no genere scroll horizontal. */
#contacto { overflow: hidden; }
.contact-watermark {
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -4%;
  width: min(58vw, 760px);
  height: auto;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}
/* En celular, top:-10% se calcula sobre el alto de #contacto completo,
   que ahí es mucho más alto (todo el contacto se apila en una sola
   columna: dirección, teléfono, correos, botón, formulario) — el mismo
   -10% se convertía en un desplazamiento de tantos píxeles que la marca
   de agua terminaba recortada por completo por overflow:hidden, fuera
   de vista. Un valor fijo en px, en vez de %, la ancla cerca del borde
   superior real de la sección sin importar cuánto crezca el contenido
   debajo — se probó primero anclarla a .section-head en vez de a la
   sección completa, pero eso cambiaba también la posición aprobada en
   escritorio (quedaba encima de "Dirección"); este ajuste solo toca
   celular. */
@media (max-width: 767.98px) {
  .contact-watermark { top: 40px; right: -10%; }
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.contact-info__item {
  display: flex;
  gap: 0.9rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}
.contact-info__item:first-child { padding-top: 0; }
.contact-info__item .icon { color: var(--emerald); margin-top: 0.15rem; }
.contact-info__item h3 { font-family: var(--font-body); text-transform: none; font-size: var(--fs-h3); font-weight: 600; color: var(--forest-ink); }
.contact-info__item a, .contact-info__item p { color: var(--text-muted); font-size: 0.95rem; }
.contact-info__item a:hover { color: var(--emerald); }

.contact-info__whatsapp { margin-top: 1.75rem; }
.contact-info__note { margin-top: 0.6rem; }

/* Formulario — se presenta como un panel propio (fondo, borde, sombra
   suave), no como campos sueltos flotando sobre el fondo de la sección. */
#quoteForm {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 24px 44px -28px rgba(11,34,22,0.3);
}
.form-field { margin-bottom: 1.3rem; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-ink);
  margin-bottom: 0.4rem;
}
.form-field .optional { color: var(--text-muted); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  font-size: 0.98rem;
  min-height: 44px;
  transition: border-color 0.15s var(--ease);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint); }
.form-field input:user-invalid,
.form-field select:user-invalid { border-color: #B23A3A; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }

.field-error {
  display: none;
  color: #B23A3A;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}
.form-field.has-error .field-error { display: block; }
.form-field.has-error input,
.form-field.has-error select { border-color: #B23A3A; }

.form-note { margin-top: 1rem; }

/* Casilla de autorización de tratamiento de datos (Ley 1581 de 2012). */
.form-field .form-consent__label {
  display: flex;
  margin-bottom: 0;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  cursor: pointer;
}
.form-field .form-consent__label input {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin-top: 0.1rem;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--forest);
}
.form-consent__label a { color: var(--forest); text-decoration: underline; text-underline-offset: 0.15em; }
.form-consent__label a:hover { color: var(--emerald); }

/* Página de política de datos */
.legal-page { background: var(--surface); }
.legal-header { border-bottom: 1px solid var(--border); padding-block: 1rem; }
.legal-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legal-header .logo__image { height: 56px; }
.legal { max-width: 72ch; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 0.5rem; }
.legal h2 { font-size: 1.35rem; margin: 2.25rem 0 0.6rem; }
.legal p, .legal li { color: var(--text); }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: 0.6rem 0; }
.legal li + li { margin-top: 0.35rem; }
.legal a { color: var(--forest); text-decoration: underline; }
.legal__meta { color: var(--text-muted); font-size: 0.9rem; }
.legal__facts { margin-top: 0.75rem; }
.legal__facts div { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--border); }
.legal__facts dt { font-weight: 600; color: var(--forest-ink); }
.legal__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .legal__facts div { grid-template-columns: 9rem 1fr; }
}

/* Campo trampa anti-bots: fuera de pantalla (no display:none, que algunos
   bots detectan), sin foco por teclado y oculto a lectores de pantalla. */
.form-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensaje de estado del envío (error de red, límite de envíos, etc.). */
.form-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: #FBEAEA;
  border: 1px solid #E3B5B5;
  color: #8A2A2A;
}
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; }
#quoteSubmit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Antes eran atributos style="" en el HTML; se pasaron a clases para que
   la Content-Security-Policy no tenga que permitir estilos en línea. */
.steps__tag { margin-top: 2rem; }
.footer__brand .logo__sub { margin-top: 0.75rem; }

.form-success {
  border: 1.5px solid var(--emerald);
  background: var(--emerald-tint);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}
.form-success .icon { width: 2.25rem; height: 2.25rem; color: var(--forest); margin-inline: auto; margin-bottom: 0.75rem; }
.form-success h3 { font-family: var(--font-body); text-transform: none; font-size: var(--fs-h3); margin-bottom: 0.4rem; color: var(--forest-ink); }
.form-success p { color: var(--text-muted); }
.form-success .form-dev-note { margin-top: 1rem; font-size: 0.78rem; }

[hidden] { display: none !important; }

/* ---------- Pie de página ---------- */
/* Mismo recurso del CTA mismo pero en dirección contraria, para que las
   dos franjas sólidas de la página no se sientan como una copia una de
   la otra: un giro distinto es suficiente variación sin inventar un
   segundo motivo decorativo. */
.site-footer {
  position: relative;
  color: rgba(255,255,255,0.78);
  padding-block: clamp(3rem, 5vw, 4rem);
  font-size: 0.9rem;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  /* Margen asimétrico a propósito: poco arriba (para que el corte en
     ángulo sea visible contra la sección clara de Contacto) y mucho
     abajo (para que esa misma rotación nunca deje ver un hueco del fondo
     de la página en la esquina inferior, ya que es la última franja). */
  top: -24px; left: -2%; right: -2%; bottom: -80px;
  background: var(--forest-deep);
  transform: rotate(3.8deg);
  z-index: -1;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-bottom: 2rem;
}
.footer__brand .logo__image { height: 64px; }
.footer__brand .logo__sub {
  color: rgba(255,255,255,0.55);
  max-width: none;
  padding-left: 0;
  border-left: 0;
}
/* Ícono pequeño junto a cada título de columna (teléfono para "Contacto",
   pin tipo mapa para "Ubicación"): reutiliza el mismo sprite de íconos
   que ya usa el resto del sitio (no emoji suelto, que desentonaría con el
   lenguaje de línea fina del resto de los íconos) para darle a cada
   columna una referencia visual rápida, pedido explícito del cliente. */
.site-footer h3 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}
/* Tamaño fijo en rem, no em: el texto del título (0.72rem) es muy chico
   para que el ícono escalara junto a él sin verse diminuto. Pedido del
   cliente: más grandes. */
.site-footer h3 .icon { width: 1.3rem; height: 1.3rem; color: var(--emerald); flex-shrink: 0; }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--white); }
/* Bug real corregido: el párrafo de "Ubicación" (dirección) no tenía
   ninguna regla propia, así que heredaba `p { color: var(--text) }`
   (casi negro) en vez del color claro del pie de página, porque esa
   regla de tag apunta directo al <p> y le gana en especificidad al color
   heredado de .site-footer. Resultado: la dirección era prácticamente
   ilegible sobre el verde oscuro. Se declara aquí explícitamente. */
.site-footer p { color: rgba(255,255,255,0.78); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  /* Las tarjetas combinan el revelado con su propio hover (elevación,
     sombra, borde); sin esto, la regla de .reveal (declarada después)
     anularía la transición y la elevación al pasar el cursor. */
  .product-card.reveal,
  .app-card.reveal {
    transition: opacity 0.7s var(--ease), transform 0.5s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  }
}
.product-card.reveal.is-visible:hover { transform: translateY(-4px); }
.app-card.reveal.is-visible:hover { transform: translateY(-3px); }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .applications__grid { grid-template-columns: repeat(3, 1fr); }
  /* Antes 4 columnas (marca, Navegación, Contacto, Ubicación); se quitó
     "Navegación" (redundante con el menú del encabezado, pedido del
     cliente), así que quedan 3. */
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 960px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }

  .hero__grid { grid-template-columns: 1fr 1.05fr; gap: 2rem; }
  .hero__title { max-width: 12ch; }
  .hero__media { order: 0; margin-inline: 0 calc(var(--gutter) * -1); }

  .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
}

/* El logo real ya es autosuficiente (óvalo + wordmark); el subtítulo legal
   se retira en celular para dejar espacio al botón de WhatsApp y al menú. */
@media (max-width: 639.98px) {
  .logo__sub { display: none; }
}

@media (max-width: 959.98px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: min(320px, 82vw);
    background: var(--surface);
    box-shadow: -12px 0 32px rgba(11,34,22,0.18);
    padding: 6rem 2rem 2rem;
    /* Se oculta con clip-path (no con transform:translateX) a propósito:
       trasladar un elemento position:fixed fuera del viewport con transform
       hace que Chrome cuente su geometría transformada dentro de
       document.documentElement.scrollWidth, provocando scroll horizontal
       fantasma. clip-path solo recorta el pintado; la caja del elemento
       nunca sale del viewport, así que scrollWidth se mantiene correcto. */
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.28s var(--ease);
    z-index: 150;
  }
  .main-nav.is-open { clip-path: inset(0 0 0 0%); }
  .main-nav__list { flex-direction: column; gap: 0; }
  .main-nav__list a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--border); }
  @media (prefers-reduced-motion: no-preference) {
    .main-nav__list li {
      opacity: 0;
      transform: translateX(12px);
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .main-nav.is-open .main-nav__list li { opacity: 1; transform: none; }
    .main-nav.is-open .main-nav__list li:nth-child(1) { transition-delay: 0.08s; }
    .main-nav.is-open .main-nav__list li:nth-child(2) { transition-delay: 0.14s; }
    .main-nav.is-open .main-nav__list li:nth-child(3) { transition-delay: 0.2s; }
  }
  .main-nav__close {
    position: absolute; top: 1.25rem; right: 1.25rem;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .nav-toggle { display: flex; }
  .nav-scrim.is-visible { opacity: 1; pointer-events: auto; }
}

@media (min-width: 1180px) {
  .hero__title { max-width: 13ch; }
}

/* ---------- Página 404 ---------- */
.error-page { max-width: 60ch; }
.error-page h1 { font-size: var(--fs-h2); margin-bottom: 0.6rem; }
.error-page .lead { margin-bottom: 1.5rem; }
.error-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.error-page__links a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--forest);
  background: var(--emerald-tint);
  border-left: 2px solid var(--emerald);
  border-radius: 2px;
  padding: 0.5em 0.8em;
}
.error-page__links a { text-decoration: none; }
.error-page__links a:hover { background: var(--emerald); color: var(--white); }
.error-page a { color: var(--forest); text-decoration: underline; }


/* ---------- Aviso de cookies ---------- */
/* Informativo, no bloqueante: el sitio no instala cookies. Se ancla abajo
   y no tapa el contenido más de lo necesario. */
.cookie-note {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 180;
  background: var(--forest-ink);
  color: rgba(255,255,255,0.86);
  border: 1px solid rgba(95,208,143,0.3);
  border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-note { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
}
.cookie-note.is-visible { opacity: 1; transform: none; }
.cookie-note__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 1rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  justify-content: space-between;
}
.cookie-note__text {
  color: rgba(255,255,255,0.86);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 68ch;
  margin: 0;
}
.cookie-note__text strong { color: var(--white); }
.cookie-note__text a { color: #5FD08F; text-decoration: underline; text-underline-offset: 0.2em; }
.cookie-note__text a:hover { color: var(--white); }
.cookie-note__ok { flex-shrink: 0; padding-block: 0.7rem; }
@media (max-width: 599.98px) {
  .cookie-note__inner { flex-direction: column; align-items: stretch; }
  .cookie-note__ok { width: 100%; }
}