/* =============================================================================
   Miami Airport landing — dynasty/assets/css/miami-airport.css
   Carga sólo en la página con Template Name: Miami Airport (/fleet/miami-airport/).
   Reusa: dynasty-eyebrow / dynasty-section-title / dynasty-btn (style.css),
   dynasty-faq-item accordion (faqs.css), dynasty-cta-centered banner (blog.css).

   Paleta (cotejada contra el PDF del cliente, sesión 2026-08-23 — la landing
   es mayormente DARK, no clara): hero/split×3/process-bg-NO/fleet-bg/faq son
   negro de marca (--dynasty-black-obsidian); las únicas 2 secciones claras
   son Process y el fondo general de Requirements (sus 3 recuadros SÍ son
   oscuros, invertido respecto a la sección que los contiene).

   Estructura:
     1) Hero        — bg full-bleed + copy | mini quote form card (panel dark
                       translúcido, NO card blanca)
     2) Split        — bloque genérico imagen+copy reusado 3 veces (proximity/
                        ready/pickup), bg dark las 3, alterna orden con --reverse
     3) Process      — 4 pasos numerados, ÚNICA sección clara de punta a punta
     4) Fleet brands — bg full-bleed dark + pills sólidas + CTA ghost gold
     5) Requirements — sección clara, recuadros dark con bullet dot gold
     6) FAQ          — dark, filas simples con línea divisoria (no cards claras)
     7) Final CTA    — overrides puntuales sobre dynasty-cta-centered (blog.css)
   ============================================================================ */

.dynasty-page-mia { padding: 0; }

/* PDF: todos los H2 en mixed/sentence case, no uppercase — el global
   .dynasty-section-title (style.css) trae `text-transform: uppercase` por
   default (pensado para otras páginas), se anula acá para toda la landing. */
.dynasty-page-mia .dynasty-section-title { text-transform: none !important; }


/* =============================================================================
   1) HERO
   ============================================================================ */

.dynasty-mia-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: clamp(60px, 10vw, 120px) 0 clamp(50px, 7vw, 90px);
    overflow: hidden;
}

.dynasty-mia-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(10, 10, 10, 0.90) 0%,
        rgba(10, 10, 10, 0.78) 40%,
        rgba(10, 10, 10, 0.55) 70%,
        rgba(10, 10, 10, 0.35) 100%
    );
}

.dynasty-mia-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: start;
}
@media (min-width: 992px) {
    .dynasty-mia-hero__inner {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
    }
}

