/*
  ARZAA Seguridad Privada — Estilos base compartidos
  Consume las variables de css/tokens.css. Este archivo define: reset, tipografía,
  contenedor, header sticky translúcido + navegación, footer, botones CTA,
  utilidades de layout y el respeto a prefers-reduced-motion.
*/

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:var(--fuente-texto);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
h1,h2,h3,h4{
  font-family:var(--fuente-titulo);
  color:var(--azul-profundo);
  line-height:1.2;
  margin:0 0 var(--esp-2);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0 0 var(--esp-2); }

/* Sobre fondos oscuros (héroes, footer) los títulos pasan a blanco/champagne
   para mantener el contraste alto exigido por la marca. */
.seccion--noche h1,
.seccion--noche h2,
.seccion--noche h3,
.seccion--foto h1,
.seccion--foto h2,
.seccion--foto h3,
.site-footer h1,
.site-footer h2,
.site-footer h3{ color:var(--blanco); }

/* ---------- Utilidades de layout ---------- */
.contenedor{
  width:100%;
  max-width:var(--contenedor);
  margin-inline:auto;
  padding-inline:var(--esp-3);
}
.seccion{ padding-block:var(--esp-5); }
.seccion--noche{ background:var(--azul-noche); color:var(--blanco); }
.seccion--gris{ background:var(--gris-claro); }
.rejilla{ display:grid; gap:var(--esp-3); }
.rejilla-2{ grid-template-columns:repeat(2,1fr); }
.rejilla-3{ grid-template-columns:repeat(3,1fr); }
.rejilla-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .rejilla-2, .rejilla-3, .rejilla-4{ grid-template-columns:1fr; }
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Enlace "saltar al contenido" — accesible por teclado */
.skip-link{
  position:absolute;
  left:var(--esp-2);
  top:-3rem;
  background:var(--blanco);
  color:var(--azul-noche);
  padding:.6rem 1rem;
  border-radius:var(--radio-chico);
  z-index:1000;
  transition:top var(--transicion);
}
.skip-link:focus{ top:var(--esp-2); }

/* ---------- Botones CTA ---------- */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.02em;
  text-transform:uppercase;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion);
}
.boton:hover{ transform:translateY(-2px); }
.boton:focus-visible{ outline:3px solid var(--champagne); outline-offset:2px; }

/* Primario: relleno azul ARZAA, texto blanco (alto contraste) */
.boton--primario{
  background:var(--azul-arzaa);
  color:var(--blanco);
  box-shadow:var(--sombra-suave);
}
.boton--primario:hover{ background:var(--azul-profundo); }

/* Secundario: relleno oro, SOLO sobre fondos oscuros (nunca oro-sobre-blanco en texto pequeño) */
.boton--oro{
  background:var(--oro);
  color:var(--azul-noche);
  border-color:var(--oro);
}
.boton--oro:hover{ background:var(--champagne); border-color:var(--champagne); }

/* Contorno: para usar sobre fondos oscuros como CTA secundario */
.boton--contorno{
  background:transparent;
  color:var(--blanco);
  border-color:var(--linea-clara);
}
.boton--contorno:hover{ border-color:var(--blanco); background:rgba(255,255,255,.08); }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--azul-noche-85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea-clara);
}
.site-header__barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--esp-3);
  padding-block:var(--esp-1);
}

/* Chip blanco para el logo (JPEG con fondo blanco) — tratamiento temporal
   hasta contar con el logo en PNG transparente (Task 7). */
