/* ============================================
   ASTRA WEB - ESTILOS MÍSTICOS Y ASTRALES
   ============================================ */

/* Variables CSS - Colores Místicos */
:root {
    --astra-black: #000000;
    --astra-midnight: #0A0A0F;
    --astra-deep-rose: #0F0F14;
    --astra-dark-rose: #141419;
    --astra-gold: #FFB3D9; /* Rosa pálido brillante */
    --astra-pink: #FFC5E0;
    --astra-brilliant-pink: #FFA8D5;
    --astra-vanilla: #F5F5DC;
    --astra-soft-rose: #FFB3D9; /* Rosa pálido suave */
    --astra-vanilla-bright: #FFE8F2; /* Rosa vainilla pálido brillante */
    --astra-silver: #C0C0C0;
    --astra-cyan: #00FFFF;
    --astra-electric-cyan: #00D9FF;
    --astra-white: #FFFFFF;
    
    /* Gradientes */
    --mystical-gradient: linear-gradient(135deg, #0A0A0F 0%, #0F0F14 50%, #141419 100%);
    --gold-gradient: linear-gradient(135deg, #FFB3D9 0%, #FFE8F2 50%, #FFB3D9 100%);
    --pink-gradient: linear-gradient(135deg, #FFA8D5 0%, #FFC5E0 100%);
    --cosmic-gradient: linear-gradient(180deg, #0A0A0F 0%, #0F0F14 50%, #141419 100%);
    --rose-vanilla-gradient: linear-gradient(135deg, #FFB3D9 0%, #FFE8F2 100%);
    
    /* Sombras */
    --glow-gold: 0 0 20px rgba(255, 179, 217, 0.6), 0 0 40px rgba(255, 232, 242, 0.5);
    --glow-pink: 0 0 20px rgba(255, 168, 213, 0.6), 0 0 40px rgba(255, 197, 224, 0.4);
    --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3);
    
    /* Fuentes */
    --font-title: 'Cinzel', serif;
    --font-body: 'Cormorant Garamond', serif;
    --font-weight-title: 300; /* Más fino y elegante */
}

/* Reset y Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ocultar scrollbars en toda la aplicación */
* {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
}

*::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}


body {
    font-family: var(--font-body);
    background: var(--mystical-gradient) !important;
    background-color: #0A0A0F !important;
    background-color: #1A0F14 !important;
    color: var(--astra-vanilla);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    width: 100%;
    min-height: 100vh;
    top: auto;
    left: auto;
    /* EXCLUIR display: flex del body - está causando problemas con el navbar */
    /* display: flex !important; */
    /* flex-direction: column !important; */
    z-index: 0 !important; /* Asegurar stacking context correcto */
}

/* Cuando el hero está activo, limitar el scroll para que no se vea contenido oculto */
body:has(.hero.active) {
    overflow-y: auto !important;
    height: auto !important;
}

/* Asegurar que las secciones inactivas no contribuyan a la altura del body */
body:has(section:not(.active)) {
    /* Las secciones inactivas ya están fuera del flujo con position: absolute/fixed */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px !important; /* Ajustado para que coincida con el padding-top de las secciones */
    scroll-margin-top: 100px !important; /* Prevenir scroll sobre navbar */
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--mystical-gradient) !important;
    background-color: #0A0A0F !important;
    background-color: #1A0F14 !important;
}
}
}
}

/* Partículas de Fondo */
#particles-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important; /* Por debajo del navbar (10000) */
    pointer-events: none !important;
    overflow: hidden !important;
    transform: translateZ(0); /* Crear nueva capa de composición */
}

/* Estrellas específicas para la pantalla de inicio */
.hero #particles-container {
    z-index: 0 !important; /* Por debajo del navbar (10000) */
}

.hero .astra-portrait {
    position: relative;
    z-index: 2;
}

.particle {
    position: absolute;
    width: 1px;
    height: 1px;
    background: rgba(255, 179, 217, 0.8);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 25s infinite ease-in-out;
    box-shadow: 
        0 0 2px rgba(255, 179, 217, 0.9),
        0 0 4px rgba(255, 179, 217, 0.6),
        0 0 6px rgba(255, 179, 217, 0.3);
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
        transform: translateX(10px);
    }
    95% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* Navegación */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important; /* MUY ALTO - siempre por encima del fondo */
    background: rgba(26, 15, 20, 0.3) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important; /* SAFARI: Prefijo requerido */
    border-bottom: 1px solid rgba(255, 179, 217, 0.2) !important;
    padding: 1.2rem 0 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: visible !important;
    transform: translateZ(0) !important; /* Crear nueva capa de composición GPU */
    -webkit-transform: translateZ(0) !important; /* SAFARI: Prefijo requerido */
    isolation: isolate !important; /* Crear nuevo stacking context */
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks */
    -webkit-tap-highlight-color: rgba(255, 179, 217, 0.3) !important; /* SAFARI: Resaltar al tocar */
}

/* Asegurar que el navbar y sus elementos siempre sean clickeables, incluso cuando hay secciones activas */
.navbar *,
.navbar .hamburger,
.navbar .logo,
.navbar .nav-menu {
    pointer-events: auto !important;
    z-index: inherit !important;
}

.navbar.scrolled {
    background: rgba(26, 15, 20, 0.6);
    backdrop-filter: blur(25px) saturate(180%);
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 179, 217, 0.1);
    border-bottom-color: rgba(255, 179, 217, 0.3);
    padding: 0.8rem 0;
}

.nav-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: visible;
    gap: 4rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--astra-gold);
    text-shadow: 
        0 0 10px rgba(255, 179, 217, 0.6),
        0 0 20px rgba(255, 179, 217, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

.logo {
    cursor: default;
    pointer-events: none;
}

.logo-icon {
    font-size: 1.8rem;
    animation: sparkle 2s ease-in-out infinite;
}

/* Apple Logo - Solo para hero section */
.apple-logo {
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(255, 179, 217, 0.4));
    transition: all 0.3s ease;
}

.logo-right {
    margin-left: auto;
}

.logo-a-with-stars {
    position: relative;
    display: inline-block;
}

.logo-a-with-stars::after {
    content: '✨✨';
    position: absolute;
    right: -0.5em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6em;
    opacity: 0.8;
    animation: sparkle 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
}

.nav-menu {
    display: flex !important; /* FORZAR display en desktop */
    list-style: none;
    gap: 1rem;
    flex-wrap: nowrap;
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks */
    align-items: center;
    position: relative;
    z-index: 1001;
    visibility: visible !important; /* FORZAR visibilidad en desktop */
    opacity: 1 !important; /* FORZAR opacidad en desktop */
    left: auto !important; /* Asegurar que no esté fuera de pantalla */
    transform: none !important; /* Asegurar que no esté transformado fuera */
}

.nav-link {
    color: var(--astra-vanilla);
    text-decoration: none;
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks */
    cursor: pointer !important;
    position: relative;
    z-index: 1 !important;
    -webkit-tap-highlight-color: rgba(255, 179, 217, 0.3) !important; /* SAFARI: Resaltar al tocar */
    -webkit-touch-callout: none !important; /* SAFARI: Prevenir menú contextual */
    font-size: 0.9rem;
    font-family: var(--font-title);
    font-weight: 300;
    letter-spacing: 0.5px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0.5rem 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 179, 217, 0.1);
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: -1;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -3px; /* un poco por debajo del texto para que se vea clara */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px; /* más gruesa para que se vea bien */
    background: linear-gradient(90deg, transparent, #FFB3D9, transparent);
    transition: width 0.35s ease-out;
    box-shadow: 0 0 12px rgba(255, 179, 217, 0.8);
}

.nav-link:hover {
    color: var(--astra-gold);
    transform: translateY(-2px);
}

.nav-link:hover::before {
    opacity: 1;
    transform: scale(1);
}

.nav-link:hover::after {
    width: 90%;
}

/* Menú Desplegable */
.nav-dropdown {
    position: relative;
    z-index: 1002;
}

.dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 0.3rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.nav-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: rgba(26, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 179, 217, 0.2);
    border-radius: 12px;
    padding: 0.3rem 0;
    min-width: 180px;
    max-width: 200px;
    list-style: none;
    margin: 0;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    pointer-events: none;
    overflow: hidden;
}

/* Hacer que el último dropdown se abra hacia la izquierda para no salirse de la pantalla */
.nav-menu > li:last-child .dropdown-menu {
    left: auto;
    right: 0;
}

.nav-dropdown.active .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-transform: none;
    font-size: 0.75rem;
    border-radius: 0;
    line-height: 1.4;
}

.dropdown-menu .nav-link::after {
    display: none;
}

.dropdown-menu .nav-link:hover {
    background: rgba(255, 179, 217, 0.1);
    transform: translateX(3px);
}

