/* =========================
BASE
========================= */

html,body{
margin:0;
width:100%;
height:100%;
background:#0b0f1a;
color:white;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;
touch-action:manipulation;
}

/* =========================
INTRO
========================= */

#intro{
position:absolute;
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:#0b0f1a;
z-index:10;
text-align:center;
}

#intro h1{
font-size:clamp(24px,4.5vw,36px);
margin-bottom:35px;
font-weight:600;
letter-spacing:1px;
}

/* =========================
BOTONES
========================= */

button{
padding:16px 36px;
font-size:clamp(16px,3vw,18px);
border:none;
border-radius:30px;
background:#ff6fa5;
color:white;
cursor:pointer;
min-width:200px;
transition:0.25s;
box-shadow:0 6px 20px rgba(255,105,160,0.25);
}

button:hover{
transform:scale(1.05);
background:#ff5f98;
}

button + button{
margin-top:22px;
}

/* =========================
CARTA MENSAJES FLORES
========================= */

.carta{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.6);
z-index:999;
padding:20px;
box-sizing:border-box;
}

.carta-contenido{
background:white;
padding:30px;
border-radius:20px;
width:90%;
max-width:520px;
max-height:80vh;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
touch-action:auto;
text-align:center;
font-size:clamp(15px,3vw,18px);
line-height:1.6;
color:#222;
box-shadow:0 0 25px rgba(255,105,180,0.6);
animation:aparecer 0.6s ease;
}

.carta button{
margin-top:20px;
padding:10px 20px;
border:none;
border-radius:10px;
background:#ff4d6d;
color:white;
font-size:16px;
cursor:pointer;
}

/* =========================
CARTA DIA DE LA MUJER
========================= */

#mensajeDia{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
justify-content:center;
align-items:center;
padding:20px;
background:#0b0f1a;
z-index:20;
box-sizing:border-box;
}

.mensajeBox{
background:white;
color:#333;
padding:35px;
border-radius:20px;
width:90%;
max-width:600px;
max-height:80vh;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
touch-action:auto;
text-align:center;
line-height:1.6;
font-size:clamp(15px,3.5vw,18px);
box-shadow:0 0 30px rgba(255,105,180,0.5);
}

.mensajeBox h2{
font-size:clamp(22px,5vw,32px);
color:#ff4d6d;
margin-bottom:20px;
}

.mensajeBox button{
margin-top:25px;
padding:14px 28px;
font-size:clamp(15px,3vw,18px);
}

/* =========================
SCROLL PERSONALIZADO
========================= */

.carta-contenido::-webkit-scrollbar,
.mensajeBox::-webkit-scrollbar{
width:6px;
}
.carta-contenido::-webkit-scrollbar-thumb,
.mensajeBox::-webkit-scrollbar-thumb{
background:#ff4d6d;
border-radius:10px;
}

/* =========================
ANIMACION CARTA
========================= */

@keyframes aparecer{
from{
transform:scale(0.7);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}


#abrazoBtn{
background:#ff7aa2;
}

#abrazoBtn:hover{
background:#ff5c8a;
}

/* =========================
SCROLL CONTROL ANDROID
========================= */

.carta-contenido,
.mensajeBox{
overscroll-behavior:contain;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:600px){
button{
padding:14px 24px;
font-size:16px;
}
.mensajeBox{
padding:25px;
}

.carta-contenido{
padding:22px;
}
}
@media (max-width:480px){
#intro h1{
font-size:22px;
}
button{
font-size:15px;
padding:12px 20px;
}
.mensajeBox{
max-height:80vh;
}
}

#imagenEspecial{
display:block;
margin:20px auto;
max-width:260px;
border-radius:12px;
}