/* ══════════════════════════════════════════════════════
   CONTENEDOR GLOBAL
══════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 4.5rem;
  padding-block: 0;
  overflow: hidden;
  transition: var(--transition-smooth);
}

/* Estado activo: se activa via JS al hacer scroll */
.navbar.scrolled {
  height: 4rem;
  padding-block: 0;
  background: rgba(13, 67, 114, 0.92);
  backdrop-filter: blur(0.75rem) saturate(1.6);
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.6);
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.4);
}

/* Bug real (Techo Propio): sin hacer scroll, .navbar no tiene fondo
   propio (queda transparente flotando sobre el hero) — funcionaba
   bien contra el hero armado con HTML/CSS (siempre navy sólido
   detrás), pero el banner nuevo (una sola imagen) tiene una burbuja
   BLANCA que llega justo hasta la altura del navbar por el lado
   derecho, y el texto blanco de "Entidad Técnica"/"Testimonios"
   se pierde contra ese blanco. Degradado oscuro sutil detrás del
   navbar (solo mientras no se hizo scroll, ver .scrolled arriba que
   ya trae su propio fondo sólido) para que el texto blanco se lea
   sin importar qué haya en la imagen de fondo. */
body.tp-page .navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(5, 15, 30, 0.55) 0%, rgba(5, 15, 30, 0) 100%);
  pointer-events: none;
}

body.tp-page .navbar.scrolled::before {
  content: none;
}

.navbar__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  /* Más angosto que --space-xl a propósito: logo + 6 enlaces + CTA
     tienen que entrar en 1024px exactos (regla del corte único), no
     hay margen para el gap de 2rem que se usa en el resto del sitio. */
  gap: 1.25rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Ancla de altura fija (44px, igual que el botón hamburguesa): el logo
   real (120px) sigue sobresaliendo del header delgado sin "engordar"
   la fila flex. Antes .navbar__logo no tenía altura propia, así que su
   caja crecía a los 120px reales de la imagen — eso inflaba el alto de
   la línea flex (con flex-wrap activo en <=1200px) y descuadraba tanto
   el logo como el botón de menú hacia abajo, además de recortar el
   logo solo por debajo (pegado arriba) en vez de un recorte simétrico.
   Con la altura fija + align-items:center, el logo queda centrado de
   verdad y el recorte de .navbar { overflow:hidden } es parejo arriba
   y abajo. No se usa position:absolute + transform para centrar (chocaría
   con el transform: scale(...) de la animación logo-subtle-pulse). */
.navbar__logo {
  height: 2.75rem;
  display: flex;
  align-items: center;
}

.navbar__logo img {
  /* Fluido en vez de un 120px fijo: a los 1024px exactos (donde antes
     el logo grande no dejaba lugar para los 6 enlaces + CTA) mide
     ~79px, y crece hasta el tope de 120px recién en monitores muy
     anchos — la fila entra en 1024px sin sacrificar el logo grande en
     monitores 23"+. */
  height: clamp(4.5rem, 3rem + 3vw, 7.5rem);
  width: auto;
  flex-shrink: 0;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease, height 0.25s ease;
  animation: logo-subtle-pulse 5s ease-in-out infinite;
}

/* Header compacto (ya con scroll): el logo se achica para caber sin
   recortarse dentro de la barra de 64px — mismo criterio que ya se
   usaba para el logo de Techo Propio, que por eso queda fuera de esta
   regla (no debe achicarse más de lo que ya está). */
.navbar.scrolled .navbar__logo:not(.navbar__logo--tp) img {
  height: 3rem;
}

.navbar__logo:hover img {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.35));
  animation: none;
}

/* Logo de Techo Propio: se muestra en sus colores reales (rojo/azul del
   logo oficial del programa), no en blanco sólido como el de IMBO — por
   eso anula tanto el filtro como la animación que lo re-aplica en bucle. */
