/* ==========================================================
   Trembling Light — capa adaptativa (moviles y tabletas)
   No toca el diseno de escritorio: todo vive dentro de la
   media query salvo la regla de imagenes fluidas.
   ========================================================== */

img { max-width: 100%; height: auto; }

@media (max-width: 960px) {

  html, body { max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }

  /* El sitio se maqueta con tablas de 920px fijos: en movil se apilan */
  table, tbody, tr, td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  td { text-align: center !important; padding: 4px 8px; }

  /* Celdas espaciadoras: en vertical no pintan nada */
  td[width="30"], td[width="10"], td[width="20"] { display: none !important; }

  /* Menu de navegacion: enlaces mas grandes para el dedo */
  td a { display: inline-block; padding: 6px 4px; }

  /* Carrusel: se escala completo desde js/responsive.js */
  .tl-carrusel { width: 100%; overflow: hidden; }
  .tl-carrusel #slider_container_3 { float: none !important; }

  /* Videos de YouTube: proporcion 16:9 fluida */
  iframe[src*="youtube"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

  /* Nada puede desbordar el ancho de pantalla */
  * { max-width: 100%; box-sizing: border-box; }
}