html, body {
    width: 100%;
    overflow-x: hidden; /* Corta el desborde horizontal */
    position: relative;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

/* ICONO WHATSAPP */

.whatsapp-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:50%;
background:#25D366; /* color oficial */
color:#fff;
font-size:20px;
text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease;
}

.whatsapp-icon:hover{
transform:scale(1.1);
box-shadow:0 8px 20px rgba(37,211,102,0.4);
}


/* HERO BASE (TODOS) */
.hero,
.hero-2,
.hero-3,
.hero-4,
.hero-6,
.hero-5{
position:relative;
min-height:100svh; /* evita problemas en móvil */
display:flex;
flex-direction:column;
justify-content:space-between;
color:#fff;

background-position:center;
background-repeat:no-repeat;
background-size:cover;
}

.hero{ background-image:url('img/hero-1.jpg'); }
.hero-2{ background-image:url('img/hero-3.jpg'); }
.hero-3{ background-image:url('img/hero-5.jpg'); }
.hero-4{ background-image:url('img/hero-4.jpg'); }
.hero-6{ background-image:url('img/hero-2.jpg'); }
.hero-5{ background-image:url('img/contacto-bg3.jpg'); }

@media (max-width:768px){

.hero,
.hero-2,
.hero-3,
.hero-4,
.hero-6,
.hero-5{

background-size:cover; /* ahora sí funciona bien */
background-position:center;
padding-top:90px; /* espacio navbar */
}

/* CAMBIO DE IMÁGENES */
.hero{ background-image:url('img/hero-1-1.jpg'); }
.hero-2{ background-image:url('img/hero-3.jpg'); }
.hero-3{ background-image:url('img/hero-5.jpg'); }
.hero-4{ background-image:url('img/hero-4.jpg'); }
.hero-6{ background-image:url('img/hero-2.jpg'); }
.hero-5{ background-image:url('img/contacto-bg3.jpg'); }

}


.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.5) 40%,
rgba(0,0,0,0.2) 90%
);
z-index:1;
}

/* NAVBAR */

/* NAVBAR */
.navbar{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 60px;
}

/* LOGO */
.logo{
padding:8px;
display:flex;
align-items:center;
overflow:hidden;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,0.15);
}

/* IMAGEN */
.logo img{
height:45px;
filter:drop-shadow(0 6px 15px rgba(0,0,0,0.25));
transition:filter .3s ease, transform .3s ease;
}

.logo:hover img{
filter:drop-shadow(0 10px 25px rgba(0,0,0,0.35));
transform:scale(1.05);
}

/* EFECTO ZOOM */
.logo:hover img{
transform:scale(1.12);
}

/* LINKS */
.nav-links{
display:flex;
list-style:none;
gap:30px;
align-items:center;
}

.nav-links a{
position:relative;
text-decoration:none;
color:#fff;
font-weight:500;
transition:transform .25s ease,color .25s ease;
}

.nav-links a:hover{
transform:scale(1.08);
color:#6ee7ff;
}

/* LÍNEA ANIMADA */
.nav-links a:not(.btn-call)::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:0;
height:2px;
background:linear-gradient(90deg,#6ee7ff,#38bdf8);
transition:width .35s ease,left .35s ease;
}

.nav-links a:not(.btn-call):hover::after{
width:100%;
left:0;
}

/* BOTÓN */
.btn-call{
background:#9fd8ff;
color:#0a2540;
padding:10px 22px;
border-radius:25px;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:transform .3s ease, box-shadow .3s ease;
}

.btn-call:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/* RESPONSIVE */
@media(max-width:768px){
.navbar{
padding:20px;
}

.logo img{
height:45px;
}

.nav-links{
gap:20px;
}
}

/* HERO CONTENT */

.hero-content{
position:relative;
z-index:2;
padding:0 60px 120px 60px;
max-width:650px;
}

.hero-text h1{
font-size:80px;
font-weight:800;
line-height:1.1;
}

.hero-text h1 span{
color:#6ee7ff;
}

.hero-text p{
margin:25px 0;
font-size:1.1rem;
line-height:1.6;
color:#e0e0e0;
}

.hero-text-2 h1{
font-size:50px;
font-weight:800;
line-height:1.1;
}