.navbar__logo--tp img {
  height: 3.625rem;
  filter: none;
  opacity: 1;
  animation: none;
}

.navbar__logo--tp:hover img {
  filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.35));
}

/* El logo de Techo Propio ya trae sus propios colores de marca
   (techo rojo, casa azul, texto blanco) que se pierden con el filtro
   brightness(0)+invert(1) que .footer-brand__logo aplica por defecto
   (lo aplanaba a una silueta blanca sin forma reconocible, porque el
   texto "techo propio" es blanco sólido, no un hueco transparente).
   Se envuelve en una tarjeta blanca para que esos colores se noten
   bien sobre el footer oscuro — misma técnica que la guía del
   proyecto para logos con texto claro sobre fondo oscuro.
   Especificidad: dos clases + img le gana a ".footer-brand__logo img"
   sin depender del orden de las reglas en el archivo. */
.footer-brand__logo--tp .footer-brand__logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--imbo-white);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.1rem;
}

.footer-brand__logo--tp .footer-brand__logo-chip img {
  height: 5.625rem;
  width: auto;
  filter: none;
  opacity: 1;
}

.footer-brand__logo--tp:hover .footer-brand__logo-chip {
  opacity: 0.9;
}

@keyframes logo-subtle-pulse {
  0%, 78%, 100% {
    transform: scale(1);
    filter: brightness(0) invert(1);
  }
  83% {
    transform: scale(1.04);
    filter: brightness(0) invert(1) drop-shadow(0 0 0.625rem rgba(255, 255, 255, 0.5));
  }
  90% {
    transform: scale(1.015);
    filter: brightness(0) invert(1);
  }
}

.navbar__links {
  display: flex;
  align-items: center;
  /* Igual que .navbar__inner: más angosto que --space-xl para que
     los 6 enlaces entren en 1024px de ancho. */
  gap: 1.25rem;
}

.navbar__links a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
  transition: var(--transition-fast);
  position: relative;
  padding-bottom: 0.125rem;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -0.125rem;
  left: 0;
  width: 0;
  height: 0.125rem;
  background: var(--imbo-orange);
  border-radius: var(--radius-full);
  transition: width 0.25s ease;
}

.navbar__links a:hover {
  color: var(--imbo-white);
}

