/*==================================================
        VARIABLES
==================================================*/

:root{

    --gold:#C9A227;
    --gold-light:#E8C65B;

    --cream:#FAF8F3;
    --white:#FFFFFF;

    --black:#171717;
    --text:#666666;

    --border:#ECE7DF;

    --shadow:
    0 30px 70px rgba(0,0,0,.08);

    --transition:.45s ease;

}


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

.hero-habitacion{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:

    linear-gradient(rgba(0,0,0,.45),
    rgba(0,0,0,.45)),

    url("../img/matrimonial.jpg")
    center/cover no-repeat;

    padding-top:250px;

}

.hero-habitacion::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(255,255,255,.10),
    transparent 40%);

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.15));

}

.hero-content{

    position:relative;

    z-index:2;

    width:min(900px,90%);

    text-align:center;

    color:#fff;

}

.categoria{

    display:inline-block;

    padding:12px 30px;

    border-radius:50px;

    background:

    rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    letter-spacing:4px;

    font-size:.85rem;

    margin-bottom:35px;

}

.hero-content h1{

    font-family:"Playfair Display",serif;

    font-size:clamp(3rem,5vw,4.6rem);

    font-weight:700;

    color:#fff;

    line-height:1.1;

    text-align:center;

    margin-bottom:30px;

    text-shadow:
    0 8px 30px rgba(0,0,0,.35);

}

.hero-info{

    display:flex;

    justify-content:center;

    gap:20px;

    align-items:center;

    margin-bottom:35px;

    font-size:1.1rem;

}

.hero-info div{

    color:var(--gold-light);

    letter-spacing:4px;

}

.hero-content p{

    width:min(650px,100%);

    margin:auto;

    line-height:2;

    color:#EAEAEA;

    font-size:1.08rem;

}

.hero-content a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:50px;

    padding:18px 48px;

    border-radius:60px;

    text-decoration:none;

    color:#ffffff;

    background:

    linear-gradient(135deg,

    #B88A1D,

    var(--gold),

    #F4D982);

    font-weight:700;

    letter-spacing:2px;

    transition:var(--transition);

}

.hero-content a:hover{

    transform:translateY(-6px);

    box-shadow:

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

}

/*====================================
        DESCRIPCIÓN
====================================*/

.descripcion{

    position:relative;

    padding:170px 0;

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

    overflow:hidden;

}

.descripcion::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

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

    top:-280px;

    right:-180px;

}

.descripcion::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

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

    bottom:-250px;

    left:-180px;

}


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