.dropdown-menu li:first-child .nav-link {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.dropdown-menu li:last-child .nav-link {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    background: rgba(255, 179, 217, 0.2);
    border: none;
    list-style: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer !important;
    z-index: 10002 !important; /* Por encima del navbar y del nav-menu */
    position: relative !important;
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks siempre */
    -webkit-tap-highlight-color: rgba(255, 179, 217, 0.3) !important; /* SAFARI: Resaltar al tocar */
    -webkit-touch-callout: none !important; /* SAFARI: Prevenir menú contextual */
}

.hamburger span {
    width: 25px;
    height: 2px;
    background: var(--astra-gold);
    transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 200px 0 3rem !important; /* Aumentar padding-top significativamente */
    padding-top: 200px !important; /* Asegurar espacio para navbar - aumentado */
    margin-top: 0 !important; /* NO usar margin-top - causa problemas */
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1 !important; /* Bajo el navbar - FORZAR con !important */
    top: 0 !important; /* FORZAR top: 0 */
    scroll-padding-top: 200px !important; /* Prevenir scroll sobre navbar */
    scroll-margin-top: 200px !important; /* Prevenir scroll sobre navbar */
}

/* Aplicar los mismos estilos del hero a feature-screen cuando está activa */
/* Aplicar estilos similares al hero pero con padding-top reducido para mejor visibilidad */
.feature-screen.active:not(#camino-espiritual),
section.feature-screen.active:not(#camino-espiritual) {
    min-height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    padding: 100px 0 3rem !important; /* Padding-top reducido para bajar el contenido */
    padding-top: 100px !important; /* Espacio suficiente para navbar sin empujar contenido demasiado arriba */
    margin-top: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    z-index: 1 !important; /* Bajo el navbar - FORZAR con !important */
    scroll-padding-top: 100px !important; /* Prevenir scroll sobre navbar */
    scroll-margin-top: 100px !important; /* Prevenir scroll sobre navbar */
}

/* Asegurar que .about-astra también tenga padding-top reducido */
.about-astra.active,
section.about-astra.active {
    min-height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    padding: 100px 0 3rem !important; /* Padding-top reducido para bajar el contenido */
    padding-top: 100px !important; /* Espacio suficiente para navbar */
    margin-top: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    z-index: 1 !important;
    scroll-padding-top: 100px !important; /* Prevenir scroll sobre navbar */
    scroll-margin-top: 100px !important; /* Prevenir scroll sobre navbar */
}

/* Pseudo-elemento para prevenir scroll sobre navbar */
.feature-screen.active:not(#camino-espiritual)::before,
section.feature-screen.active:not(#camino-espiritual)::before,
.about-astra.active::before,
section.about-astra.active::before {
    content: '';
    display: block;
    height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}

/* PREVENIR SCROLL SOBRE NAVBAR - Agregar spacer fijo invisible */
.feature-screen.active:not(#camino-espiritual)::after,
section.feature-screen.active:not(#camino-espiritual)::after,
.about-astra.active::after,
section.about-astra.active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 9999 !important; /* Justo debajo del navbar (10000) pero por encima de la sección (1) */
    pointer-events: none !important; /* No bloquear clicks, solo crear barrera visual */
    background: transparent;
}


/* Asegurar que el navbar y hamburger siempre sean clickeables, incluso sobre secciones activas */
.navbar,
.navbar *,
.hamburger,
.hamburger * {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

.hamburger {
    z-index: 10002 !important; /* Aún más alto que el navbar */
}

.nav-menu {
    z-index: 10001 !important; /* Por encima de las secciones pero debajo del hamburger */
}
    opacity: 1 !important;
    z-index: 1 !important; /* Bajo el footer que tiene z-index: 10000 */
    isolation: isolate !important; /* Crear nuevo contexto de apilamiento, pero NO interferir con footer fijo */
    background: 
        radial-gradient(ellipse at top, rgba(255, 179, 217, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(188, 143, 143, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse at bottom, rgba(255, 232, 242, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0A0A0F 0%, #0F0F14 50%, #141419 100%) !important;
    background-color: #0A0A0F !important;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 179, 217, 0.02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1 !important; /* NEGATIVO - siempre por debajo del navbar */
    pointer-events: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Asegurar que el hero no cubra el footer */
.hero {
    z-index: 1 !important;
}

.hero::after {
    display: none !important;
}

/* Ocultar todas las secciones excepto el hero por defecto - FORZAR OCULTACIÓN TOTAL */
section:not(.active),
section[hidden],
section:not(.active) *,
section[hidden] * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* FORZAR OCULTACIÓN TOTAL cuando NO está activa - SACAR COMPLETAMENTE DEL FLUJO */
#camino-espiritual:not(.active),
#camino-espiritual.feature-screen:not(.active),
section#camino-espiritual:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important; /* Cambiar de absolute a fixed para sacarlo del flujo */
    top: -99999px !important; /* Más lejos */
    left: -99999px !important; /* Más lejos */
    right: -99999px !important; /* Asegurar que no ocupe espacio */
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -99999 !important; /* Más bajo */
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: scale(0) !important; /* Reducir a cero */
    clip-path: inset(100%) !important; /* Clip completamente */
}

/* También ocultar TODOS los elementos hijos cuando la sección NO está activa - AGRESIVO */
#camino-espiritual:not(.active) *,
#camino-espiritual.feature-screen:not(.active) *,
section#camino-espiritual:not(.active) * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important; /* Fixed para sacarlo del flujo */
    top: -99999px !important;
    left: -99999px !important;
    right: -99999px !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -99999 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: scale(0) !important;
    clip-path: inset(100%) !important;
    content: none !important; /* Eliminar pseudo-elementos */
}

/* Solo aplicar padding cuando la sección está activa */
#camino-espiritual.feature-screen.active {
    padding-top: 100px !important; /* Espacio para navbar */
    padding-bottom: 0 !important; /* Sin padding-bottom para evitar espacio vacío */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    z-index: 1 !important; /* DEBE estar DEBAJO del navbar (z-index: 10000) */
    position: relative !important;
    min-height: auto !important; /* Altura automática según contenido */
    height: auto !important; /* Altura automática según contenido */
    max-height: none !important; /* Sin límite de altura máxima */
}

/* ELIMINAR padding-bottom cuando el test está activo - MÁXIMA PRIORIDAD */
#camino-espiritual.feature-screen.active:has(#test-questions),
#camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"]),
#camino-espiritual.feature-screen.active:has(#test-questions[style*="display:flex"]) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: 100vh !important; /* Limitar altura para evitar scroll extra */
    max-height: 100vh !important; /* Limitar altura máxima */
    overflow-y: hidden !important; /* Ocultar scroll vertical para evitar ver el footer */
    overflow-x: hidden !important; /* Ocultar scroll horizontal */
}

/* Bloquear scroll en body y html cuando hay preguntas visibles - MÁXIMA PRIORIDAD */
body:has(#test-questions[style*="display: flex"]),
body:has(#test-questions[style*="display:flex"]),
body:has(#test-questions[style*="display: flex !important"]),
body:has(#test-questions[style*="display:flex !important"]),
html:has(#test-questions[style*="display: flex"]),
html:has(#test-questions[style*="display:flex"]),
html:has(#test-questions[style*="display: flex !important"]),
html:has(#test-questions[style*="display:flex !important"]) {
    overflow-y: hidden !important; /* Bloquear scroll vertical */
    overflow-x: hidden !important; /* Bloquear scroll horizontal */
    height: 100vh !important; /* Limitar altura */
    max-height: 100vh !important; /* Limitar altura máxima */
    position: fixed !important; /* Fijar posición para evitar scroll */
    width: 100% !important; /* Mantener ancho completo */
}

/* También bloquear cuando camino-espiritual está activo */
body:has(#camino-espiritual.active:has(#test-questions[style*="display: flex"])),
body:has(#camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"])),
html:has(#camino-espiritual.active:has(#test-questions[style*="display: flex"])),
html:has(#camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"])) {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

/* MÁXIMA ESPECIFICIDAD: Reducir padding-top cuando se muestra el test de preguntas (regla general) */
html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"]),
html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display:flex"]),
html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex !important"]),
html body #camino-espiritual.feature-screen.active:has(.test-questions-screen[style*="display: flex"]) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* section.active - EXCLUIR .hero y #camino-espiritual para que mantenga sus propios estilos */
/* ELIMINADO: Esta regla estaba sobrescribiendo los estilos del hero */
/* Ahora todas las secciones usan los mismos estilos que .hero */

/* .hero.active mantiene sus propios estilos - NO se afecta por section.active */
.hero.active {
    /* Mantener estilos originales de .hero - TODOS con !important para forzar */
    min-height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    padding: 200px 0 3rem !important; /* Asegurar padding-top para navbar - aumentado */
    padding-top: 200px !important; /* Espacio para navbar - aumentado para prevenir scroll sobre navbar */
    scroll-padding-top: 200px !important; /* Prevenir scroll sobre navbar */
    scroll-margin-top: 200px !important; /* Prevenir scroll sobre navbar */
    margin-top: 0 !important; /* NO usar margin-top - causa problemas */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1 !important; /* Bajo el navbar (z-index: 10000) */
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

.hero.active {
    z-index: 3;
}

.hero.active .astra-image,
.hero.active .astra-portrait,
.hero.active .portrait-glow,
.hero.active .portrait-particles,
.hero.active .hero-left-badge,
.hero.active .hero-apple-badge,
.hero.active .app-store-badge {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.hero-left-badge,
.hero-apple-badge,
.hero-apple-badge .app-store-badge {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.hero.active .astra-portrait {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero.active .astra-image,
.hero.active .astra-portrait,
.hero.active .portrait-glow,
.hero.active .portrait-particles {
    opacity: 1 !important;
    visibility: visible !important;
}

.hero.active .astra-image {
    display: block !important;
    margin: 0 auto !important;
}

.hero.active .hero-left-badge,
.hero.active .hero-apple-badge,
.hero.active .hero-apple-badge .app-store-badge-link,
.hero.active .hero-apple-badge .app-store-badge {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Asegurar visibilidad siempre, incluso si hero no tiene active */
.hero .hero-left-badge,
.hero .hero-apple-badge {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000 !important;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important; /* NEGATIVO - siempre por debajo de TODO */
    pointer-events: none; /* No interferir con clicks */
}

.stars-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, var(--astra-gold), transparent),
        radial-gradient(2px 2px at 60% 70%, var(--astra-gold), transparent),
        radial-gradient(1px 1px at 50% 50%, var(--astra-cyan), transparent),
        radial-gradient(1px 1px at 80% 10%, var(--astra-vanilla-bright), transparent),
        radial-gradient(2px 2px at 90% 40%, var(--astra-gold), transparent);
    background-size: 200% 200%;
    animation: starsMove 30s linear infinite;
    opacity: 0.6;
}

@keyframes starsMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

.nebula-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 179, 217, 0.1) 0%, transparent 70%);
    animation: nebulaPulse 8s ease-in-out infinite;
}

@keyframes nebulaPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin: 0 auto !important;
    margin-top: 0 !important; /* Asegurar que no tenga margin-top */
    padding-top: 0 !important; /* El padding está en .hero, no aquí */
    display: flex;
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks en botones */
    -webkit-tap-highlight-color: transparent !important; /* SAFARI: Sin resaltado en contenedor */
    transform: translateZ(0) !important; /* Aceleración GPU */
    -webkit-transform: translateZ(0) !important; /* SAFARI: Prefijo requerido */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 2rem 2.5rem;
    min-height: calc(100vh - 80px);
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.hero-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    gap: 0.3rem;
    padding: 0 1rem;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}


.astra-portrait {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto 0.3rem;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
    width: 100%;
}

.portrait-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 179, 217, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes glowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

.astra-image {
    width: auto;
    height: auto;
    max-width: 75%;
    max-height: 50vh;
    border-radius: 30px;
    border: none;
    box-shadow: 0 0 20px rgba(255, 179, 217, 0.3), 0 0 40px rgba(255, 179, 217, 0.2), 0 0 60px rgba(255, 179, 217, 0.1);
    object-fit: contain;
    animation: none !important;
    margin: 0 auto 0.5rem;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 1;
    transform: none !important;
}

@keyframes floatPortrait {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.portrait-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.portrait-particles::before,
.portrait-particles::after {
    content: '✨';
    position: absolute;
    font-size: 1.5rem;
    animation: particleOrbit 4s linear infinite;
}

.portrait-particles::before {
    top: -20px;
    left: 50%;
    animation-delay: 0s;
}

.portrait-particles::after {
    bottom: -20px;
    right: 50%;
    animation-delay: 2s;
}

@keyframes particleOrbit {
    0% {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
    }
}

.hero-left-badge {
    position: absolute;
    top: 20px;
    left: 2rem;
    z-index: 1000 !important;
    display: flex !important;
    align-items: flex-start;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-apple-badge {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-apple-badge .app-store-badge {
    height: 50px;
    width: auto;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.hero-title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
}

.hero-apple-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--astra-vanilla-bright);
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 0.3rem;
    margin-left: 0.2rem;
}

.hero-apple-logo .apple-logo {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor !important;
    filter: drop-shadow(0 0 8px rgba(255, 179, 217, 0.6)) drop-shadow(0 0 15px rgba(255, 179, 217, 0.4));
    transition: all 0.3s ease;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.hero-apple-logo:hover {
    opacity: 1;
    transform: scale(1.15);
}

.hero-apple-logo:hover .apple-logo {
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.8));
    color: var(--astra-gold);
}

.title-line {
    display: block;
    background: var(--rose-vanilla-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 179, 217, 0.5);
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

.hero-subtitle {
    font-size: 0.85rem;
    font-family: var(--font-title);
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--astra-vanilla-bright);
    margin-bottom: 0.15rem;
    opacity: 0.95;
    text-shadow: 0 0 20px rgba(255, 179, 217, 0.3);
    animation: fadeInUp 1s ease 0.3s both;
}

.hero-description {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--astra-vanilla);
    margin-bottom: 0.3rem;
    opacity: 0.85;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    letter-spacing: 0.3px;
    animation: fadeInUp 1s ease 0.5s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    position: relative;
    z-index: 10 !important; /* CRÍTICO: Por encima de otros elementos */
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks */
    -webkit-tap-highlight-color: transparent !important; /* SAFARI: Sin resaltado en contenedor */
    transform: translateZ(0) !important; /* Aceleración GPU */
    -webkit-transform: translateZ(0) !important; /* SAFARI: Prefijo requerido */
    margin-bottom: 0.3rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Eliminar cualquier línea decorativa no deseada */
.hero-description::after,
.hero-description::before,
.hero-buttons::after,
.hero-buttons::before,
.hero-main-content::after,
.hero-main-content::before,
.astra-portrait::after,
.astra-portrait::before {
    display: none !important;
    content: none !important;
}

.btn {
    position: relative;
    padding: 0.7rem 1.8rem;
    font-size: 1rem;
    font-family: var(--font-title);
    text-decoration: none;
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 400;
    z-index: 10 !important; /* CRÍTICO: Por encima de otros elementos */
    pointer-events: auto !important; /* CRÍTICO: Permitir clicks */
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 179, 217, 0.4) !important; /* SAFARI: Resaltar al tocar */
    -webkit-touch-callout: none !important; /* SAFARI: Prevenir menú contextual */
    -webkit-user-select: none !important; /* SAFARI: Prevenir selección de texto */
    user-select: none !important;
    transform: translateZ(0) !important; /* Aceleración GPU */
    -webkit-transform: translateZ(0) !important; /* SAFARI: Prefijo requerido */
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s;
    z-index: -1;
    pointer-events: none !important; /* CRÍTICO: No bloquear clicks */
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #E8A5C4 0%, #F0D4E0 30%, #E8B8D0 60%, #E8A5C4 100%);
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 0 8px rgba(232, 165, 196, 0.2),
        0 0 15px rgba(232, 165, 196, 0.15),
        0 3px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(232, 165, 196, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #F0B8D4 0%, #F5D9E5 30%, #F0C4D8 60%, #F0B8D4 100%);
    box-shadow: 
        0 0 12px rgba(232, 165, 196, 0.25),
        0 0 20px rgba(232, 165, 196, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(232, 165, 196, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-primary:active {
    transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
    background: rgba(255, 179, 217, 0.1);
    color: var(--astra-gold);
    border: 2px solid var(--astra-soft-rose);
    backdrop-filter: blur(10px);
}

#retake-test-btn.btn-secondary,
button#retake-test-btn.btn-secondary {
    background: rgba(255, 179, 217, 0.05) !important;
    border: 2px solid rgba(255, 179, 217, 0.3) !important;
    opacity: 0.7 !important;
}

#retake-test-btn.btn-secondary:hover,
button#retake-test-btn.btn-secondary:hover {
    background: rgba(255, 179, 217, 0.1) !important;
    border: 2px solid rgba(255, 179, 217, 0.5) !important;
    opacity: 0.9 !important;
}

.btn-secondary:hover {
    background: rgba(255, 179, 217, 0.25);
    box-shadow: 
        0 0 20px rgba(255, 179, 217, 0.4),
        0 0 40px rgba(255, 179, 217, 0.2);
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(255, 179, 217, 0.8);
}

.btn-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.btn:hover .btn-glow {
    width: 300px;
    height: 300px;
    opacity: 1;
}

/* Ocultar btn-glow en feature-screen para evitar puntos rosas visibles */
.feature-screen .btn-glow {
    display: none !important;
}

/* Asegurar que los botones en feature-screen tengan su fondo visible */
.feature-screen .btn,
.feature-screen .btn-primary,
.feature-screen a.btn,
.feature-screen a.btn-primary {
    background: linear-gradient(135deg, #E8A5C4 0%, #F0D4E0 30%, #E8B8D0 60%, #E8A5C4 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 
        0 0 8px rgba(232, 165, 196, 0.2),
        0 0 15px rgba(232, 165, 196, 0.15),
        0 3px 10px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(232, 165, 196, 0.4) !important;
    display: inline-flex !important;
    padding: 0.7rem 1.8rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    overflow: hidden !important;
}

.feature-screen .btn:hover,
.feature-screen .btn-primary:hover,
.feature-screen a.btn:hover,
.feature-screen a.btn-primary:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: linear-gradient(135deg, #F0B8D4 0%, #F5D9E5 30%, #F0C4D8 60%, #F0B8D4 100%) !important;
    box-shadow: 
        0 0 12px rgba(232, 165, 196, 0.25),
        0 0 20px rgba(232, 165, 196, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(232, 165, 196, 0.6) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.hero-features {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
}

.feature-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 179, 217, 0.15);
    border: 1px solid rgba(255, 179, 217, 0.4);
    border-radius: 30px;
    font-size: 0.75rem;
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 179, 217, 0.2), transparent);
    transition: left 0.5s;
}

.feature-badge:hover {
    transform: translateY(-3px);
    background: rgba(255, 179, 217, 0.25);
    border-color: rgba(255, 179, 217, 0.6);
    box-shadow: 0 5px 20px rgba(255, 179, 217, 0.3);
}

.feature-badge:hover::before {
    left: 100%;
}

.badge-icon {
    font-size: 1.2rem;
}


/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Asegurar que el container dentro de feature-screen no interfiera */
.feature-screen .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-title {
    font-family: var(--font-title);
    font-size: 2.8rem;
    font-weight: 300;
    letter-spacing: 3px;
    background: var(--rose-vanilla-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: 0 0 40px rgba(255, 179, 217, 0.5);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--astra-soft-rose), transparent);
    box-shadow: 0 0 10px rgba(255, 179, 217, 0.6);
}

/* Eliminar la línea rosa del section-title en feature-screen */
.feature-screen .section-title::after,
.feature-screen-text .section-title::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

.section-subtitle {
    font-size: 1.3rem;
    color: var(--astra-vanilla);
    opacity: 0.8;
}

/* Features Section */
.features {
    padding: 5rem 0 2rem 0;
    position: relative;
    z-index: 2;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

.features-grid {
    display: none; /* Oculto - ahora usamos artículos */
}

/* Artículos de Funcionalidades - Diseño Blog/Minimalista */
.feature-article {
    margin-bottom: 1rem;
    padding: 1.5rem;
    position: relative;
    background: rgba(255, 179, 217, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 179, 217, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Asegurar que feature-screen NO tenga estos efectos */
.feature-screen {
    background: linear-gradient(135deg, #0A0A0F 0%, #1A0F14 50%, #0F0F14 100%) !important;
    background-color: #0A0A0F !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

.feature-screen-content {
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Asegurar que feature-article NO afecte a feature-screen */
.feature-screen .feature-article,
.feature-screen-content .feature-article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.feature-article::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.feature-article:hover::before {
    left: 100%;
}

.feature-article:not(:last-child) {
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.article-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.8rem;
    align-items: center;
}

/* Asegurar que article-* NO afecte a feature-screen-* */
.feature-screen .article-content,
.feature-screen-content .article-content,
.feature-screen .article-image,
.feature-screen-content .article-image,
.feature-screen .article-text,
.feature-screen-content .article-text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.feature-article-reverse .article-content {
    direction: rtl;
}

.feature-article-reverse .article-content > * {
    direction: ltr;
}

.article-image {
    position: relative;
}

.article-image img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 15px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 20px rgba(255, 179, 217, 0.2));
    transition: transform 0.4s ease;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Asegurar que article-image img NO afecte a feature-screen-image img */
.feature-screen .article-image img,
.feature-screen-content .article-image img {
    filter: drop-shadow(0 0 3px rgba(255, 179, 217, 0.08)) drop-shadow(0 0 6px rgba(255, 179, 217, 0.04)) !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    animation: none !important;
    transform: none !important;
}

/* Todas las imágenes de feature-screen-image deben tener el mismo tamaño que Sobre Astra */
.feature-screen-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 20px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}

.feature-article:hover .article-image img {
    transform: scale(1.05);
}

/* Eliminar cualquier transformación hover en feature-screen */
.feature-screen .feature-screen-image img:hover,
.feature-screen .feature-screen-image:hover img,
.feature-screen .astra-feature-image:hover,
.feature-screen .feature-screen-text:hover,
.feature-screen .feature-screen-text:hover * {
    transform: none !important;
    transition: none !important;
}

/* Reglas adicionales más específicas para evitar movimiento en hover */
.feature-screen-image:hover .astra-feature-image,
.feature-screen-image:hover img,
.feature-screen-image:hover .feature-screen-image img {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.feature-screen-image:hover {
    transform: none !important;
    transition: none !important;
}

.astra-feature-image,
.astra-feature-image:hover,
.astra-feature-image:focus,
.astra-feature-image:active,
.astra-feature-image:visited {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 20px !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: none !important;
    pointer-events: none !important;
    transform: none !important;
    text-decoration: none !important;
    outline: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
}

.astra-feature-image::before,
.astra-feature-image::after,
.astra-feature-image:hover::before,
.astra-feature-image:hover::after,
.astra-feature-image:focus::before,
.astra-feature-image:focus::after,
.astra-feature-image:active::before,
.astra-feature-image:active::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.astra-feature-image:hover,
.astra-feature-image:focus,
.astra-feature-image:active {
    transform: none !important;
    transition: none !important;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    background: none !important;
}

.feature-screen.active .astra-feature-image {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.article-text {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.article-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 1.5px;
    color: var(--astra-gold);
    margin: 0;
    line-height: 1.2;
}

.article-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--astra-vanilla);
    opacity: 0.9;
    margin: 0;
}

.article-benefit {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--astra-vanilla);
    opacity: 0.85;
    margin: 0;
    padding: 0.7rem;
    background: rgba(255, 179, 217, 0.05);
    border-left: 3px solid var(--astra-soft-rose);
    border-radius: 8px;
}

/* Asegurar que no haya rayas rosas visibles en feature-screen */
.feature-screen .article-benefit {
    border-left: 2px solid rgba(255, 179, 217, 0.3);
    background: rgba(255, 179, 217, 0.02);
}

.article-benefit strong {
    color: var(--astra-gold);
    font-weight: 400;
}

/* Secciones Individuales de Funcionalidades */
.feature-screen:not(.active),
#camino-espiritual.feature-screen:not(.active),
section.feature-screen:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Estilos base para feature-screen cuando está activa */
.feature-screen.active {
    background: 
        radial-gradient(ellipse at top, rgba(255, 179, 217, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(188, 143, 143, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse at bottom, rgba(255, 232, 242, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0A0A0F 0%, #0F0F14 50%, #141419 100%) !important;
    background-color: #0A0A0F !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

.feature-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 179, 217, 0.02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
    pointer-events: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Eliminar pseudo-elementos que puedan crear brillos, excepto el ::before del feature-screen */
.feature-screen-content::before,
.feature-screen-content::after,
.feature-screen-image::before,
.feature-screen-image::after,
.feature-screen-text::before,
.feature-screen-text::after,
.feature-screen-image img::before,
.feature-screen-image img::after,
.feature-screen-text *::before,
.feature-screen-text *::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Permitir el ::before del feature-screen (para el efecto glassmorphism sutil) */
.feature-screen::before {
    /* Ya está definido arriba, mantenerlo */
}

/* Máxima especificidad - igual que hero */
section.feature-screen.active:not(#camino-espiritual),
.feature-screen.active:not(#camino-espiritual),
body section.feature-screen.active:not(#camino-espiritual),
html body section.feature-screen.active:not(#camino-espiritual) {
    min-height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    padding: 120px 0 3rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Máxima especificidad para el contenido */
section.feature-screen.active .feature-screen-content,
.feature-screen.active .feature-screen-content,
body section.feature-screen.active .feature-screen-content {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Máxima especificidad para texto e imágenes */
section.feature-screen.active .feature-screen-text,
.feature-screen.active .feature-screen-text,
body section.feature-screen.active .feature-screen-text {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

section.feature-screen.active .feature-screen-image,
.feature-screen.active .feature-screen-image,
body section.feature-screen.active .feature-screen-image,
section.feature-screen.active .feature-screen-image-wrapper,
.feature-screen.active .feature-screen-image-wrapper {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Desktop - solo aplicar en pantallas grandes */
@media (min-width: 769px) {
    .feature-screen-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4rem !important;
        align-items: start !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 3.5rem 2rem !important;
        width: 100% !important;
        min-height: calc(100vh - 100px) !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* Forzar alineación arriba para todas las pantallas */
.feature-screen-content > * {
    align-self: start !important;
}

/* Reglas específicas para pantallas con layout reverso */
#tarot .feature-screen-text,
#sueños .feature-screen-text,
#carta-natal .feature-screen-text {
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
    position: relative !important;
    top: 0 !important;
}

/* Reglas de desktop para tarot, sueños y carta-natal - SOLO DESKTOP */
@media (min-width: 769px) {
    #tarot .feature-screen-content,
    #sueños .feature-screen-content,
    #carta-natal .feature-screen-content {
        align-items: start !important;
        padding-top: 3.5rem !important;
    }
}

#tarot .feature-screen-content .feature-screen-text,
#sueños .feature-screen-content .feature-screen-text,
#carta-natal .feature-screen-content .feature-screen-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
}

/* Específico para Carta Natal - alinear texto izquierda e imagen derecha a la misma altura - SOLO DESKTOP */
@media (min-width: 769px) {
    section#carta-natal.feature-screen .feature-screen-content.feature-screen-reverse {
        align-items: start !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    section#carta-natal.feature-screen .feature-screen-content.feature-screen-reverse .feature-screen-text {
        grid-column: 1 !important;
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 1 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }

    section#carta-natal.feature-screen .feature-screen-content.feature-screen-reverse .feature-screen-image-wrapper {
        grid-column: 2 !important;
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 2 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }
}

section#carta-natal.feature-screen .feature-screen-content .feature-screen-text h2:first-child,
section#carta-natal.feature-screen .feature-screen-content .feature-screen-text .section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

section#carta-natal.feature-screen .feature-screen-content .feature-screen-text p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Específico para Tarot - alinear texto izquierda e imagen derecha a la misma altura - SOLO DESKTOP */
@media (min-width: 769px) {
    section#tarot.feature-screen .feature-screen-content.feature-screen-reverse {
        align-items: start !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    section#tarot.feature-screen .feature-screen-content.feature-screen-reverse .feature-screen-text {
        grid-column: 1 !important;
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 1 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }

    section#tarot.feature-screen .feature-screen-content.feature-screen-reverse .feature-screen-image-wrapper {
        grid-column: 2 !important;
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 2 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }
}

section#tarot.feature-screen .feature-screen-content .feature-screen-text h2:first-child,
section#tarot.feature-screen .feature-screen-content .feature-screen-text .section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

section#tarot.feature-screen .feature-screen-content .feature-screen-text p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Específico para Sueños - alinear texto izquierda e imagen derecha a la misma altura - SOLO DESKTOP */
@media (min-width: 769px) {
    section#sueños.feature-screen .feature-screen-content.feature-screen-reverse {
        align-items: start !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    section#sueños.feature-screen .feature-screen-content.feature-screen-reverse .feature-screen-text {
        grid-column: 1 !important;
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 1 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }

    section#sueños.feature-screen .feature-screen-content.feature-screen-reverse .feature-screen-image-wrapper {
        grid-column: 2 !important;
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 2 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }
}

section#sueños.feature-screen .feature-screen-content .feature-screen-text h2:first-child,
section#sueños.feature-screen .feature-screen-content .feature-screen-text .section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

section#sueños.feature-screen .feature-screen-content .feature-screen-text p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Aplicar el mismo estilo de Conversa con Astra a todas las pantallas */
.feature-screen .feature-screen-content {
    padding: 2.5rem 2rem !important; /* Reducir padding-top de 3.5rem a 2.5rem para subir contenido */
    align-items: start !important;
}

.feature-screen .feature-screen-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
    justify-content: flex-start !important;
}

.feature-screen .feature-screen-text h2:first-child,
.feature-screen .feature-screen-text .section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

.feature-screen .feature-screen-text p:first-of-type {
    margin-top: 0 !important;
}

.feature-screen-image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-column: 1 !important;
    align-self: start !important;
    width: 100% !important;
}

.feature-screen-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    order: 1 !important;
}

.feature-screen-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    order: 2 !important;
}

.feature-screen-text {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    align-self: start !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.feature-screen-reverse .feature-screen-image-wrapper {
    grid-column: 2 !important;
    align-self: start !important;
}

.feature-screen-reverse .feature-screen-text {
    grid-column: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    transform: translateY(0) !important;
    position: relative !important;
    top: 0 !important;
}

.feature-screen-reverse .feature-screen-text h2:first-child,
.feature-screen-reverse .feature-screen-text .section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

.feature-screen-reverse .feature-screen-text p:first-of-type {
    margin-top: 0 !important;
}

.feature-screen-reverse .feature-screen-content {
    align-items: start !important;
}


/* Asegurar que el grid funcione correctamente */
.feature-screen-content > * {
    min-width: 0;
    align-self: start !important;
}

/* Asegurar que en TODAS las feature-screen el bloque de texto arranque arriba */
.feature-screen .feature-screen-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
}

/* Layout específico para pantallas legales independientes (privacidad, términos, cookies, soporte, FAQ).
   Usamos un selector más específico que .feature-screen.active .feature-screen-content para que lo sobrescriba. */
section.feature-screen.legal-screen.active .feature-screen-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* CRÍTICO: Ambos elementos empiezan desde arriba */
    justify-content: center !important;
    gap: 4rem !important;
    padding: 3.5rem 4rem !important;
}

/* FORZAR alineación superior en desktop - MÁXIMA ESPECIFICIDAD */
@media (min-width: 769px) {
    html body section.feature-screen.legal-screen.active .feature-screen-content {
        align-items: flex-start !important; /* CRÍTICO: ambos desde arriba - misma altura */
    }
    
    /* Solo para #privacidad, #terminos, #eula, #cookies y #soporte: imagen a la izquierda, texto a la derecha */
    html body section#privacidad.feature-screen.legal-screen.active .feature-screen-content,
    html body section#terminos.feature-screen.legal-screen.active .feature-screen-content,
    html body section#eula.feature-screen.legal-screen.active .feature-screen-content,
    html body section#cookies.feature-screen.legal-screen.active .feature-screen-content,
    html body section#soporte.feature-screen.legal-screen.active .feature-screen-content,
    /* #privacidad: imagen a la izquierda, texto a la derecha */
    html body section#privacidad.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        order: 1 !important; /* Imagen primero (izquierda) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
    }
    
    html body section#privacidad.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    html body section#privacidad.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        order: 2 !important; /* Texto segundo (derecha) */
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    /* #terminos: imagen a la izquierda, texto a la derecha */
    html body section#terminos.feature-screen.legal-screen.active .feature-screen-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Misma altura desde arriba */
        gap: 4rem !important;
    }
    
    html body section#terminos.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        order: 1 !important; /* Imagen primero (izquierda) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    html body section#terminos.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    
    html body section#terminos.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        order: 2 !important; /* Texto segundo (derecha) */
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
        flex: 1 !important;
    }
    
    /* #eula: imagen a la izquierda, texto a la derecha - EXACTAMENTE como #terminos */
    html body section#eula.feature-screen.legal-screen.active .feature-screen-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Misma altura desde arriba */
        gap: 4rem !important;
    }
    
    html body section#eula.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        order: 1 !important; /* Imagen primero (izquierda) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    html body section#eula.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    
    html body section#eula.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        order: 2 !important; /* Texto segundo (derecha) */
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
        flex: 1 !important;
    }
    
    /* #cookies: imagen a la izquierda, texto a la derecha */
    html body section#cookies.feature-screen.legal-screen.active .feature-screen-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Misma altura desde arriba */
        gap: 4rem !important;
    }
    
    html body section#cookies.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        order: 1 !important; /* Imagen primero (izquierda) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    html body section#cookies.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    
    html body section#cookies.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        order: 2 !important; /* Texto segundo (derecha) */
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
        flex: 1 !important;
    }
    
    /* #soporte: imagen a la izquierda, texto a la derecha - EXACTAMENTE como #privacidad */
    html body section#soporte.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        order: 1 !important; /* Imagen primero (izquierda) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
    }
    
    html body section#soporte.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    html body section#soporte.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        order: 2 !important; /* Texto segundo (derecha) */
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    /* #faq: imagen a la izquierda, texto a la derecha - EXACTAMENTE como #privacidad */
    html body section#faq.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        order: 1 !important; /* Imagen primero (izquierda) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
    }
    
    html body section#faq.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    html body section#faq.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        order: 2 !important; /* Texto segundo (derecha) */
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    /* Para otras legal-screen, mantener orden original */
    html body section.feature-screen.legal-screen.active:not(#privacidad):not(#terminos):not(#eula):not(#cookies):not(#soporte):not(#faq) .feature-screen-content .feature-screen-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
    }
    
    html body section.feature-screen.legal-screen.active:not(#privacidad):not(#terminos):not(#eula):not(#cookies):not(#soporte):not(#faq) .feature-screen-content .feature-screen-text {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
}

/* FORZAR que imagen y texto empiecen desde la MISMA altura en desktop */
@media (min-width: 769px) {
    section.feature-screen.legal-screen.active .feature-screen-content {
        align-items: flex-start !important; /* CRÍTICO: ambos desde arriba */
    }
    
    /* Sobrescribir el align-items: center que tiene .feature-screen-image por defecto */
    section.feature-screen.legal-screen.active .feature-screen-image {
        align-items: flex-start !important; /* Cambiar de center a flex-start */
        justify-content: center !important;
        display: flex !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    /* Asegurar que el texto también empiece desde arriba */
    section.feature-screen.legal-screen.active .feature-screen-text {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    /* Asegurar que el título no tenga margin que desplace el texto */
    section.feature-screen.legal-screen.active .feature-screen-text h2,
    section.feature-screen.legal-screen.active .feature-screen-text .section-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Asegurar que la imagen dentro del contenedor no tenga margin */
    section.feature-screen.legal-screen.active .feature-screen-image img {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: block !important;
    }
}

section.feature-screen.legal-screen.active .feature-screen-text,
section.feature-screen.legal-screen.active .feature-screen-image {
    flex: 1 1 0 !important;
    margin-top: 0 !important; /* Asegurar que ambos empiecen desde la misma altura */
    padding-top: 0 !important; /* Asegurar que ambos empiecen desde la misma altura */
    align-self: flex-start !important; /* Ambos alineados arriba */
}

/* Asegurar que el título en pantallas legales NO tenga margin que desalinee */
@media (min-width: 769px) {
    section.feature-screen.legal-screen.active .feature-screen-text h2,
    section.feature-screen.legal-screen.active .feature-screen-text .section-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Asegurar que la imagen también empiece desde arriba sin padding */
    section.feature-screen.legal-screen.active .feature-screen-image img {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* CRÍTICO: Cambiar align-items de center a flex-start para que imagen y texto empiecen desde arriba */
    section.feature-screen.legal-screen.active .feature-screen-image {
        align-items: flex-start !important; /* Cambiar de center a flex-start */
        justify-content: center !important;
        display: flex !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Asegurar que el contenedor de texto también empiece desde arriba */
    section.feature-screen.legal-screen.active .feature-screen-text {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Forzar que el texto esté arriba en todas las pantallas - SOLO DESKTOP */
@media (min-width: 769px) {
    .feature-screen-text {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .feature-screen-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
}

.feature-screen-text h2,
.feature-screen-text .section-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

.feature-screen-text p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Específico para pantallas reverso */
.feature-screen-reverse .feature-screen-text h2:first-child,
.feature-screen-reverse .feature-screen-text .section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

.feature-screen-reverse .feature-screen-text p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.feature-screen-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.feature-screen-text {
    display: flex !important;
    flex-direction: column !important;
}

/* Asegurar que NO haya efectos glassmorphism en feature-screen */
.feature-screen-content::before,
.feature-screen-content::after {
    display: none !important;
    content: none !important;
}

.feature-screen::before,
.feature-screen::after {
    display: none !important;
    content: none !important;
}

.feature-screen-reverse {
    grid-template-columns: 1fr 1fr !important;
}

.feature-screen-image {
    position: relative;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    height: auto;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 5rem !important;
    z-index: 1;
    overflow: visible;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* DESKTOP: Asegurar que el navbar y menú sean visibles */
@media (min-width: 769px) {
    .navbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 10000 !important;
    }
    
    .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        top: auto !important; /* Asegurar que no esté fuera de posición */
    }
    
    .hamburger {
        display: none !important; /* Ocultar hamburger en desktop */
    }
    
    /* Asegurar que los dropdowns funcionen en desktop */
    .nav-menu .dropdown-menu {
        position: absolute !important;
        display: none !important; /* Oculto por defecto */
    }
    
    .nav-menu .nav-dropdown:hover .dropdown-menu,
    .nav-menu .nav-dropdown.active .dropdown-menu {
        display: block !important; /* Mostrar solo en hover o active */
    }
}

/* EXCEPCIÓN ESPECÍFICA: Para pantallas legales en DESKTOP, NO aplicar margin-top */
@media (min-width: 769px) {
    section.feature-screen.legal-screen.active .feature-screen-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
    }
    
    section.feature-screen.legal-screen.active .feature-screen-text {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    /* Asegurar que el título no tenga margin que desplace el texto */
    section.feature-screen.legal-screen.active .feature-screen-text h2,
    section.feature-screen.legal-screen.active .feature-screen-text .section-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.feature-screen-image:hover,
.feature-screen-image:focus,
.feature-screen-image:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.feature-screen-image:hover img,
.feature-screen-image:hover .astra-feature-image {
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
}

.feature-screen-image:hover img::before,
.feature-screen-image:hover img::after,
.feature-screen-image:hover .astra-feature-image::before,
.feature-screen-image:hover .astra-feature-image::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
}

.feature-screen-image:hover *,
.feature-screen-image:hover img,
.feature-screen-image:hover .astra-feature-image {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.feature-screen-image::before,
.feature-screen-image::after {
    display: none !important;
    content: none !important;
}

.feature-screen-image img,
.feature-screen-image img:hover,
.feature-screen-image img:focus,
.feature-screen-image img:active,
.feature-screen-image img:visited {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 20px !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    box-shadow: none !important;
    animation: none !important;
    margin: 0 auto 0.5rem !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
    text-decoration: none !important;
    pointer-events: none !important;
    transition: none !important;
    transform: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
}

.feature-screen-image img::before,
.feature-screen-image img::after,
.feature-screen-image img:hover::before,
.feature-screen-image img:hover::after,
.feature-screen-image img:focus::before,
.feature-screen-image img:focus::after,
.feature-screen-image img:active::before,
.feature-screen-image img:active::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.feature-screen-image img:hover,
.feature-screen-image img:focus,
.feature-screen-image img:active {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    background-image: none !important;
}

.feature-screen-image img::before,
.feature-screen-image img::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Estilo unificado para todas las imágenes - igual que Conversa con Astra */

.feature-screen.active .feature-screen-image,
.feature-screen.active .feature-screen-image img {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.feature-screen.active .feature-screen-image img {
    display: block !important;
}

.feature-screen.active .feature-screen-image img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}


.feature-screen-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--astra-vanilla) !important;
    position: relative;
    z-index: 2;
    border: none !important;
    outline: none !important;
    transition: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
}

.feature-screen-text:hover,
.feature-screen-text:focus,
.feature-screen-text:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.feature-screen-text::before,
.feature-screen-text::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

.feature-screen-text .section-title {
    font-family: var(--font-title);
    font-size: 2.8rem !important;
    font-weight: 300;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    background: var(--rose-vanilla-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 0 40px rgba(255, 179, 217, 0.5);
    line-height: 1.2;
    position: relative;
}

.feature-screen-text .article-description {
    font-size: 1.2rem !important;
    font-weight: 300;
    line-height: 1.8 !important;
    color: var(--astra-vanilla);
    margin-bottom: 1.5rem !important;
    opacity: 0.9 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: none !important;
}

.feature-screen-text .article-description:hover,
.feature-screen-text .article-description:focus,
.feature-screen-text .article-description:active {
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.feature-screen-text .article-description::before,
.feature-screen-text .article-description::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}
.feature-screen-text .article-description {
    opacity: 0.85;
    max-width: 900px;
    letter-spacing: 0.3px;
}

.feature-screen-text .section-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.feature-screen-text .article-description {
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    color: var(--astra-vanilla);
    opacity: 0.9 !important;
    margin-bottom: 1.5rem !important;
}

.feature-screen-text .article-benefit {
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    color: var(--astra-vanilla);
    opacity: 0.9 !important;
    padding: 0 !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border-left: none !important;
    border-radius: 0 !important;
}

/* Recuperar la rallita rosa solo para los bloques "En la app" */
.feature-screen-text .article-benefit.app-highlight,
section.feature-screen .feature-screen-text .article-benefit.app-highlight,
#conversa-astra .feature-screen-text .article-benefit.app-highlight {
    border-left: 4px solid #FFB3D9 !important;
    padding: 0.7rem 0.7rem 0.7rem 1.2rem !important;
    background: rgba(255, 179, 217, 0.05) !important;
    border-radius: 8px !important;
}

.feature-screen-text .article-benefit strong {
    color: var(--astra-gold) !important;
    font-weight: 600 !important;
}

/* ============================================
   TEST: TU CAMINO ESPIRITUAL
   ============================================ */

.spiritual-path-test {
    max-width: 1100px;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    min-height: auto !important; /* CRÍTICO: NO forzar min-height, dejar que el contenido determine la altura */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 0 !important; /* Sin padding-bottom para eliminar espacio vacío */
    margin-bottom: 0 !important; /* Sin margin-bottom */
}

/* En móvil, sin padding-top adicional */
@media (max-width: 768px) {
    .spiritual-path-test {
        padding-top: 0 !important; /* Sin padding adicional en móvil */
    }
}

.test-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    animation: fadeIn 0.5s ease-in;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important; /* Sin padding-bottom para eliminar espacio vacío */
    margin-bottom: 0 !important; /* Sin margin-bottom */
    overflow-y: visible;
    width: 100%;
}

.test-start-screen {
    padding-top: 0 !important; /* Sin padding adicional - la sección ya tiene su padding */
    margin-top: 0 !important;
}

/* En móvil, aumentar significativamente el padding-top */
@media (max-width: 768px) {
    .test-start-screen,
    #test-start.test-start-screen,
    #camino-espiritual .test-start-screen,
    .spiritual-path-test .test-start-screen {
        padding-top: 2rem !important; /* Padding normal en móvil */
        margin-top: 0 !important;
    }
}

/* Reducir padding-top en móvil */
/* ============================================
   FOOTER - Estilos consolidados
   ============================================ */
/* Footer base - visible por defecto */
.footer {
    padding: 0.75rem 0 0.4rem;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.95) 0%, rgba(15, 15, 20, 0.98) 100%);
    border-top: 0.5px solid rgba(255, 179, 217, 0.2);
    position: relative;
    z-index: 10;
    width: 100%;
    display: block;
    visibility: visible;
    opacity: 1;
    color: #FFFFFF;
    pointer-events: auto;
    flex-shrink: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* OCULTAR FOOTER COMPLETAMENTE EN LA SECCIÓN DEL TEST - MÁXIMA PRIORIDAD */
/* Regla base: ocultar footer cuando camino-espiritual está activo */
body:has(#camino-espiritual.active) .footer,
body:has(#camino-espiritual.feature-screen.active) .footer,
#camino-espiritual.active ~ .footer,
#camino-espiritual.feature-screen.active ~ .footer,
html body:has(#camino-espiritual.active) .footer,
html body:has(#camino-espiritual.feature-screen.active) .footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    clip-path: inset(100%) !important;
    transform: scale(0) !important;
}

/* Ocultar footer cuando test-questions está visible */
body:has(#test-questions[style*="display: flex"]) .footer,
body:has(#test-questions[style*="display:flex"]) .footer,
body:has(#test-questions[style*="display: flex !important"]) .footer,
body:has(#test-questions[style*="display:flex !important"]) .footer,
html body:has(#test-questions[style*="display: flex"]) .footer,
html body:has(#test-questions[style*="display:flex"]) .footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    clip-path: inset(100%) !important;
    transform: scale(0) !important;
}

/* Ocultar footer cuando test-start está visible */
body:has(#test-start[style*="display: flex"]) .footer,
body:has(#test-start[style*="display:flex"]) .footer,
html body:has(#test-start[style*="display: flex"]) .footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    clip-path: inset(100%) !important;
    transform: scale(0) !important;
}

/* Ocultar footer cuando test-result está visible */
body:has(#test-result[style*="display: flex"]) .footer,
body:has(#test-result[style*="display:flex"]) .footer,
html body:has(#test-result[style*="display: flex"]) .footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    clip-path: inset(100%) !important;
    transform: scale(0) !important;
}

@media (max-width: 768px) {
    /* Footer en móvil - cambiar a absolute cuando test está activo */
    .footer {
        position: relative;
        z-index: 10;
    }
    
    /* Footer completamente oculto cuando test está activo */
    body:has(#camino-espiritual.active) .footer,
    body:has(#camino-espiritual.feature-screen.active) .footer,
    body:has(#test-questions[style*="display: flex"]) .footer,
    body:has(#test-questions[style*="display:flex"]) .footer {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        z-index: -9999 !important;
    }
    
    .test-start-screen,
    #test-start.test-start-screen,
    #camino-espiritual .test-start-screen,
    .spiritual-path-test .test-start-screen {
        padding-top: 2rem !important; /* Padding normal - eliminado el exceso de 70rem */
        margin-top: 0 !important;
    }
    
    #camino-espiritual.feature-screen.active {
        padding-top: 100px !important; /* Espacio para navbar en móvil */
        display: flex !important;
        flex-direction: column !important; /* CRÍTICO: Para que el footer esté al final */
        min-height: auto !important; /* NO forzar min-height, dejar que el contenido determine */
        z-index: 1 !important; /* DEBE estar DEBAJO del navbar */
        position: relative !important;
    }
    
    /* MÁXIMA ESPECIFICIDAD: Reducir padding-top cuando se muestra el test de preguntas en móvil */
    html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"]),
    html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display:flex"]),
    html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex !important"]),
    html body #camino-espiritual.feature-screen.active:has(.test-questions-screen[style*="display: flex"]),
    html body #camino-espiritual.feature-screen.active:has(.test-questions-screen[style*="display:flex"]) {
        padding-top: 0 !important; /* Sin padding-top en móvil cuando se muestra el test */
        margin-top: 0 !important;
    }
    
    /* FORZAR OCULTACIÓN cuando NO está activa en móvil */
    #camino-espiritual.feature-screen:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: -9999 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #camino-espiritual .spiritual-path-test {
        padding-top: 0 !important; /* Eliminar padding-top para que test-start-screen controle su propio espacio */
    }
    
    /* Asegurar que test-start-screen tenga su propio padding en móvil */
    #camino-espiritual .spiritual-path-test .test-start-screen {
        padding-top: 2rem !important; /* Padding normal en móvil */
        margin-top: 0 !important;
    }
    
    .test-header {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* Asegurar que NO haya elementos de progreso visibles en test-start */
.test-start-screen * .test-progress,
.test-start-screen * .progress-bar,
.test-start-screen * .progress-text,
.test-start-screen * #current-question,
.test-start-screen * #total-questions,
.test-start-screen * #progress-fill,
#test-start * .test-progress,
#test-start * .progress-bar,
#test-start * .progress-text,
#test-start * #current-question,
#test-start * #total-questions,
#test-start * #progress-fill {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
}

.test-questions-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem 2rem !important; /* Reducido padding vertical */
    padding-top: 0 !important; /* Sin padding-top para que aparezca arriba */
    padding-bottom: 0 !important; /* Eliminar padding-bottom para quitar banda negra */
    overflow-y: hidden !important; /* Ocultar scroll para evitar ver el footer */
    overflow-x: hidden !important; /* Ocultar scroll horizontal */
    -webkit-overflow-scrolling: touch !important;
    height: 100vh !important; /* Limitar altura al viewport */
    max-height: 100vh !important; /* Limitar altura máxima */
    min-height: 100vh !important; /* Altura mínima del viewport */
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-600px) !important; /* Aumentar transform para subir más el contenido de preguntas */
    z-index: 100 !important; /* Aumentar z-index para estar por encima del footer */
    position: relative !important; /* Necesario para que z-index funcione */
}

/* Asegurar que test-questions se muestre cuando tiene display: flex */
#test-questions[style*="display: flex"],
#test-questions[style*="display:flex"],
#test-questions[style*="display: flex !important"],
#test-questions[style*="display:flex !important"],
.test-questions-screen[style*="display: flex"],
.test-questions-screen[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: 0 !important;
    z-index: 100 !important; /* Aumentar z-index para estar por encima del footer */
    transform: translateY(-600px) !important; /* Aplicar transform aquí también para subir más */
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
}

#camino-espiritual.feature-screen.active {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important; /* Cambiar de 100vh a auto para que no corte el contenido */
    min-height: auto !important; /* Cambiar a auto para que no fuerce altura mínima */
    max-height: none !important; /* Eliminar max-height para permitir que el contenido se muestre */
    padding-top: 0 !important; /* Eliminar padding-top cuando el test está activo */
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
    margin-top: 0 !important; /* Eliminar margin-top */
    z-index: 1 !important; /* DEBE estar DEBAJO del navbar (z-index: 10000) */
    position: relative !important;
}

/* Cuando se muestra la pantalla de inicio del test, permitir scroll normal */
#camino-espiritual.feature-screen.active:has(#test-start[style*="display: flex"]),
#camino-espiritual.feature-screen.active:has(#test-start:not([style*="display: none"])) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Cuando el test está activo, forzar padding-top a 0 y altura auto */
#camino-espiritual.feature-screen.active:has(#test-questions) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important; /* Cambiar a auto para que no fuerce altura mínima */
    max-height: none !important;
}

/* FORZAR padding-top a 0 cuando test-questions está visible - MÁXIMA PRIORIDAD */
#camino-espiritual.feature-screen.active[style*="padding-top: 0"],
#camino-espiritual.feature-screen.active[style*="padding-top:0px"],
#camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"]) {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    transform: translateY(-600px) !important; /* Aumentar transform para subir más el contenido de preguntas */
}

/* MÁXIMA ESPECIFICIDAD: Reducir padding-top cuando se muestra el test de preguntas */
html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex"]),
html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display:flex"]),
html body #camino-espiritual.feature-screen.active:has(#test-questions[style*="display: flex !important"]),
html body #camino-espiritual.feature-screen.active:has(.test-questions-screen[style*="display: flex"]),
html body #camino-espiritual.feature-screen.active:has(.test-questions-screen[style*="display:flex"]) {
    padding-top: 0 !important; /* Sin padding-top cuando se muestra el test */
    margin-top: 0 !important;
}

/* Reducir padding cuando se muestra el resultado */
#camino-espiritual.feature-screen.showing-result {
    padding-top: 0 !important; /* Eliminar padding superior completamente */
    padding-bottom: 0 !important; /* Eliminar padding inferior completamente */
    height: auto !important; /* Permitir que el contenido determine la altura */
    background: transparent !important; /* Eliminar cualquier fondo negro */
    min-height: auto !important; /* Sin altura mínima */
}

/* Ocultar scrollbar cuando se muestra el resultado del test */
#camino-espiritual.feature-screen.showing-result {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
}

#camino-espiritual.feature-screen.showing-result::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

#camino-espiritual.feature-screen .test-result-screen {
    padding-top: 0 !important;
    margin-top: -18rem !important; /* Aumentar aún más el margen negativo */
}

/* En móvil, ajustar posición del resultado */
@media (max-width: 768px) {
    #camino-espiritual.feature-screen .test-result-screen,
    .test-result-screen,
    #test-result.test-result-screen {
        padding-top: 25rem !important; /* AUMENTADO DRÁSTICAMENTE: padding-top para bajar más el contenido en móvil iPhone */
        margin-top: 0 !important; /* Eliminar margen negativo en móvil */
        display: flex !important; /* Asegurar que se muestre cuando está activo */
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    #test-result[style*="display: flex"],
    #test-result[style*="display:flex"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .result-content {
        margin-top: 0 !important; /* Eliminar margen negativo */
        padding-top: 5rem !important; /* AUMENTADO DRÁSTICAMENTE: padding-top en móvil */
        gap: 1.5rem !important; /* Reducir gap entre imagen y textos */
        display: flex !important; /* Asegurar que se muestre */
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .result-left {
        margin-top: 0 !important;
    }
    
    .result-right {
        margin-top: 0 !important;
        gap: 0.8rem !important; /* Reducir gap entre elementos de texto */
    }
    
    .result-icon {
        margin-top: 0 !important;
    }
    
    .result-title {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important; /* Reducir espacio después del título */
        padding-top: 0 !important;
        font-size: 2rem !important; /* Reducir tamaño del título en móvil */
    }
    
    .result-description {
        margin-top: 0 !important; /* Eliminar margen superior */
        margin-bottom: 0.8rem !important; /* Reducir espacio después de la descripción */
        padding-top: 0 !important;
        font-size: 1rem !important; /* Reducir tamaño de fuente */
        line-height: 1.6 !important; /* Reducir line-height */
    }
    
    /* Ocultar completamente las secciones en móvil */
    #test-result .result-features,
    #test-result .result-practices,
    .test-result-screen .result-features,
    .test-result-screen .result-practices,
    .result-content .result-features,
    .result-content .result-practices,
    .result-right .result-features,
    .result-right .result-practices {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Ocultar títulos en móvil */
    #test-result .result-features-title,
    #test-result .result-practices-title,
    .test-result-screen .result-features-title,
    .test-result-screen .result-practices-title,
    .result-content .result-features-title,
    .result-content .result-practices-title,
    .result-right .result-features-title,
    .result-right .result-practices-title {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Ocultar listas y items en móvil */
    #test-result .result-features-list,
    #test-result .result-practices-list,
    .test-result-screen .result-features-list,
    .test-result-screen .result-practices-list,
    .result-content .result-features-list,
    .result-content .result-practices-list,
    .result-right .result-features-list,
    .result-right .result-practices-list,
    #test-result .result-features-list li,
    #test-result .result-practices-list li {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    .result-actions {
        margin-top: 1rem !important; /* Reducir espacio antes del botón para subirlo */
        margin-bottom: 0 !important;
    }
}

#camino-espiritual .spiritual-path-test {
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    padding-top: 0 !important;
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
    transform: none !important; /* NO aplicar transform aquí por defecto */
    min-height: auto !important;
    z-index: 50 !important; /* Aumentar z-index para estar por encima del footer */
    position: relative !important;
}

/* SOLO aplicar transform cuando test-questions está visible, NO cuando test-start está visible */
#camino-espiritual .spiritual-path-test:has(#test-questions[style*="display: flex"]),
#camino-espiritual .spiritual-path-test:has(#test-questions[style*="display:flex"]),
#camino-espiritual .spiritual-path-test:has(#test-questions[style*="display: flex !important"]),
#camino-espiritual .spiritual-path-test:has(.test-questions-screen[style*="display: flex"]) {
    transform: translateY(-600px) !important; /* Solo aplicar transform cuando hay preguntas - aumentado para subir más */
    height: 100vh !important; /* Limitar altura para evitar scroll extra */
    max-height: 100vh !important; /* Limitar altura máxima */
    overflow-y: hidden !important; /* Ocultar scroll vertical para evitar ver el footer */
    overflow-x: hidden !important; /* Ocultar scroll horizontal */
    padding-bottom: 0 !important; /* Eliminar cualquier padding extra */
    margin-bottom: 0 !important; /* Eliminar cualquier margin extra */
}

/* Asegurar que test-start-screen NO tenga transform */
.test-start-screen,
#test-start.test-start-screen,
#camino-espiritual .test-start-screen,
.spiritual-path-test .test-start-screen,
#camino-espiritual .spiritual-path-test:has(#test-start[style*="display: flex"]) {
    transform: none !important; /* NO aplicar transform a la pantalla inicial */
}

/* Asegurar que test-start-screen NO tenga transform */
.test-start-screen,
#test-start.test-start-screen,
#camino-espiritual .test-start-screen,
.spiritual-path-test .test-start-screen {
    transform: none !important; /* NO aplicar transform a la pantalla inicial */
}

/* Ocultar completamente la sección de resultados cuando se está en la pantalla de inicio del test */
#camino-espiritual .spiritual-path-test:has(.test-start-screen:not([style*="display: none"])) #test-result,
#camino-espiritual .spiritual-path-test:has(.test-start-screen[style*="display: flex"]) #test-result,
#camino-espiritual .spiritual-path-test:has(.test-start-screen[style*="display:flex"]) #test-result {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Cuando se muestra el resultado, eliminar padding inferior */
#camino-espiritual .spiritual-path-test:has(#test-result[style*="display: flex"]) {
    padding-bottom: 0 !important;
}

/* Cuando se muestra el resultado, reducir espacio superior e inferior */
#camino-espiritual .spiritual-path-test:has(#test-result[style*="display: flex"]),
#camino-espiritual.showing-result .spiritual-path-test {
    padding-top: 0 !important;
    padding-bottom: 0 !important; /* Eliminar padding inferior completamente */
    margin-top: -9rem !important; /* Aumentar aún más el margen negativo */
    margin-bottom: 0 !important; /* Eliminar margen inferior */
    background: transparent !important; /* Eliminar cualquier fondo */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.test-header {
    text-align: center;
    margin-bottom: 1rem !important; /* Reducido de 2rem a 1rem */
    position: relative;
    padding-top: 1rem !important; /* Reducido de 2rem a 1rem */
    margin-top: 0 !important;
}

.test-title-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.test-main-title {
    font-size: 2.5rem;
    background: var(--rose-vanilla-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(255, 179, 217, 0.5);
    animation: titleGlow 3s ease-in-out infinite;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.test-title-decoration {
    font-size: 1.5rem;
    color: var(--astra-soft-rose);
    opacity: 0.8;
    letter-spacing: 1rem;
    margin-top: 0.5rem;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.test-subtitle {
    font-size: 1.3rem;
    color: var(--astra-vanilla-bright);
    opacity: 0.95;
    margin-top: 1rem;
    font-style: italic;
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(255, 179, 217, 0.3);
}

.test-start-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.5rem; /* Reducir gap de 2rem a 1.5rem */
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    padding: 0 1rem;
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
}

.test-content-right {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reducir gap de 1.5rem a 1rem */
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
}

.test-icon-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
    margin-top: 0 !important; /* Eliminar margin-top */
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
    gap: 1.5rem; /* Reducir gap de 2rem a 1.5rem */
}

#camino-espiritual.active .test-icon-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.test-icon {
    font-size: 7rem;
    position: relative;
    z-index: 2;
    animation: iconPulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3));
}

.test-icon-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60vh;
    position: relative;
    z-index: 2;
    animation: none !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2));
    border-radius: 20px;
    object-fit: contain;
    opacity: 1 !important;
    transform: none !important;
}
#camino-espiritual.active .test-icon-image {
    visibility: visible !important;
    display: block !important;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.test-icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 179, 217, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 1;
}

.test-description-container {
    text-align: left;
    background: rgba(255, 179, 217, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 1.5rem;
    padding-bottom: 1rem !important; /* Reducir padding-bottom */
    border: 1px solid rgba(255, 179, 217, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
    position: relative;
    overflow: hidden;
}

.test-description-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.test-description-intro {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--astra-vanilla-bright);
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: left;
    font-style: italic;
    text-shadow: 0 0 15px rgba(255, 179, 217, 0.3);
}

.test-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--astra-vanilla);
    opacity: 0.9;
    margin-bottom: 1rem;
    text-align: justify;
}

.test-description strong {
    color: var(--astra-vanilla-bright);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 179, 217, 0.4);
}

.test-description-highlight {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--astra-vanilla-bright);
    font-weight: 500;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 179, 217, 0.1);
    border-left: 4px solid var(--astra-soft-rose);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 179, 217, 0.2);
}

/* Bloques "En la app:" con la misma rallita rosa lateral */
.article-benefit.app-highlight {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--astra-vanilla);
    margin-top: 1.2rem;
    padding: 1.3rem 1.6rem;
    background: rgba(255, 179, 217, 0.08);
    border-left: 4px solid var(--astra-soft-rose);
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(255, 179, 217, 0.18);
}

