/* =========================================================================
   edu-v3.css — header/nav portados del handoff docs/diseno3/Eco-Urban-Home-v4-2.html

   El handoff completo (exportado desde la herramienta de diseño) traía casi
   todo el estilo como atributos `style="..."` por elemento, agrupado por
   componente en el orden en que aparecía ahí (topbar → header/nav → hero →
   bifurcación de servicios → credenciales/reseñas → otros servicios →
   contacto/formulario → footer → WhatsApp flotante → consentimiento de
   cookies). De todo eso, lo único que terminó usándose en el sitio real es
   el header/nav (`.eco-header*`, `.eco-nav-*`) — el resto de las páginas se
   construyó con los tokens y componentes propios de base.css/site.css, no
   con el resto del handoff. Ese resto (~760 líneas: eco-hero, eco-forks,
   eco-credibility, eco-other-services, eco-contact/eco-form, eco-footer,
   eco-whatsapp-float, eco-consent) se podó de acá porque no lo referenciaba
   ningún .cshtml y se descargaba muerto en cada página. Si hace falta de
   nuevo, está en el historial de git de este archivo y en el handoff
   original bajo docs/diseno3/.

   No duplica el reset global (*, body, a, h1-h3, input/select/button, img)
   porque base.css ya lo cubre — ver base.css:61 en adelante. Las reglas
   `.eco-nav-desktop` / `.eco-nav-toggle` / `.eco-nav-mobile-panel` sí se
   copian tal cual porque son el único CSS "de verdad" (no inline) que traía
   el handoff, para el toggle de nav mobile.

   Fuentes: el handoff usa Archivo (ya cargada por el sitio) + Karla (nueva,
   reemplaza a Public Sans como fuente de cuerpo en estas reglas). Sumar
   Karla al link de Google Fonts de _Layout.cshtml para que el header tenga
   la tipografía real; los @font-face con src a hashes del bundler de
   diseño no son utilizables tal cual y por eso no se copiaron. */

:root {
    /* Color: alias de los tokens reales de base.css (docs/paleta-logo1.md),
       no valores propios — antes esta paleta tenía su propio azul/dorado/
       verde con hex ligeramente distintos a los de base.css para el mismo
       rol, y las dos derivaban del mismo logo. Ahora hay una sola fuente de
       verdad; ver el comentario de :root en base.css. */
    --v3-navy: var(--blueprint);
    --v3-navy-text: #dde2f2;    /* texto sobre navy — tinte propio, no es color de marca */
    --v3-navy-text-muted: #a8b2cc;
    --v3-navy-text-dim: #ccd3e8;
    --v3-gold: var(--amber);           /* acentos sobre navy: eyebrow, tagline */
    --v3-amber: var(--amber);          /* CTA del header/nav */
    --v3-blue: var(--blueprint);       /* fork__cta — mismo azul de acción del sitio */
    --v3-green: var(--green-deep);     /* fork__kicker — texto, no fondo: necesita el matiz oscuro */
    --v3-whatsapp: #2fa93a;            /* excepción cromática deliberada del botón flotante, no es color de marca */
    --v3-whatsapp-hover: #25842e;
    --v3-ink: var(--ink);              /* mismo rol que --ink de base.css */
    --v3-muted: var(--ink-soft);       /* mismo rol que --ink-soft de base.css */
    --v3-border: var(--line-soft);     /* mismo rol que --line-soft de base.css */

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

    --v3-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --v3-font-body: "Karla", 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 mobile (única regla no-inline del handoff, verbatim) -- */

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

@media (max-width: 899px) {
    .eco-nav-desktop { display: none; }
    .eco-nav-toggle { display: flex; }
    .eco-nav-mobile-panel.is-open { display: flex !important; }
}

/* -- Header / nav -- */

.eco-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(57, 68, 127, .96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.eco-header__inner {
    width: var(--v3-content-width);
    margin: auto;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.eco-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

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

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

.eco-header__wordmark {
    font-family: var(--v3-font-display);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    line-height: 1;
}

.eco-header__tagline {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--v3-gold);
    line-height: 1.3;
}

.eco-header__nav {
    align-items: center;
    gap: 22px;
    font-size: 15px;
    font-weight: 600;
    flex-wrap: wrap;
}

.eco-header__nav a {
    color: var(--v3-navy-text);
    text-decoration: none;
}

.eco-header__nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--v3-radius-sm);
    background: var(--v3-amber);
    color: var(--v3-navy) !important;
    font-weight: 800;
    text-decoration: none;
}

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

.eco-nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
}

.eco-nav-mobile-panel {
    flex-direction: column;
    gap: 2px;
    padding: 8px min(4%, 20px) 18px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: var(--v3-navy);
}

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

.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(--v3-amber);
    text-decoration: none;
    color: var(--v3-navy);
    font-weight: 800;
}