/* ============================================================
   COLEGIO JOSÉ PARDO - MODAL Y CELEBRACIÓN DE ANIVERSARIO
   Especial 3 de Noviembre: Viaje Google Earth desde el Espacio
   hasta Chalhuanca + Explosión de Alegría y Fuegos Artificiales
   ============================================================ */

/* === CANVAS DE FUEGOS ARTIFICIALES Y CONFETI === */
#aniversarioCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100001;
}

/* === OVERLAY GENERAL === */
.aniversario-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(8, 14, 28, 0.92) 0%, rgba(3, 6, 12, 0.98) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s;
    overflow-y: auto;
    overflow-x: hidden;
}

.aniversario-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   ESCENA 1: INTRO CINEMATOGRÁFICA TIPO GOOGLE EARTH
   (Espacio -> Mundo -> Perú -> Chalhuanca -> Plaza de Armas -> Colegio)
   ============================================================ */
.earth-intro-stage {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #02050d;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.85s;
}

.earth-intro-stage.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Capas del globo: estrellas, WebGL y vectores (creadas por aniversario-earth.js) */
.earth-map-layers {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: opacity;
}

.earth-layer-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.earth-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.5) 100%);
}

/* Capas de Imágenes Satelitales / Aéreas para el Zoom */
.earth-photo-layers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.earth-photo-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    will-change: transform, opacity, filter;
}

/* Nubes atmosféricas de transición (efecto atravesar nubes) */
.earth-cloud-flash {
    position: absolute;
    inset: -20%;
    z-index: 3;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(200, 230, 255, 0.75) 40%, transparent 75%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: opacity, transform;
}

/* Título de lugar estilo documental */
.earth-place-title {
    position: absolute;
    left: clamp(20px, 5vw, 64px);
    bottom: clamp(96px, 16vh, 150px);
    z-index: 5;
    pointer-events: none;
    color: #ffffff;
    max-width: min(560px, 86vw);
    opacity: 0;
    transform: translateY(14px);
}

