:root {
    color-scheme: light;
    --color-green-strong: #4d635f;
    --color-green-light: #829995;
    --color-green-light-transparent: rgba(130, 153, 149, 0.14);
    --color-green-light-transparent-70: rgba(130, 153, 149, 0.7);
    --color-green-strong-dark: #3b514b;
    --tw-shadow-color-neutral: rgba(15, 23, 42, 0.08);
}

body {
    color: #0f172a;
}

.hero-overlay-green {
    background: linear-gradient(90deg, rgba(130, 153, 149, 0.95) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(130, 153, 149, 0.8) 100%);
}

body.page-main,
body.page-turnos,
body.page-panel,
body.page-turnos-reservados {
    background-color: #829995;
}

body.page-contacto {
    background-color: #829995;
}

body.page-ooss {
    background-color: #829995;
}

body.page-resultados {
    background-color: #829995;
}

.nav-link {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    color: #334155;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.nav-link:hover {
    background-color: #829995;
    color: #4d635f;
}

.nav-link-active {
    background-color: #4d635f;
    color: #f8fafc;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(77, 99, 95, 0.2);
}

#mainMenuMobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#mainMenuMobile.menu-open {
    max-height: 400px;
}

@media (max-width: 767px) {
    header nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 64px;
        padding-top: 0;
        padding-bottom: 0;
    }

    header nav > a {
        width: auto !important;
        max-width: 72%;
        height: auto !important;
        min-width: 0;
        margin: 0 !important;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    header nav > a img {
        width: 100% !important;
        max-width: 260px;
        height: auto !important;
        min-width: 0;
        max-height: 64px;
        margin: 0 !important;
        border-radius: 0.7rem;
        object-fit: contain;
        background-color: #f4f5f7 !important;
        display: block;
    }

    #menuToggle {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
        min-height: 48px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        border-radius: 9999px !important;
        flex-shrink: 0;
        background-color: rgba(130, 153, 149, 0.12);
        border: 1px solid rgba(77, 99, 95, 0.18);
        box-shadow: none;
        align-self: center;
    }

    #menuToggle svg {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }
}

.aos {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.aos.visible {
    opacity: 1;
    transform: translateY(0);
}

.aos-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.aos-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.aos-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.aos-right.visible {
    opacity: 1;
    transform: translateX(0);
}

body.page-main #especialidades .grid > div:hover {
    background-color: #829995;
    border-color: #829995;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(130, 153, 149, 0.16);
}

body.page-main #especialidades .grid > div:hover h3 {
    color: #4d635f;
}

.field-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

/* Override Tailwind emerald utilities with the new custom green palette */
.bg-emerald-50 {
    background-color: var(--color-green-light) !important;
}
.bg-emerald-50\/70,
.from-emerald-50,
.from-emerald-50\/95,
.to-emerald-100,
.to-emerald-100\/80,
.via-emerald-100,
.bg-emerald-50\/95 {
    background-color: var(--color-green-light) !important;
}
.border-emerald-100,
.border-emerald-200 {
    border-color: var(--color-green-light) !important;
}
.text-emerald-700,
.text-emerald-800,
.text-emerald-900 {
    color: var(--color-green-strong) !important;
}
.bg-emerald-600 {
    background-color: var(--color-green-strong) !important;
}
.hover\:bg-emerald-50:hover {
    background-color: var(--color-green-light) !important;
}
.hover\:bg-emerald-700:hover {
    background-color: var(--color-green-strong-dark) !important;
}
.hover\:text-white:hover {
    color: #f8fafc !important;
}
.focus\:ring-emerald-500:focus,
.ring-emerald-500 {
    --tw-ring-color: var(--color-green-strong) !important;
}
.shadow-emerald-100\/40,
.shadow-emerald-100\/50,
.shadow-emerald-100\/60,
.shadow-emerald-100\/70,
.shadow-emerald-200,
.shadow-emerald-200\/50 {
    --tw-shadow-color: var(--tw-shadow-color-neutral);
}

#inicio >div>div> h1{
    color: white;
    font-family:Relicta;
}

.mt-4 rounded-2xl bg-emerald-50 border border-emerald-200 px-4 py-3{
    background-color: white;
}