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

.hero{

    position:relative;
    height:100vh;

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

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

}

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.35)
    );

}

.hero-content{

    position:relative;
    z-index:2;

    text-align:center;
    color:#fff;

    margin-top:120px;

}

.hero h1{

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:4.5rem;

    font-weight:500;

    letter-spacing:2px;

    margin-bottom:25px;

}

.hero p{

    max-width:720px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    opacity:.95;

}



/*====================================
            CONTACTO
====================================*/

.contacto{

    padding:140px 0;

    background:#F8F4EE;

    overflow:hidden;

}

.contacto .container{

    width:min(1280px,92%);
    margin:auto;

}



/*====================================
        GRID PRINCIPAL
====================================*/

.contacto-section{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:90px;

    align-items:center;

}



/*====================================
        INFORMACIÓN
====================================*/

.contacto-info{

    position:relative;

}

.subtitle{

    display:inline-block;

    color:#B58B45;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.contacto-info h2{

    font-family:'Playfair Display',serif;

    font-size:68px;

    color:#1F1F1F;

    font-weight:500;

    line-height:1;

    margin-bottom:18px;

}

.contacto-info h3{

    font-family:'Playfair Display',serif;

    font-size:38px;

    color:#343434;

    font-weight:500;

    line-height:1.3;

    margin-bottom:24px;

}

.contacto-info p{

    color:#666;

    font-size:17px;

    line-height:1.9;

    margin-bottom:45px;

    max-width:620px;

}



/*====================================
        LÍNEA DECORATIVA
====================================*/

.contacto-info::after{

    content:"";

    display:block;

    width:120px;

    height:3px;

    background:#B58B45;

    border-radius:30px;

    margin-top:45px;

}

/*====================================
        FORMULARIO
====================================*/

.cotizacion-form{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:45px;

}

.cotizacion-form input,
.cotizacion-form textarea{

    width:100%;

    padding:20px 24px;

    border:1px solid rgba(181,139,69,.25);

    border-radius:20px;

    background:#fff;

    color:#333;

    font-size:15px;

    font-family:'Inter',sans-serif;

    transition:.35s;

    outline:none;

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

}

.cotizacion-form input::placeholder,
.cotizacion-form textarea::placeholder{

    color:#9b9b9b;

}

.cotizacion-form input:focus,
.cotizacion-form textarea:focus{

    border-color:#B58B45;

    box-shadow:
    0 0 0 4px rgba(181,139,69,.12),
    0 18px 35px rgba(0,0,0,.08);

}

.cotizacion-form textarea{

    min-height:220px;

    resize:none;

}



/*====================================
        BOTÓN
====================================*/

.contacto-btn{

    width:230px;

    height:62px;

    border:none;

    border-radius:60px;

    background:#B58B45;

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 18px 35px rgba(181,139,69,.28);

}

.contacto-btn:hover{

    background:#9C753A;

    transform:translateY(-6px);

    box-shadow:0 25px 45px rgba(181,139,69,.35);

}



/*====================================
        IMAGEN
====================================*/

.contacto-img{

    position:relative;

    border-radius:35px;

    overflow:hidden;

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

    height:auto;

    display:flex;

    align-items:stretch;

}

.contacto-img img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

.contacto-img:hover img{

    transform:scale(1.08);

}



/*====================================
        OVERLAY
====================================*/

.contacto-img::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.45),

        rgba(0,0,0,.05),

        transparent

    );

    z-index:2;

}

/*====================================
        TARJETA FLOTANTE
====================================*/

.contacto-img::after{

    content:"HOTEL ABBA";

    position:absolute;

    left:35px;

    bottom:35px;

    z-index:5;

    padding:16px 34px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    border-radius:50px;

    color:#B58B45;

    font-size:12px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}



/*====================================
        DETALLES DECORATIVOS
====================================*/

.contacto::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(181,139,69,.08);

    filter:blur(90px);

    pointer-events:none;

}