.test-features-preview {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 0 !important; /* Eliminar margin-bottom */
    margin-top: 0 !important; /* Eliminar margin-top */
    padding-bottom: 0 !important; /* Eliminar padding-bottom */
    flex-wrap: nowrap;
    position: relative;
    z-index: 0 !important; /* CRÍTICO: Por debajo del footer */
}

.test-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 179, 217, 0.1);
    border: 1px solid rgba(255, 179, 217, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 0 !important; /* CRÍTICO: Por debajo del footer */
}

.test-feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 179, 217, 0.15);
    border-color: rgba(255, 179, 217, 0.5);
    box-shadow: 0 5px 20px rgba(255, 179, 217, 0.3);
}

.test-feature-icon {
    font-size: 1.3rem;
    animation: floatIconSmall 4s ease-in-out infinite;
    position: relative;
    margin: 0.3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes floatIconSmall {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.test-feature-text {
    font-size: 0.75rem;
    color: var(--astra-vanilla-bright);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
}

.test-start-button {
    padding: 1.2rem 3rem;
    font-size: 1.1rem;
    margin-top: 0;
    box-shadow: 0 8px 30px rgba(255, 179, 217, 0.4);
    transition: all 0.3s ease;
    align-self: center;
    width: auto;
}

.test-start-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(255, 179, 217, 0.6);
}

/* Barra de progreso */
.test-progress {
    width: 100%;
    max-width: 600px;
    margin-bottom: 1rem !important;
    margin-top: 0 !important; /* Sin margen superior para que aparezca arriba */
    padding-top: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurar que los elementos de progreso sean visibles en la pantalla de preguntas */
#test-questions .test-progress,
#test-questions .progress-bar,
#test-questions .progress-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Los números deben estar en línea horizontal */
#test-questions #current-question,
#test-questions #total-questions {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#test-questions #progress-fill {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultar barra de progreso en la pantalla de inicio del test */
.test-start-screen .test-progress,
#test-start .test-progress,
.test-start-screen .progress-bar,
#test-start .progress-bar,
.test-start-screen .progress-text,
#test-start .progress-text,
.test-start-screen #current-question,
#test-start #current-question,
.test-start-screen #total-questions,
#test-start #total-questions,
.test-start-screen #progress-fill,
#test-start #progress-fill,
.spiritual-path-test:has(#test-start[style*="display: flex"]) .test-progress,
.spiritual-path-test:has(#test-start[style*="display: flex"]) .progress-bar,
.spiritual-path-test:has(#test-start[style*="display: flex"]) .progress-text,
.spiritual-path-test:has(#test-start[style*="display: flex"]) #current-question,
.spiritual-path-test:has(#test-start[style*="display: flex"]) #total-questions,
.spiritual-path-test:has(#test-start[style*="display: flex"]) #progress-fill {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ocultar elementos de progreso cuando test-start está visible */
#test-start[style*="display: flex"] ~ #test-questions .test-progress,
#test-start[style*="display: flex"] ~ #test-questions .progress-bar,
#test-start[style*="display: flex"] ~ #test-questions .progress-text,
#test-start[style*="display: flex"] ~ #test-questions #current-question,
#test-start[style*="display: flex"] ~ #test-questions #total-questions,
#test-start[style*="display: flex"] ~ #test-questions #progress-fill {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 179, 217, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: var(--rose-vanilla-gradient);
    border-radius: 10px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    font-size: 0.9rem;
    color: var(--astra-vanilla);
    opacity: 0.8;
    display: block;
    line-height: 1.5;
}

.progress-text span {
    display: inline !important;
}

/* Preguntas */
.question-container {
    width: 100%;
    max-width: 700px;
    padding: 0.5rem 0 !important;
    padding-bottom: 2rem !important; /* Espacio extra para que no se corte */
    padding-top: 0 !important; /* Sin padding superior para que aparezca arriba */
    overflow-y: visible;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
}

.mystical-context {
    font-size: 1rem !important;
    font-family: var(--font-title);
    color: var(--astra-gold);
    text-align: center;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-style: italic;
    opacity: 1 !important; /* Asegurar que sea visible */
    text-shadow: 0 0 15px rgba(255, 179, 217, 0.5);
    letter-spacing: 1px;
    display: block !important; /* Asegurar que se muestre cuando tiene contenido */
    visibility: visible !important;
}

.question-text {
    font-size: 1.6rem !important;
    font-family: var(--font-title);
    color: var(--astra-vanilla-bright);
    text-align: center;
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-shadow: 0 0 20px rgba(255, 179, 217, 0.3);
    line-height: 1.4 !important;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 0.9rem !important;
    width: 100%;
    padding-bottom: 2rem; /* Espacio extra abajo */
}

.option-btn {
    padding: 1rem 1.8rem !important;
    background: rgba(255, 179, 217, 0.1);
    border: 2px solid rgba(255, 179, 217, 0.3);
    border-radius: 15px;
    color: var(--astra-vanilla-bright);
    font-size: 0.95rem !important;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    line-height: 1.5 !important;
}

.option-btn:hover {
    background: rgba(255, 179, 217, 0.2);
    border-color: rgba(255, 179, 217, 0.5);
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(255, 179, 217, 0.3);
}

.option-btn:active {
    transform: translateX(5px) scale(0.98);
}

.option-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.option-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 179, 217, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: 0;
}

.option-btn:hover::before {
    width: 300px;
    height: 300px;
}

.mystical-context {
    font-size: 1rem !important;
    font-family: var(--font-title);
    color: var(--astra-gold);
    text-align: center;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-style: italic;
    opacity: 1 !important; /* Asegurar que sea visible */
    text-shadow: 0 0 15px rgba(255, 179, 217, 0.5);
    letter-spacing: 1px;
    display: block !important; /* Asegurar que se muestre cuando tiene contenido */
    visibility: visible !important;
}

.mystical-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none !important; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
    pointer-events: none !important; /* No bloquear interacciones cuando está oculto */
}

.transition-message {
    font-size: 2rem;
    font-family: var(--font-title);
    color: var(--astra-gold);
    text-align: center;
    text-shadow: 0 0 30px rgba(255, 179, 217, 0.8);
    letter-spacing: 2px;
    animation: mysticalPulse 1.5s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.transition-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.transition-particles::before,
.transition-particles::after {
    content: '✨';
    position: absolute;
    font-size: 2rem;
    animation: floatParticle 2s ease-in-out infinite;
    opacity: 0.7;
}

.transition-particles::before {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.transition-particles::after {
    top: 80%;
    right: 20%;
    animation-delay: 1s;
}

@keyframes mysticalPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 1;
    }
}

/* Resultado */
.test-result-screen {
    text-align: center;
    display: none !important; /* Oculto por defecto */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 25rem !important; /* AUMENTADO DRÁSTICAMENTE: padding-top para bajar el contenido */
    padding-bottom: 0 !important; /* Eliminar padding inferior */
    margin-top: 0 !important; /* Eliminar margen negativo */
    margin-bottom: 0 !important; /* Eliminar margen inferior */
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important; /* Permitir que el contenido determine la altura */
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: transparent !important; /* Eliminar cualquier fondo */
}

/* CRÍTICO: Sobrescribir display cuando JavaScript lo establece */
#test-result.test-result-screen[style*="display: flex"],
#test-result.test-result-screen[style*="display:flex"],
#test-result.test-result-screen[style*="display: flex !important"],
#test-result.test-result-screen[style*="display:flex !important"],
.test-result-screen[style*="display: flex"],
.test-result-screen[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.test-result-screen::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

#test-result {
    display: none !important; /* Forzar oculto por defecto */
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Ocultar completamente cuando la sección del test no está activa */
#camino-espiritual:not(.active) #test-result,
#camino-espiritual:not(.active) .test-result-screen,
#camino-espiritual.feature-screen:not(.active) #test-result,
#camino-espiritual.feature-screen:not(.active) .test-result-screen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Ocultar cuando el test no se ha completado (no tiene display: flex) */
#test-result:not([style*="display: flex"]):not([style*="display:flex"]):not(.showing),
.test-result-screen:not([style*="display: flex"]):not([style*="display:flex"]):not(.showing) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* CRÍTICO: Clase para mostrar el resultado - MÁXIMA ESPECIFICIDAD */
#test-result.showing,
#test-result.test-result-screen.showing,
.test-result-screen.showing,
#test-result.showing.test-result-screen {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    padding-top: 25rem !important; /* AUMENTADO DRÁSTICAMENTE: padding-top cuando se muestra */
    margin-top: 0 !important; /* Sin margen negativo */
}

/* CRÍTICO: Sobrescribir cuando JavaScript establece display: flex */
#test-result[style*="display: flex"],
#test-result[style*="display:flex"],
#test-result[style*="display: flex !important"],
#test-result[style*="display:flex !important"],
.test-result-screen[style*="display: flex"],
.test-result-screen[style*="display:flex"],
.test-result-screen[style*="display: flex !important"],
.test-result-screen[style*="display:flex !important"] {
    display: flex !important; /* Solo mostrar cuando se establezca explícitamente */
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Asegurar que .test-result-screen también se muestre cuando #test-result tiene display: flex */
#test-result[style*="display: flex"],
#test-result[style*="display:flex"],
#test-result[style*="display: flex !important"],
#test-result[style*="display:flex !important"],
.test-result-screen[style*="display: flex"],
.test-result-screen[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.result-content {
    max-width: 1200px;
    margin: 0 auto !important;
    padding-top: 10rem !important; /* AUMENTADO DRÁSTICAMENTE: padding-top para bajar el contenido */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 0 !important; /* Eliminar padding inferior */
    margin-top: 0 !important; /* Eliminar margen negativo */
    margin-bottom: 0 !important; /* Eliminar margen inferior */
    width: 100%;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: row !important; /* Asegurar que left esté a la izquierda y right a la derecha */
    gap: 3rem;
    align-items: flex-start; /* Alineación superior para que imagen y texto empiecen a la misma altura */
}

.result-column {
    flex: 1 1 0;
}

.result-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    order: 1 !important; /* Asegurar que esté primero (izquierda) */
    gap: 0 !important; /* Sin gap, el margin-top del botón controla el espacio */
}

.result-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
    justify-content: flex-start !important;
    order: 2 !important; /* Asegurar que esté segundo (derecha) */
}

.result-icon {
    font-size: 4rem !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Sin animación para evitar sensación de movimiento y pérdida de nitidez */
    animation: none;
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.35));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-icon img,
.result-icon .result-icon-image {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    margin-bottom: 0 !important; /* Sin margen inferior para evitar espacio extra */
    border-radius: 18px !important; /* Esquinas redondeadas */
    /* Menos glow para que no se perciban borrosas */
    filter: drop-shadow(0 0 5px rgba(255, 179, 217, 0.25));
    animation: none !important;
    object-fit: contain;
}

.result-icon::before {
    /* Desactivar aura intensa cuando hay imagen, mantener fondo muy sutil */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 179, 217, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: none;
    z-index: -1;
}

@media (max-width: 900px) {
    .result-content {
        flex-direction: column !important;
        align-items: center;
        gap: 2rem;
        padding-top: 1rem !important;
        padding-bottom: 0 !important; /* Eliminar padding inferior en móvil */
    }
    
    .result-left,
    .result-right {
        width: 100%;
        order: unset !important; /* Resetear order en móvil */
    }
    
    .result-left {
        margin-top: 0 !important;
        order: 1 !important; /* Imagen primero en móvil (arriba) */
    }
    
    .result-right {
        align-items: stretch;
        margin-top: 0 !important;
        order: 2 !important; /* Texto segundo en móvil (abajo) */
    }
    
    .result-icon {
        margin-top: 0 !important;
    }
    
    .result-icon img,
    .result-icon .result-icon-image {
        max-width: 100% !important;
    }
    
    .result-title {
        text-align: center !important;
    }
    
    .result-description {
        text-align: center !important;
    }
    
    .result-retake-btn {
        max-width: 100% !important;
        margin-top: 1.5rem !important;
    }
}

@keyframes mysticalIconGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 179, 217, 0.6));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(255, 179, 217, 0.9));
        transform: scale(1.1);
    }
}