.marca{ display:flex; align-items:center; gap:.75rem; }
.marca__chip{
  display:inline-flex;
  background:var(--blanco);
  border-radius:var(--radio-chico);
  padding:.35rem;
  line-height:0;
  box-shadow:var(--sombra-suave);
}
.marca__logo{
  display:block;
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:6px;
}
.marca__nombre{
  font-family:var(--fuente-titulo);
  font-weight:700;
  font-size:1rem;
  color:var(--blanco);
  letter-spacing:.02em;
}
.marca__nombre small{
  display:block;
  font-family:var(--fuente-texto);
  font-weight:400;
  font-size:.7rem;
  color:var(--champagne);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Navegación principal */
.nav-principal{ display:flex; align-items:center; }
.nav-principal__lista{ display:flex; gap:var(--esp-3); align-items:center; }
.nav-principal__enlace{
  font-family:var(--fuente-titulo);
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--blanco);
  padding:.4rem .2rem;
  border-bottom:2px solid transparent;
  transition:border-color var(--transicion), color var(--transicion);
}
.nav-principal__enlace:hover{ border-color:var(--oro); }
.nav-principal__enlace.is-active{
  color:var(--champagne);
  border-color:var(--oro);
}

/* Botón hamburguesa (solo visible en móvil) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  background:transparent;
  border:1px solid var(--linea-clara);
  border-radius:var(--radio-chico);
  cursor:pointer;
}
.nav-toggle__barra{
  display:block;
  width:22px;
  height:2px;
  margin-inline:auto;
  background:var(--blanco);
  transition:transform var(--transicion), opacity var(--transicion);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  /* Colapsable animado por grid-template-rows (0fr -> 1fr) en vez de max-height:
     max-height con un valor arbitrario (400px) fuerza layout/repintado sobre una
     altura que no es la real del contenido (layout thrash). grid-template-rows
     interpola sobre el tamaño real de la pista sin ese costo.
     IMPORTANTE: min-height:0 + overflow:hidden van en un WRAPPER INTERNO
     (.nav-principal__interior) SIN padding propio, no en la <ul> que sí tiene
     padding — un elemento con padding nunca puede colapsar a 0 real aunque se
     le ponga min-height:0 (el padding no es negociable), así que colapsaba a
     ~48px (el padding vertical de la lista) en vez de a 0. Verificado con el
     inspector: separar el wrapper (sin padding) del contenido (con padding)
     es lo que permite el colapso real. */
  .nav-principal{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--azul-noche);
    border-bottom:1px solid var(--linea-clara);
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    transition:grid-template-rows var(--transicion);
  }
  .nav-principal.is-abierto{ grid-template-rows:1fr; }
  .nav-principal__interior{
    min-height:0;
    overflow:hidden;
  }
  .nav-principal__lista{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:var(--esp-2) var(--esp-3) var(--esp-3);
  }
  .nav-principal__enlace{
    display:block;
    width:100%;
    padding:.85rem 0;
    border-bottom:1px solid var(--linea-clara);
  }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--azul-noche);
  color:var(--blanco);
  padding-block:var(--esp-4) var(--esp-3);
}
.site-footer a{ color:var(--champagne); }
.site-footer a:hover{ text-decoration:underline; }
.site-footer__rejilla{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--esp-3);
  padding-bottom:var(--esp-3);
  border-bottom:1px solid var(--linea-clara);
}
@media (max-width:760px){
  .site-footer__rejilla{ grid-template-columns:1fr; }
}
.site-footer__marca{ display:flex; align-items:center; gap:.75rem; margin-bottom:var(--esp-2); }
.site-footer h4{
  color:var(--champagne);
  font-size:var(--fs-small);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:var(--esp-2);
}
.site-footer__dato{ font-size:var(--fs-small); color:rgba(255,255,255,.85); margin-bottom:.35rem; }
.site-footer__pendiente{
  color:rgba(255,255,255,.55);
  font-style:italic;
}
.site-footer__legal{
  padding-top:var(--esp-2);
  font-size:.8rem;
  color:rgba(255,255,255,.6);
  display:flex;
  flex-wrap:wrap;
  gap:var(--esp-2);
  justify-content:space-between;
}

