/* Adaptación a móvil y tableta. Las páginas vienen de tableros de diseño de
   1280px de ancho fijo con estilos en línea; aquí se anulan con !important. */

@media (max-width: 1320px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .wrap { width: 100% !important; max-width: 100% !important; box-shadow: none !important; }
}

@media (max-width: 900px) {
  /* una sola columna */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  /* márgenes laterales cómodos */
  .sec { padding-left: 20px !important; padding-right: 20px !important; }
  .sec[style*="padding: 18px"] { padding-top: 14px !important; padding-bottom: 14px !important; }

  /* la línea punteada de la formación no tiene sentido en columna */
  .sec svg[preserveAspectRatio] { display: none !important; }

  /* tipografía */
  [style*="font-size: 62px"], [style*="font-size: 58px"] { font-size: 34px !important; line-height: 1.12 !important; }
  [style*="font-size: 50px"], [style*="font-size: 48px"] { font-size: 30px !important; line-height: 1.14 !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"] { font-size: 26px !important; line-height: 1.18 !important; }
  [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 24px !important; line-height: 1.2 !important; }
  [style*="font-size: 28px"], [style*="font-size: 27px"] { font-size: 22px !important; }
  [style*="font-size: 26px"], [style*="font-size: 25px"] { font-size: 21px !important; }
  [style*="font-size: 23px"], [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size: 19px"], [style*="font-size: 18px"] { font-size: 16.5px !important; }
  [style*="font-size: 17.5px"], [style*="font-size: 17px"] { font-size: 16px !important; }

  /* nada se sale */
  img { max-width: 100% !important; height: auto !important; }
  /* ...pero el logo mantiene su altura, si no ocupa media pantalla */
  .cabecera img { height: 42px !important; width: auto !important; max-width: none !important; }
  * { min-width: 0; }
}

@media (max-width: 720px) {
  /* cabecera: logo arriba, resto debajo y centrado */
  .cabecera { flex-wrap: wrap !important; gap: 10px 14px !important; justify-content: center !important; }
  .cabecera > div { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
  .cabecera img { height: 38px !important; }
  /* el nombre no se separa del logo */
  .cabecera > div:first-child { flex: 0 0 auto !important; }
  /* pie en columna */
  .pie { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  .pie > div { flex-wrap: wrap !important; gap: 12px !important; }
  /* botones a ancho completo, más fáciles de pulsar */
  a[href*="wa.me"] { justify-content: center !important; }
  .sec > div > a[href*="wa.me"], .sec > a[href*="wa.me"] { width: 100% !important; box-sizing: border-box !important; }
}