:root {
        --brand-primary: #c9a96e;
        --brand-gold: #c9a96e;
        --brand-gold-light: #e8d5a8;
        --brand-navy: #0d1f3c;
        --brand-navy-mid: #1e3a6e;
        --brand-bg: #f8f7f4;
        --brand-text: #e8f0fe;
        --brand-muted: #94a3b8;
        --brand-radius: 16px;

        /* === NOIR DORADO v2.0 — FONDOS Y SUPERFICIES === */
        --azul-noche:          #0a1628;
        --azul-profundo:       #112847;
        --azul-medio:          #1a3661;
        --azul-claro:          #2d4d7a;

        /* === NOIR DORADO v2.0 — DORADO === */
        --dorado:              #c9a96e;
        --dorado-claro:        #e0c896;
        --dorado-oscuro:       #a08749;

        /* === NOIR DORADO v2.0 — TEXTO === */
        --texto-principal:     #f5f5f0;
        --texto-secundario:    #a8a89e;
        --texto-deshabilitado: #6b6b65;

        /* === NOIR DORADO v2.0 — SEMANTIC === */
        --exito:               #5b8e5a;
        --advertencia:         #d4a574;
        --error:               #b54848;
        --info:                #5e7ba8;

        /* === NOIR DORADO v2.0 — UTILIDADES === */
        --dorado-sutil:        rgba(201, 169, 110, 0.2);
        --azul-overlay:        rgba(10, 22, 40, 0.85);
        --blanco-glass:        rgba(245, 245, 240, 0.05);

        /* === COLORES DE MARCA — CREMA Y NAVY LEGACY === */
        --crema-base:          #ede8df;
        --crema-border:        #e8e4dc;
        --navy-deep:           #152d52;
    }
        html { scroll-behavior: smooth; }
        body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; background-color: #ede8df; color: #0a1628; }

        /* ══════════════════════════════════════════════════════════════════
           SAFETY NET — Anti horizontal overflow en celular real
           Algunos celulares (Android Chrome/Samsung Internet) renderizan
           con viewport más angosto que el DevTools (375 vs 360 vs 320).
           Esto evita que cualquier elemento con ancho rígido rompa el layout.
           ══════════════════════════════════════════════════════════════════ */
        html, body { overflow-x: hidden; max-width: 100vw; }
        @media (max-width: 1023px) {
            /* Cualquier elemento del flujo principal queda dentro del viewport */
            #armonniza-app-root, main, section { max-width: 100vw; overflow-x: clip; }
            /* Imágenes y videos nunca se salen */
            img, video, picture, svg { max-width: 100%; height: auto; }
            /* Pillars de cada especialidad — padding más compacto en mobile (evita texto pegado al borde) */
            .s3m-pillar, .s4m-pillar, .s5m-pillar, .s6m-pillar { padding: 14px 12px !important; }
            .s3m-pillar:first-child, .s4m-pillar:first-child,
            .s5m-pillar:first-child, .s6m-pillar:first-child { padding-left: 12px !important; }
            .s3m-pillar:last-child, .s4m-pillar:last-child,
            .s5m-pillar:last-child, .s6m-pillar:last-child { padding-right: 12px !important; }
            .s3m-pillars-inner, .s4m-pillars-inner, .s5m-pillars-inner, .s6m-pillars-inner { padding: 0 14px !important; }
            /* Headers de tratamientos en cada sección — margen mínimo */
            .s3m-treats-header, .s4m-treats-header, .s5m-treats-header, .s6m-treats-header { padding-left: 14px !important; padding-right: 14px !important; }
            .s3m-cards-grid, .s4m-cards-grid, .s5m-cards-grid, .s6m-cards-grid { padding-left: 14px !important; padding-right: 14px !important; }
        }

        /* ══════════════════════════════════════════════════════════════════
           MOBILE: Cards de tratamientos → BOTONES-LISTA elegantes
           Las 4 especialidades (Medicina, Cirugía, Fisio, Cosmiatría) muestran
           sus tratamientos como botones planos verticales sin fotos.
           Las fotos de banner principal de cada especialidad se MANTIENEN.
           ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            /* === GRIDS → 2 columnas en mobile (lista compacta) === */
            .s3m-cards-grid, .s4m-grid, .s5m-trats-grid, .s6m-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 6px !important;
                padding-top: 4px !important;
                padding-bottom: 18px !important;
            }
            .s6m-card.s6m-featured { grid-column: span 1 !important; aspect-ratio: auto !important; }

            /* === Card base → botón-lista plano (navy + borde dorado) === */
            .s3m-card, .s4m-card, .s5m-trat, .s6m-card {
                aspect-ratio: auto !important;
                min-height: 0 !important;
                height: auto !important;
                background: linear-gradient(135deg, #0a1628 0%, #112847 100%) !important;
                border: 1px solid rgba(201,169,110,0.22) !important;
                border-radius: 11px !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.16);
                transform: none !important;
                position: relative !important;
                overflow: hidden !important;
                display: block !important;
                transition: border-color 0.22s ease, background 0.22s ease, transform 0.18s ease !important;
            }
            .s3m-card:hover, .s3m-card:active,
            .s4m-card:hover, .s4m-card:active,
            .s5m-trat:hover, .s5m-trat:active,
            .s6m-card:hover, .s6m-card:active {
                border-color: rgba(201,169,110,0.55) !important;
                background: linear-gradient(135deg, #112847 0%, #1a3661 100%) !important;
                transform: translateX(2px) !important;
            }

            /* === Ocultar fotos, overlays, badges, decorativos === */
            .s3m-card-img, .s3m-card-overlay, .s3m-card-gold, .s3m-card-brief,
            .s4m-card-img, .s4m-card-overlay, .s4m-card-frame, .s4m-card-badge, .s4m-card-hint,
            .s5m-trat-photo, .s5m-trat-arr, .s5m-trat-desc,
            .s6m-card-img, .s6m-card-overlay, .s6m-card-badge, .s6m-card-hint, .s6m-card-frame {
                display: none !important;
            }

            /* === Content reposicionado: flex row + arrow indicator (compacto en 2 cols) === */
            .s3m-card-content, .s4m-card-body, .s5m-trat-body, .s6m-card-body {
                position: relative !important;
                inset: auto !important;
                padding: 11px 28px 11px 12px !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 2px !important;
                background: transparent !important;
                border-left: none !important;
            }
            .s3m-card-name, .s4m-card-name, .s5m-trat-name, .s6m-card-name {
                font-size: 14px !important;
                color: #f7f2e8 !important;
                font-weight: 500 !important;
                line-height: 1.25 !important;
                margin: 0 !important;
                letter-spacing: 0.01em;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            .s3m-card-num, .s4m-card-num {
                font-size: 9.5px !important;
                color: rgba(201,169,110,0.85) !important;
                letter-spacing: 0.16em !important;
                font-weight: 700 !important;
                margin: 0 !important;
            }
            /* s4m: el número es hermano (fuera del body) → sacarlo del absoluto para que no se encime */
            .s4m-card-num {
                position: static !important;
                top: auto !important; left: auto !important;
                display: block !important;
                padding: 10px 12px 0 !important;
                line-height: 1 !important;
            }
            .s4m-card-body { padding-top: 3px !important; }

            /* === Arrow indicator dorado a la derecha (compacto en 2 cols) === */
            .s3m-card::before, .s4m-card::before, .s5m-trat::before, .s6m-card::before {
                content: '\203A';
                position: absolute;
                top: 50%; right: 9px;
                transform: translateY(-55%);
                color: #c9a96e;
                font-size: 20px;
                font-family: 'Marcellus', serif;
                line-height: 1;
                pointer-events: none;
                z-index: 5;
                transition: transform 0.2s ease, color 0.2s ease;
            }
            .s3m-card:hover::before, .s3m-card:active::before,
            .s4m-card:hover::before, .s4m-card:active::before,
            .s5m-trat:hover::before, .s5m-trat:active::before,
            .s6m-card:hover::before, .s6m-card:active::before {
                color: #e8d5a8;
                transform: translateY(-55%) translateX(3px);
            }
            /* Línea dorada decorativa hover */
            .s3m-card::after, .s4m-card::after { display: none !important; }
        }

        /* ══════════════════════════════════════════════════════════════════
           MOBILE — Especialidades (Medicina/Cirugía/Fisio/Cosmiatría):
           · CTA integrado al fondo crema natural (sin franja oscura)
           · Treats header con padding compacto pegado a las pillars
           · Card grid con gap mínimo arriba
           · Generoso espaciado inferior para separación con siguiente sección
           ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            /* TREATS HEADER (sec 3) — compacto */
            .s3m-treats-header {
                padding: 16px 14px 8px !important;
            }
            .s3m-treats-eyebrow {
                font-size: 0.55rem !important;
                margin: 0 0 0.35rem !important;
                letter-spacing: 0.22em !important;
            }
            .s3m-treats-title {
                font-size: 1.35rem !important;
                line-height: 1.15 !important;
                letter-spacing: -0.01em !important;
            }

            /* SEC 4 — Cirugía Estética: grid wrapper compacto */
            .s4m-grid-wrapper { padding: 16px 14px 18px !important; }
            .s4m-grid-label {
                font-size: 0.55rem !important;
                letter-spacing: 0.22em !important;
                margin-bottom: 10px !important;
            }
            /* SEC 5 — Fisio-Estética: trats wrap compacto */
            .s5m-trats-wrap { padding: 16px 14px 18px !important; }
            .s5m-trats-label {
                font-size: 0.55rem !important;
                letter-spacing: 0.22em !important;
                margin-bottom: 10px !important;
            }
            /* SEC 6 — Cosmetología: grid sin top padding generoso + divider compacto */
            .s6m-grid { padding: 4px 14px 18px !important; margin: 0 !important; }
            .s6m-divider { margin: 8px auto 0 !important; padding: 0 14px !important; }

            /* Eliminar espacios verticales en banner/hero/CTA de todas las especialidades */
            .s3m-banner, .s4m-hero, .s5m-section .s5m-hero, .s6m-section .s6m-hero {
                /* mantienen alto natural pero sin padding extra */
            }
            .s4m-section, .s5m-section, .s6m-section { padding-top: 0 !important; padding-bottom: 0 !important; }
            .s3m-pillars, .s4m-pillars, .s5m-pillars, .s6m-pillars { padding-top: 0 !important; padding-bottom: 0 !important; }
            .s3m-pillars-inner, .s4m-pillars-inner, .s5m-pillars-inner, .s6m-pillars-inner { padding: 0 14px !important; }

            /* Eliminar margin entre bloques internos */
            .s4m-hero, .s5m-hero, .s6m-hero { margin-bottom: 0 !important; }

            /* CTA WRAPPERS — fondo crema (sec 3, 5) y fondo navy (sec 4, 6) */
            .s3m-cta-wrap, .s5m-cta-wrap {
                background: #faf9f6 !important;
                border-top: 1px solid rgba(201,169,110,0.14) !important;
                position: relative;
            }
            .s4m-cta-strip, .s6m-cta {
                /* Estos ya tienen fondo navy/oscuro propio — solo ajustamos padding */
                padding: 22px 18px 24px !important;
                text-align: center !important;
            }
            .s3m-cta-wrap::before, .s5m-cta-wrap::before { content: none !important; }
            .s3m-cta, .s5m-cta {
                padding: 18px 18px 16px !important;
                flex-direction: column !important;
                text-align: center !important;
                gap: 11px !important;
            }
            /* Titulares CTA: navy sobre cream (sec 3, 5) · blanco sobre navy (sec 4, 6) */
            .s3m-cta-text h3, .s5m-cta-text h3 {
                font-size: 1.08rem !important;
                line-height: 1.2 !important;
                color: #0a1628 !important;
                margin: 0 0 4px !important;
            }
            .s4m-cta-h, .s6m-cta-h {
                font-size: 1.1rem !important;
                line-height: 1.2 !important;
                margin: 0 0 6px !important;
            }
            .s3m-cta-text p, .s5m-cta-text p {
                font-size: 0.74rem !important;
                color: #6a7a8a !important;
                line-height: 1.45 !important;
                max-width: 320px;
                margin: 0 auto !important;
            }
            .s4m-cta-p, .s6m-cta-p {
                font-size: 0.74rem !important;
                line-height: 1.45 !important;
                max-width: 320px;
                margin: 0 auto 12px !important;
            }

            /* ════════════════════════════════════════════════════════════
               BOTÓN AGENDAR-LLAMAR UNIFICADO en TODAS las especialidades
               Pill dorado con halo · siempre visible en fondo claro u oscuro
               ════════════════════════════════════════════════════════════ */
            .s3m-cta-btn.btn-split-call,
            .s4m-cta-btn.btn-split-call,
            .s5m-cta-btn.btn-split-call,
            .s6m-cta-btn.btn-split-call {
                background: linear-gradient(135deg, #c9a96e 0%, #e8d5a8 100%) !important;
                color: #0a1628 !important;
                border: 1px solid rgba(232,213,168,0.7) !important;
                border-radius: 10px !important;
                box-shadow:
                    0 6px 22px rgba(201,169,110,0.5),
                    0 0 0 1px rgba(255,250,235,0.25),
                    0 0 28px rgba(201,169,110,0.25) !important;
                min-width: 240px !important;
                margin: 0 auto !important;
                padding: 0 !important;
                font-size: 0.7rem !important;
                letter-spacing: 0.1em !important;
                overflow: hidden !important;
            }
            /* AGENDAR (lado izq) — visible con texto navy sobre dorado */
            .s3m-cta-btn.btn-split-call .bsc-left,
            .s4m-cta-btn.btn-split-call .bsc-left,
            .s5m-cta-btn.btn-split-call .bsc-left,
            .s6m-cta-btn.btn-split-call .bsc-left {
                padding: 10px 16px !important;
                color: #0a1628 !important;
                font-weight: 700 !important;
            }
            /* LLAMAR (lado der) — fondo navy con texto dorado (contraste visible) */
            .s3m-cta-btn.btn-split-call .bsc-right,
            .s4m-cta-btn.btn-split-call .bsc-right,
            .s5m-cta-btn.btn-split-call .bsc-right,
            .s6m-cta-btn.btn-split-call .bsc-right {
                background: #0a1628 !important;
                color: #e8d5a8 !important;
                padding: 8px 14px !important;
                min-width: 78px !important;
                border-left: 1px solid rgba(232,213,168,0.4) !important;
            }
            .s3m-cta-btn.btn-split-call .bsc-right-title,
            .s4m-cta-btn.btn-split-call .bsc-right-title,
            .s5m-cta-btn.btn-split-call .bsc-right-title,
            .s6m-cta-btn.btn-split-call .bsc-right-title {
                color: #e8d5a8 !important;
                font-size: 0.7rem !important;
                font-weight: 700 !important;
            }
            .s3m-cta-btn.btn-split-call .bsc-right-sub,
            .s4m-cta-btn.btn-split-call .bsc-right-sub,
            .s5m-cta-btn.btn-split-call .bsc-right-sub,
            .s6m-cta-btn.btn-split-call .bsc-right-sub {
                color: rgba(201,169,110,0.7) !important;
                font-size: 0.52rem !important;
                letter-spacing: 0.08em !important;
            }

            /* SEPARADOR INFERIOR — espacio amplio + DIAMANTE DORADO + hilo dorado visible */
            #medicina-estetica-section,
            #cirugia-estetica-section,
            #fisio-estetica-section,
            #cosmetologia-section { position: relative; padding-bottom: 0 !important; margin-bottom: 0 !important; }

            #medicina-estetica-section::after,
            #cirugia-estetica-section::after,
            #fisio-estetica-section::after,
            #cosmetologia-section::after {
                content: '';
                display: block;
                height: 72px;
                background:
                    /* LOGO "A" ARMONNIZA centrado — identidad de marca */
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23c9a96e'/%3E%3Cstop offset='50%25' stop-color='%23e8d5a8'/%3E%3Cstop offset='100%25' stop-color='%23c9a96e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='44' fill='%23faf9f6' stroke='url(%23g)' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='url(%23g)' stroke-width='0.8' opacity='0.55'/%3E%3Ctext x='50' y='51' text-anchor='middle' dominant-baseline='central' font-family='Marcellus,serif' font-size='48' fill='url(%23g)'%3EA%3C/text%3E%3C/svg%3E") center / 38px 38px no-repeat,
                    /* HILO DORADO horizontal — interrumpido por el logo */
                    linear-gradient(to right,
                        transparent 0%,
                        rgba(201,169,110,0.0) 10%,
                        rgba(201,169,110,0.85) 32%,
                        rgba(201,169,110,0.0) 44%,
                        transparent 50%,
                        rgba(201,169,110,0.0) 56%,
                        rgba(201,169,110,0.85) 68%,
                        rgba(201,169,110,0.0) 90%,
                        transparent 100%) center / 90% 1.5px no-repeat,
                    /* Fondo crema con respiración suave */
                    linear-gradient(180deg, #faf9f6 0%, #efeae0 50%, #faf9f6 100%);
                position: relative;
                box-shadow:
                    inset 0 8px 14px -8px rgba(201,169,110,0.22),
                    inset 0 -8px 14px -8px rgba(201,169,110,0.22);
            }
        }

        /* ══════════════════════════════════════════════════════════════════
           MOBILE: Sección Nuestro Equipo → LISTA con foto + texto + botón
           Foto pequeña a la izquierda, info al medio, botón abajo o a la der
           ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            .seq-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
            .seq-card {
                aspect-ratio: auto !important;
                height: auto !important;
                min-height: 130px !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: stretch !important;
                gap: 0 !important;
                overflow: hidden !important;
                border-radius: 12px !important;
                background: linear-gradient(135deg, #0a1628 0%, #112847 100%) !important;
                border: 1px solid rgba(201,169,110,0.2) !important;
                box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
                transform: none !important;
            }
            .seq-card:hover { transform: none !important; box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important; }
            /* FOTO — lado IZQUIERDO, ancho fijo, alto natural de la tarjeta */
            .seq-card-photo {
                position: relative !important;
                inset: auto !important;
                flex: 0 0 110px !important;
                width: 110px !important;
                height: auto !important;
                min-height: 130px !important;
                align-self: stretch !important;
                object-fit: cover !important;
                filter: brightness(0.9) saturate(1.0) !important;
                border-radius: 0 !important;
            }
            .seq-card:hover .seq-card-photo { transform: none !important; }
            .seq-card-overlay { display: none !important; }
            /* BADGE oculto en mobile (libera espacio en el lado derecho) */
            .seq-card-badge { display: none !important; }
            /* INFO — lado DERECHO, texto + botón apilados verticalmente */
            .seq-card-info {
                position: relative !important;
                inset: auto !important;
                flex: 1 1 auto !important;
                min-width: 0 !important;
                padding: 12px 14px !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 4px !important;
                align-items: flex-start !important;
                background: transparent !important;
                justify-content: space-between !important;
            }
            .seq-card-name { font-size: 15.5px !important; color: #f7f2e8 !important; font-weight: 500 !important; margin: 0 !important; -webkit-font-smoothing: antialiased; }
            .seq-card-role { font-size: 11.5px !important; color: rgba(201,169,110,0.92) !important; margin: 0 !important; }
            .seq-card-cv { display: none !important; }
            /* Subtítulo + intro de sección — legibilidad estilo FB (mobile) */
            .seq-subtitle { font-size: 1rem !important; color: #ccccc3 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
            .seq-intro { font-size: 0.92rem !important; color: #bdbdb3 !important; line-height: 1.62 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
            .seq-card-btn-row {
                display: flex !important;
                gap: 6px !important;
                margin-top: 8px !important;
                width: 100% !important;
            }
            .seq-card-btn {
                margin-top: 0 !important;
                flex: 1 1 50% !important;
                padding: 7px 8px !important;
                font-size: 8.8px !important;
                letter-spacing: 0.06em !important;
                border-radius: 7px !important;
                background: #c9a96e !important;
                color: #0a1628 !important;
                font-weight: 700 !important;
                border: none !important;
                cursor: pointer;
                opacity: 1 !important;
                transform: none !important;
                white-space: nowrap;
            }
            .seq-card-btn:hover { background: #e0c896 !important; transform: none !important; }
            .seq-card-btn.seq-card-btn-alt {
                background: transparent !important;
                color: #c9a96e !important;
                border: 1px solid rgba(201,169,110,0.55) !important;
            }
            .seq-card-btn.seq-card-btn-alt:hover {
                background: rgba(201,169,110,0.14) !important;
                border-color: #c9a96e !important;
            }
        }
        /* ── Calendar modo cero (sec 7) — escalar la tarjeta de placeholder en mobile ── */
        @media (max-width: 1023px) {
            /* Nitidez estilo FB en TODO el calendario (sec 7) */
            #booking-section, #booking-section * {
                -webkit-font-smoothing: antialiased !important;
                text-rendering: optimizeLegibility !important;
            }
            /* "Agenda tu Cita" placeholder más compacto, ocupa más altura para evitar scroll interno */
            #booking-col2 .s7-cal-placeholder { padding: 18px 14px !important; gap: 10px !important; min-height: 220px; }
            #booking-col2 .s7-cal-placeholder h3 { font-size: 14.5px !important; margin-bottom: 4px; }
            #booking-col2 .s7-cal-placeholder p { font-size: 10px !important; line-height: 1.5; }
            #booking-col2 .s7-cal-placeholder-icon { width: 42px !important; height: 42px !important; }
            /* Tarjeta principal de col2 más alta para mostrar todo */
            #booking-col2 > div:first-child { min-height: 605px !important; }
            /* Margenes internos respondidos en mobile */
            #booking-col2 .s7-top-bar { padding: 10px 12px 8px !important; gap: 8px !important; }
            #booking-col2 .s7-top-btn { padding: 9px 10px !important; font-size: 10.5px !important; }
            #booking-col2 .s7-top-btn-title { font-size: 10.5px !important; }
            #booking-col2 .s7-top-btn-sub { font-size: 7.4px !important; }
            /* Block overlay título y items más compactos */
            .s7-bo-title { font-size: 16px !important; margin-bottom: 10px !important; padding: 0 6px; }
            .s7-bo-col-badge { font-size: 10px !important; }
            .s7-bo-col-sub { font-size: 9.5px !important; }
            .s7-bo-item { font-size: 13px !important; padding: 8px 11px !important; -webkit-font-smoothing: antialiased; }
        }
        /* ── Header móvil — eliminar min-widths rígidos que rompen layout en celulares reales (Note 20, Pixel, etc.) ── */
        @media (max-width: 1023px) {
            #armonniza-app-root header h1 { white-space: nowrap; }
            /* Cancelar los minWidth:220px / 230px del header — fuente original del corte */
            #armonniza-app-root header [style*="min-width: 220px"],
            #armonniza-app-root header [style*="min-width: 230px"],
            #armonniza-app-root header [style*="min-width:220px"],
            #armonniza-app-root header [style*="min-width:230px"] { min-width: 0 !important; }
            #armonniza-app-root header > div.hdr-inner { gap: 8px !important; padding: 0 12px !important; }
        }
        /* Pantallas angostas (<420px) — escalar el título del header */
        @media (max-width: 420px) {
            #armonniza-app-root header h1 { font-size: 19px !important; letter-spacing: 0.14em !important; }
            /* Logo SVG reduce 60px → 50px en mobile angosto */
            #armonniza-app-root header div[style*="width: 60px"],
            #armonniza-app-root header div[style*="width:60px"] { width: 50px !important; height: 50px !important; }
        }
        @media (max-width: 360px) {
            #armonniza-app-root header h1 { font-size: 16px !important; letter-spacing: 0.10em !important; }
            #armonniza-app-root header > div.hdr-inner { padding: 0 8px !important; gap: 6px !important; }
        }

        /* ── ANIMACIONES ELEGANTES ── */
        .card-elegant { transition: transform 0.22s ease, box-shadow 0.22s ease; border: 1px solid #e8e4dc; border-radius: 12px; }
        .card-elegant:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,169,110,0.14) !important; border-color: #c9a96e !important; }
        .modal-opt-elegant { transition: all 0.18s ease; font-size: 18px !important; font-weight: 400 !important; }
        .modal-opt-elegant:hover { transform: translateX(3px); border-color: #c9a96e !important; }
        .btn-elegant { transition: all 0.18s ease; background-color: #ffffff !important; border: 1px solid #e8e4dc !important; border-radius: 8px !important; }
        .btn-elegant:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,169,110,0.18) !important; border-color: #c9a96e !important; }
        .promo-elegant { transition: transform 0.2s ease; border: 1px solid #e8e4dc !important; border-radius: 10px; }
        .promo-elegant:hover { transform: scale(1.01); border-color: #c9a96e !important; }
        @keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:0.93} }
        .gift-btn-pulse { animation: pulse-soft 3s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
        /* ── TIPOGRAFÍA ── */
        .modal-opt-elegant span, .modal-opt-elegant { letter-spacing:0.01em !important; }
        .card-elegant p { font-weight:400 !important; }
        .card-elegant p.font-bold { font-weight:500 !important; font-size:90% !important; }
        /* ── PALETA CREMA ── */
        .bg-\[\#0d1f3c\] { background-color: #ffffff !important; }
        .bg-\[\#060e1a\] { background-color: #ffffff !important; }
        .bg-\[\#152d52\] { background-color: #ffffff !important; }
        .border-\[\#e8e4dc\] { border-width: 1px !important; }
        .border-amber-100, .border-amber-200 { border-color: #e8e4dc !important; }
        .text-stone-100, .text-stone-200 { color: #0a1628 !important; }
        .text-stone-300 { color: #6b6b6b !important; }
        .text-amber-100 { color: #7a6040 !important; }
        .text-blue-200, .text-blue-300 { color: #5a7a9a !important; }
        .bg-\[\#0d1f3c\] .text-white,
        .bg-\[\#152d52\] .text-white { color: #0a1628 !important; }
        .bg-\[\#0d1f3c\] .text-amber-200,
        .bg-\[\#152d52\] .text-amber-200 { color: #7a6040 !important; }
        .bg-\[\#0d1f3c\] .text-amber-300,
        .bg-\[\#152d52\] .text-amber-300 { color: #a08749 !important; }
        .tracking-widest.uppercase { text-transform: none !important; letter-spacing: 0.02em !important; }
        #armonniza-app-root { background: #ede8df !important; }
        /* ── SOMBRAS SUAVIZADAS ── */
        #armonniza-app-root .shadow-2xl { box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important; }
        #armonniza-app-root .shadow-xl  { box-shadow: 0 1px 5px rgba(0,0,0,0.05) !important; }
        #armonniza-app-root .shadow-lg  { box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; }
        #armonniza-app-root .shadow-inner { box-shadow: none !important; }

        /* ── RESET MODAL TRATAMIENTOS — tema oscuro protegido ── */
        /* Fondos: restaurar colores navy originales */
        [data-menu-content="preview-modal"] .bg-\[\#060e1a\]  { background-color: #060e1a !important; }
        [data-menu-content="preview-modal"] .bg-\[\#0d1f3c\]  { background-color: #0d1f3c !important; }
        [data-menu-content="preview-modal"] .bg-\[\#152d52\]  { background-color: #152d52 !important; }
        /* Texto claro sobre fondos oscuros */
        [data-menu-content="preview-modal"] .text-stone-100   { color: #f5f5f4 !important; }
        [data-menu-content="preview-modal"] .text-stone-200   { color: #e7e5e4 !important; }
        [data-menu-content="preview-modal"] .text-stone-300   { color: #d6d3d1 !important; }
        [data-menu-content="preview-modal"] .text-amber-100   { color: #fef3c7 !important; }
        [data-menu-content="preview-modal"] .text-blue-200    { color: #bfdbfe !important; }
        [data-menu-content="preview-modal"] .text-blue-300    { color: #93c5fd !important; }
        /* Deshacer scoped overrides de PALETA CREMA dentro del modal */
        [data-menu-content="preview-modal"] .bg-\[\#0d1f3c\] .text-white,
        [data-menu-content="preview-modal"] .bg-\[\#152d52\] .text-white    { color: #ffffff !important; }
        [data-menu-content="preview-modal"] .bg-\[\#0d1f3c\] .text-amber-200,
        [data-menu-content="preview-modal"] .bg-\[\#152d52\] .text-amber-200 { color: #fde68a !important; }
        [data-menu-content="preview-modal"] .bg-\[\#0d1f3c\] .text-amber-300,
        [data-menu-content="preview-modal"] .bg-\[\#152d52\] .text-amber-300 { color: #fcd34d !important; }
        /* Restaurar uppercase/tracking intencional en labels del modal */
        [data-menu-content="preview-modal"] .tracking-widest.uppercase { text-transform: uppercase !important; letter-spacing: 0.1em !important; }
        /* Restaurar sombra profunda de la tarjeta modal */
        #armonniza-app-root [data-menu-content="preview-modal"] { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
        /* Subtítulos de cards (stone-600 en navy oscuro: 2.15:1 → 6.16:1) */
        [data-menu-content="preview-modal"] .text-stone-600 { color: #a8a29e !important; }

        /* ═══════════════════════════════════════════════════════════════════════════
           ESCALA TIPOGRÁFICA GLOBAL v1 (junio 2026)
           - Sharpness máxima en todo el sitio
           - Texto <20px  → +20% (subtítulos, body, captions, metadata)
           - Texto 20-26px → +10% (títulos medianos H2/H3 de sección)
           - Texto ≥28px  → sin cambios (hero, display grandes)
           Excluye: header, footer, button, #booking-section (sec 7 calendario),
                    .fp-card (popups), .ap-ovl-header (header overlay paciente)
        ═══════════════════════════════════════════════════════════════════════════ */
        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }
        body, body * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /* Define una variable de exclusión usando :where() — especificidad 0 */
        /* Patrón: [style*="font-size: Xpx"]:not(:where(<exclusiones>)) { font-size: Y !important; } */

        /* ── +20% — tamaños <20px ── */
        [style*="font-size: 8px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:8px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 9.6px !important; }

        [style*="font-size: 8.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:8.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 10.2px !important; }

        [style*="font-size: 9px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:9px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 10.8px !important; }

        [style*="font-size: 9.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:9.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 11.4px !important; }

        [style*="font-size: 10px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:10px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 12px !important; }

        [style*="font-size: 10.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:10.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 12.6px !important; }

        [style*="font-size: 11px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:11px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 13.2px !important; }

        [style*="font-size: 11.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:11.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 13.8px !important; }

        [style*="font-size: 12px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:12px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 14.4px !important; }

        [style*="font-size: 12.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:12.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 15px !important; }

        [style*="font-size: 13px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:13px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 15.6px !important; }

        [style*="font-size: 13.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:13.5px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 16.2px !important; }

        [style*="font-size: 14px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:14px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 16.8px !important; }

        [style*="font-size: 15px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:15px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 18px !important; }

        [style*="font-size: 16px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:16px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 19.2px !important; }

        [style*="font-size: 17px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:17px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 20.4px !important; }

        [style*="font-size: 18px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:18px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 21.6px !important; }

        [style*="font-size: 19px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:19px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 22.8px !important; }

        /* ── +10% — títulos medianos 20-26px ── */
        [style*="font-size: 20px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:20px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 22px !important; }

        [style*="font-size: 22px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:22px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 24.2px !important; }

        [style*="font-size: 24px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:24px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 26.4px !important; }

        [style*="font-size: 26px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)),
        [style*="font-size:26px"]:not(:where(header, header *, footer, footer *, button, button *, #booking-section, #booking-section *, .fp-card, .fp-card *, .ap-ovl-header *)) { font-size: 28.6px !important; }

        /* ── Override de utility-classes Tailwind text-[Npx] ── */
        :where(body) .text-\[8px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))   { font-size: 9.6px !important; }
        :where(body) .text-\[9px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))   { font-size: 10.8px !important; }
        :where(body) .text-\[9\.3px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *)) { font-size: 11.16px !important; }
        :where(body) .text-\[9\.5px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *)) { font-size: 11.4px !important; }
        :where(body) .text-\[10px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 12px !important; }
        :where(body) .text-\[10\.5px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *)) { font-size: 12.6px !important; }
        :where(body) .text-\[11px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 13.2px !important; }
        :where(body) .text-\[12px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 14.4px !important; }
        :where(body) .text-\[13px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 15.6px !important; }
        :where(body) .text-\[14px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 16.8px !important; }
        :where(body) .text-\[15px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 18px !important; }
        :where(body) .text-\[16px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 19.2px !important; }
        :where(body) .text-\[18px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 21.6px !important; }
        /* Medianos +10% */
        :where(body) .text-\[20px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 22px !important; }
        :where(body) .text-\[22px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 24.2px !important; }
        :where(body) .text-\[24px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 26.4px !important; }
        :where(body) .text-\[26px\]:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 28.6px !important; }
        /* ≥28px sin cambios */

        /* Tailwind text-xs (12px) → 14.4 / text-sm (14px) → 16.8 / text-base (16px) → 19.2 / text-lg (18px) → 21.6 / text-xl (20px) → 22 */
        :where(body) .text-xs:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))   { font-size: 14.4px !important; }
        :where(body) .text-sm:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))   { font-size: 16.8px !important; }
        :where(body) .text-base:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *)) { font-size: 19.2px !important; }
        :where(body) .text-lg:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))   { font-size: 21.6px !important; }
        :where(body) .text-xl:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))   { font-size: 22px !important; }
        :where(body) .text-2xl:not(:where(header *, footer *, button, button *, #booking-section *, .fp-card *, .ap-ovl-header *))  { font-size: 26.4px !important; }
        /* text-3xl (30px) y superior → sin cambios (display grandes) */
        /* ═══════════════════════════════════════════════════════════════════════════ */

        /* ── ÁREA PACIENTE AUTH — tema oscuro protegido (override de Paleta Crema) ── */
        .ap-auth-card.bg-\[\#060e1a\]   { background-color: #0a1628 !important; }
        .ap-auth-card .bg-\[\#0d1f3c\]  { background-color: #0d1f3c !important; }
        .ap-auth-card .bg-\[\#152d52\]  { background-color: #152d52 !important; }
        .ap-auth-card .bg-stone-50      { background-color: #0d1f3c !important; }
        .ap-auth-card .bg-amber-50      { background-color: rgba(201,169,110,0.08) !important; }
        .ap-auth-card .bg-red-50\/30    { background-color: rgba(185,72,72,0.12) !important; }
        .ap-auth-card .bg-blue-50       { background-color: rgba(30,58,100,0.5) !important; }
        .ap-auth-card .text-amber-200   { color: #fde68a !important; }
        .ap-auth-card .text-amber-100   { color: #fef3c7 !important; }
        .ap-auth-card .text-amber-300   { color: #fcd34d !important; }
        .ap-auth-card .text-amber-400   { color: #fbbf24 !important; }
        .ap-auth-card .text-amber-500   { color: #f59e0b !important; }
        .ap-auth-card .text-amber-700   { color: #c9a96e !important; }
        .ap-auth-card .text-stone-100,
        .ap-auth-card .text-stone-200   { color: #f5f5f4 !important; }
        .ap-auth-card .text-stone-300   { color: #d6d3d1 !important; }
        .ap-auth-card .text-stone-500   { color: rgba(245,245,240,0.5) !important; }
        .ap-auth-card .text-stone-700   { color: rgba(245,245,240,0.45) !important; }
        .ap-auth-card .text-white       { color: #ffffff !important; }
        .ap-auth-card .text-blue-800    { color: #a0c0e8 !important; }
        .ap-auth-card .text-blue-700    { color: #93b4d4 !important; }
        .ap-auth-card .text-blue-300    { color: #93b4d4 !important; }
        .ap-auth-card .text-red-500     { color: #f87171 !important; }
        .ap-auth-card .text-green-500   { color: #5b8e5a !important; }
        .ap-auth-card .text-green-800   { color: #86c586 !important; }
        .ap-auth-card .text-yellow-900  { color: #fef3c7 !important; }
        .ap-auth-card .bg-\[\#0d1f3c\] .text-white { color: #ffffff !important; }
        .ap-auth-card .bg-\[\#152d52\] .text-white { color: #ffffff !important; }
        .ap-auth-card .bg-\[\#0d1f3c\] .text-amber-200 { color: #fde68a !important; }
        .ap-auth-card .bg-\[\#152d52\] .text-amber-200 { color: #fde68a !important; }
        .ap-auth-card .border-\[\#e8e4dc\]  { border-color: rgba(201,169,110,0.18) !important; }
        .ap-auth-card .border-amber-100     { border-color: rgba(201,169,110,0.15) !important; }
        .ap-auth-card .border-red-300       { border-color: #f87171 !important; }
        .ap-auth-card .border-blue-100      { border-color: rgba(94,123,168,0.3) !important; }
        .ap-auth-card .tracking-widest.uppercase { text-transform: uppercase !important; letter-spacing: 0.1em !important; }
        .ap-auth-card .shadow-inner         { box-shadow: 0 2px 10px rgba(0,0,0,0.3) inset !important; }

        h1, h2, h3, h4, h5, h6 { font-family: 'Marcellus', serif; font-weight: 400; }
        
        .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 10px; }
        
        .animate-fade-in { animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes promoGlowPulse {
          0%, 100% { box-shadow: 0 4px 20px rgba(17,40,71,0.44), 0 0 0 2px rgba(17,40,71,0.64); }
          50%       { box-shadow: 0 10px 50px rgba(17,40,71,1.0), 0 0 0 4px rgba(17,40,71,1.0), 0 0 80px rgba(17,40,71,0.56); }
        }
        .promo-attention { animation: promoGlowPulse 2.4s ease-in-out infinite; }

        /* ── TRANSICIONES DE VISTA Y PESTAÑA ── */
        .view-enter {
            animation: viewEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        /* Área Paciente — sidebar al 30% del ancho en móvil */
        @media (max-width: 1023px) {
            .ap-sidebar {
                width: 30% !important;
                min-width: 0 !important;
                padding: 12px 8px !important;
            }
            /* HEADER OVERLAY — padding lateral correcto + botones balanceados */
            .ap-ovl-header {
                padding: 0 12px !important;
                gap: 6px !important;
            }
            .ap-ovl-nav {
                gap: 4px !important;
            }
            .ap-ovl-nav > button,
            .ap-ovl-nav > div > button {
                padding: 7px 6px !important;
                letter-spacing: 0.04em !important;
            }
            /* Botón ÁREA PACIENTE (el destacado activo) — un poco más compacto */
            .ap-ovl-nav > button:nth-of-type(2) {
                padding: 5px 7px !important;
            }
            /* Botón SALIR mobile — más respiración */
            .ap-mb-btn-exit {
                padding: 5px 9px !important;
                font-size: 9px !important;
            }
            /* LLAMAR — rediseño vertical compacto para sidebar estrecha */
            .ap-call-btn {
                flex-direction: column !important;
                gap: 6px !important;
                padding: 14px 8px !important;
                text-align: center !important;
            }
            .ap-call-btn .ap-call-icon-wrap {
                width: 34px; height: 34px; border-radius: 50%;
                background: rgba(10,22,40,0.18);
                display: flex; align-items: center; justify-content: center;
                margin: 0 auto;
            }
            .ap-call-btn .ap-call-text-wrap {
                width: 100%;
            }
            .ap-call-btn .ap-call-label {
                font-size: 10px !important;
                letter-spacing: 0.10em !important;
            }
            .ap-call-btn .ap-call-sub {
                display: none !important;
            }
        }
        @media (max-width: 480px) {
            .ap-ovl-header { padding: 0 10px !important; }
            .ap-ovl-nav > button,
            .ap-ovl-nav > div > button { padding: 7px 4px !important; }
        }

        @keyframes viewEnter {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0);    }
        }
        .tab-enter {
            animation: tabEnter 0.30s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes tabEnter {
            from { opacity: 0; transform: translateX(10px); }
            to   { opacity: 1; transform: translateX(0);    }
        }
        .google-calendar-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; background: white; border-radius: 1rem; }

        /* ── SECCIÓN 7 — AGENDA PREMIUM 2026 ── */
        #booking-section { background: linear-gradient(160deg, #e8e2d8 0%, #ede8e0 50%, #e6e0d6 100%) !important; padding: 18px !important; box-sizing: border-box; }
        @media (max-width:1023px) {
            #booking-section { padding: 9px !important; }
            /* Mobile · modo NO bloqueado: eliminar scroll interno (el contenido fluye con la página) */
            body:not(.s7-modal-active) #booking-section {
                overflow: visible !important;
                overflow-y: visible !important;
                height: auto !important;
            }
        }
        /* Toggle bar prominente — Col2 */
        #booking-col2 .s7-top-bar { display:flex !important; padding:14px 16px 12px; border-bottom:1px solid rgba(201,169,110,0.15); gap:10px; background:#faf8f5; flex-shrink:0; }
        #booking-col2 .s7-top-btn { flex:1; padding:12px 16px; border-radius:14px; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:0.06em; font-size:11.9px; text-transform:uppercase; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); display:flex; align-items:center; justify-content:center; gap:8px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position:relative; overflow:hidden; isolation:isolate; }

        /* ════════════════════════════════════════════════════════════════
           "GOLD RIPPLE INVITE" — efecto elegante que invita al clic
           Diseño en 3 capas sutiles y refinadas:
             1) RIPPLE WAVE: anillo dorado que emana del botón y se expande
             2) SOFT LIFT: el botón se eleva muy ligeramente (1.5px)
             3) RIM PULSE: el borde dorado se intensifica en el peak
           Filosofía: respiración orgánica, no chillón, invita sin distraer.
           ════════════════════════════════════════════════════════════════ */

        /* RIPPLE WAVE — anillo expansivo MÁS INTENSO */
        #booking-col2 .s7-top-btn.neutral::before,
        #booking-col2 .s7-top-btn.inactive::before {
            content:'';
            position:absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events:none;
            z-index:0;
            animation: s7BtnRipple 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
        }

        @keyframes s7BtnRipple {
            0% {
                box-shadow:
                    0 0 0 0 rgba(201,169,110,0.85),
                    0 0 0 0 rgba(232,213,168,0.6),
                    0 0 0 0 rgba(255,250,235,0.4);
                opacity: 1;
            }
            55% {
                box-shadow:
                    0 0 0 14px rgba(201,169,110,0.12),
                    0 0 0 24px rgba(232,213,168,0.05),
                    0 0 0 32px rgba(255,250,235,0);
                opacity: 0.85;
            }
            100% {
                box-shadow:
                    0 0 0 22px rgba(201,169,110,0),
                    0 0 0 34px rgba(232,213,168,0),
                    0 0 0 42px rgba(255,250,235,0);
                opacity: 0;
            }
        }

        /* LIFT + RIM PULSE + HALO GLOW — el botón "respira" con fuerza */
        #booking-col2 .s7-top-btn.neutral,
        #booking-col2 .s7-top-btn.inactive {
            animation: s7BtnInvite 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
        }

        @keyframes s7BtnInvite {
            0%, 100% {
                transform: translateY(0) scale(1);
                border-color: rgba(201,169,110,0.35);
                box-shadow:
                    0 2px 6px rgba(10,22,40,0.05),
                    0 0 0 0 rgba(201,169,110,0);
            }
            45% {
                transform: translateY(-3px) scale(1.025);
                border-color: rgba(232,213,168,1);
                box-shadow:
                    0 10px 22px rgba(10,22,40,0.15),
                    0 0 28px rgba(201,169,110,0.55),
                    0 0 0 2px rgba(232,213,168,0.3);
            }
            70% {
                transform: translateY(-1px) scale(1.01);
                border-color: rgba(201,169,110,0.7);
                box-shadow:
                    0 4px 12px rgba(10,22,40,0.08),
                    0 0 16px rgba(201,169,110,0.25);
            }
        }

        /* Desfase: los 2 botones respiran alternados */
        #booking-col2 .s7-top-btn.inactive::before,
        #booking-col2 .s7-top-btn.inactive { animation-delay: 1.1s; }

        /* Contenido del botón siempre por encima del ripple */
        #booking-col2 .s7-top-btn > * { position:relative; z-index:2; }

        /* Botón ACTIVO: sin efecto (ya está seleccionado, no necesita invitación) */
        #booking-col2 .s7-top-btn.active::before { display:none; }
        #booking-col2 .s7-top-btn.active { animation: none !important; }

        /* Accesibilidad: respeta reduced-motion */
        @media (prefers-reduced-motion: reduce) {
            #booking-col2 .s7-top-btn.neutral::before,
            #booking-col2 .s7-top-btn.inactive::before { animation: none !important; opacity: 0 !important; }
            #booking-col2 .s7-top-btn.neutral,
            #booking-col2 .s7-top-btn.inactive { animation: none !important; transform: none !important; }
        }
        #booking-col2 .s7-top-btn-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1; gap:2px; }
        #booking-col2 .s7-top-btn-title { font-size:11.9px; font-weight:800; letter-spacing:0.06em; line-height:1; }
        #booking-col2 .s7-top-btn-sub { font-size:8.4px; font-weight:700; letter-spacing:0.14em; line-height:1; text-transform:uppercase; color:#c41e3a; }
        #booking-col2 .s7-top-btn.active .s7-top-btn-sub { color:#ffffff; }
        #booking-col2 .s7-top-btn.active { background:#c9a96e; color:#0a1628; border:none; box-shadow:0 4px 18px rgba(201,169,110,0.4); transform:translateY(-1px); }
        #booking-col2 .s7-top-btn.inactive { background:#ffffff; color:rgba(10,22,40,0.45); border:1.5px solid rgba(201,169,110,0.22); }
        #booking-col2 .s7-top-btn.inactive:hover { border-color:rgba(201,169,110,0.5); color:#0a1628; background:#faf8f5; }
        #booking-col2 .s7-top-btn.neutral { background:#f5f5f0; color:rgba(10,22,40,0.55); border:1.5px solid rgba(201,169,110,0.3); }
        #booking-col2 .s7-top-btn.neutral:hover { border-color:rgba(201,169,110,0.55); color:#0a1628; background:#faf8f5; }
        #col1-sidebar .s7-card { background: #ffffff; border: 1px solid rgba(201,169,110,0.18); border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 12px rgba(10,22,40,0.06); overflow: hidden; }
        #booking-col2 > div:first-child { box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 12px rgba(10,22,40,0.06) !important; }
        #col1-sidebar .s7-toggle-wrap { padding: 12px 14px 9px; border-bottom: 1px solid rgba(201,169,110,0.1); }
        #col1-sidebar .s7-toggle-inner { display: flex; background: rgba(201,169,110,0.08); border-radius: 12px; padding: 3px; gap: 3px; border: 1px solid rgba(201,169,110,0.15); }
        #col1-sidebar .s7-toggle-btn { flex: 1; padding: 8px 8px; border-radius: 9px; border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: 0.08em; font-size: 11.8px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); display: flex; align-items: center; justify-content: center; gap: 6px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        #col1-sidebar .s7-toggle-btn.active { background: #0a1628; color: #c9a96e; box-shadow: 0 2px 12px rgba(10,22,40,0.25); }
        #col1-sidebar .s7-toggle-btn.inactive { background: transparent; color: rgba(10,22,40,0.35); }
        #col1-sidebar .s7-toggle-btn:hover.inactive { background: rgba(201,169,110,0.08); color: rgba(10,22,40,0.6); }
        #col1-sidebar .s7-head { padding: 10px 16px 0; }
        #col1-sidebar .s7-head h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 16.8px; color: #0a1628; letter-spacing: -0.01em; margin: 0 0 2px; line-height: 1.2; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        #col1-sidebar .s7-head p { font-family: 'Montserrat', sans-serif; font-size: 10.4px; color: rgba(10,22,40,0.7); font-weight: 800; margin: 0; letter-spacing: 0.03em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        #col1-sidebar .s7-list { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
        #col1-sidebar .s7-item { width: 100%; text-align: left; padding: 9px 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        #col1-sidebar .s7-item.sel { background: #c9a96e; color: #0a1628; border: 1.5px solid #a08749; box-shadow: 0 4px 16px rgba(201,169,110,0.35); }
        #col1-sidebar .s7-item.sel .s7-item-icon { background: rgba(10,22,40,0.12) !important; }
        #col1-sidebar .s7-item.sel .s7-item-icon svg, #col1-sidebar .s7-item.sel > svg { color: #0a1628 !important; }
        #col1-sidebar .s7-item.unsel { background: rgba(245,243,240,0.9); color: #0a1628; border: 1px solid rgba(201,169,110,0.18); }
        #col1-sidebar .s7-item.unsel:hover { background: #fff; border-color: rgba(201,169,110,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        #col1-sidebar .s7-item-icon { width: 25px; height: 25px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        #booking-col2 .s7-cal-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; text-align: center; background: linear-gradient(160deg, #faf8f5 0%, #f7f4ef 100%); border-radius: 1rem; }
        #booking-col2 .s7-cal-placeholder-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(201,169,110,0.1); border: 2px solid rgba(201,169,110,0.25); display: flex; align-items: center; justify-content: center; }
        #booking-col2 .s7-cal-placeholder h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 17.3px; color: #0a1628; letter-spacing: -0.01em; margin: 0 0 6px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        #booking-col2 .s7-cal-placeholder p { font-family: 'Montserrat', sans-serif; font-size: 9.5px; color: rgba(10,22,40,0.7); font-weight: 500; margin: 0; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

        /* ── S7 VENTANA FLOTANTE DE BLOQUEO ── */
        .s7-block-overlay { position:absolute; inset:0; z-index:9; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:1rem; padding:18px 16px; overflow-x:hidden; overflow-y:auto; animation:s7boFadeIn 0.35s cubic-bezier(0.16,1,0.3,1); }
        @keyframes s7boFadeIn { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }
        .s7-block-overlay::before { content:''; position:absolute; inset:0; background:rgba(10,22,40,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:inherit; z-index:-1; }
        .s7-block-overlay::after { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(rgba(201,169,110,0.035) 0px,rgba(201,169,110,0.035) 1px,transparent 1px,transparent 48px),repeating-linear-gradient(90deg,rgba(201,169,110,0.035) 0px,rgba(201,169,110,0.035) 1px,transparent 1px,transparent 48px); z-index:-1; border-radius:inherit; }
        .s7-bo-title { font-family:'Marcellus',serif; font-size:20.8px; font-weight:400; color:#e8d5a8; letter-spacing:-0.01em; text-align:center; margin:0 0 16px; line-height:1.2; flex-shrink:0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        @media (max-width:640px) { .s7-bo-title { font-size:16.1px; margin-bottom:10px; } }
        .s7-bo-cols { display:flex; width:100%; max-width:560px; gap:0; flex:0 0 auto; }
        @media (max-width:640px) { .s7-bo-cols { flex-direction:row; align-items:flex-start; max-height:none; overflow:hidden; } }
        .s7-bo-col { flex:1; display:flex; flex-direction:column; padding:9px 14px; transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1); }
        .s7-bo-col.dimmed { opacity:0.32; }
        .s7-bo-col-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:6px; font-family:'Montserrat',sans-serif; font-size:10.8px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:5px; flex-shrink:0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        .s7-bo-col-badge.pres { background:rgba(201,169,110,0.12); color:#e0c896; border:1px solid rgba(201,169,110,0.22); }
        .s7-bo-col-badge.virt { background:rgba(94,123,168,0.12); color:#a0b8e0; border:1px solid rgba(94,123,168,0.22); }
        .s7-bo-col-sub { font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:rgba(245,245,240,0.55); margin:0 0 7px; flex-shrink:0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        .s7-bo-divider { width:1px; background:rgba(201,169,110,0.18); flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; }
        @media (max-width:640px) { .s7-bo-divider { width:1px; height:auto; margin:0; } }
        .s7-bo-divider-jewel { width:24px; height:24px; border-radius:50%; background:#0a1628; border:1px solid rgba(201,169,110,0.32); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        @media (max-width:640px) { .s7-bo-col { padding:7px 8px; } }
        .s7-bo-items { display:flex; flex-direction:column; gap:2px; }
        .s7-bo-items::-webkit-scrollbar { width:3px; } .s7-bo-items::-webkit-scrollbar-track { background:transparent; } .s7-bo-items::-webkit-scrollbar-thumb { background:rgba(201,169,110,0.25); border-radius:2px; }
        .s7-bo-item { width:100%; text-align:left; padding:7px 11px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:7px; border:1px solid transparent; transition:all 0.22s cubic-bezier(0.16,1,0.3,1); font-family:'Montserrat',sans-serif; font-size:13px; font-weight:500; color:rgba(245,245,240,0.92); background:rgba(255,255,255,0.04); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        .s7-bo-item:hover { background:rgba(201,169,110,0.14); border-color:rgba(201,169,110,0.28); color:#e8d5a8; transform:translateX(3px); }

        /* ── S7 CRONOGRAMA — tarjetas boutique premium ── */
        .s7-cron-wrap { padding:9px 14px 12px; flex-shrink:0; }
        .s7-cron-header { display:flex; align-items:center; gap:6px; padding:0 0 7px; border-bottom:1px solid rgba(201,169,110,0.12); margin-bottom:5px; }
        .s7-cron-grid { display:flex; flex-direction:column; gap:3px; }
        .s7-cron-doc { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:transparent; border:1px solid rgba(201,169,110,0.1); transition:all 0.25s cubic-bezier(0.16,1,0.3,1); }
        .s7-cron-doc:hover { background:rgba(201,169,110,0.055); border-color:rgba(201,169,110,0.24); transform:translateY(-1px); box-shadow:0 4px 18px rgba(0,0,0,0.14); }
        /* Especialista pre-seleccionado en el calendario — resaltado visual */
        .s7-cron-doc-selected {
            background: linear-gradient(135deg, rgba(74,157,111,0.10), rgba(201,169,110,0.10)) !important;
            border-color: rgba(74,157,111,0.55) !important;
            box-shadow: 0 4px 16px rgba(74,157,111,0.18), 0 0 0 1px rgba(74,157,111,0.32) !important;
        }
        .s7-cron-doc-selected .s7-cron-avatar { border-color: rgba(74,157,111,0.85) !important; box-shadow: 0 0 14px rgba(74,157,111,0.45) !important; }
        .s7-cron-avatar { width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(201,169,110,0.3); overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,#112847,#1a3661); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
        .s7-cron-avatar img { width:100%; height:100%; object-fit:cover; }
        .s7-cron-info { flex:1; min-width:0; }
        .s7-cron-name { font-family:'Marcellus',serif; font-size:16.8px; font-weight:400; color:#0a1628; line-height:1.2; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        .s7-cron-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:6px; border:1px solid rgba(201,169,110,0.3); background:transparent; color:#c9a96e; font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; flex-shrink:0; transition:all 0.22s cubic-bezier(0.16,1,0.3,1); white-space:nowrap; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        .s7-cron-title-txt { font-family:'Montserrat',sans-serif; font-size:18px !important; font-weight:900; letter-spacing:0.18em; text-transform:uppercase; color:rgba(201,169,110,0.95); margin:0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        @media (max-width: 1023px) {
            #col1-sidebar .s7-head h3 { font-size: 15.6px !important; }
            #col1-sidebar .s7-head p  { font-size: 9.6px !important; }
            #col1-sidebar .s7-toggle-btn { font-size: 10.8px !important; }
            #col1-sidebar .s7-item    { font-size: 11px !important; }
            .s7-cron-name             { font-size: 15.6px !important; }
            .s7-cron-btn              { font-size: 10.7px !important; }
            .s7-cron-title-txt        { font-size: 16.6px !important; }
        }
        .s7-cron-btn:hover { background:rgba(201,169,110,0.12); border-color:rgba(201,169,110,0.55); color:#e0c896; }

        /* ── S7 MODAL DE CRONOGRAMA INDIVIDUAL ── */
        .s7-cm-backdrop { position:fixed; inset:0; z-index:9998; background:rgba(10,22,40,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:14px; animation:s7cmBgIn 0.25s ease; }
        @keyframes s7cmBgIn { from { opacity:0; } to { opacity:1; } }
        .s7-cm-modal { background:linear-gradient(160deg,#0d1f3c 0%,#112847 60%,#0a1628 100%); border:1px solid rgba(201,169,110,0.18); border-radius:20px; width:100%; max-width:700px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; animation:s7cmIn 0.32s cubic-bezier(0.16,1,0.3,1); box-shadow:0 32px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(201,169,110,0.06); }
        @keyframes s7cmIn { from { opacity:0; transform:scale(0.93) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
        @keyframes fieldShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
        .field-shake { animation: fieldShake 0.4s cubic-bezier(0.36,0.07,0.19,0.97) both; }
        .s7-cm-header { padding:16px 20px 13px; border-bottom:1px solid rgba(201,169,110,0.1); flex-shrink:0; display:flex; align-items:center; gap:14px; }
        .s7-cm-avatar { width:47px; height:47px; border-radius:50%; border:2px solid rgba(201,169,110,0.38); overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,#112847,#1a3661); box-shadow:0 0 18px rgba(201,169,110,0.18); display:flex; align-items:center; justify-content:center; }
        .s7-cm-avatar img { width:100%; height:100%; object-fit:cover; }
        .s7-cm-doc-name { font-family:'Marcellus',serif; font-size:16.7px; font-weight:400; color:#f5f5f0; letter-spacing:-0.01em; margin:0 0 2px; }
        .s7-cm-doc-spec { font-family:'Montserrat',sans-serif; font-size:9.8px; font-weight:500; color:rgba(201,169,110,0.6); letter-spacing:0.03em; margin:0 0 4px; }
        .s7-cm-close { width:32px; height:32px; border-radius:50%; background:#c41e3a; border:1px solid rgba(160,45,70,0.8); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#ffffff; transition:all 0.2s; margin-left:auto; flex-shrink:0; }
        .s7-cm-close:hover { background:#9b1530; border-color:rgba(160,45,70,1); color:#ffffff; }
        .s7-cm-body { flex:1; overflow-y:auto; padding:12px 18px; }
        .s7-cm-body::-webkit-scrollbar { width:4px; } .s7-cm-body::-webkit-scrollbar-track { background:transparent; } .s7-cm-body::-webkit-scrollbar-thumb { background:rgba(201,169,110,0.28); border-radius:3px; }
        .s7-cm-section-title { font-family:'Montserrat',sans-serif; font-size:10.4px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:rgba(201,169,110,0.92); margin:0 0 10px; padding-bottom:5px; border-bottom:1px solid rgba(201,169,110,0.18); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.4; }
        .s7-cm-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; margin-bottom:4px; border:1px solid rgba(201,169,110,0.09); background:rgba(255,255,255,0.025); transition:background 0.2s; }
        .s7-cm-item:hover { background:rgba(201,169,110,0.055); }
        .s7-cm-item-clickable { transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease; }
        .s7-cm-item-clickable:hover { background: rgba(201,169,110,0.14) !important; border-color: rgba(201,169,110,0.6) !important; transform: translateX(2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
        .s7-cm-item-clickable:active { transform: scale(0.98) translateX(0); }
        .s7-cm-date-col { flex-shrink:0; width:58px; text-align:center; }
        .s7-cm-day { font-family:'Montserrat',sans-serif; font-size:6px; font-weight:700; color:rgba(201,169,110,0.65); text-transform:uppercase; letter-spacing:0.06em; }
        .s7-cm-num { font-family:'Marcellus',serif; font-size:12.6px; color:#e0c896; line-height:1; }
        .s7-cm-month { font-family:'Montserrat',sans-serif; font-size:5.5px; font-weight:500; color:rgba(245,245,240,0.38); text-transform:uppercase; }
        .s7-cm-divider-v { width:1px; height:36px; background:rgba(201,169,110,0.14); flex-shrink:0; }
        .s7-cm-event-info { flex:1; min-width:0; }
        .s7-cm-sede { font-family:'Montserrat',sans-serif; font-size:10.8px; font-weight:500; color:#f5f5f0; margin:0 0 2px; }
        .s7-cm-horario { font-family:'Montserrat',sans-serif; font-size:7.9px; font-weight:500; color:rgba(201,169,110,0.5); margin:0 0 3px; }
.s7-cm-btn-agenda { padding:5px 11px; border-radius:7px; background:rgba(201,169,110,0.1); border:1px solid rgba(201,169,110,0.22); color:#c9a96e; font-family:'Montserrat',sans-serif; font-size:5.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; flex-shrink:0; transition:all 0.2s; white-space:nowrap; }
        .s7-cm-btn-agenda:hover { background:rgba(201,169,110,0.2); border-color:#c9a96e; }
        .s7-cm-footer { padding:10px 18px 14px; border-top:1px solid rgba(201,169,110,0.1); flex-shrink:0; }
        .s7-cm-footer > div { flex-wrap:wrap; }
        .s7-cm-cta { flex:1 1 auto; padding:10px 16px; border-radius:12px; border:none; cursor:pointer; background:linear-gradient(135deg,#c9a96e,#a08749); color:#0a1628; font-family:'Montserrat',sans-serif; font-size:9.8px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 18px rgba(201,169,110,0.28); }
        .s7-cm-cta:hover { transform:translateY(-1px); box-shadow:0 8px 26px rgba(201,169,110,0.38); }
        .s7-cm-cta-sec { flex:1 1 auto; padding:10px 16px; border-radius:12px; border:1.5px solid rgba(201,169,110,0.32); cursor:pointer; background:transparent; color:#c9a96e; font-family:'Montserrat',sans-serif; font-size:9.8px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); display:flex; align-items:center; justify-content:center; gap:8px; }
        .s7-cm-cta-sec:hover { background:rgba(201,169,110,0.1); border-color:rgba(201,169,110,0.6); transform:translateY(-1px); }
        /* MOBILE: stack vertical para que ambos botones quepan dentro del modal */
        @media (max-width: 640px) {
            .s7-cm-footer > div { flex-direction: column; gap: 8px !important; }
            .s7-cm-cta, .s7-cm-cta-sec { min-width: 0 !important; width: 100% !important; padding: 9px 12px !important; font-size: 9.5px !important; }
        }
        .s7-cm-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:25px; color:rgba(201,169,110,0.65); font-family:'Montserrat',sans-serif; font-size:6.7px; }

        /* ══════════════════════════════════════════════════════════
           SEC 7 MODAL MODE
           Trigger exacto: "Selecciona tu Horario" (paso calendario)
           NO activa en selección de modalidad (.s7-block-overlay)
           ══════════════════════════════════════════════════════════ */

        /* Overlay oscuro (detrás del panel, encima del sitio) */
        #s7-page-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(10, 22, 40, 0.83);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 8000;
            cursor: pointer;
        }
        #s7-page-overlay.s7-ov-active {
            display: block;
            animation: s7OvIn 0.38s cubic-bezier(0.16,1,0.3,1) forwards;
        }
        #s7-page-overlay.s7-ov-out {
            display: block;
            animation: s7OvOut 0.28s cubic-bezier(0.4,0,1,1) forwards;
        }
        @keyframes s7OvIn  { from { opacity:0; } to { opacity:1; } }
        @keyframes s7OvOut { from { opacity:1; } to { opacity:0; } }

        /* Bloqueo de scroll del body */
        body.s7-modal-active { overflow: hidden !important; }

        /* Panel centrado — desktop
           transform en el padre hace que el header interno (position:fixed)
           quede anclado DENTRO del panel en vez del viewport */
        body.s7-modal-active #armonniza-app-root {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: min(96vw, 1280px) !important;
            height: min(92vh, 920px) !important;
            max-height: min(92vh, 920px) !important;
            z-index: 8500 !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            box-shadow:
                0 32px 80px rgba(0,0,0,0.65),
                0 0 0 1px rgba(201,169,110,0.18),
                0 0 0 4px rgba(201,169,110,0.06) !important;
            animation: s7PanelIn 0.42s cubic-bezier(0.16,1,0.3,1) forwards;
        }
        @keyframes s7PanelIn {
            from { opacity:0.6; transform:translate(-50%,-50%) scale(0.96); }
            to   { opacity:1;   transform:translate(-50%,-50%) scale(1);    }
        }
        body.s7-modal-active #armonniza-app-root > div.armonniza-main-view {
            height: 100% !important;
            border-radius: 20px !important;
            overflow: auto !important; /* permite que #booking-section maneje su propio scroll */
        }

        /* Mini footer bar — visible sobre overlay, debajo del panel (z-index 8200) */
        #s7-footer-bar {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            height: 46px;
            z-index: 8200;
            background: rgba(10, 22, 40, 0.97);
            border-top: 1px solid rgba(201,169,110,0.18);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            gap: 16px;
        }
        body.s7-modal-active #s7-footer-bar {
            display: flex;
            animation: s7OvIn 0.45s cubic-bezier(0.16,1,0.3,1) forwards;
        }
        .s7-fb-links { display:flex; align-items:center; gap:22px; }
        .s7-fb-link {
            font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600;
            letter-spacing:0.12em; text-transform:uppercase;
            color:rgba(168,168,158,0.72); text-decoration:none;
            border:none; background:none; cursor:pointer; padding:0;
            transition:color 0.18s ease;
        }
        .s7-fb-link:hover { color:#c9a96e; }
        .s7-fb-sep { width:1px; height:14px; background:rgba(201,169,110,0.18); flex-shrink:0; }
        .s7-fb-close {
            font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
            letter-spacing:0.12em; text-transform:uppercase;
            color:#ffffff;
            border:1px solid rgba(160,45,70,0.8); border-radius:8px;
            background:#c41e3a;
            padding:6px 16px; cursor:pointer; white-space:nowrap;
            transition:all 0.18s ease; display:flex; align-items:center; gap:6px;
        }
        .s7-fb-close:hover { background:#9b1530; color:#ffffff; border-color:rgba(160,45,70,1); }

        /* Mobile: pantalla completa, sin footer bar */
        @media (max-width: 767px) {
            body.s7-modal-active #armonniza-app-root {
                width: 100vw !important;
                height: 100vh !important;
                max-height: 100vh !important;
                top: 0 !important;
                left: 0 !important;
                transform: none !important;
                border-radius: 0 !important;
                animation: none !important;
            }
            body.s7-modal-active #armonniza-app-root > div.armonniza-main-view {
                border-radius: 0 !important;
            }
            body.s7-modal-active #s7-footer-bar { display: none !important; }
        }

        @media (prefers-reduced-motion: reduce) {
            #s7-page-overlay.s7-ov-active, #s7-page-overlay.s7-ov-out,
            body.s7-modal-active #armonniza-app-root,
            body.s7-modal-active #s7-footer-bar { animation: none !important; }
        }

        /* ────────────────────────────────────────────────────────────
           SEC 7 MODAL — CORRECCIONES VISUALES
           Fix 1: Toggle PRESENCIAL/VIRTUAL visible
           Fix 2: Padding-top para no quedar bajo el header fijo (97px)
           Fix 3: Overflow + scroll correcto en sedes
           Fix 4: Tipografía +15% en elementos con clase CSS
           ──────────────────────────────────────────────────────────── */


        /* Fix 2 — Compensar header fijo de 97px y habilitar scroll */
        body.s7-modal-active #booking-section {
            padding-top: 97px !important;
            box-sizing: border-box !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
        @media (max-width: 1023px) {
            body.s7-modal-active #booking-section {
                padding-top: 70px !important; /* header mobile = 70px */
            }
        }
        /* Botones modalidad: NO sticky · al hacer clic se hace scroll para que vuelvan a ser visibles
           (Lógica manejada por JS al detectar el clic en .s7-top-btn) */

        /* Ficha de Paciente — Celular / Email apilados verticalmente en mobile */
        @media (max-width: 768px) {
            .form-phone-email-grid {
                grid-template-columns: 1fr !important;
                gap: 14px !important;
            }
        }

        /* Fix 3 — Sidebar sedes: garantizar scroll interno visible */
        body.s7-modal-active #col1-sidebar {
            overflow-y: auto !important;
        }
        body.s7-modal-active #col1-sidebar .s7-card {
            min-height: 0 !important;
        }
        body.s7-modal-active #col1-sidebar .s7-list {
            overflow-y: auto !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }

        /* ══════════════════════════════════════════════════════════════════
           Tipografía dentro del modo bloqueado (s7-modal-active) — DESKTOP
           ══════════════════════════════════════════════════════════════════ */
        /* Título Agenda Presencial/Virtual + subtítulo Selecciona Sede/Plataforma — +100% */
        body.s7-modal-active #col1-sidebar .s7-head h3        { font-size: 24.8px !important; line-height:1.15 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* +100% sobre 12.4 */
        body.s7-modal-active #col1-sidebar .s7-head p         { font-size: 15.4px !important; line-height:1.25 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* +100% sobre 7.7 */
        /* Nombres de sedes/plataformas en la lista (.s7-item) — +50% tamaño, peso reducido */
        body.s7-modal-active #col1-sidebar .s7-item           { font-size: 13.4px !important; font-weight: 400 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* +50% sobre 8.9, peso 800→400 */
        body.s7-modal-active #col1-sidebar .s7-toggle-btn     { font-size: 8.7px  !important; padding: 9.2px 9.2px !important; }
        /* Cronograma: nombres y "Ver agenda" — reducir 30% sobre tamaño anterior en lock */
        body.s7-modal-active #col1-sidebar .s7-cron-name      { font-size: 13px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }     /* -30% sobre 18.5 */
        body.s7-modal-active #col1-sidebar .s7-cron-btn       { font-size: 9.7px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }    /* -30% sobre 13.8 */
        body.s7-modal-active #col1-sidebar .s7-cron-title-txt { font-size: 14.4px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* -20% sobre 18 */
        body.s7-modal-active #col1-sidebar .s7-item-icon      { width: 29px !important; height: 29px !important; }
        body.s7-modal-active .s7-cron-header                  { padding: 0 0 8px !important; }
        body.s7-modal-active #col1-sidebar .s7-col-title,
        body.s7-modal-active #col1-sidebar .s7-bo-col-sub     { font-size: 14.3px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

        /* ── Responsive: mobile (<1024px) — escala proporcional ~80% del desktop ── */
        @media (max-width: 1023px) {
            body.s7-modal-active #col1-sidebar .s7-head h3        { font-size: 20.5px !important; }   /* ~83% de 24.8 */
            body.s7-modal-active #col1-sidebar .s7-head p         { font-size: 12.7px !important; }   /* ~82% de 15.4 */
            body.s7-modal-active #col1-sidebar .s7-item           { font-size: 11.5px !important; }   /* ~86% de 13.4 */
            body.s7-modal-active #col1-sidebar .s7-cron-name      { font-size: 11.2px !important; }
            body.s7-modal-active #col1-sidebar .s7-cron-btn       { font-size: 8.5px  !important; }
            body.s7-modal-active #col1-sidebar .s7-cron-title-txt { font-size: 12.5px !important; }
        }

        /* Top buttons (modalidad) — tamaño SIN cambio en lock */
        body.s7-modal-active #booking-col2 .s7-top-btn        { font-size: 11.9px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        body.s7-modal-active #booking-col2 .s7-top-btn-title  { font-size: 11.9px !important; }
        body.s7-modal-active #booking-col2 .s7-top-btn-sub    { font-size: 8.4px  !important; }

        /* Columna derecha — +50% en TODO el texto excepto: top-btn, casillas fechas/horarios, atrás, X */
        body.s7-modal-active #booking-col2 h3,
        body.s7-modal-active #booking-col2 p,
        body.s7-modal-active #booking-col2 span,
        body.s7-modal-active #booking-col2 div { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        /* ── DUPLICADO ELIMINADO ──
           El s7-block-overlay no se muestra en modo bloqueado (s7-modal-active).
           Con el nuevo flujo, al entrar al lock siempre hay La Paz / WhatsApp por defecto,
           así que el overlay de selección no es necesario en ese estado. */
        body.s7-modal-active .s7-block-overlay { display: none !important; }
        /* Overrides de tamaño antiguos quedan inertes porque el overlay ya no se renderiza en lock */
        body.s7-modal-active .s7-cal-placeholder h3           { font-size: 26px   !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* +50% sobre 17.3 */
        body.s7-modal-active .s7-cal-placeholder p            { font-size: 14.3px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* +50% sobre 9.5 */

        /* Calendar step ("Selecciona tu Horario") — +50% en textos descriptivos.
           Casillas de fechas/horarios, botones atrás y X conservan su tamaño. */
        body.s7-modal-active .s7-cs-title    { font-size: 21px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }   /* h3: 14 → 21 */
        body.s7-modal-active .s7-cs-sub      { font-size: 16.5px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }  /* sede/plataforma: 11 → 16.5 */
        body.s7-modal-active .s7-cs-month    { font-size: 16.5px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }  /* mes: 11 → 16.5 */
        body.s7-modal-active .s7-cs-label    { font-size: 15px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }    /* Fechas/Horarios label: 10 → 15 */
        body.s7-modal-active .s7-cs-continue { font-size: 16.5px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }  /* CONTINUAR: 11 → 16.5 */
        /* Leyendas dentro del paso calendario */
        body.s7-modal-active .s7-cal-step .text-\[9px\]  { font-size: 13.5px !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        body.s7-modal-active .s7-cal-step .text-\[8px\]  { font-size: 12px   !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

        /* Labels del calendario ("FECHAS DISPONIBLES", "Horarios —…") — máximo brillo + negrita */
        .s7-cal-step .s7-cs-label { color:#c9a96e !important; font-weight:800 !important; text-shadow:0 0 6px rgba(201,169,110,0.45); }

        /* ── Compactar el paso calendario en MÓVIL (de "Junio 2026" hacia abajo):
              fuentes un poco más chicas + menos espacio entre filas ── */
        @media (max-width: 1023px) {
            body.s7-modal-active .s7-cs-month    { font-size: 13px !important; }
            body.s7-modal-active .s7-cs-label    { font-size: 11px !important; margin-bottom: 2px !important; }
            body.s7-modal-active .s7-cs-continue { font-size: 13px !important; }
            body.s7-modal-active .s7-cal-step .text-\[9px\] { font-size: 10px !important; }
            body.s7-modal-active .s7-cal-step .text-\[8px\] { font-size: 9px  !important; }
            body.s7-modal-active .s7-cal-step .gap-2 { gap: 4px !important; }
            body.s7-modal-active .s7-cal-step .mt-1 { margin-top: 2px !important; }
            body.s7-modal-active .s7-cal-step .mb-1 { margin-bottom: 2px !important; }
            body.s7-modal-active .s7-cal-step .pb-1 { padding-bottom: 2px !important; }
            /* Botones ~30% más bajos + texto coherente (fechas, horarios, ATRÁS) */
            .s7-cal-step .s7-cs-back { padding-top:5px !important; padding-bottom:5px !important; font-size:10.5px !important; }
            .s7-cal-step .s7-cs-datecell { padding-top:3px !important; padding-bottom:3px !important; }
            .s7-cal-step .s7-cs-datecell > span:nth-child(1) { font-size:14px !important; line-height:1 !important; }
            .s7-cal-step .s7-cs-datecell > span:nth-child(2),
            .s7-cal-step .s7-cs-datecell > span:nth-child(3) { font-size:9px !important; line-height:1 !important; }
            .s7-cal-step .s7-cs-timecell { padding-top:4px !important; padding-bottom:4px !important; font-size:12px !important; }
            /* Subir el contenido y separarlo del botón CONTINUAR */
            .s7-cal-step .s7-cs-continue-wrap { margin-top:16px !important; }
        }

        .before-after-img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
        .before-after-card:hover .before-after-img { transform: scale(1.05); }

        input:focus, textarea:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.25) !important; outline: none; }

        /* Subsedes ocultas - selección directa */
        .lg\:hidden.absolute.top-\[85\%\] { display: none !important; }
        div[class*="fixed"][class*="z-\[999\]"][class*="hidden lg:block"] { display: none !important; }

        /* ── TIPOGRAFÍA MÓVIL -23.5% del original ── */
        @media (max-width: 1023px) {
            /* Escala base */
            body { font-size: 87.98%; }

            .text-\[7px\]    { font-size: 6.43px !important; }
            .text-\[7\.5px\] { font-size: 6.89px !important; }
            .text-\[8px\]    { font-size: 7.34px !important; }
            .text-\[8\.8px\] { font-size: 8.11px !important; }
            .text-\[9px\]    { font-size: 8.26px !important; }
            .text-\[9\.9px\] { font-size: 9.11px !important; }
            .text-\[10px\]   { font-size: 9.18px !important; }
            .text-\[11px\]   { font-size: 10.1px !important; }
            .text-\[12px\]   { font-size: 11.02px !important; }
            .text-\[12\.1px\]{ font-size: 11.1px !important; }
            .text-\[13px\]   { font-size: 11.93px !important; }
            .text-\[13\.2px\]{ font-size: 12.09px !important; }
            .text-\[14px\]   { font-size: 12.85px !important; }
            .text-\[14\.3px\]{ font-size: 13.16px !important; }
            .text-\[15px\]   { font-size: 13.77px !important; }
            .text-\[15\.4px\]{ font-size: 14.16px !important; }
            .text-xs  { font-size: 11.02px !important; }
            .text-sm  { font-size: 12.85px !important; }
            .text-base{ font-size: 14.69px !important; }
            .text-lg  { font-size: 16.52px !important; }
            .text-xl  { font-size: 18.36px !important; }
            .text-2xl { font-size: 22.03px !important; }
            .text-3xl { font-size: 33.05px !important; }

            /* Letter-spacing: reducir levemente para compensar */
            .tracking-widest { letter-spacing: 0.06em !important; }
            .tracking-\[0\.2em\] { letter-spacing: 0.12em !important; }
            .tracking-\[0\.12em\] { letter-spacing: 0.08em !important; }
            .tracking-\[0\.1em\]  { letter-spacing: 0.06em !important; }
        }

        /* Tipografía base — Sec 7 */
        header, footer, #booking-col2, #col1-sidebar { font-size: 1rem !important; }

        /* Sidebar derecho especialidades sin cambio */
        #col3-sidebar { font-size: 1rem !important; }

        /* Forzar tamaño texto especialidades */
        [id="col3-sidebar"] p,
        [id="col3-sidebar"] span,
        [id="col3-sidebar"] div > p {
            font-size: 11.93px !important;
        }

        /* Placeholder color del input chatbot */
        #armonniza-app-root input::placeholder { color: #8a7a6a !important; }
        /* Input chatbot — override Firebase body color */
        #ai-chat-input { background: #ffffff !important; color: #0a1628 !important; border: 1px solid #d4cfc8 !important; }
        #ai-chat-input::placeholder { color: #8a7a6a !important; }

        /* ══ TIPOGRAFÍA GLOBAL ARMONNIZA ══ */

        /* Headings → Marcellus elegante */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Marcellus', serif !important;
            font-weight: 400 !important;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        /* Reducción de peso global — Tailwind utility classes */
        .font-black    { font-weight: 700 !important; }
        .font-extrabold{ font-weight: 700 !important; }
        .font-bold     { font-weight: 600 !important; }
        .font-semibold { font-weight: 500 !important; }
        .font-medium   { font-weight: 400 !important; }

        /* Botones globales — peso más fino */
        button { font-family: 'Montserrat', sans-serif; }

        /* Labels uppercase pequeños — tracking premium */
        .uppercase.tracking-widest { letter-spacing: 0.15em !important; }
        .uppercase.tracking-\[0\.1em\] { letter-spacing: 0.12em !important; }

        /* Párrafos y body — Montserrat legible */
        p, span, li, td, th, label, input, textarea, select {
            font-family: 'Montserrat', sans-serif;
        }

        /* Excepción: elementos con Marcellus explícito no se pisan */
        [style*="Marcellus"] { font-family: 'Marcellus', serif !important; }

        /* ── HERO SECTION — NOIR DORADO PREMIUM 2026 ── */
        #hero-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #060d18;
        }

        /* Parallax wrapper — DESKTOP: solo lado derecho (fondo del content) + top 80vh */
        #hero-bg-parallax {
            position: absolute;
            top: 0;
            left: 50%;
            right: 0;
            height: 80vh;
            overflow: hidden;
            z-index: 0;
            will-change: transform;
        }

        /* Background photo — Ken Burns loop */
        #hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=1920&q=85&auto=format&fit=crop');
            background-size: cover;
            background-position: center center;
            opacity: 0;
            transition: opacity 1.5s ease-out;
            will-change: transform, opacity;
        }
        #hero-bg.loaded { opacity: 0.42; }
        #hero-bg.kb-active {
            animation: heroBurns 26s ease-in-out infinite alternate;
        }
        @keyframes heroBurns {
            from { transform: scale(1.0) translate(0, 0); }
            to   { transform: scale(1.08) translate(-0.5%, 0.4%); }
        }
        @media (prefers-reduced-motion: reduce) {
            #hero-bg.kb-active { animation: none; }
            #hero-bg-parallax { will-change: auto; }
        }

        /* Gradient overlay — DESKTOP: solo lado derecho, top 80vh */
        #hero-overlay {
            position: absolute;
            top: 0;
            left: 50%;
            right: 0;
            height: 80vh;
            background: linear-gradient(
                to bottom,
                rgba(6, 13, 24, 0.78) 0%,
                rgba(6, 13, 24, 0.50) 30%,
                rgba(6, 13, 24, 0.50) 70%,
                rgba(6, 13, 24, 0.95) 100%
            );
            z-index: 2;
            pointer-events: none;
        }

        /* Main content area — DESKTOP: COLUMNA DERECHA (50%), 3 zonas verticales */
        #hero-main {
            position: relative;
            z-index: 10;
            height: 80vh;
            display: grid;
            grid-template-rows: auto 1fr auto;   /* texto top · espacio · CTA bottom */
            align-items: center;
            justify-items: center;
            text-align: center;
            padding: 155px 4vw 40px;
            margin-left: 50%;
            max-width: 50%;
            flex-shrink: 0;
            box-sizing: border-box;
            pointer-events: none;
        }
        #hero-main > * { pointer-events: auto; }

        /* ── Texto flotante (top de columna derecha en desktop, top de stack en mobile) ── */
        .hero-floating-text {
            grid-row: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 22px 28px;
            border-radius: 20px;
            background: rgba(10,22,40,0.45);
            backdrop-filter: blur(16px) saturate(1.45);
            -webkit-backdrop-filter: blur(16px) saturate(1.45);
            border: 1px solid rgba(201,169,110,0.35);
            box-shadow:
                0 22px 56px rgba(0,0,0,0.6),
                0 0 0 1px rgba(255,250,235,0.06),
                0 0 44px rgba(201,169,110,0.2);
            animation: heroFloatGentle 5.5s ease-in-out infinite;
        }
        /* ── Botón flotante (bottom de columna derecha en desktop, bottom de stack en mobile) ── */
        .hero-floating-cta {
            grid-row: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px 26px;
            border-radius: 18px;
            background: rgba(10,22,40,0.45);
            backdrop-filter: blur(16px) saturate(1.45);
            -webkit-backdrop-filter: blur(16px) saturate(1.45);
            border: 1px solid rgba(201,169,110,0.35);
            box-shadow:
                0 22px 60px rgba(0,0,0,0.62),
                0 0 0 1px rgba(255,250,235,0.06),
                0 0 48px rgba(201,169,110,0.22);
            animation: heroFloatGentle 6.2s ease-in-out infinite;
            animation-delay: -2.8s;
        }
        @keyframes heroFloatGentle {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-6px); }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-floating-text, .hero-floating-cta { animation: none !important; }
        }

        /* Eyebrow */
        #hero-eyebrow-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.64rem;
            font-weight: 600;
            color: var(--dorado);
            letter-spacing: 0.32em;
            text-transform: uppercase;
            margin: 0 0 2.4rem;
            opacity: 0;
            animation: heroUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }

        /* ────────────────────────────────────────────────────────────
           VIDEO — DESKTOP: lado izquierdo (50%) ocupa la sección superior 80vh
           con MARGENES en los 4 lados (look card premium)
           ──────────────────────────────────────────────────────────── */
        #hero-video {
            position: absolute;
            top: 100px;
            left: 107px;                          /* corrida ~2cm a la derecha */
            width: calc(50% - 139px);             /* borde derecho fijo (no cruza el centro) */
            height: calc(80vh - 132px);           /* baja debajo del header, mantiene margen inferior */
            object-fit: cover;
            object-position: center;
            z-index: 4;
            opacity: 1;
            border-radius: 22px;
            border: 1px solid rgba(201,169,110,0.45);
            box-shadow:
                0 32px 80px rgba(0,0,0,0.6),
                0 0 0 1px rgba(255,250,235,0.06),
                0 0 48px rgba(201,169,110,0.22);
            transition: opacity 1s ease, box-shadow 0.4s ease, border-color 0.4s ease;
            display: block;
            background: #0a1628;
        }
        #hero-video:hover {
            border-color: rgba(201,169,110,0.75);
            box-shadow:
                0 28px 68px rgba(0,0,0,0.62),
                0 0 0 1px rgba(255,250,235,0.1),
                0 0 48px rgba(201,169,110,0.28);
        }
        /* Separador vertical sutil dorado entre las 2 columnas del split (desktop) */
        #hero-section::before {
            content: '';
            position: absolute;
            top: 60px;
            height: calc(80vh - 120px);
            left: 50%;
            width: 1px;
            background: linear-gradient(to bottom,
                transparent 0%,
                rgba(201,169,110,0.22) 30%,
                rgba(201,169,110,0.32) 50%,
                rgba(201,169,110,0.22) 70%,
                transparent 100%);
            z-index: 3;
            pointer-events: none;
        }
        /* ════════════════════════════════════════════════════════════
           BOTÓN PLAY/PAUSE CENTRAL — Centro del panel de video
           Aparece solo en hover o cuando el video está pausado
           ════════════════════════════════════════════════════════════ */
        #hero-play-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: calc(25% + 37px);     /* CENTRO horizontal del video (corrido con la foto) */
            top: calc(40vh + 34px);     /* CENTRO vertical del video (top 100 + (80vh-132)/2) */
            transform: translate(-50%, -50%);
            z-index: 11;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            opacity: 0;
            transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1);
        }
        /* Mostrar al hover sobre el video (desktop) o si está pausado */
        #hero-section:hover #hero-play-btn,
        #hero-play-btn.is-paused { opacity: 1; }
        #hero-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
        #hero-play-btn:active { transform: translate(-50%, -50%) scale(0.95); }

        /* Anillo dorado sutil */
        .hpb-ring {
            position: absolute;
            top: 50%; left: 50%;
            width: 92px; height: 92px;
            border-radius: 50%;
            border: 1.5px solid rgba(201,169,110,0.4);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        #hero-play-btn.is-paused .hpb-ring {
            animation: hpbPulse 2.4s cubic-bezier(0.16,1,0.3,1) infinite;
        }
        @keyframes hpbPulse {
            0%   { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
            70%  { opacity: 0;    transform: translate(-50%, -50%) scale(1.5); }
            100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.5); }
        }

        /* Círculo principal del play/pause */
        .hpb-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 78px; height: 78px;
            border-radius: 50%;
            background: rgba(10,22,40,0.62);
            backdrop-filter: blur(12px) saturate(1.4);
            -webkit-backdrop-filter: blur(12px) saturate(1.4);
            border: 1.5px solid rgba(201,169,110,0.6);
            color: #e8d5a8;
            font-size: 24px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.5);
            transition: background 0.28s ease, border-color 0.28s ease;
        }
        #hero-play-btn:hover .hpb-icon {
            background: rgba(201,169,110,0.25);
            border-color: rgba(232,213,168,0.95);
            color: #ffffff;
        }
        /* En estado pausado: círculo lleno dorado (más llamativo) */
        #hero-play-btn.is-paused .hpb-icon {
            background: linear-gradient(135deg, rgba(201,169,110,0.95) 0%, rgba(232,213,168,0.95) 100%);
            color: #0a1628;
            border-color: rgba(255,250,235,0.5);
            padding-left: 5px;
        }

        /* ────────────────────────────────────────────────────────────
           BOTÓN AUDIO — dentro del video card, esquina inferior izq
           ──────────────────────────────────────────────────────────── */
        #hero-audio-toggle {
            display: flex;
            position: absolute;
            top: calc(80vh - 80px);       /* esquina inferior del video (bottom a 80vh-32px) */
            left: 135px;                  /* esquina inferior izq. del video (corrido con la foto) */
            bottom: auto;
            z-index: 12;
            width: 42px; height: 42px;
            border-radius: 50%;
            background: rgba(10,22,40,0.62);
            backdrop-filter: blur(10px) saturate(1.3);
            -webkit-backdrop-filter: blur(10px) saturate(1.3);
            border: 1px solid rgba(201,169,110,0.45);
            color: #e8d5a8;
            cursor: pointer;
            align-items: center; justify-content: center;
            font-size: 15px;
            transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
            box-shadow: 0 8px 22px rgba(0,0,0,0.38);
        }
        #hero-audio-toggle:hover {
            background: rgba(201,169,110,0.22);
            border-color: rgba(201,169,110,0.85);
            color: #ffffff;
            transform: scale(1.06);
        }
        #hero-audio-toggle.active {
            background: rgba(201,169,110,0.32);
            border-color: rgba(201,169,110,0.85);
            color: #ffffff;
        }
        /* Hint: pulsa cuando el browser bloqueó autoplay con sonido → invita a activar */
        #hero-audio-toggle.hint {
            animation: heroAudioHint 1.8s cubic-bezier(0.16,1,0.3,1) infinite;
            background: rgba(201,169,110,0.28);
            border-color: rgba(232,213,168,0.85);
            color: #ffffff;
        }
        @keyframes heroAudioHint {
            0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 0 0 0 rgba(201,169,110,0.55); }
            50%      { box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 0 0 9px rgba(201,169,110,0); }
        }

        /* ════════════════════════════════════════════════════════════
           STICKY MINI VIDEO — al scrolear, el video se reduce y
           se ancla en la esquina superior izquierda (estilo PiP)
           ════════════════════════════════════════════════════════════ */
        #hero-video-close {
            display: none;
            position: absolute;
            top: 6px; right: 6px;
            z-index: 14;
            width: 24px; height: 24px;
            border-radius: 50%;
            background: rgba(196,30,58,0.92);
            border: 1px solid rgba(160,45,70,0.85);
            color: #ffffff;
            cursor: pointer;
            align-items: center; justify-content: center;
            font-size: 10px;
            transition: background 0.18s ease, transform 0.18s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        #hero-video-close:hover { background: #9b1530; transform: scale(1.08); }

        /* Estado sticky: video transforma a mini panel fijo top-left */
        #hero-video.is-sticky {
            position: fixed !important;
            top: 110px !important;          /* debajo del header */
            left: 18px !important;
            width: 240px !important;
            height: 135px !important;        /* 16:9 ratio */
            border-radius: 14px !important;
            border: 1.5px solid rgba(201,169,110,0.55);
            box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,250,235,0.08);
            z-index: 90 !important;
            opacity: 1 !important;
            object-fit: cover !important;
            cursor: pointer;
            transition: top 0.32s cubic-bezier(0.16,1,0.3,1), left 0.32s cubic-bezier(0.16,1,0.3,1),
                        width 0.32s cubic-bezier(0.16,1,0.3,1), height 0.32s cubic-bezier(0.16,1,0.3,1);
        }
        /* Cuando el video es sticky, los controles también se reposicionan */
        body.hero-sticky #hero-play-btn {
            position: fixed !important;
            top: 177px !important;           /* centro vertical del mini video */
            left: 138px !important;          /* centro horizontal del mini */
            transform: translate(-50%, -50%) !important;
            z-index: 95 !important;
        }
        body.hero-sticky #hero-play-btn .hpb-icon { width: 38px !important; height: 38px !important; font-size: 12px !important; }
        body.hero-sticky #hero-play-btn .hpb-ring { display: none !important; }
        body.hero-sticky #hero-audio-toggle {
            position: fixed !important;
            top: 220px !important;           /* debajo del mini video */
            left: 28px !important;
            bottom: auto !important;
            width: 32px !important;
            height: 32px !important;
            font-size: 12px !important;
            z-index: 95 !important;
        }
        body.hero-sticky #hero-video-close {
            display: flex !important;
            position: fixed !important;
            top: 116px !important;
            left: 234px !important;          /* esquina superior derecha del mini */
            z-index: 96 !important;
        }
        /* Overlay no aplica en sticky */
        body.hero-sticky #hero-overlay { display: none; }

        /* ARMONNIZA — protagonista visual */
        #hero-brand {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.9rem, 3.3vw, 3.3rem);
            font-weight: 400;
            color: #f5f5f0;
            letter-spacing: 0.15em;
            line-height: 1;
            white-space: nowrap;
            margin: 0;
            opacity: 0;
            animation: heroUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
            text-shadow: 0 4px 24px rgba(0,0,0,0.55);
        }
        /* Headline tagline — tamaño ajustado al floating card */
        #hero-headline {
            font-size: clamp(0.92rem, 1.4vw, 1.2rem) !important;
            margin: 0 !important;
            text-shadow: 0 2px 14px rgba(0,0,0,0.5);
        }

        /* Thin vertical gold line between brand and headline */
        #hero-brand-line {
            width: 1px;
            height: 44px;
            background: linear-gradient(to bottom, transparent, var(--dorado), transparent);
            margin: 0.8rem auto 1.2rem;
            opacity: 0;
            animation: heroFade 0.8s ease-out 0.7s forwards;
        }

        /* Primary headline */
        #hero-headline {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.3rem, 2.8vw, 2rem);
            font-weight: 400;
            color: var(--dorado-claro);
            letter-spacing: 0.04em;
            line-height: 1.25;
            margin: 0 0 1.6rem;
            opacity: 0;
            animation: heroUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
        }

        /* Subtitle */
        #hero-sub {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(0.8rem, 1.3vw, 0.92rem);
            font-weight: 300;
            color: rgba(245, 245, 240, 0.65);
            letter-spacing: 0.04em;
            line-height: 1.75;
            max-width: 460px;
            margin: 0 auto 0.7rem;
            opacity: 0;
            animation: heroFade 0.8s ease-out 0.75s forwards;
        }

        /* Location tag — diferenciador exclusivo */
        #hero-location-tag {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 0.75rem;
            margin: 0 0 3.2rem;
            opacity: 0;
            animation: heroFade 0.8s ease-out 0.88s forwards;
        }
        .hero-loc-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.55em;
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(0.72rem, 1.1vw, 0.9rem);
            font-weight: 600;
            color: var(--dorado-claro);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 0.55rem 1.3rem;
            border: 1px solid rgba(201, 169, 110, 0.38);
            background: rgba(201, 169, 110, 0.07);
            border-radius: 2px;
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        .hero-loc-pill:hover {
            background: rgba(201, 169, 110, 0.13);
            border-color: rgba(201, 169, 110, 0.6);
        }
        .hero-loc-pill i { font-size: 0.75em; opacity: 0.85; }

        /* CTA button — outlined gold with fill on hover */
        #hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.75em;
            padding: 1.15rem 3.2rem;
            border: 1px solid var(--dorado);
            background: transparent;
            color: var(--dorado);
            appearance: none; -webkit-appearance: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            border-radius: 2px;
            position: relative;
            overflow: hidden;
            transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            opacity: 0;
            animation: heroFade 0.8s ease-out 1.08s forwards;
        }
        #hero-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--dorado);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: -1;
        }
        #hero-cta:hover { color: #0a1628; box-shadow: 0 8px 32px rgba(201, 169, 110, 0.28); }
        #hero-cta:hover::before { transform: scaleX(1); }
        #hero-cta:active { transform: scale(0.98); }

        /* ── SPECIALTY CARDS GRID ── */
        .spec-card {
            position: relative;
            overflow: hidden;
            text-decoration: none;
            display: block;
            cursor: pointer;
        }
        .spec-card-img {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .spec-card-dark {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top,
                rgba(6, 13, 24, 0.94) 0%,
                rgba(6, 13, 24, 0.55) 50%,
                rgba(6, 13, 24, 0.18) 100%
            );
            transition: background 0.55s ease;
        }
        .spec-card-border {
            position: absolute;
            inset: 0;
            border-right: 1px solid rgba(201, 169, 110, 0.14);
            pointer-events: none;
            transition: border-color 0.35s ease;
        }
        .spec-card:last-child .spec-card-border { border-right: none; }

        .spec-card-content {
            position: absolute;
            bottom: 0;
            left: 0; right: 0;
            padding: 1.6rem 1.8rem;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }
        .spec-card-icon {
            font-size: 1.3rem;
            color: var(--dorado);
            opacity: 0.75;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            margin-bottom: 0.2rem;
            line-height: 1;
        }
        .spec-card-name {
            font-family: 'Marcellus', serif;
            font-size: clamp(0.85rem, 1.1vw, 1.05rem);
            font-weight: 400;
            color: #f5f5f0;
            letter-spacing: 0.03em;
            line-height: 1.2;
            transition: color 0.3s ease;
        }
        .spec-card-line {
            width: 0;
            height: 1px;
            background: var(--dorado);
            transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            margin-top: 0.3rem;
        }

        /* Gold top reveal bar on hover */
        .spec-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: var(--dorado);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .spec-card:hover::after { transform: scaleX(1); }
        .spec-card:hover .spec-card-img { transform: scale(1.07); }
        .spec-card:hover .spec-card-dark {
            background: linear-gradient(
                to top,
                rgba(6, 13, 24, 0.80) 0%,
                rgba(6, 13, 24, 0.32) 50%,
                rgba(6, 13, 24, 0.08) 100%
            );
        }
        .spec-card:hover .spec-card-border { border-color: rgba(201, 169, 110, 0.38); }
        .spec-card:hover .spec-card-icon { opacity: 1; transform: translateY(-3px) scale(1.1); color: var(--dorado-claro); }
        .spec-card:hover .spec-card-name { color: var(--dorado-claro); }
        .spec-card:hover .spec-card-line { width: 36px; }

        /* Scroll indicator vertical */
        #hero-scroll-ind {
            position: absolute;
            bottom: clamp(215px, 33vh, 360px);
            right: 4.5vw;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            color: rgba(201, 169, 110, 0.45);
            transition: color 0.25s ease;
            opacity: 0;
            animation: heroFade 0.8s ease-out 1.75s forwards,
                       scrollIndFloat 3.2s ease-in-out 2.65s infinite;
        }
        #hero-scroll-ind:hover { color: var(--dorado); }
        .h-scroll-line {
            width: 1px;
            height: 52px;
            background: linear-gradient(to bottom, var(--dorado), transparent);
            animation: hScrollPulse 2.2s ease-in-out infinite;
        }
        .h-scroll-label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.53rem;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            writing-mode: vertical-lr;
            margin-top: 0.4rem;
        }

        /* Hero keyframes */
        @keyframes heroUp {
            from { opacity: 0; transform: translateY(26px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes heroFade {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes hScrollPulse {
            0%, 100% { opacity: 0.45; transform: scaleY(1); }
            50%       { opacity: 1;    transform: scaleY(0.72); }
        }

        /* ── LETRA A LETRA: ARMONNIZA ── */
        .hero-letter {
            display: inline-block;
            opacity: 0;
            animation: heroLetterUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            will-change: transform, opacity;
        }
        @keyframes heroLetterUp {
            from { opacity: 0; transform: translateY(36px) scale(0.82); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ── SHIMMER DORADO sobre ARMONNIZA (sweep post-reveal) ── */
        #hero-brand { position: relative; }
        @keyframes heroShimmerSweep {
            from { transform: translateX(-110%); }
            to   { transform: translateX(320%); }
        }
        #hero-brand.shimmer-active::after {
            content: '';
            position: absolute;
            top: -4%; left: 0;
            width: 35%; height: 108%;
            background: linear-gradient(
                108deg,
                transparent 0%,
                rgba(201, 169, 110, 0.08) 35%,
                rgba(224, 200, 150, 0.26) 50%,
                rgba(201, 169, 110, 0.08) 65%,
                transparent 100%
            );
            pointer-events: none;
            animation: heroShimmerSweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* ── SPECIALTY CARDS: grid 4 columnas + stagger ── */
        /* SECCIÓN INFERIOR — 4 fotos sobrepuestas con margen mínimo */
        #hero-specialties {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;                   /* margen mínimo entre fotos */
            padding: 6px;                /* margen mínimo de los bordes */
            width: 100%;
            height: 20vh;                /* 20% vertical de la sección */
            min-height: 160px;
            opacity: 1;
            background: #060d18;
            box-sizing: border-box;
        }
        /* Cada foto-card con look "tarjeta sobrepuesta" */
        .spec-card {
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(201,169,110,0.18);
            box-shadow: 0 6px 20px rgba(0,0,0,0.45);
            transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
        }
        .spec-card:hover {
            transform: translateY(-3px) scale(1.015);
            box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,169,110,0.4);
            border-color: rgba(201,169,110,0.55);
            z-index: 3;
        }
        .spec-card {
            opacity: 0;
            transform: translateY(22px);
            animation: heroCardUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .spec-card:nth-child(1) { animation-delay: 1.45s; }
        .spec-card:nth-child(2) { animation-delay: 1.62s; }
        .spec-card:nth-child(3) { animation-delay: 1.79s; }
        .spec-card:nth-child(4) { animation-delay: 1.96s; }
        @keyframes heroCardUp {
            from { opacity: 0; transform: translateY(22px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── SCROLL INDICATOR: float suave ── */
        @keyframes scrollIndFloat {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(-7px); }
        }

        /* Hero — reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .hero-letter { animation: none !important; opacity: 1 !important; transform: none !important; }
            #hero-brand  { opacity: 1 !important; animation: none !important; }
            #hero-brand.shimmer-active::after { animation: none !important; }
            .spec-card   { animation: none !important; opacity: 1 !important; transform: none !important; }
            #hero-scroll-ind { animation: heroFade 0.8s ease-out 1.75s forwards !important; }
        }

        /* Hero — mobile responsive */
        @media (max-width: 768px) {
            #hero-main { padding: 100px 6vw 48px; }
            #hero-brand { font-size: clamp(2.4rem, 8vw, 5rem); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-shadow: 0 3px 22px rgba(0,0,0,0.55); }
            #hero-specialties {
                grid-template-columns: repeat(2, 1fr);
                height: auto;
            }
            .spec-card { height: 180px; }
            #hero-scroll-ind { display: none !important; }

            /* ───── Mobile: mismo layout (25% texto top · 50% video · 25% CTA bottom) ───── */
            #hero-bg-parallax { display: none !important; }
            #hero-section::before { display: none !important; }
            #hero-video {
                display: block !important;
                top: 20vh !important;
                left: 14px !important;
                width: calc(100% - 28px) !important;
                height: 40vh !important;
                z-index: 4 !important;
                border-radius: 16px !important;
                border: 1px solid rgba(201,169,110,0.45) !important;
                box-shadow:
                    0 18px 44px rgba(0,0,0,0.55),
                    0 0 0 1px rgba(255,250,235,0.06),
                    0 0 28px rgba(201,169,110,0.15) !important;
            }
            /* Audio toggle: esquina inferior izq del video card mobile */
            #hero-audio-toggle {
                top: calc(60vh - 50px) !important;
                bottom: auto !important;
                right: auto !important;
                left: 28px !important;
                width: 36px !important;
                height: 36px !important;
                font-size: 12px !important;
            }
            /* Play/Pause centro del video mobile (top 20vh + height 40vh/2 = 40vh) */
            #hero-play-btn {
                left: 50% !important;
                top: 40vh !important;
            }
            /* hero-main mobile: mismo grid 25/50/25 */
            #hero-main {
                height: 80vh !important;
                margin-left: 0 !important;
                max-width: 100% !important;
                padding: 0 14px !important;
                grid-template-rows: 25% 50% 25% !important;
            }
            /* Floating text card mobile — más compacto */
            .hero-floating-text {
                padding: 12px 18px !important;
                border-radius: 14px !important;
                gap: 0.35rem !important;
            }
            #hero-brand { font-size: clamp(1.9rem, 7vw, 2.6rem) !important; letter-spacing: 0.08em !important; white-space: nowrap !important; }
            #hero-headline { font-size: clamp(0.78rem, 2.6vw, 0.95rem) !important; }
            /* Floating CTA mobile */
            .hero-floating-cta {
                padding: 10px 14px !important;
                border-radius: 14px !important;
            }
            /* hero-specialties: sección inferior 20vh, 2 cols con gap mínimo */
            #hero-specialties {
                height: 20vh !important;
                min-height: 130px !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 5px !important;
                padding: 5px !important;
            }
            .spec-card { height: auto !important; min-height: 0 !important; border-radius: 10px !important; }
            .hpb-icon { width: 64px !important; height: 64px !important; font-size: 20px !important; }
            .hpb-ring { width: 76px !important; height: 76px !important; }

            /* Sticky mini en mobile: más pequeño */
            #hero-video.is-sticky {
                top: 80px !important;
                left: 12px !important;
                width: 168px !important;
                height: 95px !important;
            }
            body.hero-sticky #hero-play-btn {
                top: 127px !important;
                left: 96px !important;
            }
            body.hero-sticky #hero-play-btn .hpb-icon { width: 32px !important; height: 32px !important; font-size: 10px !important; }
            body.hero-sticky #hero-audio-toggle {
                top: 180px !important;
                left: 20px !important;
                width: 28px !important;
                height: 28px !important;
                font-size: 10px !important;
            }
            body.hero-sticky #hero-video-close {
                top: 84px !important;
                left: 164px !important;
                width: 22px !important;
                height: 22px !important;
                font-size: 9px !important;
            }

            /* Overlay full-screen en mobile, más sutil */
            #hero-overlay {
                left: 0 !important;
                background: linear-gradient(180deg,
                    rgba(10,22,40,0.55) 0%,
                    rgba(10,22,40,0.32) 35%,
                    rgba(10,22,40,0.45) 65%,
                    rgba(10,22,40,0.78) 100%) !important;
            }

            /* Content full-width centrado en mobile */
            #hero-main {
                margin-left: 0 !important;
                max-width: 100% !important;
                padding: 100px 6vw 48px !important;
            }

            /* Ocultar textos secundarios — solo deja brand + headline + CTA */
            #hero-eyebrow-text,
            #hero-brand-line,
            #hero-sub,
            #hero-location-tag { display: none !important; }

            /* Espaciado más compacto entre brand y headline */
            #hero-brand { margin: 0 0 0.9rem !important; }
            #hero-headline { margin: 0 0 1.6rem !important; }
        }
        @media (max-width: 480px) {
            #hero-brand { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: 0.05em; white-space: nowrap; }
            .spec-card { height: 160px; }
            .spec-card-content { padding: 1rem 1.1rem; }
            .spec-card-name { font-size: 0.9rem; color: #f7f2ea; text-shadow: 0 1px 8px rgba(0,0,0,0.45); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
            .spec-card-icon { -webkit-font-smoothing: antialiased; }
        }
        @media (max-width: 380px) {
            #hero-brand { font-size: clamp(1.7rem, 8vw, 2.4rem); letter-spacing: 0.04em; white-space: nowrap; }
        }

        /* ════════════════════════════════════════════════════════════════
           LEGIBILIDAD MOBILE PARA ADULTOS (1 jun 2026 — pase 2)
           El texto del sitio usa clases Tailwind con px ABSOLUTOS
           (text-[9px], text-[11px]...), que no escalan con la base html.
           Por eso subimos esas clases directamente, SOLO en celular.
           `html:root .clase` da especificidad mayor que la regla de Tailwind
           y que el recálculo dinámico de Firebase, así estos valores ganan.
           No se tocan tamaños de caja → no se desordenan los márgenes.
           Letras pequeñas +20% · Texto mediano +20% · Botones/títulos
           medianos +15% · Títulos grandes SIN cambio.
           ════════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            /* Letras pequeñas → +20% */
            html:root .text-\[8px\]  { font-size: 10px   !important; }
            html:root .text-\[9px\]  { font-size: 11px   !important; }
            html:root .text-\[10px\] { font-size: 12px   !important; }
            html:root .text-\[11px\] { font-size: 13px   !important; }
            html:root .text-xs       { font-size: 0.9rem !important; }
            /* Texto mediano → +20% */
            html:root .text-\[12px\] { font-size: 14.5px  !important; }
            html:root .text-\[13px\] { font-size: 15.5px  !important; }
            html:root .text-\[14px\] { font-size: 17px    !important; }
            html:root .text-sm       { font-size: 1.05rem !important; }
            html:root .text-base     { font-size: 1.2rem  !important; }
            /* Botones y títulos medianos → +15% */
            html:root .text-\[16px\] { font-size: 18px   !important; }
            html:root .text-\[18px\] { font-size: 21px   !important; }
            html:root .text-\[20px\] { font-size: 23px   !important; }
            html:root .text-lg       { font-size: 1.3rem  !important; }
            html:root .text-xl       { font-size: 1.45rem !important; }
            /* Botones: peso un poco mayor para nitidez (Montserrat) */
            html:root .btn, html:root .cta, html:root .cta-btn,
            html:root .btn-split-call, html:root .btn-alt, html:root .cta-gold,
            html:root .cta-p, html:root .cta-h { font-weight: 600 !important; }
            /* Títulos grandes (text-[24px]+, text-2xl/3xl): SIN cambio */
        }

        /* ── SITE HEADER — STICKY TRANSPARENTE → SÓLIDO ── */
        #armonniza-app-root header {
            position: fixed !important;
            top: 0; left: 0; right: 0;
            width: 100%;
            z-index: 100 !important;
            background: rgba(10, 22, 40, 0.30) !important;
            backdrop-filter: blur(10px) saturate(1.3);
            -webkit-backdrop-filter: blur(10px) saturate(1.3);
            border-bottom: 1px solid rgba(201, 169, 110, 0.06);
            transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
        }
        #armonniza-app-root header > div.hdr-inner {
            padding: 0 3.5rem !important;
            height: 97px !important;
            display: flex !important;
            align-items: center !important;
        }
        #armonniza-app-root header.header-scrolled {
            background: rgba(10, 22, 40, 0.88) !important;
            backdrop-filter: blur(20px) saturate(1.8);
            -webkit-backdrop-filter: blur(20px) saturate(1.8);
            border-bottom: 1px solid rgba(201, 169, 110, 0.14);
            box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(201,169,110,0.12);
        }
        /* Dropdown especialidades */
        .hdr-spec-drop {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(-6px);
            width: 260px;
            background: rgba(10,22,40,0.97);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(201,169,110,0.2);
            border-radius: 14px;
            padding: 10px 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
            box-shadow: 0 20px 60px rgba(0,0,0,0.55);
            z-index: 10010;
        }
        .hdr-spec-drop.open {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }
        .hdr-spec-drop a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 20px;
            font-family: 'Montserrat', sans-serif;
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(245,245,240,0.8);
            text-decoration: none;
            transition: color 0.18s ease, background 0.18s ease;
        }
        .hdr-spec-drop a:hover {
            color: #c9a96e;
            background: rgba(201,169,110,0.08);
        }
        .hdr-spec-drop a span.drop-dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: rgba(201,169,110,0.4);
            flex-shrink: 0;
            transition: background 0.18s ease;
        }
        .hdr-spec-drop a:hover span.drop-dot { background: #c9a96e; }
        @media (max-width: 640px) {
            #armonniza-app-root header > div.hdr-inner { padding: 0 1rem !important; height: 70px !important; }
        }
        /* Dropdown Especialidades en mobile — alinear a la derecha del botón para no salir del viewport */
        @media (max-width: 1023px) {
            .hdr-spec-drop {
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) translateY(-6px) !important;
                width: 200px !important;
                margin-top: 6px;
            }
            .hdr-spec-drop.open {
                transform: translateX(-50%) translateY(0) !important;
            }
            .hdr-spec-drop a { font-size: 12px !important; padding: 9px 14px !important; }
        }

        /* ══════════════════════════════════════════════════════════════════
           PATIENT AREA OVERLAY HEADER — Mobile: nav centrado, app-like
           Mismo lenguaje visual que el header de booking
           ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 1023px) {
            .armonniza-overlay > div:first-child {
                position: relative !important;
                height: 60px !important;
                padding: 0 10px 4px !important;
                align-items: stretch !important;
            }
            .armonniza-overlay > div:first-child > div:first-child {
                align-self: center !important;
            }
            /* Nav del patient area: posición absoluta centrada + abajo */
            .armonniza-overlay > div:first-child > nav {
                position: absolute !important;
                left: 50% !important;
                bottom: 4px !important;
                transform: translateX(-50%) !important;
                width: auto !important;
                flex: 0 0 auto !important;
                justify-content: center !important;
                gap: 5px !important;
            }
            /* Botones del nav — app-like pills */
            .armonniza-overlay > div:first-child > nav > button,
            .armonniza-overlay > div:first-child > nav > div > button {
                padding: 5px 10px !important;
                font-size: 9.5px !important;
                font-weight: 700 !important;
                letter-spacing: 0.06em !important;
                border-radius: 8px !important;
                min-height: 26px !important;
                line-height: 1.1 !important;
                white-space: nowrap !important;
                transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
            }
            .armonniza-overlay > div:first-child > nav button:active { transform: scale(0.96) !important; }
            /* Separadores verticales más sutiles */
            .armonniza-overlay > div:first-child > nav > div[style*="width:'1px'"],
            .armonniza-overlay > div:first-child > nav > div[style*="width: 1px"] {
                height: 14px !important;
            }
        }
        @media (max-width: 380px) {
            .armonniza-overlay > div:first-child > nav > button,
            .armonniza-overlay > div:first-child > nav > div > button {
                padding: 4px 8px !important;
                font-size: 8.7px !important;
                letter-spacing: 0.04em !important;
                min-height: 24px !important;
            }
        }
        /* ══════════════════════════════════════════════════════════════════
           HEADER MOBILE (<1024px) — APP-LIKE ELEGANTE
           Logo IZQUIERDA + grupo de botones CENTRADO en el header,
           alineados al borde inferior con margen mínimo.
           Diseño: pills navy con tipografía Montserrat 700,
                   estado activo en dorado, transiciones suaves.
           ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 1023px) {
            #armonniza-app-root header > div.hdr-inner {
                flex-direction: row !important;
                justify-content: space-between !important;
                align-items: stretch !important;
                gap: 6px !important;
                padding: 0 10px 4px !important;
                height: 60px !important;
                min-height: 60px !important;
            }
            /* Grupo logo: IZQUIERDA — solo ícono, centrado vertical */
            #armonniza-app-root header [style*="min-width: 220px"],
            #armonniza-app-root header [style*="min-width:220px"] {
                justify-content: flex-start !important;
                align-self: center !important;
                width: auto !important;
                flex: 0 0 auto !important;
                min-width: 0 !important;
                gap: 0 !important;
            }
            /* Ocultar texto ARMONNIZA + Bolivia */
            #armonniza-app-root header h1,
            #armonniza-app-root header [style*="min-width: 220px"] > div:last-child,
            #armonniza-app-root header [style*="min-width:220px"] > div:last-child { display: none !important; }
            /* Logo SVG compacto */
            #armonniza-app-root header div[style*="width: 60px"],
            #armonniza-app-root header div[style*="width:60px"] { width: 36px !important; height: 36px !important; }

            /* Grupo botones: CENTRADO + alineado al borde INFERIOR del header */
            #armonniza-app-root header [style*="min-width: 230px"],
            #armonniza-app-root header [style*="min-width:230px"] {
                position: absolute !important;
                left: 50% !important;
                bottom: 4px !important;
                transform: translateX(-50%) !important;
                justify-content: center !important;
                flex: 0 0 auto !important;
                min-width: 0 !important;
                gap: 5px !important;
            }
            #armonniza-app-root header > div.hdr-inner { position: relative !important; }
            #armonniza-app-root header [style*="min-width: 230px"] .lg\:hidden,
            #armonniza-app-root header [style*="min-width:230px"] .lg\:hidden {
                gap: 5px !important;
                flex-wrap: nowrap !important;
            }
            /* Estilo unificado APP-LIKE de los botones del nav móvil */
            #armonniza-app-root header [style*="min-width: 230px"] button,
            #armonniza-app-root header [style*="min-width:230px"] button {
                padding: 5px 10px !important;
                font-size: 9.5px !important;
                font-weight: 700 !important;
                letter-spacing: 0.06em !important;
                white-space: nowrap !important;
                border-radius: 8px !important;
                min-height: 26px !important;
                line-height: 1.1 !important;
                transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
            }
            #armonniza-app-root header [style*="min-width: 230px"] button:active {
                transform: scale(0.96) !important;
            }
        }
        @media (max-width: 380px) {
            #armonniza-app-root header div[style*="width: 60px"],
            #armonniza-app-root header div[style*="width:60px"] { width: 30px !important; height: 30px !important; }
            #armonniza-app-root header [style*="min-width: 230px"] button,
            #armonniza-app-root header [style*="min-width:230px"] button {
                padding: 4px 8px !important; font-size: 8.7px !important; letter-spacing: 0.04em !important;
                min-height: 24px !important;
            }
        }
        /* ── ALTURA AJUSTADA — recorte 38px + 10% adicional ── */
        #armonniza-app-root > div.armonniza-main-view {
            height: calc(90vh - 90px) !important;
        }
        /* Mobile · modo NO bloqueado: el panel toma su altura natural (sin scroll interno) */
        @media (max-width: 1023px) {
            body:not(.s7-modal-active) #armonniza-app-root > div.armonniza-main-view {
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
            }
        }
        /* ── OVERLAY ÁREA PACIENTE — siempre pantalla completa ── */
        #armonniza-app-root > div.armonniza-overlay {
            height: 100vh !important;
            max-height: 100vh !important;
        }

        /* ── SECCIÓN 2: SOBRE NOSOTROS ── */
        #sobre-nosotros {
            background: #faf9f6;
            position: relative;
            overflow: hidden;
        }

        /* Marca de agua decorativa — letra A en el fondo */
        @keyframes s2FloatA {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            38%       { transform: translateY(-14px) rotate(0.25deg); }
            72%       { transform: translateY(7px) rotate(-0.18deg); }
        }
        #sobre-nosotros::before {
            content: 'A';
            position: absolute;
            right: -1vw;
            top: -1rem;
            font-family: 'Marcellus', serif;
            font-size: clamp(14rem, 26vw, 26rem);
            color: rgba(201, 169, 110, 0.045);
            line-height: 1;
            pointer-events: none;
            user-select: none;
            letter-spacing: -0.05em;
            z-index: 0;
            animation: s2FloatA 11s ease-in-out infinite;
        }

        /* ── BLOQUE PRINCIPAL: 2 columnas ── */
        .s2-main {
            max-width: 1600px;
            margin: 0 auto;
            padding: 56px 6vw 44px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: start;
            position: relative;
            z-index: 1;
        }

        /* Columna izquierda: slogan */
        .s2-left { display: flex; flex-direction: column; }

        .s2-eyebrow {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--dorado);
            letter-spacing: 0.28em;
            text-transform: uppercase;
            margin: 0 0 1rem;
        }

        .s2-slogan {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.9rem, 3.6vw, 3.2rem);
            font-weight: 400;
            color: #0a1628;
            letter-spacing: -0.02em;
            line-height: 1.07;
            margin: 0 0 1.2rem;
        }

        /* Ornamento dorado — 3 piezas */
        .s2-ornament {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 1.4rem;
        }
        .s2-ornament-bar {
            width: 0;
            height: 1px;
            background: var(--dorado);
            flex-shrink: 0;
            transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s2-ornament.visible .s2-ornament-bar { width: 32px; }

        .s2-ornament-diamond {
            width: 5px;
            height: 5px;
            background: var(--dorado);
            flex-shrink: 0;
            opacity: 0;
            transform: rotate(45deg) scale(0);
            transition: opacity 280ms 160ms ease-out,
                        transform 380ms 160ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s2-ornament.visible .s2-ornament-diamond {
            opacity: 1;
            transform: rotate(45deg) scale(1);
        }

        .s2-ornament-trail {
            flex: 1;
            max-width: 0;
            height: 1px;
            background: linear-gradient(to right, var(--dorado), transparent);
            transition: max-width 950ms 280ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s2-ornament.visible .s2-ornament-trail { max-width: 72px; }

        .s2-tagline {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.88rem;
            font-weight: 400;
            color: #6a7a8a;
            line-height: 1.65;
            margin: 0;
            max-width: 380px;
        }

        /* Columna derecha: texto + badges */
        .s2-right {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            padding-top: 0.4rem;
        }
        .s2-right p {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.92rem;
            font-weight: 400;
            color: #3a4a5c;
            line-height: 1.65;
            margin: 0;
        }
        .s2-right p strong {
            color: #0a1628;
            font-weight: 600;
        }

        .s2-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            margin-top: 0.4rem;
        }
        .s2-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(201, 169, 110, 0.07);
            border: 1px solid rgba(201, 169, 110, 0.22);
            border-radius: 100px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            font-weight: 500;
            color: #3a4a5c;
            letter-spacing: 0.02em;
            transition: background 0.25s ease, border-color 0.25s ease;
        }
        .s2-badge:hover {
            background: rgba(201, 169, 110, 0.13);
            border-color: rgba(201, 169, 110, 0.4);
        }
        .s2-badge i { color: var(--dorado); font-size: 0.75rem; }

        /* ── STATS BAND — oscuro con counters animados ── */
        .s2-stats-band {
            background: #0a1628;
            position: relative;
        }
        .s2-stats-band::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(201,169,110,0.38), transparent);
        }
        .s2-stats-band::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(201,169,110,0.38), transparent);
        }

        .s2-stats-inner {
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 6vw;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .s2-stat {
            padding: 34px 2.2rem 30px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.4rem;
            border-right: 1px solid rgba(201,169,110,0.12);
        }
        .s2-stat:first-child { padding-left: 0; }
        .s2-stat:last-child  { border-right: none; padding-right: 0; }

        .s2-stat-icon {
            color: var(--dorado);
            font-size: 1.05rem;
            opacity: 0.7;
            margin-bottom: 0.3rem;
        }
        .s2-stat-number {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.8rem, 3vw, 2.4rem);
            color: #f5f5f0;
            letter-spacing: -0.02em;
            line-height: 1;
        }
        .s2-stat-label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.62rem;
            font-weight: 600;
            color: rgba(201, 169, 110, 0.78);
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }
        .s2-stat-sub {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.68rem;
            font-weight: 400;
            color: rgba(245, 241, 234, 0.38);
            line-height: 1.4;
        }

        /* ── BANDA AGENDA — fondo crema ── */
        .s2-agenda-band {
            position: relative;
            z-index: 1;
            background: #ffffff;
            border-top: 1px solid rgba(201,169,110,0.14);
        }
        .s2-agenda-inner {
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 6vw;
            display: flex;
            align-items: stretch;
        }
        .s2-agenda-item {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 20px 2.5rem 20px 0;
            border-right: 1px solid rgba(201,169,110,0.14);
        }
        .s2-agenda-item:first-child { padding-left: 0; }
        .s2-agenda-item:last-child  { border-right: none; }
        .s2-agenda-item + .s2-agenda-item { padding-left: 2.5rem; }

        .s2-agenda-icon {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            background: rgba(201, 169, 110, 0.09);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.25s ease;
        }
        .s2-agenda-item:hover .s2-agenda-icon { background: rgba(201,169,110,0.16); }
        .s2-agenda-icon i { color: var(--dorado); font-size: 1rem; }
        .s2-agenda-text { display: flex; flex-direction: column; gap: 0.22rem; }
        .s2-agenda-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            color: #0a1628;
        }
        .s2-agenda-desc {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            font-weight: 400;
            color: #7a8a9a;
            line-height: 1.5;
        }

        /* ── Reveal on scroll ── */
        .s2-reveal {
            opacity: 0;
            transform: translateY(28px);
        }
        .s2-reveal.visible {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
                        transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── Blur-reveal para párrafos (efecto premium moderno) ── */
        .s2-right .s2-reveal {
            filter: blur(5px);
        }
        .s2-right .s2-reveal.visible {
            filter: blur(0px);
            transition: opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
                        transform 820ms cubic-bezier(0.16, 1, 0.3, 1),
                        filter 680ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── Stats: escala de entrada ── */
        .s2-stat.s2-reveal {
            transform: translateY(28px) scale(0.94);
        }
        .s2-stat.s2-reveal.visible {
            transform: translateY(0) scale(1);
            transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── Responsive ── */
        @media (max-width: 1024px) {
            .s2-stats-inner { grid-template-columns: repeat(2, 1fr); }
            .s2-stat:nth-child(2) { border-right: none; padding-right: 0; }
            .s2-stat:nth-child(3) { padding-left: 0; }
            .s2-stat:nth-child(-n+2) {
                border-bottom: 1px solid rgba(201,169,110,0.12);
                padding-bottom: 28px;
            }
            .s2-stat:nth-child(n+3) { padding-top: 28px; }
        }
        @media (max-width: 768px) {
            .s2-main {
                grid-template-columns: 1fr;
                padding: 48px 6vw 40px;
                gap: 1.6rem;
            }
            .s2-stats-inner { padding: 0 6vw; }
            .s2-agenda-inner {
                flex-direction: column;
                padding: 0 6vw;
            }
            .s2-agenda-item {
                border-right: none;
                border-bottom: 1px solid rgba(201,169,110,0.14);
                padding: 18px 0;
            }
            .s2-agenda-item + .s2-agenda-item { padding-left: 0; }
            .s2-agenda-item:last-child { border-bottom: none; }
        }

        /* ══════════════════════════════════════════════════════════════════
           SEC 2 — MOBILE COMPACT MODE (≤768px)
           · Oculta el bloque azul de stats (12 sedes / 8.500 / 50 / 98%)
           · Oculta los 4 badges (sedes internacionales / especialistas / tecnología / resultados)
           · Comprime todo lo demás al mínimo elegante
           ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            /* OCULTAR el bloque azul de stats y la marca de agua "A" */
            #sobre-nosotros .s2-stats-band,
            #sobre-nosotros::before { display: none !important; }
            /* OCULTAR los badges (cards de sedes / especialistas / tecnología / resultados) */
            #sobre-nosotros .s2-badges { display: none !important; }

            /* COMPRIMIR el resto */
            #sobre-nosotros .s2-main {
                padding: 22px 18px 18px !important;
                gap: 12px !important;
            }
            #sobre-nosotros .s2-eyebrow {
                font-size: 0.62rem !important;
                letter-spacing: 0.2em !important;
                margin: 0 0 0.4rem !important;
            }
            #sobre-nosotros .s2-slogan {
                font-size: clamp(1.5rem, 6vw, 2rem) !important;
                line-height: 1.1 !important;
                margin: 0 0 0.6rem !important;
                letter-spacing: -0.01em !important;
            }
            #sobre-nosotros .s2-ornament {
                margin-bottom: 0.7rem !important;
                gap: 0.4rem !important;
            }
            #sobre-nosotros .s2-ornament-bar { width: 22px !important; }
            #sobre-nosotros .s2-ornament-trail { max-width: 50px !important; }
            #sobre-nosotros .s2-tagline {
                font-size: 0.92rem !important;
                line-height: 1.5 !important;
                max-width: 100% !important;
                color: #26333f !important;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            #sobre-nosotros .s2-right {
                gap: 0.55rem !important;
                padding-top: 0 !important;
            }
            #sobre-nosotros .s2-right p {
                font-size: 0.82rem !important;
                line-height: 1.5 !important;
            }
            /* MOBILE: ocultar los 3 párrafos largos · mostrar solo el resumen */
            #sobre-nosotros .s2-desktop-text { display: none !important; }
            #sobre-nosotros .s2-mobile-summary {
                display: block !important;
                font-family: 'Montserrat', sans-serif !important;
                font-size: 0.96rem !important;
                line-height: 1.58 !important;
                font-weight: 450 !important;
                color: #1c2634 !important;
                margin: 0 !important;
                padding: 15px 18px !important;
                background: linear-gradient(135deg, rgba(201,169,110,0.18) 0%, rgba(201,169,110,0.06) 100%) !important;
                border-left: 4px solid #c9a96e !important;
                border-radius: 0 12px 12px 0 !important;
                box-shadow: 0 4px 16px rgba(201,169,110,0.15) !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            #sobre-nosotros .s2-mobile-summary strong {
                color: #0a1628 !important;
                font-weight: 400 !important;
                display: block !important;
                margin-bottom: 6px !important;
                font-family: 'Marcellus', serif !important;
                font-size: 1.28rem !important;
                letter-spacing: -0.01em !important;
                font-style: normal !important;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            #sobre-nosotros .s2-mobile-summary em {
                font-style: normal !important;
                color: #c9a96e !important;
                font-weight: 700 !important;
            }
            /* Agenda band (presencial / virtual / 24/7) — comprimida MOBILE */
            #sobre-nosotros .s2-agenda-band { border-top: 1px solid rgba(201,169,110,0.14); }
            #sobre-nosotros .s2-agenda-inner { padding: 6px 18px !important; gap: 0 !important; }
            #sobre-nosotros .s2-agenda-item {
                padding: 8px 0 !important;
                gap: 0.6rem !important;
                border-bottom: 1px solid rgba(201,169,110,0.10) !important;
            }
            #sobre-nosotros .s2-agenda-item:last-child { border-bottom: none !important; }
            #sobre-nosotros .s2-agenda-icon {
                width: 32px !important;
                height: 32px !important;
                border-radius: 8px !important;
            }
            #sobre-nosotros .s2-agenda-icon i { font-size: 0.78rem !important; }
            #sobre-nosotros .s2-agenda-title {
                font-size: 0.9rem !important;
                line-height: 1.3 !important;
                font-weight: 600 !important;
                color: #16202c !important;
                -webkit-font-smoothing: antialiased;
            }
            #sobre-nosotros .s2-agenda-desc {
                font-size: 0.76rem !important;
                line-height: 1.4 !important;
                color: #47566a !important;
                -webkit-font-smoothing: antialiased;
            }
        }
        /* DESKTOP: ocultar el resumen mobile-only */
        @media (min-width: 769px) {
            .s2-mobile-summary { display: none !important; }
        }
        @media (max-width: 480px) {
            .s2-stats-inner { grid-template-columns: 1fr 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            .s2-reveal { opacity: 1; transform: none; filter: none !important; }
            .s2-stat.s2-reveal { transform: none; }
            .s2-ornament-bar  { transition: none; width: 32px; }
            .s2-ornament-trail { transition: none; max-width: 72px; }
            .s2-ornament-diamond { transition: none; opacity: 1; transform: rotate(45deg) scale(1); }
            #sobre-nosotros::before { animation: none; }
        }

        /* ── SECCIÓN 3: MEDICINA ESTÉTICA ── */
        #medicina-estetica-section { background: #ffffff; position: relative; }

        /* ── FLOATING TABS PREMIUM — pestañas verticales laterales ── */
        #fp-container {
            position: fixed; right: 0; top: 50%;
            transform: translateY(-50%); z-index: 800;
            display: flex; flex-direction: column; gap: 8px;
            pointer-events: none;
        }
        .fp-card {
            width: 80px;
            height: 220px;
            background: #7b1d35;
            border: 1px solid rgba(201,169,110,0.45); border-right: none;
            border-radius: 16px 0 0 16px;
            box-shadow: -4px 0 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(201,169,110,0.22);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transform: translateX(calc(100% + 4px)); opacity: 0; pointer-events: none;
            transition: transform 650ms cubic-bezier(0.16,1,0.3,1), opacity 480ms ease, background 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
            will-change: transform, opacity;
            overflow: hidden;
        }
        .fp-card.fp-visible { transform: translateX(0); opacity: 1; pointer-events: all; }
        /* Línea dorada decorativa izquierda */
        .fp-card::before {
            content: '';
            position: absolute; left: 0; top: 20%; bottom: 20%;
            width: 2px; border-radius: 2px;
            background: linear-gradient(to bottom, transparent, #c9a96e, transparent);
            opacity: 0.5; transition: opacity 250ms ease, width 280ms cubic-bezier(0.16,1,0.3,1), background 280ms ease;
        }
        /* Chevron indicador "Abrir" — aparece al hover sobre el borde izquierdo (lado viewport) */
        .fp-card::after {
            content: '';
            position: absolute; left: -10px; top: 50%;
            width: 0; height: 0;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-right: 10px solid #c9a96e;
            transform: translateY(-50%) translateX(-8px);
            opacity: 0;
            transition: opacity 220ms ease, transform 320ms cubic-bezier(0.16,1,0.3,1);
            pointer-events: none;
            filter: drop-shadow(0 0 6px rgba(201,169,110,0.55));
        }
        /* ─── HOVER PREMIUM — solo en dispositivos con hover real (desktop) ─── */
        @media (hover: hover) and (pointer: fine) {
            .fp-card.fp-visible:hover {
                transform: translateX(-12px) scale(1.035);
                border-color: #e8d5a8;
                box-shadow:
                    -14px 0 36px rgba(0,0,0,0.55),
                    0 0 0 1px rgba(232,213,168,0.45),
                    0 0 32px rgba(201,169,110,0.28),
                    inset 0 1px 0 rgba(255,248,236,0.18);
            }
            #fp-trat.fp-visible:hover {
                background: linear-gradient(135deg, #94264a 0%, #5a1426 100%);
            }
            #fp-promo.fp-visible:hover {
                background: linear-gradient(135deg, #15315a 0%, #0a1628 100%);
                box-shadow:
                    -14px 0 36px rgba(0,0,0,0.55),
                    0 0 0 1px rgba(232,213,168,0.6),
                    0 0 40px rgba(201,169,110,0.45),
                    inset 0 1px 0 rgba(255,248,236,0.22);
            }
            .fp-card.fp-visible:hover::before {
                opacity: 1;
                width: 3px;
                background: linear-gradient(to bottom, transparent, #e8d5a8 30%, #fff8ec 50%, #e8d5a8 70%, transparent);
            }
            .fp-card.fp-visible:hover::after {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
            }
            .fp-card.fp-visible:hover .fp-tab-text span {
                color: #fff8ec;
                letter-spacing: 0.045em;
            }
            .fp-card.fp-visible:hover .fp-tab-dot {
                color: #fff8ec;
                opacity: 1;
                transform: scale(1.15);
            }
        }
        .fp-tab-dot, .fp-tab-text span { transition: color 250ms ease, transform 280ms cubic-bezier(0.16,1,0.3,1), letter-spacing 280ms ease, opacity 250ms ease; }
        /* Contenedor interno rotado */
        .fp-tab-inner {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 8px;
            transform: rotate(-90deg);
            width: 195px;
            padding: 0 10px;
            pointer-events: none;
        }
        .fp-tab-dot {
            font-size: 0.77rem; color: #e0c896;
            letter-spacing: 0.2em; opacity: 0.95;
            white-space: nowrap; transition: opacity 250ms ease, color 250ms ease;
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        }
        .fp-tab-text {
            display: flex; flex-direction: column;
            align-items: center; gap: 2px;
        }
        .fp-tab-text span {
            font-family: 'Marcellus', serif; font-weight: 400;
            font-size: 1.22rem; color: #f5f0e6;
            line-height: 1.25; letter-spacing: 0.03em;
            white-space: nowrap; display: block;
            transition: color 250ms ease;
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        }
        .fp-card:hover .fp-tab-text span { color: #e8d5a8; }
        .fp-card:hover .fp-tab-dot { opacity: 1; color: #e8d5a8; }
        /* FP Modals */
        .fp-modal-ov {
            position: fixed; inset: 0; z-index: 9900;
            background: rgba(4,9,20,0.88); backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            display: flex; align-items: center; justify-content: center; padding: 20px;
            opacity: 0; pointer-events: none; transition: opacity 300ms ease;
        }
        .fp-modal-ov.fp-modal-open { opacity: 1; pointer-events: all; }
        .fp-modal-box {
            background: #0c1a2e; border: 1px solid rgba(201,169,110,0.20);
            border-radius: 22px; width: 100%; max-width: 1060px; max-height: 86vh;
            overflow: hidden; display: flex; flex-direction: column;
            box-shadow: 0 48px 120px rgba(0,0,0,0.72), 0 0 0 1px rgba(201,169,110,0.08);
            transform: scale(0.95) translateY(16px);
            transition: transform 400ms cubic-bezier(0.16,1,0.3,1);
        }
        .fp-modal-ov.fp-modal-open .fp-modal-box { transform: scale(1) translateY(0); }
        .fp-modal-head { padding: 26px 34px 18px; border-bottom: 1px solid rgba(201,169,110,0.11); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; gap: 16px; }
        .fp-modal-eyebrow { font-family: 'Montserrat',sans-serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #c9a96e; display: block; margin-bottom: 4px; }
        .fp-modal-title { font-family: 'Marcellus',serif; font-size: 1.5rem; font-weight: 400; color: #f0ece4; margin: 0; line-height: 1.2; }
        .fp-modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(160,45,70,0.8); background: #c41e3a; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 14px; font-weight: 700; flex-shrink: 0; transition: background 200ms ease, border-color 200ms ease; }
        .fp-modal-close:hover { background: #9b1530; border-color: rgba(160,45,70,1); color: #ffffff; }
        .fp-modal-body { overflow-y: auto; padding: 26px 34px 30px; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(201,169,110,0.28) transparent; }
        .fp-modal-body::-webkit-scrollbar { width: 4px; }
        .fp-modal-body::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.28); border-radius: 4px; }
        .fp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
        @media(max-width:860px){ .fp-grid { grid-template-columns: repeat(2,1fr); } }
        @media(max-width:560px){ .fp-grid { grid-template-columns: 1fr; } }
        .fp-grid-card { background: rgba(255,255,255,0.034); border: 1px solid rgba(201,169,110,0.13); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color 230ms ease, transform 230ms cubic-bezier(0.16,1,0.3,1), box-shadow 230ms ease; }
        .fp-grid-card:hover { border-color: rgba(201,169,110,0.38); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.4); }
        .fp-grid-img { height: 108px; background: linear-gradient(135deg,#0f1e36,#1a3254); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .fp-grid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .fp-grid-ph { font-family: 'Marcellus',serif; font-size: 2.2rem; color: rgba(201,169,110,0.20); }
        .fp-grid-body { padding: 13px 13px 11px; }
        .fp-grid-label { font-family: 'Montserrat',sans-serif; font-size: 0.47rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(201,169,110,0.6); display: block; margin-bottom: 2px; }
        .fp-grid-name { font-family: 'Marcellus',serif; font-size: 0.9375rem; color: #f0ece4; line-height: 1.25; display: block; margin-bottom: 3px; }
        .fp-grid-desc { font-family: 'Montserrat',sans-serif; font-size: 0.6563rem; color: rgba(168,158,138,0.78); line-height: 1.4; display: block; margin-bottom: 9px; }
        .fp-grid-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 6px; border: 1px solid rgba(201,169,110,0.28); background: transparent; color: #c9a96e; font-family: 'Montserrat',sans-serif; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; transition: background 170ms ease, border-color 170ms ease; }
        .fp-grid-btn:hover { background: rgba(201,169,110,0.13); border-color: rgba(201,169,110,0.52); }
        .fp-promo-tag { display: inline-block; background: rgba(201,169,110,0.12); border: 1px solid rgba(201,169,110,0.32); color: #c9a96e; font-family: 'Montserrat',sans-serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-bottom: 5px; }
        .fp-promo-price { font-family: 'Montserrat',sans-serif; font-size: 0.72rem; margin-bottom: 7px; }
        .fp-promo-price s { color: rgba(168,158,138,0.48); margin-right: 5px; font-size: 0.66rem; }
        .fp-promo-price strong { color: #c9a96e; font-weight: 700; }
        /* -- Tratamientos destacados / Ofertas: nitidez + claridad estilo FB (mobile, sin agrandar) -- */
        @media (max-width: 768px) {
            #fp-container, #fp-container *,
            .fp-modal-ov, .fp-modal-ov * {
                -webkit-font-smoothing: antialiased !important;
                text-rendering: optimizeLegibility !important;
            }
            .fp-grid-desc { color: rgba(182,172,152,0.92) !important; }
            .fp-grid-label { color: rgba(201,169,110,0.85) !important; }
        }
        @media(max-width:768px) {
            #fp-container {
                position: fixed;
                bottom: 0; left: 0; right: 0; top: auto;
                transform: none;
                height: 42px;                      /* 50% menos alto que antes (84 → 42px) */
                overflow: visible;                 /* deja que el lift al hover se extienda por encima */
                z-index: 900;                      /* sobre el footer y popups vecinos */
                pointer-events: none;
                display: block;
                transition: transform 280ms ease, opacity 280ms ease;
            }
            body.fp-near-footer #fp-container { transform: translateY(110%); opacity: 0; }
            /* ── 2 pop-ups SIDE-BY-SIDE simultáneos en mobile ── */
            .fp-card {
                position: absolute;
                bottom: 4px;                                /* ~1mm del borde inferior */
                left: auto; right: auto;
                width: calc(50% - 6px);                     /* mitad del viewport con gap */
                max-width: none;
                height: auto; min-height: 28px;
                border-radius: 10px;
                border: 1px solid rgba(201,169,110,0.45);
                padding: 5px 10px;
                flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px;
                opacity: 0; pointer-events: none;
                transition: transform 900ms cubic-bezier(0.16,1,0.3,1), opacity 600ms ease, background 250ms ease;
                overflow: visible;
                box-shadow: 0 4px 14px rgba(0,0,0,0.32);
            }
            /* TARJETA 1 — Tratamientos (lado IZQUIERDO, burgundy) */
            #fp-trat {
                left: 4px;
                background: linear-gradient(135deg, #7b1d35 0%, #5a1426 100%);
                border-color: rgba(232,213,168,0.5);
                transform: translateX(-115vw);              /* entra deslizando desde la izquierda */
            }
            #fp-trat.fp-visible {
                transform: translateX(0);
                opacity: 1;
                pointer-events: all;
                transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 360ms ease, background 250ms ease, border-color 250ms ease, box-shadow 280ms ease;
            }
            #fp-trat.fp-exiting {
                transform: translateX(-115vw);
                opacity: 0;
                pointer-events: none;
                transition: transform 700ms cubic-bezier(0.4,0,0.6,1), opacity 500ms ease;
            }
            /* TARJETA 2 — Promociones (lado DERECHO, navy + acento dorado) */
            #fp-promo {
                right: 4px;
                background: linear-gradient(135deg, #0a1628 0%, #112847 100%);
                border-color: rgba(201,169,110,0.7);
                box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,169,110,0.18), 0 0 18px rgba(201,169,110,0.15);
                transform: translateX(115vw);               /* entra deslizando desde la derecha */
            }
            #fp-promo.fp-visible {
                transform: translateX(0);
                opacity: 1;
                pointer-events: all;
                transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 360ms ease, background 250ms ease, border-color 250ms ease, box-shadow 280ms ease;
            }
            #fp-promo.fp-exiting {
                transform: translateX(115vw);
                opacity: 0;
                pointer-events: none;
                transition: transform 700ms cubic-bezier(0.4,0,0.6,1), opacity 500ms ease;
            }
            /* Cuando el footer es visible, los pop-ups se ocultan para no taparlo */
            body.fp-near-footer #fp-container .fp-card {
                transform: translateX(calc(-50% + 110vw)) !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            .fp-card::before { display: none; }
            .fp-card::after { display: none; }
            .fp-card.fp-visible {
                transform: translateX(-50%); opacity: 1; pointer-events: all;
            }
            .fp-card.fp-exiting {
                transform: translateX(calc(-50% - 110vw)); opacity: 0; pointer-events: none;
                transition: transform 700ms cubic-bezier(0.4,0,0.6,1), opacity 500ms ease;
            }
            /* ─── HOVER / ACTIVE PREMIUM MOBILE — gesto de "lift" vertical
                 Especificidad ID + clase para superar #fp-trat.fp-visible y #fp-promo.fp-visible ─── */
            #fp-trat.fp-visible:hover,
            #fp-trat.fp-visible:active,
            #fp-trat.fp-visible:focus-visible,
            #fp-trat.fp-visible.fp-tap {
                transform: translateY(-6px) scale(1.03);
                background: linear-gradient(135deg, #94264a 0%, #5a1426 100%);
                border-color: #e8d5a8;
                box-shadow:
                    0 12px 28px rgba(0,0,0,0.6),
                    0 0 0 1px rgba(232,213,168,0.55),
                    0 0 24px rgba(201,169,110,0.45);
                z-index: 9999;                   /* sobre cualquier elemento vecino */
            }
            #fp-promo.fp-visible:hover,
            #fp-promo.fp-visible:active,
            #fp-promo.fp-visible:focus-visible,
            #fp-promo.fp-visible.fp-tap {
                transform: translateY(-6px) scale(1.03);
                background: linear-gradient(135deg, #15315a 0%, #0a1628 100%);
                border-color: #e8d5a8;
                box-shadow:
                    0 12px 28px rgba(0,0,0,0.6),
                    0 0 0 1px rgba(232,213,168,0.65),
                    0 0 32px rgba(201,169,110,0.55);
                z-index: 9999;                   /* sobre cualquier elemento vecino */
            }
            #fp-trat.fp-visible:hover .fp-tab-text span,
            #fp-trat.fp-visible:active .fp-tab-text span,
            #fp-promo.fp-visible:hover .fp-tab-text span,
            #fp-promo.fp-visible:active .fp-tab-text span { color: #fff8ec; }
            #fp-trat.fp-visible:hover .fp-tab-text span:first-child,
            #fp-trat.fp-visible:active .fp-tab-text span:first-child,
            #fp-promo.fp-visible:hover .fp-tab-text span:first-child,
            #fp-promo.fp-visible:active .fp-tab-text span:first-child { color: #e8d5a8; }
            #fp-trat.fp-visible:hover .fp-tab-dot,
            #fp-trat.fp-visible:active .fp-tab-dot,
            #fp-promo.fp-visible:hover .fp-tab-dot,
            #fp-promo.fp-visible:active .fp-tab-dot {
                color: #fff8ec;
                transform: scale(1.25);
            }
            #fp-trat.fp-visible:hover .fp-card-arrow-mob,
            #fp-trat.fp-visible:active .fp-card-arrow-mob,
            #fp-promo.fp-visible:hover .fp-card-arrow-mob,
            #fp-promo.fp-visible:active .fp-card-arrow-mob {
                transform: translateX(5px) scale(1.2);
                color: #fff8ec;
            }
            .fp-tab-inner {
                transform: none; width: auto; padding: 0;
                flex-direction: row; align-items: center; gap: 5px;
                width: 100%;
            }
            .fp-tab-dot { font-size: 0.42rem; color: #e0c896; flex-shrink: 0; }
            .fp-tab-text {
                flex-direction: column; gap: 0;
                align-items: flex-start;
                flex: 1; min-width: 0;
                overflow: hidden;
            }
            .fp-tab-text span {
                font-size: 0.62rem;
                white-space: nowrap;
                color: #f5f0e6;
                line-height: 1.1;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
            }
            .fp-tab-text span:first-child {
                font-family: 'Marcellus',serif;
                font-weight: 400;
                color: #e8d5a8;
                font-size: 0.55rem;
                letter-spacing: 0.04em;
            }
            .fp-tab-text span:last-child {
                color: #f5f0e6;
                font-size: 0.66rem;
                font-weight: 600;
            }
            #fp-promo .fp-tab-text span:first-child { color: #c9a96e; }
            #fp-promo .fp-tab-text span:last-child { color: #e8d5a8; }
            .fp-card:hover .fp-tab-text span { color: #f5f0e6; }
            .fp-card-arrow-mob {
                margin-left: auto; color: #e0c896;
                font-size: 0.95rem; font-family: 'Montserrat',sans-serif; line-height: 1;
                flex-shrink: 0; transition: transform 200ms ease, color 200ms ease;
            }
            #fp-promo .fp-card-arrow-mob { color: #c9a96e; }
            .fp-card:hover .fp-card-arrow-mob { transform: translateX(3px); color: #e8d5a8; }
        }
        @media (prefers-reduced-motion: reduce) {
            .fp-card { transition: opacity 0.01ms !important; }
            .fp-modal-box { transition: none !important; }
        }
        /* FP — Modal de detalle individual */
        .fp-detail-strip { height: 130px; background: linear-gradient(135deg,#0d1b30,#172d4e); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .fp-detail-icon { font-family: 'Marcellus',serif; font-size: 3.8rem; color: rgba(201,169,110,0.18); }
        .fp-detail-sub { font-family: 'Montserrat',sans-serif; font-size: 0.72rem; color: rgba(201,169,110,0.7); margin: 3px 0 0; letter-spacing: 0.02em; }
        .fp-detail-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(201,169,110,0.08); }
        .fp-detail-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .fp-detail-section-label { font-family: 'Montserrat',sans-serif; font-size: 0.47rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201,169,110,0.58); display: block; margin-bottom: 4px; }
        .fp-detail-section-text { font-family: 'Montserrat',sans-serif; font-size: 0.8125rem; color: rgba(224,218,208,0.82); line-height: 1.62; margin: 0; }
        /* FP — Modal de detalle de promocion */
        .fp-promo-detail-strip { height: 110px; background: linear-gradient(135deg,#0b1f0e,#14301a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .fp-promo-detail-tag { font-family: 'Montserrat',sans-serif; font-size: 2.6rem; font-weight: 700; color: rgba(201,169,110,0.22); letter-spacing: 0.06em; }
        .fp-promo-detail-price { font-family: 'Montserrat',sans-serif; font-size: 0.8125rem; color: rgba(201,169,110,0.82); margin: 5px 0 0; font-weight: 600; }
        .fp-promo-detail-price s { color: rgba(201,169,110,0.38); font-weight: 400; margin-right: 6px; text-decoration: line-through; }
        .fp-promo-detail-close-btn { flex: 0 0 auto; background: #c41e3a; border: 1px solid rgba(160,45,70,0.8); color: #ffffff; font-family: 'Montserrat',sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; padding: 10px 20px; border-radius: 6px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
        .fp-promo-detail-close-btn:hover { background: #9b1530; border-color: rgba(160,45,70,1); color: #ffffff; }
        /* FP — Footer fijo con botón Agendar+Llamar */
        .fp-modal-footer {
            flex-shrink: 0;
            padding: 16px 34px 20px;
            border-top: 1px solid rgba(201,169,110,0.14);
            background: #0c1a2e;
            display: flex;
            justify-content: center;
        }
        .fp-footer-btn {
            background: #0a1628;
            color: #c9a96e;
            border: 1px solid rgba(201,169,110,0.35);
            border-radius: 8px;
            font-family: 'Montserrat',sans-serif;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            width: 100%;
            max-width: 380px;
            transition: border-color 200ms ease;
        }
        .fp-footer-btn:has(.bsc-right:hover) { border-color: rgba(201,169,110,0.55); }
        .fp-footer-btn-gold { background: #c9a96e; color: #0a1628; border-color: #c9a96e; }
        /* FP — Botones CTA (restaurados para modales de detalle) */
        .fp-cta { width: 100%; border-radius: 8px; font-family: 'Montserrat',sans-serif; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; line-height: 1; transition: all 200ms ease; }
        .fp-cta-navy { background: #0a1628; color: #c9a96e; border: 1px solid rgba(201,169,110,0.3); }
        .fp-cta-gold { background: #c9a96e; color: #0a1628; border: 1px solid #c9a96e; }

        /* ── SECCIÓN 3 MEDICINA ESTÉTICA — PREMIUM 2026 ── */
        .s3m-banner {
            position: relative;
            height: clamp(400px, 52vh, 580px);
            overflow: hidden;
            background: #060d18;
        }
        @media (max-width: 768px) {
            .s3m-banner { height: clamp(320px, 42vh, 465px); }   /* −20% en mobile */
            .s3m-banner-bg img { object-position: center 55% !important; }   /* recorta el espacio vacío de arriba */

            /* MEDICINA ESTÉTICA — Descripción dentro del banner con fondo oscuro legible */
            .s3m-banner-desc {
                background: linear-gradient(135deg, rgba(10,22,40,0.72) 0%, rgba(6,13,24,0.68) 100%) !important;
                backdrop-filter: blur(7px) saturate(1.35);
                -webkit-backdrop-filter: blur(7px) saturate(1.35);
                padding: 12px 16px !important;
                border-radius: 12px !important;
                border: 1px solid rgba(201,169,110,0.25);
                color: rgba(245,245,240,0.97) !important;
                font-size: 0.95rem !important;
                font-weight: 450 !important;
                line-height: 1.6 !important;
                box-shadow: 0 8px 28px rgba(0,0,0,0.35);
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }

            /* PILLARS (Medicina Estética) — texto más grande/nítido estilo FB (mobile) */
            .s3m-pillar-text {
                font-size: 0.84rem !important;
                font-weight: 600 !important;
                color: rgba(247,243,236,0.96) !important;
                line-height: 1.35 !important;
                -webkit-font-smoothing: antialiased;
            }
            .s3m-pillar-icon { font-size: 1.05rem !important; opacity: 0.9 !important; }

            /* FISIO-ESTÉTICA — Título OVERLAY sobre la foto (compresión vertical) */
            .s5m-hero { position: relative !important; }
            .s5m-hero-img-col {
                height: 220px !important;
                min-height: 220px !important;
            }
            /* Velo oscuro reforzado en la parte superior del image col para que se lea el título */
            .s5m-hero-img-veil {
                background: linear-gradient(180deg,
                    rgba(10,22,40,0.78) 0%,
                    rgba(10,22,40,0.42) 40%,
                    rgba(10,22,40,0.18) 70%,
                    rgba(201,169,110,0.10) 100%) !important;
            }
            /* Eyebrow + Title posicionados como overlay sobre la foto */
            #fisio-estetica-section .s5m-eyebrow {
                position: absolute !important;
                top: 20px;
                left: 20px;
                right: 20px;
                z-index: 5;
                color: rgba(232,213,168,0.95) !important;
                font-size: 0.6rem !important;
                letter-spacing: 0.22em !important;
                text-shadow: 0 2px 10px rgba(0,0,0,0.7);
                margin: 0 !important;
            }
            #fisio-estetica-section .s5m-title {
                position: absolute !important;
                top: 44px;
                left: 20px;
                right: 20px;
                z-index: 5;
                color: #f5f5f0 !important;
                font-size: clamp(1.5rem, 6vw, 2rem) !important;
                line-height: 1.1 !important;
                letter-spacing: -0.01em !important;
                text-shadow: 0 3px 18px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6);
                margin: 0 !important;
            }
            /* Hero content compacto (sin el espacio que ocupaba el título antes) */
            #fisio-estetica-section .s5m-hero-content {
                padding: 14px 18px 16px !important;
            }
            #fisio-estetica-section .s5m-divider {
                margin: 0 0 10px !important;
                width: 36px !important;
            }
        }
        .s3m-banner-bg { position: absolute; inset: 0; }
        .s3m-banner-bg img {
            width: 100%; height: 100%;
            object-fit: cover; object-position: center 30%;
            display: block;
            transition: transform 10s ease-out;
        }
        .s3m-banner-bg img.s3m-loaded { transform: scale(1.05); }
        .s3m-banner-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(105deg,
                rgba(6,13,24,0.90) 0%,
                rgba(6,13,24,0.62) 45%,
                rgba(6,13,24,0.22) 100%);
        }
        .s3m-banner-content {
            position: relative; z-index: 2;
            height: 100%;
            max-width: 1600px; margin: 0 auto;
            padding: 0 6vw;
            display: flex; flex-direction: column;
            justify-content: flex-end;
            padding-bottom: 52px;
        }
        .s3m-banner-eyebrow {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.62rem; font-weight: 600;
            color: var(--dorado); letter-spacing: 0.3em;
            text-transform: uppercase; margin: 0 0 1rem;
        }
        .s3m-banner-title {
            font-family: 'Marcellus', serif;
            font-size: clamp(2.4rem, 5vw, 4.2rem);
            font-weight: 400; color: #f5f5f0;
            letter-spacing: -0.02em; line-height: 1.05;
            margin: 0 0 1.1rem;
        }
        .s3m-banner-desc {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(0.8rem, 1.2vw, 0.92rem);
            font-weight: 300; color: rgba(245,245,240,0.65);
            line-height: 1.72; max-width: 500px; margin: 0;
        }

        /* ── PILLARS ── */
        .s3m-pillars { background: #0a1628; }
        .s3m-pillars-inner {
            max-width: 1600px; margin: 0 auto; padding: 0 6vw;
            display: grid; grid-template-columns: repeat(4, 1fr);
        }
        .s3m-pillar {
            padding: 26px 2rem 24px;
            display: flex; align-items: center; gap: 0.85rem;
            border-right: 1px solid rgba(201,169,110,0.12);
        }
        .s3m-pillar:first-child { padding-left: 0; }
        .s3m-pillar:last-child  { border-right: none; padding-right: 0; }
        .s3m-pillar-icon { color: var(--dorado); font-size: 0.95rem; opacity: 0.78; flex-shrink: 0; }
        .s3m-pillar-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.72rem; font-weight: 500;
            color: rgba(245,241,234,0.82); line-height: 1.4;
        }

        /* ── TREATMENTS HEADER ── */
        .s3m-treats { background: #faf9f6; }
        .s3m-treats-header {
            max-width: 1600px; margin: 0 auto;
            padding: 52px 6vw 32px;
            display: flex; align-items: flex-end;
            justify-content: space-between;
        }
        .s3m-treats-eyebrow {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.62rem; font-weight: 600; color: var(--dorado);
            letter-spacing: 0.26em; text-transform: uppercase; margin: 0 0 0.7rem;
        }
        .s3m-treats-title {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.5rem, 2.6vw, 2.2rem);
            font-weight: 400; color: #0a1628;
            letter-spacing: -0.02em; line-height: 1.1; margin: 0;
        }
        .s3m-treats-count {
            font-family: 'Marcellus', serif; font-size: 4rem;
            color: rgba(201,169,110,0.11); letter-spacing: -0.04em;
            line-height: 1; flex-shrink: 0; user-select: none;
        }

        /* ── CARDS GRID ── */
        .s3m-cards-grid {
            max-width: 1600px; margin: 0 auto;
            padding: 0 6vw 52px;
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }
        .s3m-card {
            position: relative; overflow: hidden;
            border-radius: 10px; cursor: pointer;
            background: #0a1628;
            aspect-ratio: 3 / 4; min-height: 260px;
            display: block;
        }
        .s3m-card-img { position: absolute; inset: 0; }
        .s3m-card-img img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s3m-card:hover .s3m-card-img img { transform: scale(1.08); }
        .s3m-card-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top,
                rgba(6,13,24,0.95) 0%,
                rgba(6,13,24,0.58) 42%,
                rgba(6,13,24,0.12) 100%);
            transition: background 0.4s ease;
        }
        .s3m-card:hover .s3m-card-overlay {
            background: linear-gradient(to top,
                rgba(6,13,24,0.88) 0%,
                rgba(6,13,24,0.44) 42%,
                rgba(6,13,24,0.06) 100%);
        }
        .s3m-card::after {
            content: ''; position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: var(--dorado);
            transform: scaleX(0); transform-origin: left;
            transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s3m-card:hover::after { transform: scaleX(1); }
        .s3m-card-content {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 1.3rem 1.4rem;
            display: flex; flex-direction: column; gap: 0.28rem;
        }
        .s3m-card-num {
            font-family: 'Montserrat', sans-serif; font-size: 0.54rem;
            font-weight: 600; color: var(--dorado);
            letter-spacing: 0.14em; opacity: 0.85;
        }
        .s3m-card-name {
            font-family: 'Marcellus', serif;
            font-size: clamp(0.88rem, 1.1vw, 1.02rem);
            font-weight: 400; color: #f5f5f0;
            letter-spacing: 0.01em; line-height: 1.2;
            transition: color 0.3s ease;
        }
        .s3m-card:hover .s3m-card-name { color: var(--dorado-claro, #e0c896); }
        .s3m-card-brief {
            font-family: 'Montserrat', sans-serif; font-size: 0.66rem;
            color: rgba(245,241,234,0.5); line-height: 1.4;
            max-height: 0; overflow: hidden; opacity: 0;
            transition: max-height 0.42s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
        }
        .s3m-card:hover .s3m-card-brief { max-height: 50px; opacity: 1; }
        .s3m-card-gold {
            width: 0; height: 1px; background: var(--dorado); margin-top: 0.35rem;
            transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s3m-card:hover .s3m-card-gold { width: 28px; }

        /* ── CTA ── */
        .s3m-cta-wrap {
            background: #ffffff;
            border-top: 1px solid rgba(201,169,110,0.14);
        }
        .s3m-cta {
            max-width: 1600px; margin: 0 auto;
            padding: 48px 6vw;
            display: flex; align-items: center;
            justify-content: space-between; gap: 2rem;
        }
        .s3m-cta-text h3 {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.3rem, 2.2vw, 1.8rem);
            color: #0a1628; margin: 0 0 0.45rem; letter-spacing: -0.01em;
        }
        .s3m-cta-text p {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.84rem; color: #5a6a7a; margin: 0; line-height: 1.5;
        }
        .s3m-cta-btn {
            display: inline-flex; align-items: center; gap: 0.65em;
            padding: 1rem 2.8rem;
            background: #0a1628; color: var(--dorado);
            font-family: 'Montserrat', sans-serif;
            font-size: 0.72rem; font-weight: 600;
            letter-spacing: 0.16em; text-transform: uppercase;
            border: none; border-radius: 3px; cursor: pointer; flex-shrink: 0;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 20px rgba(10,22,40,0.14);
        }
        .s3m-cta-btn:hover {
            background: var(--dorado); color: #0a1628;
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(201,169,110,0.3);
        }
        .s3m-cta-btn:active { transform: scale(0.98); }

        /* ── MODAL ── */
        .s3m-overlay {
            position: fixed; inset: 0; z-index: 900;
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
            background: rgba(6,13,24,0.86);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .s3m-overlay.active { opacity: 1; pointer-events: all; }
        .s3m-modal {
            background: #ffffff; border-radius: 14px;
            max-width: 860px; width: 100%;
            max-height: 90vh; overflow: hidden;
            display: grid; grid-template-columns: 42% 58%;
            position: relative;
            box-shadow: 0 32px 80px rgba(0,0,0,0.45);
        }
        .s3m-modal-photo { position: relative; overflow: hidden; background: #0a1628; }
        .s3m-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .s3m-modal-body {
            padding: 38px 34px; overflow-y: auto;
            display: flex; flex-direction: column; min-height: 0; max-height: 90vh;
        }
        .s3m-modal-close {
            position: absolute; top: 13px; right: 13px; z-index: 10;
            width: 33px; height: 33px; border-radius: 50%;
            background: #c41e3a;
            border: 1px solid rgba(160,45,70,0.8);
            color: #ffffff; font-size: 0.82rem; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s ease;
        }
        .s3m-modal-close:hover { background: #9b1530; color: #ffffff; transform: scale(1.1); }
        .s3m-modal-num {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.6rem; font-weight: 600; color: var(--dorado);
            letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.65rem;
        }
        .s3m-modal-title {
            font-family: 'Marcellus', serif;
            font-size: clamp(1.4rem, 2.4vw, 1.8rem);
            color: #0a1628; letter-spacing: -0.02em;
            line-height: 1.1; margin: 0 0 0.9rem;
        }
        .s3m-modal-div { width: 34px; height: 2px; background: var(--dorado); margin-bottom: 1.1rem; }
        .s3m-modal-desc {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.84rem; color: #4a5a72;
            line-height: 1.72; margin: 0 0 1.1rem;
        }
        .s3m-modal-blist {
            list-style: none; padding: 0; margin: 0 0 1.3rem;
            display: flex; flex-direction: column; gap: 0.5rem;
        }
        .s3m-modal-blist li {
            display: flex; align-items: flex-start; gap: 0.55rem;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.79rem; color: #1a3661; line-height: 1.4;
        }
        .s3m-modal-blist li i { color: var(--dorado); font-size: 0.62rem; margin-top: 0.22rem; flex-shrink: 0; }
        .s3m-modal-meta {
            display: flex; gap: 1.1rem; flex-wrap: wrap;
            padding-top: 1rem; margin-bottom: 1.5rem;
            border-top: 1px solid rgba(201,169,110,0.15);
        }
        .s3m-modal-meta span {
            display: flex; align-items: center; gap: 0.38rem;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.67rem; color: #6a7a8a; font-weight: 500;
        }
        .s3m-modal-meta span i { color: var(--dorado); font-size: 0.7rem; }
        .s3m-modal-cta {
            display: inline-flex; align-items: center; gap: 0.6em;
            padding: 0.92rem 2.1rem; margin-top: auto;
            background: #0a1628; color: var(--dorado);
            font-family: 'Montserrat', sans-serif;
            font-size: 0.69rem; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase;
            border: none; border-radius: 3px; cursor: pointer;
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .s3m-modal-cta:hover { background: var(--dorado); color: #0a1628; transform: translateY(-1px); }

        /* ── Reveal ── */
        .s3m-reveal { opacity: 0; transform: translateY(16px); }
        .s3m-reveal.visible {
            opacity: 1; transform: translateY(0);
            transition: opacity 600ms cubic-bezier(0.16,1,0.3,1),
                        transform 600ms cubic-bezier(0.16,1,0.3,1);
        }

        /* ── Responsive ── */
        @media (max-width: 1200px) {
            .s3m-cards-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 900px) {
            .s3m-pillars-inner { grid-template-columns: repeat(2, 1fr); }
            .s3m-pillar:nth-child(2) { border-right: none; padding-right: 0; }
            .s3m-pillar:nth-child(-n+2) { border-bottom: 1px solid rgba(201,169,110,0.12); padding-bottom: 20px; }
            .s3m-pillar:nth-child(n+3) { padding-top: 20px; }
            .s3m-cards-grid { grid-template-columns: repeat(2, 1fr); }
            .s3m-cta { flex-direction: column; text-align: center; }
            .s3m-modal { grid-template-columns: 1fr; max-height: 95vh; }
            .s3m-modal-photo { height: 230px; }
        }
        @media (max-width: 540px) {
            .s3m-treats-count { display: none; }
            .s3m-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .s3m-reveal { opacity: 1; transform: none; }
            .s3m-card-img img, .s3m-card-overlay { transition: none; }
        }

    /* === Galería Antes/Después ADG (shared all sections) === */
    .adg-section { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(201,169,110,0.15); }
    .adg-section-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
    .adg-section-title { font-family: 'Montserrat',sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dorado,#c9a96e); white-space: nowrap; }
    .adg-section-line { flex: 1; height: 1px; background: rgba(201,169,110,0.15); }
    .adg-grid { display: flex; flex-direction: column; gap: 6px; }
    .adg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 9px; overflow: hidden; cursor: pointer; position: relative; transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease; }
    .adg-pair:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.16), 0 0 0 1.5px rgba(201,169,110,0.28); }
    .adg-pair:focus-visible { outline: 2px solid var(--dorado,#c9a96e); outline-offset: 2px; }
    .adg-slot { position: relative; overflow: hidden; aspect-ratio: 3/2; background: #e8e4e0; }
    .adg-tall .adg-slot { aspect-ratio: 15/16; }
    .adg-tall .adg-pair .adg-slot:first-child  { background: linear-gradient(180deg,#8a9aaa,#5c6e80); }
    .adg-tall .adg-pair .adg-slot:nth-child(2) { background: linear-gradient(180deg,#c8a06a,#a0784a); }
    .adg-slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
    .adg-pair:hover .adg-slot img { transform: scale(1.05); }
    .adg-slot-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 8px; background: rgba(10,22,40,0.55); font-family: 'Montserrat',sans-serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado,#c9a96e); text-align: center; }
    .adg-pair-zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(201,169,110,0.92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; z-index: 5; }
    .adg-pair-zoom svg { width: 14px; height: 14px; fill: #0a1628; }
    .adg-pair:hover .adg-pair-zoom { opacity: 1; }
    /* --- Expand overlay --- */
    .adg-expand { position: absolute; inset: 0; z-index: 50; background: #ffffff; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; display: flex; flex-direction: column; }
    .adg-expand.adg-open { opacity: 1; pointer-events: all; }
    .adg-expand.adg-dark { background: #0f1e35; }
    .adg-expand.adg-cream { background: #faf8f5; }
    .adg-expand-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: rgba(255,255,255,0.95); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(201,169,110,0.15); flex-shrink: 0; }
    .adg-expand.adg-dark .adg-expand-topbar { background: rgba(15,30,53,0.96); }
    .adg-expand.adg-cream .adg-expand-topbar { background: rgba(250,248,245,0.96); }
    .adg-expand-label { font-family: 'Montserrat',sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado,#c9a96e); }
    .adg-expand-close { width: 26px; height: 26px; border-radius: 50%; background: #c41e3a; color: #ffffff; border: 1px solid rgba(160,45,70,0.8); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; transition: background 0.15s ease, transform 0.15s ease; flex-shrink: 0; line-height: 1; }
    .adg-expand-close:hover { background: #9b1530; transform: scale(1.1); }
    .adg-expand-body { flex: 1; min-height: 0; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
    .adg-expand-block { flex: 0 0 auto; width: fit-content; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
    .adg-expand-block-label { display: block; align-self: stretch; font-family: 'Montserrat',sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dorado-claro,#e0c896); background: var(--azul-noche,#0a1628); padding: 6px 14px; border-radius: 5px; text-align: center; }
    .adg-expand-block img { max-height: 58vh; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; display: block; box-shadow: 0 3px 12px rgba(0,0,0,0.12); }
    .adg-tall .adg-slot img { object-fit: cover; }

    /* ── BOTÓN SPLIT: AGENDAR + LLAMAR AL ASISTENTE ── */
    .btn-split-call {
        display: inline-flex !important;
        align-items: stretch !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden;
        min-width: 300px;
    }
    .bsc-left {
        flex: 1;
        display: flex; align-items: center; justify-content: center; gap: 0.6em;
        padding: 0.9em 1.6em;
    }
    .bsc-divider {
        width: 0; flex-shrink: 0;
    }
    /* Sección LLAMAR — botón independiente visualmente */
    .bsc-right {
        background: #c9a96e;
        color: #0a1628;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        padding: 0.7em 1.4em;
        min-width: 90px;
        cursor: pointer;
        transition: background 220ms ease, transform 150ms ease;
        flex-shrink: 0;
    }
    /* Hover en zona LLAMAR — rojo impactante, solo el lado derecho */
    .bsc-right:hover { background: #c0392b !important; color: #ffffff !important; }
    .bsc-right:hover .bsc-right-title,
    .bsc-right:hover .bsc-right-sub { color: #ffffff !important; opacity: 1; }
    .bsc-right:active { transform: scale(0.97); }
    /* Variante fondo dorado */
    .btn-split-call.bsc-gold .bsc-right { background: #0a1628; color: #c9a96e; }
    .btn-split-call.bsc-gold .bsc-right:hover { background: #c0392b !important; color: #ffffff !important; }
    .btn-split-call.bsc-gold .bsc-right:hover .bsc-right-title,
    .btn-split-call.bsc-gold .bsc-right:hover .bsc-right-sub { color: #ffffff !important; opacity: 1; }
    /* Cuando el mouse está sobre LLAMAR: congelar AGENDAR en estado normal (sin hover) */
    .s3m-cta-btn.btn-split-call:has(.bsc-right:hover) { background: #0a1628 !important; color: var(--dorado,#c9a96e) !important; transform: none !important; box-shadow: 0 4px 20px rgba(10,22,40,0.14) !important; }
    .s4m-cta-btn.btn-split-call:has(.bsc-right:hover) { background: var(--dorado,#c9a96e) !important; color: #060d18 !important; transform: none !important; box-shadow: 0 4px 20px rgba(201,169,110,0.25) !important; }
    .s5m-cta-btn.btn-split-call:has(.bsc-right:hover) { background: #0a1628 !important; color: #f5f5f0 !important; transform: none !important; }
    .s6m-cta-btn.btn-split-call:has(.bsc-right:hover) { background: var(--dorado,#c9a96e) !important; color: #0e0815 !important; transform: none !important; }
    button#hero-cta.btn-split-call:has(.bsc-right:hover) { color: var(--dorado) !important; background: transparent !important; }
    button#hero-cta.btn-split-call:has(.bsc-right:hover)::before { transform: scaleX(0) !important; }
    /* Estado llamada activa — rojo coherente con marca */
    .bsc-right.bsc-calling {
        background: #b54848 !important;
        color: #ffffff !important;
    }
    .bsc-right.bsc-calling:hover { background: #8e3636 !important; }
    .bsc-right.bsc-calling .bsc-phone-icon { animation: bsc-ring 1s ease-in-out infinite; }
    .bsc-right.bsc-calling .bsc-right-sub { opacity: 0.88; }
    @keyframes bsc-ring {
        0%, 100% { transform: rotate(0deg); }
        20% { transform: rotate(-15deg); }
        40% { transform: rotate(15deg); }
        60% { transform: rotate(-10deg); }
        80% { transform: rotate(10deg); }
    }
    .bsc-phone-icon {
        font-size: 0.82rem; margin-bottom: 2px;
        transition: transform 220ms ease;
    }
    .bsc-right:hover .bsc-phone-icon { transform: rotate(-12deg) scale(1.1); }
    .bsc-right-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.65rem; font-weight: 700;
        letter-spacing: 0.1em; text-transform: uppercase;
        line-height: 1.2; display: block;
    }
    .bsc-right-sub {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.52rem; font-weight: 500;
        letter-spacing: 0.06em; opacity: 0.80;
        line-height: 1.2; display: block;
    }
    /* Botones de modal de especialidades — sticky al fondo del scroll, siempre visible */
    .s3m-modal-cta.btn-split-call,
    .s4m-modal-btn.btn-split-call,
    .s5m-modal-btn.btn-split-call,
    .s6m-modal-btn.btn-split-call {
        position: sticky;
        bottom: 0;
        margin-top: 20px;
        z-index: 2;
        flex-shrink: 0;
    }
    /* Sombra de fade sobre el contenido al hacer scroll — sec blancas */
    .s3m-modal-cta.btn-split-call,
    .s5m-modal-btn.btn-split-call {
        box-shadow: 0 -14px 18px 8px #ffffff;
    }
    /* Sombra de fade — sec oscuras */
    .s4m-modal-btn.btn-split-call {
        box-shadow: 0 -14px 18px 8px #0f1e35;
    }
    .s6m-modal-btn.btn-split-call {
        box-shadow: 0 -14px 18px 8px #faf8f5;
    }
    /* Mobile */
    @media(max-width:600px) {
        .btn-split-call { min-width: 0; width: 100%; }
        .bsc-right { min-width: 78px; padding: 0.7em 1em; }
    }

    /* ─── S4M: CIRUGÍA ESTÉTICA — ATELIER DARK ─────────────────── */
    .s4m-section { background: #060d18; position: relative; }

    .s4m-header {
        padding: clamp(64px,8vw,100px) 6vw clamp(52px,6vw,76px);
        text-align: center; position: relative; overflow: hidden;
    }
    .s4m-watermark {
        position: absolute; font-family: 'Marcellus',serif;
        font-size: clamp(96px,16vw,186px); color: rgba(201,169,110,0.04);
        top: 50%; left: 50%; transform: translate(-50%,-50%);
        pointer-events: none; user-select: none; line-height: 1; white-space: nowrap;
    }
    .s4m-eyebrow {
        font-family: 'Montserrat',sans-serif; font-size: 0.68rem; font-weight: 600;
        letter-spacing: 0.16em; text-transform: uppercase; color: var(--dorado,#c9a96e);
        margin: 0 0 1.1rem; position: relative;
    }
    .s4m-title {
        font-family: 'Marcellus',serif; font-size: clamp(2.1rem,4.2vw,3.4rem);
        font-weight: 400; color: #f5f5f0; letter-spacing: -0.02em; line-height: 1.08;
        margin: 0 0 1.4rem; position: relative;
    }
    .s4m-divider { width: 48px; height: 2px; background: var(--dorado,#c9a96e); margin: 0 auto 1.6rem; position: relative; }
    .s4m-intro {
        font-family: 'Montserrat',sans-serif; font-size: clamp(0.88rem,1.1vw,1rem);
        color: rgba(245,245,240,0.58); line-height: 1.72; max-width: 580px;
        margin: 0 auto; position: relative;
    }

    .s4m-creds {
        background: rgba(201,169,110,0.05);
        border-top: 1px solid rgba(201,169,110,0.1);
        border-bottom: 1px solid rgba(201,169,110,0.1);
        padding: 18px 6vw;
        display: flex; align-items: center; justify-content: center;
        gap: clamp(20px,4vw,60px); flex-wrap: wrap;
    }
    .s4m-cred {
        display: flex; align-items: center; gap: 0.5rem;
        font-family: 'Montserrat',sans-serif; font-size: 0.67rem;
        font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
        color: rgba(245,245,240,0.45);
    }
    .s4m-cred i { color: var(--dorado,#c9a96e); font-size: 0.72rem; }

    .s4m-grid-wrapper {
        max-width: 1600px; margin: 0 auto;
        padding: clamp(40px,5vw,64px) 6vw clamp(52px,6vw,76px);
    }
    .s4m-grid-label {
        font-family: 'Montserrat',sans-serif; font-size: 0.62rem; font-weight: 600;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(201,169,110,0.38); margin-bottom: 18px;
    }
    .s4m-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }

    .s4m-card {
        position: relative; overflow: hidden; border-radius: 9px;
        cursor: pointer; background: #0a1628;
        aspect-ratio: 4/3; display: block; outline: none;
    }
    .s4m-card-img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block;
        transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
    }
    .s4m-card:hover .s4m-card-img { transform: scale(1.07); }
    .s4m-card-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(6,13,24,0.12) 0%, rgba(6,13,24,0.52) 55%, rgba(6,13,24,0.92) 100%);
        transition: background 0.3s ease;
    }
    .s4m-card:hover .s4m-card-overlay {
        background: linear-gradient(180deg, rgba(6,13,24,0.2) 0%, rgba(6,13,24,0.58) 52%, rgba(6,13,24,0.95) 100%);
    }
    .s4m-card-num {
        position: absolute; top: 10px; left: 11px; z-index: 2;
        font-family: 'Marcellus',serif; font-size: 0.7rem;
        color: var(--dorado,#c9a96e); letter-spacing: 0.05em;
    }
    .s4m-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 13px 10px; z-index: 2; }
    .s4m-card-name {
        font-family: 'Marcellus',serif; font-size: clamp(0.8rem,1vw,0.98rem);
        font-weight: 400; color: #f5f5f0; margin: 0 0 3px; line-height: 1.2;
    }
    .s4m-card-hint {
        font-family: 'Montserrat',sans-serif; font-size: 0.67rem;
        color: rgba(245,245,240,0); line-height: 1.4; margin: 0;
        max-height: 0; overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1), color 0.28s ease 0.06s;
    }
    .s4m-card:hover .s4m-card-hint { max-height: 36px; color: rgba(245,245,240,0.6); }
    .s4m-card-frame {
        position: absolute; inset: 0; border-radius: 9px;
        border: 1px solid rgba(201,169,110,0); pointer-events: none;
        transition: border-color 0.3s ease;
    }
    .s4m-card:hover .s4m-card-frame { border-color: rgba(201,169,110,0.45); }
    .s4m-card-badge {
        position: absolute; bottom: 11px; right: 11px; z-index: 2;
        display: flex; align-items: center; gap: 4px;
        font-family: 'Montserrat',sans-serif; font-size: 0.6rem; font-weight: 600;
        letter-spacing: 0.07em; text-transform: uppercase; color: var(--dorado,#c9a96e);
        opacity: 0; transform: translateX(6px);
        transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .s4m-card:hover .s4m-card-badge { opacity: 1; transform: translateX(0); }

    .s4m-overlay {
        position: fixed; inset: 0; z-index: 900;
        display: flex; align-items: center; justify-content: center; padding: 24px;
        background: rgba(4,9,18,0.93); backdrop-filter: blur(18px);
        opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    }
    .s4m-overlay.active { opacity: 1; pointer-events: all; }
    .s4m-modal {
        background: #0f1e35; border-radius: 14px;
        max-width: 880px; width: 100%; max-height: 88vh; overflow: hidden;
        display: grid; grid-template-columns: 56% 44%;
        position: relative;
        box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,169,110,0.12);
    }
    .s4m-modal-content {
        padding: clamp(28px,4vw,44px) clamp(24px,3.5vw,40px);
        overflow-y: auto; display: flex; flex-direction: column; min-height: 0; max-height: 88vh;
    }
    .s4m-modal-num {
        font-family: 'Marcellus',serif; font-size: 0.75rem;
        color: var(--dorado,#c9a96e); letter-spacing: 0.12em; margin: 0 0 0.55rem;
    }
    .s4m-modal-name {
        font-family: 'Marcellus',serif; font-size: clamp(1.4rem,2.2vw,1.9rem);
        font-weight: 400; color: #f5f5f0; letter-spacing: -0.01em;
        line-height: 1.15; margin: 0 0 0.9rem;
    }
    .s4m-modal-hr { width: 32px; height: 1.5px; background: var(--dorado,#c9a96e); margin: 0 0 1.4rem; }
    .s4m-modal-desc {
        font-family: 'Montserrat',sans-serif; font-size: 0.86rem;
        color: rgba(245,245,240,0.65); line-height: 1.72; margin: 0 0 1.4rem;
    }
    .s4m-modal-bens {
        list-style: none; padding: 0; margin: 0 0 1.4rem;
        display: flex; flex-direction: column; gap: 0.55rem;
    }
    .s4m-modal-bens li {
        display: flex; align-items: flex-start; gap: 0.55rem;
        font-family: 'Montserrat',sans-serif; font-size: 0.8rem;
        color: rgba(245,245,240,0.72); line-height: 1.45;
    }
    .s4m-modal-bens li::before {
        content: ''; display: block; width: 5px; height: 5px;
        border-radius: 50%; background: var(--dorado,#c9a96e);
        margin-top: 5px; flex-shrink: 0;
    }
    .s4m-modal-meta {
        display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
        margin-bottom: 1.4rem; padding: 14px;
        background: rgba(201,169,110,0.05);
        border: 1px solid rgba(201,169,110,0.1); border-radius: 8px;
    }
    .s4m-modal-meta div label {
        display: block; font-family: 'Montserrat',sans-serif;
        font-size: 0.56rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--dorado,#c9a96e); margin-bottom: 3px;
    }
    .s4m-modal-meta div span {
        font-family: 'Montserrat',sans-serif; font-size: 0.76rem; color: #f5f5f0;
    }
    .s4m-modal-note {
        font-family: 'Montserrat',sans-serif; font-size: 0.71rem;
        color: rgba(245,245,240,0.35); line-height: 1.5; margin-bottom: 1.4rem;
        padding: 10px 14px; border-left: 2px solid rgba(201,169,110,0.28);
        background: rgba(201,169,110,0.04);
    }
    .s4m-modal-btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.72rem 1.6rem; background: var(--dorado,#c9a96e); color: #060d18;
        border: none; border-radius: 6px;
        font-family: 'Montserrat',sans-serif; font-size: 0.78rem;
        font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
        cursor: pointer; transition: background 0.2s ease, transform 0.15s ease;
        margin-top: auto; align-self: flex-start;
    }
    .s4m-modal-btn:hover { background: #e0c896; transform: translateY(-1px); }
    .s4m-modal-photo { position: relative; overflow: hidden; min-height: 280px; }
    .s4m-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .s4m-modal-photo-veil {
        position: absolute; inset: 0;
        background: linear-gradient(90deg, rgba(15,30,53,0.3) 0%, rgba(15,30,53,0) 60%);
    }
    .s4m-modal-x {
        position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
        border-radius: 50%; background: #c41e3a;
        border: 1px solid rgba(160,45,70,0.8); color: #ffffff;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        font-size: 0.85rem; font-weight: 700; z-index: 10; transition: background 0.2s ease;
    }
    .s4m-modal-x:hover { background: #9b1530; }

    .s4m-cta-strip {
        background: #0a1628; border-top: 1px solid rgba(201,169,110,0.1);
        padding: clamp(48px,6vw,72px) 6vw; text-align: center;
    }
    .s4m-cta-h {
        font-family: 'Marcellus',serif; font-size: clamp(1.5rem,2.6vw,2rem);
        font-weight: 400; color: #f5f5f0; margin: 0 0 0.8rem; letter-spacing: -0.01em;
    }
    .s4m-cta-p {
        font-family: 'Montserrat',sans-serif; font-size: 0.88rem;
        color: rgba(245,245,240,0.48); margin: 0 0 1.8rem; line-height: 1.6;
    }
    .s4m-cta-btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.85rem 2.2rem; background: var(--dorado,#c9a96e); color: #060d18;
        border: none; border-radius: 7px;
        font-family: 'Montserrat',sans-serif; font-size: 0.82rem;
        font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 20px rgba(201,169,110,0.25);
    }
    .s4m-cta-btn:hover { background: #e0c896; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,169,110,0.35); }
    .s4m-cta-note {
        font-family: 'Montserrat',sans-serif; font-size: 0.67rem;
        color: rgba(245,245,240,0.26); margin-top: 1rem; letter-spacing: 0.04em;
    }

    .s4m-reveal { opacity: 0; transform: translateY(18px); }
    .s4m-reveal.visible {
        opacity: 1; transform: translateY(0);
        transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1);
    }
    @media (prefers-reduced-motion: reduce) { .s4m-reveal { opacity: 1; transform: none; } }

    @media (max-width: 1200px) { .s4m-grid { grid-template-columns: repeat(4,1fr); } }
    @media (max-width: 900px)  { .s4m-grid { grid-template-columns: repeat(3,1fr); } }
    @media (max-width: 768px) {
        .s4m-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
        .s4m-modal { grid-template-columns: 1fr; }
        .s4m-modal-photo { min-height: 200px; order: -1; }
        .s4m-creds { gap: 14px; }
    }
    @media (max-width: 480px) {
        .s4m-grid { grid-template-columns: 1fr; }
        .s4m-modal-meta { grid-template-columns: 1fr 1fr; }
    }

    /* ─── S5M: FISIO-ESTÉTICA AVANZADA — SPA-LIGHT ─────────────── */
    .s5m-section { background: #f7f4f0; position: relative; }

    /* Hero split */
    .s5m-hero { display: grid; grid-template-columns: 42% 58%; min-height: clamp(480px,52vh,600px); }
    .s5m-hero-img-col { position: relative; overflow: hidden; }
    .s5m-hero-img-col img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .s5m-hero-img-veil {
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(201,169,110,0.15) 0%, rgba(10,22,40,0.28) 100%);
    }
    .s5m-hero-content {
        padding: clamp(48px,6vw,80px) clamp(40px,5vw,64px);
        display: flex; flex-direction: column; justify-content: center;
        background: #f7f4f0;
    }
    .s5m-eyebrow {
        font-family: 'Montserrat',sans-serif; font-size: 0.68rem; font-weight: 600;
        letter-spacing: 0.16em; text-transform: uppercase; color: var(--dorado,#c9a96e);
        margin: 0 0 1rem;
    }
    .s5m-title {
        font-family: 'Marcellus',serif; font-size: clamp(1.9rem,3.8vw,3.1rem);
        font-weight: 400; color: #0a1628; letter-spacing: -0.02em; line-height: 1.1;
        margin: 0 0 1.3rem;
    }
    .s5m-divider { width: 44px; height: 2px; background: var(--dorado,#c9a96e); margin: 0 0 1.5rem; }
    .s5m-intro {
        font-family: 'Montserrat',sans-serif; font-size: clamp(0.86rem,1.05vw,0.96rem);
        color: #4a5568; line-height: 1.72; margin: 0 0 1.6rem;
    }
    .s5m-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
    .s5m-badge {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.38rem 0.85rem;
        border: 1px solid rgba(201,169,110,0.28); border-radius: 100px;
        font-family: 'Montserrat',sans-serif; font-size: 0.64rem;
        font-weight: 600; color: #4a5568; letter-spacing: 0.04em;
        background: rgba(201,169,110,0.06);
    }
    .s5m-badge i { color: var(--dorado,#c9a96e); font-size: 0.65rem; }
    .s5m-hero-note {
        font-family: 'Montserrat',sans-serif; font-size: 0.78rem;
        color: #718096; display: flex; align-items: center; gap: 0.5rem; margin: 0;
    }
    .s5m-hero-note i { color: var(--dorado,#c9a96e); }

    /* Treatments */
    .s5m-trats-wrap {
        max-width: 1600px; margin: 0 auto;
        padding: clamp(48px,5vw,72px) 6vw clamp(52px,6vw,76px);
    }
    .s5m-trats-label {
        font-family: 'Montserrat',sans-serif; font-size: 0.62rem; font-weight: 600;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(10,22,40,0.3); margin-bottom: 20px;
    }
    .s5m-trats-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
        overflow: visible; background: transparent;
    }
    .s5m-trat {
        display: grid; grid-template-columns: 1fr 1fr;
        cursor: pointer; position: relative; outline: none;
        height: 120px; transition: background 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden; border-radius: 8px; background: #ffffff;
        box-shadow: 0 1px 4px rgba(10,22,40,0.07), 0 0 0 1px rgba(201,169,110,0.12);
    }
    .s5m-trat:hover,
    .s5m-trat:focus-visible { background: #fefcf8; box-shadow: 0 2px 10px rgba(10,22,40,0.12), 0 0 0 1px rgba(201,169,110,0.22); }
    .s5m-trat-photo { position: relative; overflow: hidden; }
    .s5m-trat-photo img {
        width: 100%; height: 100%; object-fit: cover; display: block;
        transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .s5m-trat:hover .s5m-trat-photo img { transform: scale(1.06); }
    .s5m-trat-photo-num {
        position: absolute; top: 8px; left: 10px; z-index: 2;
        font-family: 'Marcellus',serif; font-size: 0.82rem;
        color: var(--dorado,#c9a96e); letter-spacing: 0.04em;
        text-shadow: 0 1px 4px rgba(6,13,24,0.55);
    }
    .s5m-trat-body {
        padding: 14px 16px 14px 18px;
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        border-left: 3px solid transparent;
        transition: border-color 0.24s cubic-bezier(0.16,1,0.3,1), padding-left 0.28s cubic-bezier(0.16,1,0.3,1);
    }
    .s5m-trat:hover .s5m-trat-body,
    .s5m-trat:focus-visible .s5m-trat-body { border-left-color: var(--dorado,#c9a96e); padding-left: 22px; }
    .s5m-trat-name {
        font-family: 'Marcellus',serif; font-size: 0.95rem; font-weight: 400;
        color: #0a1628; line-height: 1.3; margin: 0;
        transition: color 0.2s ease;
    }
    .s5m-trat:hover .s5m-trat-name { color: var(--dorado-oscuro,#a08749); }
    .s5m-trat-desc {
        font-family: 'Montserrat',sans-serif; font-size: 0.72rem;
        color: #718096; line-height: 1.4; margin: 0;
    }
    .s5m-trat-arr {
        color: var(--dorado-oscuro,#a08749); font-size: 0.72rem; align-self: flex-end;
        margin-top: 4px; opacity: 0; transform: translateX(-4px);
        transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .s5m-trat:hover .s5m-trat-arr { opacity: 1; transform: translateX(0); }
    @media (max-width: 480px) {
        .s5m-trat { grid-template-columns: 1fr; grid-template-rows: 110px auto; height: auto; transform: none; }
    }

    /* Modal — vertical (photo top) */
    .s5m-overlay {
        position: fixed; inset: 0; z-index: 900;
        display: flex; align-items: center; justify-content: center; padding: 24px;
        background: rgba(10,22,40,0.72); backdrop-filter: blur(12px);
        opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    }
    .s5m-overlay.active { opacity: 1; pointer-events: all; }
    .s5m-modal {
        background: #ffffff; border-radius: 14px;
        max-width: 860px; width: 100%; max-height: 88vh; overflow: hidden;
        position: relative; display: grid; grid-template-columns: 42% 58%;
        box-shadow: 0 32px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(201,169,110,0.12);
    }
    .s5m-modal-img-wrap { position: relative; min-height: 400px; overflow: hidden; }
    .s5m-modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .s5m-modal-img-veil {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(10,22,40,0) 40%, rgba(10,22,40,0.55) 100%);
    }
    .s5m-modal-img-name {
        position: absolute; bottom: 14px; left: 18px;
        font-family: 'Marcellus',serif; font-size: 1.05rem; color: #f5f5f0;
        letter-spacing: -0.01em; margin: 0;
    }
    .s5m-modal-body { padding: clamp(24px,3vw,32px) clamp(24px,3vw,36px) clamp(28px,3vw,40px); overflow-y: auto; display: flex; flex-direction: column; min-height: 0; max-height: 88vh; }
    .s5m-modal-tag {
        font-family: 'Montserrat',sans-serif; font-size: 0.6rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--dorado,#c9a96e); margin: 0 0 0.35rem;
    }
    .s5m-modal-name {
        font-family: 'Marcellus',serif; font-size: clamp(1.3rem,2.5vw,1.6rem);
        font-weight: 400; color: #0a1628; line-height: 1.2; margin: 0 0 1rem;
    }
    .s5m-modal-hr { width: 36px; height: 1.5px; background: var(--dorado,#c9a96e); margin: 0 0 1.2rem; }
    .s5m-modal-desc {
        font-family: 'Montserrat',sans-serif; font-size: 0.86rem;
        color: #4a5568; line-height: 1.7; margin: 0 0 1.2rem;
    }
    .s5m-modal-bens {
        list-style: none; padding: 0; margin: 0 0 1.3rem;
        display: flex; flex-direction: column; gap: 0.5rem;
    }
    .s5m-modal-bens li {
        display: flex; align-items: flex-start; gap: 0.55rem;
        font-family: 'Montserrat',sans-serif; font-size: 0.8rem;
        color: #4a5568; line-height: 1.45;
    }
    .s5m-modal-bens li::before {
        content: ''; display: block; width: 5px; height: 5px;
        border-radius: 50%; background: var(--dorado,#c9a96e);
        margin-top: 5px; flex-shrink: 0;
    }
    .s5m-modal-meta {
        display: flex; margin-bottom: 1.4rem;
        background: #f7f4f0; border-radius: 8px; overflow: hidden;
    }
    .s5m-modal-meta-item {
        flex: 1; padding: 12px 14px;
        border-right: 1px solid rgba(201,169,110,0.15);
    }
    .s5m-modal-meta-item:last-child { border-right: none; }
    .s5m-modal-meta-item label {
        display: block; font-family: 'Montserrat',sans-serif;
        font-size: 0.56rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--dorado,#c9a96e); margin-bottom: 3px;
    }
    .s5m-modal-meta-item span {
        font-family: 'Montserrat',sans-serif; font-size: 0.76rem; color: #0a1628;
    }
    .s5m-modal-btn {
        display: flex; align-items: center; justify-content: center; gap: 0.5rem;
        padding: 0.78rem; width: 100%; margin-top: auto;
        background: #0a1628; color: #f5f5f0;
        border: none; border-radius: 8px;
        font-family: 'Montserrat',sans-serif; font-size: 0.8rem;
        font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
        cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
    }
    .s5m-modal-btn:hover { background: var(--dorado,#c9a96e); color: #0a1628; }
    .s5m-modal-x {
        position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
        border-radius: 50%; background: #c41e3a;
        border: 1px solid rgba(160,45,70,0.8); color: #ffffff;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        font-size: 0.85rem; font-weight: 700; z-index: 10; transition: background 0.2s ease;
    }
    .s5m-modal-x:hover { background: #9b1530; }

    @media (max-width: 680px) {
        .s5m-modal { grid-template-columns: 1fr; }
        .s5m-modal-img-wrap { min-height: 220px; }
    }

    /* CTA */
    .s5m-cta {
        background: #ece8e2; border-top: 1px solid rgba(201,169,110,0.15);
        padding: clamp(48px,6vw,72px) 6vw; text-align: center;
    }
    .s5m-cta-h {
        font-family: 'Marcellus',serif; font-size: clamp(1.5rem,2.6vw,2rem);
        font-weight: 400; color: #0a1628; margin: 0 0 0.8rem; letter-spacing: -0.01em;
    }
    .s5m-cta-p {
        font-family: 'Montserrat',sans-serif; font-size: 0.88rem;
        color: #4a5568; margin: 0 0 1.8rem; line-height: 1.6;
    }
    .s5m-cta-btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.85rem 2.2rem; background: #0a1628; color: #f5f5f0;
        border: none; border-radius: 7px;
        font-family: 'Montserrat',sans-serif; font-size: 0.82rem;
        font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
        cursor: pointer; transition: background 0.2s ease, transform 0.15s ease;
        box-shadow: 0 4px 20px rgba(10,22,40,0.15);
    }
    .s5m-cta-btn:hover { background: var(--dorado,#c9a96e); color: #0a1628; transform: translateY(-1px); }

    /* Reveal */
    .s5m-reveal { opacity: 0; transform: translateY(18px); }
    .s5m-reveal.visible {
        opacity: 1; transform: translateY(0);
        transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1);
    }
    @media (prefers-reduced-motion: reduce) { .s5m-reveal { opacity: 1; transform: none; } }

    /* Responsive */
    @media (max-width: 900px) {
        .s5m-hero { grid-template-columns: 1fr; }
        .s5m-hero-img-col { height: 280px; min-height: unset; }
    }
    @media (max-width: 680px) {
        .s5m-trats-grid { grid-template-columns: 1fr; gap: 10px 0; }
        .s5m-trats-grid .s5m-trat { transform: none; }
    }
    @media (max-width: 480px) {
        .s5m-modal-meta { flex-direction: column; }
        .s5m-modal-meta-item { border-right: none; border-bottom: 1px solid rgba(201,169,110,0.15); }
        .s5m-modal-meta-item:last-child { border-bottom: none; }
    }

    /* === SECCIÓN 6 — COSMETOLOGÍA AVANZADA (s6m-) === */
    .s6m-section {
        background: #0e0815;
        position: relative; overflow: hidden;
    }
    .s6m-section::before {
        content: ''; position: absolute;
        top: -180px; right: -160px;
        width: 540px; height: 540px; border-radius: 50%;
        background: radial-gradient(circle, rgba(201,169,110,0.06) 0%, transparent 65%);
        pointer-events: none;
    }
    /* Header */
    .s6m-header {
        display: grid; grid-template-columns: 55% 45%;
        gap: 0 clamp(40px,5vw,72px); align-items: end;
        padding: clamp(72px,8vw,96px) clamp(32px,6vw,80px) 0;
        max-width: 1280px; margin: 0 auto;
    }
    .s6m-eyebrow {
        font-family: 'Montserrat',sans-serif; font-size: 0.63rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em;
        color: var(--dorado,#c9a96e); margin: 0 0 1rem;
    }
    .s6m-title {
        font-family: 'Marcellus',serif;
        font-size: clamp(2.2rem,4vw,3rem); font-weight: 400;
        color: #f5f5f0; line-height: 1.1;
        letter-spacing: -0.02em; margin: 0;
    }
    .s6m-header-right { padding-bottom: 4px; }
    .s6m-intro {
        font-family: 'Montserrat',sans-serif; font-size: 0.875rem;
        color: rgba(245,245,240,0.52); line-height: 1.75; margin: 0;
    }
    .s6m-divider {
        max-width: 1280px; margin: clamp(36px,4vw,48px) auto 0;
        padding: 0 clamp(32px,6vw,80px);
    }
    .s6m-divider hr { border: none; border-top: 1px solid rgba(201,169,110,0.18); margin: 0; }

    /* ── ESPECIALIDADES (Cirugía/Fisio/Cosmetología) — legibilidad estilo FB (mobile) ── */
    @media (max-width: 768px) {
        /* CIRUGÍA (s4m) — fondo oscuro → texto claro */
        .s4m-intro {
            font-size: 0.95rem !important;
            font-weight: 450 !important;
            color: rgba(245,245,240,0.9) !important;
            line-height: 1.62 !important;
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        }
        .s4m-cred {
            font-size: 0.76rem !important;
            color: rgba(245,245,240,0.78) !important;
        }
        .s4m-cred i { font-size: 0.82rem !important; }

        /* FISIO (s5m) — fondo claro → texto oscuro */
        .s5m-intro {
            font-size: 0.95rem !important;
            font-weight: 450 !important;
            color: #26333f !important;
            line-height: 1.6 !important;
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        }
        .s5m-badge {
            font-size: 0.74rem !important;
            color: #2a3746 !important;
        }
        .s5m-hero-note {
            font-size: 0.82rem !important;
            font-weight: 600 !important;
            -webkit-font-smoothing: antialiased;
        }

        /* COSMETOLOGÍA (s6m) — fondo oscuro → texto claro */
        .s6m-intro {
            font-size: 0.95rem !important;
            font-weight: 450 !important;
            color: rgba(245,245,240,0.9) !important;
            line-height: 1.65 !important;
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
        }
    }
    /* Bento grid */
    .s6m-grid {
        display: grid; grid-template-columns: repeat(3,1fr);
        gap: 10px;
        padding: clamp(28px,3.5vw,36px) clamp(32px,6vw,80px) 0;
        max-width: 1280px; margin: 0 auto;
    }
    .s6m-card {
        position: relative; overflow: hidden; border-radius: 10px;
        cursor: pointer; outline: none; display: block;
        aspect-ratio: 3/4; background: #1a1025;
    }
    .s6m-card.s6m-featured { grid-column: span 2; aspect-ratio: 16/7; }
    .s6m-card-img {
        position: absolute; inset: 0;
        width: 100%; height: 100%; object-fit: cover; display: block;
        transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .s6m-card:hover .s6m-card-img,
    .s6m-card:focus-visible .s6m-card-img { transform: scale(1.06); }
    .s6m-card-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(14,8,21,0) 28%, rgba(14,8,21,0.6) 65%, rgba(14,8,21,0.94) 100%);
    }
    .s6m-card::after {
        content: ''; position: absolute; inset: 0; border-radius: 10px;
        box-shadow: inset 0 0 0 0px var(--dorado,#c9a96e);
        transition: box-shadow 0.28s cubic-bezier(0.16,1,0.3,1);
    }
    .s6m-card:hover::after,
    .s6m-card:focus-visible::after { box-shadow: inset 0 0 0 1.5px var(--dorado,#c9a96e); }
    .s6m-card-body {
        position: absolute; bottom: 0; left: 0; right: 0;
        padding: 14px 18px 17px; z-index: 2;
    }
    .s6m-card-num {
        font-family: 'Marcellus',serif; font-size: 0.66rem;
        color: var(--dorado,#c9a96e); letter-spacing: 0.05em;
        display: block; margin-bottom: 3px;
    }
    .s6m-card-name {
        font-family: 'Marcellus',serif;
        font-size: clamp(0.82rem,0.9vw,0.98rem); font-weight: 400;
        color: #f5f5f0; line-height: 1.25; margin: 0; letter-spacing: -0.01em;
    }
    .s6m-card.s6m-featured .s6m-card-name { font-size: clamp(1rem,1.4vw,1.28rem); }
    /* Modal — split dark photo / warm light content */
    .s6m-overlay {
        position: fixed; inset: 0; z-index: 900;
        display: flex; align-items: center; justify-content: center; padding: 24px;
        background: rgba(14,8,21,0.82); backdrop-filter: blur(14px);
        opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    }
    .s6m-overlay.active { opacity: 1; pointer-events: all; }
    .s6m-modal {
        display: grid; grid-template-columns: 42% 58%;
        max-width: 900px; width: 100%; max-height: 88vh;
        border-radius: 14px; overflow: hidden;
        box-shadow: 0 32px 80px rgba(0,0,0,0.5);
        position: relative;
    }
    .s6m-modal-photo {
        position: relative; overflow: hidden;
        background: #1a1025; min-height: 480px;
    }
    .s6m-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .s6m-modal-photo-veil {
        position: absolute; inset: 0;
        background: linear-gradient(to bottom, transparent 55%, rgba(14,8,21,0.5) 100%);
    }
    .s6m-modal-photo-num {
        position: absolute; bottom: 18px; left: 20px;
        font-family: 'Marcellus',serif; font-size: 0.72rem;
        color: var(--dorado,#c9a96e); letter-spacing: 0.06em;
    }
    .s6m-modal-content {
        background: #faf8f5; overflow-y: auto;
        padding: clamp(32px,4vw,44px) clamp(28px,3.5vw,40px) clamp(32px,4vw,44px);
        display: flex; flex-direction: column; min-height: 0; max-height: 88vh;
    }
    .s6m-modal-tag {
        font-family: 'Montserrat',sans-serif; font-size: 0.6rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--dorado,#c9a96e); margin: 0 0 0.4rem;
    }
    .s6m-modal-name {
        font-family: 'Marcellus',serif; font-size: clamp(1.3rem,2.5vw,1.65rem);
        font-weight: 400; color: #0e0815; line-height: 1.2;
        margin: 0 0 1rem; letter-spacing: -0.01em;
    }
    .s6m-modal-hr { width: 36px; height: 1.5px; background: var(--dorado,#c9a96e); margin: 0 0 1.2rem; }
    .s6m-modal-desc {
        font-family: 'Montserrat',sans-serif; font-size: 0.86rem;
        color: #4a5568; line-height: 1.7; margin: 0 0 1.3rem;
    }
    .s6m-modal-bens {
        list-style: none; padding: 0; margin: 0 0 1.4rem;
        display: flex; flex-direction: column; gap: 0.5rem;
    }
    .s6m-modal-bens li {
        display: flex; align-items: flex-start; gap: 0.55rem;
        font-family: 'Montserrat',sans-serif; font-size: 0.8rem;
        color: #4a5568; line-height: 1.45;
    }
    .s6m-modal-bens li::before {
        content: ''; display: block; width: 5px; height: 5px;
        border-radius: 50%; background: var(--dorado,#c9a96e);
        margin-top: 5px; flex-shrink: 0;
    }
    .s6m-modal-meta {
        display: flex; margin-bottom: 1.4rem;
        background: #f0ede6; border-radius: 8px; overflow: hidden;
    }
    .s6m-modal-meta-item {
        flex: 1; padding: 11px 13px;
        border-right: 1px solid rgba(201,169,110,0.18);
    }
    .s6m-modal-meta-item:last-child { border-right: none; }
    .s6m-modal-meta-item label {
        display: block; font-family: 'Montserrat',sans-serif;
        font-size: 0.56rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--dorado,#c9a96e); margin-bottom: 3px;
    }
    .s6m-modal-meta-item span { font-family: 'Montserrat',sans-serif; font-size: 0.76rem; color: #0e0815; }
    .s6m-modal-btn {
        display: flex; align-items: center; justify-content: center; gap: 0.5rem;
        padding: 0.78rem; width: 100%;
        background: #0e0815; color: #f5f5f0; border: none; border-radius: 8px;
        font-family: 'Montserrat',sans-serif; font-size: 0.8rem;
        font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
        cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
    }
    .s6m-modal-btn:hover { background: var(--dorado,#c9a96e); color: #0e0815; }
    .s6m-modal-x {
        position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
        border-radius: 50%; background: #c41e3a;
        border: 1px solid rgba(160,45,70,0.8); color: #ffffff;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        font-size: 0.85rem; font-weight: 700; z-index: 10; transition: background 0.2s ease;
    }
    .s6m-modal-x:hover { background: #9b1530; }
    /* CTA */
    .s6m-cta {
        max-width: 1280px; margin: 0 auto;
        padding: clamp(56px,7vw,80px) clamp(32px,6vw,80px);
        display: flex; align-items: center;
        justify-content: space-between; gap: clamp(24px,4vw,48px);
    }
    .s6m-cta-h {
        font-family: 'Marcellus',serif; font-size: clamp(1.4rem,2.4vw,1.9rem);
        font-weight: 400; color: #f5f5f0; margin: 0 0 0.45rem; letter-spacing: -0.01em;
    }
    .s6m-cta-p {
        font-family: 'Montserrat',sans-serif; font-size: 0.84rem;
        color: rgba(245,245,240,0.48); line-height: 1.65; margin: 0;
    }
    .s6m-cta-btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.9rem 2.4rem; flex-shrink: 0;
        background: var(--dorado,#c9a96e); color: #0e0815;
        border: none; border-radius: 7px;
        font-family: 'Montserrat',sans-serif; font-size: 0.82rem;
        font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
        cursor: pointer; transition: background 0.2s ease, transform 0.15s ease;
        box-shadow: 0 4px 24px rgba(201,169,110,0.22);
    }
    .s6m-cta-btn:hover { background: var(--dorado-claro,#e0c896); transform: translateY(-1px); }
    /* Reveal */
    .s6m-reveal { opacity: 0; transform: translateY(16px); }
    .s6m-reveal.visible {
        opacity: 1; transform: translateY(0);
        transition: opacity 600ms cubic-bezier(0.16,1,0.3,1),
                    transform 600ms cubic-bezier(0.16,1,0.3,1);
    }
    @media (prefers-reduced-motion: reduce) { .s6m-reveal { opacity: 1; transform: none; } }
    /* Responsive */
    @media (max-width: 900px) {
        .s6m-header { grid-template-columns: 1fr; gap: 1.5rem 0; }
        .s6m-grid { grid-template-columns: repeat(2,1fr); }
        .s6m-card.s6m-featured { grid-column: span 2; }
        .s6m-cta { flex-direction: column; text-align: center; }
    }
    @media (max-width: 680px) {
        .s6m-modal { grid-template-columns: 1fr; }
        .s6m-modal-photo { min-height: 220px; }
    }
    @media (max-width: 520px) {
        .s6m-grid { grid-template-columns: 1fr; gap: 8px; }
        .s6m-card.s6m-featured { grid-column: span 1; aspect-ratio: 16/9; }
        .s6m-card { aspect-ratio: 4/3; }
    }

    /* === SECCIÓN EQUIPO — NUESTRO EQUIPO (seq-) === */
    .seq-section {
        position: relative;
        padding: 88px 32px 96px;
        background: var(--azul-noche, #0a1628);
        overflow: hidden;
    }
    .seq-section::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(ellipse 80% 55% at 50% 110%, rgba(201,169,110,0.07) 0%, transparent 65%);
        pointer-events: none;
    }
    .seq-inner {
        max-width: 1140px;
        margin: 0 auto;
        position: relative;
    }
    .seq-hdr {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 6px;
    }
    .seq-hdr-rule {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201,169,110,0.45), transparent);
    }
    .seq-eyebrow {
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--dorado, #c9a96e);
        text-align: center;
        flex-shrink: 0;
    }
    .seq-title {
        font-family: 'Marcellus', serif;
        font-size: 2.5rem;
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: var(--texto-principal, #f5f5f0);
        margin: 0;
        text-align: center;
    }
    .seq-subtitle {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.0625rem;
        font-weight: 400;
        color: var(--texto-secundario, #a8a89e);
        text-align: center;
        margin: 10px 0 0;
        line-height: 1.65;
    }
    .seq-intro {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.875rem;
        color: var(--texto-secundario, #a8a89e);
        text-align: center;
        max-width: 600px;
        margin: 14px auto 52px;
        line-height: 1.7;
    }
    .seq-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    @media (max-width: 940px) {
        .seq-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    }
    @media (max-width: 520px) {
        .seq-section { padding: 56px 16px 64px; }
        .seq-grid { grid-template-columns: 1fr; gap: 14px; }
        .seq-title { font-size: 2rem; }
    }
    .seq-card {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 3 / 4;
        cursor: pointer;
        background: var(--azul-profundo, #112847);
        transform: translateY(0);
        transition: transform 400ms cubic-bezier(0.16,1,0.3,1), box-shadow 400ms cubic-bezier(0.16,1,0.3,1);
        box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    }
    .seq-card:hover {
        transform: translateY(-8px) scale(1.015);
        box-shadow: 0 20px 52px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,169,110,0.4);
    }
    .seq-card:focus-visible {
        outline: 2px solid var(--dorado, #c9a96e);
        outline-offset: 2px;
    }
    .seq-card-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 600ms cubic-bezier(0.16,1,0.3,1), filter 400ms ease;
        filter: brightness(0.82) saturate(0.9);
    }
    .seq-card:hover .seq-card-photo {
        transform: scale(1.07);
        filter: brightness(0.72) saturate(1.0);
    }
    .seq-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(10,22,40,0.0) 0%,
            rgba(10,22,40,0.18) 42%,
            rgba(10,22,40,0.88) 74%,
            rgba(10,22,40,0.97) 100%
        );
    }
    .seq-card-badge {
        position: absolute;
        top: 14px;
        right: 14px;
        background: rgba(201,169,110,0.14);
        border: 1px solid rgba(201,169,110,0.38);
        backdrop-filter: blur(10px);
        padding: 4px 11px;
        border-radius: 100px;
        font-family: 'Montserrat', sans-serif;
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--dorado-claro, #e0c896);
    }
    .seq-card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 18px 18px 20px;
    }
    .seq-card-name {
        font-family: 'Marcellus', serif;
        font-size: 1.1875rem;
        font-weight: 400;
        color: var(--texto-principal, #f5f5f0);
        margin: 0 0 3px;
        line-height: 1.2;
    }
    .seq-card-role {
        font-family: 'Montserrat', sans-serif;
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.07em;
        color: var(--dorado, #c9a96e);
        margin: 0 0 13px;
        text-transform: uppercase;
        line-height: 1.4;
    }
    .seq-card-cv {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 400ms cubic-bezier(0.16,1,0.3,1), opacity 300ms ease;
    }
    .seq-card:hover .seq-card-cv {
        max-height: 130px;
        opacity: 1;
    }
    .seq-card-cv-item {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin-bottom: 6px;
    }
    .seq-card-cv-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--dorado, #c9a96e);
        margin-top: 5px;
        flex-shrink: 0;
    }
    .seq-card-cv-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        color: rgba(245,245,240,0.72);
        line-height: 1.5;
    }
    .seq-card-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        margin-top: 13px;
        padding: 9px 16px;
        border-radius: 8px;
        border: 1px solid rgba(201,169,110,0.42);
        background: rgba(201,169,110,0.11);
        font-family: 'Montserrat', sans-serif;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--dorado-claro, #e0c896);
        cursor: pointer;
        transition: background 200ms ease, border-color 200ms ease, transform 150ms ease;
        backdrop-filter: blur(6px);
    }
    .seq-card-btn:hover {
        background: rgba(201,169,110,0.22);
        border-color: rgba(201,169,110,0.68);
        transform: scale(1.02);
    }
    .seq-card-btn:active {
        transform: scale(0.98);
    }
    .seq-reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1);
    }
    .seq-reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
        .seq-reveal { opacity: 1; transform: none; transition: none; }
        .seq-card { transition: none; }
        .seq-card-photo { transition: none; }
        .seq-card-cv { max-height: 130px; opacity: 1; }
    }
    @media (max-width: 520px) {
        .seq-card-cv { max-height: 130px; opacity: 1; }
    }

    /* === MODAL ESPECIALISTA (seq-m-) === */
    .seq-moverlay {
        position: fixed;
        inset: 0;
        z-index: 9900;
        background: rgba(10,22,40,0.88);
        backdrop-filter: blur(14px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 260ms ease;
    }
    .seq-moverlay.active {
        opacity: 1;
        pointer-events: all;
    }
    .seq-mbox {
        position: relative;
        background: var(--azul-profundo, #112847);
        border-radius: 20px;
        width: 100%;
        max-width: 800px;
        max-height: 92vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,169,110,0.22);
        transform: scale(0.94) translateY(12px);
        transition: transform 400ms cubic-bezier(0.16,1,0.3,1);
    }
    .seq-moverlay.active .seq-mbox {
        transform: scale(1) translateY(0);
    }
    @media (min-width: 640px) {
        .seq-mbox { flex-direction: row; max-height: 86vh; }
    }
    .seq-m-hero {
        position: relative;
        width: 100%;
        height: 240px;
        flex-shrink: 0;
        overflow: hidden;
    }
    @media (min-width: 640px) {
        .seq-m-hero { width: 280px; height: auto; }
    }
    .seq-m-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.82) saturate(0.9);
    }
    .seq-m-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10,22,40,0.88) 0%, rgba(10,22,40,0.15) 55%, transparent 100%);
    }
    @media (min-width: 640px) {
        .seq-m-hero-overlay {
            background: linear-gradient(to right, transparent 55%, rgba(10,22,40,0.7) 100%);
        }
    }
    .seq-m-hero-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: rgba(201,169,110,0.16);
        border: 1px solid rgba(201,169,110,0.4);
        backdrop-filter: blur(10px);
        padding: 4px 12px;
        border-radius: 100px;
        font-family: 'Montserrat', sans-serif;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--dorado-claro, #e0c896);
    }
    .seq-m-body {
        flex: 1;
        overflow-y: auto;
        padding: 28px 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: var(--azul-profundo, #112847);
        scrollbar-width: thin;
        scrollbar-color: rgba(201,169,110,0.3) transparent;
    }
    .seq-m-name {
        font-family: 'Marcellus', serif;
        font-size: 1.625rem;
        font-weight: 400;
        color: var(--texto-principal, #f5f5f0);
        margin: 0;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }
    .seq-m-role {
        font-family: 'Montserrat', sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.17em;
        text-transform: uppercase;
        color: var(--dorado, #c9a96e);
        margin: 5px 0 0;
    }
    .seq-m-divider {
        width: 40px;
        height: 1px;
        background: rgba(201,169,110,0.4);
        flex-shrink: 0;
    }
    .seq-m-desc {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.875rem;
        color: rgba(245,245,240,0.78);
        line-height: 1.7;
        margin: 0;
    }
    .seq-m-cv-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--dorado, #c9a96e);
        margin: 0 0 10px;
    }
    .seq-m-cv-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .seq-m-cv-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .seq-m-cv-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--dorado, #c9a96e);
        margin-top: 6px;
        flex-shrink: 0;
    }
    .seq-m-cv-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.8125rem;
        color: rgba(245,245,240,0.73);
        line-height: 1.55;
    }
    .seq-m-cta-row {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .seq-m-cta-alt {
        background: transparent !important;
        color: #c9a96e !important;
        border: 1.5px solid rgba(201,169,110,0.55) !important;
    }
    .seq-m-cta-alt:hover {
        background: rgba(201,169,110,0.12) !important;
        border-color: #c9a96e !important;
        color: #e0c896 !important;
    }
    .seq-m-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1 1 50%;
        padding: 12px 16px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(135deg, #c9a96e, #e0c896);
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #0a1628;
        cursor: pointer;
        transition: opacity 200ms ease, transform 150ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease;
        box-shadow: 0 4px 18px rgba(201,169,110,0.35);
        margin-top: auto;
        flex-shrink: 0;
    }
    .seq-m-cta:hover {
        opacity: 0.91;
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 8px 28px rgba(201,169,110,0.52);
    }
    .seq-m-cta:active { transform: scale(0.98); }
    .seq-m-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 20;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(160,45,70,0.8);
        background: #c41e3a;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 200ms ease, border-color 200ms ease;
    }
    .seq-m-close:hover {
        background: #9b1530;
        border-color: rgba(160,45,70,1);
    }
    @media (max-width: 520px) {
        .seq-m-body { padding: 20px 18px 20px; }
        .seq-m-name { font-size: 1.375rem; }
        .seq-m-cta { font-size: 9px; padding: 12px 18px; }
    }

.sep-s78{padding:35px 0;background:#0a1628;display:flex;align-items:center;justify-content:center;}
@media(max-width:768px){
    .sep-s78{padding:17px 0;}                                    /* 50% menos alto vertical en mobile */
    .sep-s78-symbol{width:42px !important;height:42px !important;margin:0 18px !important;}
    .sep-s78-a{font-size:1.05rem !important;}
    .sep-s78-symbol::before{inset:5px !important;}
}
.sep-s78-inner{display:flex;align-items:center;width:min(72%,860px);opacity:0;transform:translateY(14px);transition:opacity 700ms cubic-bezier(0.16,1,0.3,1),transform 700ms cubic-bezier(0.16,1,0.3,1);}
.sep-s78-inner.sep-visible{opacity:1;transform:translateY(0);}
.sep-s78-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,0.28) 40%,rgba(201,169,110,0.52) 100%);}
.sep-s78-line.sep-right{background:linear-gradient(270deg,transparent,rgba(201,169,110,0.28) 40%,rgba(201,169,110,0.52) 100%);}
.sep-s78-symbol{flex-shrink:0;margin:0 28px;width:54px;height:54px;border-radius:50%;border:1px solid rgba(201,169,110,0.32);display:flex;align-items:center;justify-content:center;background:rgba(201,169,110,0.05);position:relative;}
.sep-s78-symbol::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(201,169,110,0.14);}
.sep-s78-a{font-family:"Marcellus",serif;font-size:1.375rem;font-weight:400;color:#c9a96e;letter-spacing:-0.01em;line-height:1;position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){.sep-s78-inner{opacity:1!important;transform:none!important;transition:none!important;}}

/* ─── SEC 8 BASE ─────────────────────────────────────────────────── */
.s8-lbl{font-family:'Montserrat',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c9a96e;display:block;margin-bottom:10px;}
.s8-h{font-family:'Marcellus',serif;font-weight:400;letter-spacing:-.015em;line-height:1.15;}
.s8-p{font-family:'Montserrat',sans-serif;line-height:1.65;}
.s8-wrap{max-width:1340px;margin:0 auto;padding:0 24px;}
@media(max-width:640px){.s8-wrap{padding:0 16px;}}

/* ─── SUB-SECCIÓN 8A — 3 COLUMNAS ───────────────────────────────── */
.s8a{background:#f5f0e8;padding:72px 0;}
@media(max-width:640px){.s8a{padding:48px 0;}}
.s8a-cols{display:grid;grid-template-columns:1fr 1.8fr 1fr;gap:20px;align-items:stretch;}
@media(max-width:1000px){.s8a-cols{grid-template-columns:1fr 1fr;gap:16px;}}
@media(max-width:640px){
    .s8a-cols{
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    /* VALERIA (DOM col 2) ocupa row 1 full-width */
    .s8a-cols > .s8-card-navy {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }
    /* FAQ (DOM col 1) → row 2 col 1 */
    .s8a-cols > #s8-faq-trigger {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    /* TESTIMONIOS (DOM col 3) → row 2 col 2 */
    .s8a-cols > .s8rv2 {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    /* Compactar FAQ y Testimonios para encajar en 2 cols */
    #s8-faq-trigger, .s8a-cols > .s8rv2 { padding: 16px 14px !important; }
    .s8-faq-icon { width: 38px !important; height: 38px !important; }
    .s8-faq-icon svg { width: 18px !important; height: 18px !important; }
    .s8-faq-badge { font-size: .48rem !important; padding: 3px 8px !important; }
    .s8-faq-title { font-size: 1rem !important; line-height: 1.15 !important; }
    .s8-faq-sub { font-size: .65rem !important; line-height: 1.4 !important; }
    .s8-faq-cta { padding: 10px 12px !important; font-size: .55rem !important; letter-spacing: .07em !important; gap: 5px !important; }
    .s8-faq-cta svg { width: 12px !important; height: 12px !important; }
    .s8-tst-title { font-size: 1rem !important; line-height: 1.15 !important; }
    .s8-tst-meta { font-size: .55rem !important; }
}
/* ── Valeria — Mobile (<640px): tarjeta crece al contenido sin altura excesiva ── */
@media(max-width:640px){
  .s8-card-navy{padding:20px 16px; min-height: 0 !important; height: auto !important;}
  /* Panel relativo en mobile: contenido empuja la tarjeta a su tamaño natural */
  .s8v-wrap{min-height:auto !important; overflow:visible !important; flex: 0 0 auto !important;}
  .s8v-panel.s8v-vis{position:relative !important; inset:auto !important;}
  .s8v-panel.s8v-hid{display:none !important;}   /* chat oculto cuando no activo */
  /* Pills WA/TG/IG: una sola fila apretada, anchos compactos */
  .s8-val-pills{flex-wrap:nowrap !important;gap:6px !important;justify-content:space-between !important;width:100%;}
  .s8-val-pill{
      padding:6px 4px !important;
      font-size:.46rem !important;
      gap:3px !important;
      flex:1 1 0 !important;
      min-width:0 !important;
      justify-content:center !important;
      white-space:nowrap !important;
      letter-spacing:0.04em !important;
      font-weight:700 !important;
  }
  .s8-val-pill svg{width:9px !important;height:9px !important;flex-shrink:0;}
  /* Acciones: ambos botones visibles en mobile, mismo ancho relativo */
  .s8-val-actions{gap:6px;}
  .s8-val-cta{padding:11px 10px;font-size:.595rem;letter-spacing:.07em;gap:6px;}
  .s8-val-cta svg{width:13px;height:13px;}
  .s8-val-call{padding:11px 12px;font-size:.595rem;letter-spacing:.06em;gap:5px;}
  .s8-val-call svg{width:13px;height:13px;}
}

/* Card flotante */
.s8-card{
  background:rgba(255,255,255,0.72);border-radius:22px;padding:26px 24px;
  border:1px solid rgba(201,169,110,0.12);
  box-shadow:0 2px 12px rgba(10,22,40,0.05),0 6px 28px rgba(10,22,40,0.04);
  display:flex;flex-direction:column;gap:12px;height:100%;
  transition:box-shadow 320ms cubic-bezier(.16,1,.3,1),transform 320ms cubic-bezier(.16,1,.3,1);
}
.s8-card:hover{box-shadow:0 8px 40px rgba(10,22,40,0.09),0 2px 8px rgba(10,22,40,0.05);transform:translateY(-3px);}

/* ── VARIANTE NAVY — VALERIA ── */
.s8-card-navy{background:#0a1628;border-color:rgba(201,169,110,.18);box-shadow:0 4px 20px rgba(10,22,40,.22),0 8px 32px rgba(10,22,40,.16);}
.s8-card-navy:hover{box-shadow:0 10px 44px rgba(10,22,40,.32),0 4px 12px rgba(10,22,40,.2);transform:translateY(-3px);}
.s8-card-navy .s8-val-name{color:#f5f5f0;}
.s8-card-navy .s8-val-role{color:rgba(201,169,110,.7);}
.s8-card-navy .s8-val-badge{color:#c9a96e;background:rgba(201,169,110,.09);border-color:rgba(201,169,110,.22);}
.s8-card-navy .s8-val-dot{background:#c9a96e;}
.s8-card-navy .s8-val-desc{color:rgba(245,245,240,.62);}
.s8-card-navy .s8-val-avatar{background:linear-gradient(140deg,#c9a96e,#a08749);border-color:rgba(201,169,110,.55);box-shadow:0 0 0 4px rgba(201,169,110,.12);}
.s8-card-navy .s8-val-letter{color:#0a1628;}
.s8-card-navy .s8vp-wa{color:#25D366;border-color:rgba(37,211,102,.35);background:rgba(37,211,102,.07);}
.s8-card-navy .s8vp-wa:hover{background:rgba(37,211,102,.14);}
.s8-card-navy .s8vp-tg{color:#3da9d8;border-color:rgba(61,169,216,.35);background:rgba(61,169,216,.07);}
.s8-card-navy .s8vp-tg:hover{background:rgba(61,169,216,.14);}
.s8-card-navy .s8vp-ig{color:#e1306c;border-color:rgba(225,48,108,.35);background:rgba(225,48,108,.07);}
.s8-card-navy .s8vp-ig:hover{background:rgba(225,48,108,.14);}
.s8-card-navy .s8vp-msg{color:#3b8bfc;border-color:rgba(59,139,252,.35);background:rgba(59,139,252,.07);}
.s8-card-navy .s8vp-msg:hover{background:rgba(59,139,252,.14);}

/* ── VALERIA ESTADOS CHAT ── */
.s8v-wrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:290px;overflow:hidden;}
.s8v-panel{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  transition:opacity 320ms cubic-bezier(.16,1,.3,1),transform 320ms cubic-bezier(.16,1,.3,1);}
.s8v-vis{opacity:1;pointer-events:all;transform:none;}
.s8v-hid{opacity:0;pointer-events:none;transform:translateY(10px);}
/* Header chat */
.s8vc-head{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid rgba(201,169,110,.14);flex-shrink:0;}
.s8vc-back{width:30px;height:30px;border-radius:50%;border:1px solid rgba(160,45,70,0.8);background:#c41e3a;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#ffffff;flex-shrink:0;transition:background 200ms ease,border-color 200ms ease;}
.s8vc-back:hover{background:#9b1530;border-color:rgba(160,45,70,1);}
.s8vc-back:hover{background:rgba(201,169,110,.1);}
.s8vc-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#c9a96e,#a08749);border:1.5px solid rgba(201,169,110,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.s8vc-avletter{font-family:'Marcellus',serif;font-size:.844rem;color:#0a1628;line-height:1;}
.s8vc-name{font-family:'Marcellus',serif;font-size:.844rem;color:#f5f5f0;line-height:1.2;}
.s8vc-status{display:flex;align-items:center;gap:5px;font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:600;letter-spacing:.05em;color:rgba(245,245,240,.5);margin-top:2px;}
.s8vc-sdot{width:5px;height:5px;border-radius:50%;background:#5b8e5a;flex-shrink:0;}
/* Mensajes */
.s8vc-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:8px 0;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(201,169,110,.2) transparent;}
.s8vc-msgs::-webkit-scrollbar{width:3px;}
.s8vc-msgs::-webkit-scrollbar-thumb{background:rgba(201,169,110,.2);border-radius:3px;}
.s8vc-msg{max-width:88%;padding:8px 12px;font-family:'Montserrat',sans-serif;font-size:.675rem;line-height:1.6;}
.s8vc-bot{background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.14);color:rgba(245,245,240,.82);border-radius:12px 12px 12px 3px;align-self:flex-start;}
.s8vc-agendar-wrap{background:transparent !important;border:none !important;padding:0 !important;max-width:100%;}
.s8vc-agendar-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:100px;border:none;cursor:pointer;background:linear-gradient(135deg,#c9a96e,#d4b87e);color:#0a1628;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.02em;box-shadow:0 3px 10px rgba(201,169,110,.32);transition:filter 200ms ease,transform 200ms ease;}
.s8vc-agendar-btn:hover{filter:brightness(1.06);transform:translateY(-1px) scale(1.02);}
.s8vc-user{background:linear-gradient(135deg,#c9a96e,#d4b87e);color:#0a1628;font-weight:500;border-radius:12px 12px 3px 12px;align-self:flex-end;}
/* Canales disponibles en estado chat */
.s8vc-channels{display:flex;flex-direction:column;gap:5px;padding-bottom:9px;border-bottom:1px solid rgba(201,169,110,.1);flex-shrink:0;}
.s8vc-ch-lbl{font-family:'Montserrat',sans-serif;font-size:.518rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,240,.32);}
.s8vc-ch-pills{display:flex;flex-wrap:wrap;gap:5px;}
.s8vc-ch-pills .s8-val-pill{padding:4px 9px;font-size:.558rem;gap:5px;cursor:pointer;}
/* Input */
.s8vc-inp-wrap{display:flex;gap:8px;align-items:center;padding-top:10px;border-top:1px solid rgba(201,169,110,.14);flex-shrink:0;}
.s8vc-inp{flex:1;background:rgba(201,169,110,.07);border:1px solid rgba(201,169,110,.18);border-radius:9px;padding:8px 12px;font-family:'Montserrat',sans-serif;font-size:.675rem;color:rgba(245,245,240,.82);outline:none;transition:border-color 200ms ease,box-shadow 200ms ease;}
.s8vc-inp::placeholder{color:rgba(245,245,240,.3);}
.s8vc-inp:focus{border-color:rgba(201,169,110,.45);box-shadow:0 0 0 3px rgba(201,169,110,.12);}
.s8vc-inp:disabled{color:rgba(245,245,240,.3);cursor:not-allowed;}
.s8vc-send{width:33px;height:33px;border-radius:50%;background:linear-gradient(135deg,#c9a96e,#d4b87e);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0a1628;transition:filter 200ms ease,transform 200ms ease;}
.s8vc-send:hover{filter:brightness(1.08);transform:scale(1.05);}
.s8vc-send:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none;}
/* Animación de entrada de mensajes */
.s8vc-msg-new{animation:s8MsgIn 280ms cubic-bezier(.16,1,.3,1) both;}
@keyframes s8MsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Indicador de escritura */
.s8vc-typing{display:flex;gap:4px;align-items:center;padding:10px 14px;}
.s8vc-tdot{width:5px;height:5px;border-radius:50%;background:rgba(201,169,110,.55);animation:s8TDot 1.2s ease-in-out infinite;}
.s8vc-tdot:nth-child(2){animation-delay:.2s;}
.s8vc-tdot:nth-child(3){animation-delay:.4s;}
@keyframes s8TDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ── COLUMNA 1: FAQ ── */
.s8-faq-icon{width:52px;height:52px;border-radius:50%;background:rgba(201,169,110,0.1);border:1px solid rgba(201,169,110,0.25);display:flex;align-items:center;justify-content:center;}
.s8-faq-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:100px;background:rgba(201,169,110,0.1);border:1px solid rgba(201,169,110,0.22);font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a08749;}
.s8-faq-title{font-family:'Marcellus',serif;font-size:1.46rem;color:#0a1628;font-weight:400;line-height:1.2;}
.s8-faq-sub{font-family:'Montserrat',sans-serif;font-size:.79rem;color:#6b5a42;line-height:1.65;}
.s8-faq-cta{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding:13px 22px;border-radius:11px;background:linear-gradient(135deg,#c9a96e,#d4b87e);color:#0a1628;font-family:'Montserrat',sans-serif;font-size:.675rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border:none;cursor:pointer;transition:filter 220ms ease,transform 200ms ease;box-shadow:0 3px 16px rgba(201,169,110,.22);}
.s8-faq-cta:hover{filter:brightness(1.08);transform:translateY(-2px);}
.s8-faq-cta:active{transform:scale(.97);}

/* ── COLUMNA 2: VALERIA ── */
.s8-val-top{display:flex;align-items:center;gap:14px;}
.s8-val-avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,#1a3661,#0a1628);border:1.5px solid rgba(201,169,110,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px rgba(201,169,110,.08);}
.s8-val-letter{font-family:'Marcellus',serif;font-size:1.35rem;color:#c9a96e;line-height:1;margin-top:2px;}
.s8-val-name{font-family:'Marcellus',serif;font-size:1.01rem;color:#0a1628;}
.s8-val-role{font-family:'Montserrat',sans-serif;font-size:.61rem;color:#a08749;font-weight:500;letter-spacing:.05em;margin-top:3px;}
.s8-val-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.22);font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a08749;width:fit-content;}
.s8-val-dot{width:5px;height:5px;border-radius:50%;background:#c9a96e;animation:s8Pulse 2s ease-in-out infinite;}
@keyframes s8Pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.65)}}
.s8-val-desc{font-family:'Montserrat',sans-serif;font-size:.731rem;line-height:1.72;color:#5a4a38;}
.s8-val-pills{display:flex;flex-wrap:wrap;gap:7px;}
.s8-val-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;font-family:'Montserrat',sans-serif;font-size:.61rem;font-weight:600;border:1px solid;transition:all 200ms cubic-bezier(0.16,1,0.3,1);cursor:pointer;text-decoration:none;}
a.s8-val-pill:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 6px 14px rgba(0,0,0,0.10);}
.s8vp-wa{color:#1a9e4a;border-color:rgba(26,158,74,.28);background:rgba(26,158,74,.05);}
.s8vp-wa:hover{background:rgba(26,158,74,.14);border-color:rgba(26,158,74,.55);}
.s8vp-tg{color:#1a7aad;border-color:rgba(26,122,173,.28);background:rgba(26,122,173,.05);}
.s8vp-tg:hover{background:rgba(26,122,173,.14);border-color:rgba(26,122,173,.55);}
.s8vp-ig{color:#c0254e;border-color:rgba(192,37,78,.28);background:rgba(192,37,78,.05);}
.s8vp-ig:hover{background:rgba(192,37,78,.14);border-color:rgba(192,37,78,.55);}
.s8vp-msg{color:#1a6fd0;border-color:rgba(26,111,208,.28);background:rgba(26,111,208,.05);}
.s8vp-msg:hover{background:rgba(26,111,208,.14);border-color:rgba(26,111,208,.55);}
.s8-val-actions{display:flex;align-items:stretch;gap:8px;width:100%;margin-top:auto;}
.s8-val-cta{display:flex;align-items:center;justify-content:center;gap:9px;flex:1 1 auto;padding:13px;border-radius:11px;background:linear-gradient(135deg,#c9a96e,#d4b87e);color:#0a1628;font-family:'Montserrat',sans-serif;font-size:.675rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;text-decoration:none;transition:filter 220ms ease,transform 200ms ease;box-shadow:0 3px 16px rgba(201,169,110,.22);}
.s8-val-cta:hover{filter:brightness(1.08);transform:translateY(-2px);}
.s8-val-cta:active{transform:scale(.97);}
.s8-val-call{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;padding:13px 16px;border-radius:11px;background:#c9a96e;color:#0a1628;font-family:'Montserrat',sans-serif;font-size:.675rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;text-decoration:none;transition:background 200ms ease,border-color 200ms ease,color 200ms ease,transform 200ms ease;}
.s8-val-call:hover{background:#c0392b;color:#fff;transform:translateY(-2px);}
.s8-val-call:active{transform:scale(.97);}
.s8-card-navy .s8-val-call{background:#c9a96e;color:#0a1628;border:none;}
.s8-card-navy .s8-val-call:hover{background:#c0392b;color:#fff;}
.s8-val-call.bsc-calling,.s8-card-navy .s8-val-call.bsc-calling{background:#b54848!important;color:#fff!important;}
.s8-val-call.bsc-calling .bsc-phone-icon{animation:bsc-ring 1s ease-in-out infinite;}

/* ── COLUMNA 3: TESTIMONIOS ── */
.s8-tst-hd{margin-bottom:4px;}
.s8-tst-title{font-family:'Marcellus',serif;font-size:1.24rem;color:#0a1628;font-weight:400;line-height:1.2;margin-bottom:4px;}
.s8-tst-meta{font-family:'Montserrat',sans-serif;font-size:.653rem;color:#8a7a6a;}
.s8-tst-body{flex:1;display:flex;flex-direction:column;gap:12px;}
.s8-tst-qmark{font-size:2.25rem;line-height:1;color:rgba(201,169,110,.28);font-family:Georgia,serif;user-select:none;display:block;margin-bottom:-6px;}
.s8-tst-text{font-family:'Montserrat',sans-serif;font-size:.731rem;line-height:1.75;color:#5a4a38;font-style:italic;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.s8-tst-stars{display:flex;gap:2px;}
.s8-tst-star{color:#c9a96e;font-size:.72rem;}
.s8-tst-author{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid rgba(10,22,40,.07);}
.s8-tst-av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(201,169,110,.28);flex-shrink:0;}
.s8-tst-name{font-family:'Montserrat',sans-serif;font-size:.731rem;font-weight:600;color:#1e2d3d;line-height:1.3;}
.s8-tst-city{font-family:'Montserrat',sans-serif;font-size:.63rem;color:#a08749;margin-top:1px;}
.s8-tst-dots-wrap{display:flex;justify-content:center;gap:7px;margin-top:14px;}
.s8-tst-dot{width:6px;height:6px;border-radius:50%;background:rgba(10,22,40,.18);border:none;padding:0;cursor:pointer;transition:all 280ms ease;}
.s8-tst-dot.s8td{background:#c9a96e;width:18px;border-radius:3px;}

/* ─── SUB-SECCIÓN 8B — GIFT CARD BANNER ────────────────────────── */
.s8b{background:#f5f0e8;padding:36px 0;}
@media(max-width:640px){.s8b{padding:28px 0;}}
.s8b-inner{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;}
@media(max-width:860px) and (min-width:641px){.s8b-inner{grid-template-columns:1fr;gap:24px;}}
@media(max-width:640px){
    /* MOBILE: gift card IZQUIERDA + texto DERECHA en 2 columnas */
    .s8b-inner{grid-template-columns:auto 1fr !important;gap:14px !important;align-items:center !important;}
    .s8b-visual{flex-direction:column !important;align-items:center !important;gap:10px !important;}
    /* Reducir el tamaño de la tarjeta gift card para encajar a la izquierda */
    .s8-gcard{width:130px !important;height:82px !important;padding:12px !important;border-radius:11px !important;}
    .s8-gcard::before{width:90px !important;height:90px !important;top:-30px !important;right:-20px !important;}
    .s8-gclogo{font-size:.6rem !important;letter-spacing:.06em !important;}
    .s8-gcdiv{width:18px !important;margin:4px 0 !important;}
    .s8-gclbl{font-size:.35rem !important;letter-spacing:.14em !important;}
    .s8-gctitle{font-size:.74rem !important;margin-top:2px !important;}
    .s8-gcbot{bottom:10px !important;left:12px !important;right:12px !important;}
    .s8-gcamt-lbl{font-size:.35rem !important;}
    .s8-gcamt{font-size:.72rem !important;}
    .s8b-cta{padding:8px 12px !important;font-size:.55rem !important;letter-spacing:.08em !important;gap:5px !important;border-radius:7px !important;}
    .s8b-cta svg{width:11px !important;height:11px !important;}
    /* Texto del lado derecho compacto */
    .s8b-text{padding-left:0 !important;}
    .s8b-text .s8-lbl{font-size:.46rem !important;letter-spacing:.16em !important;margin-bottom:3px !important;}
    .s8b-text .s8-h{font-size:1.05rem !important;margin-bottom:6px !important;line-height:1.15 !important;}
    .s8b-text .s8-p{font-size:.66rem !important;line-height:1.4 !important;margin-bottom:8px !important;}
    .s8b-feats{gap:3px !important;}
    .s8b-feat{font-size:.56rem !important;gap:6px !important;}
    .s8b-dot{width:3px !important;height:3px !important;}
}
/* ── Nitidez + claridad estilo FB (SIN agrandar) — FAQ · Testimonios · Gift Card ── */
@media (max-width: 768px) {
    .s8a, .s8a *, .s8b, .s8b * {
        -webkit-font-smoothing: antialiased !important;
        text-rendering: optimizeLegibility !important;
    }
    /* Subir contraste de textos apagados (sobre fondo claro) */
    .s8-faq-sub { color: #4a3d2c !important; }
    .s8-tst-meta { color: #6a5c4a !important; }
    .s8-tst-text { color: #463829 !important; }
    .s8b-text .s8-p { color: #463829 !important; }
}
.s8b-visual{display:flex;flex-direction:column;align-items:center;gap:18px;}
.s8-gcard{
  width:min(240px,100%);aspect-ratio:1.586;
  background:linear-gradient(140deg,#0a1628,#112847 45%,#1a3661);
  border-radius:16px;padding:18px 20px;position:relative;overflow:hidden;
  box-shadow:0 14px 36px rgba(10,22,40,.38),0 36px 72px rgba(10,22,40,.28),0 0 0 1px rgba(201,169,110,.28);
  transform:rotate(-2.5deg);transition:transform 440ms cubic-bezier(.16,1,.3,1),box-shadow 440ms ease;
  flex-shrink:0;
}
.s8-gcard:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 20px 56px rgba(10,22,40,.42),0 48px 88px rgba(10,22,40,.3),0 0 0 1px rgba(201,169,110,.42);}
.s8-gcard::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.13) 0%,transparent 60%);top:-60px;right:-40px;}
.s8-gcz{position:relative;z-index:1;}
.s8-gclogo{font-family:'Marcellus',serif;font-size:.79rem;color:#c9a96e;letter-spacing:.07em;}
.s8-gcdiv{width:24px;height:1px;background:rgba(201,169,110,.32);margin:7px 0;}
.s8-gclbl{font-family:'Montserrat',sans-serif;font-size:.432rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,169,110,.5);}
.s8-gctitle{font-family:'Marcellus',serif;font-size:.99rem;color:#f5f5f0;margin-top:3px;}
.s8-gcbot{position:absolute;bottom:16px;left:20px;right:20px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;}
.s8-gcamt-lbl{font-family:'Montserrat',sans-serif;font-size:.432rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(201,169,110,.48);}
.s8-gcamt{font-family:'Marcellus',serif;font-size:.855rem;color:#e0c896;}
.s8-gcorn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(201,169,110,.22);display:flex;align-items:center;justify-content:center;}
.s8-gcorn-in{width:19px;height:19px;border-radius:50%;background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.28);}
.s8b-text .s8-lbl{margin-bottom:6px!important;}
.s8b-text .s8-h{font-size:1.8rem;color:#0a1628;margin-top:0!important;margin-bottom:12px!important;}
@media(max-width:640px){.s8b-text .s8-h{font-size:1.46rem;}}
.s8b-text .s8-p{color:#5a4a38;margin-top:0!important;margin-bottom:16px!important;font-size:.844rem;line-height:1.4!important;}
.s8b-feats{margin-top:0!important;display:flex;flex-direction:column;gap:6px;}
.s8b-feat{display:flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-size:.79rem;color:#3d3220;line-height:1.3;}
.s8b-dot{width:4px;height:4px;border-radius:50%;background:#c9a96e;flex-shrink:0;}
.s8b-cta{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:11px;background:#0a1628;border:1px solid #0a1628;color:#e8d5a8;font-family:'Montserrat',sans-serif;font-size:.731rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background 220ms ease,border-color 220ms ease,transform 200ms ease,box-shadow 220ms ease;}
.s8b-cta:hover{background:#112847;border-color:#112847;transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,22,40,.28);}

/* ─── FAQ MODAL ─────────────────────────────────────────────────── */
.s8-modal-ov{position:fixed;inset:0;z-index:9800;background:rgba(10,22,40,.88);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 300ms ease;}
.s8-modal-ov.s8m-open{opacity:1;pointer-events:all;}
.s8-modal-box{background:#faf7f2;border-radius:20px;width:100%;max-width:760px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(201,169,110,.18);transform:scale(.94) translateY(12px);transition:transform 380ms cubic-bezier(.16,1,.3,1);}
.s8-modal-ov.s8m-open .s8-modal-box{transform:scale(1) translateY(0);}
.s8-modal-head{padding:24px 32px 16px;border-bottom:1px solid rgba(10,22,40,.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.s8-modal-title{font-family:'Marcellus',serif;font-size:1.35rem;color:#0a1628;font-weight:400;}
.s8-modal-sub{font-family:'Montserrat',sans-serif;font-size:.72rem;color:#6b5a42;margin-top:3px;}
.s8-modal-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(160,45,70,0.8);background:#c41e3a;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:700;transition:background 200ms ease;flex-shrink:0;}
.s8-modal-close:hover{background:#9b1530;}
.s8-modal-body{overflow-y:auto;padding:4px 32px 26px;flex:1;scrollbar-width:thin;scrollbar-color:rgba(201,169,110,.32) transparent;}
.s8-modal-body::-webkit-scrollbar{width:4px;}
.s8-modal-body::-webkit-scrollbar-thumb{background:rgba(201,169,110,.32);border-radius:4px;}
.s8m-item{border-bottom:1px solid rgba(10,22,40,.08);overflow:hidden;}
.s8m-item:first-child{border-top:1px solid rgba(10,22,40,.08);}
.s8m-btn{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;text-align:left;}
.s8m-btn:focus-visible{outline:2px solid #c9a96e;outline-offset:2px;border-radius:3px;}
.s8m-q{font-family:'Montserrat',sans-serif;font-size:.844rem;font-weight:500;color:#1e2d3d;line-height:1.45;transition:color 200ms ease;}
.s8m-item.open .s8m-q{color:#0a1628;font-weight:600;}
.s8m-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(201,169,110,.36);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 200ms ease,border-color 200ms ease;}
.s8m-item.open .s8m-icon{background:#c9a96e;border-color:#c9a96e;}
.s8m-chev{width:10px;height:10px;stroke:#c9a96e;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 200ms ease,transform 300ms cubic-bezier(.16,1,.3,1);}
.s8m-item.open .s8m-chev{stroke:#0a1628;transform:rotate(180deg);}
.s8m-body{max-height:0;overflow:hidden;transition:max-height 380ms cubic-bezier(.16,1,.3,1);}
.s8m-item.open .s8m-body{max-height:200px;}
.s8m-a{font-family:'Montserrat',sans-serif;font-size:.79rem;line-height:1.75;color:#5a4a38;padding:0 0 16px;display:block;}

/* ─── SCROLL REVEAL ─────────────────────────────────────────────── */
.s8-rv{opacity:0;transform:translateY(20px);transition:opacity 580ms cubic-bezier(.16,1,.3,1),transform 580ms cubic-bezier(.16,1,.3,1);}
.s8-rv.s8-on{opacity:1;transform:none;}
.s8rv1{transition-delay:90ms;}.s8rv2{transition-delay:180ms;}.s8rv3{transition-delay:270ms;}
@media(prefers-reduced-motion:reduce){
  .s8-rv{opacity:1!important;transform:none!important;transition:none!important;}
  .s8-modal-box{transition:none!important;}
  .s8m-body{transition:none!important;}
  .s8-card{transition:none!important;}
  .s8v-panel{transition:none!important;}
  .s8vc-msg-new{animation:none!important;}
  .s8vc-tdot{animation:none!important;opacity:.5;}
  .s8-val-dot{animation:none!important;}
}

/* ─── GIFT CARD MODAL ────────────────────────────────────────── */
.gc-ov{position:fixed;inset:0;z-index:9900;background:rgba(10,22,40,.88);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 300ms ease;}
.gc-ov.gc-open{opacity:1;pointer-events:auto;}
.gc-box{background:#f5f0e8;border-radius:20px;max-width:480px;width:100%;padding:32px;position:relative;transform:scale(0.95);transition:transform 400ms cubic-bezier(0.16,1,0.3,1);box-shadow:0 24px 64px rgba(10,22,40,.4);}
.gc-ov.gc-open .gc-box{transform:scale(1);}
.gc-x{position:absolute;top:14px;right:16px;background:#c41e3a;border:1px solid rgba(160,45,70,0.8);cursor:pointer;color:#ffffff;font-size:14px;line-height:1;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;font-weight:700;transition:background 0.15s ease-out;}
.gc-x:hover{background:#9b1530;}
.gc-badge{display:inline-block;font-family:'Montserrat',sans-serif;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c9a96e;border:1px solid rgba(201,169,110,.4);border-radius:99px;padding:3px 10px;margin-bottom:12px;}
.gc-title{font-family:'Marcellus',serif;font-size:1.5rem;color:#0a1628;margin:0 0 10px;}
.gc-desc{font-family:'Montserrat',sans-serif;font-size:.844rem;color:#5a4a38;line-height:1.65;margin:0 0 18px;}
.gc-info{background:#fff8f0;border:1px solid rgba(201,169,110,.3);border-radius:12px;padding:16px;margin-bottom:18px;}
.gc-info-lbl{font-family:'Montserrat',sans-serif;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a08749;margin-bottom:6px;}
.gc-info-txt{font-family:'Montserrat',sans-serif;font-size:.8125rem;color:#5a4a38;line-height:1.5;}
.gc-feats{display:flex;flex-direction:column;gap:7px;margin-bottom:24px;}
.gc-feat{display:flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-size:.8125rem;color:#3d3220;}
.gc-dot{width:5px;height:5px;border-radius:50%;background:#c9a96e;flex-shrink:0;}
.gc-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:12px;background:#25d366;border:none;color:#fff;font-family:'Montserrat',sans-serif;font-size:.875rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:background 200ms ease,transform 200ms ease;}
.gc-wa:hover{background:#1ebe5d;transform:translateY(-1px);}

/* ─── FOOTER PRINCIPAL ────────────────────────────────────────── */
#site-footer { background: #0a1628; border-top: 1px solid rgba(201,169,110,0.16); }
.ft-wrap { max-width: 1340px; margin: 0 auto; padding: 0 40px; }
@media(max-width:640px){ .ft-wrap { padding: 0 20px; } }

/* Zona superior 3 columnas */
.ft-top { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr; gap: 40px 32px; padding: 64px 0 48px; }
@media(max-width:900px){ .ft-top { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding: 48px 0 36px; } }
/* Mobile: Marca full-width arriba, Nav 40% + Presencia 60% en la fila inferior — ULTRA COMPACTO */
@media(max-width:600px){
    .ft-top { grid-template-columns: 2fr 3fr; gap: 12px 10px; padding: 18px 0 12px; }
    .ft-top > div:first-child { grid-column: 1 / -1; }
    /* Marca compacta (encima de los iconos sociales) */
    .ft-logo-wrap { margin-bottom: 6px; gap: 8px; }
    .ft-logo-wrap svg { width: 32px !important; height: 32px !important; }
    .ft-logo-name { font-size: 14px; letter-spacing: 0.16em; }
    .ft-logo-country { font-size: 7.5px; letter-spacing: 0.20em; }
    .ft-tagline { font-size: 10.5px; line-height: 1.35; margin: 0 0 8px; max-width: none; }
    .ft-social-btn { width: 26px; height: 26px; border-radius: 6px; }
    .ft-social-btn svg { width: 12px !important; height: 12px !important; }
    /* TODO LO QUE VA DEBAJO DE LOS ICONOS SOCIALES — extra compacto */
    .ft-col-title { font-size: 7.8px; letter-spacing: 0.16em; margin: 0 0 6px; }
    .ft-links { gap: 4px; }
    .ft-link { font-size: 10.5px; line-height: 1.3; }
    .ft-sedes-grid { gap: 3px 8px; margin-bottom: 6px; }
    .ft-sede-name { font-size: 9.5px; }
    .ft-sede-dot { width: 3px; height: 3px; }
    .ft-sede { gap: 5px; }
    .ft-teleconsulta { padding: 5px 8px; gap: 5px; border-radius: 7px; }
    .ft-teleconsulta-text { font-size: 8.5px; line-height: 1.3; }
    .ft-teleconsulta svg { width: 10px !important; height: 10px !important; }
    /* Banda inferior compacta */
    .ft-bottom { padding: 8px 0 10px; gap: 8px 8px; }
    .ft-portal-btn { padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.08em; flex: 0 0 36%; }
    .ft-partners-label { font-size: 7.5px; letter-spacing: 0.13em; }
    .ft-partner { font-size: 8px; letter-spacing: 0.08em; }
    .ft-partners { gap: 4px 7px; }
    .ft-copyright { font-size: 8px; letter-spacing: 0.13em; }
}

/* Logo */
.ft-logo-wrap { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; margin-bottom: 14px; }
.ft-logo-text { display: flex; flex-direction: column; gap: 3px; }
.ft-logo-name { font-family: 'Marcellus', serif; font-size: 18px; font-weight: 400; letter-spacing: 0.2em; color: #e8d5a8; line-height: 1; }
.ft-logo-country { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.26em; color: rgba(201,169,110,0.55); text-transform: uppercase; }
.ft-tagline { font-family: 'Montserrat', sans-serif; font-size: 13px; color: rgba(168,168,158,0.82); line-height: 1.6; margin: 0 0 20px; max-width: 240px; }
.ft-social-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ft-social-btn { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); display: flex; align-items: center; justify-content: center; transition: all 0.22s ease; text-decoration: none; }
.ft-social-btn:hover { background: rgba(201,169,110,0.14); border-color: rgba(201,169,110,0.32); }

/* Columnas nav y presencia */
.ft-col-title { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.24em; color: #c9a96e; text-transform: uppercase; margin: 0 0 18px; }
.ft-links { display: flex; flex-direction: column; gap: 10px; }
.ft-link { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; color: rgba(168,168,158,0.82); text-decoration: none; letter-spacing: 0.02em; transition: color 0.18s ease; background: none; border: none; cursor: pointer; text-align: left; padding: 0; }
.ft-link:hover { color: #c9a96e; }

/* Sedes */
.ft-sedes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin-bottom: 20px; }
.ft-sede { display: flex; align-items: center; gap: 7px; }
.ft-sede-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(201,169,110,0.4); flex-shrink: 0; }
.ft-sede-name { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; color: rgba(168,168,158,0.8); }
.ft-teleconsulta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; border: 1px solid rgba(201,169,110,0.18); background: rgba(201,169,110,0.05); }
.ft-teleconsulta-text { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; color: rgba(201,169,110,0.72); letter-spacing: 0.03em; }

/* Divisor */
.ft-divider { height: 1px; background: rgba(201,169,110,0.12); margin: 0; }

/* Banda inferior */
.ft-bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; flex-wrap: wrap; gap: 12px; }
@media(max-width:600px){
    /* Banda inferior: Mi Portal izq (40%) + Partners der (60%), Copyright en fila abajo full-width */
    .ft-bottom { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 12px 10px; justify-content: space-between; }
    .ft-portal-btn { flex: 0 0 36%; order: 1; text-align: center; padding: 8px 10px; font-size: 10.5px; }
    .ft-partners { flex: 0 0 60%; order: 2; justify-content: flex-end; gap: 5px 9px; }
    .ft-partners-label { font-size: 8.5px; letter-spacing: 0.16em; }
    .ft-partner { font-size: 9px; letter-spacing: 0.1em; }
    .ft-copyright { flex: 0 0 100%; order: 3; text-align: center; font-size: 9px; }
}
.ft-portal-btn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #c9a96e; padding: 8px 18px; border: 1px solid rgba(201,169,110,0.35); border-radius: 8px; text-decoration: none; transition: background 0.2s ease; white-space: nowrap; }
.ft-portal-btn:hover { background: rgba(201,169,110,0.12); }
.ft-partners { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; justify-content: center; }
.ft-partners-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(201,169,110,0.5); white-space: nowrap; }
.ft-partner { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,240,0.5); text-decoration: none; transition: color 0.18s ease; }
.ft-partner:hover { color: #c9a96e; }
.ft-copyright { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(168,168,158,0.45); white-space: nowrap; }
/* -- Footer: nitidez + claridad estilo FB (mobile, sin agrandar) -- */
@media (max-width: 768px) {
    #site-footer, #site-footer * {
        -webkit-font-smoothing: antialiased !important;
        text-rendering: optimizeLegibility !important;
    }
    .ft-tagline { color: rgba(202,202,194,0.95) !important; }
    .ft-link { color: rgba(208,208,200,0.95) !important; }
    .ft-sede-name { color: rgba(202,202,194,0.92) !important; }
    .ft-logo-country { color: rgba(201,169,110,0.8) !important; }
    .ft-teleconsulta-text { color: rgba(201,169,110,0.9) !important; }
    .ft-copyright { color: rgba(184,184,174,0.7) !important; }
    .ft-partner { color: rgba(245,245,240,0.72) !important; }
    .ft-partners-label { color: rgba(201,169,110,0.75) !important; }
}
/* ===== HERO · foto full-bleed HARMONIE INSTITUTE (jun 2026) ===== */
#hero-video, #hero-play-btn, #hero-audio-toggle, #hero-video-close { display: none !important; }
#hero-bg, #hero-bg.loaded { background-image: url('hero_harmonie.jpg?v=4') !important; opacity: 1 !important; }
#hero-bg.kb-active { animation: none !important; }
#hero-bg-parallax { display: block !important; left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; height: 80vh !important; }
#hero-section::before { display: none !important; }
#hero-overlay { left: 0 !important; right: 0 !important; width: 100% !important; height: 80vh !important;
  background: linear-gradient(to bottom, rgba(6,13,24,0.30) 0%, rgba(6,13,24,0.12) 34%, rgba(6,13,24,0.55) 76%, rgba(6,13,24,0.92) 100%) !important; }
#hero-main { margin-left: 0 !important; max-width: 100% !important; width: 100% !important; height: 80vh !important; }
#hero-brand { display: none !important; }
/* La fachada ya muestra "HARMONIE INSTITUTE": ocultamos el texto "Medicina estética con alma" */
#hero-headline { display: none !important; }
@media (max-width: 768px) {
  #hero-bg-parallax { display: block !important; height: 72vh !important; }
  #hero-main { height: 72vh !important; padding: 0 6vw 40px !important; }
}
/* Hero foto v3: la fachada ya rotula la marca; el contenedor de texto flotante
   queda vacío (marca + headline ocultos), así que lo ocultamos para no dejar un blob. */
.hero-floating-text { display: none !important; }

/* ============================================================
   JORNADA ACTIVA — bloque de campaña + sede resaltada + aviso
   (visible solo cuando window._jornadaActiva.activo === true)
   ============================================================ */
.s7-camp {
  margin-top: 10px;
  padding: 14px 14px 15px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(201,169,110,0.16), rgba(201,169,110,0.05));
  border: 1px solid rgba(201,169,110,0.38);
  box-shadow: 0 6px 18px rgba(10,22,40,0.18);
}
.s7-camp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Montserrat', sans-serif; font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #0a1628;
  background: var(--dorado, #c9a96e); padding: 3px 10px; border-radius: 100px;
}
.s7-camp-title {
  font-family: 'Marcellus', serif; font-size: 1.05rem; font-weight: 400;
  color: var(--azul-noche, #0a1628); margin-top: 9px; line-height: 1.18;
}
.s7-camp-sub {
  font-family: 'Montserrat', sans-serif; font-size: 0.68rem;
  color: rgba(10,22,40,0.6); margin-top: 3px;
}
/* Estado SIN campaña activa (placeholder) */
.s7-camp-empty { background: linear-gradient(160deg, rgba(201,169,110,0.09), rgba(10,22,40,0.02)); border-style: dashed; box-shadow: none; text-align: center; }
.s7-camp-empty .s7-camp-badge { opacity: 0.75; }
.s7-camp-empty-tag { font-family: 'Marcellus', serif; font-size: 0.98rem; color: var(--azul-noche, #0a1628); margin-top: 10px; }
.s7-camp-empty-sub { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; color: rgba(10,22,40,0.55); margin-top: 4px; line-height: 1.4; }
.s7-camp-btns { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.s7-camp-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: 9px;
  font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.15s ease, filter 0.15s ease; text-decoration: none;
}
.s7-camp-btn i { font-size: 0.82em; }
.s7-camp-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.s7-camp-btn-primary { background: var(--dorado, #c9a96e); color: #0a1628; }
.s7-camp-btn-row { display: flex; gap: 7px; }
.s7-camp-btn-sec {
  flex: 1; background: rgba(10,22,40,0.05); color: var(--azul-noche, #0a1628);
  border: 1px solid rgba(201,169,110,0.4);
}
.s7-camp-btn-wa {
  background: rgba(37,177,102,0.14); color: #1a7a4a;
  border: 1px solid rgba(37,177,102,0.4);
}
/* Afiche/arte de la campaña (compacto, clic -> landing) */
.s7-camp-art {
  position: relative; display: block; margin: 10px 0 2px;
  border-radius: 10px; overflow: hidden; line-height: 0;
  box-shadow: 0 4px 14px rgba(10,22,40,0.22);
}
.s7-camp-art img {
  width: 100%; height: 150px; object-fit: cover; object-position: center 22%;
  display: block; transition: transform 0.3s ease;
}
.s7-camp-art:hover img { transform: scale(1.04); }
.s7-camp-art-play {
  position: absolute; bottom: 7px; right: 7px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10,22,40,0.72); color: #f5f5f0;
  font-family: 'Montserrat', sans-serif; font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; backdrop-filter: blur(3px);
}
.s7-camp-art-play i { font-size: 0.8em; color: var(--dorado-claro, #e0c896); }

/* Lightbox del video de la campaña */
.camp-vid-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10,22,40,0.9); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s ease; }
.camp-vid-overlay.open { opacity: 1; }
.camp-vid-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 96vw; }
/* Video vertical (9:16): en PC se maximiza por alto; en celular por ancho (responsivo natural) */
.camp-vid-player { aspect-ratio: 9 / 16; height: 86vh; max-width: 94vw; width: auto; border-radius: 12px; box-shadow: 0 12px 44px rgba(0,0,0,0.55); background: #000; }
@media (max-width: 700px) { .camp-vid-player { height: auto; width: 94vw; max-height: 82vh; } }
.camp-vid-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: #c41e3a; color: #fff; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 3; }
.camp-vid-close:hover { background: #9b1530; }
.camp-vid-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.camp-vid-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 10px; font-family: 'Montserrat',sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: filter 0.15s ease; }
.camp-vid-btn:hover { filter: brightness(1.07); }
.camp-vid-agendar { background: var(--dorado,#c9a96e); color: #0a1628; }
.camp-vid-wa { background: #25b166; color: #fff; }

/* Header izquierdo del calendario: título (izq) + botón "Campaña activa" (der), 50/50 */
.s7-head-row { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; }
.s7-head-titles { flex: 1; min-width: 0; align-self: center; }
.s7-head-camp {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, rgba(201,169,110,0.98), rgba(160,135,73,0.98));
  color: #0a1628; border: none; border-radius: 7px; padding: 10px 12px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700;
  line-height: 1.22; text-align: center; white-space: normal;
  box-shadow: 0 4px 12px rgba(201,169,110,0.38); transition: transform 0.15s ease, filter 0.15s ease;
}
.s7-head-camp:hover { transform: translateY(-1px); filter: brightness(1.06); }
.s7-head-camp-star { font-size: 1em; flex-shrink: 0; }
/* Activo (dorado) = estás en la sede de la campaña. Desactivado (gris) = otra sede, clic para activar */
.s7-head-camp.is-inactive { background: linear-gradient(135deg, #ded8cc, #cbc4b6); color: rgba(10,22,40,0.55); box-shadow: none; }
.s7-head-camp.is-inactive:hover { transform: translateY(-1px); filter: brightness(1.02); }
/* Título un poco más chico para equilibrar con el botón */
body.s7-modal-active #col1-sidebar .s7-head h3 { font-size: 20px !important; }
body.s7-modal-active #col1-sidebar .s7-head p  { font-size: 12px !important; }

/* Sección Subsedes: título centrado arriba + chips (o "sin subsedes") debajo */
.s7-subsedes { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 2px 0 12px; text-align: center; }
.s7-subsedes-title {
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado-oscuro, #a08749);
}
.s7-subsedes-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.s7-subsedes-empty { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; color: rgba(10,22,40,0.5); font-style: italic; }
.s7-subsede-chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1;
  padding: 4px 11px; border-radius: 6px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  color: #0a1628; background: #ffffff; border: 1px solid #d8d2c6; transition: all 0.15s ease;
}
.s7-subsede-chip-name { font-size: 0.68rem; }
.s7-subsede-chip-tag { font-size: 0.44rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #c41e3a; margin-top: 1px; }
.s7-subsede-chip.active .s7-subsede-chip-tag { color: #7a0f20; }
.s7-subsede-chip:hover { border-color: #c9a96e; }
.s7-subsede-chip.active { background: #c9a96e; border-color: #c9a96e; box-shadow: 0 2px 8px rgba(201,169,110,0.35); }
@media (max-width: 640px) { .camp-vid-close { top: 4px; right: 4px; } .camp-vid-player { max-height: 68vh; } }

/* Sede de la jornada resaltada en la lista */
.s7-item.camp {
  border-color: rgba(201,169,110,0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,0.45);
  background: rgba(201,169,110,0.06);
}
.s7-item-camptag {
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-family: 'Montserrat', sans-serif; font-size: 0.44rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #0a1628;
  background: var(--dorado, #c9a96e); padding: 2px 7px; border-radius: 100px;
}

/* Aviso/banner arriba del calendario presencial */
.s7-camp-aviso {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 9px;
  background: linear-gradient(90deg, rgba(201,169,110,0.18), rgba(201,169,110,0.05));
  border: 1px solid rgba(201,169,110,0.32);
  font-family: 'Montserrat', sans-serif; font-size: 0.7rem; color: rgba(10,22,40,0.85);
}
.s7-camp-aviso i { color: var(--dorado, #c9a96e); font-size: 0.8em; }
.s7-camp-aviso b { color: var(--dorado-oscuro, #a08749); font-weight: 700; }

/* Pasarela de pago — QR + textos. Celular: 2 columnas (textos apilados a la izquierda, QR a la derecha). Desktop: 3 columnas (texto · QR · texto). */
.s7pay-wrap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l q" "r q"; align-items: center; justify-items: start; column-gap: 10px; row-gap: 6px; padding: 4px 0; }
.s7pay-l { grid-area: l; padding-left: 15px; }
.s7pay-q { grid-area: q; justify-self: center; }
.s7pay-r { grid-area: r; }
/* Reglas: el ✓ cuelga a la izquierda y los textos quedan alineados con el bloque de arriba. */
.s7pay-r > div { position: relative; padding-left: 15px; }
.s7pay-r > div > span { position: absolute; left: 0; top: 1px; }
@media (min-width: 640px) {
  /* PC: 3 columnas parejas (texto · QR · texto); cada texto centrado en su espacio. */
  .s7pay-wrap { grid-template-columns: 1fr auto 1fr; grid-template-areas: "l q r"; justify-items: center; align-items: center; column-gap: 18px; }
}

/* Ficha de Paciente — las casillas donde el paciente escribe SIEMPRE en BLANCO PURO
   (incluye el autocompletar de Chrome, que las tiñe de crema por defecto). */
input[name="nombre"], input[name="email"], input[type="email"], input[type="tel"], textarea[name="notas"] {
  background-color: #ffffff !important;
}
input[name="nombre"]:-webkit-autofill, input[name="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill, input[type="tel"]:-webkit-autofill,
textarea[name="notas"]:-webkit-autofill, input[name="nombre"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:focus, input[type="tel"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0a1628 !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* Bordes gris neutro en las casillas de la ficha → se ven blancas y nítidas (no cálidas).
   Al enfocar, el borde dorado del foco (por JS) igual se muestra porque :not(:focus) no aplica. */
#field-name input:not(:focus), textarea[name="notas"]:not(:focus), input[type="email"]:not(:focus) {
  border-color: #dcd8d0 !important;
  box-shadow: 0 1px 3px rgba(10,22,40,0.06) !important;
}
#field-phone > div { border-color: #dcd8d0 !important; box-shadow: 0 1px 3px rgba(10,22,40,0.06) !important; }