:root{
  --text-color: #020308;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Evita barras de desplazamiento */
    font-family: "EB Garamond", serif;
}

/* ---------------------------------------------------- */
/* 1. Estilos del CONTENIDO PRINCIPAL (full-container)  */
/* ---------------------------------------------------- */

.full-container{
    width:100vw;
    height:100dvh;
    background-image:url(./assets/so-bg.webp);
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    position: relative;
    cursor:none;
}

.principal-logo{
  position:absolute;
  width:6vw;
  top:5vw;
  right:5vw;
}

.gift{
    position: absolute;
    overflow:hidden;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;

    transition: all 0.4s ease-in-out;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    animation: destello-constante 2.5s ease-in-out infinite alternate;
    transform:scale(1);
}

.gift:hover {
    transform:scale(1.1);
    transform:all 0.4s ease-in-out;
    animation-play-state: paused;
    filter: drop-shadow(0 0 15px #ffdd44)
            drop-shadow(0 0 5px #ffdd44); 
            
}

/* Destellos aleatorios */
.gift-1 { animation-delay: 0.1s; } 
.gift-2 { animation-delay: 0.8s; } 
.gift-3 { animation-delay: 1.5s; } 
.gift-4 { animation-delay: 0.3s; } 
.gift-5 { animation-delay: 1.2s; } 
.gift-6 { animation-delay: 0.6s; } 
.gift-7 { animation-delay: 1.8s; }

/* Clase que detiene la animación. La aplicaremos a todos los gifts. */
.gift.paused {
    animation-play-state: paused !important;
}

/* Tooltip */
/*
.gift::after {
  content: attr(data-tooltip);
  position: absolute;
  transform: translateX(-50%);
  background-color: rgba(8, 32, 70, 1);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1rem;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
  text-shadow: 1px 1px 20px rgba(255, 255, 255, 0.8);
  letter-spacing: 1px;
  width: 200px;
  word-wrap: break-word;
  display: block;
  text-align: center;
  font-style: italic;
}
.gift:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}
  */

/*position de cada regalo*/

.gift-1{
    width: 30%;
    height: 35%;
    bottom: 5%;
    left: 50%;
    background-image: url(./assets/gifts/Regalo1.webp);
    z-index: 7;
}
.gift-2{
    width: 20%;
    height: 25%;
    bottom: 8%;
    left: 33%;
    z-index: 6;
    background-image: url(./assets/gifts/Regalo2.webp);
}
.gift-3{
    width: 20%;
    height: 40%;
    bottom: 10%;
    left: 17%;
    z-index: 5;
    background-image: url(./assets/gifts/Regalo3.webp);
}
.gift-4{
    width: 20%;
    height: 27%;
    bottom: 30%;
    left: 0;
    z-index: 4;
    background-image: url(./assets/gifts/Regalo4.webp);
}
.gift-5{
    width: 25%;
    height: 35%;
    top: 15%;
    left: 4%;
    z-index: 3;
    background-image: url(./assets/gifts/Regalo5.webp);
}
.gift-6{
    width: 20%;
    height: 30%;
    top: 20%;
    left: 25%;
    z-index: 1;
    background-image: url(./assets/gifts/Regalo6.webp);
}
.gift-7{
    width: 25%;
    height: 35%;
    top: 22%;
    left: 37%;
    z-index: 2;
    background-image: url(./assets/gifts/Regalo7.webp);
}

.gifts-container{
    position: absolute;
    height:50vh;
    width:30vw;
    bottom:2vh;
    left:15vw;
}

/* Por defecto, el contenido principal está oculto */
.full-container {
    display: none; 
}

/* ---------------------------------------------------- */
/* 2. Estilos del MENSAJE DE ROTACIÓN (rotate-message)  */
/* ---------------------------------------------------- */

.rotate-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(50% 50% at 50% 50%, #172440 0%, #0D1A36 100%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999; 
    text-align: center;
}
.rotate-message img{
  width: 100px;
}
.rotate-message h2{
  color: #2786C8;
  font-size: 40px;
  padding:0 5vw;
  margin-bottom:0; 
}
.rotate-message p{
  font-size:24px;
  padding:0 5vw;
}

/* Por defecto, el mensaje de rotación está visible */
.rotate-message {
    display: flex; 
}


/* ---------------------------------------------------- */
/* 3. MEDIA QUERIES PARA MANEJO DE LA ORIENTACIÓN         */
/* ---------------------------------------------------- */

/* Si la pantalla está en modo HORIZONTAL (Landscape) */
@media screen and (orientation: landscape) {
    
    /* Mostrar el contenido principal */
    .full-container {
        display: flex; 
    }
    
    /* Ocultar el mensaje de rotación */
    .rotate-message {
        display: none;
    }
}

/* Si la pantalla está en modo VERTICAL (Portrait) */
@media screen and (orientation: portrait) {
    
    /* Mostrar el mensaje de rotación */
    body:not(.popup-opened) .rotate-message {
        display: flex;
    }
    
    /* Ocultar el contenido principal */
    body:not(.popup-opened) .full-container {
        display: none; 
    }

        /* Mostrar el mensaje de rotación */
    body.popup-opened:not(.initial-popup-opened) .rotate-message {
        display: none;
    }
    
    /* Ocultar el contenido principal */
    body.popup-opened:not(.initial-popup-opened) .full-container {
        display: flex; 
    }

            /* Mostrar el mensaje de rotación */
    body.popup-opened.initial-popup-opened .rotate-message {
        display: flex;
    }
    
    /* Ocultar el contenido principal */
    body.popup-opened.initial-popup-opened .full-container {
        display: none; 
    }
}


/* --- Estilos para el Popup Inicial --- */
.initial-popup-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 27, 59, 0.85); 
    justify-content: center;
    align-items: center;
    z-index: 20000; 
}

