/* =========================================================================
   PROCODESA — rediseño
   Dirección visual: "Cotización clara"
   1. Tokens y base
   2. Utilidades y componentes compartidos
   3. Encabezado y navegación
   4. Portada: hero, panel de cotización, rail de equipo, sello
   5. Cabeceras de páginas interiores
   6. Bloques de contenido (servicios, proyectos, maquinaria, empresa, contacto)
   7. Banda CTA y pie
   8. Responsive
   ========================================================================= */

/* 1. Tokens y base ------------------------------------------------------ */

:root {
  --ink: #111a2e;
  --ink-2: #253047;
  --muted: #667085;
  --line: #dde2e9;
  --line-soft: #edf0f4;
  --surface: #ffffff;
  --soft: #f4f5f7;
  --soft-warm: #f7f6f2;
  --yellow: #f6c400;
  --yellow-dark: #dbaa00;
  --yellow-ink: #7a6500;
  --green: #1faa4b;
  --green-dark: #14803a;
  --green-ink: #17611d;
  --shadow-sm: 0 6px 18px rgba(17, 26, 46, 0.06);
  --shadow-md: 0 10px 30px rgba(17, 26, 46, 0.08);
  --shadow-lg: 0 30px 80px rgba(17, 26, 46, 0.15);
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 28px;
  --shell: min(1180px, calc(100% - 48px));
  --header-h: 76px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
}

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

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(2.4rem, 4.6vw, 3.45rem);
  font-weight: 780;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 760;
}

h3 {
  font-size: 1.2rem;
  font-weight: 730;
}

/* 2. Utilidades y componentes compartidos ------------------------------- */

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  padding: 84px 0;
}

.section-tight {
  padding: 56px 0;
}

.section-soft {
  background: var(--soft-warm);
}

