/* Global styles — castegui-v2 */

/* ─── Fuente: Helvetica Neue, self-hosted ────────────────────── */
/* Caras estáticas subseteadas al rango latin (cubre el español completo,
   acentos en mayúsculas incluidos). No existe cara 600: el algoritmo de
   font-matching del navegador resuelve 600 → 700 (Bold). Sin itálicas:
   el sitio no usa font-style: italic. Los tres pesos se precargan en
   head.php. Fuentes origen en Downloads/cv2-dudas/fuente. */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/helvetica-neue-roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/helvetica-neue-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/helvetica-neue-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Fuente de marca: Helvetica for Target (solo logo navbar) ── */
/* Enviada por el cliente (ago 2026) exclusivamente para el lockup
   CASTEGUI | HEALTHCARE ARCHITECTS. Solo caras 400 y 700, subseteadas
   a latin. Origen en Downloads/CCCZ/castegui-site/. Licencia por
   cuenta del cliente (pack de cufonfonts, sin licencia web). */
@font-face {
  font-family: 'Helvetica for Target';
  src: url('../fonts/helvetica-for-target.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica for Target';
  src: url('../fonts/helvetica-for-target-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --accent:           #ffffff;   /* énfasis: CTA, activos, bordes, links */
  --accent-hover:     #d8d8d8;   /* hover de superficies blancas (botones) */
  --accent-subtle:    rgba(255, 255, 255, .30); /* blanco semitransparente (bordes, glows) */
  --gray:             #6a6b6f;   /* textos secundarios */
  --white:            #ffffff;
  --bg-primary:       #060606;   /* fondo principal oscuro */
  --bg-alt:           #0d0d0d;   /* fondo alterno (secciones pares) */
  --bg-surface:       #0a0a0a;   /* tarjetas y paneles oscuros */
  --bg-surface-hover: #0e0e0e;   /* hover de tarjetas oscuras */
  --bg-card:          #2b2b2b;   /* tarjetas de proyectos */
  --bg-mid:           #454545;   /* banda media — stats, contact-cta */
  --bg-secondary:     #e2e0e1;   /* fondo claro */
  --text-base:        #fcfcfc;   /* texto principal sobre fondo oscuro */
  --text-muted:       #6a6b6f;
  --scrollbar-thumb:  #333;
  --input-bg:         rgba(255, 255, 255, .10);  /* fondo input sobre oscuro */
  --input-bg-focus:   rgba(255, 255, 255, .16);  /* fondo input focus */
  --input-border:     rgba(255, 255, 255, .18);  /* borde input sobre oscuro */

  /* 'Helvetica Neue' = webfont self-hosted (@font-face arriba); el resto es fallback */
  --font-stack:     'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-headings:  var(--font-stack);
  --font-body:      var(--font-stack);
  /* Fuente de marca: SOLO para el lockup del navbar (petición del cliente) */
  --font-brand:     'Helvetica for Target', var(--font-stack);
  --font-size-base: 1rem;
  --line-height:    1.6;

  --transition: .2s ease;

  /* Alinea los componentes de Bootstrap con la tipografía del sitio */
  --bs-body-font-family: var(--font-stack);
}

/* ─── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-base);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -3px;
  color: var(--text-base);
  text-transform: uppercase;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem,  3vw, 2rem);    }
h3 { font-size: clamp(1.2rem,  2.5vw, 1.5rem);}

/* h1 y h2 usan la fuente de marca (petición del cliente, ago 2026).
   OJO: Helvetica for Target solo tiene caras 400 y 700 — el peso 500
   de los h2 resuelve a Regular (400), un punto más ligero que el
   Medium de Helvetica Neue que usan h3–h6. */
h1, h2 {
  font-family: var(--font-brand);
}

p {
  margin-bottom: 1rem;
  max-width: 70ch;
  color: var(--text-base);
}

/* ─── Links ──────────────────────────────────────────────────── */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ─── Focus Accessibility ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* ─── Bootstrap: Botones ─────────────────────────────────────── */
.btn {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 0;
  transition: all var(--transition);
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn .bi-arrow-right {
  display: inline-block;
  transition: transform var(--transition);
}

.btn:hover .bi-arrow-right {
  transform: translateX(5px);
}

/* ─── Liquid glass ─────────────────────────────────────────────
   Vidrio esmerilado translúcido (esquinas cuadradas según CLAUDE.md).
   El destello recorre por DETRÁS del texto (::before z-index:-1 +
   isolation), por lo que el texto queda siempre nítido. */
.btn-primary,
.btn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: .65rem 1.65rem;
  color: var(--white);
  background-color: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 8px rgba(255, 255, 255, .05),
    0 8px 24px rgba(0, 0, 0, .28);
}

.btn-primary::before,
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.btn-primary:hover,
.btn-cta:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, .20);
  border-color: rgba(255, 255, 255, .50);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 12px 32px rgba(0, 0, 0, .38);
}

