/* ═══════════════════════════════════════════════════════════════════════
   FORMULARIO COMPACTO — v1 (2026-09-09)
   Hoja común para el wizard de solicitud de TODAS las landings.

   Qué arregla:
   · El doble padding (sección 2rem + paso 2rem) dejaba 245 px útiles en un
     móvil de 375: de ahí el campo de tarjeta minúsculo. Ahora el paso va
     casi a sangre y el campo aprovecha el ancho.
   · Los métodos de pago se apilaban al no caber en fila. Pasan a rejilla de
     3 columnas iguales, así que siempre van en línea.
   · Botones con alturas dispares (btn-prev 2px de borde, btn-next sin
     borde). Se igualan con min-height y borde del mismo grosor.
   · Menos aire entre bloques y campos, sin tocar la jerarquía visual.

   Se carga al final del documento para ganar la cascada sin !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Contenedor ─── */
.form-wizard { max-width: 880px; }

/* ─── Barra de pasos ─── */
.wizard-progress { padding: 1rem 1.25rem 0; }
.progress-steps  { gap: .35rem; }
.progress-step {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 .1rem .5rem; font-size: .7rem; line-height: 1.15;
}
.progress-step-num { margin-bottom: .3rem; }

/* ─── Paso ─── */
.wizard-step { padding: 1.5rem 1.5rem 1.25rem; }
.step-title  { font-size: 1.28rem; margin-bottom: .25rem; }
.step-desc   { font-size: .85rem; margin-bottom: 1.15rem; }

/* ─── Botones Sí/No ─── */
.yn-group   { margin-bottom: 1rem; }
.yn-label   { font-size: .85rem; margin-bottom: .5rem; }
.yn-buttons { gap: .5rem; }
.yn-btn {
  padding: .7rem .75rem; font-size: .87rem; border-radius: 8px;
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
}

/* ─── Campos ─── */
.form-row   { gap: .75rem; margin-bottom: .75rem; }
.form-group { margin-bottom: .75rem; }
.form-group label { font-size: .72rem; margin-bottom: .25rem; }
.form-group input,
.form-group select,
.form-group textarea { padding: .68rem .8rem; font-size: .93rem; }

/* ─── Opciones de entrega ─── */
.delivery-options { gap: .5rem; margin-bottom: 1rem; }
.delivery-opt     { padding: .75rem .85rem; gap: .7rem; border-radius: 9px; }
.delivery-opt-info h4 { font-size: .87rem; }
.delivery-opt-info p  { font-size: .76rem; line-height: 1.35; }

/* ─── Resumen de precio ─── */
.price-summary { padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 10px; }
.price-row     { padding: .3rem 0; font-size: .85rem; }
.price-row.total { margin-top: .35rem; padding-top: .6rem; }
.price-row.total span:last-child { font-size: 1.45rem; }
.price-discount { margin-top: .15rem; }

/* ─── Pago ─── */
.payment-section { padding: 1.1rem 1.5rem 1.5rem; }
.payment-title   { font-size: .75rem; margin-bottom: .6rem; }

/* Rejilla: tres columnas iguales, nunca se apilan */
.payment-methods {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem; margin-bottom: .9rem;
}
.pay-method {
  justify-content: center; text-align: center; line-height: 1.1;
  padding: .6rem .4rem; font-size: .82rem; min-height: 46px; gap: .35rem;
}
.pay-method .pm-icon { font-size: 1rem; }

/* El hueco de Stripe ocupa todo el ancho disponible */
#card-element { padding: 15px 14px !important; }
#card-fields .form-group { margin-bottom: .25rem; }

.secure-badges { gap: .9rem; margin-bottom: .9rem; }

.btn-pay {
  padding: .95rem 1.25rem; font-size: 1.02rem; border-radius: 9px; min-height: 52px;
}
.form-legal { margin-top: .6rem; font-size: .72rem; line-height: 1.45; }