.navbar__links a:hover::after {
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   NAVBAR — Menú hamburguesa (móvil/tablet)
   El botón nace oculto (display:none) y solo aparece dentro del
   media query de abajo, así que en escritorio no participa del
   layout flex de 3 columnas (logo/brand · nav · cta) y no lo altera.
══════════════════════════════════════════════════════ */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.navbar__toggle span {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background: var(--imbo-white);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.navbar.nav-open .navbar__toggle span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.navbar.nav-open .navbar__toggle span:nth-child(2) {
  opacity: 0;
}

.navbar.nav-open .navbar__toggle span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* Regla obligatoria (2026-09-21): el corte celular/escritorio es
   1024px en TODA la página, sin excepción para el navbar — antes
   estaba en 1200px porque el logo+6 enlaces+CTA no cabían holgados
   ahí. En vez de mover el problema, se ajustó el gap del navbar y el
   tamaño del logo (ver abajo) para que la fila SÍ entre en 1024px;
   verificado con medición real de anchos (Playwright), no a ojo. */
@media (max-width: 63.9375em) {
  .navbar__toggle {
    display: flex;
  }

  /* La cinta diagonal "Trabajamos en CSP" (.tp-hero__ribbon, solo en
     techo-propio.php) vive clavada en esa misma esquina superior
     derecha y crece con el viewport (22vw) — sin este margen el botón
     queda justo debajo, apenas visible contra el fondo amarillo. Lo
     alejamos hacia la izquierda con el mismo tipo de escala (vw) para
     que la separación se mantenga proporcional en cualquier ancho.
     Escapado a "body.tp-page" (no ".navbar__toggle" a secas): esta
     hoja de estilos es compartida con index.php, que no tiene cinta —
     aplicado sin filtrar, el margen le sobraba al botón del header
     normal y lo hacía envolver a una segunda línea invisible (bug
     real: el ícono de menú desaparecía por completo en pantallas
     angostas de la home). */
  body.tp-page .navbar__toggle {
    margin-right: clamp(7.5rem, 14vw, 10rem);
  }

  .navbar__inner {
    flex-wrap: wrap;
  }

  /* Cerrados por defecto: no ocupan espacio en la fila 1 (logo · toggle).
     ".navbar .navbar__cta" (no ".navbar__cta" a secas) a propósito: con
     la misma especificidad, ".btn { display: inline-flex }" de
     components.css (que carga después) le ganaba a este display:none
     por orden de aparición — el CTA quedaba visible, empujaba la fila
     a envolver, y tapaba/desplazaba el botón hamburguesa fuera del
     header visible (bug real: no se veía ningún link ni el toggle). */
  .navbar__nav,
  .navbar .navbar__cta {
    display: none;
    width: 100%;
  }

  /* Al abrir: el header deja de recortar (era overflow:hidden para
     encuadrar el logo de 120px dentro de 72px) y crece para mostrar
     el panel completo debajo de la fila logo/toggle. Fondo propio:
     si aún no hiciste scroll, .navbar no tiene background (es
     transparente sobre el hero) y el panel quedaría ilegible. */
  .navbar.nav-open {
    height: auto;
    overflow: visible;
    padding-bottom: var(--space-lg);
    background: rgba(13, 67, 114, 0.97);
    backdrop-filter: blur(0.75rem) saturate(1.6);
    -webkit-backdrop-filter: blur(0.75rem) saturate(1.6);
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.4);
  }

  .navbar.nav-open .navbar__nav {
    display: block;
    order: 3;
  }

  .navbar.nav-open .navbar__cta {
    display: flex;
    order: 4;
    justify-content: center;
    margin-top: var(--space-md);
  }

  .navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-md);
  }

  .navbar__links li {
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
  }

  .navbar__links a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.65rem 0;
  }

  .navbar__links a::after {
    display: none;
  }

  .navbar__links a.navbar__tp-link {
    display: inline-flex;
    align-self: flex-start;
    margin-block: 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;

  /* Overlay + foto real. Sin foto: el gradiente actúa como placeholder */
  background:
    linear-gradient(
      135deg,
      rgba(43, 49, 52, 0.88) 0%,
      rgba(43, 49, 52, 0.72) 50%,
      rgba(13, 67, 114, 0.60) 100%
    ),
    url('../img/hero/hero-bg.webp') center / cover no-repeat;
  background-color: var(--imbo-dark);
}

/* Textura de puntos/grid sutil (efecto tecnológico) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.04) 0.0625rem, transparent 0.0625rem);
  background-size: 2rem 2rem;
  pointer-events: none;
}

/* Resplandor naranja difuso en el fondo */
.hero::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--imbo-orange-rgb), 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 48.75rem;
  padding-block: var(--space-4xl);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--imbo-orange);
  background: rgba(var(--imbo-orange-rgb), 0.1);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.3);
  border-radius: var(--radius-full);
  padding: 0.375rem 1rem;
}

.hero__badge::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--imbo-orange);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

.hero__title {
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--imbo-white);
}

.hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 37.5rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* ══════════════════════════════════════════════════════
   ISO BANNER — Layered Card flotante
══════════════════════════════════════════════════════ */
.iso-banner {
  background: var(--imbo-light);
  padding-block: var(--space-4xl);
  border-radius: 3rem;
  margin-block: 2rem;
  position: relative;
  overflow: hidden;
}

/* Resplandor naranja sutil sobre fondo claro */
.iso-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(var(--imbo-orange-rgb), 0.055) 0%, transparent 65%);
  pointer-events: none;
  border-radius: inherit;
}

