/**
 * Bloque: iink-as-contacto
 * Blueprint: Animales Sueltos
 * Estética: Fabrica Studio — sección negra, título gigante, form minimal underline
 * Regla absoluta: cero valores hardcodeados — solo var(--iink-*)
 */

/* ── Sección negra ────────────────────────────────────────────────────────── */
.iink-as-contacto {
  background: var(--iink-bg-dark);
  padding-block-start: var(--iink-section-padding-y);
  padding-block-end: calc(var(--iink-section-padding-y) / 2);
}

/* ── Título gigante Inter ─────────────────────────────────────────────────── */
.iink-as-contacto__titulo {
  font-family: var(--iink-font-heading);
  font-size: var(--iink-text-hero);
  font-weight: var(--iink-font-weight-bold);
  letter-spacing: var(--iink-ls-hero);
  line-height: var(--iink-lh-hero);
  color: var(--iink-text-light);
  margin-bottom: clamp(16px, 3vw, 24px);
  opacity: 0; /* GSAP lo anima */
}

/* ── Subtítulo ────────────────────────────────────────────────────────────── */
.iink-as-contacto__subtitulo {
  font-family: var(--iink-font-body);
  font-size: var(--iink-text-md);
  font-weight: 400;
  letter-spacing: var(--iink-ls-body);
  line-height: var(--iink-lh-body);
  color: var(--iink-text-light);
  opacity: 0; /* GSAP: anima a 0.5 cuando visible */
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* ── Formulario ───────────────────────────────────────────────────────────── */
.iink-as-contacto__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Fila — agrupa todos los campos + botón en una sola línea en desktop ─── */
.iink-as-contacto__fila {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}

.iink-as-contacto__fila > .iink-as-contacto__campo {
  flex: 1;
  min-width: 0;
}

/* Mensaje — ocupa más espacio que nombre/email para llegar al botón al borde */
.iink-as-contacto__fila > .iink-as-contacto__campo--mensaje {
  flex: 2;
}

/* ── Campo con solo borde inferior ───────────────────────────────────────── */
.iink-as-contacto__campo {
  position: relative;
  display: flex;
  flex-direction: column;
}

.iink-as-contacto__campo input,
.iink-as-contacto__campo textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--iink-border-lt);
  border-radius: 0;
  color: var(--iink-text-light);
  font-family: var(--iink-font-body);
  font-size: var(--iink-text-md);
  font-weight: 400;
  letter-spacing: var(--iink-ls-body);
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color var(--iink-transition);
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}

.iink-as-contacto__campo input::placeholder,
.iink-as-contacto__campo textarea::placeholder {
  color: var(--iink-text-light);
  opacity: 0.25;
  font-style: normal;
}

.iink-as-contacto__campo input:focus,
.iink-as-contacto__campo textarea:focus {
  border-bottom-color: var(--iink-accent);
}

/* Línea animada de acento — se expande al focus */
.iink-as-contacto__campo-linea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--iink-accent);
  transition: width var(--iink-transition-md);
  pointer-events: none;
}

.iink-as-contacto__campo:focus-within .iink-as-contacto__campo-linea {
  width: 100%;
}

/* Validación nativa post-interacción */
.iink-as-contacto__campo input:user-invalid,
.iink-as-contacto__campo textarea:user-invalid {
  border-bottom-color: var(--iink-border-lt);
  opacity: 0.6;
}

/* ── Botón submit — pill lima ─────────────────────────────────────────────── */
.iink-as-contacto__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 14px 28px;
  border-radius: var(--iink-radius-pill);
  background: var(--iink-accent);
  color: var(--iink-text);
  font-family: var(--iink-font-body);
  font-size: var(--iink-text-sm);
  font-weight: var(--iink-font-weight-bold);
  letter-spacing: var(--iink-ls-body);
  cursor: pointer;
  transition: opacity var(--iink-transition);
  border: none;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px; /* área táctil cómoda */
}

.iink-as-contacto__btn:hover,
.iink-as-contacto__btn:focus-visible {
  opacity: 0.85;
  outline: none;
}

.iink-as-contacto__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Mensaje de feedback post-envío ──────────────────────────────────────── */
.iink-as-contacto__feedback {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--iink-font-body);
  font-size: var(--iink-text-sm);
  letter-spacing: var(--iink-ls-body);
  padding: 12px 16px;
  border-radius: 4px;
}

.iink-as-contacto__feedback.is-success {
  color: var(--iink-accent);
  border: 1px solid var(--iink-accent);
}

.iink-as-contacto__feedback.is-error {
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

/* Mobile — las filas se apilan en una columna */
@media (max-width: 639px) {
  .iink-as-contacto__fila {
    flex-direction: column;
    align-items: stretch;
  }

  .iink-as-contacto__btn {
    align-self: flex-start;
  }
}

/* ── Trampa para bots ─────────────────────────────────────────────────────── */
/*
 * Fuera de pantalla en vez de display:none — bastantes bots ignoran los campos
 * ocultos con display, pero sí rellenan los que están posicionados fuera del
 * viewport. Para una persona es igual de invisible.
 */
.iink-as-contacto__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}