@keyframes mysticalAura {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.result-title {
    font-size: 2.5rem !important;
    font-family: var(--font-title);
    color: var(--astra-vanilla-bright);
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--rose-vanilla-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
}

.result-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--astra-vanilla);
    opacity: 0.9;
    margin-bottom: 1.5rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: left;
}

/* Ocultar completamente las secciones de funcionalidades y prácticas */
#test-result .result-features,
#test-result .result-practices,
.test-result-screen .result-features,
.test-result-screen .result-practices,
.result-content .result-features,
.result-content .result-practices,
.result-right .result-features,
.result-right .result-practices {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ocultar títulos */
#test-result .result-features-title,
#test-result .result-practices-title,
.test-result-screen .result-features-title,
.test-result-screen .result-practices-title,
.result-content .result-features-title,
.result-content .result-practices-title,
.result-right .result-features-title,
.result-right .result-practices-title,
.result-features .result-features-title,
.result-practices .result-practices-title {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ocultar listas */
#test-result .result-features-list,
#test-result .result-practices-list,
.test-result-screen .result-features-list,
.test-result-screen .result-practices-list,
.result-content .result-features-list,
.result-content .result-practices-list,
.result-right .result-features-list,
.result-right .result-practices-list,
.result-features .result-features-list,
.result-practices .result-practices-list {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ocultar items de lista */
#test-result .result-features-list li,
#test-result .result-practices-list li,
.test-result-screen .result-features-list li,
.test-result-screen .result-practices-list li,
.result-content .result-features-list li,
.result-content .result-practices-list li,
.result-right .result-features-list li,
.result-right .result-practices-list li {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

.result-features-list li::before,
.result-practices-list li::before {
    content: "✨";
    position: absolute;
    left: 0.2rem !important;
    top: 0.4rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.result-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}

/* Botón "Hacer Test de Nuevo" en la columna izquierda */
.result-retake-btn {
    margin-top: 2.5rem !important; /* Aumentar espacio entre imagen y botón */
    width: 100%;
    max-width: 300px;
}

/* Responsive */
@media (max-width: 768px) {
    /* Spiritual path test - EXACTAMENTE como about-content */
    .spiritual-path-test {
        padding: 0.5rem 1.5rem !important;
        padding-top: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .test-main-title {
        font-size: 2rem;
        text-align: center !important;
    }
    
    .test-subtitle {
        font-size: 1.1rem;
        text-align: center !important;
    }
    
    .test-icon {
        font-size: 5rem;
    }
    
    .test-icon-image {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .test-icon-glow {
        width: 150px;
        height: 150px;
    }
    
    .test-description-container {
        padding: 1.5rem;
    }
    
    .test-description-intro {
        font-size: 1.1rem;
    }
    
    .test-description {
        font-size: 0.95rem;
        text-align: left;
    }
    
    .test-description-highlight {
        font-size: 1rem;
        padding: 1rem;
    }
    
    /* Tarjetitas más pequeñas y bien centradas */
    .test-features-preview {
        gap: 0.8rem !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        z-index: 0 !important; /* CRÍTICO: Por debajo del footer */
        position: relative;
    }
    
    .test-feature-item {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        flex: 0 0 auto !important;
        z-index: 0 !important; /* CRÍTICO: Por debajo del footer */
    }
    
    .test-feature-icon {
        font-size: 1.2rem !important;
    }
    
    .test-feature-text {
        font-size: 0.7rem !important;
    }
    
    .test-start-button {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
    }
    
    /* test-start-content - EXACTAMENTE como about-content */
    .test-start-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 2rem !important;
        align-items: center !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* test-icon-container - EXACTAMENTE como about-image */
    .test-icon-container {
        order: 1 !important;
        width: 100% !important;
        margin-top: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }
    
    /* test-content-right - EXACTAMENTE como about-text */
    .test-content-right {
        order: 2 !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .test-features-preview {
        justify-content: center;
    }
    
    .test-start-button {
        align-self: center;
    }
    
    .question-text {
        font-size: 1.4rem;
    }
    
    .option-btn {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .result-title {
        font-size: 2rem;
    }
    
    .result-description {
        font-size: 1rem;
    }
    
    .result-actions {
        flex-direction: column;
    }
    
    .result-actions .btn {
        width: 100%;
    }
}

.article-cta {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--rose-vanilla-gradient);
    color: var(--astra-midnight);
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 179, 217, 0.4);
    align-self: flex-start;
    margin-top: 0.3rem;
}

.article-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(255, 179, 217, 0.6);
}

.feature-article-special {
    background: rgba(255, 179, 217, 0.08);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 179, 217, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 40px rgba(255, 179, 217, 0.2);
}

.feature-article-special .article-content {
    grid-template-columns: 1fr 1.5fr;
    justify-items: start;
    text-align: left;
}

.feature-article:hover {
    background: rgba(255, 179, 217, 0.08);
    border-color: rgba(255, 179, 217, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 60px rgba(255, 179, 217, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.feature-card {
    position: relative;
    background: rgba(26, 15, 20, 0.6);
    border: 1px solid rgba(255, 179, 217, 0.4);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s ease;
    overflow: hidden;
    backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 1;
}

.feature-card > *:not(.card-animation-layer):not(.card-glow) {
    position: relative;
    z-index: 2;
}

.card-animation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover .card-animation-layer {
    opacity: 1;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 179, 217, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.feature-card:hover::before {
    opacity: 1;
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gold-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px;
    z-index: 0;
    pointer-events: none;
}

.feature-card:hover .card-glow {
    opacity: 0.1;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--astra-gold);
    box-shadow: var(--glow-gold);
}

.feature-card-special {
    border-color: var(--astra-brilliant-pink);
}

.feature-card-special:hover {
    border-color: var(--astra-brilliant-pink);
    box-shadow: var(--glow-pink);
}

.card-glow-special {
    background: var(--pink-gradient);
}

.card-icon {
    margin-bottom: 1.5rem;
}

.feature-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.5));
    transition: transform 0.4s ease;
}

.feature-card:hover .feature-image {
    transform: scale(1.1) rotate(5deg);
}

.astra-avatar {
    border-radius: 50%;
    border: 3px solid var(--astra-brilliant-pink);
    box-shadow: var(--glow-pink);
}

.card-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--astra-gold);
    margin-bottom: 1rem;
}

.card-description {
    color: var(--astra-vanilla);
    opacity: 0.8;
    line-height: 1.6;
}

/* Overlay removido - ahora usamos animaciones y curiosidades */

/* Curiosidades */
.curiosity-badge {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 179, 217, 0.08);
    border: 1px solid rgba(255, 179, 217, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    transition: all 0.3s ease;
}

.feature-card:hover .curiosity-badge {
    background: rgba(255, 179, 217, 0.12);
    border-color: rgba(255, 179, 217, 0.3);
    transform: scale(1.02);
}

.curiosity-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: curiosityPulse 2s ease-in-out infinite;
}

@keyframes curiosityPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.curiosity-text {
    color: var(--astra-vanilla);
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0;
}

/* Enlace de descarga discreto */
.card-download-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--astra-gold);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.7;
    transition: all 0.3s ease;
    position: relative;
}

