/* ================================================================
   CACMQ – SHARED DESIGN SYSTEM  v2.0
   Incluir en TODAS las páginas del sitio
   ================================================================
   ÍNDICE
   1.  Variables & Tokens
   2.  Reset & Base
   3.  Accesibilidad
   4.  Spinner
   5.  Gov Strip (barra superior)
   6.  Navbar principal
   7.  Notice Bar
   8.  Page Header / Breadcrumb  ← páginas internas
   9.  Layout utilities
   10. Tipografía & Sección helpers
   11. Botones
   12. Cards genéricas
   13. Stats Band
   14. Pillar / Feature items
   15. Formularios
   16. Mapa
   17. Footer
   18. Back to Top
   19. Animaciones globales
   20. Responsive global
   ================================================================ */

/* ── 1. VARIABLES & TOKENS ── */
:root {
  /* Paleta principal */
  --navy:        #0d2b5e;
  --navy-dark:   #091e47;
  --navy-mid:    #163570;
  --blue:        #1a4a9c;
  --blue-light:  #2563c4;

  /* Dorado institucional */
  --gold:        #c8960c;
  --gold-light:  #e5ae20;
  --gold-pale:   #fdf4e0;

  /* Grises */
  --gray-50:     #f8f9fc;
  --gray-100:    #eef0f6;
  --gray-200:    #dde1ee;
  --gray-400:    #9ba4bc;
  --gray-500:    #6b7491;
  --gray-700:    #374162;

  /* Texto */
  --text:        #1a2240;
  --white:       #fff;

  /* Sombras */
  --shadow-sm:   0 1px 4px  rgba(13,43,94,.08);
  --shadow:      0 4px 16px rgba(13,43,94,.10);
  --shadow-lg:   0 8px 32px rgba(13,43,94,.15);
  --shadow-xl:   0 16px 48px rgba(13,43,94,.20);

  /* Forma */
  --radius:      8px;
  --radius-lg:   14px;

  /* Transición */
  --t:           .22s ease;
  --t-slow:      .4s ease;
}

/* ── 2. RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 15px;
  line-height: 1.6;
}
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }
button { font-family: inherit; }
address { font-style: normal; }

/* ── 3. ACCESIBILIDAD ── */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--gold); color: #000; font-weight: 700;
  padding: .5rem 1rem; border-radius: 0 0 8px 8px;
  z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 4. SPINNER ── */
#spinner {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(255,255,255,.97);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s, visibility .4s;
}
#spinner.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.spinner-logo { animation: spPulse 1.2s ease-in-out infinite; }
@keyframes spPulse {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%       { transform: scale(1.08); opacity: .7; }
}

/* ════════════════════════════════════════════
   5. GOV STRIP
   ════════════════════════════════════════════ */
.gov-strip {
  background: var(--navy-dark);
  padding: .3rem 0;
  border-bottom: 3px solid var(--gold);
  position: relative;
  z-index: 1100;
}
.gov-strip .wrap {
  display: flex; align-items: center;
  justify-content: center;
  flex-wrap: wrap; gap: .5rem;
}
.gov-badge { display: flex; align-items: center; gap: .6rem; }
.gov-badge svg { width: 22px; height: 22px; fill: var(--gold); flex-shrink: 0; }
.gov-badge span {
  color: rgba(255,255,255,.8); font-size: .72rem;
  letter-spacing: .8px; text-transform: uppercase; font-weight: 500;
}

/* Strip links */
.gov-strip-links {
  display: flex; gap: 1.5rem;
  flex-wrap: wrap; align-items: center;
}
.gov-strip-links > a {
  color: rgba(255,255,255,.65); font-size: .72rem;
  letter-spacing: .4px; transition: color var(--t);
}
.gov-strip-links > a:hover { color: var(--gold-light); }

