/* =========================================================
   1. TOKENS + RESET
   Colores oficiales del Manual de Marca H2 Chile (brand/manual-de-marca-h2chile.pdf):
   gris #626463, naranja #DC982F, azul #375F86, verde #96B734.
   Los tonos -oscuro/-claro/-wash de abajo son variaciones calculadas,
   no vienen del manual (que solo define los 4 tonos planos).
   ========================================================= */
:root {
  --h2-azul: #375f86;
  --h2-azul-oscuro: #2c4c6b;
  --h2-azul-claro: #5c81a6;
  --h2-azul-wash: #eef3f7;
  --h2-verde: #96b734;
  --h2-verde-oscuro: #7b9a2a;
  --h2-verde-wash: #f3f7e8;
  --h2-naranja: #dc982f;
  --h2-gris: #626463;
  --h2-gris-suave: #8a8c8b;
  --h2-gris-fondo: #f5f6f6;
  --h2-gris-borde: #dfe1e0;
  --h2-texto: #2b2c2c;

  /* Evolución de diseño (2026-08): paleta de acento teal + secciones oscuras,
     pedida por el site owner para dar un toque más profesional/tipo dashboard,
     sin tocar la interactividad de los carruseles. --acento es el tono crudo
     (#2dd4a7) tal como fue entregado: solo se usa como FONDO (con texto oscuro
     encima) o como texto sobre fondo oscuro, porque como texto sobre blanco da
     apenas 1.9:1 de contraste (no pasa WCAG AA). --acento-oscuro y --acento-texto
     son variantes calculadas más oscuras, para poder usar la misma familia de
     color como borde/ícono decorativo (≥3:1) o como texto de énfasis (≥4.5:1)
     sobre fondos claros sin fallar accesibilidad — mismo criterio ya aplicado
     acá con --h2-verde, que tampoco se usa como texto por la misma razón. */
  --acento: #2dd4a7;
  --acento-oscuro: #189873;
  --acento-texto: #0f7a5c;
  --acento-wash: #e3faf3;
  --fondo-oscuro: #1b1e1e;
  --panel-oscuro: #202626;
  --texto-invertido: #ffffff;
  --texto-secundario-invertido: #b0bec5;

  --radio: 10px;
  --radio-sm: 6px;
  --radio-pill: 999px;

  --sombra-suave: 0 2px 8px rgba(27, 30, 30, 0.08);
  --sombra-hover: 0 10px 24px rgba(27, 30, 30, 0.16);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.375rem, 1.15rem + 1vw, 2.125rem);
  --fs-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.125rem);
  --fs-small: clamp(0.85rem, 0.82rem + 0.1vw, 1rem);
  --fs-label: clamp(0.75rem, 0.73rem + 0.08vw, 0.875rem);

  --contenedor-max: 1280px;
  --transicion-rapida: 180ms ease;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Tipografía complementaria del manual de marca: Calibri para todo el texto/UI.
     Gotham Book es solo del logotipo (ya está incluido en la imagen del logo). */
  font-family: Calibri, "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--h2-texto);
  /* Fondo oscuro de página completa (pedido explícito del site owner) — las
     tarjetas/paneles individuales (.tarjeta-empresa, .modal, inputs/selects,
     chips) se dejan intactos en blanco, "flotando" sobre este fondo oscuro;
     solo el texto suelto que vive directamente sobre el body (headings de
     sección, contador de resultados, "Acerca de") pasa a tonos claros. */
  background: var(--fondo-oscuro);
}

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

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: var(--h2-azul);
}

h1, h2, h3, p, ul {
  margin: 0;
}

/* Verde oficial (#96B734) da 2.3:1 sobre blanco -> no cumple WCAG AA como color
   de texto. Se usa solo en fondos/bordes/puntos, nunca como color de texto/título. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   2. UTILIDADES
   ========================================================= */
.h2-visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--fondo-oscuro);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radio-sm);
  z-index: 1000;
  transition: top var(--transicion-rapida);
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--acento-oscuro);
  outline-offset: 2px;
}

/* Motivo gráfico de marca (manual pág. 5): rectángulo delineado con un círculo
   sólido en una esquina. Se usa como divisor de sección, con moderación.
   Ahora vive sobre el fondo oscuro de la página, así que usa el --acento crudo
   (sobre oscuro da ~11:1, se ve vívido) en vez de la variante --acento-oscuro
   pensada para fondo claro. */
.h2-motivo {
  position: relative;
  padding-top: var(--space-4);
  border-top: 1px solid var(--acento);
}

