/* ===========================================================================
   JurisOne — contacto
   Se monta sobre tokens.css y sitio.css: aquí solo vive lo que no existe
   en ninguna otra página. Ni un color, ni un radio, ni una medida que no
   venga de las fichas. Sin bordes, sin filetes, sin separadores.

   La firma: la ficha del formulario cabalga el borde del campo morado,
   igual que la losa que flota sobre el campo en la portada. Aquí es la
   protagonista, no un adorno.
   =========================================================================== */

/* — cabecera: la página en la que ya estás -------------------------------- */

/* el botón de contacto deja de invitar y pasa a situar */
.boton--aqui { background: var(--l-94); color: var(--l-26); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .boton--aqui:hover { background: var(--l-94); }
}
.boton--aqui:active { transform: none; }

/* — la sección ------------------------------------------------------------ */

.contacto { background: var(--papel); min-height: 100svh; display: grid; }

.contacto__reja {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
}

/* El campo sangra hasta el borde de la ventana por la izquierda, pero el
   texto entra en la misma retícula que el resto del sitio: el cálculo
   reproduce el margen del .contenedor centrado. */
.contacto__decir {
  background: var(--morado);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(56px, 7vw, 100px);
  padding-left: max(var(--marg), calc((100vw - var(--ancho)) / 2));
  padding-right: clamp(1.6rem, 3.4vw, 3.4rem);
}

/* las dos columnas se centran con el mismo criterio: en pantallas muy
   altas el aire se reparte arriba y abajo, nunca se acumula en medio. */
.contacto__alto { max-width: 34rem; }

/* — la ficha que cabalga el borde ----------------------------------------- */

.contacto__lado {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-block: clamp(48px, 6vw, 92px);
  padding-right: max(var(--marg), calc((100vw - var(--ancho)) / 2));
}

.tarjeta {
  width: 100%;
  min-width: 0;
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--r-flota);
  box-shadow: var(--s-alta);
  padding: clamp(1.6rem, 3vw, 2.7rem);
  container-type: inline-size;
}

/* el margen negativo la monta sobre el morado; el crecimiento flex le
   devuelve esos píxeles de ancho, para que la ficha gane lo que cabalga */
.contacto__lado > .tarjeta {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: calc(var(--solape) * -1);
}

@media (max-width: 960px) {
  .contacto__reja { grid-template-columns: minmax(0, 1fr); }
  .contacto__decir {
    padding-inline: var(--marg);
    padding-block: clamp(52px, 10vw, 88px) calc(clamp(52px, 10vw, 88px) + var(--solape));
  }
  .contacto__lado {
    margin-top: calc(var(--solape) * -1);
    padding-inline: var(--marg);
    padding-block: 0 clamp(56px, 10vw, 92px);
  }
  .contacto__lado > .tarjeta { flex: 0 1 auto; margin-left: 0; }
}

/* — el formulario --------------------------------------------------------- */

.forma { scroll-margin-top: clamp(96px, 12vh, 140px); }

.forma__titulo {
  font-size: var(--t-tier);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.05;
}

.forma__reja {
  margin-top: clamp(1.3rem, 2.4vw, 1.9rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.15rem) clamp(0.85rem, 1.5vw, 1.1rem);
}
.campo--ancho { grid-column: 1 / -1; }

/* manda el ancho de la ficha, no el de la ventana */
@container (max-width: 470px) {
  .forma__reja { grid-template-columns: minmax(0, 1fr); }
}

/* — el campo: una caja rellena, nunca una línea --------------------------- */

.campo { display: grid; gap: 0.38rem; margin: 0; }

/* el error va pegado al campo, por delante del texto de ayuda:
   quien se equivoca lee primero qué le falta */
.campo__nombre { order: 1; }
.campo__control { order: 2; }
.campo__error { order: 3; }
.campo__pista { order: 4; }

.campo__nombre {
  font-size: var(--t-cuerpo);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.3;
}
.campo__opcional { font-weight: 400; color: var(--l-41); }

