/* =========================================================================
   LAYOUT.CSS - Estructuras principales: Navbar, Header, Footer y Secciones
   ========================================================================= */

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background-color: var(--brand-very-dark-purple-navbar);
  background-image: url('/static/images/fondo-desktop.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 18px var(--shadow);
  z-index: 1000;
}

.navbar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-lockup {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px 0 6px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--brand-highlight-softer) 82%, transparent);
}
.brand-lockup .logo { margin-top: 2px; }

.company-name { display: flex; flex-direction: column; gap: 2px; }
.company-name span:first-child {
  font-weight: 700;
  color: var(--brand-dark-purple);
  font-size: var(--font-size-company-name);
  line-height: 1.1;
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Menú de enlaces de navegación */
.nav-links { display: flex; align-items: center; gap: 1rem; list-style: none; }
.nav-link {
  color: var(--pure-white);
  font-weight: 700;
  transition: color 0.2s ease;
}
.nav-link:hover, .nav-link--active { color: var(--brand-highlight); }

/* Secciones genéricas y contenedores */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  gap: 28px;
}

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}

.section-eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--space-xs);
}

.section-desc {
  color: var(--c-text-2);
  font-size: 1.05rem;
  margin-top: .75rem;
}

.site-footer {
  max-width: 1080px;
  margin: 0 auto 64px;
  padding: 0 24px 64px;
}


/* Tablet y PC: menú horizontal, hamburguesa oculto */
@media (min-width: 769px) {
  .nav-links { display: flex; flex-direction: row; gap: 1.5rem; }
  .menu-toggle { display: none; }
}

/* ── RESPONSIVE LAYOUT Y PARCHES MÓVILES ── */

@media (max-width: 768px) {
  .section-inner { padding: var(--space-xl) var(--space-sm); }

/* Móvil: el menú se oculta y aparece el botón hamburguesa */
  .nav-links {
    display: none;
    background-color: var(--brand-very-dark-purple-navbar) !important;
    position: fixed;
    top: -100%; left: 0; width: 100%;
    background-image: url('/static/images/fondo-mobile.webp');
    background-size: cover;
    flex-direction: column;
    gap: 24px;
    padding: 40px 24px;
    transition: top 0.4s var(--ease-out);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 999;
    pointer-events: none;
  }

  .nav-links.active {
    pointer-events: auto;
    top: 70px;
  }

  .nav-links .nav-link {
    color: var(--pure-white) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 10px 0;
    text-decoration: none;
  }

  .nav-links .nav-link:hover,
  .nav-links .nav-link:active,
  .nav-links .nav-link--active {
    color: var(--brand-light-purple) !important;
    background: transparent !important;
  }
}

@media (max-width: 820px) {
  .navbar { max-width: 100%; padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .brand-lockup { padding: 6px 10px; }
  main { padding: 20px 16px 48px; }
}

@media (max-width: 640px) {
  .navbar { padding: 14px 16px; }
  header { background-image: url('/static/images/fondo-mobile.webp'); }
}

@media (max-width: 420px) {
  .navbar { flex-wrap: wrap; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-lockup { padding: 4px 8px; border-radius: 10px; min-width: 0; gap: 8px; }
  .company-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 400px) {
  .company-name { display: none; }
}