/* InkedAway rebrand — teal (confianza / identidad) + magenta (acción / energía del logo) */
:root {
    --ink-primary: #00a9b5;
    --ink-primary-soft: #76c7d1;
    --ink-primary-muted: #ade0e6;
    --ink-accent: #e91e63;
    --ink-accent-dark: #c2185b;
    --ink-surface: #f7f9fb;
    --ink-surface-alt: #f8f9fa;
}

/* —— Utilities —— */
.text-ink-primary {
    color: var(--ink-primary) !important;
}
.text-ink-accent {
    color: var(--ink-accent) !important;
}
.bg-ink-primary {
    background-color: var(--ink-primary) !important;
}
.bg-ink-accent {
    background-color: var(--ink-accent) !important;
}
.border-ink-primary {
    border-color: var(--ink-primary) !important;
}
.border-bottom-ink-primary {
    border-bottom: 2px solid var(--ink-primary);
}
.border-bottom-ink-accent {
    border-bottom: 2px solid var(--ink-accent);
}

/* —— Primary CTAs: relleno magenta (como la pastilla del logo) —— */
.page .btn-mod:not(.btn-w):not(.text-black):not(.btn-gray):not(.btn-glass):not(.btn-border):not(.btn-border-c):not(.btn-border-w):not(.btn-color):not(.ink-btn-learn),
.page a.btn-mod:not(.btn-w):not(.text-black):not(.btn-gray):not(.btn-glass):not(.btn-border):not(.btn-border-c):not(.btn-border-w):not(.btn-color):not(.ink-btn-learn) {
    background: var(--ink-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.page .btn-mod:not(.btn-w):not(.text-black):not(.btn-gray):not(.btn-glass):not(.btn-border):not(.btn-border-c):not(.btn-border-w):not(.btn-color):not(.ink-btn-learn):hover,
.page .btn-mod:not(.btn-w):not(.text-black):not(.btn-gray):not(.btn-glass):not(.btn-border):not(.btn-border-c):not(.btn-border-w):not(.btn-color):not(.ink-btn-learn):focus,
.page a.btn-mod:not(.btn-w):not(.text-black):not(.btn-gray):not(.btn-glass):not(.btn-border):not(.btn-border-c):not(.btn-border-w):not(.btn-color):not(.ink-btn-learn):hover,
.page a.btn-mod:not(.btn-w):not(.text-black):not(.btn-gray):not(.btn-glass):not(.btn-border):not(.btn-border-c):not(.btn-border-w):not(.btn-color):not(.ink-btn-learn):focus {
    background: var(--ink-accent-dark) !important;
    color: #fff !important;
}

/* —— Secundario hero: contorno teal —— */
.page a.btn-mod.ink-btn-learn {
    background: transparent !important;
    color: var(--ink-primary) !important;
    border: 2px solid var(--ink-primary) !important;
}

.page a.btn-mod.ink-btn-learn:hover,
.page a.btn-mod.ink-btn-learn:focus {
    background: rgba(0, 169, 181, 0.12) !important;
    color: var(--ink-primary) !important;
    border-color: var(--ink-primary) !important;
}

/* —— Botones blanco sobre fondo oscuro: hover magenta —— */
.page .light-content .btn-mod.btn-w:hover,
.page .light-content .btn-mod.btn-w:focus,
.page .bg-dark .btn-mod.btn-w:hover,
.page .bg-dark .btn-mod.btn-w:focus {
    background: var(--ink-accent) !important;
    color: #fff !important;
    border-color: var(--ink-accent) !important;
    box-shadow: 0 8px 24px rgba(233, 30, 99, 0.35);
}

/* —— Menú: mismo font-weight en reposo, hover y activo (el tema pasaba 500→600 y movía el layout) —— */
.page .main-nav .inner-nav ul li > a,
.page .main-nav .inner-nav ul li > a:hover,
.page .main-nav .inner-nav ul li.active > a {
    font-weight: 600;
}

/* —— Navegación: hover / ítem activo teal —— */
.page .main-nav .inner-nav ul li > a:hover,
.page .main-nav .inner-nav ul li.active > a {
    color: var(--ink-primary) !important;
}

/* —— Títulos de sección: barra teal → magenta —— */
.page #main h1.section-title,
.page #main h2.section-title {
    position: relative;
    padding-bottom: 0.28em;
}

.page #main h1.section-title::after,
.page #main h2.section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 0.45em;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ink-primary), var(--ink-accent));
}

/* Centrar barra con el texto cuando el título va centrado (text-align no centra bloques ::after) */
.page #main .text-center .section-title,
.page #main h1.section-title.text-center,
.page #main h2.section-title.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 992px) {
    .page #main .text-lg-start .section-title {
        align-items: flex-start;
    }
}

/* —— Hero: indicador scroll —— */
.page .home-section .scroll-down:before {
    box-shadow:
        0 0 0 3px rgba(233, 30, 99, 0.22),
        0 3px 5px 0 rgba(0, 0, 0, 0.12);
}

.page .home-section .scroll-down:hover:before {
    box-shadow:
        0 0 0 3px rgba(0, 169, 181, 0.35),
        0 5px 7px 0 rgba(0, 0, 0, 0.2);
}

/* —— Volver arriba —— */
.page a.link-to-top:hover {
    background: var(--ink-accent);
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.35);
}

.page a.link-to-top:hover .link-to-top-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* —— Formularios: foco teal —— */
.page #main .form-control:focus {
    border-color: var(--ink-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 169, 181, 0.22);
}