/* =========================================================
   Formulario de contacto conectado a SIKIO
   Basado en el formulario de la web de Alma Viva, adaptado al
   sistema de diseño de /design (solo tokens de design-tokens.css).

   Dos bloques:
   1. Componente .contact-form + ventana .contact-modal: se puede
      reutilizar en cualquier página que cargue este CSS.
   2. Maquetación de la página contacto.html / contact-en.html.
   ========================================================= */

/* ---------- 1. Componente: formulario ---------- */
.contact-form {
  display: grid;
  gap: var(--space-07);              /* space.comfortable: campos de un formulario */
  color: var(--text-default);
  font-family: var(--font-family-base);
}

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

.contact-form__field {
  display: grid;
  gap: var(--space-04);              /* label + campo = una unidad */
  /* Contenido pegado arriba: si el campo de al lado crece (p. ej. por el aviso de
     formato incorrecto), este no reparte el hueco y la etiqueta y la caja no se mueven. */
  align-content: start;
}

.contact-form__label {
  color: var(--text-default);
  font-size: var(--text-heading-xs-size);
  line-height: var(--text-heading-xs-line);
  letter-spacing: var(--text-heading-xs-tracking);
  font-weight: var(--text-heading-xs-weight);
}

.contact-form__optional {
  color: var(--text-secondary);
  font-weight: var(--font-weight-regular);
}

.contact-form__input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--space-10);       /* área táctil recomendada (spacing.md §4.1) */
  padding: var(--space-05) var(--space-06);
  color: var(--text-default);
  background: var(--surface-default);
  border: var(--border-width-default) solid var(--border-strong);  /* borde con función: border.strong (colors.md §4) */
  border-radius: var(--radius-medium);
  font-family: inherit;
  /* body.lg (16px): además evita que iOS haga zoom al enfocar el campo */
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
  font-weight: var(--text-body-lg-weight);
}

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

.contact-form__input:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
  border-radius: var(--radius-medium);
}

.contact-form__input[aria-invalid="true"] {
  border-color: var(--input-border-error);
}

.contact-form__textarea {
  min-height: calc(var(--space-14) - var(--space-04)); /* 152px ≈ 5 líneas */
  resize: vertical;
}

.contact-form__hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: var(--text-body-sm-tracking);
}

/* Aviso de formato incorrecto bajo el campo (teléfono, email). Lo crea contact-form.js.
   Texto en feedback.critical.foreground (critical.700, 8.78:1 sobre blanco — colors.md §2.6);
   nunca body.xs para texto de error (typography.md). Icono + texto = una unidad: space.tight. */
.contact-form__error {
  display: flex;
  align-items: center;
  gap: var(--space-03);
  margin: 0;
  color: var(--feedback-critical-foreground);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: var(--text-body-sm-tracking);
  font-weight: var(--font-weight-medium);
}

.contact-form__error[hidden] {
  display: none;
}

.contact-form__error-icon {
  flex: none;
  width: var(--space-06);
  height: var(--space-06);
}

/* Aceptación de términos / privacidad */
.contact-form__consent {
  display: grid;
  gap: var(--space-04);
}

.contact-form__check {
  display: flex;
  gap: var(--space-04);
  align-items: flex-start;
  min-height: var(--space-07);       /* área táctil mínima 24px */
  color: var(--text-default);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  letter-spacing: var(--text-body-md-tracking);
  cursor: pointer;
}

.contact-form__check input {
  flex: none;
  width: var(--space-06);
  height: var(--space-06);
  margin: var(--space-03) 0 0;
  accent-color: var(--action-primary-default);
  cursor: pointer;
}

.contact-form__check input:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
  border-radius: var(--radius-focus-xsmall);
}

.contact-form__check input[aria-invalid="true"] {
  outline: var(--border-width-default) solid var(--input-border-error);
  outline-offset: var(--space-02);
}

.contact-form__legal {
  justify-self: start;
  color: var(--action-link-default);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  letter-spacing: var(--text-body-md-tracking);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: var(--space-02);
}

.contact-form__legal:hover {
  color: var(--action-link-hover);
}

.contact-form__legal:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
  border-radius: var(--radius-focus-xsmall);
}

