.hero-bg {
    background:
        url('../images/hero_bg.jpg') center/cover no-repeat,
        linear-gradient(180deg, #F4F4F6 0%, #DEE5F0 100%);
}

.service-card-overlay {
    background: linear-gradient(180deg,
        rgba(15, 23, 56, .15) 0%,
        rgba(15, 23, 56, .55) 50%,
        rgba(15, 23, 56, .95) 100%);
}

.card-mis-estudios {
    background:
        url('../images/bg_mis_estudios.png') right bottom / auto 105% no-repeat,
        #EEF2FA;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 56, .12);
}

.card-portal-doctores {
    background:
        url('../images/bg_portal_doctores.png') right bottom / auto 105% no-repeat,
        #FCEEEA;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 56, .12);
}

.site-header {
    position: relative;
    z-index: 50;
    background: transparent;
    box-shadow: none;
    transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(15, 23, 56, .06);
    animation: slideDown .3s ease;
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.form-input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 0;
    padding: 12px 0;
    transition: border-color .2s;
}
.form-input:focus {
    outline: none;
    border-bottom-color: #E11D27;
}
.form-input::placeholder { color: #9CA3AF; }
select.form-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%239CA3AF' stroke-width='2' d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
}

.doctor-flip-wrapper {
    height: 550px;
}
.doctor-card {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 900px;
}
.card-compact,
.card-expanded {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    overflow: hidden;
}
.card-compact {
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: rotateY(0deg);
    opacity: 1;
    transition: transform .3s ease-in, opacity 0s 0s;
    z-index: 2;
}
.card-expanded {
    background: #F0F3FA;
    border: 1px solid #E11D27;
    box-shadow: 0 1px 0 rgba(225, 29, 39, .1), 0 24px 48px -16px rgba(15, 23, 56, .15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotateY(-90deg);
    opacity: 0;
    transition: transform .3s ease-out .3s, opacity 0s .3s;
    pointer-events: none;
    z-index: 1;
}
.doctor-flip-wrapper:hover .card-compact,
.doctor-flip-wrapper.flipped .card-compact {
    transform: rotateY(90deg);
    opacity: 0;
    transition: transform .3s ease-in, opacity 0s .3s;
    pointer-events: none;
}
.doctor-flip-wrapper:hover .card-expanded,
.doctor-flip-wrapper.flipped .card-expanded {
    transform: rotateY(0deg);
    opacity: 1;
    transition: transform .3s ease-out .3s, opacity 0s .3s;
    pointer-events: auto;
    z-index: 3;
}

.card-photo {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    background: #E2E8F0;
}
.card-photo img { object-position: top; }
.card-name-area {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1023px) {

    .doctor-flip-wrapper { height: auto; }
    .doctor-card { position: static; height: auto; perspective: none; display: flex; flex-direction: column; }
    .card-compact, .card-expanded {
        position: static;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
        border-radius: 0;
    }
    .card-compact { border-radius: 1rem 1rem 0 0; }
    .card-expanded {
        border-radius: 0 0 1rem 1rem;
        border: 1px solid #E5E7EB;
        border-top: none;
        box-shadow: none;
    }

    .card-photo { height: 300px; }

    .card-name-area { display: none; }

    .spec-label { color: #E11D27 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .22em !important; text-transform: uppercase !important; }
}
@media (max-width: 767px) {

    .stat-cell { flex-direction: column !important; gap: 8px; }
    .stat-label { position: static !important; text-align: center; }
    .num-outline { font-size: 52px; }

    .overlap-cards { margin-bottom: 0 !important; }
    .servicios-overlap-top { padding-top: 2rem !important; }

    .svc-grid article { aspect-ratio: auto !important; min-height: 320px; }

    .hero-inner { padding-bottom: 2.5rem !important; }

    .team-grid .doctor-flip-wrapper { width: 80%; margin-left: auto; margin-right: auto; }
}

@media (max-width: 639px) {
    .hero-cta-wrap { flex-direction: row !important; flex-wrap: wrap; }
    .hero-cta-wrap a { padding-left: 1.25rem !important; padding-right: 1.25rem !important; font-size: 14px !important; }
}