/* ══════════════════════════════════════════════════════════════════════════
   responsive.css
   Ajustes por tamaño de pantalla e impresión
   Procede de styles.css (secciones 16) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 16. AJUSTES RESPONSIVE PUNTUALES ═══════════════ */

/* 320–480 px — prioridad máxima */
@media (max-width: 480px) {
  .titulo-hero { letter-spacing: 0; }
  .tarjeta-area, .formulario, .tarjeta-contacto { padding: 1.25rem; }
  .tarjeta-destacada { padding: 1.5rem 1.25rem; }
  .aviso-distincion { font-size: 0.85rem; }
  .acordeon__boton { font-size: 0.94rem; padding: 1rem 0.95rem; }
}

/* Evita que el CTA de la cabecera apriete al sello en 320px. */
@media (max-width: 359px) {
  .boton-wa--cabecera { padding-inline: 0.7rem; font-size: 0.82rem; }
}

/* Impresión: ya partimos de fondo claro, sólo se retira lo flotante. */
@media print {
  .cabecera, .wa-flotante, .menu-movil, .salto-contenido { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}