/* =====================================================================
   HIDRAMA S.A.S. — Hoja de estilos principal
   ---------------------------------------------------------------------
   Organización del archivo:
   1. Variables de color           → aquí se cambian colores y fuentes
   2. Base y utilidades
   3. Encabezado y navegación
   4. Hero (portada) y fondo tipo plano
   5. Componentes (botones, tarjetas, cifras, proyectos, CTA)
   6. Páginas interiores (servicios, nosotros, contacto)
   7. Pie de página
   8. Animaciones y accesibilidad
   ===================================================================== */

/* ============ 1. VARIABLES DE COLOR ============ */

:root {
  /* --- Colores corporativos, tomados del logo HidRAMA
         (gradiente del monograma: #bf1a2c → #4e0f12; gris del wordmark: #656263) --- */
  --tinta: #26292d;          /* Gris grafito: fondos oscuros, títulos */
  --tinta-2: #34383d;        /* Variante clara del gris para degradados */
  --acento: #bf1a2c;         /* Rojo del logo: botones y detalles */
  --acento-osc: #9a1423;     /* Rojo oscuro: hover de botones */
  --acento-texto: #ab1727;   /* Rojo legible sobre fondo claro (contraste AA) */
  --acento-claro: #ee6b7d;   /* Rojo legible sobre el PIE oscuro (contraste AA).
                                El --acento normal solo da 2.36:1 contra
                                --tinta, así que sobre fondo oscuro va este. */

  /* --- Neutros (iguales en todos los temas) --- */
  --papel: #f5f6f7;          /* Fondo general de la página */
  --texto: #2a2e33;          /* Texto principal */
  --texto-suave: #5c646b;    /* Texto secundario */
  --borde: #e3e5e8;          /* Bordes y separadores */

  /* --- Tipografía --- */
  --f-titulos: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-cuerpo: 'Barlow', 'Segoe UI', Arial, sans-serif;

  /* --- Material "vidrio líquido" (estética Liquid Glass) --- */
  --vidrio: rgba(255, 255, 255, 0.62);        /* Paneles translúcidos (barra de navegación) */
  --vidrio-fuerte: rgba(255, 255, 255, 0.72); /* Tarjetas sobre secciones claras */
  --vidrio-borde: rgba(255, 255, 255, 0.85);  /* Borde con brillo especular */
  --desenfoque: blur(1.375rem) saturate(180%);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, 0.75); /* Reflejo superior del vidrio */

  /* --- Medidas --- */
  --ancho: 72rem;            /* Ancho máximo del contenido */
  --radio: 1.25rem;          /* Redondeo continuo de paneles */
  --radio-chico: 0.8rem;     /* Redondeo de controles pequeños */
  --capsula: 999px;          /* Botones y navegación en cápsula */
  --sombra-1: 0 0.25rem 1rem rgba(38, 41, 45, 0.07);
  --sombra-2: 0 1.25rem 2.5rem rgba(38, 41, 45, 0.16);
  --transicion: 0.3s cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* ============ 2. BASE Y UTILIDADES ============ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font: 400 1rem/1.65 var(--f-cuerpo);
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* Campo de color ambiental fijo: le da al material de vidrio algo que refractar */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 38rem at 12% -8%, rgba(191, 26, 44, 0.13), transparent 60%),
    radial-gradient(46rem 46rem at 108% 22%, rgba(101, 98, 99, 0.16), transparent 65%),
    radial-gradient(42rem 42rem at 50% 118%, rgba(191, 26, 44, 0.09), transparent 62%);
  pointer-events: none;
}

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

a { color: var(--acento-texto); }
a:hover { color: var(--acento-osc); }

h1, h2, h3, h4 {
  font-family: var(--f-titulos);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.12;
  color: var(--tinta);
  font-weight: 700;
}
h3, h4 { font-weight: 600; }

ul { list-style: none; }

/* Contenedor centrado */
.contenedor {
  width: min(var(--ancho), 100% - 2.5rem);
  margin-inline: auto;
}

/* Al saltar a un ancla, deja espacio para la barra flotante de navegación */
[id] { scroll-margin-top: 6.5rem; }

/* Espaciado vertical de secciones */
.seccion { padding: 4.5rem 0; }
.seccion--alt { background: rgba(255, 255, 255, 0.5); }