.btn-primary:hover::before,
.btn-cta:hover::before {
  transform: translateX(130%);
}

.btn-primary:active,
.btn-cta:active {
  transform: translateY(0);
}

.btn-primary:focus-visible,
.btn-cta:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    0 0 0 .2rem rgba(255, 255, 255, .35);
}

/* Variante outline en cristal (más transparente) */
.btn-outline-primary {
  color: var(--white);
  background-color: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn-outline-primary:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .50);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-cta { transition: background-color var(--transition), border-color var(--transition); }
  .btn-primary:hover,
  .btn-cta:hover { transform: none; }
  .btn-primary::before,
  .btn-cta::before { display: none; }
}

/* ─── Bootstrap: Navbar ──────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 300;
  background-color: transparent !important;
  border-bottom: 1px solid transparent;
  padding-top: .875rem;
  padding-bottom: .875rem;
  transition: background-color .35s ease, border-color .35s ease;
}

.navbar--scrolled {
  background-color: var(--bg-primary) !important;
  border-bottom-color: rgba(255,255,255,.06);
}

/* Logo */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: 0;
  line-height: 0;
  text-decoration: none;
  transition: opacity var(--transition);
}

/* Wordmark en Helvetica for Target con tracking "muy estrecho" y un punto
   más grande, según el PPT del cliente (cambios-cast.pptx, diapos 1 y 3;
   referencias: Foster+Partners, rdlp, Fraterna). */
.navbar-brand__name {
  font-family: var(--font-brand);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--text-base);
  white-space: nowrap;
}

/* MR alineado al top de la línea (se anula el top -.5em del reboot) */
.navbar-brand__mr {
  font-size: .30em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: top;
  top: 0;
}

.navbar-brand__divider {
  display: block;
  flex: 0 0 2px;
  width: 2px;
  height: 1.5rem;
  background-color: var(--white);
}

/* En Title Case ("Healthcare Architects"), no en mayúsculas: petición
   del cliente — el markup ya trae la capitalización correcta. */
.navbar-brand__tagline {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--text-base);
  white-space: nowrap;
}

/* La regla global a:hover mete underline; aquí se anula en todos los
   estados, incluido el texto de la tagline dentro del enlace. */
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active,
.navbar-brand:visited {
  text-decoration: none;
}

.navbar-brand:hover .navbar-brand__tagline,
.navbar-brand:focus .navbar-brand__tagline,
.navbar-brand:active .navbar-brand__tagline {
  text-decoration: none;
}

.navbar-brand:hover {
  opacity: .72;
}

/* ─── Lockup de marca: solo se muestra donde realmente cabe ───
   Con Helvetica for Target el wordmark creció a 2.5rem pero el tracking
   -.045em lo compensa (~160px); la tagline a 1.1rem con tracking .02em
   ronda ~235px → lockup ~430px, prácticamente igual al medido con
   Helvetica Neue (~432px). Los breakpoints (650px / 1500px) vienen del
   logo gráfico de 240px (527px de lockup), así que siguen siendo
   válidos y conservadores. Fuera de esos rangos se deja solo el
   wordmark, que nunca choca. */
.navbar-brand__divider,
.navbar-brand__tagline {
  display: none;
}

/* Menú hamburguesa: a partir de 650px sobra espacio */
@media (min-width: 650px) and (max-width: 991.98px) {
  .navbar-brand__divider,
  .navbar-brand__tagline { display: block; }
}

/* Justo en el límite quedan 31px de aire: se baja un punto la tagline */
@media (min-width: 650px) and (max-width: 767.98px) {
  .navbar-brand__tagline { font-size: .875rem; }
}

/* Nav completo: el lockup entero solo cabe a partir de 1500px */
@media (min-width: 1500px) {
  .navbar-brand__divider,
  .navbar-brand__tagline { display: block; }
}

@media (max-width: 575.98px) {
  .navbar-brand__name { font-size: 1.75rem; }
}