.card-download-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--astra-gold);
    transition: width 0.3s ease;
}

.card-download-link:hover {
    opacity: 1;
    transform: translateX(5px);
}

.card-download-link:hover::after {
    width: 100%;
}

/* Estilos de overlay removidos */

/* About Astra Section */
.about-astra {
    padding: 3.5rem 0;
    position: relative;
    z-index: 2;
}

/* Estilos cuando about-astra está activa - similar a feature-screens */
.about-astra.active,
section.about-astra.active {
    min-height: calc(100vh - 200px) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative !important;
    padding: 200px 0 3rem !important;
    padding-top: 200px !important; /* Forzar padding-top para que no tape el navbar - aumentado aún más */
    margin-top: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    visibility: visible !important;
    z-index: 1 !important; /* Asegurar que esté debajo del navbar (z-index: 10000) */
    scroll-padding-top: 200px !important; /* Prevenir que el scroll pase por encima del navbar */
    scroll-margin-top: 200px !important; /* Prevenir que el scroll pase por encima del navbar */
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    position: relative;
    z-index: 1;
    margin-top: 5rem;
}

.about-image img {
    opacity: 1 !important;
    visibility: visible !important;
}

.image-frame {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.frame-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 179, 217, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: frameGlow 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes frameGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

.astra-portrait-large {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 95vh;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    object-fit: contain;
    object-position: center;
    display: block;
    background: transparent;
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    animation: none !important;
    visibility: visible !important;
    transform: none !important;
}

/* Aura removida - solo se mantiene el borde de la imagen */

.about-text {
    color: var(--astra-vanilla);
}

.about-description {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.about-description strong {
    color: var(--astra-gold);
    font-weight: 600;
}

.astra-qualities {
    margin-top: 2rem;
}

.quality-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.quality-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.quality-item h4 {
    font-family: var(--font-title);
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--astra-gold);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.quality-item p {
    opacity: 0.8;
    line-height: 1.6;
}

/* Planets Section */
.planets {
    padding: 5rem 0;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
}

/* Artículos de Planetas - Estilo similar a funcionalidades pero más pequeño */
.planet-article {
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    position: relative;
}

.planet-article:not(:last-child) {
    border-bottom: 1px solid rgba(255, 179, 217, 0.1);
}

.planet-article-content {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    align-items: center;
}

.planet-article-reverse .planet-article-content {
    direction: rtl;
}

.planet-article-reverse .planet-article-content > * {
    direction: ltr;
}

.planet-article-image {
    position: relative;
}

.planet-article-image img {
    width: 100%;
    max-width: 120px;
    height: auto;
    border-radius: 15px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 179, 217, 0.3));
    transition: transform 0.4s ease;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 2;
}

.planet-article:hover .planet-article-image img {
    transform: scale(1.05);
}