/* Encabezado de sección (etiqueta + título + intro) */
.cabecera-seccion {
  max-width: 46rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.cabecera-seccion h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  margin: 0.75rem 0 1rem;
}
.cabecera-seccion p { color: var(--texto-suave); }

/* Etiqueta pequeña (eyebrow) con línea, estilo rótulo de plano */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 600 0.78rem var(--f-cuerpo);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.etiqueta::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--acento);
}
.etiqueta--clara { color: var(--acento); } /* Para fondos oscuros */

/* Enlace para saltar al contenido (accesibilidad con teclado) */
.saltar {
  position: absolute;
  left: -62.5rem;
  top: 0;
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--acento);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radio);
  text-decoration: none;
}

/* Foco visible en toda la navegación por teclado */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ============ 3. ENCABEZADO Y NAVEGACIÓN ============ */
/* Barra flotante de vidrio: cápsula translúcida separada del borde superior */
.encabezado {
  position: sticky;
  top: 0.9rem;
  z-index: 50;
  margin-top: 0.9rem;
}

.encabezado__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
  position: relative;
  padding: 0.4rem 1.4rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--capsula);
  box-shadow: var(--sombra-1), var(--brillo);
  transition: box-shadow var(--transicion);
}
.encabezado.con-sombra .encabezado__interno {
  box-shadow: var(--sombra-2), var(--brillo);
}

/* Logo + nombre */
.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}
.marca img { width: 2.4rem; height: auto; flex-shrink: 0; }
.marca__nombre {
  font: 700 1.45rem/1 var(--f-titulos);
  letter-spacing: 0.03em;
  color: var(--tinta);
}
.marca__nombre small {
  font: 600 0.68rem var(--f-cuerpo);
  letter-spacing: 0.18em;
  color: var(--texto-suave);
  display: block;
  margin-top: 0.15rem;
}

/* Menú principal */
.navegacion > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.navegacion a {
  display: block;
  padding: 0.8rem 0.9rem;
  font: 500 0.95rem var(--f-cuerpo);
  color: var(--texto);
  text-decoration: none;
  border-radius: var(--capsula);
  transition: color var(--transicion), background-color var(--transicion);
}
.navegacion a:hover {
  color: var(--acento-texto);
  background: rgba(38, 41, 45, 0.05);
}
.navegacion a[aria-current="page"] {
  color: var(--acento-texto);
  background: rgba(191, 26, 44, 0.1);
}

/* Menú en móvil: panel de vidrio desprendido bajo la barra */
.navegacion {
  display: none;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2), var(--brillo);
  padding: 0.75rem 1rem 1rem;
  /* El encabezado es sticky y este panel es absolute: si el panel crece más
     que la pantalla, los últimos ítems quedan fuera y NO hay forma de
     alcanzarlos, porque el panel viaja con el encabezado en lugar de
     scrollear con la página. Medido con los 5 submenús abiertos: 926px de
     alto, o sea 102px fuera en un Pixel 7 y 350px en un iPhone SE.
     Se limita a lo que se ve y se le da scroll propio.
     dvh descuenta la barra del navegador móvil; vh queda de respaldo para
     los navegadores que no la soportan. */
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navegacion.abierta { display: block; }

/* Botón hamburguesa: control circular de vidrio */
.menu-boton {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--vidrio-borde);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--brillo);
}
.menu-boton svg { width: 1.4rem; height: 1.4rem; }
.menu-boton .icono-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

/* Botón "Contáctenos" del encabezado: oculto en móvil para no saturar */
.encabezado .btn { display: none; }

/* Como ese botón no está en móvil, el enlace de Contacto del menú hace de
   llamado a la acción. Se usa max-width (y no la pauta mobile-first del
   resto del archivo) porque es puro adorno de móvil: así no hay que anular
   seis propiedades en la consulta de 64rem, donde el botón sí aparece.
   El selector va por href y no por :last-child para que siga funcionando si
   algún día se agrega otra entrada al final del menú. */