/* ══════════════════════════════════════════════════════
   ISO CARDS — Grid de Certificaciones
══════════════════════════════════════════════════════ */

.iso-banner .section-label {
  color: var(--imbo-dark-2);
}

.iso-grid__header {
  text-align: center;
  max-width: 42.5rem;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.iso-grid__header h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--imbo-dark);
  line-height: 1.15;
}

.iso-grid__lead {
  font-size: var(--fs-base);
  color: var(--imbo-gray);
  line-height: 1.7;
  max-width: 56ch;
}

/* ══════════════════════════════════════════════════════
   ISO SECTION — Zigzag alternating layout
══════════════════════════════════════════════════════ */
.iso-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  counter-reset: iso-counter;
}

.iso-item {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  counter-increment: iso-counter;
}

.iso-item:nth-child(even) {
  flex-direction: row-reverse;
}

.iso-item__img-col {
  flex: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #ffffff;
  border: 0.125rem solid rgba(var(--imbo-orange-rgb), 0.2);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
  padding: 1rem;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.iso-item:hover .iso-item__img-col {
  border-color: rgba(var(--imbo-orange-rgb), 0.55);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.18);
  transform: translateY(-0.3125rem);
}

.iso-item__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.iso-item__text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline: var(--space-xl);
  position: relative;
  overflow: hidden;
}

/* Large decorative number in background */
.iso-item__text-col::after {
  content: counter(iso-counter, decimal-leading-zero);
  position: absolute;
  bottom: -1.5rem;
  right: var(--space-xl);
  font-family: var(--font-heading);
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: var(--imbo-dark-2);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 0;
}

.iso-item__tag {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--imbo-dark-2);
  background: rgba(13, 67, 114, 0.08);
  border: 0.09375rem solid rgba(13, 67, 114, 0.2);
  border-radius: var(--radius-full);
  padding: 0.3em 1em;
  align-self: flex-start;
}

.iso-item__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--imbo-dark);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Yellow accent bar below title */
.iso-item__title::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 0.25rem;
  background: var(--imbo-orange);
  border-radius: 0.125rem;
  margin-top: 1rem;
}

.iso-item__desc {
  position: relative;
  z-index: 1;
  font-size: var(--fs-lg);
  color: var(--imbo-gray);
  line-height: 1.8;
  max-width: 42ch;
}


/* ══════════════════════════════════════════════════════
   ABOUT US — QUIÉNES SOMOS
══════════════════════════════════════════════════════ */
.about-us {
  padding-block: var(--space-4xl);
  /* Overlay más oscuro para que la tarjeta glass resalte sobre la foto */
  background:
    linear-gradient(
      to right,
      rgba(43, 49, 52, 0.95) 0%,
      rgba(43, 49, 52, 0.88) 55%,
      rgba(43, 49, 52, 0.75) 100%
    ),
    url('../img/hero/about-bg.webp') center / cover no-repeat;
  background-color: var(--imbo-dark);
  position: relative;
  overflow: hidden;
}

/* Textura de puntos igual que el hero */
.about-us::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.035) 0.0625rem, transparent 0.0625rem);
  background-size: 2rem 2rem;
  pointer-events: none;
}

/* Resplandor naranja desde la esquina inferior-izquierda */
.about-us::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--imbo-orange-rgb), 0.09) 0%, transparent 65%);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Columna texto ── */
.about-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.about-text h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
}

.about-text p {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: #94A3B8;
  max-width: 52ch;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.about-features li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #CBD5E1;
}

.about-features__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--imbo-orange);
  flex-shrink: 0;
}

