/* ===================================
   RESET
=================================== */

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

/* ===================================
   BODY
=================================== */

body{

    font-family: "Trebuchet MS", sans-serif;

    overflow-x:hidden;

    background:#FFF8E7;

}

/* ===================================
   PORTADA
=================================== */

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    height:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding: clamp(20px, 3vw, 35px) clamp(20px, 3vw, 40px) clamp(30px, 10vw, 50px);

    overflow:visible;


    background:linear-gradient(
        to bottom,
        #CFEFFF 0%,
        #FDF8E8 100%
    );


}

@media (min-width: 1024px) {
    .hero {
        min-height: auto;
        padding: 20px clamp(30px, 5vw, 60px) 20px;
        justify-content: center;
    }

    .hero-content {
        margin-top: 0;
        gap: 8px;
        padding-bottom: 12px;
    }

    .pooh {
        width: clamp(120px, 12vw, 180px);
    }

    .hero h2 {
        font-size: clamp(2.2rem, 3vw, 3rem);
    }

    .hero h1 {
        font-size: clamp(2.4rem, 3.5vw, 3.2rem);
        line-height: 1.1;
    }

    .quote {
        font-size: clamp(0.95rem, 1vw, 1rem);
        line-height: 1.4;
        max-width: 700px;
        margin-inline: auto;
    }

    .quote-line{

    width:250px;
    border:none;
    border-top:2px solid #6D4C41;
    margin:15px auto;

}

    button {
        margin-top: 12px;
    }
}

/* ===================================
   CONTENIDO
=================================== */

.hero-content{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    z-index:5;

    width:min(90%, 900px);

    margin:0 auto;

    text-align:center;

    margin-top:0;

    padding-bottom:10px;

}

/* ===================================
   POOH
=================================== */

.pooh{

    width:clamp(120px, 15vw, 230px);

    margin-bottom:5px;

    animation: float 4s ease-in-out infinite;

}

/* ===================================
   TITULOS
=================================== */

.hero h2{

    font-size:clamp(2.8rem, 5vw, 4.5rem);

    color:#D08A00;

    margin-bottom:0px;

}

.hero h1{

    
    font-style: italic;

    margin-top:0px;

    font-size:clamp(2.8rem, 5vw, 4.5rem);

    color:#6D4C41;

    line-height:1.2;


}

.hero p{

    margin-top:8px;

    font-size:clamp(0.5rem, 1.5vw, 1.2rem);

    color:#5C4033;

}

/* ===================================
   BOTON
=================================== */

button{

    margin-top:20px;

    background:#F5A623;

    color:white;

    border:none;

    padding:clamp(12px,1vw,18px)
            clamp(30px,3vw,45px);

    border-radius:999px;

    font-size:clamp(1rem,1.2vw,1.2rem);

    cursor:pointer;

    transition:.3s;

    box-shadow: 0 18px 30px rgba(0,0,0,.25);

}

button:hover{

    transform:translateY(-5px);

}

/* ==========================
   NUBES
========================== */

.cloud img{
    width:clamp(120px, 12vw, 180px);
}
.cloud-left{

    position:absolute;

    top:8%;

    left:3%;

    animation: cloudLeft 25s linear infinite;

}

.cloud-right{

    position:absolute;

    top:8%;

    right:5%;

    animation: cloudRight 30s linear infinite;

}

.cloud-center{

    position:absolute;

    top:28%;

    left:22%;

    animation: cloudCenter 20s linear infinite;

}

.cloud-center2{

    position:absolute;

    top:18%;

    right:20%;

    animation: cloudCenter2 20s linear infinite;

}

/* ==========================
   ABEJAS
========================== */

.bee img{
    width:clamp(35px, 3vw, 55px);
}
.bee{


    position:absolute;

    top:18%;

    right:18%;

    animation:beeFly 3s ease-in-out infinite;

}

.bee2{

    position:absolute;

    top:32%;

    left:18%;

    animation:beeFly 4s ease-in-out infinite;

}
.bee3{

    position:absolute;

    bottom:8%;

    right:5%;

    animation:beeFly 5s ease-in-out infinite;

}

.bee4{

    position:absolute;

    top:58%;

    left:20%;

    animation:beeFly 6s ease-in-out infinite;

}

/* ==========================
   TARRO DE MIEL
========================== */

.honey img{
    width:150px;
}
.honey{

    position:absolute;

    bottom:20px;

    right:20px;

}/* ==========================
   WINNIE
========================== */


