/* ==========================================================================
   header.css — Menú compartido (topbar + header.main + nav.primary + mega
   + drawer móvil + footer NAP) para el rediseño de angelortegacastro.com.

   Fuente de verdad ÚNICA del chrome del sitio. Extraído de mockups/redisenio.html
   y armonizado con las correcciones acumuladas (logo viewBox 20 10 640 130 a
   height:60px, position:sticky en header, etc.).

   Carga: <link rel="stylesheet" href="/wp-content/themes/aoc-rediseno/header.css">
   en el <head> ANTES de cualquier <style> inline de la página. De esta forma,
   las reglas locales del mockup (hero, contenido, etc.) pueden sobrescribir
   variables pero NO pisar la estructura del menú salvo con !important.

   © 2026 Ángel Ortega Castro
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Variables CSS canónicas (paleta + tipografías + breakpoints)
   -------------------------------------------------------------------------- */
:root {
  --azul: #1D3FC4;
  --azul-100: #E8EBF4;
  --accent-mid: #21317C;
  --midnight: #0C1D3D;
  --celeste: #4AB3EE;
  --ink: #1A1A1A;
  --ink-700: #2A2828;
  --ink-500: #5A544C;
  --ink-300: #B8B0A4;
  --piedra: #7A7268;
  --hueso: #F4EFE6;
  --paper: #FBF8F1;
  --line: #E6E4DC;
  --white: #FFFFFF;

  /* Aliases para compatibilidad con mockups que usan ambos nombres */
  --navy: var(--azul);
  --navy-700: var(--midnight);
  --navy-100: var(--azul-100);
  --ink-900: var(--midnight);
  --bone: var(--paper);
  --beige: var(--hueso);
  --agua: var(--celeste);

  --sans: 'Geist', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1440px;
  --gap: clamp(20px, 3vw, 48px);
}


/* --------------------------------------------------------------------------
   2. Topbar (barra fina superior con idioma y links)
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--white);
  color: var(--ink-500);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 101;
}
.topbar .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px var(--gap);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.topbar a {
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.15s;
}
.topbar a:hover { color: var(--ink); }
.topbar .sep {
  width: 1px;
  height: 12px;
  background: var(--line);
}


/* --------------------------------------------------------------------------
   3. Selector de idioma (botón + menú desplegable)
   -------------------------------------------------------------------------- */
.lang { position: relative; }
.lang-btn {
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: 0;
}
.lang-btn:hover { color: var(--ink); }
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--white);
  color: var(--ink);
  list-style: none;
  min-width: 180px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
  z-index: 200;
  padding: 0;
}
.lang:hover .lang-menu,
.lang:focus-within .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s, transform 0.18s, visibility 0s;
}
.lang-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0;
  text-decoration: none;
}
.lang-menu li:last-child a { border-bottom: 0; }
.lang-menu li a:hover {
  background: var(--bone);
  color: var(--navy);
}
.lang-menu li a strong {
  color: var(--navy);
  width: 24px;
}
.lang-menu li a[aria-current="true"] { background: var(--navy-100); }


/* --------------------------------------------------------------------------
   4. Header principal — sticky, NO fixed (evita problemas de scroll)
   -------------------------------------------------------------------------- */
header.main {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition:
    background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.3s ease,
    color 0.4s ease;
}