.contacto::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(181,139,69,.08);

    filter:blur(110px);

    pointer-events:none;

}



/*====================================
        EFECTOS
====================================*/

.contacto-info{

    transition:.45s;

}

.contacto-info:hover{

    transform:translateY(-8px);

}

.contacto-info h2,
.contacto-info h3,
.subtitle{

    transition:.35s;

}

.contacto-info:hover h2{

    color:#B58B45;

}

.contacto-info:hover h3{

    transform:translateX(8px);

}

.contacto-info:hover .subtitle{

    letter-spacing:6px;

}



/*====================================
        SCROLL ANIMATION
====================================*/

.contacto-info,
.contacto-img{

    animation:fadeUp 1s ease both;

}

.contacto-img{

    animation-delay:.2s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*====================================
        PREGUNTAS FRECUENTES
====================================*/

.faq{

    position:relative;

    padding:170px 0;

    background:
    linear-gradient(180deg,
    #FCFBF9 0%,
    #F6F1EA 100%);

    overflow:hidden;

}

.faq::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(201,162,39,.08),
    transparent 70%);

    top:-260px;

    left:-220px;

}

.faq::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.95),
    transparent);

    bottom:-250px;

    right:-180px;

}


/*====================================
            TITULO
====================================*/

.faq .titulo{

    position:relative;

    z-index:2;

    text-align:center;

    width:min(760px,92%);

    margin:0 auto 90px;

}

.faq .titulo span{

    display:inline-block;

    color:#C89C1F;

    letter-spacing:6px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:18px;

}

.faq .titulo h2{

    font-family:"Playfair Display",serif;

    font-size:3.8rem;

    color:#181818;

    margin-bottom:25px;

    line-height:1.15;

}

.faq .titulo p{

    font-size:1.08rem;

    color:#6A6A6A;

    line-height:2;

}


/*====================================
        CONTENEDOR
====================================*/

.faq-container{

    position:relative;

    z-index:2;

    width:min(980px,92%);

    margin:auto;

}


/*====================================
        TARJETAS
====================================*/

.faq-item{

    position:relative;

    margin-bottom:28px;

    border-radius:28px;

    background:

    rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.95);

    box-shadow:

    0 20px 55px rgba(0,0,0,.07);

    overflow:hidden;

    transition:.45s;

}


/* Línea dorada */

.faq-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(90deg,
    #C89C1F,
    #F5D878);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.faq-item:hover{

    transform:translateY(-6px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.12);

}

.faq-item:hover::before{

    transform:scaleX(1);

}


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

.faq-question{

    width:100%;

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    padding:34px 38px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-align:left;

}

.faq-question span{

    font-size:1.22rem;

    font-weight:600;

    color:#202020;

    line-height:1.5;

}


/*====================================
            ICONO
====================================*/

.faq-question i{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

    linear-gradient(135deg,
    #FFF8E8,
    #FFFFFF);

    color:#C89C1F;

    font-size:1.2rem;

    box-shadow:

    0 15px 35px rgba(201,162,39,.15);

    transition:.45s;

}


/*====================================
        RESPUESTA
====================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:

    max-height .5s ease,

    padding .45s ease;

    padding:0 38px;

}

.faq-answer p{

    color:#666;

    font-size:1.03rem;

    line-height:2;

    padding-bottom:35px;

}

/*====================================
        ACORDEÓN ABIERTO
====================================*/

.faq-item.active{

    background:#fff;

    border-color:rgba(201,162,39,.28);

    box-shadow:

    0 35px 80px rgba(0,0,0,.10),

    0 0 45px rgba(201,162,39,.12);

}

.faq-item.active::before{

    transform:scaleX(1);

}


/*====================================
        RESPUESTA ABIERTA
====================================*/

.faq-item.active .faq-answer{

    max-height:350px;

    padding:0 38px 35px;

}


/*====================================
        ICONO
====================================*/

.faq-item.active .faq-question i{

    transform:rotate(45deg);

    background:

    linear-gradient(135deg,

    #C89C1F,

    #F2D46B);

    color:#fff;

}


/*====================================
        EFECTO SHINE
====================================*/

.faq-item::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    110deg,

    transparent,

    rgba(255,255,255,.7),

    transparent);

    transform:skewX(-25deg);

    transition:1s;

}