.descripcion-grid{

    position:relative;

    z-index:2;

    width:min(1250px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:90px;

    align-items:center;

}


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

.descripcion-texto span{

    display:inline-block;

    color:#C9A227;

    font-size:.9rem;

    letter-spacing:6px;

    font-weight:700;

    margin-bottom:20px;

}

.descripcion-texto h2{

    font-family:"Playfair Display",serif;

    font-size:4rem;

    line-height:1.1;

    color:#181818;

    margin-bottom:35px;

}

.descripcion-texto p{

    font-size:1.08rem;

    color:#666;

    line-height:2.15;

    margin-bottom:25px;

}


/*====================================
        BENEFICIOS
====================================*/

.habitacion-beneficios{

    display:grid;

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

    gap:20px;

    margin-top:50px;

    padding:0;

    list-style:none;

}

.habitacion-beneficios li{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    border-radius:20px;

    background:

    rgba(255,255,255,.72);

    backdrop-filter:blur(14px);

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

    box-shadow:

    0 20px 45px rgba(0,0,0,.05);

    transition:.45s;

}

.habitacion-beneficios li:hover{

    transform:

    translateY(-8px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.10);

}

.habitacion-beneficios i{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

    linear-gradient(135deg,

    #C89C1F,

    #EACF6B);

    color:#fff;

    font-size:1.2rem;

    flex-shrink:0;

}

.habitacion-beneficios li{

    font-weight:600;

    color:#2A2A2A;

}


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

.descripcion-imagen{

    position:relative;

    padding:25px;

    background:#fff;

    border-radius:40px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.10),
        0 0 0 1px rgba(201,162,39,.12),
        0 0 45px rgba(201,162,39,.08);

}

.descripcion-imagen img{

    width:100%;

    display:block;

    border-radius:28px;

    transition:.6s;

}

.descripcion-imagen img:hover{

    transform:

    scale(1.04);

}


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

.descripcion-imagen::after{

    content:"★★★★★";

    position:absolute;

    bottom:35px;

    left:-35px;

    padding:18px 28px;

    background:

    rgba(255,255,255,.92);

    backdrop-filter:blur(15px);

    border-radius:18px;

    color:#C9A227;

    font-size:1.1rem;

    letter-spacing:4px;

    box-shadow:

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

}


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

.descripcion-texto,

.descripcion-imagen{

    animation:fadeUp 1s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.informacion{

    position:relative;

    padding:40px 0 180px;

    background:
    linear-gradient(180deg,#F6F1EA,#FFFFFF);

    overflow:hidden;

}

.informacion::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

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

    top:-350px;

    left:-250px;

}


/*====================================
        INFO CARD
====================================*/

.info-card{

    position:relative;

    z-index:2;

    width:min(1300px,94%);

    margin:auto;

    display:grid;

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

    overflow:hidden;

    border-radius:35px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.08);

}


/*====================================
        ARTÍCULOS
====================================*/

.info-card article{

    position:relative;

    padding:60px 35px;

    text-align:center;

    transition:.45s;

    overflow:hidden;

}

.info-card article:not(:last-child){

    border-right:1px solid #ECECEC;

}

.info-card article::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(90deg,

    #C89C1F,

    #F2D97A);

    transform:scaleX(0);

    transition:.45s;

}

.info-card article:hover::before{

    transform:scaleX(1);

}

.info-card article:hover{

    background:#fff;

    transform:translateY(-10px);

}


/*====================================
            ICONOS
====================================*/

.info-card i{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:2rem;

    color:#C89C1F;

    background:

    linear-gradient(135deg,

    #FFF7E0,

    #FFFFFF);

    box-shadow:

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

    transition:.45s;

}

.info-card article:hover i{

    transform:

    rotate(10deg)
    scale(1.1);

}


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

.info-card span{

    display:block;

    margin-top:28px;

    margin-bottom:14px;

    font-size:.82rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#9C9C9C;

}

.info-card h3{

    color:#1F1F1F;

    font-size:1.2rem;

    line-height:1.7;

    font-weight:600;

}


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

.info-card article::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    rgba(255,255,255,.5);

    transform:skewX(-25deg);

    transition:1s;

}

.info-card article:hover::after{

    left:150%;

}


/*====================================
        ANIMACIONES
====================================*/

.info-card article{

    animation:cardUp .8s ease both;

}

.info-card article:nth-child(2){

    animation-delay:.1s;

}

.info-card article:nth-child(3){

    animation-delay:.2s;

}

.info-card article:nth-child(4){

    animation-delay:.3s;

}

.info-card article:nth-child(5){

    animation-delay:.4s;

}

@keyframes cardUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*====================================
    SERVICIOS INCLUIDOS
====================================*/

.equipamiento{

    position:relative;

    padding:170px 0;

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

    overflow:hidden;

}

/* Círculos decorativos */

.equipamiento::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

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

    top:-250px;

    left:-220px;

}

.equipamiento::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.9),
    transparent);

    bottom:-260px;

    right:-180px;

}


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

.equipamiento .titulo{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:90px;

}

.equipamiento .titulo span{

    display:inline-block;

    color:#C89C1F;

    font-size:.9rem;

    letter-spacing:6px;

    font-weight:700;

    margin-bottom:18px;

}

.equipamiento .titulo h2{

    font-family:"Playfair Display",serif;

    font-size:3.6rem;

    color:#181818;

    line-height:1.2;

}


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

.equipamiento-grid{

    position:relative;

    z-index:2;

    width:min(1250px,92%);

    margin:auto;

    display:grid;

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

    gap:35px;

}


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

.equipamiento-grid article{

    position:relative;

    padding:45px 30px;

    text-align:center;

    border-radius:30px;

    background:

    rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

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

    box-shadow:

    0 18px 45px rgba(0,0,0,.06);

    overflow:hidden;

    transition:.45s;

}


/* línea dorada */

.equipamiento-grid article::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(90deg,

    #C89C1F,

    #F5D878);

    transform:scaleX(0);

    transition:.45s;

}

