/* =============================================================
   OFERTA Y PAGO — medidos en el original a 390 px
   =============================================================
   Columna de 444 px como máximo (MUI maxWidthXs), fondo crema
   rgb(253,249,242), cabecera blanca fija con «Continuar». */
.cuerpo-oferta { background: #fff; }
.of-pagina { min-height: 100svh; display: flex; flex-direction: column; background: #fff; }
.of-cab { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: rgba(0,0,0,.06) 0 1px 8px; }
.of-cab-dentro { max-width: 444px; margin: 0 auto; padding: 8px 16px; display: flex; justify-content: flex-end; align-items: center; }
.of-continuar { height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--verde); color: #fff; cursor: pointer;
  font: 600 14px/14px Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.39998px; min-width: 64px; }
.of-bloque { background: rgb(253,249,242); }
.of-bloque { padding: 24px 16px 48px; }
.of-bloque > * { max-width: 412px; margin-left: auto; margin-right: auto; }
.of-centro { text-align: center; }
.of-mb40 { margin-bottom: 40px; }
.of-mb24 { margin-bottom: 24px; }
.of-mt40 { margin-top: 40px; }

.of-mapa { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; }
.of-mapa-fondo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 360px; opacity: .5; object-fit: contain; pointer-events: none; }
.of-aro { width: 132px; height: 132px; border-radius: 50%; padding: 4px; position: relative;
  background: conic-gradient(rgb(236,72,153), rgb(249,115,22), rgb(20,184,166), rgb(59,130,246), rgb(236,72,153)); }
.of-foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #000; }
.of-check { position: absolute; right: 4px; top: 8px; width: 28px; height: 28px; }
.of-chip { display: inline-block; background: #fff; border-radius: 40px; padding: 4px 16px; margin-bottom: 16px; box-shadow: rgba(0,0,0,.08) 0 1px 4px; }
.of-chip span { font-weight: 600; font-size: 14px; line-height: 1; }
.of-chip .verde { color: rgb(52,199,89); }
.of-h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.3; font-weight: 700; color: #000; }
.of-sub { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--gris); }
.of-h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.34; font-weight: 700; color: #000; }
.of-gris14 { margin: 0; font-size: 14px; line-height: 1.46; color: var(--gris); }

