/* El formulario de cotización. Una sola hoja para Paint y para Mind.
 *
 * Se puede compartir porque los dos cierres son OSCUROS: en Paint `.cierre` pinta la noche sobre la
 * pared crema, y en Mind la noche ya es el `body`. Así que todo acá está escrito contra un fondo
 * oscuro, con `currentColor` y `--acento`, que es lo único que cambia entre las dos marcas
 * (violeta flúor en Paint, brasa en Mind). Cero hex, como el resto del sitio.
 */

/* La línea que engancha con el botón de WhatsApp de arriba ("O déjanos los datos…").
 *
 * Se queda CENTRADA, con el resto del cierre, mientras el formulario de abajo se va a la izquierda.
 * No es una inconsistencia: es una frase suelta, del mismo largo y el mismo tono que las otras dos
 * del bloque, y alinearla a la izquierda la despegaría del párrafo que tiene justo arriba. */
.cotizar__intro {
  margin-top: clamp(1.8rem, 4.5vh, 2.8rem);
  color: color-mix(in oklch, var(--c-hueso) 62%, transparent);
}

.cotizar {
  width: 100%;
  max-width: 44rem;
  margin: clamp(1.6rem, 4vh, 2.4rem) auto 0;
  text-align: left;
}

/* Dos columnas en escritorio, una en teléfono. `campo--ancho` ocupa las dos.
 *
 * El reparto no es estético: fecha y personas son campos CORTOS -diez caracteres y tres- y puestos
 * a todo el ancho de 44rem se ven como dos cajas vacías y el formulario parece más largo de lo que
 * es. Los tres largos (tipo de evento, lugar, correo) van enteros. */
.cotizar__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.2rem;
}

.campo { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: var(--t-dato);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in oklch, var(--c-hueso) 72%, transparent);
}

/* "si ya la tienes", al lado de Fecha. En minúscula y sin versalitas: si compartiera el
 * tratamiento de la etiqueta se leería como parte del nombre del campo. */
.campo__nota {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
  color: color-mix(in oklch, var(--c-hueso) 48%, transparent);
}

/* El campo.
 *
 * Filete abajo y nada más: ni caja, ni fondo, ni radio. Es lo mismo que hace el resto del sitio con
 * las listas y las fichas -una regla fina que separa- y un formulario de cinco cajas redondeadas
 * sobre la noche se lee como un plugin pegado, no como parte de la página.
 *
 * `appearance: none` va por el `<select>` y por el `type="date"`, que en Chrome y en Safari traen su
 * propio fondo claro y su propio borde: sobre la noche salían dos rectángulos blancos. */
.campo input,
.campo select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.1rem;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--c-hueso) 26%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--c-hueso);
  font: 400 var(--t-cuerpo)/1.4 'DM Sans', system-ui, sans-serif;
  transition: border-color 220ms var(--salida);
}

.campo input::placeholder {
  color: color-mix(in oklch, var(--c-hueso) 38%, transparent);
}

.campo input:hover,
.campo select:hover { border-bottom-color: color-mix(in oklch, var(--c-hueso) 44%, transparent); }

.campo input:focus,
.campo select:focus { border-bottom-color: var(--acento); }

/* El foco visible lo pinta `tokens.css` con un `outline` de 3 px. Sobre un campo sin caja ese
 * outline dibuja un rectángulo alrededor del texto y del filete, que es justo lo que se quería
 * evitar. Se reemplaza por el mismo filete de abajo, más gordo y en el acento: se ve igual de claro
 * con el teclado y no inventa una caja. */
.campo input:focus-visible,
.campo select:focus-visible {
  outline: none;
  border-bottom-color: var(--acento);
  box-shadow: 0 1px 0 0 var(--acento);
}

/* La flecha del desplegable, dibujada acá porque `appearance: none` se lleva la nativa.
 * SVG en `mask` y no en `background-image`: así el color sale de `currentColor` y sigue al acento
 * en el foco, en vez de ser un color horneado en el archivo. */
.campo select {
  padding-right: 1.6rem;
  background-image: none;
  cursor: pointer;
}

.campo { position: relative; }

