/* ==========================================================================
   ASTROLUMEN GLOBAL DESIGN SYSTEM - ESTILO FRIENDLY & FULL WIDTH (ANCHO COMPLETO)
   ========================================================================== */

:root {
    /* Paleta Cósmica Amigable y Cálida */
    --bg-main: #0B0F19;
    --bg-surface: #121826;
    --bg-surface-hover: #1A2234;
    --bg-glass: rgba(18, 24, 38, 0.75);
    --bg-glass-card: rgba(26, 34, 52, 0.65);
    
    /* Acentos Vivos & Empáticos */
    --color-gold: #FBBF24;
    --color-gold-light: #FDE68A;
    --color-gold-glow: rgba(251, 191, 36, 0.25);
    --color-cyan: #38BDF8;
    --color-cyan-glow: rgba(56, 189, 248, 0.25);
    --color-purple: #A78BFA;
    --color-purple-glow: rgba(167, 139, 250, 0.25);
    --color-emerald: #34D399;
    --color-rose: #F472B6;
    --color-coral: #FB7185;

    /* Textos con Máxima Legibilidad */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-highlight: #FFFFFF;

    /* Bordes y Sombras Suaves */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(56, 189, 248, 0.5);
    --border-gold: rgba(251, 191, 36, 0.4);
    
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.35);
    --shadow-glow-gold: 0 12px 35px -8px rgba(251, 191, 36, 0.3);
    --shadow-glow-cyan: 0 12px 35px -8px rgba(56, 189, 248, 0.3);
    --shadow-card: 0 20px 45px -10px rgba(0, 0, 0, 0.5);
}

/* RESET & BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
}

/* FONDO AMIGABLE CON GRADIENTE ESTELAR */
body {
    background-image: 
        radial-gradient(ellipse at 15% 10%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.04) 0%, transparent 70%);
    background-attachment: fixed;
}

/* ==========================================================================
   LAYOUT FULL WIDTH (ANCHO COMPLETO FLUIDO)
   ========================================================================== */

.container-fluid,
.full-width-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 clamp(20px, 3.5vw, 60px) !important;
    margin: 0 auto;
}

.grid-fluid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(16px, 2vw, 32px);
    width: 100%;
}

.grid-fluid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 22vw, 360px), 1fr));
    gap: clamp(16px, 1.8vw, 28px);
    width: 100%;
}

.col-span-12 { grid-column: span 12; }
.col-span-8  { grid-column: span 8; }
.col-span-7  { grid-column: span 7; }
.col-span-6  { grid-column: span 6; }
.col-span-5  { grid-column: span 5; }
.col-span-4  { grid-column: span 4; }
.col-span-3  { grid-column: span 3; }

@media (max-width: 1200px) {
    .col-span-8, .col-span-7, .col-span-5, .col-span-4, .col-span-3 {
        grid-column: span 12;
    }
}

/* ==========================================================================
   COMPONENTES FRIENDLY: CARDS, BOTONES, PILLS Y BADGES
   ========================================================================== */