.initial-popup-overlay.show {
    display: flex; /* Clase para mostrarlo */
}

.initial-popup-content {
    color: var(--text-color);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2rem;
    flex-direction: column;
}

.initial-popup-content  p{
    font-size: 31px;
    width:80%;
    max-width: 1200px;
    color:white;
    margin: auto;
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: bold;
    position: relative;
    z-index: 4;
}

.popup-btn {
  background-image: url(./assets/welcome/Boton.webp);
  background-size:contain;
  background-position:center;
  background-repeat: no-repeat;
  color: var(--text-color);
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  position: relative;
  transform:scale(1);
  transition: all 0.2s ease;
  border:none !important;
  background-color:transparent !important;
  font-family: "EB Garamond", serif;
  cursor:pointer;
  width: 270px;
    height: 70px;
}

.popup-btn:focus-visible{
  outline:none !important;
}

.popup-btn:hover {
  transform:scale(1.1);
}

.popup-btn:active {
  transform:scale(1.1);
}
.initial-popup-logo{
  width:10%;
}
.initial-popup-luces, .initial-popup-regalos, .initial-popup-ROV{
  position:absolute;
  pointer-events:none;
}

.initial-popup-luces{
  width:100%;
  height:100% !important;
  object-fit:contain;
  object-position:center top;
  left:0;
  top:0;
}
.initial-popup-regalos{
  width:15%;
  left:3%;
  bottom:0;
}
.initial-popup-ROV{
  width:50%;
  right:0;
  top:35%;
}

@media screen and (max-height:768px) and (orientation: landscape){
  .initial-popup-content p, .initial-popup-content .popup-btn{
    font-size:16px;
  }
}

/* estilos Modal */

