/* Archivo style.css */

/* Estilos generales */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #3b0837;
    position:relative;
    overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    width: 100%;
    overflow-x: hidden; /* Evitar desplazamiento horizontal */
  }
*,
*::before,
*::after {
  max-width: 100%; /* Asegurar que todos los elementos no excedan el ancho del viewport */
}
@media (max-width: 768px) {
    body {
      overflow-x: hidden;
    }
  }

.handlee-regular {
    font-family: "Handlee", cursive;
    font-weight: 600;
    font-style: normal;
}

.fjalla-one-regular {
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-style: oblique;
}

.rubik-mono {
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
}

.permanent-marker {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
}

.indie-flower {
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
}
.lobster-regular {
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
/* Colores de las secciones */
.color1 {
    background: linear-gradient(120deg, #1f0a1e, #4e1f4d, #7d3d76, #4e1f4d, #1f0a1e);
    background-size: 300% 300%;
    animation: violetGradient 14s ease infinite;
    color: #fff;
}

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

.color2 {
    background-color: #3b0837;
}

.color3 {
    background-color: #170a15;
}

.color4 {
    background-color: #c98aa3;
}

.color5 {
    background-color: #ffc2e0;
}

.color6 {
    background-color: #270022;
}

/* Estilos para el header */
/* Keyframes for fade-in effect */
@keyframes fadeIn {
    to {
        opacity: 1; /* Fully visible */
    }
}

.portada {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(
        135deg,
        #150512 0%,
        #3b0837 30%,
        #7d3d76 55%,
        #3b0837 80%,
        #150512 100%
    );
    background-size: 300% 300%;
    animation: gradient 14s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    overflow-x: hidden;
    z-index: 0;
    padding: 1.75rem 1.5rem;
}

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

/* Estilos para el encabezado */
.header-container {
    text-align: center;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    max-width: 90vw;
}

/* Logo, título y "Capítulo 15" se animan cada uno por su cuenta al hacer
   scroll (ver main.js), cada uno con su propio movimiento */
.header-logo-wrap,
.header-title-group,
.header-description {
    will-change: transform, opacity, filter;
}

/* Wrapper para el scroll (ver main.js): la animación de entrada vive en la
   propia imagen, así el JS puede animar el wrapper sin pisarla */
.header-logo-wrap {
    display: inline-flex;
}

.header-logo {
    width: clamp(240px, 30vw, 300px);
    height: clamp(240px, 30vw, 300px);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    border: 5px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    animation: logoAppear 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.15s;
}

@keyframes logoAppear {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.header-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.header-title {
    font-size: clamp(3.2rem, 11vw, 7rem);
    color: #ffffff;
    margin: 0;
    text-shadow: 7px 7px #3b0837;
    display: inline-block;
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: titleSwing 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.45s;
}

@keyframes titleSwing {
    0% {
        opacity: 0;
        transform: translateY(-40px) rotate(-35deg) scale(0.85);
    }
    60% {
        opacity: 1;
        transform: translateY(6px) rotate(-4deg) scale(1.05);
    }
    80% {
        transform: translateY(-3px) rotate(-10deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-8deg) scale(1);
    }
}

.header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f0b8d6;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.1rem;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    padding: 0.6em 1.4em;
    border-radius: 50px;
    box-shadow: 5px 5px #3b0837;
    opacity: 0;
    animation: badgePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.85s;
}

@keyframes badgePop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(40deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.15) rotate(-2deg);
    }
    80% {
        transform: scale(0.95) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(3deg);
    }
}

.header-description {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    color: #ffffff;
    margin-top: 0.75rem;
    width: 100%;
}

/* La animación de entrada vive en el wrapper interno para que el JS de
   scroll (ver main.js) pueda animar .header-description por su cuenta sin
   que la entrada "forwards" pise esos valores */
.header-description-inner {
    opacity: 0;
    animation: descriptionRise 0.9s ease-out forwards 1.15s;
}