/* Pregunta "¿Qué solución te interesa más?" (solo en solicitudes de prueba) */
.contact-form__solutions {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-form__solutions[hidden] {
  display: none;
}

.contact-form__solutions legend {
  margin-bottom: var(--space-04);
  padding: 0;
}

.contact-form__solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-04);
}

.contact-form__solution {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-04);
  min-height: var(--space-11);
  padding: var(--space-04);
  border: var(--border-width-default) solid var(--border-strong);   /* control con función: border.strong */
  border-radius: var(--radius-large);
  background: var(--surface-default);
  cursor: pointer;
}

.contact-form__solution:hover {
  border-color: var(--border-selected);
}

/* El radio queda accesible (teclado, lector de pantalla, aviso de obligatorio) pero invisible:
   la tarjeta entera hace de control. */
.contact-form__solution-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-form__solution-photo {
  flex: none;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-medium);
  object-fit: cover;
}

.contact-form__solution-name {
  color: var(--text-default);
  font-size: var(--text-heading-xs-size);
  line-height: var(--text-heading-xs-line);
  letter-spacing: var(--text-heading-xs-tracking);
  font-weight: var(--text-heading-xs-weight);
}

/* Seleccionada: se rellena con el azul de acción y el texto pasa a blanco
   (action.primary.default + action.primary.foreground, 4.57:1 validado en colors.md §4).
   colors.md §6 deja pendiente un token propio de "selection"; mientras tanto, a petición de
   la responsable (01/11/2026), se reutiliza el par de los botones principales para que la
   elección se vea claramente. Mantiene además border.selected con border-width.selected
   (1px de borde + 1px interior, para que la tarjeta no cambie de tamaño). */
.contact-form__solution:has(.contact-form__solution-input:checked) {
  border-color: var(--border-selected);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--border-selected);
  background: var(--action-primary-default);
}

.contact-form__solution:has(.contact-form__solution-input:checked):hover {
  background: var(--action-primary-hover);
}

.contact-form__solution:has(.contact-form__solution-input:checked) .contact-form__solution-name {
  color: var(--action-primary-foreground);
}

/* "Otro servicio": ocupa toda la fila y lleva un icono en lugar de foto */
.contact-form__solution--other {
  grid-column: 1 / -1;
}

.contact-form__solution-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-medium);
  color: var(--icon-default);
  background: var(--background-subtle);
}

.contact-form__solution-icon svg {
  width: var(--space-07);
  height: var(--space-07);
}

.contact-form__solution:has(.contact-form__solution-input:focus-visible) {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
}

.contact-form__solutions[aria-invalid="true"] .contact-form__solution {
  border-color: var(--input-border-error);
}

/* Captcha de Cloudflare Turnstile: reserva su alto para evitar saltos al cargar */
.contact-form__captcha {
  min-height: var(--space-11);
}

.contact-form__captcha[hidden] {
  display: none;
}

.contact-form__submit {
  justify-self: start;
  min-height: var(--space-10);
  padding: var(--space-05) var(--space-08);
  border: 0;
  border-radius: var(--radius-medium);
  color: var(--action-primary-foreground);
  background: var(--action-primary-default);
  font-family: inherit;
  font-size: var(--text-heading-sm-size);
  line-height: var(--text-heading-sm-line);
  letter-spacing: var(--text-heading-sm-tracking);
  font-weight: var(--text-heading-sm-weight);
  cursor: pointer;
}

.contact-form__submit:hover {
  background: var(--action-primary-hover);
}

.contact-form__submit:active {
  background: var(--action-primary-pressed);
}

.contact-form__submit:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
  border-radius: var(--radius-medium);
}

.contact-form__submit[disabled] {
  background: var(--action-primary-disabled);
  color: var(--text-default);
  cursor: not-allowed;
}

