/* ===== TEMA DRA. ALI (alineado a draali.com.mx) =====
   Se carga al final para sobreescribir estilos anteriores. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&display=swap');

:root {
    --navy: #12264B;
    --navy-2: #1c3a6e;
    --accent: #00b4d8;
    --accent-dark: #0096c7;
    --ink: #1f2a44;
    --muted: #5b6b86;
    --bg: #f6f8fc;
    --card: #ffffff;
    --line: #e3e9f3;
    --emergency: #d92d20;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(18, 38, 75, 0.08);
}

body {
    background: var(--bg);
    color: var(--ink);
}

h1, h2, .hero-title, .section-title h2 {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--navy);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2 em, h1 em, .membresia-card h3 em {
    font-style: italic;
    color: var(--accent-dark);
}

/* ---- Encabezado ---- */
header {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 16px rgba(18, 38, 75, 0.06) !important;
}
.nav-menu a { color: var(--navy) !important; font-weight: 500; }
.nav-menu a:hover { color: var(--accent-dark) !important; }

/* ---- Hero ---- */
.hero {
    background:
        radial-gradient(900px 400px at 85% 10%, rgba(0, 180, 216, 0.14), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}
.hero-title { color: var(--navy); }
.hero-subtitle { color: var(--muted); font-weight: 400; }

/* ---- Títulos de sección ---- */
.section-title h2 { color: var(--navy); font-size: clamp(30px, 4vw, 44px); }
.section-title h2::after { background: var(--accent); height: 3px; border-radius: 3px; }
.section-title p { color: var(--muted); }
.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 180, 216, 0.12);
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Tarjetas generales ---- */
.clinicas-content, .valor-item, .servicio-item {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: var(--card);
}

/* ---- Membresías ---- */
.beneficios-section {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 80px 24px;
    margin: 60px auto;
}
.beneficios-section:hover { box-shadow: none; transform: none; }

.membresias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 980px;
    margin: 0 auto;
    align-items: stretch;
}
.membresia-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 30px 30px;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.membresia-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18, 38, 75, 0.14); }
.membresia-destacada { border: 2px solid var(--accent); }
.membresia-badge {
    position: absolute;
    top: -14px; left: 28px;
    background: var(--navy);
    color: #fff;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.membresia-card h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    color: var(--navy);
    margin-bottom: 6px;
}
.membresia-para { color: var(--muted); font-size: 15px; min-height: 48px; }
.membresia-precio { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; color: var(--muted); font-weight: 500; }
.membresia-precio .precio { font-family: 'Fraunces', Georgia, serif; color: var(--navy); font-size: 48px; line-height: 1; }
.membresia-nota { color: var(--muted); font-size: 14px; margin: 4px 0 20px; }

.membresia-card .beneficios-detalle { margin-bottom: 26px; flex: 1; }
.membresia-card .beneficios-detalle li { font-size: 15px; color: var(--ink); }
.membresia-card .beneficios-detalle li:before { background-color: var(--accent); border-radius: 50%; }