.h2-motivo::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acento);
}

/* =========================================================
   3. LAYOUT / CONTENEDOR
   ========================================================= */
.h2-header-inner,
.h2-footer-inner,
.h2-hero,
.h2-buscador-zona,
.h2-carrusel,
.h2-resultados,
.h2-acerca-inner {
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

#inicio,
#resultados,
#acerca {
  scroll-margin-top: 84px;
}

.h2-main {
  display: block;
}

/* =========================================================
   4. HEADER + NAV
   ========================================================= */
.h2-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fondo-oscuro);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.h2-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 72px;
}

.h2-logo img {
  height: 52px;
  width: auto;
  /* El PNG del logo está pensado para fondo claro; con el header ahora oscuro
     se invierte a blanco con el mismo truco que .h2-logo-blanco en el footer. */
  filter: brightness(0) invert(1);
}

.h2-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.h2-nav a {
  color: var(--texto-secundario-invertido);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.h2-nav a:hover,
.h2-nav a:focus-visible {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

.h2-nav-externo {
  color: var(--acento) !important;
}

.h2-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radio-sm);
  background: transparent;
}

.h2-menu-toggle span {
  display: block;
  height: 2px;
  margin-inline: 8px;
  background: var(--acento);
  transition: transform var(--transicion-rapida), opacity var(--transicion-rapida);
}

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

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

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

@media (max-width: 899px) {
  .h2-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--panel-oscuro);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--sombra-hover);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }

  .h2-nav.is-abierto {
    display: flex;
  }

  .h2-nav a {
    width: 100%;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (min-width: 900px) {
  .h2-nav {
    display: flex;
  }

  .h2-menu-toggle {
    display: none;
  }
}

/* =========================================================
   5. HERO
   ========================================================= */
.h2-hero {
  /* Fondo oscuro de ancho completo aunque el elemento mismo esté acotado a
     --contenedor-max: el box-shadow con spread gigante pinta fuera de la caja
     sin alterar su layout, y el clip-path evita que ese spread cree scroll
     horizontal. Header + hero + footer forman el "bookend" oscuro del sitio;
     el resto del contenido (buscador, carruseles, grilla) queda claro para
     que las 51 tarjetas/logos —pensados para fondo blanco— sigan legibles. */
  background: var(--fondo-oscuro);
  box-shadow: 0 0 0 100vmax var(--fondo-oscuro);
  clip-path: inset(0 -100vmax);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  text-align: center;
}

.h2-hero-eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--acento);
  margin-bottom: var(--space-3);
}

.h2-hero-titulo {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--texto-invertido);
  margin-bottom: var(--space-3);
  line-height: 1.15;
}

.h2-hero-subtitulo {
  font-size: var(--fs-body);
  color: var(--texto-secundario-invertido);
  max-width: 640px;
  margin-inline: auto;
}

/* =========================================================
   6. BUSCADOR + FILTROS
   ========================================================= */
.h2-buscador-zona {
  padding-bottom: var(--space-6);
  text-align: center;
}

.h2-buscador {
  position: relative;
  max-width: 780px;
  margin: 0 auto var(--space-4);
}

.h2-buscador .h2-icono {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--h2-gris-suave);
  pointer-events: none;
}

.h2-buscador input {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-4) 0 48px;
  border: 1px solid var(--h2-gris-borde);
  border-radius: var(--radio);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--h2-texto);
  background: #fff;
  box-shadow: var(--sombra-suave);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.h2-buscador input:focus {
  border-color: var(--acento-oscuro);
  box-shadow: 0 0 0 3px var(--acento-wash);
}

.h2-filtros-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.h2-chips-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

@media (max-width: 899px) {
  .h2-filtros-fila {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  .h2-chips-fila {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
    text-align: left;
  }

  .h2-chips-fila::-webkit-scrollbar {
    display: none;
  }
}

.h2-chip {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radio-pill);
  border: 1px solid var(--h2-gris-borde);
  background: #fff;
  color: var(--h2-gris);
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.h2-chip:hover {
  border-color: var(--acento-oscuro);
  color: var(--acento-texto);
}

.h2-chip.is-activo {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--fondo-oscuro);
}

.h2-filtros-secundarios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}

.filter-field label {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--h2-gris);
}

.filter-field select {
  padding: 9px 14px;
  border: 1px solid var(--h2-gris-borde);
  border-radius: var(--radio-pill);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--h2-gris);
  background: #fff;
  min-width: 180px;
}

/* =========================================================
   7. ENCABEZADO DE SECCIÓN (compartido: carruseles + resultados)
   ========================================================= */