/* CARDS CON GLASSMORPHISM CÁLIDO */
.card-friendly {
    background: var(--bg-glass-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 2.5vw, 36px);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.card-friendly:hover {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.card-friendly-gold {
    border: 1px solid var(--border-gold);
    background: linear-gradient(145deg, rgba(26, 34, 52, 0.8), rgba(18, 24, 38, 0.9));
}

/* CABECERAS FRIENDLY */
.card-header-friendly {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 12px;
}

.card-title-friendly {
    font-family: 'Cinzel', serif;
    color: var(--color-gold);
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BOTONES REDONDEADOS & AMIGABLES */
.btn-friendly-gold {
    background: linear-gradient(135deg, var(--color-gold), #D97706);
    color: #070A12 !important;
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: var(--shadow-glow-gold);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-friendly-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px -5px rgba(251, 191, 36, 0.45);
}

.btn-friendly-outline {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan) !important;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-friendly-outline:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: var(--color-cyan);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-cyan);
}

/* PILLS & BADGES AMIGABLES */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.badge-pill-gold {
    background: rgba(251, 191, 36, 0.15);
    color: var(--color-gold);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.badge-pill-cyan {
    background: rgba(56, 189, 248, 0.15);
    color: var(--color-cyan);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-pill-emerald {
    background: rgba(52, 211, 153, 0.15);
    color: var(--color-emerald);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.badge-pill-purple {
    background: rgba(167, 139, 250, 0.15);
    color: var(--color-purple);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* FORMULARIOS ESPACIOSOS Y CÓMODOS */
.form-group-friendly {
    margin-bottom: 20px;
}

.form-group-friendly label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.input-friendly {
    width: 100%;
    background: rgba(11, 15, 25, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 13px 18px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: all 0.25s ease;
    outline: none;
}

.input-friendly:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    background: rgba(15, 23, 42, 0.95);
}

/* HERO BANNER FULL WIDTH FRIENDLY */
.hero-banner-full {
    background: linear-gradient(135deg, rgba(18, 24, 38, 0.95) 0%, rgba(26, 34, 52, 0.8) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: clamp(28px, 3.5vw, 48px);
    margin-bottom: clamp(24px, 3vw, 40px);
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

/* HERO BANNERS CON FONDOS DINÁMICOS COHERENTES */
.hero-bg-natal {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_carta_natal.jpg') center/cover no-repeat !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}
.hero-bg-solar {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_revolucion_solar.jpg') center/cover no-repeat !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}
.hero-bg-quiz {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_astro_quiz.jpg') center/cover no-repeat !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}
.hero-bg-transitos {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_transitos_tiempo.jpg') center/cover no-repeat !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}
.hero-bg-sinastria {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_sinastria_parejas.jpg') center/cover no-repeat !important;
    border-color: rgba(244, 114, 182, 0.3) !important;
}
.hero-bg-enciclopedia {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_enciclopedia_cosmica.jpg') center/cover no-repeat !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}
.hero-bg-boveda {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_boveda_astral.jpg') center/cover no-repeat !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}
.hero-bg-astrocartografia {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_astrocartografia.jpg') center/cover no-repeat !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}
.hero-bg-mentor {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_astro_mentor.jpg') center/cover no-repeat !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}
.hero-bg-tienda {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_tienda_mistica.jpg') center/cover no-repeat !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}
.hero-bg-jung {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_guia_jung.jpg') center/cover no-repeat !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}
.hero-bg-casas {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_guia_12casas.jpg') center/cover no-repeat !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}
.hero-bg-pluton {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_guia_pluton.jpg') center/cover no-repeat !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}
.hero-bg-deluxe {
    background: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%),
                url('/assets/images/hero_reporte_deluxe.jpg') center/cover no-repeat !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* WebP reduce sensiblemente la descarga inicial. El fondo JPEG declarado
   arriba permanece como respaldo para navegadores que no lo admitan. */
@supports (background-image: image-set(url('/assets/images/hero_carta_natal.webp') type('image/webp'))) {
    .hero-bg-natal { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_carta_natal.webp') type('image/webp'), url('/assets/images/hero_carta_natal.jpg') type('image/jpeg')) !important; }
    .hero-bg-solar { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_revolucion_solar.webp') type('image/webp'), url('/assets/images/hero_revolucion_solar.jpg') type('image/jpeg')) !important; }
    .hero-bg-quiz { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_astro_quiz.webp') type('image/webp'), url('/assets/images/hero_astro_quiz.jpg') type('image/jpeg')) !important; }
    .hero-bg-transitos { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_transitos_tiempo.webp') type('image/webp'), url('/assets/images/hero_transitos_tiempo.jpg') type('image/jpeg')) !important; }
    .hero-bg-sinastria { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_sinastria_parejas.webp') type('image/webp'), url('/assets/images/hero_sinastria_parejas.jpg') type('image/jpeg')) !important; }
    .hero-bg-enciclopedia { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_enciclopedia_cosmica.webp') type('image/webp'), url('/assets/images/hero_enciclopedia_cosmica.jpg') type('image/jpeg')) !important; }
    .hero-bg-boveda { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_boveda_astral.webp') type('image/webp'), url('/assets/images/hero_boveda_astral.jpg') type('image/jpeg')) !important; }
    .hero-bg-astrocartografia { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_astrocartografia.webp') type('image/webp'), url('/assets/images/hero_astrocartografia.jpg') type('image/jpeg')) !important; }
    .hero-bg-mentor { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_astro_mentor.webp') type('image/webp'), url('/assets/images/hero_astro_mentor.jpg') type('image/jpeg')) !important; }
    .hero-bg-tienda { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_tienda_mistica.webp') type('image/webp'), url('/assets/images/hero_tienda_mistica.jpg') type('image/jpeg')) !important; }
    .hero-bg-jung { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_guia_jung.webp') type('image/webp'), url('/assets/images/hero_guia_jung.jpg') type('image/jpeg')) !important; }
    .hero-bg-casas { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_guia_12casas.webp') type('image/webp'), url('/assets/images/hero_guia_12casas.jpg') type('image/jpeg')) !important; }
    .hero-bg-pluton { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_guia_pluton.webp') type('image/webp'), url('/assets/images/hero_guia_pluton.jpg') type('image/jpeg')) !important; }
    .hero-bg-deluxe { background-image: linear-gradient(90deg, rgba(7, 10, 18, 0.94) 0%, rgba(11, 15, 25, 0.82) 45%, rgba(7, 10, 18, 0.88) 100%), image-set(url('/assets/images/hero_reporte_deluxe.webp') type('image/webp'), url('/assets/images/hero_reporte_deluxe.jpg') type('image/jpeg')) !important; }
}

.hero-banner-full h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: var(--color-gold);
    line-height: 1.2;
    margin-bottom: 8px;
}

.hero-banner-full p {
    font-size: clamp(14px, 1.1vw, 16px);
    color: var(--text-secondary);
    max-width: 800px;
}

/* ==========================================================================
   NAVBAR SUPERIOR & BRAND LOGO MAQUETADO DE LUJO (ESCRITORIO & MÓVIL)
   ========================================================================== */

.navbar-full {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px clamp(20px, 3.5vw, 60px);
    background: rgba(7, 10, 18, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.65);
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: clamp(16px, 2.5vw, 40px);
    transition: all 0.3s ease;
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.brand:hover {
    transform: scale(1.04);
}

.brand-logo-img {
    width: clamp(110px, 10vw, 144px);
    height: clamp(110px, 10vw, 144px);
    border-radius: 50%;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(245, 158, 11, 0.45));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    display: block;
}

.brand:hover .brand-logo-img {
    transform: rotate(8deg) scale(1.05);
    filter: drop-shadow(0 8px 28px rgba(245, 158, 11, 0.8));
}

/* MENÚ DE ESCRITORIO */
.nav-tabs-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.75);
    padding: 8px 12px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.25);
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 1050px;
}

.nav-tab-pill-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    white-space: nowrap;
}

.nav-tab-pill-btn:hover {
    color: #F8FAFC;
    background: rgba(56, 189, 248, 0.15);
    transform: translateY(-1px);
}

.nav-tab-pill-btn.active {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #070A12 !important;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
    transform: translateY(-1px);
}

/* ==========================================================================
   OPTIMIZACIÓN MÓVIL EXPERTA (SWIPE HORIZONTAL FLUIDO TIPO NATIVE APP)
   ========================================================================== */
@media (max-width: 900px) {
    .navbar-full {
        flex-direction: column;
        align-items: center;
        padding: 10px 12px 6px 12px;
        gap: 8px;
    }

    .brand-logo-img {
        width: 72px;
        height: 72px;
        filter: drop-shadow(0 3px 12px rgba(245, 158, 11, 0.4));
    }

    .nav-tabs-pill {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 6px 8px;
        border-radius: 20px;
        background: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(245, 158, 11, 0.25);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        gap: 6px;
    }

    .nav-tabs-pill::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .nav-tab-pill-btn {
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 12.5px;
        border-radius: 14px;
        gap: 6px;
    }

    .sky-ticker {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
        flex-direction: column !important;
        gap: 3px !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   RUTA CÓSMICA: NAVEGACIÓN SENCILLA, TOUR GUIADO Y PORTADA POR INTENCIONES
   ========================================================================== */

.navbar-full.cosmic-nav-ready {
    padding-block: 8px;
    gap: 18px;
}

.navbar-full.cosmic-nav-ready .brand-logo-img {
    width: 62px;
    height: 62px;
}

.cosmic-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}

.cosmic-nav-link,
.cosmic-nav-group > summary,
.cosmic-tour-trigger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 13px;
    padding: 9px 14px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.cosmic-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 11px;
}

.cosmic-breadcrumb a { color: var(--color-cyan); text-decoration: none; }
.cosmic-breadcrumb a:hover, .cosmic-breadcrumb a:focus-visible { text-decoration: underline; }

.cosmic-nav-link:hover,
.cosmic-nav-link:focus-visible,
.cosmic-nav-group > summary:hover,
.cosmic-nav-group > summary:focus-visible,
.cosmic-tour-trigger:hover,
.cosmic-tour-trigger:focus-visible {
    color: var(--text-primary);
    background: rgba(56, 189, 248, .11);
}

.cosmic-nav-link.active,
.cosmic-nav-group.active > summary {
    color: #070A12;
    background: linear-gradient(135deg, var(--color-gold), #D97706);
    box-shadow: 0 6px 18px rgba(251, 191, 36, .22);
}

.cosmic-nav-group {
    position: relative;
}

.cosmic-nav-group > summary {
    list-style: none;
}

.cosmic-nav-group > summary::-webkit-details-marker { display: none; }
.cosmic-nav-group > summary::after { content: '⌄'; font-size: 11px; }

.cosmic-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;
    width: min(330px, calc(100vw - 24px));
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(11, 15, 25, .98);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .55);
}

.cosmic-nav-panel a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--text-primary);
    text-decoration: none;
}

.cosmic-nav-panel a:hover,
.cosmic-nav-panel a:focus-visible,
.cosmic-nav-panel a[aria-current='page'] {
    background: rgba(167, 139, 250, .13);
}

.cosmic-nav-panel strong { font-size: 13px; }
.cosmic-nav-panel span { color: var(--text-secondary); font-size: 11px; font-weight: 400; }

.cosmic-tour-trigger {
    color: var(--color-purple);
    border: 1px solid rgba(167, 139, 250, .24);
}

.cosmic-intent-section {
    margin-bottom: 24px;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(18, 24, 38, .92), rgba(26, 20, 48, .72));
    box-shadow: var(--shadow-soft);
}

.cosmic-intent-heading {
    max-width: 760px;
    margin-bottom: 22px;
}

.cosmic-intent-heading .eyebrow {
    color: var(--color-purple);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cosmic-intent-heading h2 {
    margin: 5px 0 7px;
    color: var(--text-primary);
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.15;
}

.cosmic-intent-heading p { color: var(--text-secondary); }

.cosmic-intent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.cosmic-intent-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 17px;
    background: rgba(15, 23, 42, .78);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.cosmic-intent-card:hover,
.cosmic-intent-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(167, 139, 250, .65);
    background: rgba(35, 28, 62, .88);
}

.cosmic-intent-card .symbol { color: var(--color-gold); font-size: 25px; }
.cosmic-intent-card strong { display: block; margin-bottom: 3px; font-size: 16px; }
.cosmic-intent-card span:last-child { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }

.cosmic-route-strip {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
}

.cosmic-route-strip > strong { color: var(--color-cyan); font-size: 13px; }
.cosmic-route-stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cosmic-route-stop { position: relative; padding-top: 12px; color: var(--text-secondary); font-size: 11px; }
.cosmic-route-stop::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); }
.cosmic-route-stop.done::before { background: linear-gradient(90deg, var(--color-gold), var(--color-purple)); }

#cosmic-tour-layer[hidden] { display: none; }
.cosmic-tour-open { overflow: hidden; }
.cosmic-tour-backdrop { position: fixed; inset: 0; z-index: 3000; background: rgba(2, 3, 10, .62); }
.cosmic-tour-highlight {
    position: fixed;
    z-index: 3001;
    pointer-events: none;
    border: 3px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: 0 0 0 7px rgba(251, 191, 36, .15), 0 0 38px rgba(251, 191, 36, .32);
    transition: all .22s ease;
}

.cosmic-tour-bubble {
    position: fixed;
    z-index: 3002;
    padding: 19px;
    border: 1px solid rgba(167, 139, 250, .38);
    border-radius: 19px;
    background: #121826;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
    color: var(--text-primary);
}

.cosmic-tour-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--color-purple); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cosmic-lumi { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #070A12; background: linear-gradient(135deg, var(--color-gold), var(--color-purple)); font-size: 18px; }
.cosmic-tour-bubble h2 { margin: 0 0 6px; color: var(--color-gold-light); font-family: 'Cinzel', serif; font-size: 18px; line-height: 1.25; }
.cosmic-tour-bubble p { margin: 0; color: #CBD5E1; font-size: 13px; line-height: 1.55; }
.cosmic-tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
#cosmic-tour-progress { color: var(--text-secondary); font-size: 11px; }
.cosmic-tour-actions { display: flex; gap: 6px; }
.cosmic-tour-actions button { border: 1px solid var(--border-subtle); border-radius: 9px; padding: 7px 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; cursor: pointer; }
.cosmic-tour-actions button:hover, .cosmic-tour-actions button:focus-visible { color: var(--text-primary); border-color: var(--color-cyan); }
.cosmic-tour-actions button.primary { border-color: transparent; background: var(--color-purple); color: #070A12; font-weight: 700; }

.cosmic-celebration { position: fixed; inset: 0; z-index: 4000; pointer-events: none; overflow: hidden; }
.cosmic-celebration i { --angle: calc(var(--i) * 30deg); position: absolute; left: 50%; top: 50%; color: var(--color-gold); font-style: normal; animation: cosmic-star-burst 1s ease-out forwards; transform: rotate(var(--angle)) translateY(0); }
@keyframes cosmic-star-burst { to { opacity: 0; transform: rotate(var(--angle)) translateY(-190px) scale(.3); } }

@media (prefers-reduced-motion: reduce) {
    .cosmic-tour-highlight, .cosmic-intent-card { transition: none; }
    .cosmic-celebration { display: none; }
}

@media (max-width: 900px) {
    .navbar-full.cosmic-nav-ready { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 8px 12px; }
    .navbar-full.cosmic-nav-ready .brand-logo-img { width: 52px; height: 52px; }
    .cosmic-nav { width: 100%; order: 3; display: grid; grid-template-columns: repeat(5, auto); justify-content: stretch; overflow-x: auto; padding-bottom: 3px; }
    .cosmic-nav-link, .cosmic-nav-group > summary, .cosmic-tour-trigger { min-height: 38px; padding: 7px 9px; font-size: 11px; }
    .cosmic-nav-panel { position: fixed; top: 112px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 130px); overflow-y: auto; }
    .cosmic-intent-grid { grid-template-columns: 1fr; }
    .cosmic-intent-card { min-height: 112px; }
    .cosmic-route-strip { grid-template-columns: 1fr; }
    .cosmic-route-stops { grid-template-columns: repeat(2, 1fr); }
    .cosmic-tour-bubble { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto !important; }
    .cosmic-tour-footer { align-items: flex-end; }
    .cosmic-tour-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ==========================================================================
   EDICIÓN LUMI 2026 · INTERFAZ CLARA, EDITORIAL Y ACCESIBLE
   Inspirada en la Ruta Cósmica aprobada: marfil, lavanda, violeta y oro.
   ========================================================================== */

html.cosmic-ui {
    --bg-main: #F6F2FC;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F1EAFE;
    --bg-glass: rgba(255, 255, 255, .92);
    --bg-glass-card: rgba(255, 255, 255, .96);
    --color-gold: #9A6800;
    --color-gold-light: #C89522;
    --color-gold-glow: rgba(154, 104, 0, .16);
    --color-cyan: #167085;
    --color-cyan-glow: rgba(22, 112, 133, .14);
    --color-purple: #7541D8;
    --color-purple-glow: rgba(117, 65, 216, .15);
    --color-emerald: #177B61;
    --color-rose: #A94179;
    --color-coral: #B74855;
    --text-primary: #272038;
    --text-secondary: #706680;
    --text-muted: #867C94;
    --text-highlight: #171123;
    --border-subtle: #DED5EA;
    --border-focus: rgba(117, 65, 216, .48);
    --border-gold: rgba(154, 104, 0, .3);
    --shadow-soft: 0 14px 38px rgba(66, 43, 95, .08);
    --shadow-card: 0 18px 50px rgba(66, 43, 95, .1);
    color-scheme: light;
    background: #F6F2FC;
}

html.cosmic-ui body {
    --bg-dark: #F6F2FC;
    --bg-card: #FFFFFF;
    --stellar-cyan: #167085;
    --solar-gold: #9A6800;
    min-height: 100vh;
    color: var(--text-primary);
    background-color: #F6F2FC;
    background-image:
        radial-gradient(circle at 8% 2%, rgba(117, 65, 216, .09), transparent 34%),
        radial-gradient(circle at 95% 92%, rgba(22, 112, 133, .07), transparent 38%),
        linear-gradient(180deg, #FAF8FE 0%, #F4EFFB 60%, #F6F4FA 100%);
    background-attachment: fixed;
}

html.cosmic-ui body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image: radial-gradient(circle, rgba(117, 65, 216, .34) 1px, transparent 1.2px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent 34%);
}

html.cosmic-ui ::selection { background: #DDD0FA; color: #241938; }
html.cosmic-ui :focus-visible { outline: 3px solid rgba(117, 65, 216, .35); outline-offset: 3px; }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html.cosmic-ui .navbar-full {
    padding: 14px clamp(20px, 4vw, 68px);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 7px 24px rgba(66, 43, 95, .06);
}

html.cosmic-ui .brand { gap: 13px; color: var(--text-primary); }
html.cosmic-ui .brand::before {
    content: '✦';
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    border-radius: 50%;
    color: #FFE9A3;
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 251, 235, .28) 0 4%, transparent 5%),
        radial-gradient(circle at 62% 72%, rgba(56, 189, 248, .22) 0 18%, transparent 44%),
        linear-gradient(135deg, #07111C 0%, #123043 56%, #07556C 100%);
    border: 1px solid #E7BE58;
    box-shadow:
        inset 0 0 0 3px rgba(56, 189, 248, .18),
        0 8px 18px rgba(12, 57, 75, .22),
        0 0 0 3px rgba(251, 191, 36, .08);
    font-size: 20px;
}
html.cosmic-ui .brand::after {
    content: 'AstrologIA';
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -.04em;
}

html.cosmic-ui .navbar-full.cosmic-nav-ready .brand-logo-img {
    display: none;
}

html.cosmic-ui .cosmic-nav-link,
html.cosmic-ui .cosmic-nav-group > summary,
html.cosmic-ui .cosmic-tour-trigger {
    color: #4F455E;
    font-weight: 650;
}

html.cosmic-ui .cosmic-nav-link:hover,
html.cosmic-ui .cosmic-nav-link:focus-visible,
html.cosmic-ui .cosmic-nav-group > summary:hover,
html.cosmic-ui .cosmic-nav-group > summary:focus-visible,
html.cosmic-ui .cosmic-tour-trigger:hover,
html.cosmic-ui .cosmic-tour-trigger:focus-visible {
    color: #4F238E;
    background: #F0E8FC;
}

html.cosmic-ui .cosmic-nav-link.active,
html.cosmic-ui .cosmic-nav-group.active > summary {
    color: #54269A;
    background: #EEE5FB;
    box-shadow: none;
}

html.cosmic-ui .cosmic-nav-panel {
    border-color: var(--border-subtle);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 55px rgba(66, 43, 95, .16);
}

html.cosmic-ui .cosmic-nav-panel a { color: var(--text-primary); }
html.cosmic-ui .sky-ticker {
    display: none !important;
}

html.cosmic-ui .container-fluid,
html.cosmic-ui .full-width-container {
    max-width: 1380px !important;
    margin-inline: auto;
}

html.cosmic-ui .cosmic-home-intro {
    max-width: 930px;
    padding: clamp(34px, 6vw, 78px) 0 clamp(24px, 4vw, 48px);
}

html.cosmic-ui .cosmic-home-intro .eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--color-purple);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .22em;
    text-transform: uppercase;
}

html.cosmic-ui .cosmic-home-intro h1 {
    margin: 0 0 12px;
    color: #241D33;
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(38px, 5.8vw, 72px);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.08;
}

html.cosmic-ui .cosmic-home-intro p {
    max-width: 820px;
    color: var(--text-secondary);
    font-size: clamp(16px, 1.7vw, 21px);
    line-height: 1.6;
}

html.cosmic-ui .cosmic-intent-section {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html.cosmic-ui .cosmic-intent-grid { gap: 18px; }
html.cosmic-ui .cosmic-intent-card {
    min-height: 182px;
    padding: 27px;
    border-color: var(--border-subtle);
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    color: var(--text-primary);
    box-shadow: 0 10px 28px rgba(66, 43, 95, .055);
}

html.cosmic-ui .cosmic-intent-card:hover,
html.cosmic-ui .cosmic-intent-card:focus-visible {
    border-color: #B69EE0;
    background: #FFFFFF;
    box-shadow: 0 20px 42px rgba(66, 43, 95, .11);
}

html.cosmic-ui .cosmic-intent-card .symbol { color: #756A86; }
html.cosmic-ui .cosmic-intent-card strong { font-size: 18px; }
html.cosmic-ui .cosmic-intent-card span:last-child { color: var(--text-secondary); font-size: 14px; }

html.cosmic-ui .cosmic-sky-preview,
html.cosmic-ui .cosmic-route-strip {
    margin-top: 22px;
    padding: clamp(23px, 3vw, 34px);
    border: 1px solid var(--border-subtle);
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(66, 43, 95, .055);
}

html.cosmic-ui .cosmic-sky-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

html.cosmic-ui .cosmic-sky-preview h2 { font: 700 18px/1.3 'Plus Jakarta Sans', sans-serif; }
html.cosmic-ui #cosmic-sky-status { color: var(--color-cyan); font-size: 13px; }
html.cosmic-ui .cosmic-sky-trinity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
html.cosmic-ui .cosmic-sky-trinity > div {
    min-height: 90px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border-radius: 18px;
    background: #EEE7FA;
}
html.cosmic-ui .cosmic-sky-trinity strong { color: var(--color-gold); font-size: 21px; }
html.cosmic-ui .cosmic-sky-trinity span { color: var(--text-secondary); font-size: 14px; }
html.cosmic-ui .cosmic-sky-preview > p { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); line-height: 1.55; }
html.cosmic-ui .cosmic-sky-preview > p strong { display: block; color: var(--text-primary); }

html.cosmic-ui .cosmic-route-strip { display: block; border-top: 1px solid var(--border-subtle); }
html.cosmic-ui .cosmic-route-strip > strong { display: flex; justify-content: space-between; color: var(--text-primary); font-size: 17px; }
html.cosmic-ui .cosmic-route-strip > strong span { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
html.cosmic-ui .cosmic-route-stops { margin-top: 18px; }
html.cosmic-ui .cosmic-route-stop { color: var(--text-secondary); }
html.cosmic-ui .cosmic-route-stop::before { background: #EAE2F5; }

html.cosmic-ui .card-friendly,
html.cosmic-ui .card-friendly-gold {
    border-color: var(--border-subtle);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
}

html.cosmic-ui .card-friendly:hover { border-color: #C7B5DF; box-shadow: var(--shadow-card); }
html.cosmic-ui .card-header-friendly { border-bottom-color: var(--border-subtle); }
html.cosmic-ui .card-title-friendly { color: #31263E; font-family: 'Cinzel', Georgia, serif; }
html.cosmic-ui .input-friendly {
    color: var(--text-primary);
    border-color: #D9CFE7;
    background: #FBF9FD;
}
html.cosmic-ui .input-friendly::placeholder { color: #948A9F; }
html.cosmic-ui .input-friendly:focus { border-color: var(--color-purple); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(117, 65, 216, .12); }

html.cosmic-ui .btn-friendly-gold {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #8050D1, #6733B9);
    box-shadow: 0 10px 24px rgba(103, 51, 185, .18);
}
html.cosmic-ui .btn-friendly-gold:hover { box-shadow: 0 14px 30px rgba(103, 51, 185, .26); }
html.cosmic-ui .btn-friendly-outline { color: #5E319C !important; border-color: #A98ACE; background: #FFFFFF; }

html.cosmic-ui .badge-pill-gold { color: #7A5200; background: #FFF7DD; border-color: #E7CC83; }
html.cosmic-ui .badge-pill-cyan { color: #125F70; background: #E8F7FA; border-color: #A8D7E0; }
html.cosmic-ui .badge-pill-emerald { color: #176A54; background: #E9F8F2; border-color: #A7DACB; }
html.cosmic-ui .badge-pill-purple { color: #6733B9; background: #F0E8FC; border-color: #CBB8E9; }

html.cosmic-ui .hero-banner-full {
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
    background: linear-gradient(135deg, #FFFFFF 0%, #F1EAFE 100%) !important;
    box-shadow: var(--shadow-soft);
}
html.cosmic-ui .hero-banner-full h1 { color: #2B2138; font-weight: 600; }
html.cosmic-ui .hero-banner-full p { color: var(--text-secondary); }

html.cosmic-ui .cosmic-breadcrumb { color: var(--text-secondary); }
html.cosmic-ui .cosmic-breadcrumb a { color: #6032A3; }
html.cosmic-ui .card-friendly [style*="background:"] { background: #F8F4FC !important; }
html.cosmic-ui .card-friendly [style*="color: #CBD5E1"],
html.cosmic-ui .card-friendly [style*="color:#CBD5E1"],
html.cosmic-ui .card-friendly [style*="color: #94A3B8"],
html.cosmic-ui .card-friendly [style*="color:#94A3B8"] { color: var(--text-secondary) !important; }
html.cosmic-ui .card-friendly [style*="color: #F8FAFC"] { color: var(--text-primary) !important; }

html.cosmic-ui .cosmic-tour-backdrop { background: rgba(34, 24, 48, .35); backdrop-filter: blur(2px); }
html.cosmic-ui .cosmic-tour-highlight { border-color: #9C6EDD; box-shadow: 0 0 0 7px rgba(117, 65, 216, .12), 0 0 38px rgba(117, 65, 216, .24); }
html.cosmic-ui .cosmic-tour-bubble { border-color: #D6C7EA; background: #FFFFFF; box-shadow: 0 26px 70px rgba(54, 34, 78, .25); }
html.cosmic-ui .cosmic-tour-bubble h2 { color: #2B2138; font-size: 21px; font-weight: 600; }
html.cosmic-ui .cosmic-tour-bubble p { color: var(--text-secondary); }
html.cosmic-ui .cosmic-tour-actions button { border-color: var(--border-subtle); color: var(--text-secondary); }
html.cosmic-ui .cosmic-tour-actions button.primary { color: #FFFFFF; background: #7541D8; }

@media (max-width: 900px) {
    html.cosmic-ui .navbar-full.cosmic-nav-ready {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 12px 16px 0;
    }
    html.cosmic-ui .brand::before { width: 46px; height: 46px; flex-basis: 46px; }
    html.cosmic-ui .brand::after { font-size: 21px; }
    html.cosmic-ui .cosmic-nav {
        position: relative;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 7px 10px;
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(max-content, 1fr));
        overflow: visible;
        border-top: 1px solid var(--border-subtle);
    }
    html.cosmic-ui .cosmic-tour-trigger {
        position: absolute;
        right: 14px;
        bottom: calc(100% + 17px);
        width: 40px;
        min-height: 40px;
        padding: 0;
        border: 0;
        font-size: 19px;
    }
    html.cosmic-ui .cosmic-tour-trigger span:last-child { display: none; }
    html.cosmic-ui .cosmic-nav-link,
    html.cosmic-ui .cosmic-nav-group > summary { min-height: 44px; padding: 8px 6px; font-size: 12px; }
    html.cosmic-ui .cosmic-nav-link { font-size: 0; }
    html.cosmic-ui .cosmic-nav-link::after { content: 'Mi carta'; font-size: 12px; }
    html.cosmic-ui .cosmic-nav-link[href="/tienda"]::after { content: 'Tienda'; }
    html.cosmic-ui .cosmic-nav-panel { top: 112px; }
    html.cosmic-ui .sky-ticker { display: none !important; }
    html.cosmic-ui .container-fluid { padding-inline: 18px !important; }
    html.cosmic-ui .cosmic-home-intro { padding-top: 38px; }
    html.cosmic-ui .cosmic-home-intro h1 { font-size: clamp(38px, 11vw, 54px); }
    html.cosmic-ui .cosmic-intent-card { min-height: 154px; }
    html.cosmic-ui .cosmic-sky-trinity > div { min-height: 82px; }
    html.cosmic-ui .cosmic-route-stops { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    html.cosmic-ui .cosmic-home-intro p { font-size: 16px; }
    html.cosmic-ui .cosmic-intent-card,
    html.cosmic-ui .cosmic-sky-preview,
    html.cosmic-ui .cosmic-route-strip { border-radius: 22px; }
    html.cosmic-ui .cosmic-sky-trinity { gap: 8px; }
    html.cosmic-ui .cosmic-sky-trinity span { font-size: 12px; }
    html.cosmic-ui .cosmic-route-stops { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GUÍA VISUAL 2026 · CIELO ABIERTO / CIELO RITUAL
   Sistema editorial definitivo: Cormorant Garamond, Manrope y la paleta
   marfil, ciruela, lavanda, cobre y verde profundo de AstrologIA ONLINE.
   ========================================================================== */

@font-face {
    font-family: 'AstrologIA Display';
    src: url('/assets/fonts/CormorantGaramond-latin-wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: 'AstrologIA Sans';
    src: url('/assets/fonts/Manrope-wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

html.cosmic-ui {
    --brand-ink: #211A2B;
    --brand-muted: #716877;
    --brand-subtle: #958A95;
    --brand-bg: #F7F1E7;
    --brand-surface: #FFFDFC;
    --brand-soft: #F3EBDD;
    --brand-plum: #604275;
    --brand-lavender: #A88CC8;
    --brand-copper: #B7834B;
    --brand-sage: #54746B;
    --brand-border: #E2D4C5;
    --brand-shadow: 0 18px 55px rgba(62, 45, 67, .08);
    --brand-shadow-hover: 0 24px 64px rgba(62, 45, 67, .13);
    --bg-main: var(--brand-bg);
    --bg-surface: var(--brand-surface);
    --bg-surface-hover: #FBF6EF;
    --bg-glass: rgba(255, 253, 252, .92);
    --bg-glass-card: rgba(255, 253, 252, .98);
    --color-gold: var(--brand-copper);
    --color-gold-light: #D6A66F;
    --color-gold-glow: rgba(183, 131, 75, .17);
    --color-cyan: var(--brand-sage);
    --color-cyan-glow: rgba(84, 116, 107, .14);
    --color-purple: var(--brand-plum);
    --color-purple-glow: rgba(96, 66, 117, .15);
    --color-emerald: var(--brand-sage);
    --color-rose: #9B5C76;
    --color-coral: #A05D57;
    --text-primary: var(--brand-ink);
    --text-secondary: var(--brand-muted);
    --text-muted: var(--brand-subtle);
    --text-highlight: #130F19;
    --border-subtle: var(--brand-border);
    --border-focus: rgba(96, 66, 117, .46);
    --border-gold: rgba(183, 131, 75, .42);
    --shadow-soft: var(--brand-shadow);
    --shadow-card: var(--brand-shadow-hover);
    color-scheme: light;
    background: var(--brand-bg);
}

html.cosmic-ui[data-cosmic-theme='ritual'] {
    --brand-ink: #F3EBDD;
    --brand-muted: #C4B8C8;
    --brand-subtle: #94889A;
    --brand-bg: #0D0B18;
    --brand-surface: #171121;
    --brand-soft: #21172E;
    --brand-plum: #A88CC8;
    --brand-lavender: #B79AD5;
    --brand-copper: #C18C5C;
    --brand-sage: #75958C;
    --brand-border: rgba(168, 140, 200, .28);
    --brand-shadow: 0 18px 58px rgba(0, 0, 0, .28);
    --brand-shadow-hover: 0 28px 72px rgba(0, 0, 0, .4);
    --text-highlight: #FFF9EF;
    --bg-surface-hover: #261A34;
    --bg-glass: rgba(23, 17, 33, .94);
    --bg-glass-card: rgba(33, 23, 46, .92);
    --color-gold-light: #E2BA8D;
    --color-gold-glow: rgba(193, 140, 92, .22);
    --color-cyan-glow: rgba(117, 149, 140, .2);
    --color-purple-glow: rgba(168, 140, 200, .2);
    --color-rose: #C782A0;
    --color-coral: #D2877D;
    --border-focus: rgba(183, 154, 213, .58);
    --border-gold: rgba(193, 140, 92, .46);
    color-scheme: dark;
}

html.cosmic-ui body {
    min-height: 100vh;
    color: var(--brand-ink);
    background-color: var(--brand-bg);
    background-image:
        radial-gradient(circle at 7% 0%, rgba(168, 140, 200, .13), transparent 28rem),
        radial-gradient(circle at 94% 90%, rgba(84, 116, 107, .11), transparent 32rem),
        linear-gradient(180deg, var(--brand-bg), var(--brand-soft));
    background-attachment: fixed;
    font-family: 'AstrologIA Sans', Manrope, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.68;
}

html.cosmic-ui[data-cosmic-theme='ritual'] body {
    background-image:
        radial-gradient(circle at 12% 4%, rgba(96, 66, 117, .3), transparent 31rem),
        radial-gradient(circle at 92% 84%, rgba(84, 116, 107, .17), transparent 34rem),
        linear-gradient(180deg, #0D0B18, #120D1D 58%, #0D0B18);
}

html.cosmic-ui body::before {
    opacity: .18;
    background-image:
        radial-gradient(circle, var(--brand-copper) .7px, transparent .9px),
        radial-gradient(circle, var(--brand-plum) .65px, transparent .85px);
    background-position: 0 0, 22px 27px;
    background-size: 58px 58px, 73px 73px;
    mask-image: linear-gradient(to bottom, #000, transparent 45%);
}

html.cosmic-ui ::selection { color: var(--brand-bg); background: var(--brand-plum); }
html.cosmic-ui :focus-visible { outline-color: var(--border-focus); }

html.cosmic-ui h1,
html.cosmic-ui h2,
html.cosmic-ui h3,
html.cosmic-ui h4,
html.cosmic-ui .card-title-friendly {
    color: var(--brand-ink);
    font-family: 'AstrologIA Display', 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -.025em;
}

html.cosmic-ui p,
html.cosmic-ui li,
html.cosmic-ui label { color: inherit; }
html.cosmic-ui a { text-underline-offset: .2em; }

/* Cabecera de marca */
html.cosmic-ui .navbar-full {
    min-height: 82px;
    padding: 10px clamp(20px, 4vw, 68px);
    gap: 26px;
    border-color: var(--brand-border);
    background: color-mix(in srgb, var(--brand-surface) 94%, transparent);
    box-shadow: 0 8px 32px rgba(59, 43, 62, .055);
}

html.cosmic-ui .brand {
    width: clamp(190px, 18vw, 256px);
    height: 62px;
    justify-content: flex-start;
    color: var(--brand-ink);
}

html.cosmic-ui .brand::before {
    content: '';
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: url('/assets/brand/logo-propuesta.svg') left center / contain no-repeat;
    box-shadow: none;
}

html.cosmic-ui[data-cosmic-theme='ritual'] .brand::before {
    background-image: url('/assets/brand/logo-propuesta-oscuro.svg');
}

html.cosmic-ui .brand::after,
html.cosmic-ui .brand-logo-img { display: none !important; }
html.cosmic-ui .brand:hover { transform: translateY(-1px); }

html.cosmic-ui .cosmic-nav {
    gap: 4px;
    font-family: 'AstrologIA Sans', Manrope, sans-serif;
}

html.cosmic-ui .cosmic-nav-link,
html.cosmic-ui .cosmic-nav-group > summary,
html.cosmic-ui .cosmic-tour-trigger,
html.cosmic-ui .cosmic-theme-toggle {
    min-height: 43px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 13px;
    color: var(--brand-muted);
    background: transparent;
    font: 650 12px/1.2 'AstrologIA Sans', Manrope, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

html.cosmic-ui .cosmic-nav-link:hover,
html.cosmic-ui .cosmic-nav-link:focus-visible,
html.cosmic-ui .cosmic-nav-group > summary:hover,
html.cosmic-ui .cosmic-nav-group > summary:focus-visible,
html.cosmic-ui .cosmic-tour-trigger:hover,
html.cosmic-ui .cosmic-tour-trigger:focus-visible,
html.cosmic-ui .cosmic-theme-toggle:hover,
html.cosmic-ui .cosmic-theme-toggle:focus-visible {
    color: var(--brand-ink);
    border-color: var(--brand-border);
    background: var(--brand-soft);
    transform: translateY(-1px);
}

html.cosmic-ui .cosmic-nav-link.active,
html.cosmic-ui .cosmic-nav-group.active > summary {
    color: #FFFDFC;
    border-color: var(--brand-plum);
    background: var(--brand-plum);
}

html.cosmic-ui .cosmic-tour-trigger {
    color: var(--brand-plum);
    border-color: color-mix(in srgb, var(--brand-plum) 35%, transparent);
}

html.cosmic-ui .cosmic-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--brand-copper);
    border-color: color-mix(in srgb, var(--brand-copper) 38%, transparent);
}

html.cosmic-ui .cosmic-nav-panel {
    border-color: var(--brand-border);
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow-hover);
}

html.cosmic-ui .cosmic-nav-panel a { color: var(--brand-ink); }
html.cosmic-ui .cosmic-nav-panel a:hover,
html.cosmic-ui .cosmic-nav-panel a:focus-visible,
html.cosmic-ui .cosmic-nav-panel a[aria-current='page'] { background: var(--brand-soft); }
html.cosmic-ui .cosmic-nav-panel span { color: var(--brand-muted); }

/* Contenedores, titulares y portada */
html.cosmic-ui .container-fluid,
html.cosmic-ui .full-width-container {
    width: 100%;
    max-width: 1380px !important;
    margin-inline: auto;
    padding-inline: clamp(18px, 3.8vw, 58px) !important;
}

html.cosmic-ui main.container-fluid { padding-top: clamp(26px, 4vw, 48px) !important; }
html.cosmic-ui .sky-ticker { display: none !important; }

html.cosmic-ui .cosmic-home-intro {
    isolation: isolate;
    position: relative;
    max-width: none;
    min-height: clamp(410px, 45vw, 535px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 28px;
    padding: clamp(36px, 6vw, 76px) clamp(28px, 5vw, 70px);
    padding-right: min(48%, 630px);
    border: 1px solid var(--brand-border);
    border-radius: 36px;
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow);
}

html.cosmic-ui .cosmic-home-intro::before {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 55%;
    background:
        linear-gradient(90deg, var(--brand-surface), transparent 32%),
        linear-gradient(0deg, rgba(13, 11, 24, .24), transparent 36%),
        url('/assets/mascots/nebula-orion.webp') 50% 13% / cover no-repeat;
    mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}

html.cosmic-ui .cosmic-home-intro .eyebrow {
    color: var(--brand-plum);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .22em;
}

html.cosmic-ui .cosmic-home-intro h1 {
    max-width: 760px;
    margin: 8px 0 13px;
    color: var(--brand-ink);
    font-family: 'AstrologIA Display', 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(48px, 6.5vw, 86px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.055em;
}

html.cosmic-ui .cosmic-home-intro p {
    max-width: 650px;
    color: var(--brand-muted);
    font-size: clamp(16px, 1.55vw, 20px);
}

/* Tarjetas y bloques funcionales */
html.cosmic-ui .cosmic-intent-section { margin-bottom: 30px; }
html.cosmic-ui .cosmic-intent-grid { gap: 16px; }
html.cosmic-ui .cosmic-intent-card,
html.cosmic-ui .cosmic-sky-preview,
html.cosmic-ui .cosmic-route-strip,
html.cosmic-ui .card-friendly,
html.cosmic-ui .card-friendly-gold {
    border: 1px solid var(--brand-border);
    background: var(--brand-surface);
    color: var(--brand-ink);
    box-shadow: var(--brand-shadow);
    backdrop-filter: none;
}

html.cosmic-ui .cosmic-intent-card,
html.cosmic-ui .card-friendly {
    position: relative;
    overflow: clip;
}

html.cosmic-ui .cosmic-intent-card::before,
html.cosmic-ui .card-friendly::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-plum), var(--brand-copper), var(--brand-sage));
    opacity: .88;
}

html.cosmic-ui .cosmic-intent-card {
    min-height: 175px;
    padding: 28px;
    border-radius: 26px;
}

html.cosmic-ui .cosmic-intent-card:hover,
html.cosmic-ui .cosmic-intent-card:focus-visible,
html.cosmic-ui .card-friendly:hover {
    border-color: color-mix(in srgb, var(--brand-plum) 54%, var(--brand-border));
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow-hover);
}

html.cosmic-ui .cosmic-intent-card .symbol { color: var(--brand-copper); }
html.cosmic-ui .cosmic-intent-card strong { color: var(--brand-ink); font-size: 18px; }
html.cosmic-ui .cosmic-intent-card span:last-child { color: var(--brand-muted); font-size: 13px; }

html.cosmic-ui .cosmic-sky-preview,
html.cosmic-ui .cosmic-route-strip {
    border-radius: 27px;
    padding: clamp(24px, 3vw, 36px);
}

html.cosmic-ui .cosmic-sky-preview h2,
html.cosmic-ui .cosmic-route-strip > strong {
    color: var(--brand-ink);
    font-family: 'AstrologIA Sans', Manrope, sans-serif;
}

html.cosmic-ui #cosmic-sky-status { color: var(--brand-sage); }
html.cosmic-ui .cosmic-sky-trinity > div { background: var(--brand-soft); }
html.cosmic-ui .cosmic-sky-trinity strong { color: var(--brand-copper); }
html.cosmic-ui .cosmic-sky-trinity span,
html.cosmic-ui .cosmic-sky-preview > p,
html.cosmic-ui .cosmic-route-strip > strong span,
html.cosmic-ui .cosmic-route-stop { color: var(--brand-muted); }
html.cosmic-ui .cosmic-route-stop::before { background: var(--brand-soft); }
html.cosmic-ui .cosmic-route-stop.done::before { background: linear-gradient(90deg, var(--brand-copper), var(--brand-plum)); }

html.cosmic-ui .card-friendly {
    border-radius: 25px;
    padding: clamp(22px, 2.5vw, 34px);
}

html.cosmic-ui .card-header-friendly { border-bottom-color: var(--brand-border); }
html.cosmic-ui .card-title-friendly { color: var(--brand-ink); font-size: clamp(19px, 1.65vw, 25px); }

html.cosmic-ui .input-friendly,
html.cosmic-ui .facet-input,
html.cosmic-ui .facet-select,
html.cosmic-ui input:not([type='checkbox']):not([type='radio']):not([type='range']),
html.cosmic-ui textarea,
html.cosmic-ui select {
    color: var(--brand-ink);
    border-color: var(--brand-border);
    background: color-mix(in srgb, var(--brand-surface) 82%, var(--brand-soft));
    border-radius: 13px;
    font-family: 'AstrologIA Sans', Manrope, sans-serif;
}

html.cosmic-ui input::placeholder,
html.cosmic-ui textarea::placeholder { color: var(--brand-subtle); opacity: 1; }
html.cosmic-ui .input-friendly:focus,
html.cosmic-ui .facet-input:focus,
html.cosmic-ui .facet-select:focus,
html.cosmic-ui input:focus,
html.cosmic-ui textarea:focus,
html.cosmic-ui select:focus {
    border-color: var(--brand-plum);
    background: var(--brand-surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-plum) 15%, transparent);
}

html.cosmic-ui .btn-friendly-gold,
html.cosmic-ui .cta {
    min-height: 46px;
    border: 1px solid var(--brand-plum);
    border-radius: 999px;
    color: #FFFDFC !important;
    background: var(--brand-plum);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-plum) 22%, transparent);
    font-family: 'AstrologIA Sans', Manrope, sans-serif;
    font-weight: 700;
    letter-spacing: .015em;
}

html.cosmic-ui .btn-friendly-gold:hover,
html.cosmic-ui .cta:hover {
    border-color: var(--brand-copper);
    background: color-mix(in srgb, var(--brand-plum) 88%, var(--brand-copper));
    box-shadow: 0 15px 34px color-mix(in srgb, var(--brand-plum) 30%, transparent);
}

html.cosmic-ui .btn-friendly-outline {
    border-color: var(--brand-sage);
    color: var(--brand-sage) !important;
    background: transparent;
}

html.cosmic-ui .badge-pill { border-radius: 999px; }
html.cosmic-ui .badge-pill-gold { color: #76502C; border-color: #DFC4A7; background: #F8EBDC; }
html.cosmic-ui .badge-pill-cyan,
html.cosmic-ui .badge-pill-emerald { color: #365F58; border-color: #B8D0CA; background: #E8F0ED; }
html.cosmic-ui .badge-pill-purple { color: #604275; border-color: #D8C8E5; background: #F0E7F6; }

html.cosmic-ui[data-cosmic-theme='ritual'] .badge-pill-gold { color: #E8C49B; border-color: rgba(193,140,92,.45); background: rgba(193,140,92,.12); }
html.cosmic-ui[data-cosmic-theme='ritual'] .badge-pill-cyan,
html.cosmic-ui[data-cosmic-theme='ritual'] .badge-pill-emerald { color: #A9CDC3; border-color: rgba(117,149,140,.45); background: rgba(117,149,140,.12); }
html.cosmic-ui[data-cosmic-theme='ritual'] .badge-pill-purple { color: #D2B9E7; border-color: rgba(168,140,200,.48); background: rgba(168,140,200,.12); }

/* Heroes editoriales de las herramientas */
html.cosmic-ui .hero-bg-natal { --brand-hero: url('/assets/images/hero_carta_natal.jpg'); }
html.cosmic-ui .hero-bg-solar { --brand-hero: url('/assets/images/hero_revolucion_solar.jpg'); }
html.cosmic-ui .hero-bg-quiz { --brand-hero: url('/assets/images/hero_astro_quiz.jpg'); }
html.cosmic-ui .hero-bg-transitos { --brand-hero: url('/assets/images/hero_transitos_tiempo.jpg'); }
html.cosmic-ui .hero-bg-sinastria { --brand-hero: url('/assets/images/hero_sinastria_parejas.jpg'); }
html.cosmic-ui .hero-bg-enciclopedia { --brand-hero: url('/assets/images/hero_enciclopedia_cosmica.jpg'); }
html.cosmic-ui .hero-bg-boveda { --brand-hero: url('/assets/images/hero_boveda_astral.jpg'); }
html.cosmic-ui .hero-bg-astrocartografia { --brand-hero: url('/assets/images/hero_astrocartografia.jpg'); }
html.cosmic-ui .hero-bg-mentor { --brand-hero: url('/assets/images/hero_astro_mentor.jpg'); }
html.cosmic-ui .hero-bg-tienda { --brand-hero: url('/assets/images/hero_tienda_mistica.jpg'); }
html.cosmic-ui .hero-bg-jung { --brand-hero: url('/assets/images/hero_guia_jung.jpg'); }
html.cosmic-ui .hero-bg-casas { --brand-hero: url('/assets/images/hero_guia_12casas.jpg'); }
html.cosmic-ui .hero-bg-pluton { --brand-hero: url('/assets/images/hero_guia_pluton.jpg'); }

html.cosmic-ui .hero-banner-full,
html.cosmic-ui .card-friendly[class*='hero-bg-'] {
    min-height: 225px;
    padding: clamp(30px, 4.5vw, 58px);
    border-color: var(--brand-border) !important;
    border-radius: 30px;
    color: var(--brand-ink);
    background-color: var(--brand-surface) !important;
    background-image:
        linear-gradient(90deg, var(--brand-surface) 0%, var(--brand-surface) 48%, color-mix(in srgb, var(--brand-surface) 86%, transparent) 64%, transparent 100%),
        var(--brand-hero, linear-gradient(135deg, var(--brand-soft), var(--brand-surface))) !important;
    background-position: center, right center !important;
    background-size: cover, 52% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: var(--brand-shadow);
}

html.cosmic-ui[data-cosmic-theme='ritual'] .hero-banner-full,
html.cosmic-ui[data-cosmic-theme='ritual'] .card-friendly[class*='hero-bg-'] {
    background-image:
        linear-gradient(90deg, var(--brand-surface) 0%, var(--brand-surface) 47%, rgba(23,17,33,.9) 65%, rgba(23,17,33,.22) 100%),
        var(--brand-hero, linear-gradient(135deg, var(--brand-soft), var(--brand-surface))) !important;
}

html.cosmic-ui .hero-banner-full h1,
html.cosmic-ui .hero-banner-full h2,
html.cosmic-ui .card-friendly[class*='hero-bg-'] h1,
html.cosmic-ui .card-friendly[class*='hero-bg-'] h2 {
    max-width: 780px;
    color: var(--brand-ink);
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 500;
    line-height: 1;
}

html.cosmic-ui .hero-banner-full p,
html.cosmic-ui .card-friendly[class*='hero-bg-'] p { max-width: 660px; color: var(--brand-muted); }

/* Tienda y enciclopedia */
html.cosmic-ui .store-cat-bar { scrollbar-color: var(--brand-copper) transparent; }
html.cosmic-ui .store-cat-btn,
html.cosmic-ui .subcat-pill,
html.cosmic-ui .page-btn {
    border-color: var(--brand-border);
    color: var(--brand-muted);
    background: var(--brand-surface);
    font-family: 'AstrologIA Sans', Manrope, sans-serif;
}

html.cosmic-ui .store-cat-btn:hover,
html.cosmic-ui .subcat-pill:hover,
html.cosmic-ui .page-btn:hover:not(:disabled) { color: var(--brand-ink); border-color: var(--brand-plum); background: var(--brand-soft); }
html.cosmic-ui .store-cat-btn.active,
html.cosmic-ui .subcat-pill.active {
    color: #171123;
    border-color: var(--brand-plum);
    background: var(--brand-plum);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-plum) 20%, transparent);
}

html.cosmic-ui .subcat-bar,
html.cosmic-ui .search-facets-bar { border-color: var(--brand-border); background: color-mix(in srgb, var(--brand-surface) 78%, transparent); }

html.cosmic-ui .product-card,
html.cosmic-ui .entity-card,
html.cosmic-ui .detail-display-box {
    border-color: var(--brand-border);
    border-radius: 22px;
    color: var(--brand-ink);
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow);
}

html.cosmic-ui .product-card:hover,
html.cosmic-ui .entity-card:hover,
html.cosmic-ui .entity-card.active {
    border-color: var(--brand-copper);
    box-shadow: var(--brand-shadow-hover);
}

html.cosmic-ui .product-img-box { border-color: var(--brand-border); background: var(--brand-soft); }
html.cosmic-ui .product-badge { color: #76502C; border-color: #DFC4A7; background: #F8EBDC; }
html.cosmic-ui .amazon-overlay-tag { color: #FFFDFC; border-color: rgba(255,255,255,.18); background: rgba(33,26,43,.86); }
html.cosmic-ui .prime-tag { color: var(--brand-sage); }
html.cosmic-ui .pagination-container { border-top-color: var(--brand-border); }

/* Guías editoriales estáticas */
html.cosmic-ui .page { width: min(980px, calc(100% - 36px)); }
html.cosmic-ui .page > .hero,
html.cosmic-ui .page > .article {
    border-color: var(--brand-border);
    border-radius: 27px;
    color: var(--brand-ink);
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow);
}

html.cosmic-ui .page > .hero {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--brand-lavender) 22%, transparent), transparent 46%), var(--brand-surface);
}

html.cosmic-ui .page .nav a,
html.cosmic-ui .page .article a { color: var(--brand-plum); }
html.cosmic-ui .page .eyebrow { color: var(--brand-copper); }
html.cosmic-ui .page h1,
html.cosmic-ui .page h2,
html.cosmic-ui .page .idea strong,
html.cosmic-ui .page .criterion strong,
html.cosmic-ui .page .step strong { color: var(--brand-ink); }
html.cosmic-ui .page .idea,
html.cosmic-ui .page .criterion,
html.cosmic-ui .page .step { background: var(--brand-soft); }
html.cosmic-ui .page footer { color: var(--brand-muted); }

/* Corrige colores oscuros heredados en bloques y resultados dinámicos */
html.cosmic-ui [style*='background: rgba(11'],
html.cosmic-ui [style*='background:rgba(11'],
html.cosmic-ui [style*='background: rgba(15'],
html.cosmic-ui [style*='background:rgba(15'],
html.cosmic-ui [style*='background: rgba(18'],
html.cosmic-ui [style*='background:rgba(18'] { background-color: var(--brand-soft) !important; }

html.cosmic-ui [style*='color: #F8FAFC'],
html.cosmic-ui [style*='color:#F8FAFC'],
html.cosmic-ui [style*='color: #CBD5E1'],
html.cosmic-ui [style*='color:#CBD5E1'] { color: var(--brand-ink) !important; }

html.cosmic-ui [style*='color: #94A3B8'],
html.cosmic-ui [style*='color:#94A3B8'] { color: var(--brand-muted) !important; }

/* Tour guiado con las mascotas de marca */
html.cosmic-ui .cosmic-tour-backdrop { background: rgba(13, 11, 24, .48); backdrop-filter: blur(4px); }
html.cosmic-ui .cosmic-tour-highlight {
    border-color: var(--brand-copper);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-copper) 16%, transparent), 0 0 42px color-mix(in srgb, var(--brand-copper) 28%, transparent);
}

html.cosmic-ui .cosmic-tour-bubble {
    border-color: var(--brand-border);
    border-radius: 23px;
    color: var(--brand-ink);
    background: var(--brand-surface);
    box-shadow: 0 30px 84px rgba(13, 11, 24, .28);
}

html.cosmic-ui .cosmic-tour-heading { color: var(--brand-plum); }
html.cosmic-ui .cosmic-guide-avatar {
    width: 44px;
    height: 44px;
    display: block;
    flex: 0 0 44px;
    overflow: hidden;
    border: 2px solid var(--brand-copper);
    border-radius: 50%;
    background: #1A101C;
}

html.cosmic-ui .cosmic-guide-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.9);
}

html.cosmic-ui .cosmic-guide-avatar.nebula img { object-position: 25% 9%; }
html.cosmic-ui .cosmic-guide-avatar.orion img { object-position: 75% 8%; }
html.cosmic-ui .cosmic-tour-bubble h2 { color: var(--brand-ink); font-size: 26px; font-weight: 550; }
html.cosmic-ui .cosmic-tour-bubble p { color: var(--brand-muted); }
html.cosmic-ui .cosmic-tour-actions button { color: var(--brand-muted); border-color: var(--brand-border); }
html.cosmic-ui .cosmic-tour-actions button.primary { color: #FFFDFC; background: var(--brand-plum); }

@media (max-width: 1120px) {
    html.cosmic-ui .navbar-full { align-items: flex-start; }
    html.cosmic-ui .cosmic-nav { flex-wrap: wrap; }
    html.cosmic-ui .cosmic-home-intro { padding-right: 44%; }
}

@media (max-width: 900px) {
    html.cosmic-ui .navbar-full.cosmic-nav-ready {
        padding: 9px 14px 0;
        grid-template-columns: 1fr auto auto;
        align-items: center;
    }

    html.cosmic-ui .brand { width: 192px; height: 54px; }
    html.cosmic-ui .cosmic-nav {
        width: calc(100% + 28px);
        margin-inline: -14px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 7px 10px;
        border-top-color: var(--brand-border);
        background: color-mix(in srgb, var(--brand-surface) 92%, transparent);
    }

    html.cosmic-ui .cosmic-tour-trigger,
    html.cosmic-ui .cosmic-theme-toggle {
        position: absolute;
        bottom: calc(100% + 16px);
        width: 41px;
        min-height: 41px;
        padding: 0;
    }

    html.cosmic-ui .cosmic-tour-trigger { right: 61px; }
    html.cosmic-ui .cosmic-theme-toggle { right: 14px; }
    html.cosmic-ui .cosmic-tour-trigger span:last-child,
    html.cosmic-ui .cosmic-theme-toggle span:last-child { display: none; }
    html.cosmic-ui .cosmic-nav-link { font-size: 10.5px !important; }
    html.cosmic-ui .cosmic-nav-link::after { content: none !important; }
    html.cosmic-ui .cosmic-nav-group > summary { font-size: 10.5px; }
    html.cosmic-ui .cosmic-nav-panel { top: 112px; }

    html.cosmic-ui .cosmic-home-intro {
        min-height: 470px;
        padding-right: 42%;
        border-radius: 30px;
    }

    html.cosmic-ui .cosmic-home-intro::before { width: 58%; }
    html.cosmic-ui .cosmic-home-intro h1 { font-size: clamp(44px, 8vw, 64px); }
    html.cosmic-ui .hero-banner-full,
    html.cosmic-ui .card-friendly[class*='hero-bg-'] { background-size: cover, 64% 100% !important; }
}

@media (max-width: 660px) {
    html.cosmic-ui main.container-fluid { padding-top: 20px !important; }
    html.cosmic-ui .cosmic-home-intro {
        min-height: 670px;
        justify-content: flex-start;
        padding: 34px 25px 330px;
        border-radius: 26px;
    }

    html.cosmic-ui .cosmic-home-intro::before {
        inset: auto 0 0;
        width: 100%;
        height: 355px;
        background:
            linear-gradient(180deg, var(--brand-surface), transparent 30%),
            linear-gradient(0deg, rgba(13,11,24,.18), transparent 38%),
            url('/assets/mascots/nebula-orion.webp') center 13% / cover no-repeat;
        mask-image: linear-gradient(180deg, transparent, #000 24%);
    }

    html.cosmic-ui .cosmic-home-intro h1 { font-size: clamp(44px, 14vw, 62px); }
    html.cosmic-ui .cosmic-intent-card { min-height: 130px; }
    html.cosmic-ui .cosmic-sky-trinity { gap: 8px; }
    html.cosmic-ui .cosmic-route-stops { grid-template-columns: 1fr; }
    html.cosmic-ui .grid-fluid-12 { gap: 15px; }
    html.cosmic-ui .hero-banner-full,
    html.cosmic-ui .card-friendly[class*='hero-bg-'] {
        min-height: 300px;
        align-items: flex-start;
        padding-bottom: 140px;
        background-image:
            linear-gradient(180deg, var(--brand-surface) 0%, var(--brand-surface) 50%, color-mix(in srgb, var(--brand-surface) 76%, transparent) 74%, transparent 100%),
            var(--brand-hero, linear-gradient(135deg, var(--brand-soft), var(--brand-surface))) !important;
        background-position: center, center bottom !important;
        background-size: cover, 100% 62% !important;
    }

    html.cosmic-ui[data-cosmic-theme='ritual'] .hero-banner-full,
    html.cosmic-ui[data-cosmic-theme='ritual'] .card-friendly[class*='hero-bg-'] {
        background-image:
            linear-gradient(180deg, var(--brand-surface) 0%, var(--brand-surface) 48%, rgba(23,17,33,.84) 72%, transparent 100%),
            var(--brand-hero, linear-gradient(135deg, var(--brand-soft), var(--brand-surface))) !important;
    }

    html.cosmic-ui .product-grid { grid-template-columns: 1fr; }
    html.cosmic-ui .card-friendly { border-radius: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    html.cosmic-ui *,
    html.cosmic-ui *::before,
    html.cosmic-ui *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   CIELO SIMPLE 2026 · DIRECCIÓN VISUAL DE REFERENCIA
   Interfaz serena, ligera y guiada: lavanda, blanco, violeta, oro y cian.
   ========================================================================== */

html.cosmic-ui {
    --brand-ink: #211A35;
    --brand-muted: #675D7A;
    --brand-subtle: #867C96;
    --brand-bg: #F5F2FB;
    --brand-surface: #FFFFFF;
    --brand-soft: #EEE8FA;
    --brand-plum: #6B3CC7;
    --brand-lavender: #B99AFF;
    --brand-copper: #8A5A00;
    --brand-sage: #09657A;
    --brand-border: #DED6EB;
    --brand-shadow: 0 12px 34px rgba(45, 27, 75, .07);
    --brand-shadow-hover: 0 18px 46px rgba(45, 27, 75, .12);
    --bg-main: var(--brand-bg);
    --bg-surface: var(--brand-surface);
    --bg-surface-hover: var(--brand-soft);
    --text-primary: var(--brand-ink);
    --text-secondary: var(--brand-muted);
    --text-muted: var(--brand-subtle);
    --border-subtle: var(--brand-border);
    --color-purple: var(--brand-plum);
    --color-gold: var(--brand-copper);
    --color-cyan: var(--brand-sage);
    background: var(--brand-bg);
}

html.cosmic-ui[data-cosmic-theme='ritual'] {
    --brand-ink: #F8F5FF;
    --brand-muted: #B7AEC8;
    --brand-subtle: #8F85A3;
    --brand-bg: #080712;
    --brand-surface: #121020;
    --brand-soft: #1A1730;
    --brand-plum: #B99AFF;
    --brand-lavender: #CBB5FF;
    --brand-copper: #FFD47A;
    --brand-sage: #72D9F0;
    --brand-border: #312C48;
    --brand-shadow: 0 14px 38px rgba(0, 0, 0, .28);
    --brand-shadow-hover: 0 22px 52px rgba(0, 0, 0, .42);
}

html.cosmic-ui body,
html.cosmic-ui[data-cosmic-theme='ritual'] body {
    background-color: var(--brand-bg);
    background-image:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--brand-plum) 13%, transparent), transparent 34rem),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--brand-sage) 9%, transparent), transparent 32rem);
}

html.cosmic-ui body::before { display: none; }

/* Cabecera compacta y comprensible */
html.cosmic-ui .navbar-full {
    min-height: 72px;
    padding: 12px clamp(18px, 3.5vw, 48px);
    gap: 20px;
    background: color-mix(in srgb, var(--brand-surface) 95%, transparent);
    border-color: var(--brand-border);
    box-shadow: none;
}

html.cosmic-ui .brand {
    width: auto;
    min-width: 178px;
    height: 42px;
    gap: 11px;
}

html.cosmic-ui .brand::before {
    content: '✦';
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border: 0;
    border-radius: 50%;
    color: var(--brand-bg);
    background: linear-gradient(135deg, var(--brand-copper), var(--brand-plum));
    box-shadow: none;
    font: 18px/1 'AstrologIA Sans', Manrope, sans-serif;
}

html.cosmic-ui[data-cosmic-theme='ritual'] .brand::before {
    background-image: linear-gradient(135deg, var(--brand-copper), var(--brand-plum));
}

html.cosmic-ui .brand::after {
    content: 'AstrologIA';
    display: block !important;
    color: var(--brand-ink);
    font: 600 25px/1 'AstrologIA Display', 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -.025em;
}

html.cosmic-ui .cosmic-nav { gap: 3px; }
html.cosmic-ui .cosmic-nav-link,
html.cosmic-ui .cosmic-nav-group > summary,
html.cosmic-ui .cosmic-tour-trigger,
html.cosmic-ui .cosmic-theme-toggle {
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--brand-muted);
    font-size: 12px;
    font-weight: 600;
}

html.cosmic-ui .cosmic-nav-link:hover,
html.cosmic-ui .cosmic-nav-link:focus-visible,
html.cosmic-ui .cosmic-nav-group > summary:hover,
html.cosmic-ui .cosmic-nav-group > summary:focus-visible,
html.cosmic-ui .cosmic-tour-trigger:hover,
html.cosmic-ui .cosmic-tour-trigger:focus-visible,
html.cosmic-ui .cosmic-theme-toggle:hover,
html.cosmic-ui .cosmic-theme-toggle:focus-visible,
html.cosmic-ui .cosmic-nav-link.active,
html.cosmic-ui .cosmic-nav-group.active > summary {
    color: var(--brand-ink);
    border-color: transparent;
    background: var(--brand-soft);
    box-shadow: none;
    transform: none;
}

html.cosmic-ui .cosmic-tour-trigger { color: var(--brand-plum); }
html.cosmic-ui .cosmic-theme-toggle { color: var(--brand-copper); }
html.cosmic-ui .cosmic-nav-panel {
    border-radius: 16px;
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow-hover);
}

/* Portada centrada en decisiones, sin ilustración dominante */
html.cosmic-ui .container-fluid,
html.cosmic-ui .full-width-container { max-width: 1240px !important; }

html.cosmic-ui main.container-fluid { padding-top: clamp(28px, 5vw, 58px) !important; }

html.cosmic-ui .cosmic-home-intro {
    min-height: 0;
    max-width: 850px;
    display: block;
    overflow: visible;
    margin: 0 0 clamp(28px, 4vw, 44px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.cosmic-ui .cosmic-home-intro::before { display: none; }
html.cosmic-ui .cosmic-home-intro .eyebrow {
    margin-bottom: 9px;
    color: var(--brand-plum);
    font-size: 12px;
    letter-spacing: .18em;
}

html.cosmic-ui .cosmic-home-intro h1 {
    max-width: 760px;
    margin: 0 0 12px;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 450;
    line-height: 1.02;
    letter-spacing: -.045em;
}

html.cosmic-ui .cosmic-home-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--brand-muted);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.55;
}

html.cosmic-ui .cosmic-intent-section {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(265px, .6fr);
    align-items: stretch;
    gap: 22px;
    margin-bottom: 34px;
}

html.cosmic-ui .cosmic-intent-grid {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

html.cosmic-ui .cosmic-sky-preview {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

html.cosmic-ui .cosmic-route-strip {
    grid-column: 1 / -1;
    margin: 0;
}

html.cosmic-ui .cosmic-intent-card,
html.cosmic-ui .cosmic-sky-preview,
html.cosmic-ui .cosmic-route-strip,
html.cosmic-ui .card-friendly,
html.cosmic-ui .card-friendly-gold {
    border-color: var(--brand-border);
    background: var(--brand-surface);
    box-shadow: none;
}

html.cosmic-ui .cosmic-intent-card::before,
html.cosmic-ui .card-friendly::before { display: none; }

html.cosmic-ui .cosmic-intent-card {
    min-height: 152px;
    padding: 20px;
    border-radius: 18px;
}

html.cosmic-ui .cosmic-intent-card:hover,
html.cosmic-ui .cosmic-intent-card:focus-visible,
html.cosmic-ui .card-friendly:hover {
    border-color: var(--brand-plum);
    background: color-mix(in srgb, var(--brand-plum) 6%, var(--brand-surface));
    box-shadow: var(--brand-shadow);
    transform: translateY(-2px);
}

html.cosmic-ui .cosmic-intent-card .symbol {
    margin-bottom: 16px;
    color: var(--brand-copper);
    font-size: 22px;
}

html.cosmic-ui .cosmic-intent-card strong { font-size: 16px; font-weight: 650; }
html.cosmic-ui .cosmic-intent-card span:last-child { color: var(--brand-muted); font-size: 13px; }

html.cosmic-ui .cosmic-sky-preview,
html.cosmic-ui .cosmic-route-strip {
    padding: 20px;
    border-radius: 20px;
}

html.cosmic-ui .cosmic-sky-preview-head { margin-bottom: 18px; }
html.cosmic-ui .cosmic-sky-trinity { gap: 8px; }
html.cosmic-ui .cosmic-sky-trinity > div {
    min-height: 76px;
    border-radius: 12px;
    background: var(--brand-soft);
}

html.cosmic-ui .cosmic-sky-preview > p { margin-top: 17px; padding-top: 15px; }
html.cosmic-ui .cosmic-route-strip > strong { font-size: 15px; }
html.cosmic-ui .cosmic-route-stops { margin-top: 14px; }
html.cosmic-ui .cosmic-route-stop::before { height: 5px; background: var(--brand-soft); }
html.cosmic-ui .cosmic-route-stop.done::before { background: linear-gradient(90deg, var(--brand-copper), var(--brand-plum)); }

/* Herramientas y contenido: la misma calma visual de la portada */
html.cosmic-ui .card-friendly,
html.cosmic-ui .card-friendly-gold,
html.cosmic-ui .product-card,
html.cosmic-ui .entity-card,
html.cosmic-ui .detail-display-box,
html.cosmic-ui .page > .hero,
html.cosmic-ui .page > .article {
    border-radius: 20px;
    box-shadow: none;
}

html.cosmic-ui .hero-banner-full,
html.cosmic-ui .card-friendly[class*='hero-bg-'] {
    min-height: 0;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 22px;
    background-color: var(--brand-surface) !important;
    background-image:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--brand-plum) 13%, transparent), transparent 34%),
        linear-gradient(135deg, var(--brand-surface), color-mix(in srgb, var(--brand-soft) 48%, var(--brand-surface))) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: none;
}

html.cosmic-ui[data-cosmic-theme='ritual'] .hero-banner-full,
html.cosmic-ui[data-cosmic-theme='ritual'] .card-friendly[class*='hero-bg-'] {
    background-image:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--brand-plum) 16%, transparent), transparent 34%),
        linear-gradient(135deg, var(--brand-surface), var(--brand-soft)) !important;
}

html.cosmic-ui .hero-banner-full h1,
html.cosmic-ui .hero-banner-full h2,
html.cosmic-ui .card-friendly[class*='hero-bg-'] h1,
html.cosmic-ui .card-friendly[class*='hero-bg-'] h2 {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.04;
}

html.cosmic-ui .btn-friendly-gold,
html.cosmic-ui .cta {
    border-radius: 11px;
    background: var(--brand-plum);
    box-shadow: none;
}

html.cosmic-ui .input-friendly,
html.cosmic-ui .facet-input,
html.cosmic-ui .facet-select,
html.cosmic-ui input:not([type='checkbox']):not([type='radio']):not([type='range']),
html.cosmic-ui textarea,
html.cosmic-ui select { border-radius: 11px; }

/* Tour: bocadillo breve, claro y siempre recuperable */
html.cosmic-ui .cosmic-tour-backdrop { background: color-mix(in srgb, var(--brand-ink) 25%, transparent); backdrop-filter: none; }
html.cosmic-ui .cosmic-tour-highlight {
    border-color: var(--brand-copper);
    border-radius: 18px;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-copper) 16%, transparent), 0 0 34px color-mix(in srgb, var(--brand-copper) 24%, transparent);
}

html.cosmic-ui .cosmic-tour-bubble {
    border-radius: 20px;
    background: var(--brand-surface);
    box-shadow: 0 20px 60px var(--brand-shadow-hover);
}

html.cosmic-ui .cosmic-tour-bubble h2 { font-size: 23px; }
html.cosmic-ui .cosmic-tour-actions button { border-radius: 10px; }

html.cosmic-ui .card-friendly [style*='background:'] {
    color: var(--brand-ink) !important;
    background: var(--brand-soft) !important;
}

html.cosmic-ui .card-friendly [style*='color: #F8FAFC'],
html.cosmic-ui .card-friendly [style*='color:#F8FAFC'] { color: var(--brand-ink) !important; }

@media (max-width: 980px) {
    html.cosmic-ui .cosmic-intent-section { grid-template-columns: 1fr; }
    html.cosmic-ui .cosmic-intent-grid,
    html.cosmic-ui .cosmic-sky-preview,
    html.cosmic-ui .cosmic-route-strip { grid-column: 1; }
    html.cosmic-ui .cosmic-sky-preview { grid-row: auto; }
}

@media (max-width: 900px) {
    html.cosmic-ui .navbar-full.cosmic-nav-ready { padding: 10px 14px 0; }
    html.cosmic-ui .brand { width: auto; min-width: 164px; height: 44px; }
    html.cosmic-ui .brand::before { width: 36px; height: 36px; flex-basis: 36px; }
    html.cosmic-ui .brand::after { font-size: 23px; }
    html.cosmic-ui .cosmic-nav {
        background: var(--brand-surface);
        border-top-color: var(--brand-border);
    }
    html.cosmic-ui .cosmic-home-intro { margin-bottom: 28px; }
    html.cosmic-ui .cosmic-home-intro h1 { font-size: clamp(42px, 10vw, 62px); }
}

@media (max-width: 760px) {
    html.cosmic-ui main.container-fluid { padding-top: 32px !important; }
    html.cosmic-ui .cosmic-home-intro {
        min-height: 0;
        padding: 0;
        border-radius: 0;
    }
    html.cosmic-ui .cosmic-home-intro h1 { font-size: clamp(42px, 13vw, 58px); }
    html.cosmic-ui .cosmic-intent-grid { grid-template-columns: 1fr; }
    html.cosmic-ui .cosmic-intent-card { min-height: 128px; }
    html.cosmic-ui .hero-banner-full,
    html.cosmic-ui .card-friendly[class*='hero-bg-'] {
        min-height: 0;
        padding: 28px 24px;
        background-position: center !important;
        background-size: cover !important;
    }
}

@media (max-width: 520px) {
    html.cosmic-ui .cosmic-home-intro p { font-size: 15px; }
    html.cosmic-ui .cosmic-intent-card,
    html.cosmic-ui .cosmic-sky-preview,
    html.cosmic-ui .cosmic-route-strip,
    html.cosmic-ui .card-friendly { border-radius: 18px; }
    html.cosmic-ui .cosmic-route-stops { grid-template-columns: 1fr; }
}