/*==================================================
BLUE HORIZON BENALMÁDENA
Style.css
==================================================*/

:root{

    --primary:#0B2341;
    --secondary:#C8A44D;
    --white:#ffffff;
    --light:#f6f7f8;
    --dark:#1d1d1d;
    --text:#555555;
    --shadow:0 15px 40px rgba(0,0,0,.12);
    --radius:14px;
    --transition:.35s;

}

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

section{

    padding:90px 0;

}

h1,h2,h3,h4{

    font-family:'Playfair Display',serif;
    color:var(--primary);

}

h1{

    font-size:72px;
    font-weight:700;
    letter-spacing:2px;

}

h2{

    font-size:46px;
    margin-bottom:25px;

}

h3{

    font-size:30px;

}

p{

    font-size:17px;

}

/*****************************
HEADER
*****************************/

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    transition:.4s;

    background:rgba(11,35,65,.18);

    backdrop-filter:blur(15px);

}

header.scrolled{

    background:#ffffff;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:85px;

}

.logo{

    color:#fff;

    font-size:30px;

    font-family:'Playfair Display',serif;

    font-weight:bold;

    letter-spacing:1px;

}

header.scrolled .logo{

    color:var(--primary);

}

nav ul{

    display:flex;

    gap:35px;

}

nav a{

    color:#fff;

    font-weight:500;

    transition:.3s;

}

header.scrolled nav a{

    color:var(--primary);

}

nav a:hover{

    color:var(--secondary);

}

.btn-menu{

    background:var(--secondary);

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-menu:hover{

    transform:translateY(-3px);

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

}

/*****************************
HERO
*****************************/

.hero{

    height:100vh;

    background:url("img/hero.jpg") center center/cover no-repeat;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(11,35,65,.55),
        rgba(11,35,65,.55)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:800px;

    color:#fff;

    padding:20px;

}

.hero h3{

    color:var(--secondary);

    font-size:28px;

    margin-bottom:10px;

}

.hero h1{

    color:#fff;

    margin-bottom:20px;

}

.hero p{

    color:#fff;

    font-size:22px;

    margin-bottom:45px;

}

.btn-principal{

    display:inline-block;

    background:var(--secondary);

    color:#fff;

    padding:18px 42px;

    border-radius:50px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.btn-principal:hover{

    transform:translateY(-4px);

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

}

/*****************************
SERVICIOS
*****************************/

.servicios{

    background:var(--light);

}

.servicios .container{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:25px;

}

.item{

    background:#fff;

    border-radius:var(--radius);

    text-align:center;

    padding:35px 20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.item:hover{

    transform:translateY(-10px);

}

.item i{

    font-size:42px;

    color:var(--secondary);

    margin-bottom:18px;

}

.item h4{

    font-size:22px;

    margin-bottom:8px;

}
/***********************************
APARTAMENTO
************************************/

.apartamento{

    background:#ffffff;

}

.apartamento .container{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

.apartamento .texto h2{

    margin-bottom:25px;

}

.apartamento .texto p{

    margin-bottom:25px;
    font-size:18px;

}

.apartamento ul{

    margin:30px 0;

}

.apartamento ul li{

    margin-bottom:14px;
    font-size:17px;
    color:#444;

}

.btn-secundario{

    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:16px 36px;
    border-radius:50px;
    transition:.35s;
    font-weight:600;

}

.btn-secundario:hover{

    background:var(--secondary);
    transform:translateY(-4px);

}

.imagen{

    overflow:hidden;
    border-radius:18px;
    box-shadow:var(--shadow);

}

.imagen img{

    width:100%;
    height:650px;
    object-fit:cover;
    transition:.6s;

}

.imagen:hover img{

    transform:scale(1.08);

}


/***********************************
GALERÍA
************************************/

#galeria{

    background:var(--light);

}

#galeria h2{

    text-align:center;
    margin-bottom:60px;

}

.grid-galeria{

    width:90%;
    max-width:1300px;
    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-auto-rows:260px;

    gap:18px;

}

.grid-galeria img{

    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:16px;

    cursor:pointer;

    transition:.45s;

    box-shadow:var(--shadow);

}

.grid-galeria img:hover{

    transform:scale(1.04);

}

.grid-galeria img:first-child{

    grid-row:span 2;

}


/***********************************
EFECTO PREMIUM GALERÍA
************************************/

.grid-galeria img{

    position:relative;

}

.grid-galeria img:hover{

    box-shadow:

    0 25px 60px rgba(0,0,0,.20);

}


/***********************************
TÍTULOS
************************************/

section h2{

    position:relative;

    display:inline-block;

}

section h2::after{

    content:"";

    position:absolute;

    width:80px;

    height:4px;

    background:var(--secondary);

    left:0;

    bottom:-12px;

    border-radius:20px;

}


/***********************************
EFECTOS GENERALES parte 2
************************************/

.item,
.imagen,
.grid-galeria img{

    transition:.4s;

}

.item:hover{

    transform:translateY(-10px);

}

.imagen:hover{

    transform:translateY(-6px);

}
/***********************************
UBICACIÓN
************************************/

#ubicacion{

    background:#ffffff;

}

#ubicacion .container{

    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:60px;
    align-items:center;

}