/* ── Columna brochure ── */
.about-brochure {
  display: flex;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════
   ¿POR QUÉ ELEGIRNOS? — FEATURES
══════════════════════════════════════════════════════ */
.features-section {
  padding-block: var(--space-4xl);
  background: var(--imbo-light);
  border-radius: 3rem;
  margin-block: 2rem;
  position: relative;
}

/* En sección clara, los headings deben ser oscuros */
.features-section h2,
.features-section .section-header h2 {
  color: var(--imbo-dark);
}

/* El dorado/verde de marca no tiene contraste suficiente sobre fondo
   claro (1.56:1 dorado, 2.74:1 verde — mínimo WCAG AA es 4.5:1), así
   que el span de énfasis dentro del heading también pasa a oscuro. */
.features-section .text-orange,
.iso-banner .text-orange {
  color: var(--imbo-dark);
}

/* .about-features está pensado para fondo oscuro (about-us) — reutilizado
   en la sección clara "¿Calificas?" de Techo Propio necesita texto oscuro
   (#CBD5E1 sobre --imbo-light da 1.41:1, muy bajo el mínimo AA 4.5:1). */
.features-section .about-features li {
  color: var(--imbo-dark);
}

.features-section .section-label {
  color: var(--imbo-dark-2);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--imbo-dark-2);
  border: 0.0625rem solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0.5rem 1.5rem rgba(0, 0, 0, 0.35),
    0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: var(--transition-smooth);
}

.feature-card:hover {
  transform: translateY(-0.25rem);
  box-shadow:
    0 0.75rem 2rem rgba(var(--imbo-orange-rgb), 0.16),
    0 1.5rem 3rem rgba(0, 0, 0, 0.35);
  border-color: rgba(var(--imbo-orange-rgb), 0.4);
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  background: rgba(var(--imbo-orange-rgb), 0.1);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.2);
  color: var(--imbo-orange);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.feature-card:hover .feature-card__icon {
  background: rgba(var(--imbo-orange-rgb), 0.18);
  border-color: rgba(var(--imbo-orange-rgb), 0.4);
}

.feature-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--imbo-white);
  line-height: 1.25;
}

.feature-card p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  /* Ojo: .feature-card tiene su propio fondo navy (--imbo-dark-2),
     es una tarjeta oscura DENTRO de .features-section (que es clara).
     El gris original (rgba(148,163,184,.85)) daba 3.31:1 sobre ese
     navy — bajo el mínimo AA 4.5:1. slate-300 da 6.86:1. */
  color: #CBD5E1;
  max-width: none;
}

/* ══════════════════════════════════════════════════════
   SERVICIOS — BENTO GRID
══════════════════════════════════════════════════════ */
.services-section {
  padding-block: var(--space-4xl);
  background: var(--imbo-dark);
  position: relative;
  overflow: hidden;
}

/* Puntos más separados que en hero para no repetirse */
.services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.028) 0.0625rem, transparent 0.0625rem);
  background-size: 2.75rem 2.75rem;
  pointer-events: none;
}

/* Glow naranja desde arriba-derecha (opuesto al de about-us) */
.services-section::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--imbo-orange-rgb), 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Cabecera de sección ── */
.section-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
  position: relative;
  z-index: 1;
}

.section-header h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
}

/* ── Grid asimétrico ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

/* Card grande: 2 columnas × 2 filas → izquierda dominante */
.bento-large {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 28.75rem;
}

/* ── Backgrounds de imágenes (foto encima, texto anclado abajo) ──
   Mientras no exista el .webp, background-color actúa como fallback.
   Cuando el archivo esté en su carpeta, el overlay lo integra solo.
──────────────────────────────────────────────────────────────────── */
.bento-grid .bento-card.bento-large {
  background:
    linear-gradient(to top,
      rgba(43, 49, 52, 0.96) 0%,
      rgba(43, 49, 52, 0.65) 55%,
      rgba(43, 49, 52, 0.15) 100%
    ),
    url('../img/servicios/construccion.webp') center / cover no-repeat;
  background-color: #0d4372;
}