.dynasty-mia-hero__eyebrow { color: var(--dynasty-brand-gold, #D4AF37) !important; }

.dynasty-mia-hero__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(30px, 4.4vw, 52px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em;
    color: var(--dynasty-white, #FFFFFF) !important;
    text-transform: none;
    margin: 0 0 20px !important;
    max-width: 640px;
}

.dynasty-mia-hero__lead {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin: 0 0 14px;
}

.dynasty-mia-hero__badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 34px);
    margin: 28px 0 30px;
    padding: 0;
}

.dynasty-mia-hero__badge {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dynasty-mia-hero__badge-num {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--dynasty-brand-gold, #D4AF37);
    line-height: 1;
}

.dynasty-mia-hero__badge-label {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dynasty-mia-hero__cta-secondary {
    padding: 15px 30px;
    font-size: 12px;
}

/* Form card — panel oscuro translúcido sobre la foto del hero (PDF: no es una
   card blanca flotante, se funde con el fondo dark de toda la landing). */
.dynasty-mia-hero__form-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: clamp(26px, 3vw, 34px);
    backdrop-filter: blur(6px);
}

.dynasty-mia-hero__form-title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    color: var(--dynasty-white, #FFFFFF) !important;
    margin: 0 0 6px !important;
}

.dynasty-mia-hero__form-sub {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 22px;
}

.dynasty-mia-form { display: flex; flex-direction: column; gap: 16px; }

.dynasty-mia-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dynasty-mia-form__field label {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dynasty-mia-form__field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    color: var(--dynasty-white, #FFFFFF);
    background: rgba(0, 0, 0, 0.35);
}
.dynasty-mia-form__field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.dynasty-mia-form__field input:focus {
    outline: none;
    border-color: var(--dynasty-brand-gold, #D4AF37);
    background: rgba(0, 0, 0, 0.5);
}
/* Chrome/Safari pintan el calendar-picker-icon negro sobre negro por default. */
.dynasty-mia-form__field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.dynasty-mia-form__submit {
    width: 100%;
    margin-top: 4px;
    padding: 16px 20px;
}


/* =============================================================================
   2) SPLIT — bloque genérico imagen+copy (Proximity / Ready / Pickup)
   ============================================================================ */

/* PDF: proximity/ready/pickup son las 3 dark, sin alternar con blanco — mismo
   negro que hero/process-bg/faq (--dynasty-black-obsidian). --alt queda
   definida por si el cliente pide volver a alternar más adelante. */
.dynasty-mia-split { padding: clamp(50px, 7vw, 90px) 0; background: var(--dynasty-black-obsidian, #0A0A0A); }
.dynasty-mia-split--alt { background: var(--dynasty-black-obsidian, #0A0A0A); }

.dynasty-mia-split__copy .dynasty-eyebrow { color: var(--dynasty-brand-gold, #D4AF37) !important; }
.dynasty-mia-split__copy .dynasty-section-title { color: var(--dynasty-white, #FFFFFF) !important; }

.dynasty-mia-split__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}
@media (min-width: 900px) {
    .dynasty-mia-split__inner { grid-template-columns: 1fr 1fr; }
    .dynasty-mia-split__inner--reverse .dynasty-mia-split__media { order: 2; }
    .dynasty-mia-split__inner--reverse .dynasty-mia-split__copy { order: 1; }
}

.dynasty-mia-split__media {
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
}
.dynasty-mia-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dynasty-mia-split__copy .dynasty-section-title { margin-bottom: 22px !important; }
.dynasty-mia-split__copy p {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 0 1em;
}
.dynasty-mia-split__copy p:last-child { margin-bottom: 0; }


/* =============================================================================
   3) PROCESS — 4 pasos numerados
   ============================================================================ */

/* PDF: única sección clara entre 2 bloques oscuros (split-3/pickup arriba,
   fleet-bg abajo) — cards con borde suave sobre blanco, no cajas dark. */
.dynasty-mia-process { padding: clamp(50px, 7vw, 90px) 0; background: var(--dynasty-white, #FFFFFF); }

.dynasty-mia-process__head { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.dynasty-mia-process__head .dynasty-eyebrow { color: var(--dynasty-brand-gold, #D4AF37) !important; }
.dynasty-mia-process__head .dynasty-section-title {
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 !important;
}

.dynasty-mia-process__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    counter-reset: mia-step;
}
@media (min-width: 640px) {
    .dynasty-mia-process__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .dynasty-mia-process__grid { grid-template-columns: repeat(4, 1fr); }
}

.dynasty-mia-process__step {
    background: var(--dynasty-white, #FFFFFF);
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 26px 22px;
}

.dynasty-mia-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-black-obsidian, #0A0A0A);
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}

.dynasty-mia-process__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 0 8px !important;
}

.dynasty-mia-process__desc {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dynasty-gray-brand, #6D6E70);
    margin: 0;
}


/* =============================================================================
   4) FLEET BRANDS — bg full-bleed + pills de marca
   ============================================================================ */

.dynasty-mia-fleet {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: clamp(60px, 8vw, 100px) 0;
}
.dynasty-mia-fleet__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.80) 0%, rgba(10, 10, 10, 0.90) 100%);
}
.dynasty-mia-fleet__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dynasty-mia-fleet__inner .dynasty-eyebrow { color: var(--dynasty-brand-gold, #D4AF37) !important; }
.dynasty-mia-fleet__inner .dynasty-section-title { margin: 0 0 18px !important; }

.dynasty-mia-fleet__lead {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 640px;
    margin: 0 0 32px;
}

.dynasty-mia-fleet__pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
}
.dynasty-mia-fleet__pills li { margin: 0 !important; padding: 0 !important; list-style: none; }

/* Pills clicables → página de marca (dynasty_resolve_brand_url()). */
.dynasty-mia-fleet__pill {
    display: inline-flex;
    padding: 10px 22px;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 30px;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--dynasty-white, #FFFFFF) !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.dynasty-mia-fleet__pill:hover {
    background: var(--dynasty-brand-gold, #D4AF37);
    border-color: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

.dynasty-mia-fleet__arrow { display: inline-flex; align-items: center; }

/* CTA "View the Full Fleet" — ghost gold (PDF: outline, no gold sólido) sobre
   el fondo oscuro de esta sección. Override puntual sobre .dynasty-btn--primary. */
.dynasty-mia-fleet .dynasty-btn--primary {
    background: transparent;
    color: var(--dynasty-brand-gold, #D4AF37) !important;
    border: 1.5px solid var(--dynasty-brand-gold, #D4AF37);
}
.dynasty-mia-fleet .dynasty-btn--primary:hover {
    background: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}


/* =============================================================================
   5) REQUIREMENTS
   ============================================================================ */

.dynasty-mia-requirements { padding: clamp(50px, 7vw, 90px) 0; background: var(--dynasty-white, #FFFFFF); text-align: center; }
.dynasty-mia-requirements .dynasty-eyebrow,
.dynasty-mia-requirements .dynasty-section-title { display: block; }
.dynasty-mia-requirements .dynasty-section-title { margin: 0 auto 20px !important; }

.dynasty-mia-requirements__lead {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--dynasty-gray-brand, #6D6E70);
    max-width: 680px;
    margin: 0 auto 36px;
}

.dynasty-mia-requirements__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 780px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px) {
    .dynasty-mia-requirements__grid { grid-template-columns: repeat(3, 1fr); }
}

/* PDF: recuadros oscuros (no cajas claras) dentro de una sección blanca —
   mismo negro de marca que el resto de la landing, bullet dot dorado en vez
   de check en círculo. */
.dynasty-mia-requirements__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    background: var(--dynasty-black-obsidian, #0A0A0A);
    border-radius: 8px;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--dynasty-white, #FFFFFF);
}

.dynasty-mia-requirements__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dynasty-brand-gold, #D4AF37);
    flex-shrink: 0;
}


/* =============================================================================
   6) FAQ — dark (PDF: filas simples separadas por línea, no cards con borde
   claro). Override puntual sobre el accordion global de faqs.css, que por
   default está pensado para secciones claras.
   ============================================================================ */

.dynasty-mia-faqs { padding: clamp(50px, 7vw, 90px) 0; background: var(--dynasty-black-obsidian, #0A0A0A); text-align: center; }
.dynasty-mia-faqs .dynasty-eyebrow,
.dynasty-mia-faqs .dynasty-section-title { display: block; }
.dynasty-mia-faqs .dynasty-eyebrow { color: var(--dynasty-brand-gold, #D4AF37) !important; }
.dynasty-mia-faqs .dynasty-section-title { color: var(--dynasty-white, #FFFFFF) !important; margin: 0 auto 36px !important; }
.dynasty-mia-faqs .dynasty-faqs-list__items { text-align: left; max-width: 820px; margin: 0 auto; gap: 0; }

.dynasty-mia-faqs .dynasty-faq-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
}
.dynasty-mia-faqs .dynasty-faq-item:last-child { border-bottom: 0; }
.dynasty-mia-faqs .dynasty-faq-item:has(.dynasty-faq-item__q[aria-expanded="true"]) {
    border-color: rgba(255, 255, 255, 0.14);
}
.dynasty-mia-faqs .dynasty-faq-item__q,
.dynasty-mia-faqs .dynasty-faq-item__q:focus,
.dynasty-mia-faqs .dynasty-faq-item__q:active,
.dynasty-mia-faqs .dynasty-faq-item__q[aria-expanded="true"] {
    color: var(--dynasty-white, #FFFFFF) !important;
    padding: 20px 4px;
}
.dynasty-mia-faqs .dynasty-faq-item__q:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
.dynasty-mia-faqs .dynasty-faq-item__icon {
    background: transparent;
    color: var(--dynasty-brand-gold, #D4AF37);
}
.dynasty-mia-faqs .dynasty-faq-item__q[aria-expanded="true"] .dynasty-faq-item__icon {
    background: transparent;
}
.dynasty-mia-faqs .dynasty-faq-item__a {
    color: rgba(255, 255, 255, 0.62);
    padding: 0 4px 20px;
}


/* =============================================================================
   7) FINAL CTA — overrides sobre dynasty-cta-centered (blog.css)
   ============================================================================ */

.dynasty-mia-final-cta.dynasty-cta-centered { min-height: 420px; }

/* La imagen (avión + auto) ya trae su propia película oscura incorporada —
   sin esto, el `.dynasty-cta-centered__overlay` genérico de blog.css
   (rgba(0,0,0,0.45)) se suma encima y la deja demasiado oscura/turbia. */
.dynasty-mia-final-cta .dynasty-cta-centered__overlay { background: transparent; }