/* ============================================================
   OPTIMATIZA — pagos
   Hoja de /formas-de-pago/, la unica pagina que usa componentes pg-.
   Se carga DESPUES de corp.css y solo aporta lo que corp.css no
   tiene. Ni un color suelto: todo sale de los mismos tokens, asi
   que si la marca cambia, esta hoja cambia con ella.
   ============================================================ */

/* --- bloque de accion de un servicio ------------------------------------
   pagos.js inserta .pg-tarjeta como PRIMER hijo cuando ese servicio tiene
   precio Y enlace reales. Mientras no los tenga, el bloque ya trae en el
   HTML el camino escrito y se ve completo: aqui nunca hay un boton muerto
   ni un hueco esperando datos. */
.pg-pago{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-top:24px}
.pg-tarjeta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
/* La letra chica del cobro. Es la unica linea de la pagina que el visitante
   lee justo antes de decidir, asi que no baja de 14px ni de 4.5:1 (--dim
   sobre blanco da 5.1:1). */
.pg-nota{font-size:var(--fs-label);color:var(--dim);line-height:1.6;max-width:52ch}

/* --- cobros publicados --------------------------------------------------
   El unico bloque dinamico de la pagina. Mientras no haya un cobro con
   concepto, monto y enlace a la vez, pagos.js no pinta nada y `:empty` lo
   saca del flujo: la seccion se lee entera sin el. De ahi que el contenedor
   se escriba en el HTML sin un solo espacio dentro, porque un salto de linea
   ya cuenta como hijo y `:empty` dejaria de aplicar. */
.pg-slot:empty{display:none}
.pg-slot{margin-top:24px}
/* El monto no puede quedar como texto corrido: es el dato que decide.
   tabular-nums lo alinea entre tarjetas, que es lo que hace que dos precios
   uno al lado del otro se puedan comparar de un vistazo. */
.pg-price{font-family:var(--ffd);font-weight:700;color:var(--ink);line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);margin:2px 0 6px}
.pg-slot .card .pg-pago{margin-top:auto;padding-top:16px}

/* --- rotulo/valor dentro de una tarjeta ---------------------------------
   .card ul no sirve para comparar rutas renglon a renglon porque no tiene
   estilo de rotulo. Toma el mismo borde y ritmo que .card ul para no romper
   la tarjeta. */
.pg-meta{margin:14px 0 4px;padding:14px 0 0;border-top:1px solid var(--line)}
.pg-meta dt{font-family:var(--ffd);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.07em;color:var(--dim)}
.pg-meta dd{font-size:var(--fs-sm);color:var(--body);line-height:1.5;margin:3px 0 12px}
.pg-meta dd:last-of-type{margin-bottom:0}

/* Segundo encabezado dentro de una misma columna de .cols2: necesita aire
   propio porque no lo abre una seccion. */
.pg-titulo2{margin-top:26px}

/* --- compromisos negativos ----------------------------------------------
   El palomeo verde de .checks sobre una lista de prohibiciones se lee al
   reves ("si hago esto"), que es justo el malentendido a evitar en una
   pagina de pagos. El marcador es decorativo: el sentido va en el texto. */
/* Se monta sobre .checks (misma geometria) y solo cambia el marcador. La hoja se carga
   despues de corp.css, asi que este ::before gana al palomeo sin subir especificidad. */
.pg-never li::before{content:"\00D7";color:var(--danger)}

/* --- centrar una .cta-row dentro de .cta-band ---------------------------
   .cta-band centra su texto, pero .cta-row es flex sin justify-content: dos
   botones quedarian a la izquierda bajo un titulo centrado. */
.pg-center{justify-content:center}

/* --- ficha administrativa -----------------------------------------------
   La rejilla .deliverables de corp.css con los rotulos en versalita: es el
   bloque que se lee cuando alguien reenvia la pagina a quien autoriza el
   pago, y ahi el registro correcto es el de una ficha, no el de una tarjeta
   de marketing. */
/* A cinco columnas cada celda mide ~200px y el valor cae en una columna alta y
   estrecha. Con 280px de minimo caben tres por fila y el texto se lee como una
   ficha, no como una lista vertical. */
.pg-ficha{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pg-ficha .deliverable b{text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-label);color:var(--petrol)}
.pg-ficha .deliverable span{color:var(--body)}

/* --- responsive ---------------------------------------------------------
   A 360px de ancho los botones de pago deben poder ocupar la linea completa:
   un boton de tarjeta cortado a la mitad es un pago que no ocurre. */
@media(max-width:420px){
  .pg-pago,.pg-tarjeta{align-items:stretch}
  .pg-tarjeta .btn-primary{width:100%}
  .pg-nota{max-width:none}
}