/* ─── Nav completo entre 992 y 1199px ─────────────────────────
   Bootstrap despliega el nav en 992px, pero ahí el wordmark a 2.2rem
   (225px) más el nav (≈750px) desbordan el ancho disponible: medido en
   navegador, a 992px el gap era 0. Se compacta el nav, el padding y el
   wordmark (1.75rem ≈ 179px → ~46px de aire) en ese tramo; desde
   1200px vuelven los valores normales. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar > .container-fluid {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .navbar-brand__name { font-size: 1.75rem; }

  .nav-link {
    padding: .5rem .5rem !important;
    letter-spacing: .07em;
  }

  .nav-link::after {
    left: .5rem;
    right: .5rem;
  }

  .navbar-social {
    margin-left: 0 !important;
    padding-left: .5rem;
    gap: .5rem;
  }
}

/* Nav links */
.nav-link {
  font-family: var(--font-headings);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, .72) !important;
  padding: .5rem .85rem !important;
  position: relative;
  transition: color var(--transition);
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: .85rem;
  right: .85rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav-link:hover {
  color: var(--text-base) !important;
  text-decoration: none;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--text-base) !important;
}

/* ─── Navbar: iconos sociales desktop ───────────────────────── */
.navbar-social {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 1rem;
}

.navbar-social__link {
  color: rgba(252, 252, 252, .5);
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition);
}

.navbar-social__link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ─── Megamenú de Proyectos (solo desktop) ───────────────────── */
@media (min-width: 992px) {
  #navMain { position: relative; }   /* ancla del panel */

  .megamenu {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(720px, calc(100vw - 3rem));
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 350;
  }

  /* puente invisible: evita que el hover se corte en el hueco navbar→panel */
  .megamenu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }

  .has-megamenu:hover .megamenu,
  .has-megamenu:focus-within .megamenu,
  .megamenu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .megamenu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
  }

  .megamenu__card {
    position: relative;
    display: block;
    height: 104px;
    overflow: hidden;
    background-image: var(--mm-img);
    background-size: cover;
    background-position: center;
    text-decoration: none;
  }

  .megamenu__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 6, 6, .92), rgba(6, 6, 6, .22) 60%, rgba(6, 6, 6, .36));
    transition: background .25s ease;
  }

  .megamenu__card:hover::after {
    background: linear-gradient(to top, rgba(6, 6, 6, .95), rgba(6, 6, 6, .38) 60%, rgba(6, 6, 6, .48));
  }

  .megamenu__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: .55rem .65rem;
    display: flex;
    flex-direction: column;
  }

  .megamenu__name {
    font-family: var(--font-headings);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white);
    line-height: 1.15;
  }
}

@media (max-width: 991.98px) {
  .megamenu { display: none; }
}

/* ─── Custom mobile toggle ───────────────────────────────────── */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--text-base);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}

.nav-mobile-toggle:focus,
.nav-mobile-toggle:active,
.nav-mobile-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.nav-mobile-toggle:hover { color: var(--accent); }

@media (max-width: 991.98px) {
  .nav-mobile-toggle { display: flex; }
}

/* ─── Header: z-index y estado con overlay abierto ──────────── */
header {
  position: relative;
  z-index: 300;
}

header.nav-open .navbar,
.navbar--scrolled {
  background-color: var(--bg-primary) !important;
  border-bottom-color: rgba(255,255,255,.06);
}

/* ─── Mobile Overlay fullscreen ──────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .38s ease, visibility .38s ease;
}

.mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-overlay__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.mobile-overlay__link {
  font-family: var(--font-headings);
  font-size: clamp(1.3rem, 6vw, 2rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(252, 252, 252, .6);
  text-decoration: none;
  display: block;
  padding: .5rem 0;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .42s ease, opacity .42s ease, color .18s ease;
}

/* Stagger de entrada (solo al abrir; al cerrar sin delay = cierre simultáneo) */
.mobile-overlay.is-open .mobile-overlay__link              { transform: translateY(0); opacity: 1; }
.mobile-overlay.is-open .mobile-overlay__list li:nth-child(1) .mobile-overlay__link { transition-delay: .07s; }
.mobile-overlay.is-open .mobile-overlay__list li:nth-child(2) .mobile-overlay__link { transition-delay: .13s; }
.mobile-overlay.is-open .mobile-overlay__list li:nth-child(3) .mobile-overlay__link { transition-delay: .19s; }
.mobile-overlay.is-open .mobile-overlay__list li:nth-child(4) .mobile-overlay__link { transition-delay: .25s; }
.mobile-overlay.is-open .mobile-overlay__list li:nth-child(5) .mobile-overlay__link { transition-delay: .31s; }