.equipamiento-grid article:hover::before{

    transform:scaleX(1);

}


/*====================================
            ICONOS
====================================*/

.equipamiento-grid i{

    width:95px;

    height:95px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:2.1rem;

    color:#C89C1F;

    background:

    linear-gradient(135deg,

    #FFF8E8,

    #FFFFFF);

    box-shadow:

    0 18px 40px rgba(201,162,39,.18);

    transition:.45s;

}


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

.equipamiento-grid h4{

    margin-top:28px;

    font-size:1.12rem;

    color:#222;

    line-height:1.6;

    font-weight:600;

}


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

.equipamiento-grid article:hover{

    transform:

    translateY(-14px);

    box-shadow:

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

    background:#fff;

}

.equipamiento-grid article:hover i{

    transform:

    scale(1.12)

    rotate(8deg);

}

/*====================================
        EFECTO BRILLO
====================================*/

.equipamiento-grid article::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:65%;

    height:100%;

    background:

    linear-gradient(

    110deg,

    transparent,

    rgba(255,255,255,.75),

    transparent);

    transform:skewX(-25deg);

    transition:1s;

}

.equipamiento-grid article:hover::after{

    left:150%;

}


/*====================================
        HALO DORADO
====================================*/

.equipamiento-grid article .halo{

    display:none;

}

.equipamiento-grid article:hover{

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

}

