/* =========================
   TABLETS Y NOTEBOOKS
========================= */

@media (max-width: 1024px){

  section{
    padding:80px 6%;
  }

  .hero-content h1{
    font-size:4rem;
  }

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

  .cabins-grid{
    grid-template-columns:1fr;
    max-width:650px;
    margin:0 auto;
  }

  .gallery-grid{
    columns:2;
  }

  .location-content{
    grid-template-columns:1fr;
    gap:50px;
  }

  .location-text{
    text-align:center;
  }

  .modal-content{
    grid-template-columns:1fr;
    max-height:90vh;
    overflow-y:auto;
  }

}


/* =========================
   MOVILES
========================= */

@media (max-width: 768px){

  html,
  body{
    overflow-x:hidden;
  }

  section{
    padding:65px 20px;
  }

  /* HEADER */

  .header{
    padding:14px 20px;
  }

  .header.scrolled{
    padding:12px 20px;
  }

  .logo{
    font-size:1.9rem;
  }

  .nav-links{
    display:none !important;
  }

  .menu-btn{
    display:block !important;
  }

  /* HERO */

  .hero{
    padding:0 20px;
  }

  .hero-content{
    max-width:100%;
  }

  .hero-content h1{
    font-size:2.3rem;
    line-height:1.05;
    margin-bottom:15px;
  }

  .hero-content p{
    font-size:1rem;
    line-height:1.6;
    margin-bottom:25px;
  }

  .hero-btn{
    padding:14px 30px;
  }

  /* TITULOS */

  .section-title{
    margin-bottom:35px;
  }

  .section-title h2{
    font-size:2rem;
    line-height:1.15;
  }

  .about-content h2,
  .location-text h2{
    font-size:2rem;
    line-height:1.15;
  }

    .about{
    display:flex;
    flex-direction:column;
  }

  .about-image{
    order:1;
  }

  .about-content{
    order:2;
    text-align:left;
  }

  .about-image img{
    height:280px;
    object-fit:cover;
  }


  /* CABAÑAS */

  .cabins-grid{
    grid-template-columns:1fr !important;
    max-width:100%;
  }

  .cabin-card{
    width:100%;
  }

  .cabin-card img{
    height:220px;
  }

  /* GALERIA */

  .gallery-grid{
    columns:1;
  }

  /* UBICACION */

    .location-content{
    display:flex;
    flex-direction:column;
    gap:30px;
  }

    .location-text{
    width:100%;
    text-align:left;
  }

  .location-text p{
    word-break:break-word;
  }

  /* CONTACTO */

  .contact-buttons{
    flex-direction:column;
    align-items:center;
  }

  .contact-buttons a{
    width:100%;
    max-width:320px;
    text-align:center;
  }

    .location-map{
    width:100%;
  }

  .location-map iframe{
    width:100%;
    height:300px;
  }

  /* MODAL */

  .cabin-modal{
    padding:10px;
  }

  .modal-content{
    display:flex;
    flex-direction:column;

    width:100%;
    max-width:100%;

    max-height:92vh;

    overflow-y:auto;
  }

  .modal-gallery{
    padding:12px;
  }

  .main-image{
    height:240px;
  }

  .thumb{
    width:60px;
    height:60px;
    min-width:60px;
  }

  .thumb-btn{
    width:34px;
    height:34px;
  }

  .modal-info{
    padding:20px;
  }

  .modal-info h2{
    font-size:1.8rem;
  }

  .modal-btn{
    width:100%;
    text-align:center;
  }

}


/* =========================
   TELEFONOS PEQUEÑOS
========================= */

@media (max-width: 480px){

  section{
    padding:55px 18px;
  }

  .logo{
    font-size:1.6rem;
  }

  .hero-content h1{
    font-size:2.3rem;
    line-height:1;
  }

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

  .section-title h2{
    font-size:1.8rem;
  }

  .about-content h2,
  .location-text h2{
    font-size:1.8rem;
  }

  .cabin-card img{
    height:190px;
  }

  .main-image{
    height:200px;
  }

  .thumb{
    width:50px;
    height:50px;
    min-width:50px;
  }

  .close-modal{
    top:10px;
    right:15px;
  }

}