/* Gov dropdowns */
.gov-drop { position: relative; display: inline-flex; align-items: center; }
.gov-drop-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.65); font-size: .72rem;
  letter-spacing: .4px; font-family: 'Inter', sans-serif;
  padding: 0; display: flex; align-items: center; gap: .3rem;
  transition: color var(--t);
}
.gov-drop-btn:hover { color: var(--gold-light); }
.gov-drop-panel {
  position: absolute; top: 100%; left: 0;
  background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 6px 6px;
  min-width: 155px; padding: .35rem 0;
  display: none; z-index: 1200;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.gov-drop:hover .gov-drop-panel,
.gov-drop:focus-within .gov-drop-panel { display: block; }
.gov-drop-panel a {
  display: block; color: rgba(255,255,255,.65);
  font-size: .72rem; padding: .38rem .9rem;
  letter-spacing: .3px; transition: background var(--t), color var(--t);
}
.gov-drop-panel a:hover {
  background: rgba(255,255,255,.07);
  color: var(--gold-light);
}

/* Social icons (strip) */
.social-row { display: flex; gap: .5rem; }
.social-row a {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  color: rgba(255,255,255,.7); font-size: .72rem;
  transition: background var(--t), color var(--t);
}
.social-row a:hover { background: var(--gold); color: #000; }

/* ════════════════════════════════════════════
   6. NAVBAR PRINCIPAL
   ════════════════════════════════════════════ */
.navbar {
  background: var(--navy);
  position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 2px 20px rgba(0,0,0,.28);
}
.nav-inner {
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-brand {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 0; flex-shrink: 0;
}
.nav-brand img { height: 44px; }
.brand-text {
  border-left: 2px solid rgba(255,255,255,.2);
  padding-left: .85rem;
}
.brand-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 1rem;
  color: #fff; letter-spacing: .3px; line-height: 1.1;
}
.brand-sub {
  font-size: .65rem; color: rgba(255,255,255,.5);
  letter-spacing: .8px; text-transform: uppercase;
  margin-top: .15rem;
}

/* Links */
.nav-links {
  display: flex; align-items: stretch;
  gap: 0; margin-left: auto;
}
.nav-links a,
.nav-drop > button {
  color: rgba(255,255,255,.82); font-size: .8rem;
  font-weight: 500; letter-spacing: .3px;
  padding: .9rem .9rem;
  border: none; background: none; cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
  display: flex; align-items: center; gap: .35rem;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover,
.nav-drop > button:hover,
.nav-links a.active {
  background: rgba(255,255,255,.07);
  color: #fff;
  border-bottom-color: var(--gold);
}

/* Dropdown */
.nav-drop { position: relative; display: flex; align-items: stretch; }
.dropdown-panel {
  position: absolute; top: 100%; left: 0;
  background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-xl);
  min-width: 215px; padding: .5rem;
  display: none;
  border-top: 3px solid var(--gold);
  z-index: 200;
}
.nav-drop:hover .dropdown-panel,
.nav-drop:focus-within .dropdown-panel { display: block; }
.dropdown-panel a {
  display: block; color: var(--gray-700);
  font-size: .8rem; padding: .5rem .9rem;
  border-radius: 5px;
  transition: background var(--t), color var(--t);
}
.dropdown-panel a:hover { background: var(--gray-50); color: var(--blue); }
.dropdown-panel .sep { height: 1px; background: var(--gray-100); margin: .3rem 0; }

/* CTA teléfono */
.nav-cta {
  margin-left: .75rem;
  background: var(--gold); color: var(--navy-dark);
  font-weight: 700; font-size: .78rem;
  padding: .55rem 1.25rem; border-radius: 4px;
  white-space: nowrap;
  transition: background var(--t);
  display: flex; align-items: center; gap: .4rem;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--gold-light); color: var(--navy-dark); }

/* ── MENÚ MÓVIL ── (añadir dentro de la sección 6, después de .nav-cta) */

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: background var(--t);
}
.nav-toggle:hover { background: rgba(255,255,255,.15); }
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  margin: 0 auto;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
/* Animación a X cuando está abierto */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay oscuro detrás del drawer */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1029;
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-overlay.open { opacity: 1; }