.hero-text-2 h1 span{
color:#6ee7ff;
}

.hero-text-2 p{
margin:25px 0;
font-size:1.1rem;
line-height:1.6;
color:#e0e0e0;
}

/* ===== FIX CRÍTICO ===== */
/* Cerré correctamente el bloque que rompía todo */

@media (max-width:900px){

.hero{
height:auto;
min-height:80vh;
padding-bottom:60px;
}

.hero-content{
padding:40px 20px;
max-width:100%;
}

.hero-text-2 h1{
font-size:30px;
line-height:1.2;
}

.hero-text-2 p{
font-size:15px;
}

.navbar{
position:relative;
z-index:1000;
flex-direction:column;
align-items:center;
padding:20px;
gap:15px;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
gap:12px 18px;
}

.nav-links a{
font-size:14px;
}

.btn-call{
margin-top:10px;
}

} /* ← ESTE CIERRE FALTABA */

/* MOBILE */

@media(max-width:768px){

.btn-call{
display:block;
width:100%;
text-align:center;
}

.menu-toggle{
display:block;
}

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:#fff;
flex-direction:column;
align-items:center;
max-height:0;
overflow:hidden;
transition:all 0.4s ease;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

.nav-links li{
padding:15px 0;
width:100%;
text-align:center;
}

.nav-links.active{
max-height:400px;
}

}

.menu-toggle{
display:none;
font-size:24px;
cursor:pointer;
}

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

.hero-buttons{
display:flex;
gap:20px;
margin-top:25px;
flex-wrap:wrap;
}

.btn-primary{
padding:14px 30px;
border-radius:40px;
border:none;
background:linear-gradient(135deg,#6ee7ff,#38bdf8);
color:#0a2540;
font-weight:600;
cursor:pointer;
transition:all .3s ease;
}

.btn-primary:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 15px 35px rgba(56,189,248,0.4);
}

.btn-outline{
padding:14px 30px;
border-radius:40px;
border:1px solid #fff;
background:transparent;
color:#fff;
cursor:pointer;
transition:all .3s ease;
backdrop-filter:blur(6px);
}

.btn-outline:hover{
background:#fff;
color:#111;
transform:translateY(-3px) scale(1.05);
box-shadow:0 12px 30px rgba(255,255,255,0.25);
}


/* ================= ABOUT (CARDS) ================= */

.about-preview{
background:#f5f7f9; padding:120px 60px; } .about-container{ max-width:1200px; margin:auto; } .about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:60px; } .about-card{ text-align:center; transition:transform .35s ease,box-shadow .35s ease; } .about-card:hover{ transform:translateY(-10px); } .about-img{ width:160px; height:160px; margin:0 auto 25px; border-radius:50%; padding:6px; background:linear-gradient(135deg,#6ee7ff,#38bdf8); } .about-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .about-card h3{ font-size:1.4rem; font-weight:700; margin-bottom:15px; color:#111; } .about-card p{ color:#555; line-height:1.7; }

/* IMAGEN CON ZOOM + REFLEJO */

.about-img{
width:150px;
height:150px;
margin:0 auto 25px;
border-radius:50%;
overflow:hidden;
position:relative;
}

.about-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}


.about-card h3{
font-size:1.3rem;
margin-bottom:12px;
color:#111;
}

.about-card p{
color:#555;
line-height:1.6;
}


/* ================= OBJECTIVE ================= */
.objective{ background:#fff; padding:130px 60px; } .objective-container{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; } .objective-tag{ font-size:.85rem; font-weight:600; color:#38bdf8; text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; } .objective-left h2{ font-size:2.6rem; font-weight:800; line-height:1.2; color:#111; margin-bottom:25px; } .objective-left p{ color:#555; line-height:1.8; margin-bottom:40px; } .objective-metrics{ display:flex; gap:50px; } .objective-metrics h3{ font-size:2rem; color:#38bdf8; margin-bottom:5px; } .objective-metrics span{ font-size:.9rem; color:#666; } /* IMAGEN */ .objective-image{ width:100%; border-radius:30px; overflow:hidden; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.08); transition:transform .5s ease,box-shadow .5s ease; } .objective-image img{ width:100%; height:350px; object-fit:cover; transition:transform .7s ease; } .objective-image::after{ content:""; position:absolute; inset:0; background:linear-gradient( 120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60% ); transform:translateX(-100%); transition:transform .9s ease; } .objective-image:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 45px 90px rgba(0,0,0,.12); } .objective-image:hover img{ transform:scale(1.06); } .objective-image:hover::after{ transform:translateX(100%); }

/* ================= SPECIALTIES ================= */

.specialties{
position:relative;
padding:140px 60px;
background:url('img/clinic-bg.jpg') center/cover no-repeat;
overflow:hidden;
}

.specialties::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,.7),
rgba(0,0,0,.4)
);
}