.bento-grid #maquinaria {
  background:
    linear-gradient(to top,
      rgba(43, 49, 52, 0.95) 0%,
      rgba(43, 49, 52, 0.55) 60%,
      rgba(43, 49, 52, 0.10) 100%
    ),
    url('../img/servicios/maquinaria.webp') center / cover no-repeat;
  background-color: #0d4372;
}

.bento-grid .bento-card:last-child {
  background:
    linear-gradient(to top,
      rgba(43, 49, 52, 0.95) 0%,
      rgba(43, 49, 52, 0.55) 60%,
      rgba(43, 49, 52, 0.10) 100%
    ),
    url('../img/servicios/consultoria.webp') center / cover no-repeat;
  background-color: #0d4372;
}

/* ══════════════════════════════════════════════════════
   IDENTIDAD CORPORATIVA — MISIÓN & VISIÓN
══════════════════════════════════════════════════════ */
.identity-section {
  padding-block: var(--space-4xl);
  background: #1e2327;
  position: relative;
  overflow: hidden;
}

.identity-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.025) 0.0625rem, transparent 0.0625rem);
  background-size: 2.625rem 2.625rem;
  pointer-events: none;
}

.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.identity-card {
  background: var(--glass-bg);
  border: 0.0625rem solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 1.25rem;
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-card);
}

.identity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--imbo-orange), var(--imbo-orange-dark));
  border-radius: 1.25rem 1.25rem 0 0;
}

.identity-card:hover {
  border-color: rgba(var(--imbo-orange-rgb), 0.3);
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-float), 0 0 2.5rem rgba(var(--imbo-orange-rgb), 0.08);
}

.identity-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 0.875rem;
  background: rgba(var(--imbo-orange-rgb), 0.12);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.25);
  color: var(--imbo-orange);
  margin-bottom: var(--space-lg);
  transition: var(--transition-smooth);
}

.identity-card:hover .identity-card__icon {
  background: rgba(var(--imbo-orange-rgb), 0.2);
  box-shadow: 0 0 1.25rem rgba(var(--imbo-orange-rgb), 0.2);
}

.identity-card h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--imbo-white);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.identity-card p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: rgb(148 163 184 / 0.9);
}

@media (max-width: 48rem) {
  .identity-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   COBERTURA — MAPA INTERACTIVO DEL PERÚ
══════════════════════════════════════════════════════ */
.map-section {
  padding-block: var(--space-4xl);
  background: var(--imbo-dark);
  position: relative;
  overflow: hidden;
}

.map-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--imbo-orange-rgb), 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.map-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgb(148 163 184 / 0.8);
  max-width: 36.25rem;
  margin-inline: auto;
  margin-top: var(--space-md);
  text-align: center;
  line-height: 1.7;
}

.map-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
  padding-block: var(--space-xl);
}

.peru-map {
  width: 100%;
  max-width: 46.875rem;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 1.5rem 3.75rem rgb(0 0 0 / 0.65));
}

/* ── Department paths ── */
.dept {
  fill: #1a5090;
  stroke: #0d4372;
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill 0.25s ease, filter 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.dept:hover {
  fill: var(--imbo-orange);
  filter: drop-shadow(0 0 0.375rem rgba(var(--imbo-orange-rgb), 0.5));
}

/* Departamentos con presencia activa de IMBO */
.dept--active {
  fill: #2163b0;
  stroke: #1a5090;
}

.dept--active:hover {
  fill: var(--imbo-orange);
}

@media (max-width: 37.5rem) {
  .peru-map { max-width: 20rem; }
}

/* ══════════════════════════════════════════════════════
   GALERÍA — Carrusel filmstrip
══════════════════════════════════════════════════════ */
.gallery-section {
  background: var(--imbo-dark);
  padding-block: var(--space-4xl);
  overflow: hidden;
  position: relative;
}

/* Dot texture (misma que el hero) */
.gallery-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 0.0625rem, transparent 0.0625rem);
  background-size: 1.75rem 1.75rem;
  pointer-events: none;
  z-index: 0;
}

