/* ==========================================================================
   CONTACT CHANNELS — Contacto v2 — DIGART Studio
   Pattern: Contact Channels

   Referencia documental:
     docs/002-information-architecture.md (D-042, entrada "Contacto")
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 4.3
     Columnas, 8.3 Cards, 10 Tipografía, 12 Iconografía, 17 Sistema de
     Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid, .l-col-4,
   .l-col-8). No declara valores independientes de espaciado, tipografía,
   borde ni punto de quiebre. Dos únicos colores de acento por tarjeta:
   --color-success para el CTA de WhatsApp (extiende al CTA la misma
   excepción de color de marca ya documentada para el icono reutilizado
   assets/icons/whatsapp.svg en whatsapp-contact.php — el Catálogo de
   Botones no define una variante verde) y --color-error para el CTA de
   correo (mismo acento rojo institucional ya usado en todo el sitio,
   p. ej. specialties-sectors__link). Ninguno es un color arbitrario
   nuevo: ambos son categorías ya oficiales de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.contact-channels {
  padding-block: var(--space-8);
  background-color: var(--color-background-subtle);
}

.contact-channels__grid {
  align-items: start;
}

/* --------------------------------------------------------------------
   2. Elements — columna editorial
   -------------------------------------------------------------------- */
.contact-channels__intro-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------
   3. Elements — tarjetas
   -------------------------------------------------------------------- */
.contact-channels__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.contact-channels__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-background-default);
  border-radius: var(--border-radius-md);
  box-shadow: var(--elevation-1);
}

.contact-channels__card-icon {
  width: var(--space-7);
  height: var(--space-7);
}

.contact-channels__card--email .contact-channels__card-icon {
  color: var(--color-error);
}

.contact-channels__card-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.contact-channels__card-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   4. Elements — CTA diferenciados por canal
   -------------------------------------------------------------------- */
.contact-channels__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.contact-channels__cta--whatsapp {
  color: var(--color-success);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width-thick) var(--border-style-solid) var(--color-success);
  border-radius: var(--border-radius-sm);
}

.contact-channels__cta--email {
  color: var(--color-error);
}

/* --------------------------------------------------------------------
   5. Variants
   Sección reservada: este Pattern no define variantes.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. States
   -------------------------------------------------------------------- */
.contact-channels__cta--whatsapp:hover,
.contact-channels__cta--whatsapp:focus-visible {
  background-color: var(--color-success-subtle);
}

.contact-channels__cta--email:hover,
.contact-channels__cta--email:focus-visible {
  text-decoration: underline;
}

.contact-channels__cta:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-interactive-focus);
  outline-offset: var(--space-1);
}

/* --------------------------------------------------------------------
   7. Motion Hooks
   Sin disparador funcional propio ni JavaScript; el contenido se presenta
   directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. Responsive
   Sistema Responsive (Cap. 11). El remapeo oficial de spans (RWD-08,
   layout.css) ya linealiza .l-col-4/.l-col-8 en una sola columna de
   ancho completo: título, tarjeta WhatsApp y tarjeta correo se apilan en
   ese orden. Las dos tarjetas dentro de .contact-channels__cards (Grid
   local, no .l-col-*) también colapsan a una columna en el mismo umbral.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .contact-channels__cards {
    grid-template-columns: 1fr;
  }
}