/* Atlántico Innovación — cabecera y pie propios (05 §5 y §6).
 *
 * Sin Elementor Pro no hay constructor de cabecera ni de pie: se hacen en el
 * tema (template-parts/cabecera.php y pie.php) y quedan en git.
 *
 * La cabecera es fija y transparente sobre el hero oscuro; al pasar 40 px de
 * scroll, ai-motion.js le pone `.ai-cabecera--solida`. En las páginas sin hero
 * (body sin `.ai-con-hero`) nace sólida y el contenido empieza debajo de ella.
 */

.ai-cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--ai-cabecera-alto);
  background: transparent;
  transition: background-color var(--ai-mov-base) var(--ai-curva),
              box-shadow var(--ai-mov-base) var(--ai-curva);
}
.ai-cabecera--solida,
.ai-cabecera--abierta {
  background: var(--ai-marino-950);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(6, 26, 51, .25);
}
.admin-bar .ai-cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .ai-cabecera { top: 46px; } }

body:not(.ai-con-hero) { padding-top: var(--ai-cabecera-alto); }

/* El centinela que vigila el scroll (lo crea ai-motion.js). */
.ai-centinela { position: absolute; top: 40px; left: 0; width: 1px; height: 1px; pointer-events: none; }

.ai-cabecera__interior {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ai-esp-4);
}
.ai-cabecera__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.ai-cabecera__logo img { height: 32px; width: auto; display: block; }   /* ~140 px de ancho; el mínimo del horizontal (04 §3) es 120 */

/* --- Navegación --- */
.ai-nav__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: var(--ai-esp-4);
}
.ai-nav__lista li { margin: 0; }
.ai-nav__enlace {
  position: relative;
  display: inline-block;
  color: var(--ai-blanco);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  padding-block: 6px;
}
.ai-nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ai-atlantico-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ai-mov-rapido) var(--ai-curva);
}
.ai-nav__enlace:hover,
.ai-nav__enlace:focus-visible { color: var(--ai-blanco); text-decoration: none; }
.ai-nav__enlace:hover::after,
.ai-nav__enlace:focus-visible::after,
.ai-nav__enlace[aria-current="page"]::after { transform: scaleX(1); }

/* «Contacto» va como botón de borde, siempre sobre marino. */
.ai-nav__lista a.ai-btn { color: var(--ai-blanco); border-color: rgba(255, 255, 255, .55); }
.ai-nav__lista a.ai-btn:hover,
.ai-nav__lista a.ai-btn:focus-visible { background: var(--ai-blanco); color: var(--ai-marino-900); border-color: var(--ai-blanco); }

/* --- Botón del menú (solo en móvil y solo con JS) --- */
.ai-cabecera__boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-right: -8px;
  background: transparent;
  border: 0;
  border-radius: var(--ai-radio-sm);
  cursor: pointer;
  color: var(--ai-blanco);
}
.ai-hamburguesa,
.ai-hamburguesa::before,
.ai-hamburguesa::after {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--ai-mov-base) var(--ai-curva), opacity var(--ai-mov-base) var(--ai-curva);
}
.ai-hamburguesa { position: relative; }
.ai-hamburguesa::before,
.ai-hamburguesa::after { content: ""; position: absolute; left: 0; }
.ai-hamburguesa::before { top: -7px; }
.ai-hamburguesa::after  { top: 7px; }
.ai-cabecera--abierta .ai-hamburguesa { background: transparent; }
.ai-cabecera--abierta .ai-hamburguesa::before { transform: translateY(7px) rotate(45deg); }
.ai-cabecera--abierta .ai-hamburguesa::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  html.ai-js .ai-cabecera__boton { display: inline-flex; }
  html.ai-js .ai-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ai-marino-950);
    padding: var(--ai-esp-1) var(--ai-esp-3) var(--ai-esp-4);
    box-shadow: 0 16px 32px rgba(6, 26, 51, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--ai-mov-base) var(--ai-curva),
                transform var(--ai-mov-base) var(--ai-curva),
                visibility 0s linear var(--ai-mov-base);
  }
  html.ai-js .ai-cabecera--abierta .ai-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  html.ai-js .ai-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  html.ai-js .ai-nav__enlace {
    display: block;
    padding: var(--ai-esp-2) 0;
    font-size: var(--ai-txt-md);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  html.ai-js .ai-nav__enlace::after { display: none; }
  html.ai-js .ai-nav__lista a.ai-btn { margin-top: var(--ai-esp-3); width: 100%; }

  /* Sin JS no hay botón: la cabecera deja de ser fija y el menú queda a la
     vista, en fila. Feo, pero todo se puede pulsar. */
  html:not(.ai-js) .ai-cabecera { position: static; height: auto; background: var(--ai-marino-950); }
  html:not(.ai-js) .ai-cabecera__interior { flex-wrap: wrap; padding-block: var(--ai-esp-2); }
  html:not(.ai-js) .ai-nav__lista { flex-wrap: wrap; gap: var(--ai-esp-2) var(--ai-esp-3); }
  html:not(.ai-js) body:not(.ai-con-hero) { padding-top: 0; }
}