/* Drawer lateral */
.nav-drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 300px; max-width: 85vw;
  height: 100%;
  background: var(--navy-dark);
  z-index: 1031;
  overflow-y: auto;
  transition: right .3s ease;
  display: flex; flex-direction: column;
  padding-bottom: 2rem;
  border-left: 3px solid var(--gold);
}
.nav-drawer.open { right: 0; }

/* Cabecera del drawer */
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: var(--navy);
}
.drawer-head .brand-title { color: #fff; font-size: .95rem; }
.drawer-close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 1.2rem; cursor: pointer; padding: .25rem;
  transition: color var(--t);
}
.drawer-close:hover { color: var(--gold-light); }

/* Links del drawer */
.drawer-nav { padding: .75rem 0; flex: 1; }
.drawer-nav a,
.drawer-acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 500;
  padding: .75rem 1.5rem;
  border: none; background: none; width: 100%;
  text-align: left; cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: .2px;
  transition: background var(--t), color var(--t);
  border-left: 3px solid transparent;
}
.drawer-nav a:hover,
.drawer-acc-btn:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-left-color: var(--gold);
}
.drawer-nav a.active {
  color: var(--gold-light);
  border-left-color: var(--gold);
}

/* Acordeón de submenú */
.drawer-acc-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  background: rgba(0,0,0,.2);
}
.drawer-acc-panel.open { max-height: 500px; }
.drawer-acc-panel a {
  padding: .6rem 1.5rem .6rem 2.5rem;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
}
.drawer-acc-panel a:hover { color: #fff; }

/* Icono chevron del acordeón */
.drawer-acc-btn .acc-icon {
  font-size: .65rem; transition: transform .3s ease;
  color: rgba(255,255,255,.4);
}
.drawer-acc-btn.open .acc-icon { transform: rotate(180deg); }

/* Separador en el drawer */
.drawer-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: .5rem 1.5rem;
}

/* CTA dentro del drawer */
.drawer-cta {
  margin: 1rem 1.5rem 0;
  background: var(--gold); color: var(--navy-dark);
  font-weight: 700; font-size: .85rem;
  padding: .7rem 1rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background var(--t);
}
.drawer-cta:hover { background: var(--gold-light); color: var(--navy-dark); }

/* ── RESPONSIVE: mostrar hamburguesa ── */
@media (max-width: 768px) {
  .nav-toggle   { display: flex; }
  .nav-overlay  { display: block; pointer-events: none; }
  .nav-overlay.open { pointer-events: auto; }
}

/* Etiqueta de sección dentro del drawer */
.drawer-section-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  padding: .6rem 1.5rem .3rem;
}

/* ════════════════════════════════════════════
   7. NOTICE BAR
   ════════════════════════════════════════════ */
.notice-bar {
  background: var(--gold-pale);
  border-top: 1px solid #e8d078;
  border-bottom: 3px solid var(--gold);
}
.notice-inner {
  display: flex; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding-top: .7rem; padding-bottom: .7rem;
}
.notice-tag {
  background: var(--navy); color: #fff;
  font-size: .68rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 3px; flex-shrink: 0;
}
.notice-text { font-size: .82rem; color: var(--gray-700); flex: 1; }
.notice-link {
  font-size: .8rem; font-weight: 600; color: var(--blue);
  white-space: nowrap; display: flex; align-items: center; gap: .3rem;
}
.notice-link:hover { color: var(--gold); }

/* ════════════════════════════════════════════
   8. PAGE HEADER / BREADCRUMB  (páginas internas)
   ════════════════════════════════════════════ */