.btn-membresia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.btn-membresia:hover { background: var(--navy-2); transform: translateY(-2px); }
.membresia-destacada .btn-membresia { background: var(--accent); color: var(--navy); }
.membresia-destacada .btn-membresia:hover { background: var(--accent-dark); color: #fff; }

.membresias-legal { max-width: 980px; margin: 26px auto 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- Botones ---- */
.btn-servicios, .btn-enviar {
    background: var(--navy) !important;
    color: #fff !important;
    border-radius: 999px !important;
}
.btn-servicios:hover, .btn-enviar:hover { background: var(--navy-2) !important; }

/* ---- Footer ---- */
.footer { background: var(--navy); border-top: 0; }
.footer::before, .footer::after { display: none; }

@media (max-width: 800px) {
    .membresias-grid { grid-template-columns: 1fr; }
    .membresia-para { min-height: 0; }
    .beneficios-section { padding: 50px 16px; }
}

/* ---- Tipografía base (como draali.com.mx) ---- */
html { scroll-behavior: smooth; }
body { font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
p, li { color: var(--ink); }
.hero-title {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.08;
    max-width: 14ch;
}
.hero-title em { font-style: italic; color: var(--accent-dark); font-weight: 500; }
.hero-subtitle { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 52ch; }
.hero-content { align-items: center; }

/* ---- Video del hero ---- */
.hero-video {
    flex: 0 0 auto;
    width: min(340px, 100%);
    border-radius: 24px;
    overflow: hidden;
    background: var(--navy);
    box-shadow: 0 24px 60px rgba(18, 38, 75, 0.28);
    border: 1px solid var(--line);
}
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
@media (max-width: 768px) {
    .hero-title { max-width: none; }
    .hero-video { width: min(300px, 100%); margin: 0 auto; }
}

/* Los spans de idioma heredaban Montserrat por el "*" global: forzar herencia en títulos */
h1 *:not(i), h2 *:not(i), .membresia-card h3 *:not(i) { font-family: inherit; }

/* Hero más compacto para que el video se vea completo al entrar */
.hero { min-height: 0; padding: 70px 50px 40px; }
.hero-title { max-width: 18ch; }
.hero-content { justify-content: space-between; gap: 40px; }
.hero-video { width: min(300px, 100%); }
@media (max-width: 768px) { .hero { padding: 40px 20px 20px; } }
.hero { padding-top: 230px; }
@media (max-width: 768px) { .hero { padding-top: 200px; } }

/* =====================================================
   RESPONSIVE (celular, tableta y computadora)
   ===================================================== */
/* Un solo scroll: solo el body recorta lo horizontal (se propaga al viewport); html NO debe tener overflow */
html { max-width: 100%; overflow: visible; }
body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* Logo: el HTML trae 150px en línea; se controla desde aquí */
.logo-container img { height: 84px !important; width: auto !important; }

/* Hero: separado del header fijo según su altura real */
.hero { padding-top: calc(var(--header-h, 200px) + 30px); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--navy);
    font-size: 20px;
    cursor: pointer;
    align-items: center; justify-content: center;
}

/* ---- Tableta y celular: menú hamburguesa ---- */
@media (max-width: 900px) {
    header, header.scrolled { padding: 6px 16px !important; }
    header > div:first-child { padding: 0 !important; margin: 0 0 4px !important; }
    header > div:first-child > div { justify-content: space-between !important; gap: 8px !important; }
    header > div:first-child a, header > div:first-child button {
        padding: 7px 12px !important; font-size: 12px !important; line-height: 1.2;
    }
    .nav-container { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
    .logo-container img { height: 52px !important; }
    .nav-toggle { display: inline-flex; }

    nav#navPrincipal {
        display: none;
        position: absolute;
        top: 100%; left: -16px; right: -16px;
        width: auto;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 18px 30px rgba(18, 38, 75, 0.14);
        padding: 8px 16px 16px;
        max-height: calc(100vh - var(--header-h, 120px));
        overflow-y: auto;
    }
    nav#navPrincipal.open { display: block; }
    nav#navPrincipal .nav-menu { flex-direction: column; gap: 0; }
    nav#navPrincipal .nav-menu li a {
        display: block;
        padding: 14px 4px;
        font-size: 16px;
        border-bottom: 1px solid var(--line);
    }
    nav#navPrincipal .nav-menu li a::after { display: none; }
    nav#navPrincipal .nav-menu li:last-child a { border-bottom: 0; }
}

@media (max-width: 480px) {
    header > div:first-child a span, header > div:first-child button span { font-size: 12px; }
    body { font-size: 16px; }
}

/* ---- Secciones ---- */
@media (max-width: 1024px) {
    section { padding: 70px 28px; }
}
@media (max-width: 768px) {
    section { padding: 50px 18px; }
    .hero { padding-left: 18px; padding-right: 18px; }
    .hero-content { flex-direction: column; text-align: center; }
    .hero-text { min-width: 0; }
    .hero-title { max-width: none; margin-left: auto; margin-right: auto; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .membresia-card { padding: 28px 20px 24px; }
    .membresia-precio .precio { font-size: 40px; }
}

/* Misión / Visión / Valores: el HTML fija 3 columnas en línea; se apilan en tableta y celular */
@media (max-width: 1024px) {
    .mvv-container { grid-template-columns: 1fr !important; }
    .mvv-card, .mvv-imagen { min-width: 0; max-width: 100%; }
}
@media (min-width: 701px) and (max-width: 1024px) {
    .mvv-container { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* animaciones.css fija .hero a 50vh/40vh y scripts.js le pone margen/padding en línea:
   aquí se neutraliza para que el hero crezca con su contenido y quede bajo el header fijo */
.hero {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: calc(var(--header-h, 120px) + 28px) !important;
    padding-bottom: 40px !important;
    align-items: flex-start;
}
.hero-container, .hero-content { height: auto; }

/* Ícono de menú dibujado con CSS (no depende de Font Awesome) */
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px;
    transition: transform .2s ease, background .2s ease;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle.is-open .bars { background: transparent; }
.nav-toggle.is-open .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) { .logo-container img { height: 64px !important; } }

/* Texto del footer en blanco sobre el azul marino */
.footer p, .footer li, .footer span, .footer a { color: #fff; }


/* =====================================================
   PORTADA (hero) como en draali.com.mx/clinica
   ===================================================== */
.hero {
    background:
        radial-gradient(circle at 100% 30%, transparent 0 220px, rgba(0,180,216,.07) 221px 222px, transparent 223px 300px, rgba(0,180,216,.06) 301px 302px, transparent 303px),
        #fff !important;
    align-items: flex-start;
}
.hero-container { max-width: 1180px; }
.hero-content { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 56px; text-align: left; }
.hero-text { flex: 1 1 0; min-width: 0; text-align: left; }

.hero-eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: #0b6b7c; margin-bottom: 18px;
}
.hero-eyebrow::before { content: ''; width: 22px; height: 1px; background: #0b6b7c; display: inline-block; }

.hero .hero-title, .hero .hero-title * {
    font-family: 'Inter Tight', 'Inter', 'Montserrat', system-ui, sans-serif !important;
}
.hero .hero-title {
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
    color: var(--navy); max-width: 11ch; margin-bottom: 26px;
}
.hero-mark {
    color: #0b6b7c; display: inline-block; position: relative; font-style: normal;
    background: linear-gradient(transparent 80%, #b9e8ef 80%, #b9e8ef 92%, transparent 92%);
    padding: 0 4px; margin: 0 -4px;
}
.hero-lead { font-family: 'Inter', 'Montserrat', sans-serif; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: #4a5a75; max-width: 52ch; margin-bottom: 28px; }
.hero-lead strong { color: var(--navy); font-weight: 700; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.btn-hero {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 26px; border-radius: 999px; font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-hero-primary { background: #0db1c9; color: var(--navy); box-shadow: 0 10px 24px rgba(13,177,201,.35); }
.btn-hero-primary:hover { background: #0aa0b6; transform: translateY(-2px); }
.btn-hero-ghost { background: #fff; color: var(--navy); border: 1px solid #cfd8e6; }
.btn-hero-ghost:hover { border-color: var(--navy); transform: translateY(-2px); }

.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 0 0; margin: 0; border-top: 1px solid var(--line); max-width: 520px; }
.hero-chips li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; background: #f3f8fa; border: 1px solid #dbe7ec;
    font-family: 'Inter', 'Montserrat', sans-serif; font-size: 13px; color: #4a5a75;
}
.hero-chips li svg { color: #0b6b7c; flex: none; }

.hero-media { flex: 0 0 auto; width: 288px; display: flex; flex-direction: column; gap: 14px; }
.hero-media .hero-video {
    width: 100%; border-radius: 28px; border: 1.5px solid var(--navy);
    box-shadow: 0 24px 50px rgba(18,38,75,.18); overflow: hidden; background: #fff;
}
.hero-callcard {
    display: flex; flex-direction: column; gap: 6px; text-decoration: none;
    padding: 18px 20px; border-radius: 18px; color: #fff;
    background: linear-gradient(135deg, #12264B 0%, #1b3a6e 100%);
    border: 1px solid #1f8fa6; box-shadow: 0 18px 36px rgba(18,38,75,.25);
    font-family: 'Inter', 'Montserrat', sans-serif;
}
.callcard-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.callcard-city { color: #4cc7dd; }
.callcard-phone { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: #fff; line-height: 1.1; }
.callcard-addr { font-size: 11px; color: #9fb2d0; }

@media (max-width: 900px) {
    .hero-content { flex-direction: column; align-items: stretch; gap: 36px; }
    .hero .hero-title { max-width: none; }
    .hero-media { width: min(300px, 100%); margin: 0 auto; }
}
@media (max-width: 480px) {
    .btn-hero { width: 100%; }
    .hero-chips { gap: 8px; }
}

/* Proporciones de la portada: texto y video más juntos, como en la referencia */
.hero-container { max-width: 1060px; }
.hero-content { justify-content: center; gap: 96px; }
.hero-text { flex: 0 1 560px; }
@media (max-width: 1000px) { .hero-content { gap: 48px; } }
@media (max-width: 900px) { .hero-content { gap: 36px; } .hero-text { flex: 1 1 auto; } }

/* =====================================================
   SERVICIOS: tarjetas compactas y modernas
   ===================================================== */
#servicios { padding-top: 70px; padding-bottom: 60px; }
#servicios .servicios-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 36px;
}
#servicios .servicio-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px !important;
    min-height: 0;
    text-align: left !important;
    background: #fff !important;
    backdrop-filter: none;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(18, 38, 75, .04) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
#servicios .servicio-item::before { display: none !important; }
#servicios .servicio-item:hover {
    transform: translateY(-2px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 8px 20px rgba(18, 38, 75, .09) !important;
}
#servicios .servicio-item h3 {
    display: flex !important; align-items: center; gap: 12px;
    margin: 0 !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--navy) !important;
    text-align: left;
}
#servicios .servicio-item h3::after { display: none !important; }
#servicios .servicio-item h3 span:not(.service-title-icon) { font-family: inherit; }
#servicios .servicio-item p { display: none; }

@media (max-width: 600px) {
    #servicios { padding-left: 16px; padding-right: 16px; }
    #servicios .servicios-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    #servicios .servicio-item { padding: 12px 14px !important; }
    #servicios .servicio-item h3 { font-size: 13px !important; }
}

#servicios .service-title-icon {
    flex: none; display: inline-flex !important; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 !important;
    border-radius: 10px; background: rgba(0, 180, 216, .1);
}
#servicios .service-title-icon i { font-size: 15px !important; color: var(--accent-dark) !important; transform: none !important; }
#servicios .servicio-item:hover .service-title-icon { background: var(--accent); }
#servicios .servicio-item:hover .service-title-icon i { color: #fff !important; }

#servicios .service-title-icon i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    line-height: 1;
}

/* La etiqueta va en su propio renglón, arriba del título */
.section-title .eyebrow { display: table; margin: 0 auto 16px; }
.section-title .eyebrow + h2 { display: block; }

/* Captcha del formulario de contacto */
.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-q { font-weight: 600; color: var(--navy); background: #eef7fb; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; white-space: nowrap; }
.captcha-row input#captcha { width: 90px !important; flex: 0 0 90px; text-align: center; }
.captcha-refresh { border: 1px solid var(--line); background: #fff; color: var(--accent-dark); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
.captcha-refresh:hover { background: #eef7fb; }

/* Video de portada: sin selección/arrastre ni menú de descarga */
.hero-video video { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hero-video video::-webkit-media-controls-enclosure { overflow: hidden; }

/* Iconos de servicios en SVG incrustado (no dependen de Font Awesome) */
#servicios .service-title-icon svg { width: 16px; height: 16px; display: block; fill: var(--accent-dark); transition: fill .2s; }
#servicios .servicio-item:hover .service-title-icon svg { fill: #fff; }