/* ==========================================================================
   HOME (Task 2) — hero, chips de confianza, servicios, sectores, cobertura,
   cumplimiento y CTA final. Regla de color 55/25/10/7/3: la página se lee
   dominantemente clara; el hero es la única franja oscura grande, el CTA
   final usa azul profundo solo en una caja contenida (no en toda la sección),
   y el dorado se reserva a acentos chicos (línea bajo eyebrows, ícono de
   chips, borde superior de sellos).
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:100vh;
  /* Imagen base = poster del video: siempre presente como respaldo si el
     video no carga o con prefers-reduced-motion (ver .hero__video). */
  background:#07133E url('../img/hero-inicio.jpg') center 35% / cover no-repeat;
}
/* Video de fondo del hero: capa más profunda, cubre el área, sin eventos. */
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  z-index:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  /* Sin movimiento: se oculta el video y queda la imagen fija de .hero. */
  .hero__video{ display:none; }
}
@supports (min-height:100svh){
  .hero{ min-height:100svh; }
}
/* Viñeta cinematográfica: funde el pie del hero hacia el azul noche antes de
   entrar a la franja de confianza (blanca), en vez de un corte duro entre
   foto y sección clara. Decorativa, sin bloquear clics ni texto. */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:22%;
  background:linear-gradient(to bottom, transparent, rgba(7,19,62,.7));
  pointer-events:none;
}
.hero__fondo{
  position:absolute;
  left:0;
  right:0;
  top:-10%;
  height:120%;
  /* Solo el degradado (capa oscura sobre el video) para mantener el contraste
     AA del texto blanco. La imagen/video van detrás (.hero background / .hero__video). */
  background-image:
    radial-gradient(120% 90% at 85% 15%, rgba(2,25,177,.32), transparent 60%),
    linear-gradient(165deg, rgba(7,19,62,.94) 0%, rgba(17,31,128,.62) 42%, rgba(7,19,62,.9) 100%);
  background-size:cover;
  background-position:center, center;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:1;
}
.hero__escudo{
  position:absolute;
  bottom:-6%;
  right:-2%;
  width:min(42vw, 360px);
  height:auto;
  opacity:.16;
  mix-blend-mode:screen;
}
.hero__contenido{
  position:relative;
  z-index:2;
  padding-block:calc(var(--esp-5) + var(--esp-3));
  max-width:640px;
}
.hero__marca{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:var(--esp-3); }
.hero__marca .marca__chip{ padding:.25rem; }
.hero__marca .marca__logo{ width:28px; height:28px; }
.hero__kicker{
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--champagne);
}
.hero__titulo{ max-width:16ch; margin-bottom:var(--esp-2); }
.hero__subtitulo{
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.85);
  max-width:52ch;
  margin-bottom:var(--esp-3);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--esp-2); }

/* ---------- Banda con foto (banners de páginas internas) ----------
   Mismo patrón que .hero__fondo (capa absoluta oversized + data-parallax +
   overlay de degradado azul noche para AA sobre el texto), en un formato más
   compacto para los banners de nosotros.html / cobertura.html. */
.seccion--foto{
  position:relative;
  overflow:hidden;
  color:var(--blanco);
}
.seccion--foto .contenedor{ position:relative; z-index:1; }
.banner__fondo{
  position:absolute;
  left:0;
  right:0;
  top:-12%;
  height:124%;
  background-image:
    linear-gradient(165deg, rgba(7,19,62,.9) 0%, rgba(17,31,128,.58) 45%, rgba(7,19,62,.88) 100%),
    var(--banner-foto);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
}
.banner__fondo--nosotros{ --banner-foto:url('../img/nosotros.jpg'); }
.banner__fondo--cobertura{ --banner-foto:url('../img/cobertura.jpg'); }

/* ---------- Franja de chips de confianza ---------- */
.franja-confianza{
  background:var(--blanco);
  border-bottom:1px solid var(--linea-oscura);
  padding-block:var(--esp-3);
}
.franja-confianza__lista{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--esp-2);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--gris-claro);
  color:var(--azul-profundo);
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:var(--fs-small);
  padding:.55rem 1rem;
  border-radius:999px;
}
.chip__icono{ width:16px; height:16px; color:var(--azul-arzaa); flex-shrink:0; }