.equipamiento-grid article:hover i{

    color:#fff;

    background:

    linear-gradient(135deg,

    #C89C1F,

    #F2D46B);

}


/*====================================
        EFECTO LUZ
====================================*/

.equipamiento-grid article{

    isolation:isolate;

}

.equipamiento-grid article:hover{

    box-shadow:

    0 18px 45px rgba(0,0,0,.08),

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

}


/*====================================
        ANIMACIONES
====================================*/

.equipamiento-grid article{

    animation:subir .8s ease both;

}

.equipamiento-grid article:nth-child(2){

    animation-delay:.08s;

}

.equipamiento-grid article:nth-child(3){

    animation-delay:.16s;

}

.equipamiento-grid article:nth-child(4){

    animation-delay:.24s;

}

.equipamiento-grid article:nth-child(5){

    animation-delay:.32s;

}

.equipamiento-grid article:nth-child(6){

    animation-delay:.40s;

}

.equipamiento-grid article:nth-child(7){

    animation-delay:.48s;

}

.equipamiento-grid article:nth-child(8){

    animation-delay:.56s;

}

@keyframes subir{

    from{

        opacity:0;

        transform:

        translateY(70px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}


/*====================================
        ICONOS FLOTANTES
====================================*/

.equipamiento-grid i{

    animation:floatIcon 5s ease-in-out infinite;

}

.equipamiento-grid article:nth-child(even) i{

    animation-duration:6s;

}

@keyframes floatIcon{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.equipamiento-grid h4{

    transition:.35s;

}

.equipamiento-grid article:hover h4{

    color:#C89C1F;

}


/*====================================
        CURSOR
====================================*/

.equipamiento-grid article{

    cursor:pointer;

}


/*====================================
        SCROLL SUAVE
====================================*/

html{

    scroll-behavior:smooth;

}


/*====================================
        SELECCIÓN
====================================*/

::selection{

    background:#C89C1F;

    color:#fff;

}

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

.galeria{

    position:relative;

    padding:170px 0;

    background:#ffffff;

    overflow:hidden;

}

.galeria .titulo{

    text-align:center;

    margin-bottom:80px;

}

.galeria .titulo span{

    color:var(--gold);

    letter-spacing:5px;

    font-size:.9rem;

    font-weight:700;

}

.galeria .titulo h2{

    margin-top:18px;

    font-size:3rem;

    color:#222;

    font-family:"Playfair Display",serif;

}

.galeria-grid{

    width:min(1300px,94%);

    margin:auto;

    display:grid;

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

    gap:25px;

}

.galeria-grid img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:28px;

    transition:.6s;

    cursor:pointer;

    box-shadow:

    0 18px 45px rgba(0,0,0,.08);

}

.galeria-grid img:nth-child(2){

    height:470px;

}

.galeria-grid img:nth-child(5){

    height:470px;

}

.galeria-grid img:hover{

    transform:

    scale(1.05)
    rotate(.8deg);

    box-shadow:

    0 30px 80px rgba(0,0,0,.18);

}


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

.equipamiento-grid article::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:

    linear-gradient(135deg,

    transparent,

    rgba(255,255,255,.6),

    transparent);

    opacity:0;

    transition:.5s;

}

.equipamiento-grid article{

    position:relative;

    overflow:hidden;

}

.equipamiento-grid article:hover::after{

    opacity:1;

    transform:translateX(100%);

}


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

@keyframes subir{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.equipamiento-grid article{

    animation:subir .8s ease both;

}

.galeria-grid img{

    animation:subir .9s ease both;

}

/*====================================
            RESERVA
====================================*/

.reservar{

    position:relative;

    padding:180px 0;

    background:
    radial-gradient(circle at top left,#FFF9EC 0%,transparent 35%),
    linear-gradient(180deg,#ffffff,#F8F5F0);

    overflow:hidden;

}

.reservar::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

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

    bottom:-320px;

    left:-220px;

}

.reservar .titulo{

    text-align:center;

    margin-bottom:80px;

}

.reservar .titulo span{

    color:var(--gold);

    letter-spacing:5px;

    font-weight:700;

}

.reservar .titulo h2{

    margin-top:18px;

    font-size:3rem;

    color:#1E1E1E;

    font-family:"Playfair Display",serif;

}


/*====================================
        TARJETA RESERVA
====================================*/

.reserva-card{

    width:min(1100px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:340px 1fr;

    overflow:hidden;

    border-radius:35px;

    background:#fff;

    box-shadow:

    0 35px 80px rgba(0,0,0,.08);

}


/*====================================
        PRECIO
====================================*/

.precio{

    position:relative;

    background:

    linear-gradient(145deg,

    #171717,

    #2A2A2A);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:60px 30px;

}

.precio::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(rgba(201,162,39,.30),transparent);

    top:-80px;

    right:-80px;

}

.precio h3{

    font-size:1rem;

    letter-spacing:3px;

    color:#d8d8d8;

    text-transform:uppercase;

}

.precio h1{

    margin:15px 0;

    font-size:5rem;

    color:var(--gold-light);

    font-family:"Playfair Display",serif;

}

.precio span{

    color:#bcbcbc;

    letter-spacing:2px;

}


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

.reserva-form{

    padding:60px;

}

.reserva-form label{

    display:block;

    margin-bottom:12px;

    font-weight:600;

    color:#444;

}

.reserva-form input{

    width:100%;

    padding:20px;

    margin-bottom:35px;

    border:none;

    border-radius:18px;

    background:#F8F5F0;

    font-size:1rem;

    color:#222;

    outline:none;

    transition:.35s;

    border:2px solid transparent;

}

.reserva-form input:focus{

    border-color:var(--gold);

    background:#fff;

    box-shadow:

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

}


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

.reserva-form button{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:22px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    background:

    linear-gradient(135deg,

    #B68918,

    var(--gold),

    #F6D978);

    transition:.45s;

}

.reserva-form button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    rgba(255,255,255,.4);

    transform:skewX(-30deg);

    transition:.8s;

}

.reserva-form button:hover::before{

    left:140%;

}

.reserva-form button:hover{

    transform:translateY(-6px);

    box-shadow:

    0 25px 50px rgba(201,162,39,.30);

}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content,

.descripcion-texto,

.info-grid article,

.equipamiento-grid article,

.galeria-grid img,

.reserva-card{

    animation:fadeUp .9s ease both;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.equipamiento-grid i{

    animation:float 4s ease-in-out infinite;

}


/*====================================
        SCROLLBAR
====================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F2F2F2;

}

::-webkit-scrollbar-thumb{

    border-radius:50px;

    background:

    linear-gradient(var(--gold),
    #A57C14);

}

::-webkit-scrollbar-thumb:hover{

    background:#D6B347;

}


/*====================================
        SELECCIÓN
====================================*/

::selection{

    background:var(--gold);

    color:#fff;

}

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

@media (max-width:992px){

    /* HERO */

    .hero-habitacion{
        min-height:85vh;
        padding-top:180px;
    }

    .hero-content{
        width:90%;
    }

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

    .hero-info{
        flex-wrap:wrap;
        gap:15px;
    }

    /* DESCRIPCIÓN */

    .descripcion{
        padding:120px 0;
    }

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

    .descripcion-imagen{
        order:-1;
    }

    .descripcion-texto{
        text-align:center;
    }

    .descripcion-texto h2{
        font-size:3rem;
    }

    .habitacion-beneficios{
        grid-template-columns:repeat(2,1fr);
    }

    /* INFORMACIÓN */

    .informacion{
        padding:80px 0 120px;
    }

    .info-card{
        grid-template-columns:repeat(2,1fr);
    }

    .info-card article{
        border-right:none;
    }

    /* EQUIPAMIENTO */

    .equipamiento{
        padding:120px 0;
    }

    .equipamiento .titulo h2{
        font-size:3rem;
    }

    .equipamiento-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* GALERÍA */

    .galeria{
        padding:120px 0;
    }

    .galeria-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .galeria-grid img{
        height:300px !important;
    }

    /* RESERVA */

    .reservar{
        padding:120px 0;
    }

    .reserva-card{
        grid-template-columns:1fr;
    }

    .precio{
        padding:50px;
    }

}

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

@media (max-width:768px){

    /* HEADER */

    .top-bar{
        padding:20px;
    }

    .logo{
        font-size:2rem;
    }

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

    /* HERO */

    .hero-habitacion{
        min-height:75vh;
        padding-top:140px;
    }

    .hero-content{
        width:90%;
    }

    .categoria{
        padding:10px 22px;
        font-size:.75rem;
        letter-spacing:3px;
    }

    .hero-content h1{
        font-size:2.6rem;
        line-height:1.2;
    }

    .hero-info{
        flex-direction:column;
        gap:10px;
        font-size:.95rem;
    }

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

    .hero-content a{
        padding:16px 35px;
        font-size:13px;
    }

    /* DESCRIPCIÓN */

    .descripcion{
        padding:80px 20px;
    }

    .descripcion-grid{
        gap:40px;
    }

    .descripcion-texto{
        text-align:center;
    }

    .descripcion-texto h2{
        font-size:2.2rem;
    }

    .descripcion-texto p{
        font-size:15px;
    }

    .habitacion-beneficios{
        grid-template-columns:1fr;
        gap:15px;
    }

    .habitacion-beneficios li{
        padding:18px;
    }

    .habitacion-beneficios i{
        width:50px;
        height:50px;
        font-size:1rem;
    }

    .descripcion-imagen{
        padding:15px;
    }

    .descripcion-imagen::after{
        display:none;
    }

    /* INFORMACIÓN */

    .informacion{
        padding:80px 20px;
    }

    .info-card{
        grid-template-columns:1fr;
    }

    .info-card article{
        padding:35px 25px;
    }

    .info-card i{
        width:70px;
        height:70px;
        font-size:1.6rem;
    }

    .info-card h3{
        font-size:1rem;
    }

    /* EQUIPAMIENTO */

    .equipamiento{
        padding:80px 20px;
    }

    .equipamiento .titulo{
        margin-bottom:50px;
    }

    .equipamiento .titulo h2{
        font-size:2.2rem;
    }

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

    .equipamiento-grid article{
        padding:35px 25px;
    }

    .equipamiento-grid i{
        width:75px;
        height:75px;
        font-size:1.7rem;
    }

    .equipamiento-grid h4{
        font-size:1rem;
    }

    /* GALERÍA */

    .galeria{
        padding:80px 20px;
    }

    .galeria .titulo h2{
        font-size:2.2rem;
    }

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

    .galeria-grid img{
        height:260px !important;
    }

    /* RESERVA */

    .reservar{
        padding:80px 20px;
    }

    .reservar .titulo{
        margin-bottom:50px;
    }

    .reservar .titulo h2{
        font-size:2.2rem;
    }

    .reserva-card{
        grid-template-columns:1fr;
    }

    .precio{
        padding:40px 25px;
    }

    .precio h1{
        font-size:4rem;
    }

    .reserva-form{
        padding:35px 25px;
    }

    .reserva-form input{
        padding:18px;
        margin-bottom:25px;
    }

    .reserva-form button{
        padding:18px;
        font-size:.9rem;
    }

}