/* =============================================================================
   SIGMA INGENIEROS, C.A. — Hoja de estilos principal
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280 px.
   Orden: variables · reset · utilidades · componentes · secciones · media queries
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. VARIABLES (identidad visual del brochure)
   -------------------------------------------------------------------------- */
:root {
  /* Paleta */
  --azul-900: #0A3D6E;  /* navy institucional del logo */
  --azul-700: #0B4C8C;  /* fondo de bandas */
  --azul-500: #1B7FC4;
  --cian-400: #29ABE2;  /* acento — barras y subrayados del brochure */
  --cian-200: #BFE3F5;  /* círculos suaves de fondo */
  --verde-500: #4CB89A; /* acento secundario */
  --gris-900: #333333;  /* títulos */
  --gris-600: #5A5A5A;  /* cuerpo */
  --gris-100: #F4F6F8;  /* fondos alternos */
  --blanco: #FFFFFF;

  /* Colores derivados de uso funcional */
  --borde: #DDE3E9;
  --error: #B3261E;      /* rojo con contraste AA sobre blanco (5.9:1) */
  --whatsapp: #0E7540;   /* verde WhatsApp oscurecido: texto blanco a 5.8:1 */

  /* Tipografías */
  --fuente-titulos: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Medidas */
  --altura-cabecera: 64px;
  --ancho-contenedor: 1200px;
  --radio: 4px;              /* bordes sobrios, no redondeados */
  --sombra-suave: 0 2px 10px rgba(10, 61, 110, .08);
  --sombra-media: 0 6px 22px rgba(10, 61, 110, .12);
  --transicion: 200ms ease;
}

/* -----------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla sin JS */
  scroll-padding-top: calc(var(--altura-cabecera) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gris-600);
  background: var(--blanco);
  overflow-x: hidden; /* evita desbordes laterales por círculos decorativos */
}

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

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--gris-900);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: .01em;
}

p { margin: 0 0 1rem; }

a { color: var(--azul-700); }
a:hover { color: var(--azul-500); }

ul { margin: 0; padding: 0; }

/* Foco visible y consistente en todo el sitio */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cian-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace de salto al contenido (solo visible al enfocar con teclado) */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--azul-900);
  color: var(--blanco);
  padding: .75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.salto-contenido:focus {
  left: 8px;
  top: 8px;
}

/* -----------------------------------------------------------------------------
   3. UTILIDADES
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Firma visual del brochure:
   bloque cian sólido a la izquierda + regla azul degradada debajo */
.titulo-seccion {
  position: relative;
  display: block;
  padding-left: 18px;
  padding-bottom: 14px;
  margin-bottom: .5rem;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  text-transform: uppercase;
}
.titulo-seccion::before {
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: 14px;
  width: 10px;
  background: var(--cian-400);
}
.titulo-seccion::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(120px, 26%, 240px);
  height: 4px;
  background: linear-gradient(90deg, var(--azul-900) 0%, var(--cian-400) 100%);
}
/* Variante sobre fondo oscuro */
.titulo-seccion--claro { color: var(--blanco); }
.titulo-seccion--claro::after {
  background: linear-gradient(90deg, var(--cian-400) 0%, rgba(41, 171, 226, 0) 100%);
}

.seccion__encabezado { margin-bottom: 2.5rem; }

.seccion__bajada {
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--gris-600);
  margin-bottom: 0;
}

/* Círculos planos de color: recurso gráfico distintivo del brochure */
.circulo {
  position: absolute;
  display: block;
  border-radius: 50%;
  z-index: 0;
}
.circulo--cian { background: var(--cian-400); }
.circulo--verde { background: var(--verde-500); }

/* -----------------------------------------------------------------------------
   4. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.btn:hover { transform: translateY(-1px); }

/* El texto sobre cian va en gris-900: el azul-900 se queda en 4.2:1 y no
   alcanza el AA exigido para texto normal */
.btn--cian {
  background: var(--cian-400);
  border-color: var(--cian-400);
  color: var(--gris-900);
}
.btn--cian:hover {
  background: var(--azul-900);
  border-color: var(--azul-900);
  color: var(--blanco);
}

