/* =========================================================================
   edu-v3.css — header del sitio, lenguaje visual adoptado de docs/plantilla2
   (Shared/SiteHeader.razor): header sticky claro con blur, sin nav visible
   de forma permanente — todo el menú vive detrás del botón de hamburguesa,
   en cualquier tamaño de pantalla (a diferencia del header anterior, que
   tenía una barra de nav de escritorio siempre visible). El toggle en sí
   (JS en site.js, clase `.is-open`) no cambió — solo el estilo.

   Fuentes: --v3-font-display/--v3-font-body son alias locales de las
   mismas Poppins/Inter que --font-display/--font-body en base.css. */

:root {
    --v3-ink: var(--ink);
    --v3-muted: var(--ink-soft);
    --v3-border: var(--line);
    --v3-whatsapp: var(--green);
    --v3-whatsapp-hover: var(--green-deep);

    --v3-radius-sm: 10px;
    --v3-radius-xl: 18px;

    --v3-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --v3-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --v3-content-width: min(1180px, 92%);
    --v3-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* -- Toggle de nav — el panel de nav está oculto por defecto en cualquier
   tamaño de pantalla; el botón de hamburguesa lo abre/cierra (site.js). -- */

.eco-nav-desktop {
    display: none;
}

.eco-nav-toggle {
    display: flex;
}

.eco-nav-mobile-panel {
    display: none !important;
}

.eco-nav-mobile-panel.is-open {
    display: flex !important;
}

/* -- Header -- */

.eco-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(251, 247, 239, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--v3-border);
}

.eco-header__inner {
    /* Ancho/centrado vienen de .full-bleed > .content-inner (base.css): el
       <header> lleva la clase full-bleed para compartir el mismo margen
       lateral responsive (--space-2/4/6) que el resto de las secciones. */
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.eco-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--v3-ink);
}

.eco-header__brand:hover {
    color: var(--v3-ink);
}

.eco-header__mark {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.eco-header__lockup {
    display: grid;
    gap: 2px;
}

.eco-header__wordmark {
    font-family: var(--v3-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--v3-ink);
}

.eco-header__tagline {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v3-muted);
    line-height: 1.2;
}

.eco-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eco-header__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--v3-whatsapp);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.eco-header__whatsapp:hover {
    background: var(--v3-whatsapp-hover);
}

.eco-nav-toggle {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    background: var(--paper);
    cursor: pointer;
    padding: 0;
}

.eco-nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: var(--v3-ink);
}

.eco-nav-mobile-panel {
    /* Ancho/centrado vienen de .full-bleed > .content-inner (base.css), ver
       .eco-header__inner arriba. */
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 18px;
    border-top: 1px solid var(--v3-border);
    background: var(--paper);
}

.eco-nav-mobile-panel__link {
    display: block;
    padding: 12px 4px;
    color: var(--v3-ink);
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1px solid var(--v3-border);
    text-decoration: none;
}

.eco-nav-mobile-panel__link:hover {
    color: var(--blueprint);
}

.eco-nav-mobile-panel__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 12px;
    border-radius: var(--v3-radius-sm);
    background: var(--amber);
    text-decoration: none;
    color: var(--ink) !important;
    font-weight: 800;
}