/* Eftel Cloud - Ajustes de marca para el mega-menú
   Producción usa azul (--ec-primary). Aquí lo alineamos a la
   paleta naranja de la marca local (--ef-orange). */
:root {
    --ec-primary: #ff9900;
    --ec-primary-600: #ec7211;
    --ec-primary-soft: rgba(255, 153, 0, 0.10);
    --ec-accent: #ff9900;
    --ec-body: #ff9900;
    --ec-text: #232f3e;
    --ec-muted: #545b64;
    --ec-border: #e6e8eb;
}

/* Cabecera siempre sólida (no transparente sobre el hero). */
.main-header-menu-wrap {
    background: #232f3e;
}

/* El header es fixed (position: fixed; top:0). Cada sección superior ya
   reserva el alto del header con su propio padding-top (el hero y el
   pagehead lo incluyen), así que NO usamos padding-top en el body: ese
   espacio provocaba la franja blanca sobre la cabecera cuando el header
   quedaba anclado al contenedor .main en lugar del viewport (por un
   transform/filter en algún ancestro). margin:0 quita el margen por
   defecto del navegador. */
body {
    margin: 0;
}

html.dark-mode .main-header-menu-wrap,
html.dark-mode .main-header-menu-wrap.bg-transparent {
    background: rgba(26, 29, 35, 0.97) !important;
}

/* Tarjetas del mega-menú: acentos naranjas */
.ec-card:hover,
.ec-card:focus-visible {
    background: var(--ec-primary-soft);
    border-color: rgba(255, 153, 0, 0.18);
}

.ec-card:hover .ec-card__icon {
    background: var(--ec-primary);
    color: #fff;
}

.ec-card:hover .ec-card__title {
    color: var(--ec-primary);
}

.ec-panel__list a:hover,
.ec-panel__list a:focus-visible {
    background: var(--ec-primary-soft);
    color: var(--ec-primary);
}

.ec-btn--primary {
    background: linear-gradient(135deg, #ffb84d, #ff9900);
    box-shadow: 0 6px 18px -8px rgba(255, 153, 0, 0.6);
}

.ec-btn--primary:hover,
.ec-btn--primary:focus-visible {
    box-shadow: 0 10px 22px -8px rgba(255, 153, 0, 0.7);
}