/* =====================================================================
   RV25 Relojería · SOBRE PEDIDO
   ---------------------------------------------------------------------
   "¿No está el que buscas? Te lo conseguimos."

     .pedido-principal  título, texto y un solo campo ("¿Qué reloj
                        buscas?") con el botón que abre WhatsApp
     .pedido-datos      las condiciones como una lista elegante: cifra
                        grande a la izquierda (10–15 · 50% · Gratis),
                        qué es y qué significa a la derecha, separadas
                        por líneas finas

   Celular: uno debajo del otro. Computador (≥960px): dos columnas,
   el formulario a la izquierda y las condiciones a la derecha.
   ===================================================================== */

.pedido {
  margin-top: var(--seccion);
  padding: 72px var(--margen);
  background: var(--arena);
}
.pedido > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }

.pedido h2 { font-size: clamp(32px, 8.4vw, 60px); line-height: 1.04; }
.pedido-texto p { max-width: 34em; margin-top: 14px; font-size: 18px; }

/* --- Formulario --- */
.pedido-form { margin-top: 30px; }
.pedido-form label { display: block; margin-bottom: 8px; font-weight: 700; }

.pedido-campo { display: grid; gap: 10px; }
.pedido-campo input {
  width: 100%; min-height: 56px; padding: 0 18px;
  border: 2px solid var(--arena-2); border-radius: var(--radio-pildora);
  background: var(--fondo); color: var(--tinta);
  font: 400 17px var(--letra);
}
.pedido-campo input::placeholder { color: var(--tinta-placeholder); }
.pedido-campo input:focus { outline: none; border-color: var(--noche); }

.llegada { margin-top: 12px; font-size: 16px; color: var(--tinta); }
.llegada::first-letter { text-transform: uppercase; }

/* --- Condiciones: cifra grande + explicación --- */
.pedido-datos { margin-top: 48px; margin-bottom: 0; border-top: 1px solid var(--arena-hover); }
.pedido-datos div {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  grid-template-areas: "cifra etiqueta" "cifra explica";
  column-gap: 20px; row-gap: 4px; align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--arena-hover);
}
.pedido-datos dt {
  grid-area: etiqueta; align-self: end;
  font: 600 11px/1.2 var(--letra); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.pedido-cifra {
  grid-area: cifra; margin: 0;
  font: 400 clamp(34px, 9vw, 44px)/1 var(--titulo); letter-spacing: -0.02em;
  color: var(--tinta);
  white-space: nowrap;
}
.pedido-explica { grid-area: explica; align-self: start; margin: 0; font-size: 15px; line-height: 1.45; color: var(--tinta); }

@media (min-width: 720px) {
  .pedido-campo { grid-template-columns: 1fr auto; }
}

/* Computador: formulario a la izquierda, condiciones a la derecha */
@media (min-width: 960px) {
  .pedido {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px; align-items: center;
    padding-block: 96px;
  }
  .pedido > * { max-width: none; margin: 0; }
  .pedido { padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
  .pedido-datos { margin-top: 0; }
  .pedido-datos div { grid-template-columns: 8.5rem minmax(0, 1fr); padding: 26px 0; }
}