/* SECCION: contacto · panel Soft White con la tarjeta blanca del mockup final (materiales/mockup-final/)
   Izquierda: rótulo, "¿Trabajamos juntos?", el texto de v7 y la firma con el avatar sobre un filete.
   Derecha: el formulario, con campos Soft White de radio 12 (la tarjeta es blanca). Una columna en celular.
   Sin entrada animada: solo se mueven el botón (press de la casa) y los mensajes de estado, que aparecen con un
   fundido corto y subiendo 6 px (con "reducir movimiento", solo el fundido). Luces Hielo y Chispa fijas.
   También lo usa gracias.html (la página de después de enviar sin JavaScript). Solo usa variables de tokens.css. */

.contacto {
  padding: var(--space-7) max(var(--gutter), calc((100% - var(--ancho-max)) / 2 + var(--gutter)));
}

.contacto__luz { /* luces fijas detrás de la tarjeta, como en el mockup */
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.contacto__luz--hielo { right: -160px; bottom: -200px; width: 640px; height: 460px; background: var(--luz); opacity: 0.6; }
.contacto__luz--chispa { left: 30%; top: -140px; width: 300px; height: 260px; background: var(--energia); opacity: 0.25; }

/* ---------- Tarjeta ---------- */
.contacto__tarjeta {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  padding: 30px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

.contacto__titulo {
  margin-bottom: 20px;
  font-size: clamp(2.125rem, 1.7rem + 1.6vw, 2.75rem); /* 34 → 44 px, como el mockup */
  line-height: 1.05;
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-headline);
  text-wrap: balance;
}

.contacto__texto > p:not(.eyebrow) {
  max-width: var(--medida-texto);
  margin-bottom: var(--space-3);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.contacto__firma {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--borde);
}
.contacto__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}
.contacto__firma p { font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }

/* ---------- Formulario ---------- */
.contacto__lado { position: relative; }

.contacto__form[hidden] { display: none; }
.contacto__form {
  display: grid;
  gap: 14px;
  align-content: start;
}

.contacto__trampa { display: none; } /* campo trampa: solo lo ven los robots que leen el HTML */

.contacto__campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.contacto__campo label { font-size: 0.8125rem; font-weight: var(--peso-medium); }

.contacto__campo input,
.contacto__campo select,
.contacto__campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radio-boton);
  background: var(--panel);
  font-size: 1rem; /* 16 px: el iPhone no hace zoom al tocar el campo */
  line-height: 1.4;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.contacto__campo textarea { min-height: 120px; resize: vertical; }
.contacto__campo ::placeholder { color: var(--tinta-suave); opacity: 1; }

.contacto__campo input:focus,
.contacto__campo select:focus,
.contacto__campo textarea:focus {
  outline: none;
  border-color: var(--foco);
  background: var(--superficie);
  transition-duration: 0s; /* el foco llega por teclado: aparece al instante; al salir, sí se desvanece */
}
@media (hover: hover) and (pointer: fine) {
  .contacto__campo input:hover:not(:focus),
  .contacto__campo select:hover:not(:focus),
  .contacto__campo textarea:hover:not(:focus) { border-color: var(--borde); }
}

/* Campo con error, solo después de que la persona lo tocó o intentó enviar (no al cargar) */
.contacto__campo :user-invalid { border-color: var(--signal-red-600); }

/* Lista: flecha propia, sin el estilo del sistema */
.contacto__lista { position: relative; }
.contacto__lista select { appearance: none; padding-right: 44px; cursor: pointer; }
.contacto__lista select:has(option[value=""]:checked) { color: var(--tinta-suave); } /* "Elige una opción" en gris */
.contacto__lista option { color: var(--tinta); }
.contacto__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Casilla del aviso de privacidad */
.contacto__casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.contacto__casilla input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cta);
  cursor: pointer;
}
.contacto__casilla label { cursor: pointer; }
.contacto__casilla a { color: var(--cta); text-underline-offset: 3px; }
.contacto__casilla :user-invalid { outline: 2px solid var(--signal-red-600); outline-offset: 2px; }

.contacto__enviar { width: 100%; margin-top: 6px; }
.contacto__enviar[aria-busy="true"] { opacity: 0.6; cursor: progress; } /* enviando: bloqueado, sin texto nuevo */
.contacto__enviar[aria-busy="true"]:active { transform: none; }

/* ---------- Mensajes de estado (escritos en el HTML con hidden; contacto.js muestra uno) ---------- */
.contacto__estado {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.contacto__estado.esta-visible { opacity: 1; transform: none; }

.contacto__estado--error {
  padding: 12px 16px;
  border-radius: var(--radio-boton);
  background: var(--signal-red-100);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.contacto__estado--error a { color: var(--tinta); font-weight: var(--peso-medium); text-underline-offset: 3px; }

.contacto__estado--exito { /* reemplaza al formulario dentro de la tarjeta */
  display: grid;
  align-content: center;
  gap: var(--space-3);
  min-height: 100%;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radio-tarjeta);
  background: var(--panel);
}
.contacto__estado--exito[hidden] { display: none; }
.contacto__estado--exito:focus { outline: none; }
.contacto__estado--exito p {
  max-width: 22ch;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-title);
}

.contacto__check { /* check en círculo azul (lo usa también gracias.html) */
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 50%;
  background: var(--cta);
  fill: none;
  stroke: var(--sobre-cta);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .contacto__estado { transform: none; }
}

/* ---------- Tableta: nombre y correo lado a lado ---------- */
@media (min-width: 600px) {
  .contacto__tarjeta { padding: 40px; }
  .contacto__form { grid-template-columns: 1fr 1fr; }
  .contacto__campo--ancho,
  .contacto__enviar,
  .contacto__estado--error { grid-column: 1 / -1; }
}

/* ---------- Escritorio: texto a la izquierda, formulario a la derecha ---------- */
@media (min-width: 900px) {
  .contacto { padding-block: 88px; }
  .contacto__tarjeta { grid-template-columns: 1fr 1.1fr; gap: 56px; padding: 56px; }
}

/* ---------- gracias.html ----------
   Panel con el menú montado arriba (igual que la portada) y la tarjeta centrada; después, el pie. */
.gracias__panel {
  display: grid;
  place-items: center;
  min-height: min(720px, calc(100svh - var(--panel-borde)));
  padding: calc(var(--menu-alto) + var(--space-4)) var(--gutter) var(--space-7);
}
.gracias__tarjeta { grid-template-columns: 1fr; max-width: 560px; gap: var(--space-4); }
.gracias__titulo {
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-title);
}