/* ==========================
   ANIMACIONES
========================== */


/* ==========================
   FLOTAR   ABEJA
========================== */   
@keyframes beeFly {

    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-35px, -20px);
    }

    50% {
        transform: translate(25px, -45px);
    }

    75% {
        transform: translate(40px, 15px);
    }

    100% {
        transform: translate(0, 0);
    }

}

/* ==========================
   RESPIRAR   POOH
========================== */
@keyframes float {

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-10px);
    }

    100%{
        transform: translateY(0px);
    }

}
/* ==========================
   MOVER NUBES
========================== */
@keyframes cloudLeft{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-25px);

    }

    100%{

        transform:translateX(0);

    }

}
@keyframes cloudRight{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(25px);

    }

    100%{

        transform:translateX(0);

    }

}

@keyframes cloudCenter{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-25px);

    }

    100%{

        transform:translateX(0);

    }

}

@keyframes cloudCenter2{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(25px);

    }

    100%{

        transform:translateX(0);

    }

}

/* ==========================
   GLOBO
========================== */

@keyframes balloonFloat{

    0%{

        transform:translateY(0px) rotate(-3deg);

    }

    50%{

        transform:translateY(-12px) rotate(3deg);

    }

    100%{

        transform:translateY(0px) rotate(-3deg);

    }

}

/* ==========================
   SECCION DE BIENVENIDA
========================== */
.welcome{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background: linear-gradient(
        to bottom,
        #FDF8E8 0%,
        #FFF5EE 40%,
        #FFF0F5 100%
    );

    position:relative;

    overflow:hidden;

    padding:60px 20px;

}

.welcome-cloud{

    position:absolute;

    opacity:.18;

    z-index:1;

}


.welcome-cloud img{

    width:220px;

}


.cloud-w1{

    top:-40px;

    left:-70px;

    opacity:.12px;

}


.cloud-w2{

    bottom:40px;

    right:-70px;

    opacity:.12px;

}


.welcome-content{

    max-width:700px;

    z-index:10;
    position:relative;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

    animation: fadeUp 1.2s ease;

}


.welcome h2{

    font-size:2.3rem;

    margin-bottom:25px;

    max-width:600px;

}

.welcome p{

    font-size:1.4rem;

    line-height:1.8;

    max-width:650px;


}

.signature{

    margin-top:40px;

    font-weight:bold;

    font-size:2rem;
}

.piglet{

    position:absolute;

    bottom:50px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

}

.piglet img{

    width:220px;

}





/* ==========================
   RESPONSIVE
========================== */
 @media (max-width: 768px) {
    
    .hero{
        min-height:100dvh;
        padding:20px 20px 15px;
    }

    .pooh{
        width:150px;
    }

    .hero h2{
        font-size:1.9rem;
        white-space:nowrap;
    }

    .hero h1{
        font-size:3rem;
        line-height:1.05;
    }

    .quote{
        font-size:1.1rem;
        margin-top:8px;
    }

    .date{
        font-size:1.2rem;
    }

    button{
        margin-top:12px;
    }


    .cloud-center2{

        display:none;

    }

    .cloud-center{

        left: 20%;

        top: 130px;

    }

    .honey{

        right:-25px;

        bottom:-10px;
    }

    .honey img{

        width:120px;

    }

     /* ==========================
            ABEJAS - MÓVIL
        ========================== */

    .bee{

        top:110px;
        right:280px;

    }

    .bee2{

        top:80px;
        right:20px;
        left:auto;

    }

    .bee3{

        bottom:120px;
        right:20px;
        top:auto;

    }

    .bee4{

        display:none;

    }
 

}

