:root {
    --hero-red: #E72429;     /* Rojo Spiderman */
    --hero-blue: #1662a7;    /* Azul Spiderman */
    --hero-dark-blue: #0a3a6b;
    --comic-yellow: #FCEE0A; /* Amarillo de acción */
    --comic-black: #121212;  /* Negro para bordes */
    --comic-white: #ffffff;
    
    --font-comic: 'Bangers', cursive; /* Fuente para títulos */
    --font-body: 'Roboto Condensed', sans-serif; /* Fuente para leer */
    
    --border-thick: 4px solid var(--comic-black);
    --shadow-comic: 5px 5px 0px var(--comic-black); /* Sombra dura estilo cómic */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--comic-black);
    background-color: var(--comic-white);
    /* Patrón de puntos de semitono (Halftone dots) sutil para el fondo general */
    background-image: radial-gradient(var(--comic-black) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #f0f0f0;
}

/* ============ UTILIDADES CÓMIC ============ */
.comic-text {
    font-family: var(--font-comic);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 3px 3px 0px var(--comic-black); /* Sombra dura al texto */
}

.comic-subtitle {
    font-family: var(--font-comic);
    font-size: 2.5rem;
    color: var(--hero-blue);
    text-shadow: 2px 2px 0px var(--comic-yellow);
    margin-bottom: 1.5rem;
}

.comic-title-yellow {
    font-family: var(--font-comic);
    font-size: 3rem;
    color: var(--comic-yellow);
    text-shadow: 3px 3px 0px var(--hero-red), 5px 5px 0px var(--comic-black);
}

/* ============ LOADER ============ */
#loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--hero-red);
    /* Fondo con patrón de telaraña sutil */
    background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 20px, rgba(0,0,0,0.1) 20px, rgba(0,0,0,0.1) 22px);
    color: var(--comic-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}
#loader p { font-family: var(--font-comic); font-size: 1.5rem; margin-top: 20px; letter-spacing: 1px;}
.spider-spinner { font-size: 4rem; animation: swing 2s infinite ease-in-out; }
@keyframes swing { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(20px) rotate(10deg); } }


/* ============ MUSIC CONTROL ============ */
.music-control-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
}
.music-control {
    width: 60px; height: 60px;
    background: var(--hero-blue);
    color: var(--comic-yellow);
    border-radius: 50%;
    border: var(--border-thick);
    display: flex; justify-content: center; align-items: center;
    box-shadow: var(--shadow-comic);
    cursor: pointer; transition: transform 0.3s;
    font-size: 1.5rem;
}
.music-control:hover { transform: scale(1.1); background: var(--hero-red); }
.music-control.playing { animation: pulse-hero 1.5s infinite; background: var(--hero-red); }
@keyframes pulse-hero { 0% { box-shadow: 0 0 0 0 rgba(231, 36, 41, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(231, 36, 41, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 36, 41, 0); } }


/* ============ HERO SECTION (PORTADA) ============ */
.hero {
    min-height: 100vh;
    /* Imagen de fondo de Spiderman. ¡Cámbiala por una de alta calidad! */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1635805737707-575885ab0820?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--comic-white);
    position: relative;
    border-bottom: var(--border-thick);
    overflow: hidden;
}

/* Decoración de telarañas en las esquinas usando gradientes CSS */
.web-corner-top-left {
    position: absolute; top: 0; left: 0; width: 150px; height: 150px;
    background: repeating-radial-gradient(circle at 0 0, transparent 0, transparent 10px, rgba(255,255,255,0.3) 10px, rgba(255,255,255,0.3) 12px);
    z-index: 1;
}
.web-corner-bottom-right {
    position: absolute; bottom: 0; right: 0; width: 150px; height: 150px;
    background: repeating-radial-gradient(circle at 100% 100%, transparent 0, transparent 10px, rgba(255,255,255,0.3) 10px, rgba(255,255,255,0.3) 12px);
    z-index: 1;
}

.hero-content {
    z-index: 2;
    padding: 2rem;
    /* Fondo estilo panel de cómic */
    background: rgba(22, 98, 167, 0.85); /* Azul translúcido */
    border: var(--border-thick);
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
    transform: rotate(-2deg); /* Un pequeño giro para dinamismo */
    max-width: 90%;
}