.page-header {
  background: linear-gradient(100deg,
    var(--navy-dark) 0%,
    var(--navy) 55%,
    var(--navy-mid) 100%);
  padding: 3rem 0;
  position: relative; overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px);
}
.page-header-inner { position: relative; z-index: 1; }
.page-header-inner h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1; margin-bottom: .5rem;
  margin-top: .85rem;
}
.page-header-inner h1 span { color: var(--gold-light); }
.page-header-inner p {
  color: rgba(255,255,255,.6);
  font-size: .9rem; margin-top: .5rem;
}
.breadcrumb-nav {
  display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap;
}
.breadcrumb-nav a {
  color: rgba(255,255,255,.55); font-size: .8rem;
  transition: color var(--t);
}
.breadcrumb-nav a:hover { color: var(--gold-light); }
.breadcrumb-nav .sep  { color: rgba(255,255,255,.3); font-size: .65rem; }
.breadcrumb-nav .current {
  color: var(--gold-light); font-size: .8rem; font-weight: 600;
}

/* ════════════════════════════════════════════
   9. LAYOUT UTILITIES
   ════════════════════════════════════════════ */
.wrap { max-width: 1200px; margin: auto; padding: 0 1.5rem; }
.wrap-sm { max-width: 860px; margin: auto; padding: 0 1.5rem; }
.wrap-lg { max-width: 1400px; margin: auto; padding: 0 1.5rem; }

.section     { padding: 5rem 0; }
.section.alt { background: var(--gray-50); }
.section.dark {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }

/* Flex helpers */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ════════════════════════════════════════════
   10. TIPOGRAFÍA & SECCIÓN HELPERS
   ════════════════════════════════════════════ */
.sec-label {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: .75rem;
}
.sec-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy); line-height: 1.15;
  margin-bottom: .75rem;
}
.sec-title span { color: var(--blue-light); }
.sec-title.light { color: #fff; }
.sec-title.light span { color: var(--gold-light); }

.sec-desc {
  color: var(--gray-500); font-size: .92rem;
  max-width: 520px; line-height: 1.75;
}
.sec-desc.light { color: rgba(255,255,255,.65); }

.sec-header           { margin-bottom: 3rem; }
.sec-header.centered  { text-align: center; }
.sec-header.centered .sec-desc   { margin: 0 auto; }
.sec-header.centered .divider    { margin: .9rem auto 1rem; }

.divider {
  width: 48px; height: 3px;
  background: var(--gold); border-radius: 2px;
  margin: .9rem 0 1rem;
}
.divider.light { background: rgba(255,255,255,.4); }

/* ════════════════════════════════════════════
   11. BOTONES
   ════════════════════════════════════════════ */
/* Primario */
.btn-primary {
  background: var(--navy); color: #fff;
  font-weight: 600; font-size: .85rem;
  padding: .75rem 1.75rem; border-radius: 4px;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-primary:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: #fff;
}

/* Acento dorado */
.btn-accent {
  background: var(--gold); color: var(--navy-dark);
  font-weight: 700; font-size: .85rem;
  padding: .75rem 1.75rem; border-radius: 4px;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background var(--t), transform var(--t);
}
.btn-accent:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  color: var(--navy-dark);
}

/* Outline */
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--navy); color: var(--navy);
  font-weight: 600; font-size: .8rem;
  padding: .6rem 1.4rem; border-radius: 4px;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: background var(--t), color var(--t);
}
.btn-outline:hover { background: var(--navy); color: #fff; }

/* Outline claro (sobre fondos oscuros) */
.btn-outline-light {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.35); color: #fff;
  font-weight: 600; font-size: .85rem;
  padding: .73rem 1.75rem; border-radius: 4px;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: border-color var(--t), background var(--t);
}
.btn-outline-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* Pequeño */
.btn-sm { padding: .45rem 1rem; font-size: .78rem; }