/* Laptop pequeña */
@media (max-width: 1366px) {
    .hero {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* Laptop grande */
@media (min-width: 1367px) and (max-width: 1919px) {
    .hero {
        padding: 20px clamp(30px, 3vw, 60px) 20px;
        justify-content: center;
    }

    .hero h2 {
        font-size: 2.8rem;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .pooh {
        width: 180px;
    }
}

/* Monitores grandes */
@media (min-width: 1920px) {
    .hero {
        padding: 20px clamp(40px, 3vw, 80px) 20px;
    }

    .hero h2 {
        font-size: 3rem;
    }

    .hero h1 {
        font-size: 3.2rem;
    }

    .pooh {
        width: 200px;
    }
}

@media (max-height: 750px) {

    .pooh{
        width:140px;
    }

    .hero h2{
        font-size:3rem;
        margin-bottom:5px;
    }

    .hero h1{
        font-size:3rem;
        margin-top:5px;
    }

    .quote{
        font-size:1.2rem;
        margin-top:8px;
    }

    .hero-content{
        gap:8px;
    }

    button{
        margin-top:10px;
        padding:12px 28px;
    }

}

@media (max-height: 760px){

    .hero{

        padding-top:20px;
        padding-bottom:60px;

    }

    .pooh{

        width:150px;

    }

    .hero h2{

        font-size:2.8rem;

        margin-bottom:5px;

    }

    .hero h1{

        font-size:2.8rem;

        margin-top:0;

    }

    .quote{

        font-size:1.2rem;

        margin-top:5px;

    }

    .hero-content{

        gap:8px;

    }

    button{

        margin-top:8px;

        padding:12px 28px;

    }

}

/* ==========================================
   AJUSTE FINAL DE PORTADA
========================================== */

.hero{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    overflow:hidden;
}

.hero-content{
    flex-shrink:0;
    transform-origin:top center;
    width:min(90%, 900px);
}


/* ==========================================
   COMPUTADORA
========================================== */

@media (min-width:769px){

    .hero{
        padding:12px 30px;
    }

    .hero-content{
        gap:4px;
    }

    .pooh{
        width:clamp(120px, 12vw, 180px);
    }

    .hero h2{
        font-size:clamp(2.2rem, 3vw, 3rem);
        line-height:1;
        margin:0;
    }

    .hero h1{
        font-size:clamp(2.4rem, 3.5vw, 3.2rem);
        line-height:1.05;
        margin:0;
    }

    .quote{
        font-size:clamp(.95rem, 1vw, 1.05rem);
        line-height:1.3;
        margin-top:4px;
    }

    .author{
        margin-top:2px;
    }

    .date{
        font-size:clamp(1rem, 1.2vw, 1.2rem) !important;
        line-height:1.2;
        margin-top:3px !important;
    }

    button{
        margin-top:7px;
        padding:11px 30px;
    }

}


/* ==========================================
   FLORES - PIGLET
========================================== */

.flowers{
    position:absolute;
    bottom:0;
    width:220px;
    height:180px;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
}

.flowers img{
    width:220px;
    height:auto;
    display:block;
}

.flowers-left{
    left:0;
}

.flowers-right{
    right:0;
    transform:scaleX(-1);
}


/* ==========================================
   FLORES - MÓVIL
========================================== */

@media (max-width:768px){

    .flowers{
        width:110px;
        height:100px;
        bottom:0;
    }

    .flowers img{
        width:220px;
    }

    .flowers-left{
        left:0;
    }

    .flowers-right{
        right:0;
    }

}

/* ==========================================
   SECCIÓN 3 - UBICACIÓN
========================================== */

.location-section{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:60px 20px;

    background:linear-gradient(
        to bottom,
        #FFF5EE 0%,
        #FFF0F5 100%
    );

    position:relative;
    overflow:hidden;
}

.location-content{
    width:min(90%, 800px);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:25px;

    position:relative;
    z-index:5;
}

.location-section h2{
    font-size:clamp(2.2rem, 5vw, 4rem);
    color:#6D4C41;
}

.location-intro{
    font-size:clamp(1.1rem, 2vw, 1.5rem);
    line-height:1.6;
    color:#5C4033;
}

.location-card{
    width:min(100%, 520px);

    padding:40px 30px;

    background:#FFF8E7;

    border-radius:30px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:15px;
}

.location-icon{
    font-size:3.5rem;
}

.location-card h3{
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    color:#D08A00;
}

.location-address{
    font-size:1.4rem;
    line-height:1.6;
    color:#5C4033;
    font-weight:bold;
}

.location-time{
    font-size:1.1rem;
    line-height:1.8;
    color:#6D4C41;
}

.map-button{
    display:inline-block;

    margin-top:10px;

    padding:14px 30px;

    background:#F5A623;
    color:white;

    text-decoration:none;

    border-radius:999px;

    font-size:1rem;
    font-weight:bold;

    box-shadow:0 10px 20px rgba(0,0,0,.18);

    transition:.3s;
}

.map-button:hover{
    transform:translateY(-4px);
}

@media (max-width:768px){

    .location-section{
        min-height:100dvh;
        padding:50px 15px;
    }

    .location-content{
        gap:20px;
    }

    .location-section h2{
        font-size:2.3rem;
    }

    .location-intro{
        font-size:1.1rem;
    }

    .location-card{
        padding:30px 20px;
        border-radius:25px;
    }

    .location-icon{
        font-size:3rem;
    }

    .location-card h3{
        font-size:1.7rem;
    }

    .location-address{
        font-size:1.25rem;
    }

    .location-time{
        font-size:1rem;
    }

    .map-button{
        width:100%;
        max-width:280px;
    }
}

/* ==========================================
   SECCIÓN 4 - MESA DE REGALOS
========================================== */

.gifts-section{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:60px 20px;

    background:linear-gradient(
        to bottom,
        #FFF0F5 0%,
        #FDF8E7 100%
    );

    position:relative;
    overflow:hidden;
}

.gifts-content{
    width:min(90%, 800px);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:20px;

    position:relative;
    z-index:5;
}

.gifts-section h2{
    font-size:clamp(2.2rem, 5vw, 4rem);
    color:#6D4C41;
}

.gifts-intro{
    max-width:650px;

    font-size:clamp(1.1rem, 2vw, 1.5rem);

    line-height:1.6;

    color:#5C4033;
}

.gifts-intro strong{
    color:#D08A00;
}


/* TARJETA */

.gift-card{
    width:min(100%, 520px);

    margin-top:15px;

    padding:40px 30px;

    background:#FFF8E7;

    border-radius:30px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:15px;
}

.gift-icon{
    font-size:4rem;
}

.gift-card h3{
    font-size:clamp(1.6rem, 3vw, 2.2rem);

    color:#D08A00;
}

.gift-card p{
    max-width:420px;

    font-size:1.1rem;

    line-height:1.6;

    color:#5C4033;
}


/* BOTÓN */

.gift-button{
    display:inline-block;

    margin-top:10px;

    padding:14px 30px;

    background:#F5A623;

    color:white;

    text-decoration:none;

    border-radius:999px;

    font-size:1rem;

    font-weight:bold;

    box-shadow:
        0 10px 20px rgba(0,0,0,.18);

    transition:.3s;
}

.gift-button:hover{
    transform:translateY(-4px);

    box-shadow:
        0 14px 25px rgba(0,0,0,.22);
}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width:768px){

    .gifts-section{
        min-height:100dvh;
        padding:50px 15px;
    }

    .gifts-content{
        gap:18px;
    }

    .gifts-section h2{
        font-size:2.3rem;
    }

    .gifts-intro{
        font-size:1.1rem;
    }

    .gift-card{
        padding:30px 20px;
        border-radius:25px;
    }

    .gift-icon{
        font-size:3.2rem;
    }

    .gift-card h3{
        font-size:1.7rem;
    }

    .gift-card p{
        font-size:1rem;
    }

    .gift-button{
        width:100%;
        max-width:280px;
    }

}

/* ==========================================
   CUENTA REGRESIVA
========================================== */

.countdown-section{

    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:60px 20px;

    background:linear-gradient(
        to bottom,
        #FFF0F5 0%,
        #FDF8E7 100%
    );

    position:relative;
    overflow:hidden;

}

.countdown-content{

    position:relative;

    z-index:5;

    width:min(90%, 900px);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:25px;

}

.countdown-section h2{

    font-size:clamp(2.2rem, 5vw, 4rem);

    color:#6D4C41;

}

.countdown-intro{

    font-size:clamp(1.2rem, 2vw, 1.6rem);

    color:#5C4033;

    max-width:650px;

    line-height:1.5;

}

.countdown-intro strong{

    color:#D08A00;

}


/* ==========================================
   CONTENEDORES DEL CONTADOR
========================================== */

.countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.countdown-box{

    width:130px;
    height:130px;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    background:#FFF8E7;

    border-radius:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.countdown-box span{

    font-size:3rem;

    font-weight:bold;

    color:#D08A00;

}

.countdown-box small{

    margin-top:5px;

    font-size:.9rem;

    color:#6D4C41;

    font-weight:bold;

}


/* ==========================================
   MENSAJE
========================================== */

.countdown-message{

    font-size:1.4rem;

    line-height:1.6;

    color:#5C4033;

}

.countdown-message strong{

    color:#D08A00;

}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width:768px){

    .countdown-section{

        min-height:100dvh;

        padding:50px 15px;

    }

    .countdown-content{

        gap:20px;

    }

    .countdown-section h2{

        font-size:2.2rem;

    }

    .countdown-intro{

        font-size:1.1rem;

    }

    .countdown{

        gap:10px;

        max-width:320px;

    }

    .countdown-box{

        width:135px;

        height:110px;

        border-radius:20px;

    }

    .countdown-box span{

        font-size:2.4rem;

    }

    .countdown-box small{

        font-size:.75rem;

    }

    .countdown-message{

        font-size:1.1rem;

    }

}


/* ==========================================
   NUBES DECORATIVAS - TODAS LAS SECCIONES
========================================== */

.section-cloud{
    position:absolute;

    opacity:0.18;

    z-index:1;

    pointer-events:none;

    animation: sectionCloudFloat 8s ease-in-out infinite;
}

.section-cloud img{
    width:220px;

    height:auto;

    display:block;
}


/* NUBE IZQUIERDA */

.section-cloud-left{
    top:-35px;
    left:-60px;
}


/* NUBE DERECHA */

.section-cloud-right{
    bottom:-35px;
    right:-60px;

    animation-delay:2s;
}


/* ANIMACIÓN */

@keyframes sectionCloudFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width:768px){

    .section-cloud img{
        width:150px;
    }

    .section-cloud-left{
        top:-25px;
        left:-55px;
    }

    .section-cloud-right{
        bottom:-25px;
        right:-55px;
    }

}

/* ==========================================
   FLORES - MESA DE REGALOS
========================================== */

.gifts-flowers{
    position:absolute;

    bottom:0;

    width:190px;
    height:160px;

    overflow:hidden;

    z-index:2;

    pointer-events:none;
}

.gifts-flowers img{
    width:190px;
    height:auto;

    display:block;
}


/* FLOR IZQUIERDA */

.gifts-flowers-left{
    left:0;
}


/* FLOR DERECHA */

.gifts-flowers-right{
    right:0;

    transform:scaleX(-1);
}

@media (max-width:768px){

    .gifts-flowers{
        width:110px;
        height:100px;
    }

    .gifts-flowers img{
        width:150px;
    }

}

/* ==========================================
   ABEJAS - MESA DE REGALOS
========================================== */

.gifts-bee{
    position:absolute;

    z-index:3;

    pointer-events:none;
}

.gifts-bee img{
    width:45px;
    height:auto;
}


/* ABEJA 1 */

.gifts-bee-1{
    left:8%;
    bottom:100px;

    animation:
        beeGiftFlight1 5s ease-in-out infinite;
}


/* ABEJA 2 */

.gifts-bee-2{
    left:18%;
    bottom:180px;

    animation:
        beeGiftFlight2 6s ease-in-out infinite;

    animation-delay:1s;
}


/* ABEJA 3 */

.gifts-bee-3{
    right:10%;
    bottom:120px;

    animation:
        beeGiftFlight3 5.5s ease-in-out infinite;

    animation-delay:2s;
}


/* ABEJA 4 */

.gifts-bee-4{
    right:20%;
    bottom:200px;

    animation:
        beeGiftFlight4 6.5s ease-in-out infinite;

    animation-delay:.5s;
}

/* ==========================================
   TRAYECTORIAS DE ABEJAS
========================================== */

@keyframes beeGiftFlight1{

    0%{
        transform:translate(0,0) rotate(0deg);
    }

    25%{
        transform:translate(30px,-25px) rotate(8deg);
    }

    50%{
        transform:translate(60px,5px) rotate(-5deg);
    }

    75%{
        transform:translate(25px,35px) rotate(7deg);
    }

    100%{
        transform:translate(0,0) rotate(0deg);
    }

}


@keyframes beeGiftFlight2{

    0%{
        transform:translate(0,0) rotate(0deg);
    }

    25%{
        transform:translate(-35px,20px) rotate(-8deg);
    }

    50%{
        transform:translate(-60px,-20px) rotate(5deg);
    }

    75%{
        transform:translate(-25px,-45px) rotate(-5deg);
    }

    100%{
        transform:translate(0,0) rotate(0deg);
    }

}


@keyframes beeGiftFlight3{

    0%{
        transform:translate(0,0) rotate(0deg);
    }

    25%{
        transform:translate(-30px,-30px) rotate(-8deg);
    }

    50%{
        transform:translate(-65px,0) rotate(5deg);
    }

    75%{
        transform:translate(-35px,35px) rotate(-5deg);
    }

    100%{
        transform:translate(0,0) rotate(0deg);
    }

}


@keyframes beeGiftFlight4{

    0%{
        transform:translate(0,0) rotate(0deg);
    }

    25%{
        transform:translate(35px,25px) rotate(7deg);
    }

    50%{
        transform:translate(60px,-25px) rotate(-5deg);
    }

    75%{
        transform:translate(25px,-50px) rotate(6deg);
    }

    100%{
        transform:translate(0,0) rotate(0deg);
    }

}

@media (max-width:768px){

    .gifts-bee img{
        width:32px;
    }

    .gifts-bee-1{
        left:4%;
        bottom:85px;
    }

    .gifts-bee-2{
        left:12%;
        bottom:150px;
    }

    .gifts-bee-3{
        right:5%;
        bottom:90px;
    }

    .gifts-bee-4{
        right:13%;
        bottom:160px;
    }

}

/* ==========================================
   TARROS DE MIEL - UBICACIÓN
========================================== */

.location-honey{
    position:absolute;

    bottom:20px;

    z-index:2;

    pointer-events:none;
}

.location-honey img{
    width:150px;
    height:auto;

    display:block;
}



/* TARRO DERECHO */

.location-honey-right{
    right:30px;

    animation:
        honeyFloatRight 4.5s ease-in-out infinite;
}

/* ==========================================
   ABEJAS - UBICACIÓN
========================================== */

.location-bee{
    position:absolute;

    z-index:3;

    pointer-events:none;
}

.location-bee img{
    width:45px;
    height:auto;
}



/* ABEJA 3 - DERECHA */

.location-bee-3{
    right:8%;
    bottom:140px;

    animation:
        locationBee3 5.5s ease-in-out infinite;

    animation-delay:2s;
}


/* ABEJA 4 - DERECHA */

.location-bee-4{
    right:18%;
    bottom:220px;

    animation:
        locationBee4 6.5s ease-in-out infinite;

    animation-delay:.5s;
}

/* ==========================================
   MOVIMIENTO DE LOS TARROS
========================================== */

@keyframes honeyFloatLeft{

    0%{
        transform:translateY(0) rotate(-2deg);
    }

    50%{
        transform:translateY(-8px) rotate(2deg);
    }

    100%{
        transform:translateY(0) rotate(-2deg);
    }

}


@keyframes honeyFloatRight{

    0%{
        transform:translateY(0) rotate(2deg);
    }

    50%{
        transform:translateY(-10px) rotate(-2deg);
    }

    100%{
        transform:translateY(0) rotate(2deg);
    }

}

/* ==========================================
   TRAYECTORIAS - ABEJAS UBICACIÓN
========================================== */



@keyframes locationBee3{

    0%{
        transform:translate(0,0) rotate(0);
    }

    25%{
        transform:translate(-30px,-25px) rotate(-8deg);
    }

    50%{
        transform:translate(-60px,0) rotate(5deg);
    }

    75%{
        transform:translate(-30px,30px) rotate(-5deg);
    }

    100%{
        transform:translate(0,0) rotate(0);
    }

}


@keyframes locationBee4{

    0%{
        transform:translate(0,0) rotate(0);
    }

    25%{
        transform:translate(30px,25px) rotate(7deg);
    }

    50%{
        transform:translate(60px,-20px) rotate(-5deg);
    }

    75%{
        transform:translate(25px,-45px) rotate(6deg);
    }

    100%{
        transform:translate(0,0) rotate(0);
    }

}

@media (max-width:768px){

    .location-honey{
        bottom:10px;
    }

    .location-honey img{
        width:95px;
    }

    .location-honey-left{
        left:5px;
    }

    .location-honey-right{
        right:5px;
    }

    .location-bee img{
        width:30px;
    }

    .location-bee-1{
        left:5%;
        bottom:90px;
    }

    .location-bee-2{
        left:15%;
        bottom:150px;
    }

    .location-bee-3{
        right:5%;
        bottom:100px;
    }

    .location-bee-4{
        right:15%;
        bottom:160px;
    }

}

/* ==========================================
   ÍGOR - UBICACIÓN
========================================== */

/* ==========================================
   ÍGOR - UBICACIÓN
========================================== */

.location-igor{
    position:absolute;

    bottom:10px;
    left:8%;

    z-index:2;

    pointer-events:none;

    animation:igorFloat 4s ease-in-out infinite;
}

.location-igor img{
    width: 320px;
    height:auto;
    display:block;
}
/* ==========================================
   MOVIMIENTO DE ÍGOR
========================================== */

@keyframes igorFloat{

    0%{
        transform:translateX(-50%) translateY(0);
    }

    50%{
        transform:translateX(-50%) translateY(-8px);
    }

    100%{
        transform:translateX(-50%) translateY(0);
    }

}


@media (max-width:768px){

    .location-igor{
        bottom:20px;
        left:15%;
    }

    .location-igor img{
        width:190px;
    }

}

/* ==========================================
   TARROS DE MIEL - CUENTA REGRESIVA
========================================== */

.countdown-honey{
    position:absolute;
    bottom:20px;

    z-index:2;

    pointer-events:none;
}

.countdown-honey img{
    width:80px;
    height:auto;
    display:block;
}

.countdown-honey-left{
    left:30px;

    animation:countdownHoneyFloatLeft 4s ease-in-out infinite;
}

.countdown-honey-right{
    right:30px;

    animation:countdownHoneyFloatRight 4.5s ease-in-out infinite;
}


/* ==========================================
   MOVIMIENTO DE LOS TARROS
========================================== */

@keyframes countdownHoneyFloatLeft{

    0%{
        transform:translateY(0) rotate(-2deg);
    }

    50%{
        transform:translateY(-6px) rotate(2deg);
    }

    100%{
        transform:translateY(0) rotate(-2deg);
    }

}

@keyframes countdownHoneyFloatRight{

    0%{
        transform:translateY(0) rotate(2deg);
    }

    50%{
        transform:translateY(-6px) rotate(-2deg);
    }

    100%{
        transform:translateY(0) rotate(2deg);
    }

}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width:768px){

    .countdown-honey{
        bottom:8px;
    }

    .countdown-honey img{
        width:60px;
    }

    .countdown-honey-left{
        left:5px;
    }

    .countdown-honey-right{
        right:5px;
    }

}


