/* ==========================================================================
   Cuentela · que-me-llamen.css — «Quiero que un asesor me llame»
   --------------------------------------------------------------------------
   BACKOFFICE-01 F1. Lo cargan SÓLO la portada y las landings `/para/{slug}`,
   igual que `comprobante.css` es sólo de `/r/`: lo propio de unas páginas va
   FUERA de la hoja compartida, que pagan también `/t`, `/c`, `/f`, `/p`, `/r`,
   `/l` y `/s` —y `/p` va al filo de su presupuesto—.

   Casi nada propio, y a propósito: los campos son las piezas de la casa
   (`.campo`, `.campo__etiqueta`, `.campo__control`, `.campo__ayuda`,
   `.campo__error`, `.boton--ancho` de `estilos.css`), la tarjeta es la tesela
   del §10 y la cabeza es la de cualquier franja. Todos los colores son tokens
   del §1 de `estilos.css`; ni un hexadecimal aquí.
   ========================================================================== */

/* ----- La franja: el porqué a la izquierda, el formulario a la derecha ----- */

.que-me-llamen__rejilla {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 880px) {
  .que-me-llamen__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* Dentro de la rejilla la cabeza no necesita el respiro de abajo que le da
   el §10.2: la separa el `gap`. */
:is(.pagina-portada, .pagina-landing) .que-me-llamen__cabeza {
  margin-bottom: 0;
}

/* «¿Prefieres llamar tú?»: la salida para quien no quiere escribir nada, y la
   que queda si el guion no llega. El número vive dentro del renglón, así que
   le toca el mínimo de 24 px de WCAG 2.5.8, con relleno sólo arriba y abajo
   para no separarlo del punto que lo cierra. */
.que-me-llamen__llamar {
  margin: var(--esp-4) 0 0;
  color: var(--texto-tenue);
}

.que-me-llamen__llamar a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
  font-weight: 600;
}

/* El número y el punto que lo cierra van juntos: sin esto, a 360 px el punto
   se quedaba solo en el renglón de abajo. */
.que-me-llamen__sin-corte {
  white-space: nowrap;
}

/* ----- La tarjeta del formulario ----- */

/* `position: relative` no es adorno: es el ancla del campo trampa, que se
   recorta a un píxel DENTRO de la tarjeta y no puede asomar fuera de ella. */
.que-me-llamen__tarjeta {
  position: relative;
  padding: var(--esp-5);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tesela);
  box-shadow: var(--sombra-tesela);
}

@media (max-width: 480px) {
  .que-me-llamen__tarjeta {
    padding: var(--esp-4);
  }
}

/* Sin JavaScript el formulario no puede mandar nada —el guion es quien lo
   envía—: no se pinta, y queda «¿Prefieres llamar tú?» con el número. */
@media (scripting: none) {
  .que-me-llamen__tarjeta {
    display: none;
  }
}

/* `[hidden]` del navegador pierde contra cualquier `display` de autor; aquí
   no hay ninguno, pero el formulario se esconde por guion al terminar y no se
   deja al azar. */
.que-me-llamen__formulario[hidden] {
  display: none;
}

.que-me-llamen__opcional {
  font-weight: 400;
  color: var(--texto-tenue);
}

/* El control mal llenado: dos píxeles de borde en `--peligro`, como en la
   autofactura. El color no es la única señal: el error se escribe junto al
   campo y el foco se va a él. */
.que-me-llamen .campo__control[aria-invalid='true'] {
  border: 2px solid var(--peligro);
}

/* ----- El consentimiento ----- */

/* La casilla se toca con el pulgar: el renglón entero es el blanco, 44 px de
   alto como mínimo, y el borde de `--borde-control` (3:1) dice dónde empieza
   y dónde acaba lo que se toca. */
.que-me-llamen__casilla {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--esp-3);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-chico);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.que-me-llamen__casilla input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accion);
  cursor: inherit;
}

.que-me-llamen__casilla:has(input[aria-invalid='true']) {
  border: 2px solid var(--peligro);
}

.que-me-llamen__aviso {
  margin: var(--esp-2) 0 0;
  font-size: 0.875rem;
  color: var(--texto-tenue);
}

/* El enlace al aviso vive en un renglón: 24 px de WCAG 2.5.8, igual que el
   «Portada» del pie. */
.que-me-llamen__aviso a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}

/* ----- El campo trampa ----- */

/* Lo llena un robot, no una persona: recortado a un píxel —el mismo patrón
   del texto sólo para lectores de pantalla, pero aquí también fuera del árbol
   de accesibilidad con `aria-hidden` e `inert`—. El campo y su etiqueta miden
   un píxel ELLOS MISMOS, no sólo su caja: así no cuentan como blanco táctil
   ni como texto pintado en las pasadas de `pruebas_web/`. */
.que-me-llamen__trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.que-me-llamen__trampa label,
.que-me-llamen__trampa input {
  display: block;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* ----- El estado del envío ----- */

/* Vive SIEMPRE en el árbol —una región viva que nace oculta no siempre se
   anuncia al llenarse—; vacía no mide nada. El tono lo pone el guion en
   `data-tono`. */
.que-me-llamen__estado {
  font-size: 0.9375rem;
}

.que-me-llamen__estado[data-tono='enviando'],
.que-me-llamen__estado[data-tono='error'] {
  margin-top: var(--esp-3);
}

.que-me-llamen__estado[data-tono='enviando'] {
  color: var(--texto-tenue);
}

.que-me-llamen__estado[data-tono='error'] {
  padding: var(--esp-3);
  border: 1px solid var(--peligro);
  border-radius: var(--radio-chico);
  background: var(--peligro-suave);
  color: var(--texto);
  font-weight: 600;
}

/* El acuse: verde aclarado con el texto normal encima, nunca el nopal como
   letra —el mismo trato que `.factura-publica__acuse`—. Ocupa el sitio del
   formulario, que ya se fue. */
.que-me-llamen__estado[data-tono='exito'] {
  padding: var(--esp-4);
  border-radius: var(--radio-chico);
  background: var(--exito-suave);
  color: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.que-me-llamen__estado:focus {
  outline: none;
}

.que-me-llamen__estado:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ----- La barra fija de las landings: dos salidas ----- */

/* «Abre tu tienda» y «Que me llamen» van juntos en la barra. En pantalla
   angosta comparten renglón a partes iguales debajo del texto: dos botones
   que envuelven por su cuenta harían crecer la barra más allá del hueco que
   le reserva `--alto-cta` (152 px), y el foco quedaría debajo de ella. */
@media (max-width: 560px) {
  .pagina-landing .barra-cta__enlaces {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pagina-landing .barra-cta__enlaces .boton {
    padding: 0 var(--esp-3);
    font-size: 0.9375rem;
    text-align: center;
  }
}