.modal {
  background: radial-gradient(50% 50% at 50% 50%, rgba(42, 73, 143, 0.64) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
  display: flex;
  justify-content: center;
}

.modal::before {
  backdrop-filter: none;
  opacity: 0.1;
}

.modal h2 {
  text-align: center;
  margin: 12px 0;
  transition: 1s;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  font-size: 28px;
  margin-bottom:0;
}


.modal h3 {
  color: #1372B4;
  font-size: 1.2rem;
  margin-top:1rem;
  margin-bottom:3rem;
}
.modal p, .modal a{
  color: #1372B4;
}

.modal .tingle-modal__close {
    top: 4rem;
    right: 4rem;
}

span.tingle-modal__closeLabel {
    display: none;
}

.modal .tingle-modal-box {
  aspect-ratio: 4 / 7;
  width: auto;
  height: 90%;
  border-radius: 6px;
  border: #0b2852 6px solid;
}

.tingle-modal-box__content {
  border-radius: 6px;
  border: #84c0d3 3px solid;
  padding: 0;
  height: calc(100% + 4px);
  margin: -2px;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  text-align: center;
  font-size: 1.05rem;
}

.video {
  aspect-ratio: 4 / 7;
  transform: translateY(0px);
  border-radius: 15px;
  overflow: hidden;
  min-height: 350px;
  height: 60vh;
  margin-bottom:2rem;
}

.video iframe {
  height: 100%;
  aspect-ratio: 4 / 7;
}

@media (max-width: 768px) {
  .modal .tingle-modal-box {
    height: 96%;
    border: #0b2852 16px solid;
    max-width:100%;
  }

  .tingle-modal-box__content {
    border: #84c0d3 10px solid;
    height: calc(100% + 10px);
    padding-top:5rem !important;
  }

  .video {
    aspect-ratio: 4 / 7;
  }
  .modal h2{
    font-size:20px;
  }
    .modal h3{
    font-size:18px;
  }
  .modal p{
    font-size:16px;
  }
}

@media (max-width: 540px) {
  .modal .tingle-modal__close {
    top: 2.5rem;
    right: 2.5rem;
    left: unset;
    display: block;
    width: 2rem;
    height: 2rem;
    border: none;
    background-color: transparent;
    box-shadow: none;
    color: #fff;
    height: auto;
    width: auto;
  }
  .tingle-modal__closeLabel {
    display: none;
  }
  .tingle-modal__closeIcon {
        width: 2.5rem !important;
    }
}

@media (max-width: 540px) and (orientation: portrait) {
  .modal .tingle-modal__close {
    top: 6.7rem;
  }
}

.tingle-modal__close {
  right: 10%;
  height: auto;
  width: auto;
}

.tingle-modal__closeIcon {
  background-color: #84c0d3;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  padding: 5px;
  box-shadow: 0 0 10px #00529b;
}

.tingle-modal__closeIcon svg {
  padding: 5px;
}

.tingle-modal__closeIcon svg * {
  fill: #00529b !important;
}


/* ---------------------------------------------------- */
/* KEYFRAMES PARA EL BRILLO DE LOS REGALOS */
/* ---------------------------------------------------- */
/* Creamos una animación que hace que el resplandor se encienda y se apague suavemente */
@keyframes destello-constante {
    0% {
        /* Brillo bajo (sutil) */
        filter: drop-shadow(0 0 3px #ffffff) /* Un brillo base de color blanco */
                drop-shadow(0 0 1px #ffdd44); 
    }
    50% {
        /* Pico de brillo (más intenso y extendido) */
        filter: drop-shadow(0 0 15px #ffdd44) /* El pico de brillo en tu color dorado */
                drop-shadow(0 0 5px #ffffff); 
    }
    100% {
        /* Vuelve al brillo bajo */
        filter: drop-shadow(0 0 3px #ffffff)
                drop-shadow(0 0 1px #ffdd44); 
    }
}


/* ---------------------------------------------------- */
/* ESTILOS PARA LA CAPA OSCURA Y EL EFECTO LINTERNA     */
/* ---------------------------------------------------- */

body:not(.popup-opened) .torch-overlay {
    position: fixed; /* Fija la capa a la ventana de visualización */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Crucial: Permite hacer click en los elementos debajo */
    z-index: 1000; /* Asegura que esté por encima del contenido (pero debajo de popups) */
    
    /* El estilo inicial (sin movimiento) */
    background: radial-gradient(circle at 50% 50%, 
        transparent 80px, /* Círculo transparente de 80px de radio (la luz) */
        rgba(0, 0, 0, 0.7) 150px /* El resto es negro con 90% de opacidad (la oscuridad) */
    );
}
body.popup-opened .torch-overlay{
  background:transparent;
}

@media screen and (max-width:768px){
  .torch-overlay{
    display: none;
  }
}