/* ==========================================
   BOTÓN DE MÚSICA
========================================== */

.music-button{
    position:fixed;

    right:20px;
    bottom:20px;

    width:50px;
    height:50px;

    border-radius:50%;

    border:none;

    background:#F5A623;
    color:white;

    font-size:1.4rem;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    z-index:999;

    box-shadow:0 8px 20px rgba(0,0,0,.2);

    transition:.3s;
}

.music-button:hover{
    transform:scale(1.08);
}

@media (max-width:768px){

    .music-button{
        width:45px;
        height:45px;

        right:15px;
        bottom:15px;

        font-size:1.2rem;
    }

}


/* ==========================================
   CONFIRMACIÓN DE ASISTENCIA
========================================== */

.rsvp-section{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:80px 20px;
    background:linear-gradient(
        to bottom,
        #FDF8E7 0%,
        #FFF0F5 100%
    );
    position:relative;
    overflow:hidden;
}

.rsvp-content{
    position:relative;
    z-index:5;
    width:min(90%,700px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;
}

.rsvp-section h2{
    font-size:clamp(2.2rem,5vw,4rem);
    color:#6D4C41;
    margin:0;
}

.rsvp-intro{
    font-size:clamp(1.2rem,2vw,1.6rem);
    color:#5C4033;
    max-width:650px;
    line-height:1.5;
    margin:0;
}

.rsvp-intro strong{
    color:#D08A00;
}

.rsvp-card{
    width:min(100%,550px);
    background:#FFFDF5;
    padding:35px;
    border-radius:30px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.rsvp-card h3{
    margin:0 0 10px;
    font-size:2rem;
    color:#6D4C41;
}

.rsvp-card-text{
    color:#6D4C41;
    line-height:1.5;
    margin-bottom:25px;
}

.form-group{
    text-align:left;
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
    color:#6D4C41;
}

.form-group label span{
    font-weight:normal;
    font-size:.85rem;
    opacity:.7;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea{
    width:100%;
    box-sizing:border-box;
    padding:14px 16px;
    border:2px solid #E8CFA5;
    border-radius:15px;
    background:#FFF;
    color:#5C4033;
    font-family:inherit;
    font-size:1rem;
    outline:none;
    transition:.3s;
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#F5A623;
    box-shadow:0 0 0 3px rgba(245,166,35,.15);
}

.form-group textarea{
    resize:vertical;
    min-height:100px;
}

.attendance-options{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.attendance-option{
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:13px 15px;
    border:2px solid #E8CFA5;
    border-radius:15px;
    cursor:pointer;
    background:#FFF;
    transition:.3s;
}

.attendance-option:hover{
    border-color:#F5A623;
    transform:translateY(-2px);
}

.attendance-option input{
    accent-color:#F5A623;
}

.rsvp-button{
    width:100%;
    border:none;
    padding:16px;
    border-radius:18px;
    background:#F5A623;
    color:white;
    font-size:1.05rem;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.rsvp-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(0,0,0,.2);
}


/* FLORES */

.rsvp-flowers{
    position:absolute;
    bottom:0;
    width:190px;
    height:160px;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
}

.rsvp-flowers img{
    width:190px;
    height:auto;
    display:block;
}

.rsvp-flowers-left{
    left:0;
}

.rsvp-flowers-right{
    right:0;
    transform:scaleX(-1);
}


/* ABEJAS */

.rsvp-bee{
    position:absolute;
    z-index:2;
    pointer-events:none;
}

.rsvp-bee img{
    width:45px;
    height:auto;
}

.rsvp-bee-1{
    top:25%;
    left:12%;
    animation:rsvpBee1 5s ease-in-out infinite;
}

.rsvp-bee-2{
    top:35%;
    right:12%;
    animation:rsvpBee2 6s ease-in-out infinite;
}

@keyframes rsvpBee1{
    0%{transform:translate(0,0);}
    50%{transform:translate(25px,-15px);}
    100%{transform:translate(0,0);}
}

@keyframes rsvpBee2{
    0%{transform:translate(0,0);}
    50%{transform:translate(-25px,15px);}
    100%{transform:translate(0,0);}
}


/* MOBILE */

@media(max-width:768px){

    .rsvp-section{
        min-height:100dvh;
        padding:60px 15px;
    }

    .rsvp-content{
        width:95%;
        gap:18px;
    }

    .rsvp-section h2{
        font-size:2.2rem;
    }

    .rsvp-intro{
        font-size:1.1rem;
    }

    .rsvp-card{
        padding:25px 20px;
        border-radius:25px;
    }

    .rsvp-card h3{
        font-size:1.6rem;
    }

    .rsvp-flowers{
        width:110px;
        height:100px;
    }

    .rsvp-flowers img{
        width:150px;
    }

    .rsvp-bee img{
        width:32px;
    }

    .rsvp-bee-1{
        left:5%;
    }

    .rsvp-bee-2{
        right:5%;
    }
}

/* ==========================================
   MENSAJE DE CONFIRMACIÓN EXITOSA
========================================== */

.rsvp-success{
    text-align:center;
    padding:15px 5px;
    animation:successAppear .6s ease;
}

.success-icon{
    font-size:4rem;
    margin-bottom:10px;
    animation:successBounce 1s ease;
}

.rsvp-success h3{
    font-size:2.2rem;
    color:#6D4C41;
    margin-bottom:15px;
}

.rsvp-success p{
    font-size:1.15rem;
    line-height:1.6;
    color:#5C4033;
    margin-bottom:20px;
}

.success-date{
    margin-top:15px;
}

.success-date strong{
    color:#D08A00;
    font-size:1.25rem;
}

.success-message{
    background:#FFF0C7;
    border-radius:18px;
    padding:18px;
    color:#6D4C41;
    font-weight:bold;
    line-height:1.5;
    margin-top:20px;
}

@keyframes successAppear{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes successBounce{

    0%{
        transform:scale(.5);
    }

    60%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }

}

@media(max-width:768px){

    .rsvp-success h3{
        font-size:1.8rem;
    }

    .success-icon{
        font-size:3.5rem;
    }

    .rsvp-success p{
        font-size:1rem;
    }

}

/* ==========================================
   AJUSTE FINAL PARA IPHONE / MÓVIL
   ========================================== */

@media (max-width: 600px) {

    .hero {
        width: 100%;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        padding: 20px 20px 80px;

        justify-content: flex-start;

        overflow: hidden;
    }

    .hero-content {
        width: 100%;
        min-height: auto;
        margin: 0 auto;
        padding-bottom: 0;

        gap: 5px;
    }

    .pooh {
        width: 150px;
        margin-bottom: 5px;
    }

    .hero h2 {
        font-size: 1.9rem;
        white-space: nowrap;
    }

    .hero h1 {
        font-size: 3rem;
        line-height: 1.05;
    }

    .quote {
        font-size: 1.1rem;
        margin-top: 8px;
    }

    .date {
        font-size: 1.2rem;
    }

    button {
        margin-top: 12px;
    }

    .honey {
        right: -25px;
        bottom: -10px;
    }

    .honey img {
        width: 120px;
    }

}