#ubicacion .texto p{

    margin:20px 0;

    font-size:18px;

    color:#555;

}

#ubicacion ul{

    margin-top:30px;

}

#ubicacion ul li{

    margin-bottom:18px;

    font-size:17px;

    display:flex;

    align-items:center;

    gap:12px;

}

.mapa{

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.mapa iframe{

    width:100%;

    height:500px;

    border:0;

}


/***********************************
RESERVA
************************************/

#reserva{

    background:linear-gradient(180deg,#f8f9fb,#eef3f8);

}

#reserva h2{

    display:block;

    text-align:center;

    margin-bottom:50px;

}

#reserva h2::after{

    left:50%;
    transform:translateX(-50%);

}

form{

    width:90%;
    max-width:900px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    background:#ffffff;

    padding:50px;

    border-radius:20px;

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

}

form input,
form textarea{

    width:100%;

    padding:18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    font-family:Poppins,sans-serif;

    transition:.3s;

}

form textarea{

    grid-column:1/3;

    resize:vertical;

    min-height:160px;

}

form input:focus,
form textarea:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 12px rgba(200,164,77,.30);

}

form button{

    grid-column:1/3;

    padding:20px;

    background:var(--secondary);

    color:#fff;

    border:none;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

form button:hover{

    background:var(--primary);

    transform:translateY(-3px);

}


/***********************************
FOOTER
************************************/

footer{

    background:var(--primary);

    color:#fff;

    padding:70px 0 35px;

    text-align:center;

}

footer h3{

    color:#fff;

    font-size:36px;

    margin-bottom:20px;

}

footer p{

    margin:10px 0;

    color:#d8d8d8;

}

footer i{

    color:var(--secondary);

    margin-right:10px;

}

.copy{

    margin-top:40px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.15);

    color:#bbb;

    font-size:14px;

}


/***********************************
SCROLLBAR
************************************/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#efefef;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/***********************************
SELECCIÓN DE TEXTO
************************************/

::selection{

    background:var(--secondary);

    color:#fff;

}


/***********************************
ANIMACIÓN SUAVE parte 3
************************************/

.hero-content,
.item,
.apartamento,
#galeria,
#ubicacion,
#reserva,
footer{

    animation:fadeUp 1s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/****************************************
RESPONSIVE
****************************************/

@media(max-width:1100px){

    h1{

        font-size:58px;

    }

    h2{

        font-size:38px;

    }

    .servicios .container{

        grid-template-columns:repeat(3,1fr);

    }

    .apartamento .container{

        grid-template-columns:1fr;

    }

    #ubicacion .container{

        grid-template-columns:1fr;

    }

    .grid-galeria{

        grid-template-columns:1fr 1fr;

    }

}


@media(max-width:768px){

    header .container{

        height:75px;

    }

    nav{

        display:none;

    }

    h1{

        font-size:42px;

    }

    h2{

        font-size:32px;

    }

    .hero p{

        font-size:18px;

    }

    .servicios .container{

        grid-template-columns:1fr 1fr;

    }

    .grid-galeria{

        grid-template-columns:1fr;

        grid-auto-rows:250px;

    }

    .grid-galeria img:first-child{

        grid-row:auto;

    }

    form{

        grid-template-columns:1fr;

        padding:35px;

    }

    form textarea{

        grid-column:auto;

    }

    form button{

        grid-column:auto;

    }

}