/* ════════════════════════════════════════════
   12. CARDS GENÉRICAS
   ════════════════════════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.card-img {
  height: 200px; overflow: hidden;
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 1.25rem 1.5rem; }
.card-cat {
  font-size: .68rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.card-title {
  font-weight: 600; font-size: .9rem;
  color: var(--navy); line-height: 1.45;
}
.card-text { color: var(--gray-500); font-size: .85rem; line-height: 1.7; margin-top: .5rem; }
.card-link {
  margin-top: .85rem; font-size: .78rem;
  font-weight: 600; color: var(--blue-light);
  display: inline-flex; align-items: center; gap: .3rem;
  transition: gap var(--t);
}
.card:hover .card-link { gap: .55rem; }

/* Card con borde superior dorado */
.card-accent { border-top: 4px solid var(--gold); }

/* Card centrada (valores, servicios) */
.card-center { text-align: center; }
.card-center .card-body { padding: 2rem 1.75rem; }
.card-icon-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue-light));
  display: grid; place-items: center;
  margin: 0 auto 1.25rem;
  color: #fff; font-size: 1.35rem;
}

/* ════════════════════════════════════════════
   13. STATS BAND  (reutilizable en varias páginas)
   ════════════════════════════════════════════ */
.stats-band {
  background: var(--navy);
  padding: 3.5rem 0;
  position: relative; overflow: hidden;
}
.stats-band::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 30px,
    rgba(255,255,255,.015) 30px, rgba(255,255,255,.015) 31px
  );
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.stat {
  text-align: center; padding: 1.5rem 1rem;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%;
  width: 1px; background: rgba(255,255,255,.12);
}
.stat-icon  { font-size: 1.5rem; color: var(--gold); margin-bottom: .6rem; opacity: .85; }
.stat-num   {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 2.8rem;
  color: #fff; line-height: 1;
}
.stat-lbl   {
  font-size: .75rem; color: rgba(255,255,255,.5);
  margin-top: .4rem; letter-spacing: .4px; text-transform: uppercase;
}

/* ════════════════════════════════════════════
   14. PILLAR / FEATURE ITEMS
   ════════════════════════════════════════════ */
.pillar {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem; background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gold);
  transition: box-shadow var(--t), transform var(--t);
}
.pillar:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pillar-icon {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 6px; background: var(--navy);
  display: grid; place-items: center;
  color: var(--gold-light); font-size: .9rem;
}
.pillar-title { font-weight: 700; font-size: .83rem; color: var(--navy); margin-bottom: .2rem; }
.pillar-desc  { font-size: .75rem; color: var(--gray-500); line-height: 1.5; }

/* ════════════════════════════════════════════
   15. FORMULARIOS
   ════════════════════════════════════════════ */
.form-wrap { background: var(--gray-50); border-radius: var(--radius); padding: 2.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block; font-weight: 600;
  font-size: .85rem; color: var(--text);
  margin-bottom: .4rem;
}
.form-control {
  width: 100%;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  font-size: .9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13,43,94,.1);
  outline: none;
}
textarea.form-control { resize: vertical; min-height: 120px; }

/* ════════════════════════════════════════════
   16. MAPA
   ════════════════════════════════════════════ */
.map-frame {
  width: 100%; height: 400px;
  border: none; border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

/* Info de contacto */
.cinfo {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem; background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--t);
}
.cinfo:hover { box-shadow: var(--shadow); }
.cinfo-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 7px; background: var(--navy);
  display: grid; place-items: center;
  color: var(--gold-light); font-size: .95rem;
}
.cinfo-lbl {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: .25rem;
}
.cinfo-val { font-size: .88rem; font-weight: 600; color: var(--navy); }
.cinfo-val a { color: var(--navy); transition: color var(--t); }
.cinfo-val a:hover { color: var(--blue-light); }

/* ════════════════════════════════════════════
   17. FOOTER
   ════════════════════════════════════════════ */
footer {
  background: var(--navy-dark);
  border-top: 4px solid var(--gold);
  position: relative;
  overflow: hidden;
}