.btn--azul {
  background: var(--azul-700);
  border-color: var(--azul-700);
  color: var(--blanco);
}
.btn--azul:hover {
  background: var(--azul-900);
  border-color: var(--azul-900);
  color: var(--blanco);
}

.btn--fantasma {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}
.btn--fantasma:hover {
  background: var(--blanco);
  color: var(--azul-900);
}

.btn--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--blanco);
  width: 100%;
}
.btn--whatsapp:hover {
  background: #0B5E33;
  border-color: #0B5E33;
  color: var(--blanco);
}
.btn--whatsapp svg { width: 22px; height: 22px; flex: none; }

.btn--compacto { padding: .6rem 1.2rem; font-size: .9375rem; }
.btn--bloque { width: 100%; }

/* Iconos SVG dibujados a mano (trazo simple) */
.icono {
  width: 44px;
  height: 44px;
  color: var(--azul-700);
}
.icono--sm {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--cian-400);
}

/* -----------------------------------------------------------------------------
   5. CABECERA STICKY Y NAVEGACIÓN
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion);
}
.cabecera--sombra { box-shadow: var(--sombra-suave); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--altura-cabecera);
}

/* Los PNG del logo traen mucho margen en blanco alrededor de la marca.
   Se recortan por CSS (sin tocar los archivos de img/) con estas proporciones,
   medidas sobre el contenido real de cada archivo:
   logo-color.png  → contenido en 19.96% / 34.45% del ancho y alto, 60.09% x 43.12%
   logo-blanco.png → contenido en 7.97% / 29.40% del ancho y alto, 84.06% x 41.28% */
.cabecera__logo {
  --alto: 36px;                                /* alto visible de la marca */
  --escala: calc(var(--alto) / 0.4312);        /* alto total de la imagen */
  display: block;
  width: calc(var(--alto) * 2.0227);
  height: var(--alto);
  overflow: hidden;
}
.cabecera__logo img {
  width: auto;
  max-width: none;
  height: var(--escala);
  margin-top: calc(var(--escala) * -0.3445);
  margin-left: calc(var(--escala) * -0.2894);
}

/* Botón hamburguesa */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.hamburguesa__linea {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--azul-900);
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Panel de navegación móvil */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 20px 1.75rem;
  background: var(--blanco);
  border-bottom: 3px solid var(--cian-400);
  box-shadow: var(--sombra-media);
}
.nav--abierto { display: flex; }

.nav__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.nav__enlace {
  display: block;
  padding: .7rem .25rem;
  font-weight: 600;
  color: var(--gris-900);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-100);
}
.nav__enlace:hover,
.nav__enlace:focus-visible { color: var(--azul-700); }
.nav__cta { align-self: flex-start; }

/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78vh;
  padding: 4rem 0 3.5rem;
  color: var(--blanco);
  background: var(--azul-900);
  overflow: hidden;
}
/* La imagen del brochure es la banda azul con el logotipo: se usa como marca de
   agua a la derecha, con los bordes difuminados para que no se vea el recuadro */
.hero__fondo {
  position: absolute;
  inset: 0;
  background-image: url("../img/marca/hero-fondo.jpg");
  background-repeat: no-repeat;
  background-position: right -6% center;
  background-size: 150% auto;
  opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side at 72% 50%, #000 42%, transparent 92%);
  mask-image: radial-gradient(closest-side at 72% 50%, #000 42%, transparent 92%);
}
/* Overlay oscuro (55% y más sobre la zona del texto) para contraste AA */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(10, 61, 110, .93) 0%, rgba(10, 61, 110, .72) 45%, rgba(10, 61, 110, .35) 100%);
}
.hero__contenido { position: relative; z-index: 1; }

.hero__antetitulo {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem .75rem;
  background: var(--cian-400);
  color: var(--gris-900);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero__titulo {
  max-width: 18ch;
  margin-bottom: 1rem;
  color: var(--blanco);
  font-size: clamp(2.125rem, 8.5vw, 4.25rem);
  text-transform: uppercase;
}

.hero__subtitulo {
  max-width: 58ch;
  margin-bottom: 2rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .93);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-bottom: 1.75rem;
}