.h2-seccion-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.h2-seccion-encabezado h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--acento);
  margin-bottom: var(--space-1);
}

.h2-seccion-encabezado p {
  font-size: var(--fs-small);
  color: var(--texto-secundario-invertido);
  max-width: 560px;
}

.h2-ver-todas {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--acento);
  font-weight: 700;
  font-size: var(--fs-small);
  padding: var(--space-2) 0;
  white-space: nowrap;
}

.h2-ver-todas:hover {
  text-decoration: underline;
}

/* =========================================================
   8. CARRUSEL
   ========================================================= */
.h2-carrusel {
  padding-block: var(--space-6);
}

.h2-carrusel-cuerpo {
  position: relative;
}

.h2-carrusel-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: var(--space-1) 2px var(--space-2);
}

.h2-carrusel-track::-webkit-scrollbar {
  display: none;
}

.h2-carrusel-track > li {
  flex: 0 0 auto;
  width: clamp(230px, 26vw, 280px);
}

.h2-carrusel-track > li[data-clon="true"] {
  pointer-events: none;
}

.h2-carrusel-flecha {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--acento-oscuro);
  background: #fff;
  color: var(--acento-oscuro);
  box-shadow: var(--sombra-suave);
  z-index: 2;
  transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.h2-carrusel-flecha:hover {
  background: var(--acento);
  color: var(--fondo-oscuro);
}

.h2-carrusel-flecha--prev {
  left: 4px;
}

.h2-carrusel-flecha--next {
  right: 4px;
}

.h2-carrusel-flecha[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 900px) {
  .h2-carrusel-flecha {
    display: flex;
  }

  .h2-carrusel-track {
    padding-inline: 54px;
  }
}

/* =========================================================
   9. TARJETA DE EMPRESA (componente compartido)
   ========================================================= */
.tarjeta-empresa {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--h2-gris-borde);
  border-radius: var(--radio);
  padding: var(--space-4);
  box-shadow: var(--sombra-suave);
  cursor: pointer;
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), border-color var(--transicion-rapida);
}

.tarjeta-empresa:hover,
.tarjeta-empresa:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: var(--acento-oscuro);
}

.tarjeta-logo {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.tarjeta-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nombre-empresa {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--h2-texto);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.tarjeta-tipo-oferta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--h2-gris);
  margin-bottom: var(--space-2);
}

.tarjeta-tipo-oferta .punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento-oscuro);
  flex: 0 0 auto;
}

.tarjeta-tipo-oferta[data-tipo="Servicio"] .punto {
  background: var(--h2-verde);
}

.tarjeta-tipo-oferta[data-tipo="Producto"] .punto {
  background: var(--h2-naranja);
}

.tarjeta-categorias {
  font-size: var(--fs-label);
  color: var(--h2-gris-suave);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.tarjeta-ver-perfil {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--acento-texto);
}

.tarjeta-ver-perfil .flecha {
  transition: transform var(--transicion-rapida);
}

.tarjeta-empresa:hover .tarjeta-ver-perfil .flecha,
.tarjeta-empresa:focus-visible .tarjeta-ver-perfil .flecha {
  transform: translateX(3px);
}

/* =========================================================
   10. GRILLA DE RESULTADOS
   ========================================================= */
.h2-resultados {
  padding-block: var(--space-8) var(--space-7);
}

.h2-resultados-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.resultado-contador {
  font-size: var(--fs-small);
  color: var(--texto-secundario-invertido);
}

#limpiar-filtros {
  border: none;
  background: none;
  color: var(--texto-secundario-invertido);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: underline;
  padding: var(--space-1) 0;
}

#limpiar-filtros:hover {
  color: var(--acento);
}

.grilla-empresas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 280px));
  justify-content: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sin-resultados {
  text-align: center;
  color: var(--texto-secundario-invertido);
  padding: var(--space-6) 0;
}

@media (max-width: 640px) {
  .grilla-empresas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   11. ACERCA
   ========================================================= */
.h2-acerca {
  /* --panel-oscuro es apenas más claro que el fondo de página (--fondo-oscuro),
     el mismo rol de "fondo de tarjetas/paneles" sugerido en la paleta —
     alcanza para diferenciar la sección sin salir del tema oscuro. */
  background: var(--panel-oscuro);
}

.h2-acerca-inner {
  padding-block: var(--space-7);
  max-width: 760px;
  text-align: center;
}

.h2-acerca-inner h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--acento);
  margin-bottom: var(--space-3);
}