/* ─── Navegación entre pasos: los dos botones, misma caja ─── */
.wizard-nav { margin-top: 1.25rem; padding-top: 1rem; gap: .6rem; }
.btn-prev, .btn-next {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .72rem 1.3rem; font-size: .92rem; border-radius: 8px;
  min-height: 46px; border-width: 2px; border-style: solid;
}
/* btn-next no tenía borde: se le pone del color del fondo para igualar altura */
.btn-next { border-color: var(--dorado); }

/* ═══ MÓVIL ═══ */
@media (max-width: 640px) {
  /* Sin esto el paso quedaba con 2rem de la sección + 2rem propios */
  .section-form  { padding-left: .75rem; padding-right: .75rem; }
  .form-wizard   { border-radius: 14px; }
  .wizard-progress { padding: .8rem .7rem 0; }
  .progress-step { font-size: .6rem; letter-spacing: .2px; }
  .progress-step-num { width: 21px; height: 21px; font-size: .72rem; margin-bottom: .25rem; }

  .wizard-step     { padding: 1.25rem .9rem 1.1rem; }
  .payment-section { padding: 1rem .9rem 1.25rem; }
  .step-title      { font-size: 1.15rem; }
  .step-desc       { font-size: .82rem; margin-bottom: 1rem; }

  .price-summary { padding: .9rem .95rem; }
  .price-row     { font-size: .82rem; }
  .price-row.total span:last-child { font-size: 1.3rem; }

  /* Icono arriba y texto debajo: caben las tres en fila sin cortar */
  .pay-method {
    flex-direction: column; gap: .15rem;
    font-size: .72rem; padding: .5rem .2rem; min-height: 54px;
  }
  .pay-method .pm-icon { font-size: 1.05rem; }

  .secure-badges { gap: .55rem; }
  .sec-badge     { font-size: .65rem; }

  .btn-pay { font-size: .95rem; padding: .9rem .6rem; }

  .wizard-nav { flex-wrap: nowrap; }
  .btn-prev { padding: .72rem .9rem; font-size: .85rem; flex-shrink: 0; }
  .btn-next { padding: .72rem 1rem; font-size: .85rem; flex: 1; }
}

/* ─── Aire entre el encabezado de la sección y el wizard ─── */
.section-form .section-sub { margin-bottom: 1.75rem; }

@media (max-width: 640px) {
  .section-form .section-sub { margin-bottom: 1.15rem; font-size: .9rem; }
  .section-form .section-title { margin-bottom: .5rem; }

  /* Campos aún más juntos: en el móvil cada fila cae a una columna y el
     ritmo vertical se dispara si se mantiene el margen de escritorio */
  .form-row   { gap: .6rem; margin-bottom: .6rem; }
  .form-group { margin-bottom: .6rem; }
  .form-group input,
  .form-group select,
  .form-group textarea { padding: .62rem .75rem; }

  .yn-group   { margin-bottom: .8rem; }
  .yn-btn     { font-size: .84rem; padding: .65rem .6rem; }
  .yn-label   { font-size: .83rem; margin-bottom: .45rem; }

  .delivery-opt { padding: .7rem .75rem; gap: .6rem; }
}

/* ─── Móvil pequeño: el wizard va a sangre ───────────────────────────────
   Stripe conmuta su Card Element al modo compacto (solo "Número de tarjeta"
   y una flecha) cuando el iframe baja de ~320 px. En una pantalla de 375
   eso solo se evita quitando el margen lateral de la sección: así el campo
   llega a ~330 px y se ven número, caducidad y CVC a la vez. */
@media (max-width: 480px) {
  .section-form { padding-left: 0; padding-right: 0; }
  .form-wizard  { border-radius: 0; border-left: none; border-right: none; }
  .wizard-step     { padding: 1.25rem .7rem 1.1rem; }
  .payment-section { padding: 1rem .55rem 1.25rem; }
  .wizard-progress { padding: .8rem .5rem 0; }
  #card-element { padding: 14px 6px !important; }
  /* El resto del paso conserva su margen; solo el campo de Stripe lo estira */
  #card-fields .form-group label { padding-left: .15rem; }
}