.hero__micro {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: .875rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .88);
}

/* -----------------------------------------------------------------------------
   7. BARRA DE CREDENCIALES
   -------------------------------------------------------------------------- */
.credenciales {
  background: var(--azul-700);
  color: var(--blanco);
  padding: 2rem 0;
}
.credenciales__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  text-align: center;
}
.credencial { min-width: 0; }

.credencial__numero {
  margin: 0 0 .25rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cian-400);
}
.credencial__numero--texto { font-size: clamp(1.5rem, 6vw, 2.25rem); }

.credencial__etiqueta {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* -----------------------------------------------------------------------------
   8. SECCIONES GENÉRICAS
   -------------------------------------------------------------------------- */
.seccion { padding: 3.5rem 0; }
.seccion--gris { background: var(--gris-100); }

/* Animación de revelado al entrar en viewport (JS añade .visible).
   Se aplica solo si el documento lleva la clase .js: sin JavaScript las
   secciones se muestran normalmente en lugar de quedar invisibles */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.js [data-revelar].visible {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
   9. NOSOTROS
   -------------------------------------------------------------------------- */
.nosotros__grid {
  display: grid;
  gap: 2.5rem;
}

.pilares {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.pilares li {
  padding: .35rem .75rem;
  border-left: 4px solid var(--cian-400);
  background: var(--gris-100);
  font-size: .875rem;
  font-weight: 600;
  color: var(--azul-900);
}
.seccion--gris .pilares li { background: var(--blanco); }

.nosotros__figura {
  position: relative;
  margin: 0;
  padding: 0 0 0 12px;
}
.nosotros__marco {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}
.nosotros__marco img {
  width: 100%;
  /* recorta la franja negra que trae la foto por el lado izquierdo */
  transform: scale(1.05);
  transform-origin: 100% 50%;
}
.circulo--nosotros {
  width: 160px;
  height: 160px;
  left: -28px;
  bottom: -34px;
  opacity: .9;
}
.nosotros__figura figcaption {
  position: relative;
  z-index: 1;
  margin-top: .75rem;
  font-size: .875rem;
  font-style: italic;
  color: var(--gris-600);
}

/* -----------------------------------------------------------------------------
   10. SERVICIOS
   -------------------------------------------------------------------------- */
.servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2rem;
}

.servicio { min-width: 0; }

.servicio__media {
  position: relative;
  margin-bottom: 1.25rem;
  padding: 18px 0 0 18px;
}
/* Las 4 fotos del brochure traen un marco negro de hasta un 11% del ancho:
   el marco recorta la imagen ampliándola hacia el borde inferior derecho */
.servicio__marco {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
}
.servicio__marco img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: scale(1.22);
  transform-origin: 22% 32%;
}
/* Círculo grande de color plano detrás de la imagen */
.servicio__media .circulo {
  width: 130px;
  height: 130px;
  top: 0;
  left: 0;
}

.servicio__titulo {
  position: relative;
  padding-left: 14px;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.servicio__titulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  background: var(--cian-400);
}
.servicio p { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   11. CAPACIDADES TÉCNICAS (chips)
   -------------------------------------------------------------------------- */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.chip {
  padding: .6rem 1rem;
  background: var(--gris-100);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--cian-400);
  border-radius: var(--radio);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gris-900);
  transition: border-color var(--transicion), background-color var(--transicion);
}
.chip:hover {
  background: var(--blanco);
  border-left-color: var(--azul-700);
}

/* -----------------------------------------------------------------------------
   12. PROYECTOS
   -------------------------------------------------------------------------- */
.proyectos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.proyecto {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--cian-400);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.proyecto:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-media);
}
.proyecto__media { overflow: hidden; }
.proyecto__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Dos fotos del brochure vienen recortadas en círculo sobre fondo negro:
   se amplían para que las esquinas negras queden fuera de la tarjeta */