@keyframes descriptionRise {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-heart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 4px 4px #3b0837;
  }

  .heart-icon {
    margin-top: 10px; /* Ajusta este valor según sea necesario */
    animation: appear 0.5s forwards ease-in-out, blink 1s infinite; /* Animación de aparición y titilado */
  }

  .date {
    font-size: 1.5rem;
  }

  .separator-horizontal {
    width: 100%;
    height: 2px; /* Puedes ajustar el grosor aquí */
    background-color: white; /* Puedes cambiar el color aquí */
    margin: 20px 0; /* Puedes ajustar el margen superior e inferior aquí */
  }

header h1 {
    font-size: 4.5rem;
}

header h2 {
    font-size: 2rem;
}

/* Estilos para las secciones */
section {
    padding: 2rem;
    text-align: center;
}

section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}


.countdown-container {
    position: relative; /* contiene a .diagonal-background: sin esto, su
        top:% se calcula contra el alto de TODA la página y termina
        cruzando otras secciones */
    overflow: hidden;
    background-color: #0d0d0d; /* Negro, a juego con el logo */
    color: #fff;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    padding: 20px 0 40px 0px;
}


.countdown-container h2 {
    position: relative;
    z-index: 3; /* siempre por encima de los íconos decorativos que se
        mueven en paralaje, para que nunca lo tapen */
    margin-bottom: 20px;
    text-shadow: 4px 4px #7f11a3;
    font-size: 2.5rem;
}

.reloj {
    position: relative;
    z-index: 3;
}

.content {
    position: relative;
    transform: skewY(0deg);
    z-index: 2;
}

.box-circulo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reloj {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; /* Ajuste de margen superior */
}

.reloj-col {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 10px; /* Espacio entre los elementos */
}

.separador {
    font-size: 2rem; /* Tamaño del separador */
    color: #7f11a3; /* Color del separador */
}