/* Header sobre hero oscuro (variante is-on-hero) — invierte logo y texto a blanco */
header.main.is-on-hero {
  background: var(--white);
  border-bottom-color: var(--line);
  color: var(--ink);
}
header.main.is-on-hero .logo,
header.main.is-on-hero nav.primary > ul > li > a,
header.main.is-on-hero nav.primary > ul > li > button,
header.main.is-on-hero .icon-btn { color: var(--white); }
header.main.is-on-hero .cta {
  background: var(--ink);
  color: var(--white);
}
header.main.is-on-hero .cta:hover { background: var(--azul); }
header.main.is-on-hero .logo svg .lp-circle { fill: #0c1d3d; }
header.main.is-on-hero .logo svg .lp-mono { fill: #f6f5f1; }
header.main.is-on-hero .logo svg .lp-mono-c { fill: #4ab3ee; }
header.main.is-on-hero .logo svg .lp-word { fill: #0a0a0a; }

/* Header cuando el mega-menú está abierto (forzar paleta clara aunque venga is-on-hero) */
header.main.is-mega-open {
  background: var(--white);
  border-bottom-color: var(--line);
  color: var(--ink);
}
header.main.is-mega-open .logo,
header.main.is-mega-open nav.primary > ul > li > a,
header.main.is-mega-open nav.primary > ul > li > button,
header.main.is-mega-open .icon-btn { color: var(--ink); }
header.main.is-mega-open .cta {
  background: var(--ink);
  color: var(--white);
}

header.main .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  align-items: stretch;
  min-height: 90px;
}

/* Logo — height:60px sobre viewBox 20 10 640 130 (verificado) */
header.main .logo {
  display: flex;
  align-items: center;
  padding: 8px 40px 8px 0;
  height: 100%;
}
header.main .logo svg {
  height: 60px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: filter 0.4s ease;
}


/* --------------------------------------------------------------------------
   5. Navegación primaria + mega-menú
   -------------------------------------------------------------------------- */
nav.primary {
  display: flex;
  align-items: stretch;
  flex: 1;
}
nav.primary > ul {
  display: flex;
  list-style: none;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
}
nav.primary > ul > li { position: static; }
nav.primary > ul > li > a,
nav.primary > ul > li > button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  position: relative;
  cursor: pointer;
  background: none;
  border: 0;
  text-decoration: none;
}
nav.primary > ul > li > button svg { transition: transform 0.2s; }
nav.primary > ul > li:hover > button svg,
nav.primary > ul > li:focus-within > button svg { transform: rotate(180deg); }

/* Indicador inferior animado al hover/focus */
nav.primary > ul > li > a::after,
nav.primary > ul > li > button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
nav.primary > ul > li:hover > a::after,
nav.primary > ul > li:hover > button::after,
nav.primary > ul > li:focus-within > a::after,
nav.primary > ul > li:focus-within > button::after { transform: scaleX(1); }


/* --------------------------------------------------------------------------
   6. Lado derecho del header (iconos + CTA)
   -------------------------------------------------------------------------- */
header.main .right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
header.main .icon-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.15s;
  background: none;
  border: 0;
  cursor: pointer;
}
header.main .icon-btn:hover { background: var(--bone); }
header.main .cta {
  background: var(--ink);
  color: var(--white);
  padding: 14px 28px;
  margin-left: 16px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
header.main .cta:hover { background: var(--navy); }


/* --------------------------------------------------------------------------
   7. Mega-menú (panel desplegable BCG-style)
   -------------------------------------------------------------------------- */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  z-index: 50;
  min-height: 520px;
  clip-path: inset(0 0 100% 0);
  transition-property: opacity, transform, visibility, clip-path;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0s, 0s, 0.5s, 0s;
}
nav.primary > ul > li:hover .mega,
nav.primary > ul > li:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

/* Backdrop oscurecido detrás del mega-menú */
.mega-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.45s;
  z-index: -1;
  pointer-events: none;
}
nav.primary > ul > li:hover .mega-backdrop,
nav.primary > ul > li:focus-within .mega-backdrop {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}

/* Stagger animation para tabs/items/featured */
.mega .tab,
.mega .panel-content.is-active h5,
.mega .panel-content.is-active .items-grid a,
.mega .panel-content.is-active .panel-cta,
.mega .featured h6,
.mega .featured .f-card {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
nav.primary > ul > li:hover .mega .tab,
nav.primary > ul > li:focus-within .mega .tab,
nav.primary > ul > li:hover .mega .panel-content.is-active h5,
nav.primary > ul > li:focus-within .mega .panel-content.is-active h5,
nav.primary > ul > li:hover .mega .panel-content.is-active .items-grid a,
nav.primary > ul > li:focus-within .mega .panel-content.is-active .items-grid a,
nav.primary > ul > li:hover .mega .panel-content.is-active .panel-cta,
nav.primary > ul > li:focus-within .mega .panel-content.is-active .panel-cta,
nav.primary > ul > li:hover .mega .featured h6,
nav.primary > ul > li:focus-within .mega .featured h6,
nav.primary > ul > li:hover .mega .featured .f-card,
nav.primary > ul > li:focus-within .mega .featured .f-card {
  opacity: 1;
  transform: translateY(0);
}
.mega .tab:nth-child(2) { transition-delay: 0.05s; }
.mega .tab:nth-child(3) { transition-delay: 0.10s; }
.mega .tab:nth-child(4) { transition-delay: 0.15s; }
.mega .tab:nth-child(5) { transition-delay: 0.20s; }
.mega .tab:nth-child(6) { transition-delay: 0.25s; }
.mega .panel-content.is-active h5 { transition-delay: 0.10s; }
.mega .panel-content.is-active .items-grid a:nth-child(1) { transition-delay: 0.14s; }
.mega .panel-content.is-active .items-grid a:nth-child(2) { transition-delay: 0.17s; }
.mega .panel-content.is-active .items-grid a:nth-child(3) { transition-delay: 0.20s; }
.mega .panel-content.is-active .items-grid a:nth-child(4) { transition-delay: 0.23s; }
.mega .panel-content.is-active .items-grid a:nth-child(5) { transition-delay: 0.26s; }
.mega .panel-content.is-active .items-grid a:nth-child(6) { transition-delay: 0.29s; }
.mega .panel-content.is-active .items-grid a:nth-child(7) { transition-delay: 0.32s; }
.mega .panel-content.is-active .items-grid a:nth-child(8) { transition-delay: 0.35s; }
.mega .panel-content.is-active .panel-cta { transition-delay: 0.40s; }
.mega .featured h6 { transition-delay: 0.12s; }
.mega .featured .f-card { transition-delay: 0.22s; }

/* Línea vertical decorativa que crece al abrir */
.mega::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--navy);
  transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