.h2-acerca-inner p {
  color: var(--texto-secundario-invertido);
}

.h2-acerca-inner.h2-motivo {
  border-top: none;
}

.h2-acerca-inner.h2-motivo::after {
  display: none;
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.h2-footer {
  background: var(--fondo-oscuro);
  color: #fff;
}

.h2-footer-inner {
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.h2-footer-marca {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.h2-logo-blanco {
  height: 34px;
  width: auto;
  /* Deriva una versión blanca del logo desde el PNG a color: el PNG tiene fondo
     transparente y sin píxeles casi-blancos, así que brightness(0) colapsa los
     píxeles opacos a negro (preservando la silueta/alfa) e invert(1) los pasa a blanco. */
  filter: brightness(0) invert(1);
}

.h2-footer-marca p {
  font-size: var(--fs-small);
  opacity: 0.9;
}

.h2-footer-enlaces {
  display: flex;
  gap: var(--space-5);
}

.h2-footer-enlaces a {
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 700;
}

.h2-footer-enlaces a:hover {
  opacity: 1;
  color: var(--acento);
  text-decoration: underline;
}

.h2-footer-copyright {
  font-size: var(--fs-label);
  opacity: 0.75;
  width: 100%;
}

@media (min-width: 641px) {
  .h2-footer-copyright {
    width: auto;
  }
}

/* =========================================================
   13. CHIPS GENÉRICOS (modal: Áreas / Capacidades)
   ========================================================= */
.h2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.h2-chips li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radio-pill);
  background: var(--acento-wash);
  color: var(--acento-texto);
  font-size: var(--fs-label);
  font-weight: 700;
}

/* =========================================================
   14. BOTONES
   ========================================================= */
.h2-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 20px;
  border-radius: var(--radio-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.h2-boton--primario {
  background: var(--acento);
  color: var(--fondo-oscuro);
}

/* --acento-oscuro solo pasa ~3.6:1 (umbral de borde/ícono), no los 4.5:1 que
   necesita un texto — por eso el botón primario mantiene texto oscuro incluso
   en :hover en vez de saltar a blanco. */
.h2-boton--primario:hover {
  background: var(--acento-oscuro);
  color: var(--fondo-oscuro);
}

.h2-boton--secundario {
  background: #fff;
  border-color: var(--h2-verde);
  color: var(--acento-texto);
}

.h2-boton--secundario:hover {
  background: var(--h2-verde-wash);
}

/* =========================================================
   15. MODAL
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 44, 44, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 200;
}

.modal-overlay[hidden] {
  display: none;
}

body.h2-bloqueo-scroll {
  overflow: hidden;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 1160px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radio);
  padding: var(--space-6);
  box-shadow: var(--sombra-hover);
}

.modal-cerrar {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border: 1px solid var(--h2-gris-borde);
  border-radius: 50%;
  background: #fff;
  color: var(--h2-gris);
  font-size: 1.25rem;
  line-height: 1;
}

.modal-cerrar:hover {
  border-color: var(--acento-oscuro);
  color: var(--acento-oscuro);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-right: 48px;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--h2-gris-borde);
}

.modal-header img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  flex: 0 0 auto;
}

.modal-header .h2-chips {
  flex: 1 1 auto;
  align-self: center;
}

.modal-seccion-principal {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--h2-gris-borde);
}

.modal-seccion-principal:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.modal-titulo-seccion {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--acento-texto);
  margin-bottom: var(--space-4);
}

.modal-seccion {
  margin-top: var(--space-5);
}

.modal-seccion:first-child {
  margin-top: 0;
}

.modal-contacto-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

@media (min-width: 641px) {
  .modal-contacto-columnas {
    grid-template-columns: 1fr 1fr;
  }
}

.modal-contacto-bloque .modal-contacto {
  margin-bottom: var(--space-3);
}

.modal-contacto-bloque .modal-contacto a,
.modal-contacto-bloque .modal-contacto li {
  overflow-wrap: anywhere;
}

#modal-descripcion {
  color: var(--h2-texto);
  white-space: pre-line;
}

.modal-fila-superior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.modal-columna {
  min-width: 0;
}

@media (min-width: 641px) {
  .modal-fila-superior {
    grid-template-columns: 1fr 1fr;
  }

  .modal-columna + .modal-columna {
    padding-left: var(--space-6);
    border-left: 1px solid var(--h2-gris-borde);
  }
}

.modal-seccion-destacada {
  background: var(--acento-wash);
  border-radius: var(--radio);
  padding: var(--space-5);
}

.modal-seccion-destacada .modal-titulo-seccion {
  font-size: var(--fs-h3);
}

.h2-proyectos-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.h2-proyectos-lista li {
  border: 1px solid var(--h2-gris-borde);
  border-radius: var(--radio);
  padding: var(--space-4);
}

.h2-proyecto-nombre {
  font-weight: 700;
  color: var(--h2-texto);
  margin-bottom: var(--space-1);
}

.h2-proyecto-ubicacion {
  font-size: var(--fs-label);
  color: var(--h2-gris-suave);
  margin-bottom: var(--space-2);
}

.h2-proyecto-descripcion {
  font-size: var(--fs-small);
  color: var(--h2-gris);
  white-space: pre-line;
}

.h2-proyecto-enlace {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--acento-texto);
}

.h2-proyecto-item--con-imagen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.h2-proyecto-item--con-imagen .h2-proyecto-texto {
  flex: 1 1 240px;
  min-width: 0;
}

.h2-proyecto-imagen {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
}

.h2-proyecto-imagen-boton {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--h2-gris-borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--h2-gris-fondo);
}

.h2-proyecto-imagen-boton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transicion-rapida);
}

.h2-proyecto-imagen-boton:hover img {
  transform: scale(1.05);
}

.h2-proyecto-imagen-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--h2-texto);
}

.h2-proyecto-imagen-flecha:hover {
  background: #fff;
  color: var(--acento-oscuro);
}

.h2-proyecto-imagen-flecha--prev {
  left: var(--space-2);
}

.h2-proyecto-imagen-flecha--next {
  right: var(--space-2);
}

@media (max-width: 640px) {
  .h2-proyecto-item--con-imagen {
    flex-direction: column;
    align-items: stretch;
  }

  .h2-proyecto-imagen {
    width: 100%;
    max-width: 360px;
  }
}

.h2-vacio {
  color: var(--h2-gris-suave);
  font-size: var(--fs-small);
}

.h2-galeria-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.h2-galeria-item {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--h2-gris-borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--h2-gris-fondo);
}

.h2-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transicion-rapida);
}

.h2-galeria-item:hover img,
.h2-galeria-item:focus-visible img {
  transform: scale(1.05);
}

/* =========================================================
   15b. LIGHTBOX (galería del modal)
   ========================================================= */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 21, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  z-index: 300;
  overflow-y: auto;
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-cerrar {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--h2-texto);
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--h2-texto);
}