.specialties-container{
position:relative;
z-index:2;
}

.specialties-header{
text-align:center;
max-width:700px;
margin:0 auto 70px;
color:#fff;
}

.specialties-header h2{
font-size:2.6rem;
font-weight:800;
margin-bottom:15px;
}

.specialties-header p{
color:#e5e7eb;
}

/* GRID */

.specialties-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

/* CARDS */

.specialty-card{
background:rgba(255,255,255,.95);
padding:35px 25px;
border-radius:20px;
text-align:center;
box-shadow:0 20px 50px rgba(0,0,0,.08);
transition:all .35s ease;
position:relative;
overflow:hidden;
}

/* REFLEJO */
.specialty-card::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent 40%,
rgba(255,255,255,.4) 50%,
transparent 60%
);
transition:all .7s ease;
}

.specialty-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 35px 80px rgba(0,0,0,.15);
}

.specialty-card:hover::after{
left:100%;
}

.specialty-card h3{
font-size:1.2rem;
margin-bottom:10px;
color:#111;
}

.specialty-card p{
color:#555;
line-height:1.6;
}


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

@media(max-width:992px){

.about-grid{
grid-template-columns:1fr;
}

.objective-container{
grid-template-columns:1fr;
}

.specialties-grid{
grid-template-columns:1fr;
}

}


