/* ==========================================================================
   PÁGINA — Contacto
   ========================================================================== */

.contacto { padding-top: clamp(3rem, 2.4rem + 3.4vw, 5rem); }

.contacto__parrilla {
  display: grid;
  gap: clamp(var(--e-7), 4vw, var(--e-9));
  align-items: start;
}

@media (min-width: 940px) {
  .contacto__parrilla { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); }
  .contacto__datos { position: sticky; top: calc(var(--barra-h) + var(--e-6)); }
}

/* ============================================================ DATOS DE PIE */

.dato-contacto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  padding-block: var(--e-5);
  border-top: 1px solid var(--borde);
}
.contacto__datos > .display-3 + .dato-contacto { margin-top: var(--e-6); }

.dato-contacto__icono { color: var(--naranja-600); margin-top: 0.15rem; }

.dato-contacto__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--gris-500);
  margin-bottom: var(--e-3);
}

.dato-contacto__enlace {
  display: block;
  width: fit-content;
  font-family: var(--fuente-cota);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gris-900);
  padding-block: 0.2rem;
  transition: color var(--d-rapido) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dato-contacto__enlace:hover { color: var(--naranja-700); }
}

.dato-contacto__texto {
  font-size: var(--t-pie);
  line-height: 1.62;
  color: var(--gris-500);
  max-width: 34ch;
}

/* ================================================================ FORMULARIO */

.contacto__formulario {
  --chaflan: 26px;
  background: var(--gris-100);
  padding: clamp(var(--e-6), 3.4vw, var(--e-8));
  clip-path: polygon(
    0 0, calc(100% - var(--chaflan)) 0, 100% var(--chaflan),
    100% 100%, var(--chaflan) 100%, 0 calc(100% - var(--chaflan))
  );
}

/* Dentro del bloque hundido, los campos suben a blanco para que el
   área de escritura se distinga de la superficie que la contiene. */
.contacto__formulario .campo__entrada { background: var(--blanco); }

.formulario { display: grid; gap: var(--e-5); }

.formulario__fila { display: grid; gap: var(--e-5); }
@media (min-width: 560px) {
  .formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.formulario .boton { margin-top: var(--e-2); }

/* El selector necesita su propia marca: no se dibuja con un glifo. */
.campo:has(> select) { position: relative; }
.campo > select.campo__entrada { padding-inline-end: 2.75rem; }
.campo:has(> select)::after {
  content: '';
  position: absolute;
  inset-inline-end: 1.05rem;
  bottom: 1.35rem;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--gris-500);
  border-bottom: 1.6px solid var(--gris-500);
  transform: rotate(45deg);
  pointer-events: none;
}
.campo[data-invalido='true']:has(> select)::after { bottom: 2.6rem; }