/* Variante de presentación: cabecera clara para comparar con la versión original. */
:root {
    --header-light: #F3F5F7;
    --header-border: #D9DEE5;
    --header-ink: #364152;
    --header-ink-muted: #596579;
    --brand-green-primary: #3F7898;
    --brand-green-vibrant: #2F617E;
    --brand-green-dark: #244F68;
    --green: #3F7898;
    --green-dark: #244F68;
    --accent-glow: rgba(63, 120, 152, .25);
}

header {
    background: var(--header-light) !important;
    border-bottom: 1px solid var(--header-border) !important;
    backdrop-filter: none !important;
}

header .logo-text,
header .brand,
header .brand span {
    color: var(--header-ink) !important;
}

header .logo-text,
header .brand span {
    border-color: rgba(54, 65, 82, .28) !important;
}

header .nav-links a {
    color: var(--header-ink-muted) !important;
}

header .back {
    color: var(--header-ink-muted) !important;
}

header .nav-links a:hover,
header .nav-links a.active,
header .back:hover {
    color: var(--header-ink) !important;
}

header .lang-selector {
    background: rgba(255, 255, 255, .7) !important;
    border-color: #C8CFD8 !important;
}

header .lang-btn {
    color: var(--header-ink-muted) !important;
}

header .lang-btn.active,
header .lang-btn:hover {
    background: var(--header-ink) !important;
    color: #FFF !important;
}

header .mobile-menu-toggle {
    border-color: #C8CFD8 !important;
    background: rgba(255, 255, 255, .72) !important;
    color: var(--header-ink) !important;
}

header .mobile-menu-toggle:hover,
header .mobile-menu-toggle:focus-visible {
    background: #FFF !important;
    outline-color: var(--header-ink) !important;
}

/* CTAs solicitados en la variante clara: azul marino de la identidad visual. */
.btn-header,
.button,
#contact-form > button[type="submit"] {
    background: #0F172A !important;
    color: #FFF !important;
}

.btn-header:hover,
.button:hover,
#contact-form > button[type="submit"]:hover {
    background: #1E293B !important;
}

/* Prueba cromática: sustituye los acentos verdes por azules sobrios. */
.btn-header {
    box-shadow: 0 5px 18px rgba(15, 23, 42, .22) !important;
}

.btn-header:hover {
    box-shadow: 0 6px 22px rgba(15, 23, 42, .28) !important;
}

.btn-primary-hero {
    box-shadow: none !important;
}

.btn-primary-hero:hover {
    box-shadow: none !important;
}

.badge {
    border-color: rgba(63, 120, 152, .8) !important;
}

.hero h1 span,
.page-hero h1 span,
.eyebrow,
.nima-label,
.checks li::before {
    color: #9CC7DB !important;
}

.hero p {
    color: #DCECF2 !important;
}

.service-icon,
.detail-icon,
.location-tag,
.cta,
.summary {
    background: #EAF3F7 !important;
}

.location-tag,
.detail-icon {
    color: var(--brand-green-dark) !important;
}

.input:focus,
input:focus,
textarea:focus {
    border-color: var(--brand-green-primary) !important;
    box-shadow: 0 0 0 3px rgba(63, 120, 152, .16) !important;
}

.form-status.success {
    background: #EAF3F7 !important;
    color: #244F68 !important;
}

/* Prueba de marca en el titular de Contacto. El texto sigue en el HTML para accesibilidad. */
.contact-copy h2 span {
    display: inline-block;
    width: 142px;
    height: 42px;
    margin-left: .12em;
    vertical-align: middle;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    background: url('assets/images/logo-kensu.webp') center / cover no-repeat;
}

@media (max-width: 560px) {
    .contact-copy h2 span {
        width: 120px;
        height: 36px;
    }
}

.embedded-image-card,
.cert-card,
.iso-badge-box,
.visual-placeholder,
.story-visual-placeholder {
    border-color: rgba(63, 120, 152, .3) !important;
}

.iso-badge-box h3 {
    color: var(--brand-green-primary) !important;
}

.iso-action-primary {
    color: #FFF !important;
    background-color: var(--brand-green-primary) !important;
}

.commitment-card:hover,
.pillar-box:hover {
    border-color: var(--brand-green-primary) !important;
}

.feature-checklist li span {
    color: var(--brand-green-primary) !important;
}

.mobile-menu-toggle:focus-visible {
    outline-color: #9CC7DB !important;
}

/* La navegación móvil abierta conserva el mismo fondo claro. */
@media (max-width: 900px) {
    header .nav-right .nav-links {
        background: rgba(243, 245, 247, .98) !important;
        border-color: var(--header-border) !important;
        box-shadow: 0 18px 45px rgba(15, 23, 42, .16) !important;
    }
    header .nav-right .nav-links a:hover,
    header .nav-right .nav-links a:focus-visible,
    header .nav-right .nav-links a.active {
        background: rgba(54, 65, 82, .1) !important;
    }
}