.campo__control {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: var(--r-losa);
  background: var(--l-97);
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-cuerpo);
  line-height: 1.4;
  transition: background-color 180ms var(--ease-out);
}
.campo__control--area {
  min-height: 132px;
  padding-block: 0.85rem;
  resize: vertical;
}
/* el select conserva su indicador nativo: no se añade ningún signo dibujado */
select.campo__control { padding-inline-end: 0.7rem; }

@media (hover: hover) and (pointer: fine) {
  .campo__control:hover { background: var(--l-94); }
}
.campo__control:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  background: var(--l-94);
}

.campo__pista {
  font-size: var(--t-menor);
  color: var(--l-34);
  line-height: 1.45;
}

.campo__error {
  display: none;
  font-size: var(--t-menor);
  font-weight: 700;
  color: var(--l-26);
  line-height: 1.4;
}
.campo[data-mal] .campo__error { display: block; }
.campo[data-mal] .campo__control {
  background: var(--l-94);
  box-shadow: inset 0 0 0 2px var(--morado);
}

/* — la autorización ------------------------------------------------------- */

.campo--marca {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.7rem;
  row-gap: 0.3rem;
  margin-top: 0.35rem;
}
.campo__marca {
  width: 22px;
  height: 22px;
  margin: 0.72rem 0 0;
  accent-color: var(--morado);
}
.campo__marca:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

.campo__nombre--marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 400;
  font-size: var(--t-menor);
  color: var(--l-34);
  line-height: 1.45;
  cursor: pointer;
}
.campo__error--marca { grid-column: 2; }
.campo--marca[data-mal] .campo__marca { outline: 2px solid var(--morado); outline-offset: 3px; }

/* — envío ----------------------------------------------------------------- */

.forma__envio { margin-top: clamp(1.2rem, 2.2vw, 1.8rem); }
.forma__envio[disabled] { background: var(--l-41); cursor: progress; }
.forma__envio[disabled]:active { transform: none; }

/* el estado se anuncia, no se decora */
.forma__aviso {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* el señuelo no existe para quien mira ni para quien escucha: un robot
   que rellena por el name sí lo encuentra, y ahí se delata */
.forma__senuelo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .campo__control { transition: none; }
}


/* ###########################################################################
   MÓVIL

   El eje de la página en móvil es el centro. Un formulario, no: un
   formulario no es prosa, es un instrumento. Con el rótulo centrado
   sobre un campo cuyo texto empieza a la izquierda, el ojo salta en
   cada pregunta, y la casilla de autorización queda flotando lejos de
   lo que autoriza. Así que se centra LO QUE SE LEE —el titular y el
   rótulo del formulario— y se deja al ras de la izquierda LO QUE SE
   RELLENA. Es la única excepción del sitio, y va escrita aquí para
   que se vea que es una decisión y no un descuido.
   ########################################################################### */

@media (max-width: 899px) {

  /* lo que se lee */
  .contacto__decir { text-align: center; }
  .contacto__alto { margin-inline: auto; }
  .forma__titulo { text-align: center; }

  /* la ficha cabalga el borde también aquí, pero con menos vuelo: a
     390 px el solape entero se comía el remate del campo morado */
  .contacto__lado { margin-top: calc(var(--solape) * -0.7); }

  /* lo que se rellena */
  .campo,
  .campo__nombre,
  .campo__pista,
  .campo__error { text-align: left; }

  /* la casilla crece. El blanco de dedo de verdad es el rótulo de al
     lado —44 px de alto y todo el ancho de la ficha—, pero la casilla
     también tiene que poder tocarse sin apuntar. */
  .campo__marca { width: 26px; height: 26px; margin-top: .5rem; }

  /* el envío ocupa el ancho de la ficha: en una columna, un botón
     corto flotando a la izquierda no se lee como el final */
  .forma__envio { width: 100%; }
}