@media (max-width: 768px) {
    .countdown-container {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .countdown-container {
        font-size: 2rem;
    }
}

@media (max-width: 400px) {
    .countdown-container {
        font-size: 1.5rem;
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
.tips h2,
.music h2 {
    text-shadow: 4px 4px #550570;
    color: #fff;
    margin: 0 0 10px 0;
}

.music {
    /* rosa pastel animado (a tono con el acento #f0b8d6 de botones/badge) */
    background: linear-gradient(120deg, #c76d9c, #f0b8d6, #ffd9ec, #f0b8d6, #c76d9c);
    background-size: 300% 300%;
    animation: violetGradient 14s ease infinite;
}

.music-embed {
    position: relative;
    z-index: 20; /* por delante de cualquier otra capa (corazones, etc.) */
    width: 100%;
    max-width: 500px;
    margin: 0 auto 1.25rem auto;
}

.music-embed iframe {
    position: relative;
    z-index: 21;
}

/* Fade de entrada SIN transform: un ancestro con transform (lo que hace
   AOS) puede romper los clicks/touch dentro de un iframe en mobile, así
   que acá solo se anima opacity */
.music-embed-fade {
    opacity: 0;
    animation: fadeIn 0.9s ease forwards 0.3s;
}
.dresscode {
   margin: 0;
}

.dresscode-note {
    color: #fff;
    font-size: 1.1rem;
    text-shadow: 2px 2px #550570;
    margin-top: 0.5rem;
}

.svg-shapes-dresscode {
    width: 100px;
    height: 100px;
  }
.map h2, h1 {
    text-shadow: 4px 4px #f5d2f4;
    color:#520c4c;
    margin: 0;
}
.map iframe {
    width: 100%;
    height: 300px;
    margin: 10px 0 0 0;
    border: 0;
}

/* Estilos para la galería */
.gallery {
    margin: 0;
    overflow: hidden; /* Oculta los slides que se desbordan */
    text-shadow: 4px 4px #402440;
}
.gallery h2 {
    color: #fff;
    margin-bottom: 1.5rem;
}
.photos {
    margin: 0;
    padding: 0;

}
/* Frase grande centrada, sin fotos (esas quedan para el carrusel). Se anima
   subiendo/bajando con el scroll, ver main.js */
.photos {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.phrase-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    will-change: transform;
}

.svg-shapes-img {
    width: 44px;
    height: 44px;
}

.phrase-text {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    color: #fff;
    margin: 15px 0;
    text-shadow: 3px 3px #63155d;
}

.text {
    background-color: rgba(255, 159, 206, 0.3);
    padding: 0 5px;
    border-radius: 5px;
    text-shadow: 2px 2px #63155d;
}

/* Carrusel infinito tipo rollo de cine: la pista se duplica una vez en JS
   (ver main.js) y se desliza sin parar con una animación CSS lineal, como
   una película pasando por el proyector. Portrait y landscape van en
   sentidos opuestos para que se note la diferencia entre ambos. */
.gallery-subtitle {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: #fff;
    margin: 2.5rem 0 1.25rem 0;
}

.filmstrip {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 6%,
        black 94%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black 6%,
        black 94%,
        transparent
    );
}

.filmstrip-track {
    display: flex;
    width: max-content;
    max-width: none; /* el reset global pone max-width:100% a todo; acá
        necesitamos que sea más ancho que el contenedor a propósito, si no
        el loop infinito queda pisado y se corta a los 2-3 slides */
    gap: 16px;
}

.film-slide {
    max-width: none;
}

.filmstrip-portrait .filmstrip-track {
    animation: filmstrip-scroll-left 13.5s linear infinite;
}

.filmstrip-landscape .filmstrip-track {
    animation: filmstrip-scroll-right 10.5s linear infinite;
}

@keyframes filmstrip-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes filmstrip-scroll-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/* Cada foto es un cuadro de película: fondo negro + perforaciones */
.film-slide {
    flex: 0 0 auto;
    background-color: #131313;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.film-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

.film-slide-portrait {
    width: min(56vw, 260px);
    aspect-ratio: 4 / 5;
    padding: 22px 10px;
}

.film-slide-portrait::before,
.film-slide-portrait::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background-image: linear-gradient(
        90deg,
        transparent 0 5px,
        #f2ede9 5px 17px,
        transparent 17px 22px
    );
    background-size: 22px 10px;
    background-repeat: repeat-x;
    z-index: 2;
}
.film-slide-portrait::before {
    top: 6px;
}
.film-slide-portrait::after {
    bottom: 6px;
}

.film-slide-landscape {
    width: min(70vw, 380px);
    aspect-ratio: 16 / 10;
    padding: 10px 22px;
}

.film-slide-landscape::before,
.film-slide-landscape::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background-image: linear-gradient(
        180deg,
        transparent 0 5px,
        #f2ede9 5px 17px,
        transparent 17px 22px
    );
    background-size: 10px 22px;
    background-repeat: repeat-y;
    z-index: 2;
}
.film-slide-landscape::before {
    left: 6px;
}
.film-slide-landscape::after {
    right: 6px;
}

@media (max-width: 768px) {
    .film-slide-portrait {
        width: min(70vw, 240px);
    }
    .film-slide-landscape {
        width: min(84vw, 340px);
    }
}
.qr-fotos {
    /* rosa pastel animado (a tono con el acento #f0b8d6 de botones/badge) */
    background: linear-gradient(120deg, #c76d9c, #f0b8d6, #ffd9ec, #f0b8d6, #c76d9c);
    background-size: 300% 300%;
    animation: violetGradient 14s ease infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.qr-fotos h2 {
    color: #fff;
    text-shadow: 4px 4px #4a1e49;
    margin: 0;
}
.qr-fotos p {
    max-width: 480px;
    margin: 0 0 0.5rem 0;
}
.qr-image {
    /* El PNG ya trae su propia tarjeta blanca + fondo transparente
       alrededor: sin caja extra acá, que si no queda un blanco duplicado */
    width: 260px;
    height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

@media (max-width: 480px) {
    .qr-image {
        width: 220px;
        height: 220px;
    }
}

.confirmation h2 {
    text-shadow: 4px 4px #550570;
    color: white;
    margin: 0 0 10px 0;
}
.confirmation {
    margin: 2rem 0 0 0;
}

.confirmation a {
    text-decoration: none;
    padding: 1rem 2rem;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-size: 18px;
    background-color: #3b0837;
    letter-spacing: .1rem;
    border-radius: 50px;
    margin: 10px 0 0 0;
    box-shadow: 4px 4px #ffc2e0;
}


.confirmation a:hover{
    background-color: #f0b8d6;
    border: 2px solid #520c4c;
    box-shadow: 4px 4px #520c4c;
    color: #550570;
    text-shadow: none;
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes blink {
    0%, 49%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.party-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espacio entre los iconos */
    margin: 2rem 0 1rem 0; /* Margen superior para separación */
    animation: appear 5s forwards ease-in-out, blink 3s infinite; /* Animación de aparición y titilado */
}

.party-icons i {
    animation: forwards 2s infinite;
    width: 40px;
    height: 40px;
    font-size: 2.5rem; /* Tamaño de los iconos */
    background-color: transparent;
    border-radius: 50%;
    color: white;
}
.party-icons i:hover {
    color: #3b0837;
}
.party-icons button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #3b0837;
    border: 2px solid white;
    box-shadow: 4px 4px #ffc2e0;
}
.party-icons button:hover {
    background-color: #f0b8d6;
    border: 2px solid #520c4c;
    box-shadow: 4px 4px #520c4c;
}

/* Añadir animaciones personalizadas */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}


/* Flourish decorativo en las esquinas de la cuenta regresiva: valores fijos
   (no porcentajes de un ancestro) para que nunca se filtre en la sección
   anterior (el header) sin importar la altura del contenido */
.absolute-content {
    top: -20px;
    left: 4%;
    width: 120px;
    max-width: 22%;
    position: absolute;
    height: auto;
    opacity: 0; /* Inicialmente oculto */
    animation: fadeIn 1s forwards;
}

.absolute-content-right {
    top: -20px;
    right: 4%;
    width: 140px;
    max-width: 25%;
    position: absolute;
    height: auto;
    opacity: 0; /* Inicialmente oculto */
    animation: fadeIn 1s forwards;
}
/* Estilo para el SVG cuando el diseño es responsivo */
.svg-shapes {
    width: 200px; /* Tamaño del SVG en pantallas grandes */
    height: auto;
    fill: none;
    stroke: #fff; /* Color del trazo de las formas */
    stroke-width: 2; /* Ancho del trazo */
    stroke-dasharray: 500; /* Ajusta según la longitud total del trazo */
    stroke-dashoffset: 500; /* Inicialmente, trazo oculto */
    animation: strokeDraw 2s ease-in-out forwards;
}

/* Media query para ajustar el tamaño del SVG en pantallas más pequeñas */
@media (max-width: 768px) {
    .svg-shapes {
        width: 150px; /* Tamaño del SVG en pantallas medianas */
    }
    .diagonal-background {
        top: 590px;
        left: 0%;
        width: 52%;
        height: 5%;
    }
}

@media (max-width: 576px) {
    .svg-shapes {
        width: 100px; /* Tamaño del SVG en pantallas pequeñas */
    }
}

/* Estilo adicional para rotar el SVG a la derecha */
.svg-rotate {
    transform: rotate(90deg); /* Rotar 90 grados */
    position: absolute;
    right: 5%; /* Ajusta la posición derecha según necesites */
    top: 50%; /* Ajusta la posición superior según necesites */
    transform-origin: center; /* Establece el punto de origen de la rotación */
}

@keyframes strokeDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/* Corazones flotantes de fondo: capa fija que cubre todo el viewport para
   que se vean en todo el sitio a medida que se scrollea, no solo en el
   header. pointer-events: none para que nunca tapen un click/tap. */
.circles-container {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
  }

.circles {
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
  }

  /* Los corazones se generan dinámicamente en main.js (más cantidad y
     tamaño/posición/velocidad al azar); acá solo el comportamiento base */
  .circles li {
    position: absolute;
    list-style: none;
    display: block;
    bottom: -150px;
    line-height: 1;
    animation-name: animate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @keyframes animate {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 0;
    }
    8% {
      opacity: 1;
    }
    78% {
      opacity: 1;
    }
    100% {
      transform: translateY(-1100px) rotate(360deg);
      opacity: 0;
    }
  }

  /* Estilos para el botón */
.rounded-button {
    display: inline-block;
    background-color: #3b0837;
    color: white;
    padding: 1rem 2rem;
    font-size: 18px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.05rem;
    border-radius: 50px;
    box-shadow: 4px 4px #ffc2e0;
    transition: background-color 0.3s ease;
  }

  .rounded-button:hover {
    background-color: #f0b8d6;
    color: #3b0837;
  }


/* ANIMAR SVG */
/* Estilos para el contenedor del SVG */
.svg-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  /* Estilos para el objeto SVG */
  .svg-object {
    width: 100px;
    height: auto;
    animation: bounce 2s infinite;
  }


.diagonal-background {
    position: absolute;
    top: 20%;
    left: 0%;
    width: 52%;
    height: 5%;
    rotate: (50deg);
    background: #3b0837;
    transform: skewY(42deg);
    z-index: 0;
}

@media (max-width: 768px) {
    .diagonal-background {
        top: 790px;
        left: 0%;
        width: 52%;
        height: 5%;
    }
}
  .arrow {
    margin-top: 20px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    display: block;
    animation: bounce 2s infinite;
    color: #ffff;
    content: '';
    z-index: 5;
  }

  .arrow:before {
    transform: rotate(135deg);
    border-width: 0.25em 0.25em 0 0;
    border-style: solid;
    content: '';
    display: inline-block;
    height: 20px;
    position: relative;
    vertical-align: top;
    width: 20px;
}

@media (max-width: 768px) {
    .svg-object {
      width: 80px;
      height: 80px;
    }
    .arrow {
      bottom: 20px;
      left: 46%;
    }
  }

.footer {
    color: #ffff;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px; 
    font-size: 0.8rem;
    height: 50px;
    display: flex;
}
.footer span {
    color: #f0b8d6;
}
.footer a {
    color: #ffff;
    text-decoration: none;
}
.footer a:hover {
    color:#c37bd5;
}

.font-white-shadow-dark {
    font-size: 1.5rem;
    color: white;
    text-shadow: 2px 2px #3b0837;
    margin: 5px;
}
.font-white-shadow-dark p {
    margin: 12px;
}
.svg-container-social {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }
  
  #loader-wrapper {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3b0837; /* Fondo violeta */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    opacity: 1;
    visibility: visible;
  }

  .loader-bubble {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    width: 6px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: loader-animation 1.2s linear infinite;
  }
  
  #loader {
    width: 64px;
    height: 64px;
    position: relative;
  }
  
  #loader:before,
  #loader:after,
  #loader .loader-bubble {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    width: 26px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: loader-animation 1.2s linear infinite;
  }
  
  #loader:before {
    left: -26px;
    animation-delay: -0.24s;
  }
  
  #loader .loader-bubble {
    left: 78px; /* Nueva posición de la segunda burbuja */
    animation-delay: -0.12s; /* Retraso menor para la segunda burbuja */
  }
  
  @keyframes loader-animation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.1); }
  }
  
  #loader-text {
    margin-top: 20px;
    font-size: 14px;
    color: white;
  }
  
  #main-content {
    display: none; /* Ocultar el contenido principal hasta que se cargue completamente */
    text-align: center;
    color: #333;
  }