@media (max-width: 63.999rem) {
  .navegacion a[href*="contacto.html"] {
    margin-top: 0.6rem;
    background: linear-gradient(180deg, #d02539, var(--acento) 55%, #a81627);
    color: #fff;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 0.5rem 1.25rem rgba(191, 26, 44, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  /* Gana a .navegacion a:hover y a a[aria-current], que si no lo dejarían
     con el texto rojo sobre el fondo rojo. */
  .navegacion a[href*="contacto.html"]:hover,
  .navegacion a[href*="contacto.html"][aria-current="page"] {
    color: #fff;
    background: linear-gradient(180deg, #d02539, var(--acento) 55%, #a81627);
  }
}

/* Submenú desplegable (Sectores, Clientes, Nosotros): en móvil se abre como
   acordeón bajo el enlace; en escritorio (≥64rem) flota al pasar el mouse. */
.tiene-submenu__fila {
  display: flex;
  align-items: stretch;
}
.tiene-submenu__fila a { flex: 1; }

.submenu-toggle {
  background: none;
  border: 0;
  padding: 0 0.5rem;
  /* 2.75rem = 44px, el mínimo cómodo para el dedo. Sin esto la flecha mide
     34px de ancho y es el control más difícil de acertar del menú. */
  min-width: 2.75rem;
  color: var(--texto);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.submenu-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--transicion);
}
.tiene-submenu.abierto .submenu-toggle svg { transform: rotate(180deg); }

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicion);
  padding-left: 1rem;
}
.tiene-submenu.abierto .submenu { max-height: 16rem; }
.submenu a {
  display: block;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--texto-suave);
}
.submenu a:hover { color: var(--acento-texto); }

/* ============ 4. HERO Y FONDO TIPO PLANO ============ */
/* Retícula de plano técnico: se usa en el hero y en la franja de cifras.
   Ahora es un panel oscuro flotante, redondeado e inset del borde de la página. */
.fondo-plano {
  position: relative;
  background: linear-gradient(160deg, var(--tinta), var(--tinta-2));
  color: #fff;
  overflow: hidden;
  width: min(calc(var(--ancho) + 5rem), 100% - 1.25rem);
  margin-inline: auto;
  margin-block: 1rem;
  border-radius: calc(var(--radio) + 0.75rem);
  box-shadow: var(--sombra-2);
}
.fondo-plano::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size:
    1.5rem 1.5rem,
    1.5rem 1.5rem,
    7.5rem 7.5rem,
    7.5rem 7.5rem;
  pointer-events: none;
}
/* Resplandor rojo difuso que "ilumina" el vidrio desde adentro */
.fondo-plano::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30rem 22rem at 78% -10%, rgba(191, 26, 44, 0.35), transparent 65%),
    radial-gradient(24rem 18rem at 8% 110%, rgba(191, 26, 44, 0.2), transparent 65%);
  pointer-events: none;
}
.fondo-plano > * { position: relative; z-index: 1; }

/* --- Tablero 3D interactivo del hero ---
   El JS llena .tablero con piezas en rejilla; las cercanas al mouse se
   elevan (translateZ) y se tiñen de rojo, y un resplandor sigue el cursor.
   Solo se activa en escritorio con mouse (ver main.js). */
.tablero {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-auto-rows: 1fr;
  perspective: 56rem;
  pointer-events: none;
}
/* Resplandor rojo que sigue el cursor, en el plano base del tablero */
.tablero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    26rem 26rem at var(--mx, 50%) var(--my, 40%),
    rgba(191, 26, 44, 0.32),
    transparent 62%
  );
  opacity: var(--enfoque, 0);
  transition: opacity 0.5s ease;
}
/* Cada pieza dibuja su tramo de la cuadrícula con sus bordes */
.tablero > div {
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  will-change: transform;
}
/* Con el tablero activo, la retícula estática se apaga: la dibujan las piezas */
.tablero-activo::before { display: none; }

.hero__interno {
  min-height: min(72vh, 44rem);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 4rem 0 12rem; /* deja aire abajo para el horizonte de obra */
}