.faq-item:hover::after{

    left:150%;

}


/*====================================
        HOVER
====================================*/

.faq-question:hover span{

    color:#C89C1F;

}

.faq-question:hover i{

    transform:scale(1.08);

}


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

.faq-answer p strong{

    color:#C89C1F;

    font-weight:700;

}


/*====================================
        ANIMACIÓN
====================================*/

.faq-item{

    animation:faqEntrada .8s ease both;

}

.faq-item:nth-child(2){

    animation-delay:.08s;

}

.faq-item:nth-child(3){

    animation-delay:.16s;

}

.faq-item:nth-child(4){

    animation-delay:.24s;

}

@keyframes faqEntrada{

    from{

        opacity:0;

        transform:

        translateY(70px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}

/*====================================
        TABLET
====================================*/

@media (max-width:992px){

    /* HERO */

    .hero{
        height:85vh;
    }

    .hero-content{
        margin-top:90px;
        padding:0 30px;
    }

    .hero h1{
        font-size:3.6rem;
        line-height:1.15;
    }

    .hero p{
        font-size:17px;
        max-width:650px;
    }

    /* CONTACTO */

    .contacto{
        padding:100px 0;
    }

    .contacto-section{
        grid-template-columns:1fr;
        gap:60px;
    }

    .contacto-info{
        max-width:100%;
    }

    .contacto-info h2{
        font-size:56px;
    }

    .contacto-info h3{
        font-size:34px;
    }

    .contacto-img{
        height:500px;
    }

    .contacto-img img{
        height:100%;
    }

}

/*====================================
        CELULAR
====================================*/

@media (max-width:768px){

    /* HEADER */

    .top-bar{
        padding:20px;
    }

    .logo{
        font-size:2rem;
    }

    .year,
    .stars,
    .navbar{
        display:none;
    }

    /* HERO */

    .hero{
        height:75vh;
    }

    .hero-content{
        margin-top:70px;
        padding:0 25px;
    }

    .hero h1{
        font-size:2.6rem;
        line-height:1.2;
        margin-bottom:20px;
    }

    .hero p{
        font-size:15px;
        line-height:1.8;
    }

    /* CONTACTO */

    .contacto{
        padding:80px 20px;
    }

    .contacto-section{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contacto-info{
        max-width:100%;
    }

    .contacto-info h2{
        font-size:2.2rem;
        line-height:1.2;
    }

    .contacto-info h3{
        font-size:1.8rem;
    }

    .contacto-info p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:30px;
    }

    .contacto-info::after{
        margin-top:30px;
    }

    /* FORMULARIO */

    .cotizacion-form{
        gap:18px;
        margin-top:30px;
    }

    .cotizacion-form input,
    .cotizacion-form textarea{
        padding:16px 18px;
        font-size:14px;
        border-radius:16px;
    }

    .cotizacion-form textarea{
        min-height:150px;
    }

    .contacto-btn{
        width:180px;
        height:52px;
        font-size:12px;
        letter-spacing:2px;
    }

    /* IMAGEN */

    .contacto-img{
        height:340px;
        border-radius:20px;
    }

    .contacto-img img{
        border-radius:20px;
    }

    .contacto-img::after{
        left:20px;
        bottom:20px;
        padding:10px 18px;
        font-size:11px;
        letter-spacing:2px;
    }

    /* DECORACIÓN */

    .contacto::before,
    .contacto::after{
        display:none;
    }

}