.proyecto__media--circular img { transform: scale(1.3); }
.proyecto__cuerpo {
  flex: 1;
  padding: 1.5rem;
}
.proyecto__titulo {
  font-size: 1.375rem;
  text-transform: uppercase;
}
.proyecto__cliente {
  font-size: .875rem;
  font-weight: 600;
  color: var(--azul-700);
}
.proyecto__cuerpo p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   13. CLIENTES
   -------------------------------------------------------------------------- */
.clientes__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.cliente {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 1rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.cliente img {
  width: auto;
  max-height: 72px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--transicion), opacity var(--transicion), transform var(--transicion);
}
.cliente:hover img,
.cliente:focus-within img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.03);
}

/* -----------------------------------------------------------------------------
   14. FORTALEZAS
   -------------------------------------------------------------------------- */
.fortalezas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.fortaleza {
  padding: 1.75rem 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-bottom: 4px solid var(--cian-400);
  border-radius: var(--radio);
}
.fortaleza .icono { margin-bottom: 1rem; }
.fortaleza__titulo {
  font-size: 1.375rem;
  text-transform: uppercase;
}
.fortaleza p { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   15. VISIÓN (banda azul a ancho completo)
   -------------------------------------------------------------------------- */
.vision {
  position: relative;
  padding: 3.5rem 0;
  background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 100%);
  color: var(--blanco);
  overflow: hidden;
}
/* Círculo decorativo plano, en la línea gráfica del brochure */
.vision::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(41, 171, 226, .22);
}
.vision__interior { position: relative; z-index: 1; }

.vision__cita {
  max-width: 60ch;
  margin: 1.5rem 0 1rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--cian-400);
  font-size: clamp(1.0625rem, 3.6vw, 1.375rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .96);
}
.vision__cita p { margin: 0; }

.vision__firma {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* tinte claro del cian: el cian-400 no llega a AA en texto pequeño sobre azul */
  color: var(--cian-200);
}

/* -----------------------------------------------------------------------------
   16. CONTACTO
   -------------------------------------------------------------------------- */
.contacto__grid {
  display: grid;
  gap: 2.5rem;
}

.contacto__subtitulo {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.contacto__formulario {
  padding: 1.75rem 1.5rem;
  background: var(--gris-100);
  border-radius: var(--radio);
  border-top: 4px solid var(--cian-400);
}

/* Campos del formulario */
.campo { margin-bottom: 1.125rem; }
.campo label {
  display: block;
  margin-bottom: .35rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gris-900);
}
.requerido { color: var(--error); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .7rem .85rem;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--gris-900);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 120px; }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--azul-500); }

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.campo__error {
  min-height: 0;
  margin: .3rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--error);
}
.campo__error:empty { display: none; }

.form__estado {
  margin: 1rem 0 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--azul-700);
}
.form__estado:empty { display: none; }

.form__nota {
  margin: 1rem 0 0;
  font-size: .8125rem;
  color: var(--gris-600);
}

/* Sedes y datos de contacto */
.sede {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--cian-400);
}
.sede__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
  font-size: 1.125rem;
  text-transform: uppercase;
}
.sede p { margin: 0; font-size: .9375rem; }

.contacto__lista {
  list-style: none;
  margin: 1.5rem 0;
  display: grid;
  gap: .75rem;
}
.contacto__lista li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  overflow-wrap: anywhere; /* el correo largo no rompe el layout a 360px */
}
.contacto__lista a { font-weight: 600; }

.contacto__legal {
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--gris-600);
}

/* -----------------------------------------------------------------------------
   17. PIE DE PÁGINA
   -------------------------------------------------------------------------- */
.pie {
  padding: 3rem 0 1.5rem;
  background: var(--azul-900);
  color: rgba(255, 255, 255, .85);
  font-size: .9375rem;
}
.pie__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
}
/* El logo blanco viene sobre un cuadro azul propio: se recorta a la marca y se
   presenta como placa, para que el recuadro se lea como decisión de diseño */