nav.primary > ul > li:hover .mega::before,
nav.primary > ul > li:focus-within .mega::before { height: 32px; }

/* Layout interno del mega: 3 columnas tabs / panel / featured */
.mega .mega-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  min-height: 480px;
}
.mega .tabs {
  border-right: 1px solid var(--line);
  padding: 48px 32px 48px 0;
  list-style: none;
  margin: 0;
}
.mega .tabs h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
  margin-bottom: 24px;
  font-weight: 600;
}
.mega .tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.15s;
}
.mega .tab .chev {
  color: var(--ink-300);
  transition: transform 0.2s, color 0.15s;
}
.mega .tab:hover,
.mega .tab.is-active { color: var(--navy); }
.mega .tab:hover .chev,
.mega .tab.is-active .chev {
  color: var(--navy);
  transform: translateX(4px);
}

.mega .panel {
  padding: 48px;
  border-right: 1px solid var(--line);
}
.mega .panel-content { display: none; }
.mega .panel-content.is-active { display: block; }
.mega .panel-content h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
  margin-bottom: 24px;
  font-weight: 600;
}
.mega .items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
.mega .items-grid a {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.15s, padding-left 0.15s;
  line-height: 1.4;
  text-decoration: none;
}
.mega .items-grid a:hover {
  color: var(--navy);
  padding-left: 6px;
}
.mega .panel-cta {
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-decoration: none;
}

.mega .featured { padding: 48px 0 48px 48px; }
.mega .featured h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
  margin-bottom: 16px;
  font-weight: 600;
}
.mega .featured .f-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.mega .featured .f-img {
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%);
  position: relative;
  overflow: hidden;
}
.mega .featured .f-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(126, 190, 197, 0.3), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(198, 183, 171, 0.2), transparent 50%);
}
.mega .featured .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 10px;
}
.mega .featured h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.mega .featured p {
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.5;
  margin-bottom: 16px;
}
.mega .featured .read {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-decoration: none;
}

@media (max-width: 1180px) {
  .mega .mega-wrap { grid-template-columns: 240px 1fr 320px; }
}
@media (max-width: 1024px) {
  .mega .mega-wrap {
    grid-template-columns: 1fr;
    padding: 32px var(--gap);
  }
  .mega .tabs,
  .mega .panel {
    border-right: 0;
    padding: 0 0 24px;
  }
  .mega .featured {
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
  }
  .mega .items-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  nav.primary { display: none; }
}


/* --------------------------------------------------------------------------
   8. Drawer móvil
   -------------------------------------------------------------------------- */
.mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.4s;
  z-index: 199;
}
.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--white);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -24px 0 64px -16px rgba(0, 0, 0, 0.25);
}
.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px clamp(20px, 4vw, 32px);
  border-bottom: 1px solid var(--line);
  min-height: 80px;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}
.mobile-drawer .head .brand svg {
  height: 48px;
  width: auto;
  display: block;
}
.mobile-drawer .close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.15s, transform 0.2s;
  background: none;
  border: 0;
  cursor: pointer;
}
.mobile-drawer .close:hover {
  background: var(--bone);
  transform: rotate(90deg);
}
.mobile-drawer .body {
  flex: 1;
  padding: 16px clamp(20px, 4vw, 32px);
}