.gallery-section .container {
  position: relative;
  z-index: 1;
}

/* Subtext debajo del h2 */
.gallery-section__lead {
  font-size: var(--fs-base);
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.65;
  max-width: 56ch;
  text-align: center;
}

.gallery-carousel {
  position: relative;
}

/* Clipping del reel horizontal */
.gallery-reel-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}

/* Fades laterales para el efecto "hay más" */
.gallery-reel-wrap::before,
.gallery-reel-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  z-index: 4;
  pointer-events: none;
}

.gallery-reel-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--imbo-dark) 0%, transparent 100%);
}

.gallery-reel-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--imbo-dark) 0%, transparent 100%);
}

/* Reel (flex + transform) */
.gallery-reel {
  display: flex;
  gap: 1.25rem;
  transform: translateX(0);
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  padding-block: 0.75rem;  /* espacio para la sombra de las tarjetas */
}

/* ── Cada diapositiva ── */
.gallery-slide {
  flex: 0 0 calc(31% - 0.84rem);
  flex-shrink: 0;
  border-radius: 0.875rem;
  overflow: hidden;
  position: relative;
  background: var(--imbo-dark-2);
  aspect-ratio: 4 / 3;
  margin: 0;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.gallery-slide:hover {
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5), 0 0 0 0.0625rem rgba(var(--imbo-orange-rgb), 0.2);
  transform: translateY(-0.1875rem);
  z-index: 2;
}

/* Shimmer skeleton mientras carga */
.gallery-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(var(--imbo-orange-rgb), 0.05) 50%,
    rgba(255, 255, 255, 0.02) 100%
  );
  background-size: 200% 100%;
  animation: gallery-shimmer 1.8s ease infinite;
  z-index: 0;
  transition: opacity 0.4s ease;
}

.gallery-slide.img-loaded::before {
  opacity: 0;
  pointer-events: none;
}

@keyframes gallery-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Imagen */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.4s ease;
}

.gallery-img.is-loaded {
  opacity: 1;
}

.gallery-slide:hover .gallery-img {
  transform: scale(1.04);
}

/* Velo degradado inferior */
.gallery-slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(
    to top,
    rgba(43, 49, 52, 0.65) 0%,
    rgba(43, 49, 52, 0.12) 55%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Flechas de navegación ── */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: rgba(43, 49, 52, 0.88);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.28);
  color: var(--imbo-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    opacity 0.22s ease,
    box-shadow 0.22s ease;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.45);
}

.gallery-arrow:hover:not(:disabled) {
  background: rgba(var(--imbo-orange-rgb), 0.22);
  border-color: var(--imbo-orange);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0.25rem 1.25rem rgba(var(--imbo-orange-rgb), 0.25);
}

.gallery-arrow:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.gallery-arrow:focus-visible {
  outline: 0.125rem solid var(--imbo-orange);
  outline-offset: 0.1875rem;
}

.gallery-arrow--prev { left: 0.875rem; }
.gallery-arrow--next { right: 0.875rem; }

/* ── Controles inferiores (dots) ── */
.gallery-controls {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.gallery-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Botón con área táctil de 24px (mínimo WCAG 2.5.8); el punto visible
   sigue siendo pequeño (8px) via ::before para no engordar la fila. */
.gallery-dot {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gallery-dot::before {
  content: '';
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.18);
  transition: width 0.28s ease, background 0.28s ease;
}

.gallery-dot.is-active::before {
  width: 1.625rem;
  background: var(--imbo-orange);
}

.gallery-dot:hover:not(.is-active)::before {
  background: rgba(var(--imbo-orange-rgb), 0.45);
}

.gallery-dot:focus-visible {
  outline: 0.125rem solid var(--imbo-orange);
  outline-offset: 0.1875rem;
}

/* ══════════════════════════════════════════════════════
   CONTACTO
══════════════════════════════════════════════════════ */
.contact-section {
  padding-block: var(--space-4xl);
  background: #1a1d1f;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.025) 0.0625rem, transparent 0.0625rem);
  background-size: 2.25rem 2.25rem;
  pointer-events: none;
}

/* Glow naranja centrado — señal de acción */
.contact-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--imbo-orange-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Info izquierda ── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
}

