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

@media (max-width: 1100px) {

    .container {
        width: 92%;
    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero {
        min-height: 90vh;
    }

    .hero h1 {
        font-size: 5rem;
    }


    /*----------------------------------------------
        DATOS HERO
    ----------------------------------------------*/

    .hero-data {
        max-width: 760px;
    }


    /*----------------------------------------------
        BENEFITS
    ----------------------------------------------*/

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


    /*----------------------------------------------
        ABOUT
    ----------------------------------------------*/

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

        gap: 50px;
    }

    .about-image img {
        height: 520px;
    }

    .about-content h2 {
        font-size: 3.2rem;
    }


    /*----------------------------------------------
        CARACTERÍSTICAS
    ----------------------------------------------*/

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


    /*----------------------------------------------
        AMENIDADES
    ----------------------------------------------*/

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


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

    .gallery-grid {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            300px 300px 300px;
    }

    .gallery-item.large {
        grid-row:
            auto;

        grid-column:
            1 / 3;
    }

}


/*==================================================
    MOBILE
==================================================*/

@media (max-width: 768px) {

    section {
        padding: 90px 0;
    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero {
        min-height: 100vh;

        padding:
            100px 0 70px;
    }

    .hero-content {
        width: 90%;
    }

    .subtitle {
        font-size: .75rem;

        letter-spacing: 3px;
    }

    .hero h1 {
        font-size:
            clamp(3.5rem, 16vw, 5rem);

        margin-bottom: 25px;
    }

    .hero p {
        font-size: .95rem;

        line-height: 1.8;

        margin-bottom: 35px;
    }


    /*----------------------------------------------
        BOTONES
    ----------------------------------------------*/

    .hero-buttons {
        flex-direction: column;

        align-items: center;

        gap: 12px;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline {
        width: 100%;

        max-width: 330px;

        padding:
            16px 25px;
    }


    /*----------------------------------------------
        DATOS HERO
    ----------------------------------------------*/

    .hero-data {

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

        margin-top: 40px;

    }

    .hero-data div {

        padding:
            18px 10px;
    }

    .hero-data div:nth-child(2)::after {
        display: none;
    }

    .hero-data div:nth-child(1),
    .hero-data div:nth-child(2) {

        border-bottom:
            1px solid
            rgba(255,255,255,.25);

    }

    .hero-data strong {

        font-size: 1.8rem;
    }

    .hero-data span {

        font-size: .62rem;

        letter-spacing: 1px;
    }


    /*----------------------------------------------
        SECTION TITLE
    ----------------------------------------------*/

    .section-title {

        margin-bottom: 55px;
    }

    .section-title span {

        font-size: .75rem;

        letter-spacing: 3px;
    }

    .section-title h2 {

        font-size: 2.7rem;
    }

    .section-title p {

        font-size: .95rem;

        line-height: 1.8;
    }


    /*----------------------------------------------
        BENEFITS
    ----------------------------------------------*/

    .benefits-grid {

        grid-template-columns:
            1fr;

        gap: 20px;
    }

    .benefit-card {

        padding:
            40px 25px;
    }

    .benefit-card h3 {

        font-size: 1.8rem;
    }


    /*----------------------------------------------
        ABOUT
    ----------------------------------------------*/

    .about-container {

        grid-template-columns:
            1fr;

        gap: 50px;
    }

    .about-image {

        order: 1;
    }

    .about-content {

        order: 2;

        max-width: none;
    }

    .about-image img {

        height: 400px;
    }

    .about-content h2 {

        font-size: 2.8rem;
    }

    .about-content p {

        font-size: .95rem;

        line-height: 1.8;
    }


    /*----------------------------------------------
        CARACTERÍSTICAS
    ----------------------------------------------*/

    .features-grid {

        grid-template-columns:
            1fr;

        gap: 15px;
    }

    .feature-item {

        min-height: 85px;

        padding: 20px;
    }

    .feature-item span {

        font-size: .9rem;
    }


    /*----------------------------------------------
        AMENIDADES
    ----------------------------------------------*/

    .amenities-section
    .benefits-grid {

        grid-template-columns:
            1fr;
    }


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

    .gallery-grid {

        display: grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(5, 260px);

        gap: 15px;
    }

    .gallery-item.large {

        grid-column:
            auto;

        grid-row:
            auto;
    }


    /*----------------------------------------------
        ESPACIOS
    ----------------------------------------------*/

    .spaces-grid {

        grid-template-columns:
            1fr;
    }

    .space-card img {

        height: 300px;
    }

    .space-content {

        padding: 30px 25px;
    }

    .space-content h3 {

        font-size: 2.2rem;
    }

    .space-content ul {

        grid-template-columns:
            1fr;

        gap: 12px;
    }

    .price {

        font-size: 2rem;
    }


    /*----------------------------------------------
        MODAL
    ----------------------------------------------*/

    .modal {

        padding: 12px;
    }

    .modal-content {

        width: 100%;

        max-height: 94vh;

        padding:
            40px 22px 30px;
    }

    .modal-header {

        margin-bottom: 30px;
    }

    .modal-header h2 {

        font-size: 2.5rem;
    }

    .modal-header p {

        font-size: .9rem;

        line-height: 1.7;
    }

    .close-modal {

        top: 12px;

        right: 15px;

        font-size: 1.8rem;
    }


    /*----------------------------------------------
        FORMULARIO
    ----------------------------------------------*/

    .contact-form {

        gap: 16px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {

        padding: 16px;

        font-size: .95rem;
    }

    .contact-form textarea {

        min-height: 120px;
    }

    .form-check {

        font-size: .75rem;
    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width: 480px) {

    section {

        padding: 75px 0;
    }


    /*----------------------------------------------
        HERO
    ----------------------------------------------*/

    .hero {

        padding:
            90px 0 50px;
    }

    .hero h1 {

        font-size:
            3.6rem;
    }

    .hero p {

        font-size: .9rem;
    }


    /*----------------------------------------------
        DATOS HERO
    ----------------------------------------------*/

    .hero-data {

        margin-top: 30px;
    }

    .hero-data strong {

        font-size: 1.55rem;
    }

    .hero-data span {

        font-size: .58rem;
    }


    /*----------------------------------------------
        SECTION TITLES
    ----------------------------------------------*/

    .section-title h2 {

        font-size: 2.35rem;
    }


    /*----------------------------------------------
        ABOUT
    ----------------------------------------------*/

    .about-image img {

        height: 300px;
    }

    .about-content h2 {

        font-size: 2.4rem;
    }


    /*----------------------------------------------
        BENEFITS
    ----------------------------------------------*/

    .benefit-card {

        padding:
            35px 20px;
    }


    /*----------------------------------------------
        FEATURES
    ----------------------------------------------*/

    .feature-item {

        padding:
            17px;
    }

    .feature-item i {

        width: 42px;

        height: 42px;

        min-width: 42px;

        font-size: 16px;
    }


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

    .gallery-grid {

        grid-template-rows:
            repeat(5, 220px);
    }


    /*----------------------------------------------
        CARD
    ----------------------------------------------*/

    .space-card img {

        height: 240px;
    }

    .space-content {

        padding:
            25px 20px;
    }

    .space-content h3 {

        font-size: 2rem;
    }

    .price {

        font-size: 1.8rem;
    }


    /*----------------------------------------------
        MODAL
    ----------------------------------------------*/

    .modal-content {

        padding:
            40px 18px 25px;
    }

    .modal-header h2 {

        font-size: 2.2rem;
    }

    .modal-header span {

        letter-spacing: 3px;

        font-size: .75rem;
    }

}