/*
 * Marca y cabecera de las landings (plataforma y clínicas). Estructural: colores vía variables del tema.
 * Principios: el nombre se recorta con puntos suspensivos antes de empujar a nadie; las partes secundarias
 * y los botones nunca se parten ni se montan; si falta una parte no queda hueco (flex + gap, sin espacios fijos).
 */
.brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; max-width: 100%; text-decoration: none; color: var(--primary-text, var(--primary, #0256b4)); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.brand__logo { flex: none; height: 2.5rem; width: auto; max-width: 9rem; object-fit: contain; }
.brand__icon { flex: none; width: 2rem; height: 2rem; }
.brand__text { display: flex; align-items: baseline; gap: .3em; min-width: 0; }
.brand__name { flex: 0 1 auto; min-width: min(4ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand__part { flex: none; white-space: nowrap; color: var(--darker, #0f172a); font-weight: 600; }

/* Cabecera del panel: el nombre de la plataforma nunca se recorta; si la marca completa es muy larga, lo que
   cede es la parte secundaria («Health Platform»). La columna de la cabecera crece para que quepa. */
.abigail-header-brand .brand { max-width: 24rem; }
.abigail-header-brand .brand__name { flex: none; min-width: auto; overflow: visible; }
.abigail-header-brand .brand__part { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* La cabecera usa más ancho que el contenido (la marca y los botones necesitan aire en pantallas grandes). */
#main-header > div { width: min(1560px, 98vw); padding-inline: clamp(1rem, 2.2vw, 3rem); margin-inline: auto; box-sizing: border-box; }
#main-header .landing-nav { container-type: inline-size; display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-width: 0; }
#main-header .brand { flex: 0 1 auto; font-size: clamp(1.1rem, 1.6vw + .5rem, 1.5rem); max-width: min(32rem, 100%); }
#main-header .nav-links { flex: 1 1 auto; display: flex; justify-content: center; gap: clamp(.9rem, 1.6vw, 2rem); min-width: max-content; margin: 0; padding: 0 1.25rem; white-space: nowrap; list-style: none; }
#main-header .nav-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
#main-header .nav-actions .btn { white-space: nowrap; padding: .6rem .95rem; font-size: .9rem; border-radius: 12px; }
#main-header .nav-actions .btn-primary { padding-inline: 1.1rem; }

/* Se decide por el ancho REAL de la cabecera (no del viewport): sin espacio para todo, primero se retiran los enlaces. */
@container (max-width: 1300px) { #main-header .nav-links { display: none !important; } #main-header .nav-actions { margin-left: auto; } }
@container (max-width: 860px) { #main-header .nav-action--secondary { display: none !important; } }
@container (max-width: 560px) {
    #main-header .nav-actions .btn { padding: .5rem .85rem; font-size: .85rem; }
    /* En móvil la marca cede espacio (el nombre se recorta con …) y los botones nunca salen de pantalla. */
    #main-header .brand { flex: 1 1 auto; max-width: none; }
    #main-header .brand__part { flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #main-header .nav-actions { margin-left: 0; }
}
@container (max-width: 380px) { #main-header .nav-action--login { display: none !important; } }

/* Pie: las columnas del grid no deben crecer con el contenido (un nombre largo ensanchaba toda la página en móvil). */
.f-grid > * { min-width: 0; }
.f-brand { min-width: 0; }
.f-brand .brand { max-width: 100%; }

/* Accesibilidad (WCAG 2.1 AA): contraste mínimo 4.5:1 en botones, selector de idioma y textos de las landings,
   incluso con el color primario que elija cada clínica (se oscurece con los tokens derivados). */
body .btn-primary { background: var(--primary-600, var(--primary)); }
body .btn-primary:hover { background: var(--primary-700, var(--primary-dark)); }
body .lang-btn { color: var(--gray-600, #475569); }
body .lang-btn.active { color: var(--primary-text, var(--primary)); }
body .feature-card-e2e p { color: #94a3b8; } /* sobre fondo oscuro de la tarjeta */
body .section-tag { color: var(--primary-text, var(--primary)); }