.planet-article-text {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.planet-article-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 1.5px;
    color: var(--astra-gold);
    margin: 0;
    line-height: 1.2;
}

.planet-article-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--astra-vanilla);
    opacity: 0.85;
    margin: 0;
}

/* Fondo con Glow por Planeta */
.planet-glow-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.planet-article:hover .planet-glow-bg {
    opacity: 0.3;
}

.planet-sun .planet-glow-bg {
    background: radial-gradient(circle, rgba(255, 179, 217, 0.3) 0%, transparent 70%);
}

.planet-moon .planet-glow-bg {
    background: radial-gradient(circle, rgba(200, 200, 255, 0.2) 0%, transparent 70%);
}

.planet-mercury .planet-glow-bg {
    background: radial-gradient(circle, rgba(180, 180, 180, 0.2) 0%, transparent 70%);
}

.planet-venus .planet-glow-bg {
    background: radial-gradient(circle, rgba(255, 200, 150, 0.2) 0%, transparent 70%);
}

.planet-mars .planet-glow-bg {
    background: radial-gradient(circle, rgba(255, 100, 100, 0.2) 0%, transparent 70%);
}

.planet-jupiter .planet-glow-bg {
    background: radial-gradient(circle, rgba(255, 197, 224, 0.3) 0%, transparent 70%);
}

.planet-saturn .planet-glow-bg {
    background: radial-gradient(circle, rgba(200, 180, 150, 0.2) 0%, transparent 70%);
}

.planet-uranus .planet-glow-bg {
    background: radial-gradient(circle, rgba(150, 200, 255, 0.2) 0%, transparent 70%);
}

.planet-neptune .planet-glow-bg {
    background: radial-gradient(circle, rgba(100, 150, 255, 0.2) 0%, transparent 70%);
}

.planet-pluto .planet-glow-bg {
    background: radial-gradient(circle, rgba(100, 50, 100, 0.2) 0%, transparent 70%);
}

/* Partículas Flotantes */
.planet-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.planet-particles .particle {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0;
    animation: particleFloat 4s ease-in-out infinite;
}

.planet-particles .particle:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.planet-particles .particle:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 1s;
}

.planet-particles .particle:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 2s;
}

.planet-particles .particle:nth-child(4) {
    top: 40%;
    right: 25%;
    animation-delay: 3s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
}

/* Header del Planeta */
.planet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.planet-mythology {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 179, 217, 0.1);
    border: 1px solid rgba(255, 179, 217, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--astra-gold);
}

.myth-icon {
    font-size: 1rem;
}

.myth-text {
    opacity: 0.9;
}

/* Estadísticas del Planeta */
.planet-stats {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: 1.2rem;
    background: rgba(255, 179, 217, 0.08);
    border-radius: 15px;
    border: 1px solid rgba(255, 179, 217, 0.2);
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 300;
    font-family: var(--font-title);
    color: var(--astra-gold);
    line-height: 1;
    margin-bottom: 0.3rem;
    text-shadow: 0 0 10px rgba(255, 179, 217, 0.5);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--astra-vanilla);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Comparación Fuerte/Débil */
.planet-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.comparison-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.comparison-item.strong {
    background: rgba(255, 179, 217, 0.1);
    border-left: 3px solid rgba(255, 179, 217, 0.6);
}

.comparison-item.weak {
    background: rgba(200, 200, 255, 0.1);
    border-left: 3px solid rgba(200, 200, 255, 0.6);
}

.comparison-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.comparison-text {
    font-size: 0.9rem;
    color: var(--astra-vanilla);
    line-height: 1.5;
}

.comparison-text strong {
    color: var(--astra-gold);
    font-weight: 500;
}

/* Contenido Expandible */
.planet-expandable {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 179, 217, 0.2);
    padding-top: 1.5rem;
}

.expandable-trigger {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    padding: 0.8rem 1rem;
    background: rgba(255, 179, 217, 0.05);
    border: 1px solid rgba(255, 179, 217, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
    user-select: none;
}

.expandable-trigger:hover {
    background: rgba(255, 179, 217, 0.1);
    border-color: rgba(255, 179, 217, 0.4);
    transform: translateX(5px);
}

.expandable-trigger.active {
    background: rgba(255, 179, 217, 0.15);
    border-color: rgba(255, 179, 217, 0.5);
}

.trigger-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.expandable-trigger.active .trigger-icon {
    transform: rotate(180deg);
}

.trigger-text {
    font-size: 0.95rem;
    color: var(--astra-gold);
    font-weight: 500;
}

.expandable-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.expandable-content.active {
    max-height: 2000px;
    opacity: 1;
    padding: 1.5rem 0 0 0;
}

.tip-list {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0 0;
}

.tip-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--astra-vanilla);
    opacity: 0.9;
    line-height: 1.6;
}

.tip-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--astra-gold);
    font-size: 0.8rem;
}

/* Símbolos de Planetas */
.planet-symbol {
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 2.5rem;
    z-index: 3;
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.8));
    animation: symbolGlow 3s ease-in-out infinite;
}

@keyframes symbolGlow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Efectos Especiales por Planeta */
.planet-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Sol - Rayos */
.sun-rays {
    animation: rotateRays 8s linear infinite;
}

.sun-rays .ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 179, 217, 0.8), transparent);
    transform-origin: bottom center;
    border-radius: 2px;
}

.sun-rays .ray:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
.sun-rays .ray:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }
.sun-rays .ray:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); }
.sun-rays .ray:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg); }
.sun-rays .ray:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg); }
.sun-rays .ray:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg); }
.sun-rays .ray:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg); }
.sun-rays .ray:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg); }

@keyframes rotateRays {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Luna - Fases */
.moon-phases {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    animation: moonPhaseCycle 6s ease-in-out infinite;
}

.moon-phases .moon-phase {
    font-size: 1.2rem;
    opacity: 0.6;
    animation: moonPhasePulse 2s ease-in-out infinite;
}

.moon-phases .moon-phase:nth-child(1) { animation-delay: 0s; }
.moon-phases .moon-phase:nth-child(2) { animation-delay: 0.5s; }
.moon-phases .moon-phase:nth-child(3) { animation-delay: 1s; }
.moon-phases .moon-phase:nth-child(4) { animation-delay: 1.5s; }

@keyframes moonPhaseCycle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes moonPhasePulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Mercurio - Velocidad */
.mercury-speed {
    animation: speedLines 3s linear infinite;
}

.mercury-speed .speed-line {
    position: absolute;
    width: 30px;
    height: 2px;
    background: linear-gradient(to right, rgba(200, 200, 200, 0.8), transparent);
    top: 50%;
    left: 50%;
    transform-origin: left center;
}

.mercury-speed .speed-line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: speedMove 1s linear infinite;
}
.mercury-speed .speed-line:nth-child(2) {
    transform: translate(-50%, -50%) rotate(120deg);
    animation: speedMove 1s linear infinite 0.33s;
}
.mercury-speed .speed-line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(240deg);
    animation: speedMove 1s linear infinite 0.66s;
}

@keyframes speedMove {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Venus - Corazones */
.venus-hearts {
    animation: heartsFloat 4s ease-in-out infinite;
}

.venus-hearts .heart {
    position: absolute;
    font-size: 1.5rem;
    animation: heartFloat 3s ease-in-out infinite;
}

.venus-hearts .heart:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}
.venus-hearts .heart:nth-child(2) {
    top: 50%;
    right: 20%;
    animation-delay: 1s;
}
.venus-hearts .heart:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 2s;
}

@keyframes heartFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 1;
    }
}

/* Marte - Fuego */
.mars-fire {
    animation: fireFlicker 2s ease-in-out infinite;
}

.mars-fire .flame {
    position: absolute;
    font-size: 1.8rem;
    animation: flameFlicker 1.5s ease-in-out infinite;
}

.mars-fire .flame:nth-child(1) {
    top: 10%;
    left: 30%;
    animation-delay: 0s;
}
.mars-fire .flame:nth-child(2) {
    top: 50%;
    right: 30%;
    animation-delay: 0.5s;
}
.mars-fire .flame:nth-child(3) {
    bottom: 10%;
    left: 50%;
    animation-delay: 1s;
}

@keyframes flameFlicker {
    0%, 100% {
        transform: scale(1) rotate(-5deg);
        opacity: 0.8;
    }
    25% {
        transform: scale(1.1) rotate(5deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.9) rotate(-3deg);
        opacity: 0.9;
    }
    75% {
        transform: scale(1.05) rotate(3deg);
        opacity: 1;
    }
}

/* Júpiter - Expansión */
.jupiter-expansion {
    animation: expansionPulse 4s ease-in-out infinite;
}

.jupiter-expansion .expansion-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 197, 224, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.jupiter-expansion .expansion-ring:nth-child(1) {
    width: 60px;
    height: 60px;
    animation: ringExpand 3s ease-in-out infinite;
}
.jupiter-expansion .expansion-ring:nth-child(2) {
    width: 80px;
    height: 80px;
    animation: ringExpand 3s ease-in-out infinite 0.5s;
}
.jupiter-expansion .expansion-ring:nth-child(3) {
    width: 100px;
    height: 100px;
    animation: ringExpand 3s ease-in-out infinite 1s;
}

@keyframes ringExpand {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.8;
    }
}

/* Saturno - Anillos */
.saturn-rings {
    animation: ringsRotate 10s linear infinite;
}

.saturn-rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid rgba(200, 180, 150, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(60deg);
}

.saturn-rings .ring:nth-child(1) {
    width: 80px;
    height: 20px;
}
.saturn-rings .ring:nth-child(2) {
    width: 100px;
    height: 25px;
}

@keyframes ringsRotate {
    from { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); }
}

/* Urano - Rayos */
.uranus-lightning {
    animation: lightningFlash 3s ease-in-out infinite;
}

.uranus-lightning .bolt {
    position: absolute;
    font-size: 1.5rem;
    animation: boltFlash 2s ease-in-out infinite;
}

.uranus-lightning .bolt:nth-child(1) {
    top: 15%;
    left: 25%;
    animation-delay: 0s;
}
.uranus-lightning .bolt:nth-child(2) {
    top: 50%;
    right: 25%;
    animation-delay: 0.7s;
}
.uranus-lightning .bolt:nth-child(3) {
    bottom: 15%;
    left: 50%;
    animation-delay: 1.4s;
}

@keyframes boltFlash {
    0%, 90%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    5%, 10% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Neptuno - Olas */
.neptune-waves {
    animation: wavesFlow 4s ease-in-out infinite;
}

.neptune-waves .wave {
    position: absolute;
    font-size: 1.5rem;
    animation: waveFlow 3s ease-in-out infinite;
}

.neptune-waves .wave:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}
.neptune-waves .wave:nth-child(2) {
    top: 50%;
    right: 20%;
    animation-delay: 1s;
}
.neptune-waves .wave:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 2s;
}

@keyframes waveFlow {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
        opacity: 1;
    }
}

/* Plutón - Transformación */
.pluto-transformation {
    animation: transformRotate 5s ease-in-out infinite;
}

.pluto-transformation .transform-icon {
    position: absolute;
    font-size: 1.8rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: transformSpin 3s linear infinite;
}

.pluto-transformation .transform-icon:nth-child(2) {
    animation-delay: 1.5s;
    opacity: 0.6;
}

@keyframes transformSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Colores por Planeta */
.planet-sun .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(255, 179, 217, 0.6));
}

.planet-moon .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(200, 200, 255, 0.5));
}

.planet-mercury .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(180, 180, 180, 0.5));
}

.planet-venus .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(255, 200, 150, 0.5));
}

.planet-mars .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(255, 100, 100, 0.5));
}

.planet-jupiter .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(255, 197, 224, 0.6));
}

.planet-saturn .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(200, 180, 150, 0.5));
}

.planet-uranus .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(150, 200, 255, 0.5));
}

.planet-neptune .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(100, 150, 255, 0.5));
}

.planet-pluto .planet-article-image {
    filter: drop-shadow(0 0 20px rgba(100, 50, 100, 0.5));
}

/* Datos Curiosos, Frases y Tips */
.planet-fun-fact,
.planet-inspiration,
.planet-tip {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    background: rgba(255, 179, 217, 0.05);
    border-left: 2px solid rgba(255, 179, 217, 0.3);
    border-radius: 8px;
    align-items: flex-start;
}

.fact-icon,
.quote-icon,
.tip-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.fact-text,
.quote-text,
.tip-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--astra-vanilla);
    opacity: 0.85;
    margin: 0;
}

.quote-text {
    font-style: italic;
    opacity: 0.9;
}

.tip-text strong {
    color: var(--astra-gold);
    font-weight: 500;
}

/* Download Section */
.download {
    padding: 5rem 0;
    position: relative;
    z-index: 2;
    text-align: center;
    background: 
        radial-gradient(ellipse at center, rgba(255, 179, 217, 0.1) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(255, 179, 217, 0.05) 50%, transparent 100%);
    overflow: hidden;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
}

.download::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 179, 217, 0.15) 0%, transparent 70%);
    animation: downloadPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes downloadPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.download-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 3rem;
    min-height: calc(100vh - 200px);
}

.download-text {
    order: 1;
}

.download-image {
    order: 2;
}

@media (max-width: 1200px) {
    .download-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 3rem 2rem;
    }
    
    .download-image {
        order: 1;
    }
    
    .download-text {
        order: 2;
        text-align: center;
        align-items: center;
    }
    
    .download-features {
        align-items: center;
    }
}

.download-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 10;
}

.download.active .download-image {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.download-main-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 95vh;
    border-radius: 20px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2));
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
}

.download.active .download-main-image,
.download.active .download-image {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.download.active .download-main-image {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.download.active .download-image img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.download.active .download-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: grid !important;
}

.download-text {
    width: 100%;
    text-align: left;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    order: 1;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 2rem 0;
}

.download.active .download-text,
.download.active .download-content,
.download.active .download-buttons,
.download.active .download-features {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.download-title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--rose-vanilla-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.download-title .title-line {
    display: block;
}

.download-subtitle {
    font-size: 1.3rem;
    color: var(--astra-vanilla);
    opacity: 0.9;
    margin-bottom: 0;
    font-weight: 300;
}

.download-buttons {
    margin-bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.5rem;
}

/* Badge de App Store más grande en la página de descarga */
.download-buttons .app-store-badge {
    height: 80px !important;
}

/* Badge oficial de App Store */
.app-store-badge-link {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
    text-decoration: none;
    margin-right: 1rem;
}

.app-store-badge {
    height: 60px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.3));
    transition: all 0.3s ease;
}

.app-store-badge-link:hover .app-store-badge {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 0 20px rgba(255, 179, 217, 0.6)) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.app-store-badge-link:active .app-store-badge {
    transform: translateY(-1px) scale(1.02);
}

/* Badge en hero section */
.hero-download-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-badge .app-store-badge {
    height: 50px;
}

@media (max-width: 768px) {
    .app-store-badge {
        height: 50px;
    }
    
    .hero-badge .app-store-badge {
        height: 45px;
    }
    
    .hero-download-section {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

.app-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.3rem 2.5rem;
    background: linear-gradient(135deg, rgba(255, 179, 217, 0.15) 0%, rgba(255, 232, 242, 0.1) 100%);
    border: 2px solid var(--astra-soft-rose);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(255, 179, 217, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.3);
}

.app-store-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 179, 217, 0.3), transparent);
    transition: left 0.6s;
}

.app-store-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 
        0 0 30px rgba(255, 179, 217, 0.6),
        0 0 60px rgba(255, 179, 217, 0.4),
        0 15px 40px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 179, 217, 0.25) 0%, rgba(255, 232, 242, 0.2) 100%);
    border-color: rgba(255, 179, 217, 0.8);
}

.app-store-btn:hover::before {
    left: 100%;
}

.app-store-btn:active {
    transform: translateY(-2px) scale(1.01);
}

.app-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
}

.app-store-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.download-label {
    font-size: 0.9rem;
    color: var(--astra-vanilla);
    opacity: 0.7;
}

.store-name {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--astra-gold);
}

.download-features {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.download-feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--astra-vanilla);
    font-size: 1.1rem;
    opacity: 0.95;
}

.download-feature span:not(.feature-check) {
    font-weight: 300;
    letter-spacing: 0.5px;
}

.feature-check {
    color: var(--astra-pink);
    font-weight: 700;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 179, 217, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Contact Section */
.contact {
    padding: 5rem 0;
    position: relative;
    z-index: 2;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.contact-left {
    display: flex;
    flex-direction: column;
}

.contact-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    object-fit: contain;
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 0 10px rgba(255, 179, 217, 0.2));
    animation: none !important;
    transform: none !important;
}

@media (max-width: 968px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-right {
        order: -1;
    }
}

.contact-form {
    max-width: 100%;
    margin: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(26, 15, 20, 0.6);
    border: 1px solid rgba(255, 179, 217, 0.5);
    border-radius: 10px;
    color: var(--astra-vanilla);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--astra-gold);
    box-shadow: 0 0 20px rgba(255, 179, 217, 0.4);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--astra-vanilla);
    opacity: 0.5;
}

/* Contenedor del footer */
.footer .container {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Elementos internos del footer */
.footer * {
    color: #FFFFFF;
}

.footer h4 {
    color: #FFB3D9;
}

.footer a {
    color: #FFFFFF;
}

.footer span {
    display: inline-block;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer li {
    display: list-item;
}

/* Clase para ocultar footer cuando sea necesario */
.footer.hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 0.5rem;
}

.footer-section {
    display: block;
}

.footer-section h4 {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 1px;
    color: #FFB3D9;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 179, 217, 0.6);
    line-height: 1.0;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 0.2rem;
    list-style: none;
}

.footer-section ul li a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    padding: 0.15rem 0;
    font-size: 0.8rem !important;
    font-weight: 300;
    transition: all 0.3s ease;
    line-height: 1.0;
}

.footer-section ul li a:hover {
    color: var(--astra-gold) !important;
    opacity: 1 !important;
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(255, 179, 217, 0.6);
}

.footer-section a {
    color: #FFFFFF !important;
    text-decoration: none;
    opacity: 1 !important;
    transition: all 0.3s ease;
    font-size: 1rem;
    display: block;
    font-weight: 400;
    text-shadow: 0 0 10px rgba(255, 179, 217, 0.5);
}

.footer-section a:hover {
    color: var(--astra-soft-rose) !important;
    opacity: 1 !important;
    transform: translateX(5px);
    text-shadow: 0 0 15px rgba(255, 179, 217, 0.8);
}

/* Estilos para el logo y texto del footer */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

.footer-logo .logo-icon {
    font-size: 1.2rem;
    display: inline-block;
}