.lightbox-flecha:hover {
  background: var(--acento-wash);
  color: var(--acento-oscuro);
}

.lightbox-flecha--prev {
  left: var(--space-4);
}

.lightbox-flecha--next {
  right: var(--space-4);
}

.lightbox-flecha[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .lightbox-flecha {
    width: 36px;
    height: 36px;
  }

  .lightbox-flecha--prev {
    left: var(--space-2);
  }

  .lightbox-flecha--next {
    right: var(--space-2);
  }
}

.lightbox-figura {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  text-align: center;
}

.lightbox-figura img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radio-sm);
  margin-inline: auto;
}

.lightbox-figura figcaption {
  color: #fff;
  font-size: var(--fs-small);
  margin-top: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
}

.lightbox-figura figcaption:empty {
  display: none;
}

.lightbox-caption-titulo {
  color: #fff;
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.lightbox-caption-texto {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: left;
}

.modal-contacto {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-4);
}

.modal-contacto li {
  padding: var(--space-1) 0;
  color: var(--h2-texto);
}

.modal-contacto a {
  color: var(--acento-texto);
  text-decoration: none;
}

.modal-contacto a:hover {
  text-decoration: underline;
}

.h2-boton[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
  }

  .modal {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}

/* =========================================================
   16. ATLAS (demo de dashboard embebido)
   ========================================================= */
.h2-atlas-hero {
  /* Mismo bookend oscuro que .h2-hero — Atlas es justamente la página del
     dashboard embebido, así que la transición de header→hero→embed queda
     continua en el mismo tono oscuro. */
  background: var(--fondo-oscuro);
  box-shadow: 0 0 0 100vmax var(--fondo-oscuro);
  clip-path: inset(0 -100vmax);
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  text-align: center;
}

.h2-atlas-zona {
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
}

.h2-atlas-embed {
  max-width: 1100px;
  margin-inline: auto;
  aspect-ratio: 1024 / 1060;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-hover);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.h2-atlas-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.h2-atlas-aviso {
  max-width: 780px;
  margin: 0 auto var(--space-5);
  text-align: center;
  color: var(--texto-secundario-invertido);
  font-size: var(--fs-small);
}