@media(max-width:576px){

    section{

        padding:70px 0;

    }

    .container{

        width:92%;

    }

    .logo{

        font-size:24px;

    }

    .btn-menu{

        padding:12px 22px;

        font-size:15px;

    }

    .hero{

        height:90vh;

    }

    h1{

        font-size:36px;

    }

    .hero h3{

        font-size:22px;

    }

    .hero p{

        font-size:17px;

        line-height:1.6;

    }

    .btn-principal{

        padding:16px 30px;

    }

    .servicios .container{

        grid-template-columns:1fr;

    }

}



/****************************************
EFECTOS PREMIUM
****************************************/

.item{

    cursor:pointer;

}

.item:hover{

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}


.btn-menu,
.btn-principal,
.btn-secundario,
form button{

    transition:all .35s ease;

}


.btn-menu:hover,
.btn-principal:hover,
.btn-secundario:hover,
form button:hover{

    transform:translateY(-4px);

}


.hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:140px;

    background:linear-gradient(

        transparent,

        #ffffff

    );

}


/****************************************
HEADER SCROLL
****************************************/

header.scrolled{

    .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(5,20,40,.30),
        rgba(5,20,40,.20)
    );
}

}


header.scrolled nav a{

    color:var(--primary);

}

header.scrolled .btn-menu{

    background:var(--primary);

}

header.scrolled .btn-menu:hover{

    background:var(--secondary);

}


/****************************************
ANIMACIONES
****************************************/

.fade{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.fade.visible{

    opacity:1;

    transform:translateY(0);

}


/****************************************
HOVER GALERÍA
****************************************/

.grid-galeria img{

    filter:brightness(.95);

}

.grid-galeria img:hover{

    filter:brightness(1);

}


/****************************************
SOMBRA SUAVE
****************************************/

.imagen img,
.grid-galeria img{

    border:8px solid #fff;

}


/****************************************
FOOTER
****************************************/

footer a{

    color:#fff;

}

footer a:hover{

    color:var(--secondary);

}
.subtitulo{

    color:var(--secondary);

    font-weight:700;

    letter-spacing:3px;

    display:block;

    margin-bottom:12px;

    text-transform:uppercase;

}

.lista-servicios{

    margin:35px 0;

}

.lista-servicios li{

    margin-bottom:16px;

    font-size:18px;

}

.lista-servicios i{

    color:#C8A44D;

    margin-right:12px;

}

/****************************************
BARRA DE SERVICIOS
****************************************/

.servicios{

    background:#ffffff;
    padding:45px 0;
    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.servicios-bar{

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    align-items:center;

}

.servicio{

    text-align:center;
    padding:15px 10px;
    transition:.3s;

}

.servicio i{

    display:block;
    font-size:34px;
    color:var(--secondary);
    margin-bottom:12px;

}

.servicio span{

    font-size:15px;
    font-weight:600;
    color:var(--primary);

}

.servicio:hover{

    transform:translateY(-5px);

}

@media(max-width:992px){

    .servicios-bar{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:576px){

    .servicios-bar{

        grid-template-columns:repeat(2,1fr);

    }

}
.whatsapp-float{
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
    z-index: 9999;
    transition: all .3s ease;
}

.whatsapp-float:hover{
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
}

@media (max-width:768px){
    .whatsapp-float{
        width:55px;
        height:55px;
        font-size:30px;
        right:20px;
        bottom:20px;
    }
/* MENSAJE DE DISPONIBILIDAD */

.mensaje-disponibilidad {
    width: 100%;
    margin: 15px 0;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    display: none;
    box-sizing: border-box;
}

.mensaje-disponibilidad.disponible {
    display: block;
    background: #e8f7ee;
    color: #1d7a46;
    border: 1px solid #b7e4c7;
}

.mensaje-disponibilidad.no-disponible {
    display: block;
    background: #fdeaea;
    color: #b42318;
    border: 1px solid #f5c2c0;
}

#boton-reserva:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
}
/****************************************
FIN DEL CSS
****************************************/