/* Mensaje de estado: vacío no ocupa sitio; con texto toma el color del estado */
.contact-form__status {
  margin: 0;
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  letter-spacing: var(--text-body-md-tracking);
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status[data-state="ok"],
.contact-form__status[data-state="error"] {
  padding: var(--space-05) var(--space-06);
  border-radius: var(--radius-medium);
  border: var(--border-width-default) solid;
}

.contact-form__status[data-state="ok"] {
  color: var(--feedback-success-foreground);
  background: var(--feedback-success-background);
  border-color: var(--feedback-success-border);
}

.contact-form__status[data-state="error"] {
  color: var(--feedback-critical-foreground);
  background: var(--feedback-critical-background);
  border-color: var(--feedback-critical-border);
}

.contact-form__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 1b. Componente: ventana de Términos y Condiciones ---------- */
/* El fondo oscurecido (::backdrop) se deja con el valor por defecto del navegador:
   colors.md §6 marca surface.overlay / scrim como pendiente y no hay token para él. */
.contact-modal {
  width: min(48rem, calc(100% - var(--space-08)));
  max-height: 85vh;
  padding: 0;
  border: var(--border-width-default) solid var(--border-subtle);
  border-radius: var(--radius-xlarge);
  color: var(--text-default);
  background: var(--surface-raised);
  box-shadow: var(--surface-raised-shadow);
  font-family: var(--font-family-base);
}

.contact-modal[open] {
  display: flex;
  flex-direction: column;
}

html:has(.contact-modal[open]) {
  overflow: hidden;
}

.contact-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-06);
  padding: var(--space-07) var(--space-08) var(--space-04);
}

.contact-modal__label {
  margin: 0;
  color: var(--text-default);
  font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-line);
  letter-spacing: var(--text-heading-md-tracking);
  font-weight: var(--text-heading-md-weight);
}

.contact-modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  padding: 0;
  border: var(--border-width-default) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-default);
  background: var(--surface-default);
  font-family: inherit;
  font-size: var(--font-size-300);
  line-height: 1;
  cursor: pointer;
}

.contact-modal__close:hover {
  background: var(--background-subtle);
}

.contact-modal__close:focus-visible,
.contact-modal__btn:focus-visible,
.contact-modal__body a:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
}

/* Texto de los términos (lo genera el JS a partir de SIKIO) */
.contact-modal__body {
  overflow-y: auto;
  padding: var(--space-04) var(--space-08) var(--space-07);
  color: var(--text-secondary);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
}

.contact-modal__body h2,
.contact-modal__body h3,
.contact-modal__body h4 {
  color: var(--text-default);
}

.contact-modal__body h2 {
  margin: 0 0 var(--space-05);
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line);
  letter-spacing: var(--text-heading-lg-tracking);
  font-weight: var(--text-heading-lg-weight);
}

.contact-modal__body h3 {
  margin: var(--space-07) 0 var(--space-04);
  font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-line);
  letter-spacing: var(--text-heading-md-tracking);
  font-weight: var(--text-heading-md-weight);
}

.contact-modal__body h4 {
  margin: var(--space-06) 0 var(--space-03);
  font-size: var(--text-heading-sm-size);
  line-height: var(--text-heading-sm-line);
  letter-spacing: var(--text-heading-sm-tracking);
  font-weight: var(--text-heading-sm-weight);
}

.contact-modal__body p {
  margin: 0 0 var(--space-06);
}

.contact-modal__body ul,
.contact-modal__body ol {
  margin: 0 0 var(--space-06);
  padding-left: var(--space-07);
}

.contact-modal__body li {
  margin-bottom: var(--space-03);
}

.contact-modal__body hr {
  margin: var(--space-07) 0;
  border: 0;
  border-top: var(--border-width-default) solid var(--border-subtle);
}

.contact-modal__body a {
  color: var(--action-link-default);
  text-decoration: underline;
}

.contact-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-05);
  padding: var(--space-06) var(--space-08) var(--space-07);
  border-top: var(--border-width-default) solid var(--border-subtle);
}

.contact-modal__btn {
  min-height: var(--space-10);
  padding: var(--space-05) var(--space-07);
  border: var(--border-width-default) solid var(--border-strong);
  border-radius: var(--radius-medium);
  color: var(--text-default);
  background: var(--surface-default);
  font-family: inherit;
  font-size: var(--text-heading-sm-size);
  line-height: var(--text-heading-sm-line);
  font-weight: var(--text-heading-sm-weight);
  cursor: pointer;
}

.contact-modal__btn:hover {
  background: var(--background-subtle);
}

.contact-modal__btn--primary {
  border-color: transparent;
  color: var(--action-primary-foreground);
  background: var(--action-primary-default);
}

.contact-modal__btn--primary:hover {
  background: var(--action-primary-hover);
}