/* --- Selector de idioma (patrón disclosure, como en Auris Reader) ---
   Un <li> más del menú: el código del idioma activo y, desplegada, la lista
   con los nombres. Texto, sin banderas. Solo existe con Polylang activo. */
.ai-idioma { position: relative; }
.ai-idioma__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--ai-esp-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ai-radio-sm);
  color: var(--ai-blanco);
  font: inherit;
  font-size: var(--ai-txt-sm);
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
}
.ai-idioma__boton:hover,
.ai-idioma__boton[aria-expanded="true"] { border-color: rgba(255, 255, 255, .35); }
.ai-idioma__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--ai-mov-rapido) var(--ai-curva);
}
.ai-idioma__boton[aria-expanded="true"] .ai-idioma__caret { transform: rotate(180deg); }
.ai-idioma__lista {
  position: absolute;
  top: calc(100% + var(--ai-esp-1)); right: 0;
  z-index: 120;
  min-width: 10rem;
  margin: 0;
  padding: var(--ai-esp-1) 0;
  list-style: none;
  background: var(--ai-marino-950);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ai-radio);
  box-shadow: 0 12px 32px rgba(6, 26, 51, .4);
}
.ai-idioma__lista[hidden] { display: none; }
.ai-idioma__item { margin: 0; }
.ai-idioma__item a {
  display: block;
  padding: var(--ai-esp-1) var(--ai-esp-2);
  color: var(--ai-cielo-200);
  font-size: .95rem;
  text-decoration: none;
}
.ai-idioma__item a:hover,
.ai-idioma__item a:focus-visible { color: var(--ai-blanco); background: rgba(255, 255, 255, .06); text-decoration: none; }
.ai-idioma__item--actual a { color: var(--ai-blanco); font-weight: 600; }
@media (max-width: 899px) {
  html.ai-js .ai-idioma { margin-top: var(--ai-esp-2); }
  html.ai-js .ai-idioma__lista { position: static; border: 0; box-shadow: none; padding: 0 0 0 var(--ai-esp-2); }
}

/* --- Pie --- */
.ai-pie {
  background: var(--ai-marino-950);
  color: var(--ai-cielo-200);
  padding-block: var(--ai-esp-8) var(--ai-esp-4);
}
.ai-pie a { color: var(--ai-cielo-200); }
.ai-pie a:hover,
.ai-pie a:focus-visible { color: var(--ai-blanco); }

.ai-pie__superior {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--ai-esp-6);
  padding-bottom: var(--ai-esp-6);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 899px) {
  .ai-pie__superior { grid-template-columns: 1fr; gap: var(--ai-esp-4); }
}
.ai-pie__logo { display: inline-block; }
.ai-pie__logo img { height: 36px; width: auto; display: block; }
.ai-pie__lema { margin: var(--ai-esp-3) 0 0; max-width: 34ch; }
.ai-pie__titulo {
  font-size: var(--ai-txt-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ai-atlantico-300);
  margin: 0 0 var(--ai-esp-2);
}
.ai-pie__lista { list-style: none; padding: 0; margin: 0; }
.ai-pie__lista li { margin-bottom: var(--ai-esp-1); }

.ai-pie__inferior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ai-esp-2) var(--ai-esp-4);
  padding-top: var(--ai-esp-3);
  font-size: var(--ai-txt-sm);
}
.ai-pie__inferior p { margin: 0; }
.ai-pie__legal { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ai-esp-1) var(--ai-esp-3); }
.ai-pie__legal li { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ai-cabecera, .ai-nav, .ai-nav__enlace::after,
  .ai-hamburguesa, .ai-hamburguesa::before, .ai-hamburguesa::after { transition: none; }
}