.mobile-overlay__link:hover,
.mobile-overlay__link.is-active {
  color: var(--accent);
  text-decoration: none;
}

.mobile-overlay__social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  opacity: 0;
  transition: opacity .42s ease .35s;
}

.mobile-overlay.is-open .mobile-overlay__social {
  opacity: 1;
}

.mobile-overlay__social-link {
  color: rgba(252, 252, 252, .45);
  font-size: 1.2rem;
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1;
}

.mobile-overlay__social-link:hover {
  color: var(--accent);
  text-decoration: none;
}

@media (min-width: 992px) {
  .mobile-overlay { display: none !important; }
}

/* ─── Hero: scroll chevron ───────────────────────────────────── */
.hero-scroll-btn {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: transparent;
  border: none;
  outline: none;
  padding: .5rem;
  cursor: pointer;
  color: rgba(252,252,252,.55);
  font-size: 1.6rem;
  line-height: 1;
  transition: color var(--transition);
  animation: heroChevron 1.6s ease-in-out infinite;
}

.hero-scroll-btn:hover {
  color: var(--accent);
}

.hero-scroll-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@keyframes heroChevron {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: .55; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1;   }
}

/* ─── Entrada de títulos de banner (fade + subida escalonada) ─── */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-rise > * {
  animation: heroRise .85s cubic-bezier(.22, .61, .36, 1) both;
}

.hero-rise > *:nth-child(1) { animation-delay: .12s; }
.hero-rise > *:nth-child(2) { animation-delay: .26s; }
.hero-rise > *:nth-child(3) { animation-delay: .40s; }
.hero-rise > *:nth-child(4) { animation-delay: .54s; }
.hero-rise > *:nth-child(5) { animation-delay: .68s; }

@media (prefers-reduced-motion: reduce) {
  .hero-rise > * { animation: none; opacity: 1; transform: none; }
}

/* ─── Contact CTA (componente compartido) ───────────────────── */
.contact-cta {
  padding: 5rem 0;
  background-color: var(--bg-mid);
  border-top: none;
}

@media (min-width: 992px) {
  .contact-cta { padding: 7rem 0; }
}

/* Inputs */
.cta-input {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0;
  color: var(--text-base);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: .75rem 1rem;
  transition: border-color var(--transition), background-color var(--transition);
}

.cta-input::placeholder {
  color: rgba(252,252,252,.38);
}

.cta-input:focus {
  background-color: var(--input-bg-focus);
  border-color: var(--accent);
  box-shadow: none;
  color: var(--text-base);
  outline: none;
}

/* Info lateral */
.contact-cta__info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 992px) {
  .contact-cta__info { padding-top: 5rem; }
}

.contact-cta__office {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
}

.contact-cta__city {
  font-family: var(--font-headings);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
}

.contact-cta__phone {
  font-family: var(--font-headings);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-base);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color var(--transition);
}

.contact-cta__phone:hover {
  color: var(--accent);
  text-decoration: none;
}

.contact-cta__email {
  font-family: var(--font-body);
  font-size: .9rem;
  color: rgba(252,252,252,.55);
  text-decoration: none;
  transition: color var(--transition);
  letter-spacing: .02em;
}

.contact-cta__email:hover {
  color: var(--accent);
  text-decoration: none;
}

.contact-cta__social {
  display: flex;
  gap: 1.25rem;
  padding-top: .5rem;
}

.contact-cta__social-link {
  color: rgba(252,252,252,.35);
  font-size: 1.15rem;
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1;
}

.contact-cta__social-link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ─── Bootstrap: Footer ──────────────────────────────────────── */
footer {
  background-color: var(--bg-primary) !important;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--gray) !important;
}

footer p {
  color: var(--gray) !important;
}

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 7px; }
::-webkit-scrollbar-track  { background: var(--bg-primary); }
::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── Utilities ──────────────────────────────────────────────── */
.section-label {
  font-size: .8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray);
}

.bg-section-primary   { background-color: var(--bg-primary); }
.bg-section-secondary { background-color: var(--bg-secondary); }

.text-accent { color: var(--accent) !important; }
.text-gray   { color: var(--gray) !important; }

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

/* ─── Lightbox (popup de galería — componente compartido) ──────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 6, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure {
  margin: 0;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .12);
}

.lightbox__caption {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-headings);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.lightbox__counter { color: var(--white); font-weight: 600; }
.lightbox__alt { color: var(--gray); }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 0;
  color: var(--white);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    0 8px 24px rgba(0, 0, 0, .28);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .50);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 10px 28px rgba(0, 0, 0, .35);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__nav   { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }

@media (max-width: 575.98px) {
  .lightbox__nav { width: 2.4rem; height: 2.4rem; }
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
  .lightbox__close { top: .75rem; right: .75rem; }
}

/* ─── Touch targets mínimos (UX móvil — 44x44) ─────────────────── */
.nav-mobile-toggle { min-width: 44px; min-height: 44px; }