.footer-logo .logo-text {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-block;
}

.footer-section p {
    color: #FFFFFF;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.1rem 0 0 0;
    opacity: 0.9;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    font-size: 1.5rem;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: 0.5rem;
    border-top: 0.5px solid rgba(255, 179, 217, 0.3);
    padding-left: 2rem;
    padding-right: 2rem;
}

.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.75rem;
    line-height: 1.0;
    font-weight: 300;
    margin: 0;
}

/* Efectos adicionales místicos */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.mystical-shimmer {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 179, 217, 0.2),
        transparent
    );
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

/* Efecto de brillo en texto */
.text-glow {
    text-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor;
}

/* Animación de respiración para elementos importantes */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.breathing {
    animation: breathe 4s ease-in-out infinite;
}

/* Animaciones de tarjetas */
.floating-cards {
    position: absolute;
    font-size: 2rem;
    opacity: 0.6;
    animation: floatCard 3s ease-in-out infinite;
}

.floating-cards:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-cards:nth-child(2) {
    top: 50%;
    right: 15%;
    animation-delay: 1s;
}

.floating-cards:nth-child(3) {
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(15deg);
    }
}

.sparkle-star {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.7;
    animation: sparkle 2s ease-in-out infinite;
}

.sparkle-star:nth-child(1) {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.sparkle-star:nth-child(2) {
    top: 30%;
    right: 20%;
    animation-delay: 0.5s;
}

.sparkle-star:nth-child(3) {
    bottom: 25%;
    left: 25%;
    animation-delay: 1s;
}

.sparkle-star:nth-child(4) {
    bottom: 15%;
    right: 15%;
    animation-delay: 1.5s;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

.rotating-planet {
    position: absolute;
    font-size: 2rem;
    opacity: 0.6;
    animation: rotatePlanet 4s linear infinite;
}

.rotating-planet:nth-child(1) {
    top: 20%;
    left: 20%;
}

.rotating-planet:nth-child(2) {
    top: 50%;
    right: 20%;
    animation-duration: 5s;
}

.rotating-planet:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-duration: 6s;
}

@keyframes rotatePlanet {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.floating-moon {
    position: absolute;
    font-size: 1.8rem;
    opacity: 0.6;
    animation: floatMoon 3s ease-in-out infinite;
}

.floating-moon:nth-child(1) {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.floating-moon:nth-child(2) {
    top: 45%;
    right: 15%;
    animation-delay: 1s;
}

.floating-moon:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 2s;
}

@keyframes floatMoon {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-25px) rotate(10deg);
        opacity: 0.9;
    }
}

.palm-hand {
    position: absolute;
    font-size: 2rem;
    opacity: 0.6;
    animation: floatHand 3s ease-in-out infinite;
}

.palm-hand:nth-child(1) {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.palm-hand:nth-child(2) {
    top: 45%;
    right: 15%;
    animation-delay: 1s;
}

.palm-hand:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 2s;
}

@keyframes floatHand {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-20px) rotate(10deg) scale(1.1);
        opacity: 0.8;
    }
}

.mirror-number {
    position: absolute;
    color: var(--astra-gold);
    font-size: 1.5rem;
    font-weight: 300;
    font-family: 'Courier New', monospace;
    opacity: 0.7;
    animation: mirrorGlow 3s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 179, 217, 0.5);
}

.mirror-number:nth-child(1) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.mirror-number:nth-child(2) {
    top: 50%;
    right: 15%;
    animation-delay: 1s;
}

.mirror-number:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 2s;
    font-size: 1.8rem;
}

@keyframes mirrorGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
        text-shadow: 0 0 8px rgba(255, 179, 217, 0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
        text-shadow: 0 0 15px var(--astra-gold), 0 0 25px rgba(255, 179, 217, 0.8);
    }
}

.chat-bubble {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.6;
    animation: bubbleFloat 2.5s ease-in-out infinite;
}

.chat-bubble:nth-child(1) {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.chat-bubble:nth-child(2) {
    top: 40%;
    right: 15%;
    animation-delay: 0.8s;
}

.chat-bubble:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 1.6s;
}