.hero-icon { width: 80px; margin-bottom: 1rem; filter: drop-shadow(3px 3px 0 #000); }
.pre-title { font-family: var(--font-comic); font-size: 1.2rem; color: var(--comic-yellow); letter-spacing: 1px; }
.main-title { font-size: 4rem; line-height: 1; margin: 10px 0; color: var(--comic-white); }

.comic-badge {
    display: inline-block;
    background: var(--hero-red);
    color: var(--comic-yellow);
    font-family: var(--font-comic);
    font-size: 1.5rem;
    padding: 5px 15px;
    border: 3px solid var(--comic-black);
    transform: rotate(3deg);
    margin-bottom: 20px;
    box-shadow: 3px 3px 0px #000;
}

.scroll-down-btn {
    background: var(--comic-yellow);
    color: var(--comic-black);
    border: var(--border-thick);
    padding: 12px 25px;
    font-family: var(--font-comic);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-comic);
    transition: all 0.2s;
}
.scroll-down-btn:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0px #000; background: #fff; }
.scroll-down-btn i { margin-left: 8px; animation: bounce 1s infinite alternate; }


/* ============ SECCIONES GENERALES ============ */
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; text-align: center; }
section { padding: 5rem 0; position: relative; }

/* Fondos temáticos para las secciones */
.section-comic-white {
    background-color: var(--comic-white);
    /* Patrón de telaraña sutil en el fondo blanco */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23e6e6e6' stroke-width='1' d='M50 50 L0 0 M50 50 L100 0 M50 50 L100 100 M50 50 L0 100 M50 50 L50 0 M50 50 L50 100 M50 50 L0 50 M50 50 L100 50 M50 25 Q75 25 75 50 Q75 75 50 75 Q25 75 25 50 Q25 25 50 25z' /%3E%3C/svg%3E");
    border-top: var(--border-thick); border-bottom: var(--border-thick);
}

.section-comic-blue {
    background-color: var(--hero-blue);
    /* Patrón de puntos (halftone) azul más oscuro */
    background-image: radial-gradient(var(--hero-dark-blue) 30%, transparent 30%);
    background-size: 15px 15px;
    color: var(--comic-white);
    border-bottom: var(--border-thick);
}
.section-comic-red {
    background-color: var(--hero-red);
    /* Patrón de rayos o líneas de acción */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 20px);
    border-bottom: var(--border-thick);
    padding-bottom: 8rem; /* Espacio extra para la foto */
}

.icon-deco-hero { font-size: 3rem; color: var(--hero-red); filter: drop-shadow(3px 3px 0 var(--comic-black)); margin-bottom: 1rem; }
.quote-comic { font-size: 1.3rem; font-weight: bold; font-style: italic; background: var(--comic-yellow); display: inline-block; padding: 15px; border: var(--border-thick); box-shadow: var(--shadow-comic); transform: skewX(-5deg); }

/* ============ COUNTDOWN (Estilo Edificios) ============ */
.countdown-grid { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 30px; }
.comic-box {
    background: var(--comic-white);
    color: var(--comic-black);
    padding: 15px 20px;
    min-width: 90px;
    border: var(--border-thick);
    box-shadow: var(--shadow-comic);
    /* Simular ventanas de edificio */
    background-image: linear-gradient(var(--comic-black) 2px, transparent 2px), linear-gradient(90deg, var(--comic-black) 2px, transparent 2px);
    background-size: 50px 50px;
    background-color: #fff; /* Fondo para las ventanas */
    position: relative;
}
/* Techo del edificio */
.comic-box::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: var(--hero-dark-blue); border: var(--border-thick); border-bottom: none; }

.time-box span { display: block; font-size: 2.5rem; font-family: var(--font-comic); color: var(--hero-red); text-shadow: 2px 2px 0 #000; background: white; padding: 5px; border: 2px solid black; }
.time-box small { font-family: var(--font-comic); font-size: 1rem; background: var(--comic-yellow); padding: 2px 5px; border: 2px solid black; display: inline-block; margin-top: 5px; }


/* ============ DETAILS GRID ============ */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
.comic-panel {
    background: white; padding: 2rem; border: var(--border-thick); box-shadow: var(--shadow-comic);
    position: relative; overflow: hidden;
}
/* Efecto de viñeta en las esquinas */
.comic-panel::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 40px; height: 40px; background: var(--comic-yellow); border: var(--border-thick); transform: rotate(45deg); }

