/* src/css/header.css */

/* ── Skip navigation — accesibilidad ──────── */

.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: var(--space-3) var(--space-6);
  background: var(--color-yellow);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
}

.skip-nav:focus {
  left: 50%;
  transform: translateX(-50%);
}

/* ── Header ──────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: var(--color-dark-95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-dark);
  transition: background-color var(--duration-base) var(--ease-out-expo);
}

.site-header.scrolled {
  background-color: var(--color-dark-98);
}

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

.header-logo {
  flex-shrink: 0;
  display: grid;
  align-items: center;
  grid-template-areas: "logo";
}

/* Ambas imágenes apiladas en la misma celda del grid */
.header-logo__img {
  grid-area: logo;
  height: 34px;
  width: auto;
  display: block;
  transition: opacity 300ms var(--ease-out-expo);
}

/* Por defecto: fondo oscuro → logo blanco visible */
.header-logo__img--color { opacity: 0; }
.header-logo__img--white { opacity: 1; }

/* Sobre fondo claro → logo a color visible */
.site-header.nav-on-light .header-logo__img--color { opacity: 1; }
.site-header.nav-on-light .header-logo__img--white { opacity: 0; }

/* Nav links */
.header-nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

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

.header-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color 250ms var(--ease-out-expo),
              background-color 250ms var(--ease-out-expo);
}

.header-nav a:hover {
  color: var(--color-text-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

.header-nav a.active {
  color: var(--color-text-primary);
}

/* Dropdown Solar — disclosure navigation pattern */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Toggle button (chevron) */
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out-expo);
  min-height: 24px;
  min-width: 24px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"] {
  color: var(--color-text-primary);
}

.nav-dropdown-toggle i {
  font-size: 0.75rem;
  transition: transform var(--duration-base) var(--ease-out-expo);
  display: block;
}

.nav-dropdown-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(19, 36, 58, 0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  min-width: 200px;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity var(--duration-base) var(--ease-out-expo),
    transform var(--duration-base) var(--ease-out-expo),
    visibility var(--duration-base);
  list-style: none;
}

/* Show via CSS (hover / focus-within) or JS toggle class */
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.dropdown-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* Texto siempre oscuro: el dropdown tiene fondo blanco fijo.
   Mayor especificidad que nav-on-light para que no lo override. */
.header-nav .nav-dropdown a {
  color: rgba(19, 36, 58, 0.70);
}

.header-nav .nav-dropdown a:hover {
  color: #13243A;
  background-color: rgba(19, 36, 58, 0.07);
}


/* CTA header */
.header-cta {
  flex-shrink: 0;
}

/* ── Hamburger — mobile ─────────────────────── */

.header-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  transition: box-shadow var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo);
}

.header-hamburger:active {
  transform: scale(0.94);
}

@media (max-width: 899px) {
  .header-hamburger { display: flex; }
}

.header-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out-expo),
              opacity var(--duration-base) var(--ease-out-expo);
}

/* ── Header mobile layout ───────────────────── */

@media (max-width: 899px) {
  .header-inner {
    position: relative;
    justify-content: space-between;
    gap: 0;
  }

  /* Logo oculto en mobile — aparece dentro del panel */
  .header-logo {
    display: none;
  }

  /* CTA compacto tipo pill */
  .header-cta .hs-btn {
    padding: 9px 15px;
    font-size: 0.78rem;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: none;
  }
}

/* ── Mobile panel (floating card) ─────────────
   Siempre en el DOM. Oculto en desktop via
   min-width query. En mobile: opacity/visibility.
──────────────────────────────────────────────── */

@media (min-width: 900px) {
  .mobile-panel,
  .mobile-backdrop {
    display: none !important;
  }
}

.mobile-panel {
  position: fixed;
  top: 16px;
  left: 16px;
  width: min(300px, calc(100vw - 32px));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  z-index: 300;
  overflow: hidden;
  /* Estado cerrado */
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 220ms var(--ease-out-expo),
              transform 220ms var(--ease-out-expo),
              visibility 0ms linear 220ms;
}

.mobile-panel.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 220ms var(--ease-out-expo),
              transform 220ms var(--ease-out-expo),
              visibility 0ms linear 0ms;
}

/* ── Vistas del panel: show/hide simple ──────── */

.mp-view {
  padding: 16px;
}

.mp-view--sub {
  display: none;
}

.mobile-panel.sub-open .mp-view--main {
  display: none;
}

.mobile-panel.sub-open .mp-view--sub {
  display: block;
}

/* ── mp-close & mp-back ─────────────────────── */

.mp-close,
.mp-back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #333;
  font-size: 1rem;
  margin-bottom: 14px;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.mp-close:hover,
.mp-back:hover {
  background: #e5e5e5;
}

/* ── mp-list ──────────────────────────────── */

.mp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── mp-item (links y botones) ──────────────── */

.mp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 8px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  color: #1a1a1a;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out-expo);
}

.mp-item:hover {
  background: #f5f5f5;
}

.mp-item__icon {
  font-size: 1.2rem;
  color: #888;
  flex-shrink: 0;
}

.mp-item__arrow {
  margin-left: auto;
  font-size: 0.85rem;
  color: #bbb;
}

/* ── mp-sep ──────────────────────────────── */

.mp-sep {
  height: 1px;
  background: #ebebeb;
  margin: 8px 0;
}

/* ── mp-brand ────────────────────────────── */

.mp-brand {
  padding: 8px 8px 4px;
  display: flex;
  justify-content: center;
}

.mp-brand img {
  display: block;
  height: 32px;
  width: auto;
}

/* ── Backdrop ────────────────────────────── */

.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 220ms var(--ease-out-expo),
              visibility 0ms linear 220ms;
}

.mobile-backdrop.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 220ms var(--ease-out-expo),
              visibility 0ms linear 0ms;
}

/* Offset del header para el contenido */
.header-offset {
  height: 68px;
}

/* ── Header transparente sobre hero full-screen ──────────────
   El fondo permanece siempre transparente — el backdrop-filter
   blur recoge el color de lo que haya debajo. Los elementos
   (texto, logo) se adaptan dinámicamente via .nav-on-light.   */

body.has-hero .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

/* ── Nav adaptivo — .nav-on-light seteado por JS ────────────
   Se activa cuando la sección bajo el header tiene fondo claro
   (data-nav-theme="light"). Sin restricción de scroll: el header
   siempre es transparente en has-hero, así que la adaptación
   debe funcionar a cualquier posición de scroll.              */

.site-header.nav-on-light .header-nav a {
  color: rgba(19, 36, 58, 0.70);
  transition: color var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-expo);
}

.site-header.nav-on-light .header-nav a:hover,
.site-header.nav-on-light .header-nav a.active {
  color: #13243A;
  background-color: rgba(19, 36, 58, 0.07);
}

.site-header.nav-on-light .nav-dropdown-toggle {
  color: rgba(19, 36, 58, 0.70);
}

.site-header.nav-on-light .nav-dropdown-toggle:hover {
  color: #13243A;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown, .nav-link, .header-hamburger span, .dropdown-icon { transition: none; }
}