.contact-info h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.1;
}

.contact-info > p {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: #94A3B8;
  max-width: 48ch;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-md);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.contact-detail__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: rgba(var(--imbo-orange-rgb), 0.1);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.2);
  color: var(--imbo-orange);
  margin-top: 0.125rem;
}

.contact-detail__text {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.contact-detail__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 0.125rem;
}

.contact-detail__value {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--imbo-white);
  transition: color 0.2s ease;
  text-decoration: none;
}

.contact-detail__value:hover {
  color: var(--imbo-orange);
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer {
  background: #161819;
  padding-top: var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-brand__logo img {
  height: 8.75rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.footer-brand__logo:hover img {
  opacity: 1;
}

.footer-brand > p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  /* 0.35 daba 3.24:1 (bajo el mínimo AA 4.5:1) — 0.6 da 7.04:1 */
  color: rgba(255, 255, 255, 0.6);
  max-width: 26ch;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.4 daba 3.80:1 (bajo el mínimo AA 4.5:1) — 0.6 da 7.04:1 */
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-sm);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-col ul li a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: var(--imbo-white);
}

.footer-bottom {
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
  padding-block: var(--space-md);
  text-align: center;
}

.footer-bottom p {
  font-size: var(--fs-xs);
  /* 0.25 daba 2.27:1 (bajo el mínimo AA 4.5:1) — 0.6 da 7.04:1 */
  color: rgba(255, 255, 255, 0.6);
  max-width: none;
  letter-spacing: 0.02em;
}

.footer-bottom__links {
  margin-top: 0.4rem;
}

.footer-bottom__links a {
  /* 0.4 daba 3.80:1 (bajo el mínimo AA 4.5:1) — 0.6 da 7.04:1 */
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom__links a:hover {
  color: var(--imbo-orange);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Tablet (parte de la estructura de celular, < 1024px)
   Antes era un tercer nivel "tablet" separado con max-width:1024px
   (inclusive) — con el corte único de la regla 2026-09-21 eso pisaba
   el arranque mismo de la estructura grande. Absorbido dentro del
   rango < 1024px (63.9375em), que ahora es un solo tramo "celular".
══════════════════════════════════════════════════════ */
@media (max-width: 63.9375em) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bento-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Móvil (≤ 768px)
══════════════════════════════════════════════════════ */
@media (max-width: 48rem) {
  .identity-grid {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .about-brochure {
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-large {
    grid-column: span 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-brand > p {
    max-width: none;
  }

  .iso-item,
  .iso-item:nth-child(even) {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .iso-item__text-col {
    padding-inline: 0;
    align-items: center;
    text-align: center;
  }

  .iso-item__text-col::after {
    right: 50%;
    transform: translateX(50%);
    opacity: 0.04;
  }

  .iso-item__tag {
    align-self: center;
  }

  .iso-item__title::after {
    margin-inline: auto;
  }

  .iso-item__desc {
    max-width: none;
  }

  .gallery-slide {
    flex: 0 0 calc(72% - 0.84rem);
  }

  .peru-map {
    max-width: 90vw;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Móvil pequeño (≤ 480px)
══════════════════════════════════════════════════════ */
@media (max-width: 30rem) {
  .gallery-slide {
    flex: 0 0 calc(88% - 0.5rem);
  }

  .gallery-arrow {
    width: 2.375rem;
    height: 2.375rem;
  }

  .peru-map {
    max-width: 95vw;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    text-align: center;
    justify-content: center;
  }
}