/* --- Horizonte de obra civil (se dibuja trazo a trazo al cargar) --- */
.horizonte-obra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.horizonte-obra path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: trazar 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}
.horizonte-obra .trazo { stroke: rgba(255, 255, 255, 0.5); }
.horizonte-obra .trazo--rojo { stroke: var(--acento); }
.horizonte-obra .trazo--agua { stroke: rgba(255, 255, 255, 0.28); }
@keyframes trazar {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Vida permanente del horizonte: grúas que giran, carga que sube, luces de obra */
.horizonte-obra .grua-giro {
  animation: girar var(--dur, 9s) ease-in-out infinite alternate;
  animation-delay: var(--dg, 0s);
  transform-origin: var(--pivote);
  transform-box: view-box;
}
@keyframes girar {
  from { transform: rotate(-3.5deg); }
  to { transform: rotate(3.5deg); }
}

.horizonte-obra .carga-sube { animation: izar 9s ease-in-out infinite; }
@keyframes izar {
  0%, 14% { transform: translateY(0); }
  52%, 68% { transform: translateY(-52px); }
  100% { transform: translateY(0); }
}

.horizonte-obra .luz {
  fill: var(--acento);
  stroke: none;
  animation: parpadear 2.6s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes parpadear {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* Entrada escalonada del contenido del hero al cargar */
.hero__interno > * {
  animation: aparecer-hero 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__interno > :nth-child(2) { animation-delay: 0.12s; }
.hero__interno > :nth-child(3) { animation-delay: 0.24s; }
.hero__interno > :nth-child(4) { animation-delay: 0.36s; }
.hero__interno > :nth-child(5) { animation-delay: 0.48s; }
@keyframes aparecer-hero {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}
.hero__eyebrow {
  font: 600 0.8rem var(--f-cuerpo);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.25rem;
}
.fondo-plano h1 {
  color: #fff;
  /* Tamaño y ancho calibrados para que el titular quepa en 2 líneas */
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  max-width: 28ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero__sub {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Cota de plano: línea con extremos y texto centrado (elemento distintivo) */
.cota {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  max-width: min(28rem, 86%);
  margin: 2.25rem auto 0;
}
.cota::before,
.cota::after {
  content: "";
  position: absolute;
  top: -0.35rem;
  width: 1px;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
}
.cota::before { left: 0; }
.cota::after { right: 0; }
.cota span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--tinta);
  padding: 0 0.8rem;
  font: 600 0.68rem/1 var(--f-cuerpo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* Encabezado de páginas interiores (versión corta del hero) */
.pagina-hero { text-align: center; padding: 4.5rem 0 4rem; }
.pagina-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  margin-top: 0.75rem;
}
.pagina-hero p {
  max-width: 38rem;
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.82);
}

/* ============ 5. COMPONENTES ============ */

/* --- Botones: cápsulas con reflejo especular --- */
.btn {
  display: inline-block;
  font: 600 1rem/1 var(--f-cuerpo);
  padding: 0.95rem 2rem;
  border-radius: var(--capsula);
  background: linear-gradient(180deg, #d02539, var(--acento) 55%, #a81627);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.5rem 1.25rem rgba(191, 26, 44, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--transicion), box-shadow var(--transicion),
    filter var(--transicion);
}
.btn:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 1.6rem rgba(191, 26, 44, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn:active { transform: translateY(0) scale(0.97); }
.btn--fantasma {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--fantasma:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.75);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--blanco {
  background: #fff;
  border-color: #fff;
  color: var(--tinta);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn--blanco:hover {
  color: var(--tinta);
  filter: none;
  background: rgba(255, 255, 255, 0.92);
}
.btn--nav { padding: 0.7rem 1.4rem; font-size: 0.9rem; }

/* --- Rejillas genéricas --- */
.rejilla {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Variante para grupos de 5 tarjetas (los servicios de la portada): en
   pantallas anchas se acomodan 3 arriba y las 2 restantes centradas abajo,
   en vez de dejar una sola tarjeta huérfana al final. */
@media (min-width: 64rem) {
  .rejilla--cinco { grid-template-columns: repeat(6, 1fr); }
  .rejilla--cinco > * { grid-column: span 2; }
  .rejilla--cinco > :nth-child(4) { grid-column: 2 / span 2; }
  .rejilla--cinco > :nth-child(5) { grid-column: 4 / span 2; }
}

/* --- Tarjetas de servicio: paneles de vidrio --- */
.tarjeta {
  position: relative;
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  padding: 2rem 1.75rem;
  box-shadow: var(--sombra-1), var(--brillo);
  transition: transform var(--transicion), box-shadow var(--transicion);
  overflow: hidden;
}
.tarjeta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--sombra-2), var(--brillo);
}
.tarjeta:hover::before { transform: scaleX(1); }

.tarjeta__icono {
  width: 3rem;
  height: 3rem;
  color: var(--acento);
  margin-bottom: 1.25rem;
}
/* El h2 es para clientes.html y sectores.html, donde las tarjetas son
   secciones de primer nivel y cuelgan directamente del h1. Mismo aspecto
   que el h3 (incluido el peso 600, que el h3 hereda de la regla global). */
.tarjeta h2,
.tarjeta h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.tarjeta h2 { font-weight: 600; }
.tarjeta p { color: var(--texto-suave); font-size: 0.975rem; }
/* "Ver más": medía 17px de alto, el objetivo táctil más pequeño del sitio.
   inline-flex + min-height lo llevan a 44px sin cambiar dónde empieza el
   texto; el margen se reduce para que la tarjeta no crezca de más. */
.tarjeta .enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  font: 600 0.9rem var(--f-cuerpo);
  text-decoration: none;
}
.tarjeta--compacta { padding: 1.6rem 1.4rem; }
.tarjeta--compacta h3 { font-size: 1.2rem; }
.tarjeta--compacta .tarjeta__icono {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.9rem;
}

/* --- Bloque "Por qué HIDRAMA": texto + chips de valores --- */
.dos-columnas {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.dos-columnas h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0.75rem 0 1rem;
}
.dos-columnas p { color: var(--texto-suave); margin-bottom: 1rem; }

.chips-valores {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Variante para listas de etiquetas de largo muy desigual (nombres de
   entidades): cada cápsula toma el ancho de su texto en vez de forzar
   columnas iguales, que parten los nombres largos en muchas líneas. */
.chips-valores--fluido {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.chip-valor {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--capsula);
  box-shadow: var(--sombra-1), var(--brillo);
  font: 600 0.95rem var(--f-cuerpo);
  color: var(--tinta);
}
.chip-valor svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--acento);
  flex-shrink: 0;
}

/* --- Franja de cifras: mosaicos de vidrio sobre el panel oscuro --- */
.franja-cifras .contenedor {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.cifra {
  padding: 1.6rem 1rem;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(0.6rem);
  backdrop-filter: blur(0.6rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.cifra strong {
  display: block;
  font: 700 3.2rem/1 var(--f-titulos);
  color: var(--acento);
}
.cifra span {
  display: block;
  margin-top: 0.5rem;
  font: 600 0.82rem var(--f-cuerpo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Tarjetas de proyecto: vidrio con foto --- */
.proyecto {
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-1), var(--brillo);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.proyecto:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--sombra-2), var(--brillo);
}
.proyecto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.proyecto:hover img { transform: scale(1.04); }
.proyecto__cuerpo { padding: 1.5rem; }
.proyecto .categoria {
  font: 600 0.72rem var(--f-cuerpo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.proyecto h3 { font-size: 1.4rem; margin: 0.4rem 0 0.4rem; }
.proyecto .lugar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
}
.proyecto .lugar svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.proyecto p { margin-top: 0.7rem; font-size: 0.95rem; color: var(--texto-suave); }

.centrado { text-align: center; margin-top: 2.75rem; }

/* --- Proyectos agrupados por categoría (anclas del submenú) --- */
/* auto-fill (y no auto-fit) para que una tarjeta sola no se estire a todo lo ancho */
.grupo-proyectos .rejilla {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.grupo-proyectos { margin-top: 3.5rem; }
.grupo-proyectos:first-of-type { margin-top: 0; }
.grupo-proyectos h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  padding-left: 0.9rem;
  border-left: 4px solid var(--acento);
  margin-bottom: 1.5rem;
}

/* --- Llamado a la acción final: panel rojo flotante --- */
.cta-final {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #d02539, var(--acento) 45%, var(--acento-osc));
  color: #fff;
  text-align: center;
  padding: 4.5rem 1.5rem;
  width: min(calc(var(--ancho) + 5rem), 100% - 1.25rem);
  margin: 0 auto 1.25rem;
  border-radius: calc(var(--radio) + 0.75rem);
  box-shadow: 0 1.5rem 3rem rgba(191, 26, 44, 0.35);
}
/* Reflejo de luz sobre el panel rojo */
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(30rem 18rem at 80% -8%, rgba(255, 255, 255, 0.22), transparent 60%);
  pointer-events: none;
}
.cta-final > * { position: relative; }
.cta-final h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  max-width: 24ch;
  margin: 0 auto 1rem;
}
.cta-final p {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.9);
}

/* ============ 6. PÁGINAS INTERIORES ============ */

/* --- Servicios: bloques alternados texto/imagen --- */
.servicio {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 3.25rem 0;
  border-bottom: 1px solid var(--borde);
}
.servicio:last-of-type { border-bottom: 0; }
.servicio h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0.6rem 0 1rem; }
.servicio p { color: var(--texto-suave); margin-bottom: 1.25rem; }
.servicio img {
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  width: 100%;
}
/* La foto de «Quiénes somos» usa .servicio__media pero cuelga de
   .dos-columnas, no de .servicio, así que no le llegaba la regla de arriba:
   lo resolvía un style= dentro del HTML. Aquí queda con el resto. */
.servicio__media img {
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}

/* Lista de alcance con viñeta cuadrada (guiño a planos) */
.lista-alcance li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.65rem;
  color: var(--texto);
}
.lista-alcance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--acento);
}

/* --- Nosotros: datos legales de la sociedad --- */
.nota-legal {
  font-size: 0.85rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--borde);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* --- Nosotros: misión y visión --- */
.panel-mv {
  display: grid;
  gap: 1.5rem;
}
.panel-mv article {
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: 2rem;
  box-shadow: var(--sombra-1), var(--brillo);
}
.panel-mv h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.panel-mv p { color: var(--texto-suave); }

/* --- Contacto --- */
.rejilla-contacto { display: grid; gap: 3rem; }

/* Título de cada columna de contacto («Envíenos un mensaje», «Datos de
   contacto»). Antes iba como style= dentro del HTML, repetido en los dos. */
.titulo-columna {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 1.5rem;
}

.campo { margin-bottom: 1.25rem; }
.campo label {
  display: block;
  font: 600 0.9rem var(--f-cuerpo);
  margin-bottom: 0.4rem;
  color: var(--tinta);
}
.campo input,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: rgba(255, 255, 255, 0.75);
  font: inherit;
  color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion),
    background-color var(--transicion);
}
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(191, 26, 44, 0.15);
}
.campo textarea { min-height: 9rem; resize: vertical; }

