@media (max-width: 768px) {
  

  body, html {
    font-size: 90%; /* escalar todo un poco en móvil */
     text-align: center;
    
  }

  .header-tabs {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }


  .logo {
    display:none;
  }

  .clock {
    display:none;
  }

  .title-block {
    margin: 10px 0;
  }

  .nombreW {
    font-size: 200%;
    
  }

    #MenuDescargas {
      display: none;
    }
  

  .weather-summary {
    font-size: 0.8rem;
    margin: 10px;
    width: 80%;
  }

  .form-row {
    flex-direction: column;
    gap: 8px;
  }

  .form-row input[type="number"],
  .form-row select,
  .form-row input[type="date"] {
     width: 120px;
  max-width: 85%;
     white-space: nowrap; 
  }




  .index-toggle-btn,
  .suggestions-btn {
    padding: 8px 12px;
    font-size: 14px;
  }

  #index-menu {
    width: 80vw;
    font-size: 90%;
  }

  #index-menu button {
    padding: 12px;
    font-size: 95%;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.9em;
    gap: 10px;
  }

  .footer-left, .footer-right {
    width: 100%;
    text-align: left;
  }

  .toast {
    width: 90vw;
    max-width: none;
    font-size: 90%;
  }

  .toast-top-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .buttonGeneral,
  .buttonGeneralMapa {
    width: 90%;
    font-size: 100%;
    padding: 8px;
  }

  h2 {
  color: var(--color-azul-claro);
  font-family: Poppins, Geneva, Tahoma, sans-serif;
  padding: 1% 0;
}

  #windyFrame2{
 display: block; 
 visibility: visible; 
 width: 80%; 
 height: 187px; 
 max-width: 700px; 
 border: none; border-radius: 8px; 
 margin: auto;
}


  #windyFrame{
 display: block; 
 visibility: visible; 
 width: 80%; 
 max-width: 700px; 
}


}