.pie__logo {
  --alto: 38px;
  --escala: calc(var(--alto) / 0.4128);
  display: block;
  width: calc(var(--alto) * 2.2701);
  height: var(--alto);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.pie__logo img {
  width: auto;
  max-width: none;
  height: var(--escala);
  margin-top: calc(var(--escala) * -0.2940);
  margin-left: calc(var(--escala) * -0.0888);
}
.pie__marca p { max-width: 42ch; margin-bottom: .5rem; }
.pie__rif { font-weight: 600; color: var(--cian-200); }

.pie__titulo {
  margin-bottom: .875rem;
  font-size: 1.125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blanco);
  border-left: 6px solid var(--cian-400);
  padding-left: .625rem;
}
.pie ul { list-style: none; display: grid; gap: .5rem; }
.pie a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pie a:hover,
.pie a:focus-visible {
  color: var(--cian-200);
  text-decoration: underline;
}
.pie__sedes { margin: 1rem 0 0; font-size: .875rem; color: rgba(255, 255, 255, .7); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .7);
}
.pie__legal p { margin: 0; }

/* -----------------------------------------------------------------------------
   18. BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--whatsapp);
  color: var(--blanco);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform var(--transicion), background-color var(--transicion);
}
.wa-flotante:hover {
  background: #0B5E33;
  color: var(--blanco);
  transform: scale(1.06);
}
.wa-flotante svg { width: 28px; height: 28px; }

/* =============================================================================
   19. MEDIA QUERIES
   ============================================================================= */

/* --- 480px: móviles grandes -------------------------------------------- */
@media (min-width: 480px) {
  .clientes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .credenciales__grid { gap: 1.75rem 1.25rem; }
  .circulo--nosotros { width: 200px; height: 200px; }
}

/* --- 768px: tablets ----------------------------------------------------- */
@media (min-width: 768px) {
  .seccion { padding: 4.5rem 0; }
  .vision { padding: 4.5rem 0; }
  .credenciales { padding: 2.5rem 0; }

  .servicios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proyectos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fortalezas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clientes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .credenciales__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .contacto__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .contacto__formulario { padding: 2rem; }

  .pie__grid { grid-template-columns: 2fr 1fr 1.4fr; gap: 2.5rem; }

  .servicio__media .circulo { width: 160px; height: 160px; }
  .wa-flotante { right: 24px; bottom: 24px; width: 60px; height: 60px; }
}

/* --- 1024px: escritorio — navegación horizontal ------------------------- */
@media (min-width: 1024px) {
  :root { --altura-cabecera: 76px; }

  .hamburguesa { display: none; }

  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }
  .nav__lista { flex-direction: row; gap: 1.5rem; }
  .nav__enlace {
    position: relative;
    padding: .35rem 0;
    border-bottom: 0;
  }
  /* Subrayado cian al pasar el cursor, en la línea gráfica del brochure */
  .nav__enlace::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--cian-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
  }
  .nav__enlace:hover::after,
  .nav__enlace:focus-visible::after { transform: scaleX(1); }

  .cabecera__logo { --alto: 44px; }

  .hero { min-height: 88vh; padding: 6rem 0 5rem; }
  .hero__fondo { background-size: 58% auto; background-position: right 2% center; }

  .nosotros__grid { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3.5rem; }
  .servicios__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proyectos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clientes__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }

  .servicio__media .circulo { width: 150px; height: 150px; }
  .circulo--nosotros { width: 230px; height: 230px; left: -40px; bottom: -44px; }
}

/* --- 1280px: pantallas amplias ------------------------------------------ */
@media (min-width: 1280px) {
  .seccion { padding: 5.5rem 0; }
  .vision { padding: 5.5rem 0; }
  .contenedor { padding-inline: 32px; }
  .clientes__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .servicio__media .circulo { width: 180px; height: 180px; }
}

/* -----------------------------------------------------------------------------
   20. ACCESIBILIDAD: preferencia de movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Las secciones se muestran directamente, sin desplazamiento */
  .js [data-revelar] {
    opacity: 1;
    transform: none;
  }
  .btn:hover,
  .proyecto:hover,
  .wa-flotante:hover,
  .cliente:hover img { transform: none; }
}

/* -----------------------------------------------------------------------------
   21. IMPRESIÓN (útil para adjuntar la credencial en licitaciones)
   -------------------------------------------------------------------------- */
@media print {
  .cabecera, .wa-flotante, .hero__acciones, .nav { display: none !important; }
  .js [data-revelar] { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}