.icon-circle-hero { width: 70px; height: 70px; background: var(--hero-blue); color: var(--comic-yellow); border-radius: 50%; border: var(--border-thick); display: flex; justify-content: center; align-items: center; font-size: 2rem; margin: 0 auto 15px; box-shadow: 3px 3px 0 #000; }
.detail-item h3 { font-family: var(--font-comic); font-size: 1.8rem; margin-bottom: 10px; color: var(--hero-red); text-shadow: 1px 1px 0 #000; }
.highlight-text { font-weight: bold; font-size: 1.2rem; color: var(--hero-dark-blue); }

.btn-hero-action {
    display: inline-block; margin-top: 15px; padding: 10px 25px; background: var(--hero-red); color: var(--comic-white);
    text-decoration: none; font-family: var(--font-comic); font-size: 1.1rem; border: var(--border-thick);
    box-shadow: 3px 3px 0 #000; transition: 0.3s;
}
.btn-hero-action:hover { background: var(--hero-blue); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }


/* ============ PHOTO SECTION (Comic Cover) ============ */
.comic-book-cover {
    background: white;
    padding: 15px;
    border: var(--border-thick);
    box-shadow: 15px 15px 0px rgba(0,0,0,0.3);
    display: inline-block;
    position: relative;
    max-width: 400px;
    transform: rotate(2deg); /* Inclinación de portada */
}
.daily-bugle-header { font-family: var(--font-comic); font-size: 1.5rem; background: var(--comic-yellow); border: 3px solid black; padding: 5px; margin-bottom: 10px; text-transform: uppercase; }
.cover-image-container { position: relative; border: 3px solid black; }
.comic-book-cover img { width: 100%; height: auto; display: block; filter: contrast(110%) saturate(120%); /* Colores más vibrantes */ }

/* Burbuja de diálogo de cómic */
.comic-speech-bubble {
    position: absolute; bottom: 20px; right: -10px;
    background: white; padding: 15px; font-family: var(--font-comic); font-size: 1.2rem;
    border: 3px solid black; border-radius: 50%;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
    z-index: 10;
}
/* La "colita" de la burbuja */
.comic-speech-bubble::before {
    content: ''; position: absolute; bottom: -15px; left: 20px;
    border-width: 15px 15px 0; border-style: solid; border-color: black transparent transparent;
    display: block; width: 0;
}
.comic-speech-bubble::after {
    content: ''; position: absolute; bottom: -11px; left: 23px;
    border-width: 12px 12px 0; border-style: solid; border-color: white transparent transparent;
    display: block; width: 0;
}

.cover-footer-text { font-weight: bold; margin-top: 10px; background: var(--hero-blue); color: white; padding: 5px; border: 2px solid black; }

/* ============ INFO CARDS & FOOTER ============ */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 30px; }
.comic-card { background: var(--comic-yellow); padding: 2rem; border: var(--border-thick); box-shadow: var(--shadow-comic); text-align: left; }
.comic-card h3 { font-family: var(--font-comic); font-size: 1.5rem; border-bottom: 3px solid black; display: inline-block; margin-bottom: 10px; }
.icon-card-hero { font-size: 2rem; float: right; color: var(--hero-red); filter: drop-shadow(2px 2px 0 #000); }

.rsvp-hero-section {
    position: relative;
    padding-top: 10rem; /* Espacio para el fondo de ciudad */
    padding-bottom: 4rem;
    background: var(--hero-dark-blue);
    color: white;
    border-top: var(--border-thick);
    overflow: hidden;
}
/* Fondo de silueta de ciudad */
.cityscape-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 150px;
    background-image: url('https://cdn.pixabay.com/photo/2018/01/31/05/43/web-3120321_1280.png'); /* Silueta de ciudad */
    background-size: cover; background-position: bottom; background-repeat: repeat-x;
    filter: brightness(0) invert(1); /* Volverla blanca/gris para contraste con el azul oscuro */
    opacity: 0.3;
    z-index: 0;
}

.rsvp-content { position: relative; z-index: 1; }

.btn-whatsapp-hero {
    display: inline-block; margin-top: 30px; padding: 15px 30px;
    background: #25D366; color: white; font-weight: bold; font-size: 1.2rem;
    border-radius: 50px; text-decoration: none; border: var(--border-thick);
    box-shadow: 0 5px 0 #157a3a; transition: 0.2s;
    font-family: var(--font-comic); letter-spacing: 1px;
}
.btn-whatsapp-hero:hover { transform: translateY(3px); box-shadow: 0 2px 0 #157a3a; background: #20bd5a; }

.footer-credit-hero { margin-top: 40px; font-family: var(--font-comic); color: var(--comic-yellow); letter-spacing: 2px; }

/* ============ MEDIA QUERIES ============ */
@media (min-width: 768px) {
    .main-title { font-size: 6rem; }
    .detail-grid, .grid-2 { grid-template-columns: 1fr 1fr; }
    .photo-section { padding-bottom: 5rem; }
    .comic-book-cover { transform: rotate(2deg) scale(1.1); }
}