/* ==========================================================================
   CONTACT FORM — Contacto v2 — DIGART Studio
   Pattern: Contact Form

   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, 10 Tipografía, 11 Sistema Cromático, 12 Iconografía, 17
     Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width, .l-container,
   .l-grid, .l-col-4, .l-col-8). No declara valores independientes de
   color, tipografía, espaciado, borde, sombra, tiempo, easing ni punto de
   quiebre. Los Componentes oficiales Inputs y Formularios (P-02 §13,
   8.2/8.5) aún no existen en el Catálogo: los campos de este formulario
   se estilan aquí de forma directa, sin crear un Componente nuevo (fuera
   de alcance de este sprint), consumiendo exclusivamente Foundations.
   Focus resuelto mediante el Token oficial --color-interactive-focus (11,
   "Focus"), obligatorio en todo elemento interactivo.

   Corrección visual (mockup de referencia): Full Width Container de fondo
   oscuro (mismo Token de fondo inverso ya usado en Hero/Call To Action de
   la Home) con columna editorial izquierda (texto inverso, acento rojo,
   mensaje de confianza con icono lineal) y tarjeta clara a la derecha que
   aloja el formulario, con borde suave, radio ya oficial (--border-radius-lg)
   y sombra discreta (--elevation-2, sin sombras pesadas). Fila
   Nombre/Correo en un Grid local de dos columnas
   (.contact-form__row), colapsado a una columna en el mismo umbral que el
   resto del Sistema Responsive.
   ========================================================================== */

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

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

/* --------------------------------------------------------------------
   2. Elements — columna editorial
   -------------------------------------------------------------------- */
.contact-form__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--space-8) + var(--space-6));
}

.contact-form__intro-accent {
  display: block;
  width: var(--space-7);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
}

.contact-form__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-inverse);
}

.contact-form__intro-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-overlay-inverse);
}

.contact-form__trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

.contact-form__trust-icon {
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-error);
}

/* --------------------------------------------------------------------
   3. Elements — tarjeta clara del formulario
   -------------------------------------------------------------------- */
.contact-form__card {
  background-color: var(--color-background-default);
  border: var(--border-width-default) var(--border-style-solid) var(--color-border-subtle);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--elevation-2);
  padding: var(--space-7);
}

/* --------------------------------------------------------------------
   4. Elements — mensaje flash (éxito/error)
   -------------------------------------------------------------------- */
.contact-form__flash {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  padding: var(--space-4);
  border-radius: var(--border-radius-md);
  margin-block-end: var(--space-6);
}

.contact-form__flash--success {
  color: var(--color-success);
  background-color: var(--color-success-subtle);
  border: var(--border-width-default) var(--border-style-solid) var(--color-success-border);
}

.contact-form__flash--error {
  color: var(--color-error);
  background-color: var(--color-error-subtle);
  border: var(--border-width-default) var(--border-style-solid) var(--color-error-border);
}

/* --------------------------------------------------------------------
   5. Elements — campos del formulario
   -------------------------------------------------------------------- */
.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

.contact-form__input {
  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-primary);
  background-color: var(--color-surface-default);
  border: var(--border-width-default) var(--border-style-solid) var(--color-border-default);
  border-radius: var(--border-radius-sm);
  padding: var(--space-3) var(--space-4);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form__input::placeholder {
  color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------
   6. Elements — casilla de aceptación y aviso legal
   -------------------------------------------------------------------- */
.contact-form__field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-form__checkbox {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  margin-block-start: var(--space-1);
  border: var(--border-width-default) var(--border-style-solid) var(--color-border-strong);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-surface-default);
  cursor: pointer;
  accent-color: var(--color-error);
}

.contact-form__checkbox:checked {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

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

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

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

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

/* --------------------------------------------------------------------
   7. Elements — honeypot (oculto, fuera del recorrido real de la persona)
   -------------------------------------------------------------------- */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------
   8. Elements — franja de cierre editorial
   Franja compacta entre el formulario y el Footer, montada directamente
   en public/contacto.php (sin Pattern adicional, fuera de alcance de
   este sprint): reutiliza el espacio de nombres de este archivo por ser
   la corrección visual más cercana en el ensamblado de la página.
   -------------------------------------------------------------------- */
.contact-form__closing-band {
  padding-block: var(--space-6);
  background-color: var(--color-background-subtle);
}

.contact-form__closing-container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contact-form__closing-accent {
  flex-shrink: 0;
  display: block;
  width: var(--space-7);
  height: var(--border-width-thick);
  border-radius: var(--border-radius-full);
  background-color: var(--color-error);
}

.contact-form__closing-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

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

/* --------------------------------------------------------------------
   10. States
   Focus resuelto mediante el Token oficial --color-interactive-focus
   (11, "Focus"), obligatorio en todo elemento interactivo; Disabled no
   aplica a ningún campo de este formulario.
   -------------------------------------------------------------------- */
.contact-form__input:focus-visible,
.contact-form__checkbox:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-interactive-focus);
  outline-offset: var(--space-1);
}

/* --------------------------------------------------------------------
   11. Motion Hooks
   Sin disparador funcional propio: los cambios de estado de foco usan
   Motion Tokens ya resueltos por el navegador de forma nativa; sin
   animación adicional.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   12. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css. El
   remapeo oficial de spans (RWD-08, layout.css) ya linealiza
   .l-col-4/.l-col-8 en una sola columna de ancho completo (columna
   editorial primero, tarjeta del formulario después); aquí solo se
   resuelve lo que ese remapeo no cubre: cancelar el sticky de la columna
   editorial (deja de tener sentido en una sola columna) y colapsar la
   fila Nombre/Correo a una columna.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .contact-form__intro {
    position: static;
  }

  .contact-form__card {
    padding: var(--space-5);
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }
}