/* ---------- 2. Página contacto.html / contact-en.html ---------- */
body.contact-page {
  margin: 0;
  overflow-x: hidden;
  color: var(--text-default);
  background: var(--background-default);
  font-family: var(--font-family-base);
}

/* Reset necesario para la cabecera y el pie compartidos (ver ArquitecturaWEB §16) */
.contact-page a {
  text-decoration: none;
}

.contact-page .contact-form__legal,
.contact-page .contact-modal__body a {
  text-decoration: underline;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
  box-sizing: border-box;
}

.contact-page .container {
  width: min(1180px, calc(100% - var(--space-11)));
  margin: 0 auto;
}

.contact-section {
  padding: var(--space-11) 0 var(--space-12);
  /* Fondo blanco liso: el azul de los enlaces y del antetítulo (action.link, 4.57:1 sobre
     blanco) baja de 4.5:1 sobre blue.50, así que aquí no se usa degradado. */
  background: var(--background-default);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-11);
  align-items: start;
}

.contact-intro__kicker {
  margin: 0 0 var(--space-04);
  color: var(--action-link-default);
  font-size: var(--text-heading-2xs-size);
  line-height: var(--text-heading-2xs-line);
  font-weight: var(--text-heading-2xs-weight);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.contact-intro h1 {
  margin: 0;
  color: var(--text-default);
  font-size: var(--text-heading-xl-size);
  line-height: var(--text-heading-xl-line);
  letter-spacing: var(--text-heading-xl-tracking);
  font-weight: var(--text-heading-xl-weight);
}

/* Acento de identidad (colors.md §1.3.1): presencia puntual, muy por debajo del 35% */
.contact-intro h1::after {
  content: "";
  display: block;
  width: var(--space-10);
  height: var(--space-03);
  margin-top: var(--space-05);
  border-radius: var(--radius-full);
  background: var(--accent-500);
}

.contact-intro__lead {
  max-width: 34rem;
  margin: var(--space-07) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
}

.contact-alternatives {
  display: grid;
  gap: var(--space-04);
  margin: var(--space-08) 0 0;
  padding: var(--space-07) 0 0;
  border-top: var(--border-width-default) solid var(--border-subtle);
}

.contact-alternatives__title {
  margin: 0 0 var(--space-03);
  color: var(--text-default);
  font-size: var(--text-heading-sm-size);
  line-height: var(--text-heading-sm-line);
  letter-spacing: var(--text-heading-sm-tracking);
  font-weight: var(--text-heading-sm-weight);
}

.contact-alternatives a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--space-07);
  color: var(--action-link-default);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--font-weight-medium);
}

.contact-alternatives a:hover {
  color: var(--action-link-hover);
  text-decoration: underline;
}

.contact-alternatives a:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--space-02);
  border-radius: var(--radius-focus-xsmall);
}

.contact-card {
  padding: var(--space-09);
  border: var(--border-width-default) solid var(--border-subtle);
  border-radius: var(--radius-large);
  background: var(--surface-default);
  box-shadow: var(--surface-raised-shadow);
}

.contact-card__note {
  margin: 0 0 var(--space-07);
  color: var(--text-secondary);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  letter-spacing: var(--text-body-md-tracking);
}

@media (max-width: 1100px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-09);
  }

  .contact-intro__lead {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .contact-page .container {
    width: calc(100% - var(--space-08));   /* 16px de margen lateral */
  }

  .contact-section {
    padding: var(--space-08) 0 var(--space-10);
  }

  .contact-layout {
    gap: var(--space-08);
  }

  .contact-alternatives {
    margin-top: var(--space-07);
    padding-top: var(--space-06);
  }

  .contact-card {
    padding: var(--space-07) var(--space-06);
  }

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

  .contact-form__solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form__submit {
    justify-self: stretch;             /* ancho cómodo para el pulgar (ArquitecturaWEB §9) */
  }

  .contact-modal {
    width: calc(100% - var(--space-06));
    max-height: 90vh;
  }

  .contact-modal__head {
    padding: var(--space-06) var(--space-06) var(--space-03);
  }

  .contact-modal__body {
    padding: var(--space-03) var(--space-06) var(--space-06);
  }

  .contact-modal__foot {
    padding: var(--space-05) var(--space-06) var(--space-06);
  }

  .contact-modal__btn {
    flex: 1 1 auto;
  }
}