/* RESEÑAS */
.reviews{
padding:100px 20px;
background:linear-gradient(135deg,#eaf4ff,#ffffff);
font-family:'Montserrat',sans-serif;
}

.reviews-container{
max-width:1200px;
margin:auto;
text-align:center;
}

.reviews h2{
font-size:36px;
color:#0b3c6f;
margin-bottom:10px;
}

.reviews-subtitle{
color:#555;
margin-bottom:60px;
}

.reviews-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.review-card{
background:white;
padding:35px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:all .3s ease;
}

.review-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.stars{
color:#1e88e5;
font-size:20px;
margin-bottom:15px;
}

.review-card p{
color:#555;
line-height:1.6;
margin-bottom:20px;
}

.review-card h4{
color:#0b3c6f;
font-weight:600;
}



/* FOOTER */

.footer{
background:#fff;
border-top:1px solid #ddd;
}

.footer-content{
max-width:1400px;
margin:auto;
padding:60px 40px;
display:grid;
grid-template-columns:repeat(5,1fr); /* FIX */
gap:40px;
}

.footer-col h4{
font-size:16px;
margin-bottom:12px;
}

.footer-col p,
.footer-col li{
font-size:14px;
color:#555;
line-height:1.6;
}

.footer-col ul{
list-style:none;
padding:0; /* FIX */
}

.map iframe{
width:100%;
height:220px;
border:0;
border-radius:6px;
}

/* FOOTER BOTTOM */

.footer-bottom{
background:#0f172a;
color:#fff;
padding:16px 40px;
}

.footer-bottom-inner{
max-width:1400px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap; /* FIX */
gap:10px; /* FIX */
}

.footer-bottom-social{
display:flex;
gap:14px;
}

.footer-bottom-social a{
color:#fff;
font-size:16px;
text-decoration:none;
transition:opacity .3s ease,transform .3s ease;
}

.footer-bottom-social a:hover{
opacity:.7;
transform:translateY(-3px) scale(1.1);
}

.footer-bottom-text{
font-size:13px;
}


/* MAPA */

.footer-col.map {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-col.map h4 {
    font-size: 16px;
    margin-bottom: 12px;
    white-space: nowrap;
}

/* El contenedor del mapa para que encaje en el cuadro azul */
.map-container {
    width: 100%;
    height: 180px; /* Ajusta esta altura según prefieras */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* RESPONSIVE: En móvil el footer ya cambia a 1 o 2 columnas según tu código previo */
@media (max-width: 768px) {
    .map-container {
        height: 250px; /* Un poco más alto en móvil para que sea útil */
    }
}

/* MAPA FIN */

/* RESPONSIVE CORREGIDO */

@media(max-width:992px){

.footer-content{
grid-template-columns:repeat(2,1fr); /* BIEN */
}

}

@media(max-width:576px){

.footer-content{
grid-template-columns:1fr; /* BIEN */
}

.footer-bottom-inner{
flex-direction:column;
text-align:center;
}

}

/* VIDEO */
.container{
width:100%;
max-width:1200px;
margin:auto;
padding:60px 20px;
}

/* FILA */
.row{
display:flex;
justify-content:center;
align-items:center;
}

/* COLUMNA */
.col-lg-8,
.col-md-10{
width:100%;
max-width:900px;
}

/* WRAPPER DEL VIDEO */
.video-wrapper{
position:relative;
width:100%;
padding-bottom:56.25%; /* 16:9 */
border-radius:20px;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,0.15);
transition:transform .4s ease, box-shadow .4s ease;
}

/* IFRAME */
.video-wrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
}

/* EFECTO HOVER */
.video-wrapper:hover{
transform:scale(1.03);
box-shadow:0 35px 80px rgba(0,0,0,0.25);
}

/* EFECTO DE REFLEJO */
.video-wrapper::after{
content:"";
position:absolute;
top:0;
left:-75%;
width:50%;
height:100%;
background:linear-gradient(
  120deg,
  rgba(255,255,255,0) 0%,
  rgba(255,255,255,0.4) 50%,
  rgba(255,255,255,0) 100%
);
transform:skewX(-25deg);
transition:all .7s ease;
}

.video-wrapper:hover::after{
left:130%;
}

/* RESPONSIVE */
@media(max-width:768px){
.container{
padding:40px 15px;
}

.video-wrapper{
border-radius:15px;
}
}

/* BOTÓN FLOTANTE WHATSAPP */
.float-wa {
    position: fixed;
    bottom: 30px; /* Separación del borde inferior */
    right: 30px;  /* Separación del borde derecho */
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10000; /* Siempre por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* EFECTO HOVER */
.float-wa:hover {
    transform: scale(1.1);
    background-color: #128c7e;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    color: #fff;
}

/* AJUSTE PARA MÓVIL (Más pequeño para no tapar contenido) */
@media (max-width: 768px) {
    .float-wa {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}

/* ANIMACIÓN OPCIONAL DE PULSO */
@keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.float-wa {
    animation: pulse-wa 2s infinite;
}
/* ===================================================
   RESPONSIVE UNIFICADO (CELULARES Y TABLETS)
   =================================================== */

@media (max-width: 992px) {
    /* Ajustes Generales de Grillas */
    .about-grid, 
    .objective-container, 
    .specialties-grid, 
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .objective-metrics {
        justify-content: center;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    /* 1. EVITAR ESPACIOS BLANCOS (OVERFLOW) */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* 2. NAVBAR: CONTENEDOR PRINCIPAL */
    .navbar {
      
        display: flex;
        justify-content: space-between; 
        align-items: center;
        padding: 10px 15px;
        position: fixed; /* Para que no se mueva al hacer scroll */
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(10, 37, 64, 0.95); /* Color sólido para legibilidad */
        backdrop-filter: blur(8px);
        z-index: 1000;
        gap: 10px;
    }

    /* 3. LOGO (A la izquierda y pequeño) */
    .logo {
        order: 1; /* Primero a la izquierda */
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    .logo img {
        height: 32px; /* Tamaño pequeño para móvil */
        width: auto;
    }

    /* 4. BOTÓN CONTACTO (Al centro) */
    .btn-call {
        order: 2; /* Se posiciona en medio */
        padding: 8px 15px;
        font-size: 12px;
        margin: 0;
        white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
        display: inline-block;
    }

    /* 5. MENÚ HAMBURGUESA (A la derecha) */
    /* Primero, si no tienes el icono en el HTML, el CSS lo genera o lo muestra */
    .menu-toggle {
        display: block;
        order: 3; /* Al final a la derecha */
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }

    /* 6. LINKS DESPLEGABLES (Ocultos por defecto) */
    .nav-links {
        position: absolute;
        top: 100%; /* Justo debajo de la barra */
        left: 0;
        width: 100%;
        background: #0a2540; 
        flex-direction: column;
        align-items: center;
        padding: 0;
        max-height: 0; /* Oculto */
        overflow: hidden;
        transition: all 0.4s ease-in-out;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    /* Clase que activarás con JS */
    .nav-links.active {
        max-height: 400px;
        padding: 20px 0;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }

    .nav-links a {
        font-size: 16px;
        display: block;
    }

    /* 7. AJUSTE DEL HERO PARA NO QUEDAR DEBAJO DE LA NAVBAR FIXED */
    .hero, .hero-2, .hero-3, .hero-4, .hero-5 {
        padding-top: 80px; 
    }
}

@media (max-width: 480px) {
    /* AJUSTES FINOS PARA PANTALLAS PEQUEÑAS */
    .hero-text h1 {
        font-size: 36px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .about-img {
        width: 120px;
        height: 120px;
    }

    .specialty-card {
        padding: 25px 15px;
    }

    .float-wa {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
        font-size: 24px;
    }
}

@media (max-width: 768px) {


    /* Las métricas de "Objective" a veces se salen de la pantalla */
    .objective-metrics {
        flex-direction: column; /* Apilarlas verticalmente */
        gap: 20px;
        align-items: center;
    }

    /* Evita que las imágenes grandes empujen el borde */
    img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    /* Ajustamos todos los tipos de hero */
    .hero, .hero-2, .hero-3, .hero-4, .hero-5 {
        padding-top: 100px !important; /* Espacio para que la navbar no tape el H1 */
        min-height: 100svh; /* Asegura que cubra toda la pantalla */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra el texto verticalmente en el espacio restante */
    }

    .hero-content {
        padding-top: 20px; /* Un ajuste extra interno si es necesario */
    }
}


/* Seccion 1 */

.castrejon-feature{
padding:120px 20px;
background:#ffffff;
font-family:'Poppins',sans-serif;
text-align:center;
}

.castrejon-container{
max-width:900px;
margin:auto;
}

.castrejon-img{
width:100%;
border-radius:30px;
overflow:hidden;
position:relative;
box-shadow:0 30px 70px rgba(0,0,0,.08);
transition:transform .5s ease,box-shadow .5s ease;
}

.castrejon-img img{
width:100%;
height:550px;
object-fit:cover;
transition:transform .7s ease;
}

.castrejon-img::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.25) 50%,
rgba(255,255,255,0) 60%
);
transform:translateX(-100%);
transition:transform .9s ease;
}

.castrejon-img:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 45px 90px rgba(0,0,0,.12);
}

.castrejon-img:hover img{
transform:scale(1.06);
}

.castrejon-img:hover::after{
transform:translateX(100%);
}

.castrejon-subtitle{
color:#2b6cff;
font-weight:600;
letter-spacing:1px;
margin-bottom:10px;
}

.castrejon-title{
font-size:40px;
margin-bottom:20px;
}

.castrejon-text{
color:#555;
line-height:1.8;
margin-bottom:15px;
font-size:17px;
}

.castrejon-img{
  width:100%;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.08);
  transition:transform .5s ease, box-shadow .5s ease;
}

.castrejon-img img{
  width:100%;
  height:550px;
  object-fit:cover;
  transition:transform .7s ease;
}

/* Overlay invisible por defecto */
.castrejon-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:15px;
  opacity:0;
  transition:opacity 0.5s ease;
}


.castrejon-img:hover .castrejon-overlay{
  opacity:1;
}

/* Iconos dentro del overlay */
.castrejon-socials{
  display:flex;
  gap:20px;
}

.castrejon-socials a{
  color:#fff;
  font-size:24px;
  transition:transform 0.3s, color 0.3s;
}

.castrejon-socials a:hover{
  transform:scale(1.3);
  color:#ff7f00; /* naranja al pasar el mouse */
}