/* =========================================================
   CONTACTO
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Fondo: el mismo mesh gradient del hero (componente .mesh de
   css/base/mesh.css), sin espejar: naranja a la izquierda, magenta a la
   derecha, igual que en el Figma.
   Izquierda: el título con la animación de entrada de siempre.
   Derecha: el formulario (nombre, organización, e-mail y servicio).
   ========================================================= */
.contacto {
  --color-text: var(--color-text-dark);
}

/* Sobre el degradado saturado la etiqueta va en crema, como en
   Metodología. */
.contacto .section-label {
  color: var(--color-text-light);
}

.contacto__inner {
  position: relative; /* por encima del mesh */
  z-index: 1;
  width: 100%;
}

/* La columna del texto se centra contra el alto del formulario. */
.contacto__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contacto__title {
  font-size: clamp(1.8rem, 2.9vw, 3.3rem);
  line-height: 1.12;
  max-width: 14ch;
}
.contacto__title .is-dark { color: var(--color-text-dark); }
.contacto__title .is-light { color: var(--color-text-light); }

/* ---------------------------------------------------------
   FORMULARIO
   Campos rectangulares (sin border-radius, como todo el sitio) en el
   crema del fondo general: nada de blanco pleno.
   --------------------------------------------------------- */
.contacto__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* Nombre y Organización comparten fila; el resto ocupa el ancho. */
.contacto__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.field {
  position: relative;
  display: block;
}

.field__input {
  width: 100%;
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text-dark);
  font-family: inherit;
  font-size: 20px;
  line-height: 24px;
  border: 1px solid transparent; /* sin sombras: el estado se marca con borde */
  border-radius: 0;
  transition: border-color var(--transition-fast);
}

.field__input::placeholder {
  color: var(--color-text-muted);
}

/* AUTOCOMPLETADO DEL NAVEGADOR
   Chrome pinta los campos autocompletados de celeste y no se puede
   cambiar con background-color: la unica forma de tapar ese fondo es una
   sombra interior enorme. No es una sombra decorativa (el sitio no las
   usa): es la unica manera de que el campo siga siendo del crema del
   sitio cuando el navegador completa nombre y mail solos.
   La transicion larguisima evita el parpadeo celeste del primer frame. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-dark);
  -webkit-box-shadow: 0 0 0 100px var(--color-bg) inset;
  box-shadow: 0 0 0 100px var(--color-bg) inset;
  caret-color: var(--color-text-dark);
  transition: background-color 100000s ease-in-out 0s;
}

.field__input:focus {
  outline: none;
  border-color: var(--color-3);
}

/* Campo incompleto o mal cargado: se marca al intentar enviar, no
   mientras se escribe (la clase la pone js/main.js). */
.field.has-error .field__input {
  border-color: var(--color-4);
}
.field__error {
  display: none;
  margin-top: var(--space-1);
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-light);
}
.field.has-error .field__error {
  display: block;
}

/* Botón de envío: ocupa el ancho del formulario y el contenido va
   centrado (el cuadradito del .btn incluido). */
.contacto__submit {
  justify-content: center;
  width: 100%;
  padding-block: var(--space-3);
  font-size: 20px;
  line-height: 24px;
  cursor: pointer;
}

/* Mensaje de resultado (éxito o error). Vacío no ocupa lugar. */
.contacto__status {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-light);
  font-weight: var(--fw-bold);
}
.contacto__status:empty {
  display: none;
}

/* ---------------------------------------------------------
   ANTI-SPAM: campo trampa (honeypot)
   Fuera de la pantalla y sin display:none — muchos bots ignoran los
   campos ocultos con display:none, pero completan este. Si llega con
   algo escrito, el envío se descarta.
   No se usa visibility/hidden para que siga siendo "rellenable" por un
   bot, y queda fuera del recorrido de tabulación y de los lectores de
   pantalla.
   --------------------------------------------------------- */
.form__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .contacto__title {
    max-width: none;
    margin-bottom: var(--space-5);
  }
  .contacto__row {
    grid-template-columns: 1fr;
  }
}

/* Contador de caracteres del campo "Estoy buscando...". Discreto: es una
   ayuda, no un dato principal. */
.field__contador {
  margin-top: var(--space-1);
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-light);
  opacity: 0.75;
  text-align: right;
}
.field__contador.is-limite {
  color: var(--color-1);
  opacity: 1;
}