.campo:has(select)::after {
  content: '';
  position: absolute;
  right: 0.25rem;
  bottom: 1.15rem;
  width: 0.6rem;
  height: 0.38rem;
  background: currentColor;
  color: color-mix(in oklch, var(--c-hueso) 60%, transparent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  transition: color 220ms var(--salida);
}

.campo:has(select:focus)::after { color: var(--acento); }

/* Las opciones las pinta el sistema operativo, no la página: un `<select>` abierto es una ventana
 * nativa. Lo único que se puede pedir es que el menú se dibuje oscuro y no blanco. */
.campo select option,
.campo select optgroup { background: var(--c-noche); color: var(--c-hueso); }

/* El ícono del calendario de `type="date"` en Chrome es negro y sobre la noche desaparece.
 * `invert` lo deja hueso sin necesidad de un archivo. */
.campo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}
.campo input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Los botoncitos de subir y bajar del `type="number"`: fuera. Son 16 px de alto cada uno, nadie
 * pide un cupo de a una persona por clic, y sobre un campo sin caja quedan flotando. */
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.campo input[type="number"] { -moz-appearance: textfield; }

/* El error del campo.
 *
 * En el acento y no en rojo: la paleta del sitio no tiene un rojo, y meter uno solo para esto
 * agregaría un color a un sistema cerrado. Lo que hace que se lea como error no es el tono, es que
 * aparece debajo del campo que falta y que ese campo queda con el filete del mismo color. */
.campo__error {
  font-size: var(--t-dato);
  line-height: 1.35;
  color: var(--acento);
}

.campo[data-mal] input,
.campo[data-mal] select { border-bottom-color: var(--acento); }

/* La trampa para bots. Fuera de la vista y fuera del flujo, pero NO con `display: none` ni con
 * `visibility: hidden`, que es lo primero que un bot medianamente hecho mira antes de llenar.
 * `clip-path` lo deja renderizado y vacío de tamaño. `aria-hidden` no va: un lector de pantalla que
 * lo anuncie es preferible a un atributo que el bot use como pista. El `tabindex="-1"` del HTML es
 * lo que hace que nadie llegue tabulando. */
.cotizar__trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cotizar__pie {
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.cotizar__pie button { border: 0; cursor: pointer; font-family: inherit; }

/* El botón mientras se está enviando. Se apaga y deja de reaccionar al hover: si sigue vivo, el que
 * no vio el cambio lo aprieta otra vez y manda dos correos. */
.cotizar[data-enviando] button { opacity: 0.55; pointer-events: none; }

/* El aviso de "llegó" o "falló". Vacío no ocupa lugar: un renglón reservado deja un hueco abajo del
 * botón en las dos páginas, todo el tiempo, para algo que se ve una vez. */
.cotizar__aviso {
  font-size: var(--t-chico);
  line-height: 1.45;
  color: color-mix(in oklch, var(--c-hueso) 70%, transparent);
}
.cotizar__aviso:empty { display: none; }
.cotizar__aviso[data-ok] { color: var(--acento); }

/* Enviado: el formulario se va y queda el mensaje.
 *
 * Dejar los cinco campos llenos abajo de un "gracias" invita a apretar de nuevo, y es la forma más
 * común de que el mismo lead llegue tres veces. */
.cotizar[data-listo] .cotizar__campos,
.cotizar[data-listo] .cotizar__pie button { display: none; }

@media (max-width: 640px) {
  .cotizar__campos { grid-template-columns: minmax(0, 1fr); }
  .cotizar { margin-top: clamp(1.4rem, 3.5vh, 2rem); }
}

/* En el cierre de Paint el bloque está centrado (`.bloque--centro`), y el formulario hereda ese
 * `text-align: center`: las etiquetas quedaban centradas arriba de sus campos, que es ilegible en
 * un formulario -el ojo pierde qué etiqueta va con qué caja. El título del cierre sigue centrado;
 * el formulario vuelve a la izquierda y se centra como bloque. */
.bloque--centro .cotizar,
.mind-cierre .cotizar { text-align: left; }

.cotizar__pie { justify-content: flex-start; }