/* ---------- Encabezados de sección reutilizables ---------- */
.encabezado-seccion{ max-width:60ch; margin-bottom:var(--esp-3); }
.encabezado-seccion__eyebrow{
  display:inline-block;
  font-family:var(--fuente-titulo);
  font-weight:700;
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--azul-arzaa);
  margin-bottom:.6rem;
}
.encabezado-seccion__eyebrow::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  margin-top:.5rem;
  background:var(--oro);
  border-radius:2px;
}
.encabezado-seccion__titulo{ margin-bottom:.5rem; }
.encabezado-seccion__intro{ color:rgba(11,18,32,.7); margin-bottom:0; }

/* Reutilización de .encabezado-seccion sobre fondo oscuro (banners de páginas
   internas, Task 3): el eyebrow azul y la intro gris oscuro pierden contraste
   sobre --azul-noche, así que se recolorean a los tonos que ya usa el hero. */
.seccion--noche .encabezado-seccion__eyebrow,
.seccion--foto .encabezado-seccion__eyebrow{ color:var(--champagne); }
.seccion--noche .encabezado-seccion__eyebrow::after,
.seccion--foto .encabezado-seccion__eyebrow::after{ background:var(--oro); }
.seccion--noche .encabezado-seccion__intro,
.seccion--foto .encabezado-seccion__intro{ color:rgba(255,255,255,.85); }

/* ---------- Servicios ---------- */
.tarjetas-servicios{ margin-top:var(--esp-3); }
.tarjeta-servicio{
  display:flex;
  flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--linea-oscura);
  border-radius:var(--radio);
  padding:var(--esp-3);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-servicio:hover{ transform:translateY(-4px); box-shadow:var(--sombra-suave); }
.tarjeta-servicio__icono{ color:var(--azul-arzaa); margin-bottom:var(--esp-2); }
.tarjeta-servicio__icono svg{ width:40px; height:40px; display:block; }
.tarjeta-servicio__titulo{ margin-bottom:.5rem; }
.tarjeta-servicio__texto{ color:rgba(11,18,32,.75); margin-bottom:var(--esp-2); flex-grow:1; }
.tarjeta-servicio__enlace{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:var(--fs-small);
  color:var(--azul-arzaa);
  transition:gap var(--transicion);
}
.tarjeta-servicio__enlace:hover{ gap:.6rem; text-decoration:underline; }

/* ---------- Detalle de servicio con foto (servicios.html) ----------
   Bloque texto + imagen a dos columnas, alternando el lado de la foto por
   servicio (.servicio-detalle--invertido) para dar ritmo visual sin romper
   el orden del HTML (el texto sigue primero en el DOM en ambos casos). */
.servicio-detalle{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--esp-4);
  align-items:center;
  margin-top:var(--esp-3);
}
.servicio-detalle--invertido .servicio-detalle__figura{ order:-1; }
.servicio-detalle__figura{
  position:relative;
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra-suave);
  aspect-ratio:4/3;
}
.servicio-detalle__figura img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 700ms ease;
}
.servicio-detalle__figura:hover img{ transform:scale(1.045); }
.servicio-detalle__figura::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg, rgba(2,25,177,.18), transparent 55%);
  pointer-events:none;
}
@media (max-width:860px){
  .servicio-detalle{ grid-template-columns:1fr; gap:var(--esp-3); }
  .servicio-detalle--invertido .servicio-detalle__figura{ order:0; }
}

/* ---------- Sectores ---------- */
.tarjetas-sectores{ margin-top:var(--esp-3); }
.tarjeta-sector{
  display:block;
  background:var(--blanco);
  border:1px solid var(--linea-oscura);
  border-radius:var(--radio);
  padding:var(--esp-3);
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta-sector:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-suave);
  border-color:var(--azul-arzaa);
}
.tarjeta-sector__titulo{ font-size:var(--fs-body); margin-bottom:.35rem; }
.tarjeta-sector__texto{ font-size:var(--fs-small); color:rgba(11,18,32,.7); margin:0; }

