/* ========================================================================= LaCardio · Header FUNDACIÓN CARDIOINFANTIL Capa de DELTAS sobre lc-header. Se carga SIEMPRE después de `componentes/lc-header/styles.css`, nunca en su lugar. Todo va scopeado bajo `.lc-fundacion` (clase en el ) para que las dos variantes de header puedan convivir en el catálogo sin pisarse. Diferencias contra la variante clínica (fuente: componentes-marca/header/ header-fundacion.html): · Logo Fundación = PRIMARIO (izquierda, más grande) · Logo LaCardio = SECUNDARIO (derecha, más pequeño) · Estados de navegación (hover/active) en ROJO, no en navy · CTA "Dona ahora" (.lc-btn-dona) en vez de "Agendar cita" · Franja de acciones del menú mobile y bottom-nav en ROJO ========================================================================= */ .lc-fundacion { /* La variante Fundación usa el azul 50 como fondo del topbar. */ --lc-bg-topbar: #E5EBF6; } /* — Navbar desktop ————————————————————————————————————————— */ /* El logo primario (Fundación) va 2px más alto que el de la clínica. */ .lc-fundacion .lc-navbar__logo img { height: 44px; } /* Logo LaCardio como marca secundaria, al extremo derecho. */ .lc-fundacion .lc-navbar__clinica { padding-bottom: 18px; flex-shrink: 0; } .lc-fundacion .lc-navbar__clinica img { height: 36px; width: auto; display: block; } /* Estados de navegación en rojo de marca. */ .lc-fundacion .lc-navbar__item:hover { color: var(--lc-brand-secondary); border-bottom-color: rgba(228, 0, 70, 0.2); } .lc-fundacion .lc-navbar__item--active { color: var(--lc-brand-secondary); border-bottom-color: var(--lc-brand-secondary); } /* — CTA "Dona ahora" ——————————————————————————————————————— */ .lc-btn-dona { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--lc-bg-surface); border: 1px solid var(--lc-brand-secondary); border-radius: 6px; height: 42px; padding: 0 16px; font-family: var(--lc-font-body); font-size: var(--lc-size-btn); font-weight: 700; color: var(--lc-brand-secondary); text-decoration: none; letter-spacing: -0.28px; white-space: nowrap; cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease; } .lc-btn-dona:hover { background: #FEF0F3; } .lc-btn-dona:active { transform: scale(0.96) translateY(1px); } .lc-btn-dona:focus-visible { outline: 2px solid var(--lc-brand-secondary); outline-offset: 2px; } /* — Header mobile —————————————————————————————————————————— Se invierte la jerarquía: Fundación grande a la izquierda, LaCardio pequeño a la derecha. */ .lc-fundacion .lc-mobile-logo-fundacion img { height: 42px; } .lc-fundacion .lc-mobile-logo-clinic img { height: 31px; } /* — Menú mobile ————————————————————————————————————————————— */ .lc-fundacion .lc-mobile-menu__item:hover { color: var(--lc-brand-secondary); } .lc-fundacion .lc-mobile-menu__item--active { color: var(--lc-brand-secondary); } .lc-fundacion .lc-mobile-menu__item:hover svg, .lc-fundacion .lc-mobile-menu__item--active svg { color: var(--lc-brand-secondary); } .lc-fundacion .lc-mobile-menu__secondary-item:hover { color: var(--lc-brand-secondary); } /* Franja de acciones en rojo. */ .lc-fundacion .lc-mobile-menu__actions { background: var(--lc-brand-secondary); } .lc-fundacion .lc-mobile-menu__action-btn:hover { background: rgba(255, 255, 255, 0.10); } /* — Bottom nav —————————————————————————————————————————————— Píldora roja. La variante Fundación la limita a 327px (spec del componente); la clínica la deja crecer a todo el ancho disponible. */ .lc-fundacion .lc-mobile-bottom-nav { background: var(--lc-brand-secondary); max-width: 327px; }