.mobile-overlay__social-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Reveal on scroll (entrada sutil de elementos) ────────────── */
.reveal,
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible,
.reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Escalonado de los hijos de un grupo */
.reveal-group.is-visible > *:nth-child(2)  { transition-delay: .06s; }
.reveal-group.is-visible > *:nth-child(3)  { transition-delay: .12s; }
.reveal-group.is-visible > *:nth-child(4)  { transition-delay: .18s; }
.reveal-group.is-visible > *:nth-child(5)  { transition-delay: .24s; }
.reveal-group.is-visible > *:nth-child(6)  { transition-delay: .30s; }
.reveal-group.is-visible > *:nth-child(7)  { transition-delay: .36s; }
.reveal-group.is-visible > *:nth-child(8)  { transition-delay: .42s; }
.reveal-group.is-visible > *:nth-child(n+9){ transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Alianzas y certificaciones (componente compartido) ──────── */
/* Usado por Inversionistas y Servicios vía views/components/alianzas.php */
.alianzas {
  padding: 5rem 0;
  background-color: var(--bg-alt);
}

@media (min-width: 992px) {
  .alianzas { padding: 7rem 0; }
}

/* Logos con alpha directamente sobre la sección oscura (petición del
   cliente). nom.webp va recoloreado a blanco: su tinta original es
   negra y desaparecería. Originales en /img/alianzas/_src-panel-blanco. */
.alianza-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: .75rem;
  transition: transform var(--transition);
}

.alianza-item:hover {
  transform: translateY(-4px);
}

/* El .webp ya trae el logo centrado con su propio aire dentro del lienzo */
.alianza-item__logo {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: auto;
}

/* ─── Desktop: lista estática (Splide sin montar) ─────────────── */
/* splide-core.min.css oculta .splide con visibility:hidden hasta .is-active */
#alianzasSlider:not(.is-active) { visibility: visible; }

#alianzasSlider:not(.is-active) .splide__track { overflow: visible; }

#alianzasSlider:not(.is-active) .splide__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: none !important;
}

#alianzasSlider:not(.is-active) .splide__slide {
  flex: 0 0 calc(100% / 6);
  width: auto;
  padding: .4rem;
}

@media (max-width: 991.98px) {
  #alianzasSlider:not(.is-active) .splide__slide { flex: 0 0 calc(100% / 3); }
}

/* ─── Mobile: Splide activo — solo bullets ────────────────────── */
/* Acotado al slider de alianzas para no pisar la galería de proyecto */
#alianzasSlider .splide__pagination {
  bottom: -2.25rem;
  gap: .4rem;
}

#alianzasSlider .splide__pagination__page {
  background-color: rgba(255, 255, 255, .2);
  border-radius: 0;
  width: 22px;
  height: 2px;
  border: none;
  margin: 0;
  opacity: 1;
  transform: none !important;
  transition: background-color .25s ease;
  display: block;
}

#alianzasSlider .splide__pagination__page.is-active {
  background-color: var(--accent);
  transform: none !important;
}

#alianzasSlider.is-active { padding-bottom: 3rem; }

/* Con el slider montado el slide ocupa todo el ancho: se limita el item */
#alianzasSlider.is-active .alianza-item {
  max-width: 20rem;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .alianza-item,
  .alianza-item:hover { transform: none; }
}

/* ─── Volver arriba (global) ──────────────────────────────────── */
/* Cuadrado, como todo el sitio, con el mismo tratamiento de cristal
   que .btn-cta: fondo translúcido, blur saturado y brillo interior. */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 320;              /* por encima del navbar (300) */
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--white);
  font-size: 1.35rem;
  line-height: 1;
  background-color: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 0;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 8px rgba(255, 255, 255, .05),
    0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease,
              background-color var(--transition);
}

/* [hidden] lo saca del flujo hasta que el JS lo habilita */
.to-top[hidden] { display: none; }

.to-top.is-visible {
  opacity: 1;
  transform: none;
}

.to-top:hover {
  background-color: rgba(255, 255, 255, .22);
}

.to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .to-top {
    right: 2rem;
    bottom: 2rem;
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transform: none;
    transition: opacity .3s ease;
  }
}