@keyframes bubbleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-15px) scale(1.1);
        opacity: 0.8;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
        z-index: 10002 !important; /* Asegurar que esté por encima de todo */
        position: relative !important;
        pointer-events: auto !important; /* Asegurar que los clicks funcionen */
    }
    
    .nav-menu {
        position: fixed;
        z-index: 10001 !important; /* Asegurar que esté por encima de las secciones */
        pointer-events: auto !important; /* Asegurar que los clicks funcionen */
        top: 70px;
        left: -100% !important; /* FORZAR que esté oculto por defecto */
        flex-direction: column;
        background: rgba(26, 15, 20, 0.98);
        width: 100%;
        text-align: center;
        transition: left 0.3s ease;
        padding: 1.5rem 0;
        border-bottom: 1px solid rgba(255, 232, 232, 0.3);
        z-index: 10000 !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        transform: translateX(0);
        visibility: hidden !important; /* Oculto por defecto */
        opacity: 0 !important; /* Oculto por defecto */
        pointer-events: none !important; /* No clickeable cuando está oculto */
    }
    
    .nav-menu.active {
        left: 0 !important;
        transform: translateX(0) !important;
        visibility: visible !important; /* Visible cuando está activo */
        opacity: 1 !important; /* Visible cuando está activo */
        pointer-events: auto !important; /* Clickeable cuando está activo */
    }
    
    /* Desplegables en menú móvil - posición relativa para no solapar */
    .nav-menu .nav-dropdown {
        position: relative;
    }
    
    .nav-menu .dropdown-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 0 0 !important;
        border-radius: 8px;
        box-shadow: none;
        background: rgba(15, 10, 15, 0.8);
        z-index: 10001 !important;
        display: none;
    }
    
    .nav-menu .nav-dropdown.active .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Clase para añadir padding cuando el menú está abierto */
    body.menu-open .hero,
    body.menu-open section {
        padding-top: 300px !important;
        transition: padding-top 0.3s ease;
    }
    
    /* Logos truncados en móvil - reducir tamaño */
    .logo {
        font-size: 1rem !important;
        gap: 0.4rem !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    
    .logo-text {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        display: inline-block !important;
    }
    
    .logo-icon {
        font-size: 1.2rem !important;
    }
    
    .logo-a-with-stars {
        display: inline !important;
        line-height: 1.2 !important;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .nav-menu {
        gap: 0.5rem;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }
    
    /* Asegurar que las secciones activas se muestren en móvil - EXACTAMENTE COMO HERO */
    section.active:not(.hero):not(#camino-espiritual),
    .feature-screen.active:not(#camino-espiritual),
    section.feature-screen.active:not(#camino-espiritual),
    .about-astra.active,
    section.about-astra.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        min-height: 100vh !important;
        height: auto !important;
        z-index: 1 !important; /* Bajo el navbar - igual que hero */
        padding: 100px 0 3rem !important; /* Padding-top reducido para bajar el contenido */
        padding-top: 100px !important; /* Espacio suficiente para navbar */
        margin-top: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        scroll-padding-top: 100px !important; /* Prevenir scroll sobre navbar */
        scroll-margin-top: 100px !important; /* Prevenir scroll sobre navbar */
        align-items: flex-start !important;
        justify-content: center !important;
    }
    
    /* Subir un poco el contenido de las páginas de features */
    #tarot.feature-screen.active,
    #horoscopo.feature-screen.active,
    #sueños.feature-screen.active,
    #conversa-astra.feature-screen.active,
    #carta-natal.feature-screen.active,
    #lectura-palma.feature-screen.active,
    #sincronicidad.feature-screen.active,
    #conversa-astra.feature-screen.active,
    #tarot.feature-screen.active,
    #horoscopo.feature-screen.active,
    #sueños.feature-screen.active,
    section.feature-screen.active:not(#camino-espiritual),
    .about-astra.active,
    section.about-astra.active {
        padding-top: 100px !important; /* Padding-top reducido para bajar el contenido */
        margin-top: 0 !important;
        scroll-padding-top: 100px !important; /* Prevenir que el scroll pase por encima del navbar */
        scroll-margin-top: 100px !important; /* Prevenir que el scroll pase por encima del navbar */
    }
    
    /* Contenedor de contenido - NO sobrescribir padding, usar el del hero */
    /* .feature-screen.active ya tiene padding: 200px 0 3rem del hero */
    
    .feature-screen.active .feature-screen-content {
        padding: 1rem 2rem 2.5rem !important;
        min-height: calc(100vh - 80px) !important;
    }
    
    /* Footer en móvil - mantiene estilo base */
    .footer {
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
        padding: 1rem 0;
    }
    
    /* OCULTAR FOOTER COMPLETAMENTE EN MÓVIL CUANDO EL TEST ESTÁ ACTIVO */
    body:has(#camino-espiritual.active) .footer,
    body:has(#camino-espiritual.feature-screen.active) .footer,
    #camino-espiritual.active ~ .footer,
    #camino-espiritual.feature-screen.active ~ .footer,
    body:has(#test-questions[style*="display: flex"]) .footer,
    body:has(#test-questions[style*="display:flex"]) .footer,
    body:has(#test-start[style*="display: flex"]) .footer,
    body:has(#test-result[style*="display: flex"]) .footer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -9999 !important;
        clip-path: inset(100%) !important;
        transform: scale(0) !important;
    }
    
    /* Asegurar que las secciones tengan espacio para el footer al final */
    /* EXCLUIR .hero.active - mantiene su layout original */
    section.feature-screen.active,
    section.active {
        position: relative !important;
        padding-bottom: 0 !important; /* El footer ya está al final, no necesita padding extra */
        min-height: auto !important; /* Altura natural del contenido */
    }
    
    /* .hero.active mantiene su layout original - NO se afecta por reglas del footer */
    .hero.active {
        min-height: 100vh !important; /* Mantener altura completa */
        padding-bottom: 3rem !important; /* Mantener padding original */
    }
    
    /* Asegurar que el body tenga flexbox para que el footer esté al final */
    /* SOLO en móvil, y solo si no interfiere con el navbar */
    body {
        /* display: flex !important; */
        /* flex-direction: column !important; */
        min-height: 100vh !important;
    }
    
    /* Las secciones ocupan el espacio disponible */
    /* EXCLUIR .hero.active - mantiene su layout original */
    section.feature-screen.active,
    section.active {
        flex: 1 !important; /* Ocupa el espacio disponible */
    }
    
    /* .hero.active NO tiene flex: 1 - mantiene su comportamiento original */
    
    /* Feature-screen-content EXACTAMENTE como about-content - SOBRESCRIBIR TODO */
    section.feature-screen.active .feature-screen-content,
    .feature-screen.active .feature-screen-content,
    #tarot.feature-screen.active .feature-screen-content,
    #sueños.feature-screen.active .feature-screen-content,
    #carta-natal.feature-screen.active .feature-screen-content,
    #horoscopo.feature-screen.active .feature-screen-content,
    #sincronicidad.feature-screen.active .feature-screen-content,
    #conversa-astra.feature-screen.active .feature-screen-content,
    #lectura-palma.feature-screen.active .feature-screen-content,
    .feature-screen-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 2rem !important;
        align-items: center !important;
        padding: 2rem 1.5rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        min-height: auto !important;
    }
    
    .feature-screen.active .feature-screen-text,
    .feature-screen.active .feature-screen-image {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Imagen arriba - EXACTAMENTE como about-image - SOBRESCRIBIR TODO */
    section.feature-screen.active .feature-screen-image-wrapper,
    .feature-screen.active .feature-screen-image-wrapper,
    #tarot.feature-screen.active .feature-screen-image-wrapper,
    #sueños.feature-screen.active .feature-screen-image-wrapper,
    #carta-natal.feature-screen.active .feature-screen-image-wrapper,
    #horoscopo.feature-screen.active .feature-screen-image-wrapper,
    #sincronicidad.feature-screen.active .feature-screen-image-wrapper,
    .feature-screen-image-wrapper {
        order: 1 !important;
        width: 100% !important;
        margin-top: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
        grid-column: auto !important;
    }
    
    section.feature-screen.active .feature-screen-image,
    .feature-screen.active .feature-screen-image,
    .feature-screen-image {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    section.feature-screen.active .feature-screen-image img,
    .feature-screen.active .feature-screen-image img,
    .feature-screen-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        border-radius: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Texto abajo - EXACTAMENTE como about-text - SOBRESCRIBIR TODO */
    section.feature-screen.active .feature-screen-text,
    .feature-screen.active .feature-screen-text,
    #tarot.feature-screen.active .feature-screen-text,
    #sueños.feature-screen.active .feature-screen-text,
    #carta-natal.feature-screen.active .feature-screen-text,
    #horoscopo.feature-screen.active .feature-screen-text,
    #sincronicidad.feature-screen.active .feature-screen-text,
    .feature-screen-text {
        order: 2 !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        align-self: flex-start !important;
        grid-column: auto !important;
    }
    
    section.feature-screen.active .feature-screen-text .section-title,
    .feature-screen.active .feature-screen-text .section-title,
    .feature-screen-text .section-title {
        font-size: 2rem !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    section.feature-screen.active .feature-screen-text p,
    section.feature-screen.active .feature-screen-text .article-description,
    .feature-screen.active .feature-screen-text p,
    .feature-screen.active .feature-screen-text .article-description,
    .feature-screen-text p,
    .feature-screen-text .article-description {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
    }

    /* FORZAR FLEX VERTICAL - EXACTAMENTE COMO about-content */
    section.feature-screen.active .feature-screen-content.feature-screen-reverse,
    .feature-screen.active .feature-screen-content.feature-screen-reverse,
    #tarot.feature-screen.active .feature-screen-content.feature-screen-reverse,
    #sueños.feature-screen.active .feature-screen-content.feature-screen-reverse,
    #carta-natal.feature-screen.active .feature-screen-content.feature-screen-reverse,
    #horoscopo.feature-screen.active .feature-screen-content.feature-screen-reverse,
    #sincronicidad.feature-screen.active .feature-screen-content.feature-screen-reverse,
    section.feature-screen.legal-screen.active .feature-screen-content,
    section.feature-screen.active .feature-screen-content,
    .feature-screen-content.feature-screen-reverse,
    .feature-screen-reverse .feature-screen-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 2rem !important;
        align-items: center !important;
        padding: 2rem 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        grid-column: auto !important;
    }
    
    /* Forzar orden vertical - imagen primero, texto después */
    section.feature-screen.active .feature-screen-content.feature-screen-reverse .feature-screen-image-wrapper,
    .feature-screen.active .feature-screen-content.feature-screen-reverse .feature-screen-image-wrapper,
    .feature-screen-reverse .feature-screen-image-wrapper,
    body.standalone-page .feature-screen-reverse .feature-screen-image-wrapper {
        order: 1 !important;
        grid-column: auto !important;
    }
    
    section.feature-screen.active .feature-screen-content.feature-screen-reverse .feature-screen-text,
    .feature-screen.active .feature-screen-content.feature-screen-reverse .feature-screen-text,
    .feature-screen-reverse .feature-screen-text,
    body.standalone-page .feature-screen-reverse .feature-screen-text {
        order: 2 !important;
        grid-column: auto !important;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    /* Layout móvil para Sobre Astra - Imagen arriba, texto abajo */
    .about-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 2rem !important;
        align-items: center !important;
        padding: 2rem 1.5rem !important;
    }
    
    .about-image {
        order: 1 !important;
        width: 100% !important;
        margin-top: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .about-text {
        order: 2 !important;
        width: 100% !important;
        text-align: left !important;
    }
    
    .astra-portrait-large {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    /* Artículos de planetas responsive */
    .planet-article {
        margin-bottom: 2rem;
        padding: 1.5rem 0;
    }
    
    .planet-article-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .planet-article-reverse .planet-article-content {
        direction: ltr;
    }
    
    .planet-article-image img {
        max-width: 100px;
        margin: 0 auto;
        display: block;
    }
    
    .planet-article-title {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .planet-article-description {
        font-size: 0.95rem;
        text-align: center;
    }
    
    /* Artículos responsive */
    .feature-article {
        margin-bottom: 4rem;
        padding: 2rem 0;
    }
    
    .article-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .feature-article-reverse .article-content {
        direction: ltr;
    }
    
    .article-title {
        font-size: 2rem;
    }
    
    .article-description {
        font-size: 1.1rem;
    }
    
    .article-benefit {
        font-size: 1rem;
        padding: 1rem;
    }
    
    .article-image img {
        max-width: 100%;
    }
    
    .feature-article-special {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
    }
    
    /* Logos aún más pequeños en pantallas muy pequeñas */
    .logo {
        font-size: 0.85rem !important;
        gap: 0.3rem !important;
    }
    
    .logo-text {
        font-size: 0.85rem !important;
    }
    
    .logo-icon {
        font-size: 1rem !important;
    }
}

/* Botón Flotante de Descarga */
.floating-download-btn {
    position: fixed;
    top: 120px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 179, 217, 0.15);
    backdrop-filter: blur(10px);
    color: var(--astra-vanilla-bright);
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 0.75rem;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 
        0 0 15px rgba(255, 179, 217, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(255, 179, 217, 0.3);
}

.floating-download-btn:hover {
    transform: translateY(-3px) scale(1.03);
    background: rgba(255, 179, 217, 0.25);
    box-shadow: 
        0 0 20px rgba(255, 179, 217, 0.4),
        0 6px 25px rgba(0, 0, 0, 0.3);
}

.floating-icon {
    font-size: 1rem;
    animation: floatIcon 2s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.floating-text {
    font-weight: 400;
    letter-spacing: 1px;
}

.floating-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.floating-download-btn:hover .floating-glow {
    left: 100%;
}

@media (max-width: 768px) {
    .floating-download-btn {
        bottom: 20px;
        right: 20px;
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .floating-text {
        display: none;
    }
    
    .floating-icon {
        font-size: 1.3rem;
    }
}

/* ============================================
   SOLUCIÓN DEFINITIVA: ELIMINAR TODOS LOS EFECTOS HOVER
   ============================================ */

/* Regla global para TODAS las imágenes en feature-screen */
section.feature-screen img,
section.feature-screen .feature-screen-image,
section.feature-screen .feature-screen-image *,
section.feature-screen .astra-feature-image {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default !important;
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
}

/* TODOS los estados hover, focus, active */
section.feature-screen img:hover,
section.feature-screen img:focus,
section.feature-screen img:active,
section.feature-screen .feature-screen-image:hover,
section.feature-screen .feature-screen-image:focus,
section.feature-screen .feature-screen-image:active,
section.feature-screen .feature-screen-image:hover img,
section.feature-screen .feature-screen-image:focus img,
section.feature-screen .feature-screen-image:active img,
section.feature-screen .astra-feature-image:hover,
section.feature-screen .astra-feature-image:focus,
section.feature-screen .astra-feature-image:active {
    pointer-events: none !important;
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Eliminar TODOS los pseudo-elementos */
section.feature-screen img::before,
section.feature-screen img::after,
section.feature-screen .feature-screen-image::before,
section.feature-screen .feature-screen-image::after,
section.feature-screen .astra-feature-image::before,
section.feature-screen .astra-feature-image::after,
section.feature-screen img:hover::before,
section.feature-screen img:hover::after,
section.feature-screen .feature-screen-image:hover::before,
section.feature-screen .feature-screen-image:hover::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ============================================
   REGLAS FINALES PARA ELIMINAR EFECTOS HOVER EN IMÁGENES
   ============================================ */

/* Deshabilitar completamente cualquier interacción con el mouse */
#conversa-astra .feature-screen-image,
#conversa-astra .feature-screen-image *,
#conversa-astra .astra-feature-image,
#conversa-astra .feature-screen-image img,
#conversa-astra img.astra-feature-image,
#conversa-astra a:not(.btn):not(.btn-primary):not(.card-download-link),
#conversa-astra a:not(.btn):not(.btn-primary):not(.card-download-link) *,
#conversa-astra a:not(.btn):not(.btn-primary):not(.card-download-link) img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
}

/* Eliminar TODOS los efectos hover en imágenes de feature-screen */
#conversa-astra .astra-feature-image,
#conversa-astra .feature-screen-image img,
#conversa-astra img.astra-feature-image,
#conversa-astra .feature-screen-image,
#conversa-astra .feature-screen-image:hover,
#conversa-astra .feature-screen-image:focus,
#conversa-astra .feature-screen-image:active,
#conversa-astra a,
#conversa-astra a:hover,
#conversa-astra a:focus,
#conversa-astra a:active,
#conversa-astra a img,
#conversa-astra a:hover img,
#conversa-astra a:focus img,
#conversa-astra a:active img {
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
    -webkit-filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
}

#conversa-astra .astra-feature-image:hover,
#conversa-astra .astra-feature-image:focus,
#conversa-astra .astra-feature-image:active,
#conversa-astra .feature-screen-image:hover img,
#conversa-astra .feature-screen-image img:hover,
#conversa-astra .feature-screen-image img:focus,
#conversa-astra .feature-screen-image img:active,
#conversa-astra img.astra-feature-image:hover,
#conversa-astra a:hover .astra-feature-image,
#conversa-astra a:hover img,
#conversa-astra a:focus .astra-feature-image,
#conversa-astra a:focus img {
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
    -webkit-filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
}

#conversa-astra .astra-feature-image::before,
#conversa-astra .astra-feature-image::after,
#conversa-astra .feature-screen-image img::before,
#conversa-astra .feature-screen-image img::after,
#conversa-astra .feature-screen-image::before,
#conversa-astra .feature-screen-image::after,
#conversa-astra .astra-feature-image:hover::before,
#conversa-astra .astra-feature-image:hover::after,
#conversa-astra .feature-screen-image:hover img::before,
#conversa-astra .feature-screen-image:hover img::after,
#conversa-astra .feature-screen-image:hover::before,
#conversa-astra .feature-screen-image:hover::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ============================================
   REGLA MÁXIMA ESPECIFICIDAD - DEBE IR AL FINAL
   ============================================ */
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image,
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image:hover,
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image:focus,
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image:active {
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    text-decoration: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 12px rgba(255, 179, 217, 0.3)) drop-shadow(0 0 25px rgba(255, 179, 217, 0.2)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image::before,
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image::after,
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image:hover::before,
html body section#conversa-astra.feature-screen.active .feature-screen-content .feature-screen-image img.astra-feature-image:hover::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Eliminar completamente cualquier línea o borde en hover para #conversa-astra */
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:hover,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:focus,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:active,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:hover,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:focus,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:active,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:hover,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:focus,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:active {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-width: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-style: none !important;
    text-underline-offset: 0 !important;
    text-underline-position: auto !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Eliminar pseudo-elementos que puedan crear líneas */
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:hover::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:hover::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:focus::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:focus::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:active::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:active::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:hover::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:hover::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:focus::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:focus::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:active::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img:active::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:hover::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:hover::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:focus::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:focus::after,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:active::before,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image img.astra-feature-image:active::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    border-width: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* REGLA FINAL PARA ELIMINAR CUALQUIER LÍNEA ROSA EN #conversa-astra */
html body section#conversa-astra.feature-screen *,
html body section#conversa-astra.feature-screen *:hover,
html body section#conversa-astra.feature-screen *:focus,
html body section#conversa-astra.feature-screen *:active,
html body section#conversa-astra.feature-screen *::before,
html body section#conversa-astra.feature-screen *::after {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-underline-offset: 0 !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
}

html body section#conversa-astra.feature-screen .feature-screen-image,
html body section#conversa-astra.feature-screen .feature-screen-image:hover,
html body section#conversa-astra.feature-screen .feature-screen-image:focus,
html body section#conversa-astra.feature-screen .feature-screen-image:active,
html body section#conversa-astra.feature-screen .feature-screen-image *,
html body section#conversa-astra.feature-screen .feature-screen-image *:hover,
html body section#conversa-astra.feature-screen .feature-screen-image *:focus,
html body section#conversa-astra.feature-screen .feature-screen-image *:active,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:hover,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:focus,
html body section#conversa-astra.feature-screen .feature-screen-content .feature-screen-image:active {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Prevenir que se muestren códigos JavaScript o hrefs como texto */
a[href="javascript:void(0)"]::after,
a[href^="javascript:"]::after,
a[href]::after,
a[href]::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ocultar cualquier contenido que pueda mostrar código JavaScript o URLs */
a::after,
a::before {
    content: none !important;
}

/* Restaurar la rallita mágica SOLO en los botones del menú superior */
.navbar .nav-link::after {
    content: '' !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFB3D9, transparent);
    transition: width 0.35s ease-out;
    box-shadow: 0 0 12px rgba(255, 179, 217, 0.8);
}

.navbar .nav-link:hover::after {
    width: 90% !important;
}

/* Aún más específico para los botones con javascript:void(0) (Consultas y Predicciones) */
.navbar a.nav-link[href="javascript:void(0)"]::after {
    content: '' !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFB3D9, transparent);
    transition: width 0.35s ease-out;
    box-shadow: 0 0 12px rgba(255, 179, 217, 0.8);
}

.navbar a.nav-link[href="javascript:void(0)"]:hover::after {
    width: 90% !important;
}

/* Ocultar cualquier texto que muestre hrefs o URLs */
a[href*="apps.apple.com"]::after,
a[href*="apps.apple.com"]::before,
a[href*="javascript"]::after,
a[href*="javascript"]::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ocultar cualquier elemento en la esquina inferior izquierda que muestre código */
body::after,
html::after,
section::after,
.hero::after,
.feature-screen::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
}

/* Ocultar cualquier contenido que pueda mostrar código JavaScript */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Permitir selección de texto solo en párrafos y textos legibles */
p, span, h1, h2, h3, h4, h5, h6, li, .article-description, .section-title {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Ocultar cualquier texto que aparezca en la esquina inferior izquierda */
body > *:last-child::after,
html > body::after,
body::after,
html::after,
section::after,
.hero::after,
.feature-screen::after,
.container::after,
.contact::after,
.footer::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    bottom: -9999px !important;
    left: -9999px !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Ocultar cualquier enlace que muestre su href como texto */
a[href*="apps.apple.com"],
a[href*="javascript"],
a[href*="mailto"] {
    text-decoration: none !important;
}

a[href*="apps.apple.com"]::after,
a[href*="apps.apple.com"]::before,
a[href*="javascript"]::after,
a[href*="javascript"]::before,
a[href*="mailto"]::after,
a[href*="mailto"]::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* EXCEPCIÓN: Restaurar la rallita mágica SOLO para los botones del menú con javascript:void(0) */
.navbar a.nav-link[href="javascript:void(0)"]::after,
.navbar .nav-link[href="javascript:void(0)"]::after {
    content: '' !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #FFB3D9, transparent) !important;
    transition: width 0.35s ease-out !important;
    box-shadow: 0 0 12px rgba(255, 179, 217, 0.8) !important;
    font-size: initial !important;
    line-height: initial !important;
}

.navbar a.nav-link[href="javascript:void(0)"]:hover::after,
.navbar .nav-link[href="javascript:void(0)"]:hover::after {
    width: 90% !important;
}

/* Ocultar cualquier elemento posicionado en la esquina inferior izquierda que muestre texto */
*[style*="bottom"][style*="left"],
*[style*="position: absolute"][style*="bottom"],
*[style*="position: fixed"][style*="bottom"] {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* Ocultar cualquier texto que contenga URLs o códigos JavaScript */
*:not(script):not(style) {
    text-shadow: none !important;
}

/* Específicamente ocultar texto en la esquina inferior izquierda */
body > *:last-child,
html > body > *:last-child {
    position: relative;
}

body > *:last-child::after,
html > body > *:last-child::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    position: absolute !important;
    bottom: -9999px !important;
    left: -9999px !important;
    z-index: -9999 !important;
}

/* Video Introductorio del Test */
.test-video-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    display: none !important; /* Oculto por defecto */
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 90px !important;
    background: linear-gradient(135deg, #0A0A0F 0%, #1A0F14 50%, #0F0F14 100%) !important;
    z-index: 5000 !important; /* Reducido de 99999 - debe estar debajo del navbar (10000) */
    cursor: pointer !important;
    pointer-events: none !important; /* No bloquear cuando está oculto */
    visibility: hidden !important;
    opacity: 0 !important;
}

.test-video-container[style*="display: flex"],
.test-video-container[style*="display:flex"],
.test-video-container[style*="display: flex !important"],
.test-video-container[style*="display:flex !important"] {
    display: flex !important;
    pointer-events: auto !important; /* Permitir interacciones cuando está visible */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5000 !important; /* Reducido de 99999 - debe estar debajo del navbar (10000) */
}

/* MÓVIL: Asegurar que el video sea visible - REGLAS ULTRA AGRESIVAS */
@media (max-width: 768px) {
    /* Cualquier test-video-container que tenga display:flex en inline styles */
    .test-video-container[style*="display: flex"],
    .test-video-container[style*="display:flex"],
    .test-video-container[style*="display: flex !important"],
    .test-video-container[style*="display:flex !important"],
    /* También si tiene la clase activa o está en el body */
    body > .test-video-container,
    .test-video-container:not([style*="display: none"]) {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        z-index: 5000 !important; /* Reducido de 99999 - debe estar debajo del navbar (10000) */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding-top: 70px !important;
        transform: translateZ(0) !important;
        overflow: visible !important;
    }
    
    /* iOS Safari: NO usar isolation: isolate (rompe el stacking context) */
    @supports (-webkit-touch-callout: none) {
        .test-video-container[style*="display: flex"],
        .test-video-container[style*="display:flex"],
        .test-video-container[style*="display: flex !important"],
        .test-video-container[style*="display:flex !important"],
        body > .test-video-container,
        .test-video-container:not([style*="display: none"]) {
            isolation: auto !important; /* NO usar isolate en iOS */
            width: 100% !important; /* Usar 100% en lugar de 100vw en iOS */
            max-width: 100% !important;
        }
    }
    
    /* Asegurar que la sección padre NO oculte el video */
    #camino-espiritual .test-video-container,
    section#camino-espiritual .test-video-container {
        position: fixed !important;
        z-index: 5000 !important; /* Reducido de 99999 - debe estar debajo del navbar (10000) */
        display: flex !important;
    }
    
    /* iOS Safari: Asegurar que la sección padre esté visible */
    @supports (-webkit-touch-callout: none) {
        #camino-espiritual:has(.test-video-container[style*="display: flex"]) {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1000 !important;
            overflow: visible !important;
            position: relative !important;
        }
    }
    
    /* Asegurar que el video en sí sea visible */
    .test-intro-video {
        max-width: 100% !important;
        max-height: calc(100vh - 80px) !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Asegurar que ninguna sección oculte el video container */
    section:not(.active) .test-video-container,
    .feature-screen:not(.active) .test-video-container {
        /* NO aplicar display:none aquí, dejar que el inline style lo maneje */
    }
}

.test-intro-video {
    max-width: 95% !important;
    max-height: calc(100vh - 20px) !important;
    width: auto !important;
    height: auto !important;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(255, 179, 217, 0.3);
    object-fit: contain !important;
    object-position: center !important;
}

/* Imagen más grande para Lectura de Manos */
#lectura-palma.feature-screen .feature-screen-image img,
#lectura-palma.feature-screen .feature-screen-image img:hover,
#lectura-palma.feature-screen .feature-screen-image img:focus,
#lectura-palma.feature-screen .feature-screen-image img:active {
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
}

/* Reducir margen superior para Lectura de Manos */
#lectura-palma.feature-screen .feature-screen-image {
    margin-top: 2rem !important;
}

/* Imagen más grande para Interpretación de Sueños */
#sueños.feature-screen .feature-screen-image img,
#sueños.feature-screen .feature-screen-image img:hover,
#sueños.feature-screen .feature-screen-image img:focus,
#sueños.feature-screen .feature-screen-image img:active {
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
}

/* Imagen más grande para Carta Natal */
#carta-natal.feature-screen .feature-screen-image img,
#carta-natal.feature-screen .feature-screen-image img:hover,
#carta-natal.feature-screen .feature-screen-image img:focus,
#carta-natal.feature-screen .feature-screen-image img:active {
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
}

/* Imagen más grande para Horóscopo Diario */
#horoscopo.feature-screen .feature-screen-image img,
#horoscopo.feature-screen .feature-screen-image img:hover,
#horoscopo.feature-screen .feature-screen-image img:focus,
#horoscopo.feature-screen .feature-screen-image img:active {
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
}

/* Imagen más grande para Sincronicidad */
#sincronicidad.feature-screen .feature-screen-image img,
#sincronicidad.feature-screen .feature-screen-image img:hover,
#sincronicidad.feature-screen .feature-screen-image img:focus,
#sincronicidad.feature-screen .feature-screen-image img:active {
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
}

/* Ajustes específicos para la imagen de Preguntas Frecuentes:
   un poco más baja y más alta/visible */
/* Sobrescrito por estilos más específicos arriba */
section#faq.feature-screen.legal-screen.active .feature-screen-image {
    margin-top: 0 !important;
    align-self: flex-start !important;
}

section#faq.feature-screen.legal-screen.active .feature-screen-image img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================
   REGLA FINAL Y MÁS ESPECÍFICA PARA LEGAL-SCREEN
   Esta regla debe estar al final para sobrescribir TODAS las demás
   ============================================ */
@media (min-width: 769px) {
    /* MÁXIMA ESPECIFICIDAD: Sobrescribir TODAS las reglas anteriores */
    html body section.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image {
        align-items: flex-start !important;
        justify-content: center !important;
        display: flex !important;
        margin-top: 0 !important; /* CRÍTICO: Sobrescribir el margin-top: 5rem de la línea 2131 */
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    html body section.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }
    
    html body section.feature-screen.legal-screen.active .feature-screen-content {
        align-items: flex-start !important;
    }
    
    html body section.feature-screen.legal-screen.active .feature-screen-content .feature-screen-image img {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: block !important;
    }
    
    html body section.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text h2,
    html body section.feature-screen.legal-screen.active .feature-screen-content .feature-screen-text .section-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Restaurar estilos de botón en #conversa-astra */
#conversa-astra .btn,
#conversa-astra .btn-primary,
#conversa-astra a.btn,
#conversa-astra a.btn-primary {
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #E8A5C4 0%, #F0D4E0 30%, #E8B8D0 60%, #E8A5C4 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 
        0 0 8px rgba(232, 165, 196, 0.2),
        0 0 15px rgba(232, 165, 196, 0.15),
        0 3px 10px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(232, 165, 196, 0.4) !important;
    display: inline-flex !important;
    padding: 0.7rem 1.8rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

#conversa-astra .btn:hover,
#conversa-astra .btn-primary:hover,
#conversa-astra a.btn:hover,
#conversa-astra a.btn-primary:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: linear-gradient(135deg, #F0B8D4 0%, #F5D9E5 30%, #F0C4D8 60%, #F0B8D4 100%) !important;
    box-shadow: 
        0 0 12px rgba(232, 165, 196, 0.25),
        0 0 20px rgba(232, 165, 196, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(232, 165, 196, 0.6) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

#conversa-astra .btn span,
#conversa-astra .btn-primary span,
#conversa-astra a.btn span,
#conversa-astra a.btn-primary span {
    pointer-events: none !important;
    user-select: none !important;
}

/* ============================================
   REGLAS FINALES PARA OCULTAR SECCIONES DEL TEST
   Máxima especificidad - debe estar al final
   ============================================ */
html body #test-result .result-features,
html body #test-result .result-practices,
html body .test-result-screen .result-features,
html body .test-result-screen .result-practices,
html body .result-content .result-features,
html body .result-content .result-practices,
html body .result-right .result-features,
html body .result-right .result-practices,
html body #camino-espiritual #test-result .result-features,
html body #camino-espiritual #test-result .result-practices,
html body #camino-espiritual .test-result-screen .result-features,
html body #camino-espiritual .test-result-screen .result-practices {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

html body #test-result .result-features-title,
html body #test-result .result-practices-title,
html body .test-result-screen .result-features-title,
html body .test-result-screen .result-practices-title,
html body .result-content .result-features-title,
html body .result-content .result-practices-title,
html body .result-right .result-features-title,
html body .result-right .result-practices-title,
html body .result-features .result-features-title,
html body .result-practices .result-practices-title,
html body #camino-espiritual #test-result .result-features-title,
html body #camino-espiritual #test-result .result-practices-title {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

html body #test-result .result-features-list,
html body #test-result .result-practices-list,
html body .test-result-screen .result-features-list,
html body .test-result-screen .result-practices-list,
html body .result-content .result-features-list,
html body .result-content .result-practices-list,
html body .result-right .result-features-list,
html body .result-right .result-practices-list,
html body #camino-espiritual #test-result .result-features-list,
html body #camino-espiritual #test-result .result-practices-list {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    list-style: none !important;
}

html body #test-result .result-features-list li,
html body #test-result .result-practices-list li,
html body .test-result-screen .result-features-list li,
html body .test-result-screen .result-practices-list li,
html body .result-content .result-features-list li,
html body .result-content .result-practices-list li,
html body .result-right .result-features-list li,
html body .result-right .result-practices-list li {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}