/* Campo trampa antispam: nunca quitar display:none */
.campo--oculto { display: none; }

.form-aviso { font-size: 0.85rem; color: var(--texto-suave); margin-top: 1rem; }

/* Resultado del envío del formulario; lo muestra js/main.js (sección 7).
   Mismo panel de vidrio con filo de acento que la misión y la visión. */
.form-estado {
  background: var(--vidrio-fuerte);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra-1), var(--brillo);
}
.form-estado:focus { outline: none; }
.form-estado strong {
  display: block;
  font: 700 1.25rem/1.2 var(--f-titulos);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 0.4rem;
}
.form-estado p { color: var(--texto-suave); margin: 0; }
.form-estado a { color: var(--acento-texto); font-weight: 600; }

/* Variante de error: el filo pasa al gris del logo para no gritar en rojo
   cuando además hay un texto de disculpa. */
.form-estado--error { border-left-color: var(--texto-suave); }

/* Botón mientras se está enviando. Incluye :hover para anular el levantamiento
   y el brillo de .btn:hover, que si no seguirían aplicándose al deshabilitado. */
.btn[disabled],
.btn[disabled]:hover {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

.dato {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px dashed var(--borde);
}
.dato:last-of-type { border-bottom: 0; }
.dato svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--acento);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.dato strong {
  display: block;
  font: 600 0.8rem var(--f-cuerpo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 0.2rem;
}
/* El teléfono y el correo son los enlaces que más se tocan desde un celular
   (llaman o abren el correo) y medían 18px de alto. Se llevan a 44px. */
.dato a {
  color: var(--texto);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.dato a:hover { color: var(--acento-texto); }

.mapa { margin-top: 3.5rem; }
.mapa iframe {
  width: 100%;
  height: 24rem;
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1), var(--brillo);
  display: block;
}
.mapa figcaption {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-top: 0.75rem;
  text-align: center;
}

/* ============ 7. PIE DE PÁGINA ============ */
/* Hoja oscura con esquinas superiores redondeadas, como panel que emerge */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  border-radius: calc(var(--radio) + 0.75rem) calc(var(--radio) + 0.75rem) 0 0;
  margin-top: 1.25rem;
}
.pie__interno {
  display: grid;
  gap: 2.5rem;
  padding: 4rem 0 2.5rem;
}
/* h3, no h4: en el pie estos títulos cuelgan del h1 de la página y saltar
   de h2 a h4 desordena el índice que arma un lector de pantalla. */
