/* ==========================================================================
   CONTACTO — introducción lateral (cómo funciona) + formulario sobre papel blanco
   Mobile first · cortes: 48rem (campos en dos columnas) y 64rem (dos columnas de página)
   ========================================================================== */

.contact {
  padding-block: var(--space-6) var(--space-section);
}

.contact__grid {
  display: grid;
  gap: var(--space-6);
}

/* --- Introducción lateral --------------------------------------------------- */

.contact__lead {
  margin-top: var(--space-4);
  max-width: 28em;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink);
}

.contact__steps {
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.contact__step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}

.contact__num {
  padding-top: 0.3rem;
  font: 500 var(--text-xs) / 1 var(--font-ui);
  letter-spacing: 0.22em;
  color: #8a6420;
}

.contact__step-title {
  font: 700 var(--text-lg) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.contact__step-text {
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* --- Tarjeta del formulario -------------------------------------------------- */

.contact-card {
  position: relative;
  padding: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem);
  background: var(--color-white);
  border: 1px solid var(--line);
  box-shadow: 0 28px 44px -34px rgb(0 0 0 / 0.35);
}

/* Remate dorado corto sobre el borde superior, en lugar de una raya a todo el ancho */
.contact-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem);
  width: 4rem;
  height: 3px;
  background: var(--color-gold);
}

.contact-card__title {
  font: 700 clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem) / 1.05 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-navy);
}

.contact-card__hint {
  margin-top: var(--space-2);
  font: 400 var(--text-sm) / 1.5 var(--font-ui);
  color: var(--color-ink-soft);
}

.req {
  color: #8a6420;
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font: 600 var(--text-sm) / 1.3 var(--font-ui);
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

.field__opt {
  font-weight: 500;
  color: var(--color-ink-soft);
}

.field__help {
  font: 400 var(--text-xs) / 1.4 var(--font-ui);
  color: var(--color-ink-soft);
}

.field__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: 400 var(--text-base) / 1.4 var(--font-body);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.field__control::placeholder {
  color: color-mix(in srgb, var(--color-ink-soft) 72%, transparent);
}

@media (hover: hover) {
  .field__control:hover:not(:disabled) {
    border-color: var(--color-ink);
  }
}

.field__control:focus {
  background: var(--color-white);
  border-color: var(--color-steel);
  outline-color: var(--color-steel);
  box-shadow: inset 0 -3px 0 var(--color-gold);
}

.field__control:disabled {
  background: var(--color-paper-deep);
  color: var(--color-ink-soft);
  cursor: not-allowed;
}

textarea.field__control {
  min-height: 9.5rem;
  resize: vertical;
}

select.field__control {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5075' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

/* Estado de error: texto del mensaje + borde (nunca solo color) */
.field.has-error .field__control {
  border-color: var(--color-error);
}

.field__error {
  font: 500 var(--text-sm) / 1.35 var(--font-ui);
  color: var(--color-error);
}

.field__counter {
  align-self: flex-end;
  font: 500 var(--text-xs) / 1 var(--font-ui);
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
}

.field__counter.is-near-limit {
  color: var(--color-error);
}

/* --- Medio de respuesta: dos opciones en segmento ---------------------------- */

.choice-row {
  display: flex;
}

.choice {
  position: relative;
  flex: 1;
}

.choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  background: var(--color-paper);
  border: 1px solid var(--line-strong);
  font: 500 var(--text-sm) / 1.2 var(--font-ui);
  letter-spacing: 0.02em;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.choice + .choice span {
  margin-left: -1px;
}

@media (hover: hover) {
  .choice:hover input:not(:checked) + span {
    background: var(--color-paper-deep);
    border-color: var(--color-ink);
  }
}

.choice input:checked + span {
  position: relative;
  z-index: 1;
  background: var(--color-navy);
  border-color: var(--color-navy);
  box-shadow: inset 0 -3px 0 var(--color-gold);
  color: var(--color-white);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--color-steel);
  outline-offset: 2px;
}

/* --- Bloques que cambian según el motivo ------------------------------------- */

.form-extra {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--color-gold-pale) 38%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-gold) 65%, transparent);
  animation: page-in 0.5s var(--ease-out) both;
}

.form-extra[hidden] {
  display: none;
}

.form-extra__title {
  font: 600 var(--text-sm) / 1.3 var(--font-ui);
  letter-spacing: 0.02em;
  color: #6b4c14;
}

/* Campo opcional con casilla "Por definir" */
.field__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* --- Casillas ------------------------------------------------------------------ */

.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font: 400 var(--text-sm) / 1.5 var(--font-ui);
  color: var(--color-ink);
  cursor: pointer;
}

.check input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  opacity: 0;
  cursor: pointer;
}

.check__box {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  background: var(--color-paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.check__box::after {
  content: "";
  position: absolute;
  left: 0.38rem;
  top: 0.1rem;
  width: 0.35rem;
  height: 0.7rem;
  border: solid var(--color-gold-pale);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.check input:checked + .check__box {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.check input:checked + .check__box::after {
  transform: rotate(45deg) scale(1);
}

.check input:focus-visible + .check__box {
  outline: 2px solid var(--color-steel);
  outline-offset: 2px;
}

.check input:disabled + .check__box {
  background: var(--color-paper-deep);
  cursor: not-allowed;
}

.check a {
  color: var(--color-steel);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .check a:hover {
    color: var(--color-navy);
  }
}

.field.has-error .check__box {
  border-color: var(--color-error);
}

/* --- Antispam: señuelo invisible para personas y espacio del widget de Cloudflare ---- */

.form-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-captcha {
  min-height: 4.1rem;
}

.form-captcha[hidden] {
  display: none;
}

/* --- Envío ---------------------------------------------------------------------- */

.form-alert {
  margin-top: var(--space-5);
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--color-error) 7%, var(--color-white));
  border: 1px solid var(--color-error);
  font: 500 var(--text-sm) / 1.5 var(--font-ui);
  color: var(--color-error);
}

.form-alert[hidden] {
  display: none;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.form-actions .btn {
  min-height: 3.25rem;
  padding-inline: 1.8rem;
}

.btn[aria-busy="true"] {
  opacity: 0.75;
  pointer-events: none;
}

.form-note {
  font: 400 var(--text-xs) / 1.5 var(--font-ui);
  color: var(--color-ink-soft);
}

/* --- Confirmación -------------------------------------------------------------------- */

.contact-success {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

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

.contact-success:focus {
  outline: none;
}

.contact-success__mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--color-navy);
  border-radius: 50%;
  color: var(--color-gold-pale);
  font-size: 1.5rem;
}

.contact-success__title {
  font: 700 clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem) / 1.05 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-navy);
}

.contact-success__text {
  max-width: 30em;
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* --- Tablet: campos en dos columnas ---------------------------------------------- */

@media (min-width: 48rem) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }

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

  .form-extra__title {
    grid-column: 1 / -1;
  }

  .form-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
}

/* --- Escritorio: introducción a la izquierda, formulario a la derecha --------------- */

@media (min-width: 64rem) {
  .contact {
    padding-top: var(--space-7);
  }

  .contact__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr);
    gap: var(--space-7);
    align-items: start;
  }

  .contact__intro {
    position: sticky;
    top: 6.5rem;
  }
}