/* ── Imágenes decorativas de fondo ── */
.footer-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
  line-height: 0;
  z-index: 0;
}

/* Skyline: capa base */
.footer-skyline {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Road GIF: encima del skyline */
.footer-road {
  position: absolute;
  bottom: 0;  
  width: 50%;
  height: auto;
  object-fit: cover;
  z-index: 1;
  margin-left: 25%;
}

/* ── Contenido del footer: encima de las imágenes ── */
.footer-content {
  position: relative;
  z-index: 2;
  padding: 4rem 0 0;
}

/* ── Grilla de columnas ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3.5rem;
}

.footer-brand img  { height: 50px; margin-bottom: 1.25rem; }
.footer-brand p    { color: rgba(255,255,255,.5); font-size: .83rem; line-height: 1.75; }
.footer-brand em   { color: var(--gold-light); font-style: normal; }
.footer-social     { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  color: rgba(255,255,255,.6); font-size: .8rem;
  transition: background var(--t), color var(--t);
}
.footer-social a:hover { background: var(--gold); color: #000; }

footer h5 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: .95rem;
  letter-spacing: 1px; text-transform: uppercase;
  color: #fff; margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-link {
  display: flex; align-items: flex-start; gap: .6rem;
  color: rgba(255,255,255,.55); font-size: .83rem;
  padding: .35rem 0; transition: color var(--t);
}
.footer-link i { color: var(--gold); margin-top: .18rem; font-size: .7rem; flex-shrink: 0; }
.footer-link:hover { color: #fff; }

/* ── Barra inferior ── */
.footer-bottom {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.45);
  /* Espacio suficiente para que las imágenes decorativas no tapen el texto:
     ajusta este valor según la altura real de tus imágenes */
  margin-top: 12rem;
  padding: .9rem 0;
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.35); }
.footer-bottom a:hover { color: var(--gold-light); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { margin-top: 3rem; }
}

@media (max-width: 568px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { margin-top: 6rem; }
}

@media (max-width: 480px) {
  .footer-bottom { margin-top: 4rem; }
}


/* ── 18. BACK TO TOP ── */
#btt {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff; border: none;
  display: grid; place-items: center; font-size: .9rem;
  box-shadow: var(--shadow-lg); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--t); z-index: 999;
}
#btt.show  { opacity: 1; visibility: visible; transform: translateY(0); }
#btt:hover { background: var(--blue); }