/* ---------- Tarjeta de sector con foto (sectores.html) ----------
   Reutiliza la tipografía de .tarjeta-servicio__titulo/__texto; solo cambia
   el contenedor (foto arriba, cuerpo abajo) y el tratamiento de imagen. */
.tarjeta-sector-foto{
  display:flex;
  flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--linea-oscura);
  border-radius:var(--radio);
  overflow:hidden;
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta-sector-foto:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-suave);
  border-color:var(--azul-arzaa);
}
.tarjeta-sector-foto__figura{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.tarjeta-sector-foto__figura img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 700ms ease;
}
.tarjeta-sector-foto:hover .tarjeta-sector-foto__figura img{ transform:scale(1.06); }
.tarjeta-sector-foto__figura::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(7,19,62,.5) 0%, transparent 42%);
  pointer-events:none;
}
.tarjeta-sector-foto__cuerpo{ padding:var(--esp-3); flex-grow:1; }
.tarjeta-sector-foto__cuerpo .franja-confianza__lista{ margin-top:var(--esp-2); justify-content:flex-start; }

/* ---------- Cobertura ---------- */
.cobertura__lista{
  display:flex;
  flex-wrap:wrap;
  gap:var(--esp-2);
  margin:var(--esp-3) 0 var(--esp-2);
}
.cobertura__ciudad{
  background:rgba(2,25,177,.06);
  border:1px solid rgba(2,25,177,.25);
  color:var(--azul-profundo);
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.02em;
  padding:.6rem 1.4rem;
  border-radius:999px;
}
.cobertura__nota{ font-size:var(--fs-small); color:rgba(11,18,32,.65); margin:0; }
.cobertura__nota a{ color:var(--azul-arzaa); font-weight:600; }
.cobertura__nota a:hover{ text-decoration:underline; }

/* ---------- Cumplimiento y confianza empresarial ---------- */
.sellos{ margin-top:var(--esp-3); }
/* Acento dorado INSET en vez de border-top: un border-top sólido sobre una
   caja con border-radius no sigue la curva de la esquina (se ve como una
   pestaña recta encimada al redondeo). Aquí el acento es un ::before que
   ocupa el ancho completo por dentro del padding-box; overflow:hidden en
   el propio .sello lo recorta siguiendo el mismo radio que el resto de la
   tarjeta, así que la esquina queda limpia y coherente con --radio-chico. */
.sello{
  position:relative;
  background:var(--blanco);
  border-radius:var(--radio-chico);
  overflow:hidden;
  padding:calc(var(--esp-3) + 4px) var(--esp-2) var(--esp-3);
  text-align:center;
  box-shadow:var(--sombra-suave);
}
.sello::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--oro), var(--champagne));
}
.sello__nombre{
  display:block;
  font-family:var(--fuente-titulo);
  font-weight:700;
  color:var(--azul-profundo);
  margin-bottom:.5rem;
}
.sello__estado{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-style:italic;
  color:rgba(11,18,32,.55);
  border:1px dashed rgba(11,18,32,.25);
  border-radius:var(--radio-chico);
  padding:.2rem .5rem;
}
.cumplimiento__nota{
  font-size:var(--fs-small);
  color:rgba(11,18,32,.65);
  text-align:center;
  max-width:60ch;
  margin:var(--esp-2) auto 0;
}

/* ---------- CTA final / contacto ---------- */
.seccion-cta-final{ text-align:center; }
.cta-final__caja{
  background:var(--azul-profundo);
  color:var(--blanco);
  border-radius:var(--radio);
  padding:var(--esp-4) var(--esp-3);
  max-width:760px;
  margin-inline:auto;
  box-shadow:var(--sombra-suave);
}
.cta-final__titulo{ color:var(--blanco); margin-bottom:var(--esp-2); }
.cta-final__texto{
  color:rgba(255,255,255,.85);
  max-width:56ch;
  margin:0 auto var(--esp-3);
}
.cta-final__acciones{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--esp-2);
}
.cta-final__whatsapp{ font-size:var(--fs-small); color:rgba(255,255,255,.85); }
.cta-final__pendiente{ color:var(--champagne); font-style:italic; }

