/* ======================
HERO
====================== */

.hero{
min-height:100%; /* 🔥 mejora sin afectar diseño */
background-image:url("../imagenes/fondo.jpg");
background-position:center;
background-size:cover;
background-repeat:no-repeat;

display:flex;
align-items:center;
justify-content:center;
padding:20px; /* leve ajuste */
}

/* ======================
CAJA DE TEXTO
====================== */

.hero-box{
background:white;
padding:70px;
max-width:600px;
text-align:center;
box-shadow:0px 5px 20px rgba(0,0,0,0.2);
border-radius:8px;

transition: transform 0.3s, box-shadow 0.3s;
}

.hero-box:hover{
transform: translateY(-5px);
box-shadow:0px 10px 30px rgba(0,0,0,0.25);
}

/* ======================
TEXTO
====================== */

.hero-box h1{
color:#094124;
font-size:36px;
margin-top:-50px;
margin-bottom:15px;
}

.hero-box p{
font-size:18px;
line-height:1.6;
text-align:center;
}

.cta{
font-weight:bold;
color:#094124;
margin-top:10px;
margin-bottom:-40px;
}

/* ======================
IMAGEN (tu estilo original)
====================== */

.hero-img{
position:relative;
max-width:10%;
height:auto;
margin-top:-5px;
margin-bottom:-60px;
}

/* ======================
MOBILE (aquí está la magia)
====================== */

@media (max-width:700px){

.hero-box{
padding:50px 25px;
}

/* 🔥 ajustamos offsets, no los eliminamos */

.hero-box h1{
margin-top:-30px;
font-size:30px;
}

.cta{
margin-bottom:-25px;
}

.hero-img{
max-width:18%; /* 🔥 un poco más visible en celular */
margin-bottom:-50px;
}

}