:root {
    --color-sobre: #f4f1ea;
    --vel-animacion: 2s cubic-bezier(0.4, 0, 0.2, 1);
    --color-vino: #630d0d;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; /* Fondo oscuro para que resalte el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Contenido del Fondo */
.content-behind {
    position: absolute;
    text-align: center;
    color: black;
    z-index: 1;
    padding: 0px;
    background: #fff;
    width: 100%
}

    .content-behind h1 {
        font-size: clamp(4rem, 20vw, 12rem);
        margin: 0;
        text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

/* Contenedor del Sobre */
.envelope-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    z-index: 2;
}

/* Piezas del sobre */
.part {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-sobre);
    transition: var(--vel-animacion);
    pointer-events: none; /* Evita que las piezas interfieran tras abrirse */
}

/* Triángulos en X */
.top {
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
    text-align: center;
}

.bottom {
    clip-path: polygon(0% 100%, 100% 100%, 50% 50%);
    text-align: center;
}

.left {
    clip-path: polygon(0% 0%, 50% 50%, 0% 100%);
    background-color: #ece8df;
}

.right {
    clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
    background-color: #ece8df;
}

/* El Sello */
.seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(199px, 25vw, 250px);
    height: clamp(199px, 25vw, 250px);
    z-index: 10;
    background-image: url('../Assets/sello.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.1s ease;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* --- ESTADO ABIERTO --- */

.envelope-wrapper.open .top {
    transform: translateY(-0%);
    opacity: 0;
    filter: blur(10px);
}

.envelope-wrapper.open .bottom {
    transform: translateY(0%);
    opacity: 0;
    filter: blur(10px);
}

.envelope-wrapper.open .left {
    transform: translateX(-0%);
    opacity: 0;
    filter: blur(10px);
}

.envelope-wrapper.open .right {
    transform: translateX(0%);
    opacity: 0;
    filter: blur(10px);
}

.envelope-wrapper.open .seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2); /* Efecto de explosión hacia la cámara */
    pointer-events: none;
}

/* Desactivar el click en el sobre una vez abierto */
.envelope-wrapper.open {
    pointer-events: none;
}

.efecto-pulso {
    font-family: 'Arial', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    color: #ff4b2b;
    text-align: center;
    display: inline-block;
    /* Nombre de la animación | Duración | Modo (infinito) */
    animation: pulso 1.5s infinite ease-in-out;
}

.efecto-pulso-n {
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 3.5rem;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    /* Nombre de la animación | Duración | Modo (infinito) */
    animation: pulso 3s infinite ease-in-out;
}
@keyframes pulso {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1); /* Crece un 10% */
        /*text-shadow: 0 0 20px rgba(255, 75, 43, 0.5);*/ /* Opcional: brillo */
    }

    100% {
        transform: scale(1);
    }
}


.texto-solapa {
    margin-bottom: 5vh; /* Separación del borde inferior */
    font-size: 1.5rem;
    color: #8b0000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
}

.part {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-sobre);
    transition: var(--vel-animacion);
    display: flex;
    justify-content: center;
}

/* Ajuste de la solapa para contener las dos líneas */
.bottom {
    clip-path: polygon(0% 100%, 100% 100%, 50% 50%);
    align-items: flex-end; /* Empuja el contenido hacia la base */
    justify-content: center;
}


.texto-linea-1 {
    font-size: 2.2rem;
    color: #555;
    font-style: italic;
}

.texto-linea-2 {
    font-size: 1.8rem;
    color: #8b0000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
}
/* Triángulos en X */
.top {
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
    z-index: 4;
}

.bottom {
    clip-path: polygon(0% 100%, 100% 100%, 50% 50%);
    z-index: 4;
    align-items: flex-end;
}

.left {
    clip-path: polygon(0% 0%, 50% 50%, 0% 100%);
    background-color: #ece8df;
    z-index: 3;
}

.right {
    clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
    background-color: #ece8df;
    z-index: 3;
}

/* --- LISTONES --- */
/* Los creamos como elementos que se mueven con los laterales */
.ribbon {
    position: absolute;
    width: 15px; /* Grosor */
    height: 150%;
    background: linear-gradient(to right, #4a0a0a, var(--color-vino), #4a0a0a);
    z-index: 6;
    transition: var(--vel-animacion);
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

.ribbon-left {
    top: 50%;
    left: 50%;
    /* Rotación para que coincida con la X */
    transform: translate(-50%, -48%) rotate(90deg) translateX(-10px);
    transform-origin: center;
}

.ribbon-right {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%) rotate(-90deg) translateX(10px);
    transform-origin: center;
}

/* Texto solapa inferior */
.contenedor-texto-inferior {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14vh;
    gap: 5px;
}



/* --- ANIMACIÓN APERTURA --- */
.open .top {
    transform: translateY(-100%);
    opacity: 0;
}

.open .bottom {
    transform: translateY(100%);
    opacity: 0;
}

.open .left {
    transform: translateX(-100%);
    opacity: 0;
}

.open .right {
    transform: translateX(100%);
    opacity: 0;
}

.open .ribbon-left {
    transform: translate(-150%, -50%) rotate(26.5deg);
    opacity: 0;
}

.open .ribbon-right {
    transform: translate(150%, -50%) rotate(-26.5deg);
    opacity: 0;
}

.open .seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
    pointer-events: none;
}


/* Dispositivos con ancho menor a 600dp */
@media (max-width: 599px) {
    .efecto-pulso-n {
        font-size: 2rem;
        font-weight: bold;
    }
    .texto-linea-1 {
        font-size: 1.2rem;
    }

    .texto-linea-2 {
        font-size: 1.0rem;
    }

    .img-itinerario {
        width: 75px
    }

    .time-section {
        min-width: 60px;
    }

        .time-section span {
            font-size: 1.5rem;
        }
}

/* --- MEDIUM (Tablets pequeñas / Plegables) --- */
/* Dispositivos entre 600dp y 839dp */
@media (min-width: 600px) and (max-width: 839px) {
  .efecto-pulso-n {
        font-size: 2.5rem;
        font-weight: bold;
    }
    .texto-linea-1 {
        font-size: 1.5rem;
    }

    .texto-linea-2 {
        font-size: 1.2rem;
    }
    .time-section {
        min-width: 85px;
    }

        .time-section span {
            font-size: 2.5rem;
        }
}


.lluvia-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.petalo {
    position: absolute;
    width: 30px; /* Tamaño del pétalo */
    opacity: 0.8;
    animation: caer linear infinite, balanceo ease-in-out infinite;
    animation-duration: calc(20s / var(--i)), 3s;
}

@keyframes caer {
    0% {
        top: -10%;
    }

    100% {
        top: 110%;
    }
}

@keyframes balanceo {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(50px) rotate(45deg);
    }
}