/* ==========================================================================
   PÁGINAS INTERNAS (Task 3) — nosotros, servicios, sectores, cobertura.
   Reutilizan encabezado-seccion, rejilla, tarjeta-servicio, chip, sello y el
   CTA final ya definidos arriba. Solo el formulario de contacto es nuevo.
   ========================================================================== */

/* ---------- Alerta de estado del formulario ---------- */
.alerta-formulario{
  max-width:760px;
  margin-top:var(--esp-3);
  padding:1rem 1.25rem;
  border-radius:var(--radio-chico);
  border:1px solid transparent;
  font-size:var(--fs-small);
}
.alerta-formulario p{ margin:0; }
.alerta-formulario--exito{
  background:#eef6ef;
  border-color:#bfe0c4;
  color:#1f5c2a;
}
.alerta-formulario--error{
  background:#faeceb;
  border-color:#e7b8b4;
  color:#7a2420;
}

/* ---------- Formulario de contacto ---------- */
.formulario-contacto{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--esp-3);
  max-width:760px;
  margin-top:var(--esp-3);
}
.campo{ display:flex; flex-direction:column; gap:.4rem; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:var(--fs-small);
  color:var(--azul-profundo);
}
.campo input,
.campo textarea{
  font:inherit;
  padding:.75rem 1rem;
  border:1px solid var(--linea-oscura);
  border-radius:var(--radio-chico);
  background:var(--blanco);
  color:var(--texto);
}
.campo input:focus,
.campo textarea:focus{
  outline:2px solid var(--azul-arzaa);
  outline-offset:1px;
}
.campo textarea{ resize:vertical; min-height:120px; }
.formulario-contacto__enviar{ grid-column:1 / -1; justify-self:start; }
@media (max-width:640px){
  .formulario-contacto{ grid-template-columns:1fr; }
}

/* Datos de contacto (NAP) pendientes de confirmar, mostrados sobre fondo claro */
.datos-contacto{ margin-top:var(--esp-3); }
.datos-contacto li{ margin-bottom:.6rem; font-size:var(--fs-body); }
.datos-contacto strong{ color:var(--azul-profundo); }

/* ==========================================================================
   CAPA DE ANIMACIÓN (Task 5) — reveals on-scroll + parallax sutil.
   PROGRESSIVE ENHANCEMENT: el estado "oculto" de [data-reveal] SOLO existe
   bajo "html.js" (la clase la agrega un inline <script> al inicio de <head>,
   ver *.html). Sin JS, html no tiene la clase "js" y esta regla nunca aplica:
   todo el contenido es visible desde el HTML crudo, sin depender de nada.
   Solo se anima transform/opacity (nunca layout) para que el trabajo lo
   resuelva el compositor, no el layout del navegador.
   ========================================================================== */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
}
html.js [data-reveal].is-visible{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s ease;
}

/* Capas de parallax (fondo del hero, fondos de sección): motion.js les asigna
   translate3d por scroll. will-change adelanta al navegador que van a animar
   por transform, para que reserve su propia capa de composición. */
[data-parallax]{
  will-change:transform;
}

/* ---------- Accesibilidad: reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; }

  /* Con reduce, motion.js ni siquiera arranca el observer de reveals (ver
     motion.js), así que la clase "is-visible" nunca llega a agregarse: sin
     esta regla, [data-reveal] se quedaría oculto para siempre bajo html.js.
     Se fuerza visible y sin transform — el contenido aparece de golpe, sin
     movimiento, tal como pide prefers-reduced-motion. */
  html.js [data-reveal]{
    opacity:1!important;
    transform:none!important;
  }

  /* El parallax tampoco arranca con reduce (ver motion.js), pero por si algún
     transform quedó aplicado antes de que la preferencia se detecte, se
     neutraliza aquí también. */
  [data-parallax]{
    transform:none!important;
  }
}