.of-tarjeta { position: relative; background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.1); border-radius: 16px; overflow: hidden; padding: 16px; margin-bottom: 16px; }
.of-tarjeta-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.of-tarjeta-cab > img { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.of-tt { flex: 1; min-width: 0; }
.of-tt1 { margin: 0 0 2px; font-size: 18px; font-weight: 700; line-height: 1.36; color: #000; }
.of-insignia { flex-shrink: 0; padding: 6px 10px; border-radius: 12px; background: var(--barra); }
.of-insignia p { margin: 0; line-height: 1.5; color: #fff; font-size: 13px; font-weight: 500; }
.of-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 12px; margin-bottom: 8px; }
.of-fila p, .of-fb p { margin: 0; font-size: 14px; line-height: 1.46; color: #000; }
.of-fila-der { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.of-fila-der img { width: 20px; height: 20px; }
.of-pct { margin: 0; font-weight: 600; font-size: 14px !important; line-height: 1 !important; }
.of-velado { position: relative; min-height: 92px; }
.of-borroso { filter: blur(4px); -webkit-filter: blur(4px); padding-top: 4px; }
.of-fb { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.punto { width: 16px; height: 16px; border-radius: 50%; }
.punto.naranja { background: rgba(255,136,51,.5); }
.punto.verde { background: rgba(52,199,89,.5); }
.of-velo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.of-oscuro { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 8px;
  background: var(--tinta); color: #fff; cursor: pointer; font: 600 14px/1 Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.39998px; }
.of-oscuro img { width: 20px; height: 20px; }

.of-lista { background: rgba(52,199,89,.06); border: 1px solid rgba(52,199,89,.2); border-radius: 16px; padding: 16px; }
.of-li { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.of-li img { width: 20px; height: 20px; flex-shrink: 0; }
.of-li p { margin: 0; font-size: 16px; line-height: 1.5; color: #000; }

/* ---------- pago ---------- */
.of-pago { background: rgb(253,249,242); padding: 24px 16px 64px; scroll-margin-top: 16px; }
.of-pago-dentro { max-width: 412px; margin: 0 auto; }
.of-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.of-total-t { margin: 0; font-weight: 600; font-size: 16px; line-height: 1; color: #000; }
.of-tachado { margin: 0 8px 0 0; font-size: 16px; line-height: 1.5; color: rgb(255,59,48); text-decoration: line-through; }
.of-precio { font-weight: 700; font-size: 20px; line-height: 1.38; color: var(--tinta); }
.of-ahorro { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.of-ahorro p { margin: 0; font-weight: 600; font-size: 14px; line-height: 1; color: rgb(255,59,48); }
.of-metodos { display: flex; flex-direction: column; border-radius: 16px; padding-top: 16px; max-width: 326px; margin: 0 auto; }
.of-pestanas { display: flex; gap: 8px; margin-bottom: 16px; }
.of-pestana { flex: 1; min-height: 56px; border: 2px solid var(--borde); border-radius: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; background: transparent; -webkit-tap-highlight-color: transparent; }
.of-pestana:hover { opacity: .8; }
.of-pestana.elegida { border-color: var(--verde); box-shadow: var(--verde-claro) 0 0 0 2px; }
.of-pestana img { width: auto; height: 18px; max-width: 71px; }
#pestana-billetera img { height: 50px; max-width: 100%; }
#pestana-billetera { border-color: transparent; }
#pestana-billetera.elegida { border-color: var(--verde); }
.of-express { min-height: 48px; margin-bottom: 8px; }
.of-gpay-falso { width: 100%; height: 48px; border-radius: 8px; border: 0; background: #000; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; cursor: pointer; }
.of-gpay-falso img { height: 30px; }
/* La caja gris de la tarjeta (como el formulario de Solidgate del original) */
.of-caja-tarjeta { background: #8E8D96; border-radius: 16px; padding: 22px 16px 18px; margin: 0; min-height: 211px; }
.of-chip-tarjeta { position: relative; width: 46px; height: 28px; border-radius: 4px; background: linear-gradient(135deg, #e6e8ec, #c9ccd2); margin: 4px 0 23px 0; opacity: .85; }
.of-chip-tarjeta span { position: absolute; left: 6px; top: 5px; width: 7px; height: 6px; border-radius: 1px; background: rgba(255,255,255,.9); }
.of-chip-tarjeta i { position: absolute; bottom: 4px; width: 5px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.9); }
.of-chip-tarjeta i:nth-of-type(1) { left: 5px; } .of-chip-tarjeta i:nth-of-type(2) { left: 12px; } .of-chip-tarjeta i:nth-of-type(3) { left: 19px; } .of-chip-tarjeta i:nth-of-type(4) { left: 26px; }
.of-campo-falso { height: 50px; background: #fff; border: 1px solid #d9d9de; border-radius: 10px; padding: 0 14px; display: flex; align-items: center;
  font: 400 17px/1 Menlo, ui-monospace, monospace; letter-spacing: 2.5px; color: #8a8a93; margin-bottom: 8px; }
.of-dos { display: flex; gap: 8px; } .of-dos .of-campo-falso { flex: 1; margin-bottom: 0; }
.of-campo-falso.cvv { justify-content: space-between; }
.of-campo-falso.cvv b { font: 600 11px/14px Arial, sans-serif; letter-spacing: 0; width: 15px; height: 15px; border: 1.5px solid #8a8a93; border-radius: 50%; text-align: center; }
.of-confirmar { width: 100%; height: 52px; margin-top: 8px; border: 0; border-radius: 8px; background: var(--verde); color: #fff; display: flex; align-items: center;
  justify-content: center; gap: 12px; font: 500 17px/1 Inter, sans-serif; letter-spacing: 1.2px; cursor: pointer; }
.of-confirmar svg { width: 20px; height: 20px; margin-top: -3px; }
.of-confirmar:disabled { opacity: .7; cursor: default; }
.of-aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #FFEDEB; color: #B3261E; font-size: 14px; line-height: 1.4; text-align: center; }
.of-aviso.info { background: #FFF7D6; color: #6B5300; }
.of-renovacion { margin: 8px 0 0; font-size: 12px; line-height: 1.34; color: var(--gris); text-align: center; }
.of-seguro { display: flex; flex-direction: column; align-items: center; }
.of-seguro-t { display: flex; align-items: center; gap: 6px; margin: 4px 0 24px; }
.of-seguro-t img { width: 20px; height: 20px; }
.of-seguro-t p { margin: 0; font-size: 14px; line-height: 1.46; color: var(--barra); }
.of-sellos { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.of-sellos img { height: 40px; width: auto; }

/* ---------- pie ---------- */
.of-pie { background: var(--tinta); color: #fff; padding: 56px 24px 64px; min-height: 340px; display: flex; flex-direction: column; }
.of-pie-t { margin: 0 0 24px; font-size: 24px; line-height: 1.34; font-weight: 700; color: #fff; max-width: 260px; }
.of-pie-enlaces { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.of-pie a { font-size: 12px; line-height: 1.34; color: #fff; text-decoration: none; }
.of-pie-correo { margin: 0 0 8px; }
.of-pie-dir { margin: 8px 0 0; font-size: 12px; line-height: 1.28; color: rgba(255,255,255,.2); }

/* El iframe de Stripe se pinta dentro de la caja gris */
#stripe-tarjeta { min-height: 88px; }

/* Escritorio (≥ 600 px): columna de 444 px con 24 px de margen, como el original */
@media (min-width: 600px) {
  .of-cab-dentro { padding-left: 24px; padding-right: 24px; }
  .of-bloque, .of-pago { padding-left: 24px; padding-right: 24px; }
  .of-bloque > *, .of-pago-dentro { max-width: 396px; }
  .of-cab-dentro { max-width: 444px; }
  .of-pie { padding-left: calc(50% - 198px); padding-right: calc(50% - 198px); }
}