.section-gray {
  background: var(--soft);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 10px 16px;
  color: white;
  background: var(--ink);
  border-radius: var(--radius-xs);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

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

.section-kicker {
  margin-bottom: 12px;
  color: var(--yellow-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lead {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}

.section-heading {
  margin-bottom: 40px;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  align-items: end;
  gap: 48px;
}

.split-heading h2 {
  max-width: 700px;
  margin-bottom: 0;
}

.split-heading > p {
  margin-bottom: 4px;
  color: var(--muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease,
    border-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button svg {
  flex: none;
}

.button-primary {
  color: #111827;
  background: var(--yellow);
  box-shadow: 0 3px 10px rgba(246, 196, 0, 0.13);
}

.button-primary:hover {
  background: #ffd014;
  box-shadow: 0 5px 14px rgba(246, 196, 0, 0.2);
}

@keyframes flecha-derecha {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(5px);
  }
}

.chev-doble {
  width: 15px;
  height: 15px;
  fill: currentColor;
  opacity: 0.72;
  animation: flecha-derecha 2.4s ease-in-out infinite;
}

.button:hover .chev-doble {
  opacity: 1;
  animation-duration: 1s;
}

.button-whatsapp {
  color: var(--green-dark);
  background: white;
  border-color: rgba(31, 170, 75, 0.55);
}

.button-whatsapp:hover {
  background: #f3fbf5;
  border-color: var(--green);
}

.button-whatsapp-solid {
  color: white;
  background: var(--green);
}

.button-whatsapp-solid:hover {
  background: var(--green-dark);
}

.button-ghost {
  color: var(--ink);
  background: white;
  border-color: var(--line);
}

.button-ghost:hover {
  border-color: var(--ink);
}

.icon-wa {
  width: 18px;
  height: 18px;
  fill: var(--green);
}

.button .chev {
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.65;
}

.button-whatsapp-solid .icon-wa {
  fill: currentColor;
}

.text-link {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration-color: var(--yellow-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid rgba(246, 196, 0, 0.55);
  outline-offset: 3px;
}

/* 3. Encabezado y navegación -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(221, 226, 233, 0.85);
  backdrop-filter: blur(18px);
  transition: transform 280ms ease, box-shadow 180ms ease;
}

/* Al bajar la cabecera se retira; al subir vuelve. Sin `position: fixed` en el
   nav esto arrastraría el menú abierto fuera de pantalla, de ahí que app.js no
   la oculte mientras el menú está desplegado. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgba(17, 26, 46, 0.09);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: var(--header-h);
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: var(--ink);
  text-decoration: none;
}

/* El logotipo entra completo: trae los edificios, el nombre y el descriptivo.
   Antes se recortaba solo el ícono porque el archivo era cuadrado y el texto
   quedaba diminuto; este viene apaisado y cabe entero en la altura del
   encabezado. */
.brand-logo {
  display: block;
  width: auto;
  height: 50px;
  flex: none;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.1vw, 32px);
}

.main-nav a {
  position: relative;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}

.nav-icon {
  display: none;
}

/* El subrayado cuelga del rótulo y no del enlace: el enlace incluye el ícono,
   y en el menú de teléfono además es mucho más ancho que el texto. */
.nav-texto {
  position: relative;
}

.nav-texto::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.main-nav a:hover .nav-texto::after,
.main-nav a:focus-visible .nav-texto::after,
.main-nav a[aria-current="page"] .nav-texto::after {
  transform: scaleX(1);
}

/* El amarillo señala hacia dónde vas al pasar por encima; el negro, dónde
   estás. Dos cosas distintas, dos colores distintos. */
.main-nav a[aria-current="page"] .nav-texto::after {
  background: var(--ink);
}

.main-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 780;
}

.header-side {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.header-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.15;
  text-decoration: none;
}

.header-contact .wa-badge {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  background: #e6f7ec;
  border-radius: 50%;
}

.header-contact .icon-wa {
  width: 19px;
  height: 19px;
}

.wa-short {
  display: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.menu-toggle-texto {
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.menu-toggle-barras {
  display: block;
  width: 22px;
}

.menu-toggle-barras span {
  display: block;
  height: 2px;
  margin-block: 5px;
  background: var(--ink);
  transition: transform 180ms ease, opacity 180ms ease;
}

/* 4. Portada ------------------------------------------------------------ */

/* El respiro de abajo era el hueco por donde asomaba el panel de cotización
   cuando caía sobre la foto. Ahora ese solape lo recibe la banda del sello, así
   que aquí basta un filo. */
.hero {
  position: relative;
  padding-bottom: 22px;
  background: #f7f7f7;
}

.hero-grid {
  position: relative;
  min-height: 430px;
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 59%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* Corte diagonal: la foto avanza hacia la izquierda conforme baja.
     El texto vive arriba del hero, donde el borde está más a la derecha. */
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

/* Diapositivas apiladas: solo cambia la opacidad, así el fundido es suave y
   no reacomoda nada. */
.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-slide.is-active {
  opacity: 1;
}

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

.hero-scrim {
  display: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 47%;
  padding: 24px 0 40px 20px;
}

.hero h1 {
  /* Medido: "orgullosamente Veracruzana" ocupa 15em y "Empresa Constructora
     orgullosamente" 20.2em. Con 16em el título cae en dos renglones, y el
     tamaño se reduce lo suficiente para que la columna dé esos 15em en todo
     el rango: el tope de 2.2rem existe porque a partir de ~1440px el shell ya
     no crece y una fuente mayor dejaría menos `em` disponibles. */
  max-width: 16em;
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 2.35vw, 2.2rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

/* Relieve extruido en gris: dos capas cortas y una sombra tenue. Lo justo para
   dar volumen; con más capas el nombre se ensuciaba. */
.hero-brand {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(2.6rem, 4.2vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.005em;
  line-height: 1;
  text-shadow:
    1px 1px 0 #d5d9e0,
    2px 2px 0 #c2c7d1,
    3px 4px 7px rgba(17, 26, 46, 0.16);
}

.hero h1 .linea {
  display: block;
}

.hero h1 .acento {
  color: var(--yellow);
}

.hero-especialidad {
  margin-top: 18px;
}

.hero-especialidad p {
  position: relative;
  padding-bottom: 6px;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
}

.hero-especialidad p::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 132px;
  height: 1px;
  content: "";
  background: var(--yellow);
}

.hero-especialidad ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-especialidad li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.98rem;
  font-weight: 700;
}

.hero-especialidad li::before {
  color: var(--yellow-dark);
  content: "•";
  font-size: 1.25rem;
  line-height: 1;
}

/* En escritorio los CTA viven en el panel de cotización, no en el hero. */
.hero-actions {
  display: none;
  gap: 9px;
  margin-top: 22px;
}

/* Panel "¿Qué necesitas?" montado sobre el hero. */
.quote-wrap {
  position: relative;
  z-index: 3;
  margin-top: -128px;
}

.quote-panel {
  padding: 22px 26px 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.quote-title {
  margin: 0 0 16px;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.quote-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 228px;
  align-items: stretch;
  gap: 24px;
}

.quote-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quote-item {
  display: flex;
  flex-direction: column;
}

/* El detalle desplegable solo existe en móvil; en escritorio los CTA viven
   en la columna de la derecha del panel. */
.quote-detail {
  display: none;
}

.quote-option {
  display: grid;
  width: 100%;
  flex: 1;
  place-items: center;
  gap: 10px;
  min-height: 126px;
  padding: 16px 10px;
  color: var(--ink);
  text-align: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

/* Hover y seleccionado deben distinguirse: compartían estilo y parecían dos
   opciones activas. El guard `hover: hover` evita además que en táctil el
   hover se quede pegado después del tap. */
@media (hover: hover) {
  .quote-option:hover {
    border-color: #c3cad5;
    transform: translateY(-2px);
  }
}

.quote-option.is-selected {
  background: #fffbee;
  border-color: var(--yellow-dark);
  box-shadow: inset 0 0 0 1px var(--yellow-dark);
}

.quote-option strong {
  font-size: 0.95rem;
  font-weight: 720;
}

.quote-option small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
}

.quote-option .chevron {
  display: none;
}

.option-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
}

.option-icon svg {
  width: 54px;
  height: 54px;
  fill: var(--yellow);
}

.option-icon .icon-cut {
  fill: white;
}

.quote-actions {
  display: grid;
  align-content: center;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.quote-actions .button {
  width: 100%;
  min-height: 44px;
  padding-inline: 14px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Rail "Equipo disponible" */
.equip-rail {
  padding: 34px 0 52px;
  background: white;
}

.rail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.rail-head h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.rail-wrap {
  position: relative;
}

/* Cuatro tarjetas a la vista; el resto se alcanza con la flecha o arrastrando. */
.rail {
  display: grid;
  grid-auto-columns: calc((100% - 3 * 14px) / 4);
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.equip-card {
  scroll-snap-align: start;
}

.rail-next[hidden] {
  display: none;
}

.rail-next {
  position: absolute;
  top: 50%;
  right: -20px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.rail-next:hover {
  background: var(--yellow);
  transform: translateY(-50%) scale(1.06);
}

.rail-next svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.equip-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.equip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.equip-card img {
  width: 100%;
  height: 152px;
  object-fit: cover;
  background: white;
}

/* Columna flexible: el botón de WhatsApp queda alineado abajo aunque el
   título ocupe uno o dos renglones. */
.equip-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.equip-card-body .wa-chip {
  margin-top: auto;
}

/* Los títulos ocupan uno o dos renglones y las tarjetas del carrusel se
   igualan a la más alta, así que el sobrante caía entero entre el filete y el
   botón. Reservando la altura de dos renglones el hueco es el mismo en todas
   y mucho más corto. */
.equip-card h3 {
  position: relative;
  min-height: 2.4em;
  padding-bottom: 8px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.equip-card h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 3px;
  content: "";
  background: var(--yellow);
}

.wa-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.wa-chip:hover {
  background: #f3fbf5;
  border-color: rgba(31, 170, 75, 0.55);
}

.wa-chip .icon-wa {
  width: 16px;
  height: 16px;
}

.quote-chip {
  font-weight: 800;
}

.quote-chip .chev {
  width: 13px;
  height: 13px;
  fill: var(--ink);
  opacity: 0.55;
}

.quote-chip:hover {
  background: #fffbee;
  border-color: var(--yellow-dark);
}

.quote-chip:hover .chev {
  opacity: 1;
}

/* Cada renglón del catálogo abre la cotización con ese equipo ya elegido. */
.catalog-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.catalog-grid a .chev {
  width: 12px;
  height: 12px;
  flex: none;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 140ms ease;
}

.catalog-grid a:hover {
  color: var(--yellow-ink);
}

.catalog-grid a:hover .chev,
.catalog-grid a:focus-visible .chev {
  opacity: 1;
}

/* Sello de trayectoria: banda oscura entre el hero y el panel de cotización.
   El panel blanco cae encima (margin-top negativo), así que la banda lleva un
   zócalo alto y el contenido se queda en la mitad de arriba. */
.seal-bar {
  position: relative;
  padding: 46px 0 168px;
  overflow: hidden;
  background: var(--ink);
  color: white;
}

/* Trama diagonal apenas perceptible: recoge la diagonal de la foto del hero
   sin ponerse a competir con ella. */
.seal-bar::before {
  position: absolute;
  content: "";
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0 2px,
    transparent 2px 12px
  );
}

/* Filo amarillo que cierra la foto por arriba, desvanecido en los extremos. */
.seal-bar::after {
  position: absolute;
  content: "";
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(246, 196, 0, 0) 0%,
    var(--yellow) 24%,
    var(--yellow) 76%,
    rgba(246, 196, 0, 0) 100%
  );
}

.seal-inner {
  position: relative;
  z-index: 1;
}

.seal-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
}

.seal {
  position: relative;
  display: grid;
  flex: none;
  width: 80px;
  height: 80px;
  place-items: center;
}

/* Halo tenue detrás de la estrella: la despega del fondo oscuro sin recurrir
   a un borde duro. */
.seal::before {
  position: absolute;
  content: "";
  inset: -14px;
  background: radial-gradient(circle, rgba(246, 196, 0, 0.2), transparent 68%);
}

.seal svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgba(246, 196, 0, 0.09);
  stroke: var(--yellow);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.seal-num {
  position: relative;
  color: var(--yellow);
  font-size: 1.75rem;
  font-weight: 850;
  letter-spacing: -0.045em;
}

/* Con los dos filetes el rótulo pasó a ser la línea más ancha, así que el
   titular se centra sobre él en vez de alinearse a la izquierda. */
.seal-text {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.seal-text strong {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* Filetes cortos a ambos lados del rótulo: le dan el aire de placa
   conmemorativa que le faltaba cuando era solo una línea de texto. */
.seal-text small {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
  font-weight: 640;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.seal-text small::before,
.seal-text small::after {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--yellow);
  content: "";
}

/* El espaciado entre letras deja un hueco fantasma tras la última: sin esto el
   filete de la derecha queda más separado que el de la izquierda. */
.seal-text small::after {
  margin-left: -0.16em;
}

/* Tarjetas resumen de la portada (enlazan a las páginas interiores). */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.teaser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 14px 0;
  color: inherit;
  /* El mismo blanco y el mismo filete de la caja del formulario de contacto:
     una sola familia de tarjetas en todo el sitio. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.teaser-card:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
  box-shadow: var(--shadow-md);
}

.teaser-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 11px;
}

.teaser-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.teaser-card:hover .teaser-foto img {
  transform: scale(1.04);
}

/* Velo degradado: el enlace va en blanco sobre foto, y las tres tienen cielo.
   Sin él, "Ver servicios" sobre nube se quedaba en 2:1. */
.teaser-foto::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 15, 28, 0.72) 0%,
    rgba(9, 15, 28, 0.42) 34%,
    rgba(9, 15, 28, 0.08) 66%,
    rgba(9, 15, 28, 0.24) 100%
  );
}

/* El enlace vive arriba a la derecha, sobre la foto. */
.teaser-ir {
  position: absolute;
  top: 13px;
  right: 15px;
  z-index: 1;
  color: white;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* El espacio va en margin y no dentro del content: al hacerlo inline-block
   para poder animarlo, el espacio del texto se colapsaba. */
.teaser-ir::after {
  display: inline-block;
  margin-left: 5px;
  content: "→";
  transition: transform 200ms ease;
}

.teaser-card:hover .teaser-ir::after {
  transform: translateX(4px);
}

/* En reposo el subrayado solo cubre el "Ver"; al pasar por encima se estira
   hasta el final del rótulo, sin llegar a la flecha. */
.teaser-ir::before {
  position: absolute;
  bottom: -4px;
  left: 0;
  /* Medido: "Ver" ocupa 24px en los tres rótulos. */
  width: 26px;
  height: 2px;
  content: "";
  background: white;
  transition: width 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.teaser-card:hover .teaser-ir::before,
.teaser-card:focus-visible .teaser-ir::before {
  width: calc(100% - 22px);
}

.teaser-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  /* Deja libre el alto de la duna, que es proporcional al ancho de la tarjeta:
     en la más larga el último renglón le caía justo encima. */
  padding: 0 6px calc(18.5% + 8px);
}

/* El ícono se monta a caballo del borde inferior de la foto: media placa
   sobre la imagen y media sobre el fondo crema de la tarjeta. */
.teaser-icono {
  display: grid;
  width: 60px;
  height: 60px;
  margin: -30px 0 18px 6px;
  place-items: center;
  background: var(--yellow);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(17, 26, 46, 0.16);
}

.teaser-icono svg {
  width: 33px;
  height: 33px;
  fill: var(--ink);
}

/* Filete amarillo bajo el título, del mismo ancho que el ícono. */
.teaser-card h3 {
  position: relative;
  padding-bottom: 16px;
  margin: 0 0 16px 6px;
  font-size: 1.42rem;
  letter-spacing: -0.03em;
}

.teaser-card h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  content: "";
  background: var(--yellow);
  border-radius: 2px;
}

.teaser-card p {
  margin: 0 0 0 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Duna decorativa al pie de la tarjeta. Va a sangre, por debajo del relleno,
   y detrás del texto: de ahí el z-index del cuerpo. Conserva su proporción
   (5.49:1) en vez de estirarse, así las crestas no se deforman al cambiar el
   ancho de la tarjeta. */
.teaser-duna {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

/* El PNG viene en arena y la tarjeta pasó a blanco: se le gira el tono al azul
   de la paleta. Medido sobre el píxel compuesto, el ámbar h43° queda en h212°,
   que es donde vive --line (h214°). La saturación sube un punto porque sobre
   blanco, sin ella, las olas se desvanecían. */
.teaser-duna img {
  display: block;
  width: 100%;
  height: auto;
  filter: hue-rotate(180deg) saturate(1.05) brightness(0.96);
}

/* 5. Cabeceras de páginas interiores ------------------------------------ */

.page-head {
  position: relative;
  padding: 58px 0 54px;
  color: white;
  background: var(--ink);
}

.page-head::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-image: var(--page-head-image, none);
  background-position: center;
  background-size: cover;
  opacity: 0.28;
}

.page-head::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(100deg, rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.66));
}

.page-head .shell {
  position: relative;
  z-index: 2;
}

.page-head h1 {
  max-width: 780px;
  margin-bottom: 14px;
  font-size: clamp(2.1rem, 4vw, 3rem);
}

.page-head p {
  max-width: 620px;
  margin: 0;
  color: #cbd2de;
  font-size: 1rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #9ba6b8;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crumbs a {
  color: var(--yellow);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

/* 6. Bloques de contenido ----------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.service-card {
  position: relative;
  padding: 28px;
  overflow: hidden;
  background: white;
  border: 1px solid #e5e2db;
  border-radius: var(--radius-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.service-card:hover {
  z-index: 2;
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.service-card::after {
  position: absolute;
  right: -32px;
  bottom: -45px;
  width: 110px;
  height: 110px;
  content: "";
  background: var(--yellow);
  border-radius: 50%;
  opacity: 0.14;
}

.card-index {
  display: inline-block;
  margin-bottom: 30px;
  color: #8b760c;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.service-card h3 {
  margin-bottom: 14px;
}

.service-card p {
  color: var(--muted);
  font-size: 0.92rem;
}

.service-card ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 18px 0 0;
  font-size: 0.87rem;
  list-style: none;
}

.service-card li::before {
  margin-right: 9px;
  color: var(--yellow-dark);
  content: "—";
}

.service-card-dark {
  color: white;
  background: var(--ink);
  border-color: var(--ink);
}

.service-card-dark p,
.service-card-dark .card-index {
  color: #c6ccda;
}

.innovation {
  overflow: hidden; /* la escuadra decorativa sobresale del shell en móvil */
  color: white;
  background: var(--ink);
}

.innovation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(44px, 7vw, 84px);
}

.innovation-image {
  position: relative;
  margin: 0;
}

.innovation-image::before {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 42%;
  height: 42%;
  content: "";
  border-top: 8px solid var(--yellow);
  border-right: 8px solid var(--yellow);
}

.innovation-image img {
  position: relative;
  width: 100%;
  min-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.innovation-image figcaption {
  position: absolute;
  bottom: 22px;
  left: 22px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.innovation-copy .section-kicker {
  color: var(--yellow);
}

.innovation-copy .lead,
.innovation-copy > p:not(.section-kicker, .standards) {
  color: #cfd5df;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0;
}

.tag-list span {
  padding: 8px 12px;
  color: #e5e9f0;
  background: #202c43;
  border: 1px solid #35425a;
  border-radius: 999px;
  font-size: 0.76rem;
}

.standards {
  padding-top: 18px;
  margin-bottom: 0;
  color: var(--yellow);
  border-top: 1px solid #35425a;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.filter-button {
  padding: 9px 14px;
  color: var(--muted);
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.filter-button.is-active {
  color: var(--ink);
  background: var(--yellow);
  border-color: var(--yellow);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.project-card {
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease;
}

.project-card:hover {
  transform: translateY(-6px);
}

.project-card.is-hidden {
  display: none;
}

.project-card img {
  width: 100%;
  height: 235px;
  object-fit: cover;
}

.project-card > div {
  padding: 22px;
  color: white;
}

.project-card span,
.equipment-card span {
  color: var(--yellow);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-card h3 {
  margin: 8px 0;
}

.project-card p {
  margin: 0;
  color: #bdc4d2;
  font-size: 0.85rem;
}

.project-card-wide {
  grid-column: span 2;
}

.project-card-wide img {
  height: 265px;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.equipment-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.equipment-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: white;
}

.equipment-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.equipment-card h3 {
  margin: 8px 0 6px;
  font-size: 1.1rem;
}

.equipment-card p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.86rem;
}

.equipment-card .wa-chip {
  margin-top: auto;
  font-size: 0.74rem;
}

.catalog-table {
  margin-top: 26px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}

.catalog-head strong {
  display: block;
  font-size: 1.1rem;
}

.catalog-head small {
  color: var(--muted);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 26px;
}

.catalog-grid > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 15px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.catalog-grid span {
  color: #9a7f00;
  font-size: 0.68rem;
  font-weight: 850;
}

.catalog-grid a {
  font-size: 0.83rem;
}

.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
  align-items: center;
  gap: clamp(44px, 7vw, 84px);
}

.company-copy .lead {
  color: var(--ink);
}

.company-copy > p:not(.section-kicker, .lead) {
  color: var(--muted);
}

.company-photo {
  position: relative;
  margin: 0;
}

.company-photo img {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 8px var(--radius-lg);
}

.company-photo figcaption {
  position: absolute;
  bottom: -26px;
  left: -28px;
  display: grid;
  padding: 20px 24px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-md);
}

.company-photo figcaption strong {
  font-size: 1.9rem;
  line-height: 1;
}

.company-photo figcaption span {
  font-size: 0.78rem;
  font-weight: 700;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.value-card {
  padding: 26px;
  background: var(--soft-warm);
  border-top: 4px solid var(--yellow);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.value-card span {
  color: #a28a17;
  font-size: 0.72rem;
  font-weight: 850;
}

.value-card h3 {
  margin: 28px 0 12px;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.partners {
  text-align: center;
}

.partners h2 {
  margin-bottom: 30px;
}

.logo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 12px;
}

.logo-strip img {
  width: 100%;
  height: 74px;
  padding: 10px;
  object-fit: contain;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  filter: grayscale(1);
  opacity: 0.76;
  transition: filter 180ms ease, opacity 180ms ease;
}

.logo-strip img:hover {
  filter: none;
  opacity: 1;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1.08fr);
  gap: clamp(40px, 6vw, 80px);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 36px;
}

.contact-details {
  display: grid;
  gap: 16px;
  margin: 0;
}

.contact-details > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.contact-details dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-details dd {
  margin: 0;
  font-size: 0.9rem;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 3.5vw, 36px);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.form-heading {
  display: grid;
  margin-bottom: 6px;
}

.form-heading span {
  color: #8b7600;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-heading strong {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--ink-2);
  font-size: 0.76rem;
  font-weight: 750;
}

/* `display: grid` gana sobre el estilo por defecto de [hidden]; hay que
   devolverle el efecto o el campo Equipo nunca se oculta. */
.contact-form label[hidden] {
  display: none;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  color: var(--ink);
  background: #fafafa;
  border: 1px solid #d8dde6;
  border-radius: var(--radius-xs);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--yellow-dark);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.16);
}

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

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.form-note.is-success {
  padding: 10px 12px;
  color: var(--green-ink);
  background: #e6f7e7;
  border-radius: 7px;
}

/* Mapa incrustado con la ficha al lado: si el iframe no carga (bloqueo de red,
   extensión, política de terceros), la dirección y el enlace siguen ahí. */
.map-block {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.map-frame {
  overflow: hidden;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

.location-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px 28px;
  background: var(--soft-warm);
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius);
}

.location-card h3 {
  margin: 0 0 4px;
}

.location-card > p:last-of-type {
  color: var(--muted);
  font-size: 0.92rem;
}

.location-card .button {
  margin-top: auto;
}

/* 7. Banda CTA y pie --------------------------------------- */

.cta-band {
  padding: 56px 0;
  color: white;
  background: var(--ink);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cta-inner h2 {
  margin-bottom: 6px;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
}

.cta-inner p {
  max-width: 520px;
  margin: 0;
  color: #cbd2de;
  font-size: 0.95rem;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer {
  padding: 52px 0 24px;
  color: #9da7b8;
  background: #0b1220;
  border-top: 1px solid #253047;
  font-size: 0.85rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #1c2740;
}

/* Los tres en una fila, igualados por altura. Llevan el nombre en negro sobre
   fondo transparente, así que sobre el pie oscuro se perderían: van sobre
   placa blanca, igual que la franja de clientes. */
.footer-logos {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.footer-logos li {
  display: flex;
}

.footer-logos img {
  display: block;
  width: auto;
  height: 64px;
  padding: 8px 10px;
  background: white;
  border-radius: 8px;
}

.footer-grid p {
  margin: 0 0 10px;
  max-width: 340px;
}

/* La razón social se parte en dos renglones siempre por el mismo sitio: sin
   esto quedaba "…Ecológicos S.A." arriba y un "de C.V." suelto abajo. */
.footer-grid .nowrap {
  white-space: nowrap;
}

.footer-grid h3 {
  margin-bottom: 14px;
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-links a {
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-links a:hover {
  color: var(--yellow);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  font-size: 0.75rem;
}

.footer-bottom p {
  margin: 0;
}

/* Widget de chat --------------------------------------------------------- */

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

.chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Acceso a WhatsApp flotante. Solo aparece en teléfono: ahí los tres
   logotipos dejan el encabezado sin sitio para la píldora verde, así que baja
   a la esquina, debajo del botón de chat. En escritorio sigue en su sitio del
   encabezado y este no se muestra. */
.wa-float {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 120;
  display: none;
  width: 52px;
  height: 52px;
  place-items: center;
  background: var(--green);
  border-radius: 17px;
  box-shadow: 0 9px 24px rgba(17, 26, 46, 0.26);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.wa-float:hover {
  background: var(--green-dark);
  box-shadow: 0 13px 30px rgba(17, 26, 46, 0.32);
  transform: translateY(-2px);
}

.wa-float svg {
  width: 27px;
  height: 27px;
  fill: white;
}

/* Cuadrado de esquinas redondeadas menos una: la de abajo a la derecha se
   queda casi en punta y hace de rabito de bocadillo, apuntando a la esquina
   de la pantalla. Es lo que lo distingue de un botón redondo cualquiera sin
   necesidad de ponerle texto.

   El azul de marca sobre fondo claro da 16:1, así que el propio cuerpo marca
   el límite del control; el amarillo suelto se quedaba en 1.6:1. */
.chat-toggle {
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  background: white;
  border: 0;
  border-radius: 20px 20px 5px 20px;
  /* En blanco el cuerpo no puede marcar su propio límite sobre la página, así
     que lo marca el filo. Este gris es el más claro que llega a 3:1 contra
     blanco (3.17:1); sobre el pie oscuro el blanco ya se separa solo. */
  box-shadow:
    0 0 0 1.5px #8a919e,
    0 9px 24px rgba(17, 26, 46, 0.24);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-radius 180ms ease,
    background-color 180ms ease;
}

/* Al pasar por encima el rabito se recoge y el filo se cierra en azul. */
.chat-toggle:hover {
  background: #fffdf4;
  border-radius: 20px;
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 13px 30px rgba(17, 26, 46, 0.3);
  transform: translateY(-2px);
}

.chat-toggle svg {
  width: 27px;
  height: 27px;
  fill: var(--ink);
}

/* Con el panel abierto sobra: ya tiene su propia X dentro. */
.chat.is-open .chat-toggle {
  display: none;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.chat-panel[hidden] {
  display: none;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: white;
  background: var(--ink);
}

.chat-head strong {
  display: block;
  font-size: 0.95rem;
}

.chat-head small {
  color: #9ba6b8;
  font-size: 0.72rem;
}

.chat-close {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  color: white;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.chat-close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}

.chat-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.chat-msg-bot {
  color: var(--ink-2);
  background: var(--soft);
  border-bottom-left-radius: 4px;
}

.chat-msg-user {
  align-self: flex-end;
  color: var(--ink);
  background: #fff3c4;
  border-bottom-right-radius: 4px;
}

/* En bloque, o el enlace se pega al final del párrafo sin separación. */
.chat-msg a {
  display: block;
  width: fit-content;
  margin-top: 10px;
  color: var(--ink);
  font-weight: 800;
  text-decoration-color: var(--yellow-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.chat-typing {
  display: flex;
  gap: 4px;
  padding: 13px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: chat-parpadeo 1.2s infinite;
}

.chat-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chat-parpadeo {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

.chat-faq {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

.chat-faq[hidden] {
  display: none;
}

.chat-faq-title {
  width: 100%;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-chip {
  padding: 7px 11px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.chat-chip:hover {
  background: #fffbee;
  border-color: var(--yellow-dark);
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-soft);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  color: var(--ink);
  background: #fafafa;
  border: 1px solid #d8dde6;
  border-radius: 999px;
  font-size: 0.85rem;
  outline: none;
}

.chat-form input:focus {
  border-color: var(--yellow-dark);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.16);
}

.chat-form button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  color: var(--ink);
  background: var(--yellow);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.chat-form button:hover {
  background: #ffd014;
}

.chat-form button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Pantalla de entrada ----------------------------------------------------- */

html.entrando,
html.entrando body {
  overflow: hidden;
}

.entrada {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Dos mitades que se retiran hacia los lados: el telón. */
.entrada-telon {
  position: absolute;
  top: 0;
  width: 50.2%;
  height: 100%;
  background: white;
  transition: transform 640ms cubic-bezier(0.76, 0, 0.24, 1);
}

.entrada-telon-izq {
  left: 0;
}

.entrada-telon-der {
  right: 0;
}

.entrada.is-abriendo .entrada-telon-izq {
  transform: translateX(-100%);
}

.entrada.is-abriendo .entrada-telon-der {
  transform: translateX(100%);
}

.entrada-centro {
  position: relative;
  z-index: 1;
  text-align: center;
  transition: opacity 380ms ease, transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.entrada.is-abriendo .entrada-centro {
  opacity: 0;
  transform: translateY(-16px) scale(1.04);
}

@keyframes entrada-logo {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* El logotipo entra completo: ya no hace falta la ventana de recorte que
   necesitaba el archivo cuadrado anterior. */
.entrada-logo {
  display: block;
  width: auto;
  height: 82px;
  margin: 0 auto 20px;
  opacity: 0;
  animation: entrada-logo 620ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes entrada-nombre {
  from {
    opacity: 0;
    letter-spacing: 0.32em;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.06em;
    transform: none;
  }
}

.entrada-nombre {
  margin: 0 0 26px;
  color: var(--ink);
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0;
  animation: entrada-nombre 760ms cubic-bezier(0.2, 0.7, 0.3, 1) 340ms forwards;
  /* El mismo relieve gris del hero: el telón se abre justo sobre ese nombre y
     verlo cambiar de color en tres segundos delataría el truco. */
  text-shadow:
    1px 1px 0 #d5d9e0,
    2px 2px 0 #c2c7d1,
    3px 4px 7px rgba(17, 26, 46, 0.16);
}

.entrada-iconos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
}

@keyframes entrada-icono {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.82);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.entrada-icono {
  width: 44px;
  height: 44px;
  flex: none;
  fill: var(--yellow);
  opacity: 0;
  animation: entrada-icono 460ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.entrada-icono .icon-cut {
  fill: white;
}

@keyframes entrada-puntos {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.entrada-puntos {
  color: var(--ink);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  opacity: 0;
  animation: entrada-puntos 300ms ease forwards;
}

/* Entrada del hero: los elementos suben en cascada cuando el telón se retira. */
@keyframes sube {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .hero-copy > * {
  opacity: 0;
}

.js.cargado .hero-copy > * {
  animation: sube 640ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.js.cargado .hero-brand {
  animation-delay: 60ms;
}

.js.cargado .hero h1 {
  animation-delay: 180ms;
}

.js.cargado .hero-especialidad {
  animation-delay: 320ms;
}

.js.cargado .hero-actions {
  animation-delay: 440ms;
}

.js .quote-panel,
.js .rail-head,
.js .rail-wrap {
  opacity: 0;
}

.js.cargado .quote-panel,
.js.cargado .rail-head,
.js.cargado .rail-wrap {
  animation: sube 640ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.js.cargado .quote-panel {
  animation-delay: 540ms;
}

.js.cargado .rail-head {
  animation-delay: 640ms;
}

.js.cargado .rail-wrap {
  animation-delay: 720ms;
}

@media (max-width: 860px) {
  .entrada-logo {
    width: 78px;
    height: 40px;
    margin-bottom: 14px;
  }

  .entrada-logo img {
    top: -18px;
    left: -9px;
    width: 96px;
    height: 96px;
  }

  .entrada-icono {
    width: 36px;
    height: 36px;
  }

  .entrada-iconos {
    min-height: 44px;
  }
}

/* Solo se oculta si hay JS capaz de volver a mostrarlo (clase puesta por icons.js). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal,
  .js .hero-copy > *,
  .js .quote-panel,
  .js .rail-head,
  .js .rail-wrap {
    opacity: 1;
    transform: none;
  }
}

/* 8. Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .header-inner {
    gap: 20px;
  }

  .main-nav {
    gap: 16px;
  }

  .wa-long {
    display: none;
  }

  .wa-short {
    display: inline;
  }

  .hero-copy {
    width: 50%;
    padding-top: 28px;
    padding-bottom: 44px;
  }

  .hero-media {
    width: 56%;
  }

  .quote-body {
    grid-template-columns: 1fr;
  }

  .quote-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 18px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .rail-next {
    right: -8px;
  }

  .service-grid,
  .project-grid,
  .equipment-grid,
  .values-grid,
  .teaser-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card-wide {
    grid-column: span 2;
  }

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

  .logo-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    --shell: min(100% - 32px, 720px);
    --header-h: 66px;
  }

  .section {
    padding: 60px 0;
  }

  .section-tight {
    padding: 44px 0;
  }

  .header-inner {
    gap: 12px;
  }

  .menu-toggle {
    display: flex;
  }

  /* Los tres logotipos ocupan el sitio que tenía la píldora verde, así que
     WhatsApp se va a la esquina flotante y el encabezado queda con logotipos
     a un lado y MENÚ al otro. */
  .header-contact {
    display: none;
  }

  .wa-float {
    display: grid;
  }

  /* El chat sube para dejarle sitio debajo. */
  .chat {
    bottom: 76px;
  }

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

  .menu-toggle[aria-expanded="true"] .menu-toggle-barras span:nth-child(2) {
    opacity: 0;
  }

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

  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    display: grid;
    gap: 0;
    padding: 12px 18px 22px;
    background: white;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-140%);
    visibility: hidden;
    opacity: 0;
    transition: transform 220ms ease, opacity 180ms ease, visibility 220ms;
  }

  .main-nav.is-open {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }

  /* Ícono y etiqueta van juntos y centrados como un solo bloque, para no
     romper el centrado que ya tenía el menú. */
  .main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 8px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
  }

  .nav-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: var(--yellow);
  }

  /* Sin hover que valga en pantalla táctil: aquí el subrayado solo marca la
     página actual, y se pega más al texto porque el renglón es más apretado. */
  .main-nav a .nav-texto::after {
    bottom: -5px;
  }

  .main-nav a:hover .nav-texto::after,
  .main-nav a:focus-visible .nav-texto::after {
    transform: scaleX(0);
  }

  .main-nav a[aria-current="page"] .nav-texto::after {
    transform: scaleX(1);
  }

  /* Hero móvil: foto a sangre con la copia y los CTA encima. */
  .hero {
    padding-bottom: 0;
    background: var(--ink);
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: min(66vh, 480px);
    padding: 30px 0 30px;
  }

  .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
  }

  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    /* Calibrado contra el peor caso: una diapositiva que se desvanece a blanco.
       Con estos valores el título y el subtítulo mantienen contraste suficiente
       incluso sobre blanco puro. */
    background: linear-gradient(
      180deg,
      rgba(10, 16, 30, 0.25) 0%,
      rgba(10, 16, 30, 0.62) 45%,
      rgba(10, 16, 30, 0.9) 100%
    );
  }

  /* La copia ocupa todo el alto del hero para que el nombre pueda quedarse
     arriba y el resto caer al fondo, sin depender de un relleno fijo. */
  .hero-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: calc(100% - 32px);
    padding: 0;
    margin-inline: auto;
    color: white;
  }

  .hero h1 {
    max-width: 420px;
    margin-bottom: 10px;
    font-size: clamp(1.7rem, 7.5vw, 2.45rem);
    line-height: 1.05;
  }

  /* Sobre la foto oscura el nombre va en blanco, y el relieve en un gris
     oscuro: el claro se perdería contra el propio texto. */
  /* El margen automático se come el hueco libre: el nombre se ancla arriba y
     empuja subtítulo, especialidades y botones al fondo del hero. El relleno
     garantiza la separación mínima cuando no sobra espacio. */
  .hero-brand {
    color: white;
    font-size: clamp(2.2rem, 10.4vw, 3.2rem);
    margin-bottom: auto;
    padding-bottom: 12px;
    text-shadow:
      1px 1px 0 #6c7382,
      2px 2px 0 #454c5a,
      3px 4px 8px rgba(0, 0, 0, 0.42);
  }

  .hero-especialidad {
    margin-top: 14px;
  }

  .hero-especialidad p,
  .hero-especialidad li {
    color: white;
    font-size: 0.9rem;
  }

  .hero-especialidad p {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .hero-especialidad li::before {
    color: var(--yellow);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 50px;
    padding: 12px 10px;
    gap: 7px;
    font-size: 0.84rem;
    letter-spacing: -0.01em;
  }

  .hero-actions .chev-doble {
    width: 13px;
    height: 13px;
  }

  /* Blanco, como gustaba, pero con el texto en oscuro: antes era blanco sobre
     blanco y quedaba en 1.1:1. */
  .hero-actions .button-ghost {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    border-color: transparent;
  }

  .hero-actions .button-ghost:hover {
    background: white;
  }

  /* El panel deja de flotar y se integra como lista. */
  .quote-wrap {
    margin-top: 0;
    background: var(--soft);
  }

  .quote-panel {
    padding: 20px 0 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .quote-title {
    margin-bottom: 12px;
    font-size: 1.1rem;
  }

  .quote-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .quote-option {
    grid-template-columns: 32px 1fr auto;
    place-items: center start;
    min-height: 52px;
    padding: 10px 14px;
    text-align: left;
    background: white;
  }

  .quote-option strong {
    font-size: 0.88rem;
  }

  .quote-option small {
    display: none;
  }

  .quote-option .chevron {
    display: block;
    width: 14px;
    height: 14px;
    fill: var(--ink-2);
    transition: transform 180ms ease;
  }

  .quote-option[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }

  /* Acordeón: la fila abierta y su detalle forman una sola tarjeta. */
  .quote-option[aria-expanded="true"] {
    border-radius: 10px 10px 0 0;
  }

  .quote-detail {
    display: grid;
    gap: 12px;
    padding: 13px 14px 14px;
    background: #fffbee;
    border: 1px solid var(--yellow-dark);
    border-top: 0;
    border-radius: 0 0 10px 10px;
  }

  .quote-detail[hidden] {
    display: none;
  }

  .quote-detail p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.83rem;
    line-height: 1.5;
  }

  .quote-detail .button {
    width: 100%;
    min-height: 44px;
    font-size: 0.82rem;
  }

  .option-icon {
    width: 30px;
    height: 30px;
  }

  .option-icon svg {
    width: 28px;
    height: 28px;
  }

  .quote-actions {
    display: none;
  }

  .equip-rail {
    padding: 24px 0 40px;
  }

  .rail-head {
    align-items: center;
    margin-bottom: 12px;
  }

  .rail-head h2 {
    font-size: 1.15rem;
  }

  .rail-head .text-link {
    font-size: 0.74rem;
  }

  /* El enlace no se parte en varias líneas, así que en pantallas estrechas
     era el título el que acababa partiéndose. Se acorta el enlace. */
  .link-extra {
    display: none;
  }

  .rail {
    display: flex;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .equip-card {
    min-width: min(48vw, 230px);
    scroll-snap-align: start;
  }

  .equip-card img {
    height: 118px;
  }

  /* En móvil el carrusel ya se arrastra con el dedo: la flecha sobra. */
  .rail-next {
    display: none;
  }

  .split-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .filter-bar {
    justify-content: flex-start;
  }

  .innovation-grid,
  .company-grid,
  .contact-grid,
  .map-block {
    grid-template-columns: 1fr;
  }

  .map-frame iframe {
    min-height: 280px;
  }

  .company-photo {
    margin-left: 26px;
  }

  /* Flex y no rejilla: las dos columnas se miden por su contenido y se centran
     como grupo. Con pistas de rejilla no salía, porque el bloque de marca las
     cruza de lado a lado y era él quien acababa fijando su ancho. El texto
     dentro sigue a la izquierda, que es como se recorre una lista de enlaces. */
  .footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 34px;
  }

  .footer-grid > :first-child {
    flex: 0 0 100%;
  }

  /* Centrado de verdad: además de centrar el grupo, cada columna centra su
     propio texto. Con los enlaces alineados a la izquierda el bloque parecía
     descuadrado aunque el grupo estuviera en su sitio. */
  .footer-grid > div {
    text-align: center;
  }

  /* Menos aire sobre el logo. Los dos bloques son azul oscuro y el hueco se
     leía como uno solo de casi 110px, así que se recorta por ambos lados. */
  .cta-band {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  /* La franja de clientes y el bloque de tarjetas van pegados a lo de arriba:
     son fondos claros seguidos y el hueco se sumaba igual que en el pie. */
  .partners {
    padding-top: 14px;
  }

  .section-soft {
    padding-top: 30px;
  }

  .site-footer {
    padding-top: 30px;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-grid > :first-child p {
    margin-inline: auto;
  }
}

/* En pantallas muy angostas la píldora con texto empuja la hamburguesa fuera
   de la ventana, así que se queda en ícono. El texto sigue en el árbol de
   accesibilidad para que el enlace conserve su nombre. */
@media (max-width: 400px) {
  .hero-actions .button {
    padding-inline: 8px;
    gap: 5px;
    font-size: 0.79rem;
  }
}

@media (max-width: 360px) {
  .hero-actions .button {
    font-size: 0.74rem;
  }

  .hero-actions .chev-doble {
    width: 11px;
    height: 11px;
  }
}

/* Por debajo de esto, dos CTA en fila obligarían a un texto ilegible: se apilan. */
@media (max-width: 345px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .header-inner {
    gap: 12px;
  }

  .rail-head {
    gap: 12px;
  }

  .rail-head h2 {
    font-size: 1.05rem;
  }

}

@media (max-width: 600px) {
  :root {
    --shell: calc(100% - 28px);
  }

  .section {
    padding: 48px 0;
  }

  h2 {
    font-size: clamp(1.65rem, 7.4vw, 2.1rem);
  }

  /* Con WhatsApp fuera del encabezado sobra ancho, así que los tres
     logotipos pueden crecer en vez de encogerse. */
  .brand-logo {
    height: 42px;
  }

  .brand {
    gap: 8px;
  }

  /* Los tres siguen en una fila: a 52px de alto suman 259px de los 286
     disponibles en la pantalla más estrecha que probamos. */
  .footer-logos {
    justify-content: center;
    gap: 8px;
  }

  .footer-logos img {
    height: 52px;
    padding: 6px 8px;
  }

  .hero-grid {
    min-height: min(72vh, 470px);
    padding-top: 26px;
  }

  /* En móvil el panel de cotización ya no cae encima: la banda no necesita
     zócalo y vuelve a un alto normal. */
  .seal-bar {
    padding: 26px 0 28px;
  }

  .seal-lockup {
    gap: 15px;
  }

  .seal {
    width: 62px;
    height: 62px;
  }

  .seal-num {
    font-size: 1.35rem;
  }

  .seal-text {
    gap: 7px;
  }

  .seal-text strong {
    font-size: 1.18rem;
  }

  .seal-text small {
    gap: 8px;
    font-size: 0.63rem;
    letter-spacing: 0.12em;
  }

  .seal-text small::before,
  .seal-text small::after {
    width: 18px;
  }

  .service-grid,
  .project-grid,
  .equipment-grid,
  .values-grid,
  .teaser-grid,
  .catalog-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .project-card-wide {
    grid-column: span 1;
  }

  .project-card img,
  .project-card-wide img {
    height: 220px;
  }

  .card-index {
    margin-bottom: 24px;
  }

  .innovation-image img {
    min-height: 320px;
  }

  .catalog-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .catalog-head .button {
    width: 100%;
  }

  .catalog-grid {
    padding: 0 18px;
  }

  .company-photo {
    margin: 0 0 30px 12px;
  }

  .company-photo img {
    min-height: 330px;
  }

  .company-photo figcaption {
    bottom: -24px;
    left: -12px;
  }

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

  .contact-actions {
    display: grid;
  }

  .contact-actions .button {
    width: 100%;
  }

  .contact-details > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .cta-actions {
    display: grid;
    width: 100%;
  }

  /* El pie es la zona más densa del móvil y a 14px del borde se leía apretado.
     Se le da el doble de margen que al resto del contenido. */
  .site-footer .shell {
    width: calc(100% - 56px);
  }

  .footer-grid {
    gap: 22px 22px;
  }

  .footer-grid h3 {
    margin-bottom: 10px;
    font-size: 0.72rem;
  }

  /* break-word y no anywhere: anywhere sí cuenta para el ancho mínimo, así que
     la columna podía encogerse hasta partir el correo aunque hubiera sitio.
     Con break-word la columna reserva el ancho del correo y solo lo parte si
     de verdad no cabe. */
  .footer-links {
    font-size: 0.8rem;
    overflow-wrap: break-word;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  /* El bottom deja sitio al acceso de WhatsApp, que va justo debajo. */
  .chat {
    right: 12px;
    bottom: 76px;
  }

  .chat-toggle {
    width: 52px;
    height: 52px;
    border-radius: 17px 17px 5px 17px;
  }

  .chat-toggle svg {
    width: 24px;
    height: 24px;
  }

  .chat-panel {
    width: calc(100vw - 24px);
    max-height: min(70vh, 520px);
  }

}

/* Los bloques de arriba están ordenados de más estrecho a más ancho, así que
 * el de 600px los pisa a todos por venir después. Estos ajustes van al final
 * para que sí ganen en las pantallas más angostas. */
@media (max-width: 380px) {
  /* Con los dos filetes, "VERACRUZ" se iba a un segundo renglón por debajo de
     los 380px. Se recorta el sello y el cuerpo del rótulo en vez de quitar un
     filete: la simetría es justo lo que se pidió. */
  .seal-lockup {
    gap: 13px;
  }

  .seal {
    width: 56px;
    height: 56px;
  }

  .seal-num {
    font-size: 1.22rem;
  }

  .seal-text small {
    gap: 7px;
    font-size: 0.57rem;
    letter-spacing: 0.05em;
  }

  .seal-text small::before,
  .seal-text small::after {
    width: 14px;
  }
}

@media (max-width: 380px) {
  /* A partir de aquí Navegación y Contacto ya no caben lado a lado y flex las
     apila: el salto de línea se decide antes de encoger nada. Lo que sobra es
     el horario en un solo renglón, así que se le pone tope y se parte en dos;
     el correo (165px) sigue entrando entero. Recortar el margen habría sido lo
     fácil, pero es justo el aire que se pidió. */
  .site-footer .shell {
    width: calc(100% - 44px);
  }

  .footer-grid {
    gap: 22px 16px;
  }

  .footer-links li {
    max-width: 172px;
  }
}

@media (max-width: 345px) {
  /* "procodesa@hotmail.com" pide unos 165px y aquí la columna no llega, así que
     se partía a media palabra. Se recorta el margen doble y un punto el cuerpo
     de los enlaces: entra entero y el pie sigue despegado del borde. */
  .site-footer .shell {
    width: calc(100% - 34px);
  }

  /* El ancho de la columna izquierda lo marca el rótulo "NAVEGACIÓN" (99px con
     su espaciado), no los enlaces, así que aquí se recorta del otro lado. */
  .footer-grid {
    gap: 22px 14px;
  }

  .footer-links {
    font-size: 0.74rem;
  }

  .footer-links li {
    max-width: 164px;
  }
}

/* 9. Aviso de demostración -----------------------------------------------
 *
 * TEMPORAL: este bloque entero se borra al lanzar, junto con demo.js y su
 * <script> en las seis páginas.
 */

.demo-velo[hidden] {
  display: none;
}

.demo-velo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(8, 13, 24, 0.66);
  animation: demo-velo 260ms ease forwards;
}

@keyframes demo-velo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes demo-caja {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.demo-caja {
  position: relative;
  width: min(430px, 100%);
  padding: 30px 28px 26px;
  text-align: center;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 26px 60px rgba(8, 13, 24, 0.4);
  animation: demo-caja 320ms cubic-bezier(0.2, 0.7, 0.3, 1) 60ms both;
}

/* Un pulso corto al aparecer: es el elemento que tiene que mirarse antes que
   nada, y con el triángulo quieto se pasaba por alto. */
@keyframes demo-icono {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
  }
}

.demo-icono {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  place-items: center;
  background: #fdf3d2;
  border-radius: 50%;
  animation: demo-icono 900ms ease 520ms 2;
}

.demo-icono svg {
  width: 34px;
  height: 34px;
  /* El detalle blanco del signo va como atributo `fill` en el propio path:
     aquí solo se hereda el color del triángulo. */
  fill: var(--yellow-dark);
}

.demo-titulo {
  margin: 0 0 10px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.demo-texto {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.demo-texto strong {
  color: var(--ink);
}

.demo-ok {
  width: 100%;
  justify-content: center;
}

.demo-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.demo-cerrar:hover {
  color: var(--ink);
  background: var(--soft);
}

.demo-cerrar svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Con el aviso puesto, el fondo no se desplaza. */
.demo-abierto,
.demo-abierto body {
  overflow: hidden;
}

/* Marca de agua. Va abajo a la izquierda porque la derecha la ocupan el chat y
   WhatsApp, y sin eventos de puntero para no tapar nada de lo que hay debajo. */
.demo-marca {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 118;
  padding: 6px 13px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(17, 26, 46, 0.72);
  border: 1px solid rgba(246, 196, 0, 0.5);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.22em;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(3px);
}

@media (max-width: 600px) {
  .demo-caja {
    padding: 26px 20px 22px;
  }

  .demo-titulo {
    font-size: 1.2rem;
  }

  .demo-marca {
    left: 12px;
    bottom: 12px;
    padding: 5px 11px;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-velo,
  .demo-caja,
  .demo-icono {
    animation: none;
  }
}

/* Con "Inicio" el menú creció y entre 861 y 1000px el bloque de la derecha se
   salía hasta 37px de la ventana. En esa franja el enlace de WhatsApp se queda
   en ícono y los logotipos ceden unos píxeles; el rótulo vuelve en cuanto hay
   sitio. Va al final de la hoja porque los bloques de arriba están ordenados
   de más estrecho a más ancho y el de 1080px lo pisaría. */
@media (min-width: 861px) and (max-width: 1000px) {
  .brand-logo {
    height: 42px;
  }

  .brand {
    gap: 8px;
  }

  .main-nav {
    gap: 13px;
  }

  .header-contact .wa-short,
  .header-contact .wa-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}