/* =====================================================================
   RESPONSIVE — CONTÁCTANOS (.contact-page, prefijo contact-)
   ---------------------------------------------------------------------
   Scope: .rsp (solo páginas adaptadas).
   Móvil:  < 768px · Tablet: 768px – 1199.98px · Desktop (≥1200px) intacto.
   Esta página ya está maquetada en flujo (no usa el lienzo 1440px),
   por lo que aquí solo se afinan tipografía fluida, paddings,
   apilado de tarjetas y el modal para pantallas táctiles.
   No hay formulario en esta página: los canales de contacto son
   tarjetas-enlace (tel/WhatsApp/mailto/FAQ) que se apilan en móvil.
   ===================================================================== */

/* ────────────────────────────────────────────────────────────────────
   COMÚN (móvil + tablet)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

  /* ═══ SECCIÓN: HERO ═══ */
  .rsp .contact-hero {
    min-height: 0; /* el alto lo define el contenido + padding */
  }

  /* ═══ SECCIÓN: CANALES DE CONTACTO ═══ */
  /* Sub-texto largo (email) sin desbordes en anchos estrechos */
  .rsp .contact-card-sub {
    overflow-wrap: anywhere;
  }

  /* Área táctil ≥44px en el enlace de la nota inferior */
  .rsp .contact-bottom-note a {
    display: inline-block;
    padding: 12px 8px;
  }

  /* ═══ MODAL: LLAMAR A SOPORTE ═══ */
  /* Botón de cierre con área táctil ≥44px */
  .rsp .contact-modal-close {
    width: 44px;
    height: 44px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   MÓVIL (< 768px)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ═══ SECCIÓN: HERO ═══ */
  .rsp .contact-hero {
    padding: 118px 24px 56px;
  }

  .rsp .contact-hero-subtitle {
    font-size: clamp(18px, 5vw, 22px);
  }

  .rsp .contact-hero-title {
    font-size: clamp(40px, 12vw, 52px);
  }

  .rsp .contact-hero-desc {
    font-size: clamp(16px, 4.4vw, 18px);
  }

  /* ═══ SECCIÓN: CANALES DE CONTACTO ═══ */
  .rsp .contact-wrap {
    padding: 56px 24px 72px;
  }

  /* Tarjetas apiladas a una columna */
  .rsp .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rsp .contact-card {
    gap: 16px;
    padding: 20px 18px;
    border-radius: 20px;
  }

  .rsp .contact-card-ico-wrap {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .rsp .contact-card-ico {
    width: 24px;
    height: 24px;
  }

  .rsp .contact-card-label {
    font-size: clamp(18px, 5vw, 20px);
  }

  .rsp .contact-card-sub {
    font-size: 14px;
  }

  /* ═══ NOTA INFERIOR ═══ */
  .rsp .contact-bottom-note {
    margin-top: 24px;
    font-size: 16px;
  }

  /* ═══ MODAL: LLAMAR A SOPORTE ═══ */
  .rsp .contact-modal {
    padding: 16px;
  }

  .rsp .contact-modal-panel {
    padding: 32px 22px 24px;
    border-radius: 24px;
  }

  .rsp .contact-modal-title {
    font-size: clamp(18px, 5vw, 20px);
    margin-bottom: 20px;
  }

  /* Números: botón a ancho completo, altura táctil ≥48px */
  .rsp .contact-modal-numbers a {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 14px 18px;
    font-size: clamp(18px, 5.2vw, 20px);
  }
}

/* ────────────────────────────────────────────────────────────────────
   TABLET (768px – 1199.98px)
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ═══ SECCIÓN: HERO ═══ */
  .rsp .contact-hero {
    padding: 150px 48px 80px;
  }

  .rsp .contact-hero-subtitle {
    font-size: 24px;
  }

  .rsp .contact-hero-title {
    font-size: clamp(52px, 7vw, 64px);
  }

  /* ═══ SECCIÓN: CANALES DE CONTACTO ═══ */
  /* Se mantienen las 2 columnas del desktop, con respiración ajustada */
  .rsp .contact-wrap {
    padding: 96px 48px 120px;
  }

  .rsp .contact-grid {
    gap: 20px;
  }

  .rsp .contact-card {
    padding: 24px;
  }
}