/* ---------- Lightbox de galería (galeria.html) ----------
   Fondo negro a pantalla completa + imagen ampliada con animación de
   entrada. Sin botón ni enlace de descarga a propósito (solo visualización).
   ========================================================================== */
.foto-ampliable{ cursor:zoom-in; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--esp-3);
  background:rgba(2,6,23,.94);
  animation:lightbox-fondo 220ms ease;
}
.lightbox[hidden]{ display:none; }
@keyframes lightbox-fondo{ from{ opacity:0; } to{ opacity:1; } }

.lightbox__imagen{
  max-width:min(92vw, 1400px);
  max-height:88vh;
  object-fit:contain;
  border-radius:var(--radio-chico);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:lightbox-imagen 260ms cubic-bezier(.2,.8,.2,1);
  user-select:none;
  -webkit-user-drag:none;
}
@keyframes lightbox-imagen{
  from{ opacity:0; transform:scale(.94); }
  to{ opacity:1; transform:scale(1); }
}

.lightbox__cerrar{
  position:absolute;
  top:var(--esp-2);
  right:var(--esp-2);
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:var(--blanco);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition:background var(--transicion), transform var(--transicion);
}
.lightbox__cerrar:hover{ background:rgba(255,255,255,.18); transform:scale(1.05); }
.lightbox__cerrar:focus-visible{ outline:2px solid var(--champagne); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox__imagen{ animation:none; }
}


/* ===== Guías, FAQ y tablas (SEO/AEO, 01/10/2026) ===== */
.guia{ max-width:880px; }
.guia__cuerpo{ font-size:var(--fs-body); line-height:1.7; color:var(--texto); }
.guia__cuerpo p{ margin:0 0 var(--esp-2); }
.guia__cuerpo ul,.guia__cuerpo ol{ margin:0 0 var(--esp-2); padding-left:1.25rem; }
.guia__cuerpo li{ margin-bottom:.6rem; }
.guia__cuerpo a,.faq a{ color:var(--azul-arzaa); text-decoration:underline; text-underline-offset:2px; }
.pasos{ counter-reset:paso; list-style:none; padding-left:0 !important; }
.pasos li{ counter-increment:paso; position:relative; padding-left:3rem; min-height:2.2rem; }
.pasos li::before{ content:counter(paso); position:absolute; left:0; top:0; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--azul-arzaa); color:var(--blanco); font-family:var(--fuente-titulo); font-weight:700; display:flex; align-items:center; justify-content:center; }
.tabla-guia{ overflow-x:auto; margin:0 0 var(--esp-2); border:1px solid var(--linea-oscura); border-radius:var(--radio); background:var(--blanco); }
.tabla-guia table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); min-width:560px; }
.tabla-guia th{ background:var(--azul-noche); color:var(--blanco); text-align:left; padding:.8rem 1rem; font-family:var(--fuente-titulo); }
.tabla-guia td{ padding:.8rem 1rem; border-top:1px solid var(--linea-oscura); vertical-align:top; }
.faq{ display:grid; gap:.75rem; }
.faq__item{ background:var(--blanco); border:1px solid var(--linea-oscura); border-radius:var(--radio); padding:0 1.1rem; }
.faq__item summary{ cursor:pointer; padding:1rem 0; font-family:var(--fuente-titulo); font-weight:600; color:var(--azul-noche); list-style:none; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; float:right; color:var(--oro); font-weight:700; }
.faq__item[open] summary::after{ content:"\2212"; }
.faq__item p{ margin:0 0 1rem; line-height:1.7; }
.cobertura__ciudad a{ color:inherit; text-decoration:none; }
.cobertura__ciudad a:hover{ text-decoration:underline; }