.pie h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: 0.6rem;
}
.pie h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2rem;
  height: 2px;
  background: var(--acento);
}
.pie p { max-width: 26rem; }
.pie a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
/* Rojo aclarado: el --acento sobre el fondo del pie da 2.36:1 y no se lee */
.pie a:hover { color: var(--acento-claro); }
/* 0.6rem arriba y abajo para que cada enlace del pie llegue a 44px de alto;
   con 0.35rem quedaban en 36px y se tocan mal, sobre todo por ir apilados. */
.pie__enlaces a { display: block; padding: 0.6rem 0; }
.pie .dato { border-color: rgba(255, 255, 255, 0.15); padding: 0.85rem 0; }
.pie .dato strong { color: #fff; }
.pie .dato a { color: rgba(255, 255, 255, 0.8); }

.pie__marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}
.pie__marca img { width: 2.2rem; height: auto; }
.pie__marca span {
  font: 700 1.3rem/1 var(--f-titulos);
  letter-spacing: 0.03em;
  color: #fff;
}

/* Hoy la barra legal lleva un solo texto (el aviso de derechos), por eso va
   centrada. Si algún día se agrega otro elemento, cambiar a space-between. */
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ============ 8. ANIMACIONES Y ACCESIBILIDAD ============ */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============ PANTALLAS MEDIANAS (≥ 48rem / 768px) ============ */
@media (min-width: 48rem) {
  .seccion { padding: 6rem 0; }

  .dos-columnas { grid-template-columns: 1fr 1fr; }
  .panel-mv { grid-template-columns: 1fr 1fr; }
  .rejilla-contacto { grid-template-columns: 1.15fr 0.85fr; }

  .servicio { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  /* Alterna el lado de la imagen en los bloques pares */
  .servicio--invertido .servicio__media { order: -1; }

  .pie__interno { grid-template-columns: 1.3fr 0.8fr 1fr; }
}

/* ============ PANTALLAS GRANDES (≥ 64rem / 1024px) ============ */
@media (min-width: 64rem) {
  /* Menú horizontal fijo, sin hamburguesa */
  .menu-boton { display: none; }
  .navegacion {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    /* Se anulan los límites del panel móvil: aquí los submenús flotan por
       fuera del contenedor y un overflow:auto los recortaría. */
    max-height: none;
    overflow: visible;
  }
  .navegacion > ul { flex-direction: row; gap: 0.35rem; }
  .navegacion a { padding: 0.5rem 0.95rem; }
  .encabezado .btn { display: inline-block; }

  /* Submenú flotante: el botón de acordeón ya no hace falta */
  .tiene-submenu { position: relative; }
  .submenu-toggle { display: none; }

  /* Panel de vidrio desprendido de la barra */
  .submenu {
    position: absolute;
    top: 100%;
    left: -0.5rem;
    max-height: none;
    overflow: visible;
    width: max-content;
    min-width: 13rem;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: var(--desenfoque);
    backdrop-filter: var(--desenfoque);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-2), var(--brillo);
    padding: 0.5rem;
    margin-top: 0.85rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem) scale(0.98);
    transform-origin: top left;
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  }
  .tiene-submenu:hover .submenu,
  .tiene-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .submenu a {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radio-chico);
    white-space: nowrap;
  }
  .submenu a:hover { background: rgba(38, 41, 45, 0.06); }
}

/* ============ RESPALDO SIN backdrop-filter ============ */
/* Navegadores viejos: los paneles de vidrio pasan a fondos casi opacos */
@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
  .encabezado__interno,
  .navegacion,
  .submenu { background: rgba(255, 255, 255, 0.96); }

  .tarjeta,
  .proyecto,
  .chip-valor,
  .panel-mv article { background: #fff; }

  .cifra { background: rgba(255, 255, 255, 0.1); }
}