.earth-place-title.show {
    animation: placeTitleIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.earth-place-title .place-rule {
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, #C41E2A 0 50%, #FFD45A 50% 100%);
    transform-origin: left;
    animation: placeRuleIn 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.earth-place-title h3 {
    margin: 0;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: clamp(2rem, 6vw, 4.2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.earth-place-title p {
    margin: 10px 0 0;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FFE58A;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

@keyframes placeTitleIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes placeRuleIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.earth-credits {
    position: absolute;
    right: 24px;
    bottom: 8px;
    z-index: 6;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.telemetry-row {
    display: flex;
    gap: 10px;
}

.telemetry-row > span:first-child {
    min-width: 44px;
    color: #94A3B8;
}

/* HUD Satelital Tipo Google Earth */
.earth-hud-top {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
    gap: 12px;
    flex-wrap: wrap;
}

.earth-telemetry {
    background: rgba(8, 15, 30, 0.78);
    border: 1px solid rgba(56, 189, 248, 0.45);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 14px;
    color: #E2E8F0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

.telemetry-header {
    color: #38BDF8;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.telemetry-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 10px #22C55E;
    animation: blinkDot 1s infinite alternate;
}

@keyframes blinkDot {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

.telemetry-coords {
    color: #FFD45A;
    font-weight: 700;
}

.earth-hud-bottom {
    position: absolute;
    bottom: 28px;
    left: 24px;
    right: 24px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.earth-stage-caption {
    background: linear-gradient(90deg, rgba(196, 30, 42, 0.9) 0%, rgba(15, 23, 42, 0.92) 100%);
    border-left: 4px solid #FFD45A;
    padding: 10px 22px;
    border-radius: 0 14px 14px 0;
    color: #ffffff;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: clamp(0.92rem, 2vw, 1.15rem);
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    gap: 10px;
}

.earth-skip-btn {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.earth-skip-btn:hover {
    background: rgba(245, 158, 11, 0.35);
    border-color: #FFD45A;
    transform: translateY(-2px);
}

/* ============================================================
   ESCENA 2: VENTANA POP-UP DE FELICITACIÓN DE ANIVERSARIO
   ============================================================ */

/* Anillo de Onda Expansiva (Shockwave) */
.aniversario-shockwave {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    margin-top: -130px;
    margin-left: -130px;
    border-radius: 50%;
    border: 4px solid rgba(245, 197, 66, 0.95);
    box-shadow: 0 0 60px rgba(245, 197, 66, 0.85), inset 0 0 45px rgba(196, 30, 42, 0.85);
    pointer-events: none;
    opacity: 0;
    z-index: 100000;
}

.aniversario-shockwave.boom {
    animation: shockwaveBoom 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes shockwaveBoom {
    0% {
        transform: scale(0.15);
        opacity: 1;
        border-width: 10px;
    }
    60% {
        opacity: 0.9;
        border-width: 4px;
    }
    100% {
        transform: scale(5);
        opacity: 0;
        border-width: 1px;
    }
}

/* === CONTENEDOR PRINCIPAL DEL MODAL === */
.aniversario-modal {
    position: relative;
    max-width: 880px;
    width: 100%;
    background:
        linear-gradient(155deg, rgba(20, 32, 60, 0.95) 0%, rgba(10, 16, 30, 0.97) 52%, rgba(82, 12, 18, 0.95) 100%);
    border-radius: 30px;
    padding: 2.6rem 2.3rem 2.1rem;
    border: 2px solid rgba(245, 197, 66, 0.75);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
        0 30px 70px -15px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(201, 146, 42, 0.45),
        0 0 100px rgba(196, 30, 42, 0.35);
    color: #ffffff;
    text-align: center;
    transform: scale(0.6) translateY(45px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.55s ease;
    overflow: hidden;
    margin: auto;
    z-index: 100002;
}

.aniversario-modal.revealed {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Foto panorámica sutil de fondo del colegio en la cabecera del modal */
.aniversario-modal-bg-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 195px;
    background-size: cover;
    background-position: center 35%;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Resplandor rotativo de fondo (Sunburst Ray) */
.aniversario-rays {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(245, 197, 66, 0.06) 20deg,
        transparent 40deg,
        rgba(196, 30, 42, 0.08) 60deg,
        transparent 80deg,
        rgba(245, 197, 66, 0.06) 100deg,
        transparent 120deg,
        rgba(196, 30, 42, 0.08) 140deg,
        transparent 160deg,
        rgba(245, 197, 66, 0.06) 180deg,
        transparent 200deg,
        rgba(196, 30, 42, 0.08) 220deg,
        transparent 240deg,
        rgba(245, 197, 66, 0.06) 260deg,
        transparent 280deg,
        rgba(196, 30, 42, 0.08) 300deg,
        transparent 320deg,
        rgba(245, 197, 66, 0.06) 340deg,
        transparent 360deg
    );
    animation: rotateRays 45s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rotateRays {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Contenido dentro del modal */
.aniversario-content {
    position: relative;
    z-index: 1;
}

/* Botón Cerrar */
.aniversario-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 1.7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.aniversario-close:hover {
    background: rgba(196, 30, 42, 0.92);
    border-color: #f5c5c9;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(196, 30, 42, 0.7);
}

/* Barra superior izquierda de controles (Sonido + Repetir Intro) */
.aniversario-top-controls {
    position: absolute;
    top: 1.05rem;
    left: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.aniversario-sound-toggle,
.aniversario-replay-earth {
    height: 38px;
    padding: 0 14px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(245, 197, 66, 0.5);
    color: #ffd700;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
}

.aniversario-replay-earth {
    color: #93C5FD;
    border-color: rgba(56, 189, 248, 0.45);
}

.aniversario-sound-toggle:hover,
.aniversario-replay-earth:hover {
    background: rgba(245, 197, 66, 0.22);
    border-color: #ffe066;
    color: #ffffff;
    transform: scale(1.04);
}

/* Cabecera / Escudo Flotante */
.aniversario-badge-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 0.65rem;
}

.aniversario-escudo {
    width: 102px;
    height: 102px;
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(245, 197, 66, 0.9)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.65));
    animation: floatingEscudo 3.5s ease-in-out infinite;
}

@keyframes floatingEscudo {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

.aniversario-halo {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 197, 66, 0.55) 0%, rgba(196, 30, 42, 0.35) 50%, transparent 75%);
    animation: pulseHalo 2.5s infinite alternate;
    pointer-events: none;
}

@keyframes pulseHalo {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.25); opacity: 1; }
}

/* Cintillo Festivo */
.aniversario-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #A87A21, #F59E0B, #FFF0B3, #F59E0B, #A87A21);
    background-size: 200% auto;
    color: #121D35;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(245, 197, 66, 0.45);
    margin-bottom: 0.65rem;
    animation: shimmerGold 3s linear infinite;
}

@keyframes shimmerGold {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Título de Impacto */
.aniversario-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.65rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #ffffff 12%, #FFE27D 48%, #FFA439 82%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6));
}

.aniversario-subtitle {
    font-size: clamp(0.95rem, 1.75vw, 1.1rem);
    color: #E2E8F0;
    font-weight: 400;
    max-width: 720px;
    margin: 0 auto 1.2rem;
    line-height: 1.55;
}

.aniversario-motto-highlight {
    color: #FFD45A;
    font-weight: 700;
}

/* === MINI GALERÍA DE HITOS (CHALHUANCA & COLEGIO JOSÉ PARDO) === */
.aniversario-landmarks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    flex-wrap: wrap;
}

.landmark-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 212, 90, 0.35);
    padding: 5px 13px 5px 6px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #F8FAFC;
}

.landmark-pill img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #FFD45A;
}

/* === GRID DE RECONOCIMIENTO A LOS CUATRO ESTAMENTOS === */
.aniversario-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin: 0.85rem 0 1.35rem;
    text-align: left;
}

@media (max-width: 650px) {
    .aniversario-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.aniversario-card {
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.aniversario-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--card-accent, #F59E0B);
    border-radius: 4px 0 0 4px;
}

.aniversario-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(245, 197, 66, 0.65);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 25px rgba(245, 197, 66, 0.25);
}

.card-director { --card-accent: #E06C76; }
.card-docentes { --card-accent: #F59E0B; }
.card-alumnos  { --card-accent: #87CF3E; }
.card-admin    { --card-accent: #60A5FA; }

.aniversario-card-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.aniversario-card-body h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.aniversario-card-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #FFE27D;
}

.aniversario-card-body p {
    font-size: 0.84rem;
    line-height: 1.45;
    color: #E2E8F0;
    margin: 0;
}

/* Frase de Brindis / Juramento */
.aniversario-toast {
    font-size: 0.95rem;
    font-style: italic;
    color: #FFF0B3;
    background: linear-gradient(90deg, rgba(196, 30, 42, 0.28) 0%, rgba(245, 158, 11, 0.22) 50%, rgba(196, 30, 42, 0.28) 100%);
    border: 1px dashed rgba(245, 197, 66, 0.55);
    padding: 0.85rem 1.35rem;
    border-radius: 14px;
    margin-bottom: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1.45;
}

/* Botones de Acción */
.aniversario-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.aniversario-btn-enter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #C41E2A 0%, #E63946 50%, #F59E0B 100%);
    background-size: 200% auto;
    color: #ffffff;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.95rem 2.2rem;
    border-radius: 50px;
    border: 2px solid rgba(255, 235, 150, 0.9);
    cursor: pointer;
    box-shadow: 0 0 35px rgba(230, 57, 70, 0.6), 0 8px 25px rgba(0, 0, 0, 0.45);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.aniversario-btn-enter:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.85), 0 12px 30px rgba(0, 0, 0, 0.5);
    background-position: right center;
}

/* === BOTÓN FLOTANTE PERMANENTE (TRIGGER FESTIVO) === */
.aniversario-floating-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99990;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #A01820 0%, #C41E2A 50%, #D4A017 100%);
    color: #ffffff;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 11px 20px;
    border-radius: 50px;
    border: 2px solid rgba(255, 230, 120, 0.8);
    box-shadow: 0 4px 25px rgba(196, 30, 42, 0.55), 0 0 15px rgba(245, 158, 11, 0.45);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatingPulsing 3s infinite ease-in-out;
}

.aniversario-floating-trigger:hover {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 8px 35px rgba(230, 57, 70, 0.8), 0 0 30px rgba(245, 158, 11, 0.7);
}

.aniversario-floating-trigger .trigger-icon {
    font-size: 1.3rem;
    animation: spinSlow 6s linear infinite;
}

@keyframes floatingPulsing {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 4px 25px rgba(196, 30, 42, 0.55), 0 0 15px rgba(245, 158, 11, 0.45);
    }
    50% {
        transform: translateY(-6px);
        box-shadow: 0 8px 30px rgba(196, 30, 42, 0.75), 0 0 25px rgba(245, 158, 11, 0.65);
    }
}

@keyframes spinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === ADAPTABILIDAD RESPONSIVE === */
@media (max-width: 768px) {
    .aniversario-modal {
        padding: 3.2rem 1.2rem 1.5rem;
        border-radius: 22px;
    }

    .aniversario-top-controls {
        top: 0.85rem;
        left: 0.9rem;
    }

    .aniversario-sound-toggle,
    .aniversario-replay-earth {
        height: 34px;
        padding: 0 10px;
        font-size: 0.75rem;
    }

    .aniversario-close {
        top: 0.75rem;
        right: 0.9rem;
        width: 38px;
        height: 38px;
        font-size: 1.4rem;
    }

    .aniversario-escudo {
        width: 78px;
        height: 78px;
    }

    .aniversario-title {
        font-size: 1.65rem;
    }

    .aniversario-subtitle {
        font-size: 0.88rem;
        margin-bottom: 0.9rem;
    }

    .aniversario-toast {
        font-size: 0.84rem;
        padding: 0.65rem 0.9rem;
    }

    .earth-telemetry {
        font-size: 0.72rem;
        padding: 8px 12px;
    }

    .aniversario-floating-trigger {
        bottom: 16px;
        right: 16px;
        font-size: 0.82rem;
        padding: 9px 15px;
    }
}

/* Intro satelital en pantallas angostas */
@media (max-width: 640px) {
    .earth-place-title {
        bottom: 190px;
    }

    .earth-place-title p {
        letter-spacing: 0.14em;
    }

    .earth-hud-top {
        top: 14px;
        left: 14px;
        right: 14px;
    }

    .earth-hud-bottom {
        bottom: 24px;
        left: 14px;
        right: 14px;
    }

    .earth-credits {
        right: 14px;
        left: 14px;
        text-align: center;
    }
}