/* ==========================================================
   RESPONSIVE INFO PRACTICA (HOSPEDAJE / CLIMA / TRANSPORTE)
   SOLO CONTENIDO (Hero, menú y footer ya están responsivos)
========================================================== */

/* -------------------------------
   AJUSTE GENERAL
-------------------------------- */
@media (max-width: 992px) {

  .info-practica-section{
    padding: 70px 0;
  }

  .info-title h2{
    font-size: 32px;
  }

  .info-title p{
    font-size: 16px;
  }

  .info-card{
    padding: 28px 20px;
  }

  .info-card h4{
    font-size: 20px;
  }

  .info-card p{
    font-size: 14px;
  }

  .info-btn{
    font-size: 13px;
    padding: 9px 18px;
  }

}


/* -------------------------------
   TABLET / MOVIL GRANDE
-------------------------------- */
@media (max-width: 768px) {

  .info-practica-section{
    padding: 60px 0;
  }

  .info-title h2{
    font-size: 28px;
  }

  .info-title p{
    font-size: 15px;
    line-height: 1.6;
  }

  .info-icon{
    width: 65px;
    height: 65px;
  }

  .info-icon i{
    font-size: 28px;
  }

  .info-card{
    padding: 26px 18px;
    border-radius: 18px;
  }

  .info-card h4{
    font-size: 19px;
  }

  .info-card p{
    font-size: 14px;
  }


  /* ==============================
     HOTELES RESPONSIVO
  ============================== */

  .hotel-card{
    border-radius: 18px;
  }

  .hotel-body{
    padding: 18px;
  }

  .hotel-body h4{
    font-size: 18px;
  }

  .hotel-desc{
    font-size: 14px;
    line-height: 1.6;
  }

  .hotel-services span{
    font-size: 12px;
    padding: 6px 10px;
  }

  .hotel-info{
    font-size: 13px;
  }

  .hotel-buttons{
    flex-direction: column;
    gap: 10px;
  }

  .hotel-btn,
  .hotel-btn-outline{
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    font-size: 13px;
  }


  /* ==============================
     CLIMA RESPONSIVO
  ============================== */

  .weather-hero{
    padding: 22px;
    border-radius: 20px;
  }

  .weather-content{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .weather-left h2{
    font-size: 1.5rem;
  }

  #weather-temp{
    font-size: 2.7rem;
  }

  .weather-left p{
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .weather-stats{
    width: 100%;
    min-width: unset;
  }

  .weather-stat{
    padding: 12px 14px;
    border-radius: 16px;
  }

  .weather-stat strong{
    font-size: 0.95rem;
  }

  .weather-stat span{
    font-size: 0.75rem;
  }

  .weather-card{
    padding: 18px;
    border-radius: 18px;
  }

  .weather-card-title{
    font-size: 0.95rem;
  }

  .hour-item{
    min-width: 85px;
    padding: 12px 8px;
    border-radius: 16px;
  }

  .hour-time{
    font-size: 0.8rem;
  }

  .hour-temp{
    font-size: 0.85rem;
  }

  .weather-chart-wrapper{
    height: 230px;
  }

}


/* -------------------------------
   CELULAR
-------------------------------- */
@media (max-width: 576px) {

  .info-title h2{
    font-size: 24px;
  }

  .info-title p{
    font-size: 14px;
  }

  .info-card{
    padding: 22px 18px;
  }

  .info-card h4{
    font-size: 18px;
  }

  .info-card p{
    font-size: 13px;
  }

  .info-btn{
    font-size: 12.5px;
    padding: 9px 16px;
  }


  /* ==============================
     HOTELES CELULAR
  ============================== */
  .hotel-body h4{
    font-size: 17px;
  }

  .hotel-desc{
    font-size: 13px;
  }

  .hotel-info{
    font-size: 12.8px;
  }


  /* ==============================
     CLIMA CELULAR
  ============================== */
  .weather-left h2{
    font-size: 1.35rem;
  }

  #weather-temp{
    font-size: 2.4rem;
  }

  .weather-icon-pro{
    font-size: 2.2rem;
  }

  .weather-card-title{
    font-size: 0.9rem;
  }

  .weather-chart-wrapper{
    height: 210px;
  }

  .hour-item{
    min-width: 78px;
    padding: 11px 8px;
  }

  .hour-icon{
    font-size: 1.3rem;
  }


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

  .transporte-body{
    padding: 18px;
  }

  .transporte-body h4{
    font-size: 17px;
  }

  .transporte-desc{
    font-size: 13.5px;
    line-height: 1.6;
  }

  .transporte-list li{
    font-size: 13px;
  }

  .direccion-link{
    font-size: 13px;
  }

  .transporte-btn{
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 10px 14px;
  }

}

@media (max-width: 768px){
  .info-title h2{
    font-size: 32px;
  }

  .detalle-header h3{
    font-size: 28px;
  }

  .info-title p,
  .detalle-header p{
    font-size: 15px;
  }
}

@media (max-width: 576px){
  .info-title h2{
    font-size: 26px;
  }

  .detalle-header h3{
    font-size: 23px;
  }

  .info-title p,
  .detalle-header p{
    font-size: 14px;
  }
}