/* ── 19. ANIMACIONES GLOBALES ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-left  { opacity: 0; transform: translateX(-24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in-right { opacity: 0; transform: translateX( 24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in-left.visible,
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

/* ── 20. RESPONSIVE GLOBAL ── */
@media (max-width: 1024px) {
  .footer-grid    { grid-template-columns: 1fr 1fr; }
  .stats-grid     { grid-template-columns: 1fr 1fr; }
  .stat + .stat::before { display: none; }
  .grid-4         { grid-template-columns: 1fr 1fr; }
  .grid-3         { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* ── Ocultar elementos de escritorio ── */
  .gov-strip-links { display: none; }
  .nav-links       { display: none; }
  .section         { padding: 3.5rem 0; }
  .footer-grid     { grid-template-columns: 1fr; }
  .grid-2          { grid-template-columns: 1fr; }
  .grid-3          { grid-template-columns: 1fr; }
  .grid-4          { grid-template-columns: 1fr 1fr; }

  /* ── Navbar móvil ── */
  .nav-inner {
    gap: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  /* Ocultar el CTA de teléfono en móvil
     (ya está disponible dentro del drawer) */
  .nav-cta { display: none; }

  /* Mostrar el botón hamburguesa */
  .nav-toggle { display: flex; }

  /* Brand más compacto */
  .nav-brand img { height: 36px; }
  .brand-sub     { display: none; }

  /* Overlay activo */
  .nav-overlay { display: block; pointer-events: none; }
  .nav-overlay.open { pointer-events: auto; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }

  .nav-brand img  { height: 32px; }
  .brand-title    { font-size: .85rem; }
}


/* ════════════════════════════════════════════
   21. REDES SOCIALES FLOTANTES
   ════════════════════════════════════════════ */
.float-social {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.float-social a {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--navy);
  color: #fff;
  padding: .7rem .85rem;
  font-size: .9rem;
  overflow: hidden;
  max-width: 42px;
  white-space: nowrap;
  border-radius: 6px 0 0 6px;
  border-left: 3px solid var(--gold);
  transition: max-width .35s ease, background var(--t);
  box-shadow: var(--shadow);
}
.float-social a span {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  opacity: 0;
  transition: opacity .2s ease .1s;
}
.float-social a:hover {
  max-width: 160px;
  background: var(--blue);
}
.float-social a:hover span { opacity: 1; }

/* Colores por red */
.float-social a[aria-label="Facebook"]:hover  { background: #1877f2; }
.float-social a[aria-label="X / Twitter"]:hover { background: #000; }
.float-social a[aria-label="Instagram"]:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* ════════════════════════════════════════════
   22. MENÚ DE ACCESIBILIDAD
   ════════════════════════════════════════════ */
.a11y-widget {
  position: fixed;
  right: 0;
  bottom: 5rem;
  z-index: 997;
}

/* Botón trigger */
.a11y-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  border-radius: 6px 0 0 6px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background var(--t), transform var(--t);
}
.a11y-trigger:hover { background: var(--gold-light); transform: scale(1.05); }

/* Panel */
.a11y-panel {
  position: absolute;
  bottom: 0; right: 46px;
  width: 230px;
  background: var(--white);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-xl);
  border-top: 3px solid var(--gold);
  overflow: hidden;
  animation: a11ySlide .25s ease;
}
.a11y-panel[hidden] { display: none; }

@keyframes a11ySlide {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.a11y-header {
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.a11y-header i { color: var(--gold-light); }

.a11y-group { padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--gray-100); }
.a11y-group-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: .5rem;
}

/* Botones A- / A / A+ */
.a11y-row {
  display: flex;
  gap: .4rem;
}
.a11y-btn {
  flex: 1;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 4px;
  color: var(--navy);
  font-weight: 700;
  font-size: .85rem;
  padding: .45rem 0;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  font-family: inherit;
}
.a11y-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Botones toggle */
.a11y-toggle-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 4px;
  color: var(--gray-700);
  font-size: .8rem;
  font-weight: 500;
  padding: .5rem .75rem;
  margin-bottom: .4rem;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
  font-family: inherit;
  text-align: left;
}
.a11y-toggle-btn i { color: var(--gray-500); font-size: .8rem; }
.a11y-toggle-btn:hover { background: var(--gray-100); }
.a11y-toggle-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.a11y-toggle-btn.active i { color: var(--gold-light); }

/* Restablecer */
.a11y-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: .75rem;
  padding: .65rem;
  cursor: pointer;
  transition: color var(--t);
  font-family: inherit;
}
.a11y-reset:hover { color: var(--navy); }

/* ── Clases de accesibilidad aplicadas al <html> ── */
html.a11y-contrast {
  filter: contrast(1.5) saturate(0.5);
}
html.a11y-grayscale {
  filter: grayscale(1);
}
html.a11y-contrast.a11y-grayscale {
  filter: grayscale(1) contrast(1.5);
}
html.a11y-underline a {
  text-decoration: underline !important;
}
html.a11y-dyslexia,
html.a11y-dyslexia * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Arial', sans-serif !important;
  letter-spacing: .05em;
  word-spacing: .1em;
  line-height: 1.8;
}

/* ── Responsive flotantes ── */
@media (max-width: 768px) {
  .float-social { top: auto; bottom: 9rem; transform: none; }
  .float-social a { max-width: 38px; padding: .6rem .75rem; }
  .a11y-widget  { bottom: 5.5rem; }
}