.mobile-drawer .m-item {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-drawer.is-open .m-item {
  opacity: 1;
  transform: translateX(0);
}
.mobile-drawer.is-open .m-item:nth-child(1) { transition-delay: 0.15s; }
.mobile-drawer.is-open .m-item:nth-child(2) { transition-delay: 0.22s; }
.mobile-drawer.is-open .m-item:nth-child(3) { transition-delay: 0.29s; }
.mobile-drawer.is-open .m-item:nth-child(4) { transition-delay: 0.36s; }
.mobile-drawer.is-open .m-item:nth-child(5) { transition-delay: 0.43s; }

.mobile-drawer .m-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.2s;
}
.mobile-drawer .m-item summary::-webkit-details-marker { display: none; }
.mobile-drawer .m-item summary .plus {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.35s,
    color 0.35s,
    border-color 0.35s;
  font-size: 20px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.mobile-drawer .m-item[open] summary .plus {
  transform: rotate(45deg);
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.mobile-drawer .m-item[open] summary { color: var(--navy); }

.mobile-drawer .m-sub {
  padding: 0 0 24px;
  animation: drawerSubOpen 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes drawerSubOpen {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to { opacity: 1; max-height: 2000px; transform: translateY(0); }
}
.mobile-drawer .m-sub h6 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  margin: 16px 0 8px;
}
.mobile-drawer .m-sub a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line);
  transition: color 0.15s, padding-left 0.2s;
  text-decoration: none;
}
.mobile-drawer .m-sub a:hover {
  color: var(--navy);
  padding-left: 6px;
}

.mobile-drawer .foot {
  padding: 24px clamp(20px, 4vw, 32px) 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-drawer .foot .cta {
  background: var(--ink);
  color: var(--white);
  padding: 18px 24px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.02em;
  transition: background 0.2s;
  text-decoration: none;
}
.mobile-drawer .foot .cta:hover { background: var(--navy); }
.mobile-drawer .foot .langs {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 8px;
  font-size: 13px;
}
.mobile-drawer .foot .langs a {
  color: var(--ink-500);
  padding: 8px 14px;
  letter-spacing: 0.04em;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.2s;
  text-decoration: none;
}
.mobile-drawer .foot .langs a:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.mobile-drawer .foot .langs a[aria-current="true"] {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

body.has-drawer-open { overflow: hidden; }


/* --------------------------------------------------------------------------
   9. Overlay buscador (#aocSearchOverlay)
   Las propiedades visuales del overlay vienen en inline-style en el HTML
   (background, position, blur). Aquí solo añadimos refinamientos.
   -------------------------------------------------------------------------- */
#aocSearchOverlay { /* asegura inicialización oculta si el inline-style fallara */ }
#aocSearchOverlay input::placeholder { color: rgba(244, 239, 230, 0.4); }


/* --------------------------------------------------------------------------
   10. Footer (footer.bot) — chrome inferior canónico
   El footer-nap está mayormente con inline styles en redisenio.html; aquí
   normalizamos para que cuando no traigan inline, se vean correctamente.
   -------------------------------------------------------------------------- */
footer.bot {
  background: var(--midnight);
  color: var(--paper);
  padding: 64px var(--gap) 32px;
}
footer.bot .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
}
footer.bot a {
  color: rgba(244, 239, 230, 0.7);
  text-decoration: none;
  transition: color 0.15s;
}
footer.bot a:hover { color: var(--paper); }
footer.bot .brand svg {
  height: 56px;
  width: auto;
  display: block;
}

/* Bloque NAP (Name + Address + Phone) — padding lateral consistente */
footer.bot .footer-nap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding: 0 clamp(20px, 3vw, 48px) 24px;
  border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 230, 0.7);
}
@media (max-width: 720px) {
  footer.bot .footer-nap { grid-template-columns: 1fr; }
}

footer.bot .copy {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 230, 0.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
footer.bot .legal-links {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}
footer.bot .legal-links a {
  color: rgba(244, 239, 230, 0.6);
  margin-right: 16px;
}
footer.bot .legal-links a:hover { color: var(--paper); }


/* --------------------------------------------------------------------------
   11. Tipografía base, reset mínimo (compatible con todos los mockups)
   No tocamos body color/background por defecto — eso queda en cada página.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
button {
  font: inherit;
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}


/* --------------------------------------------------------------------------
   12. Accesibilidad global · :focus-visible + prefers-reduced-motion
   Audit móvil 2026-05-18 — outline visible en navegación por teclado y
   respeto de la preferencia del sistema "reducir movimiento".
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(29, 63, 196, 0.18);
  border-radius: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
