/* comprar.css — modal de compra del disco (wizard). Adaptado del checkout
   de Balafon (form-04: asaas.php + wizard en pasos), simplificado acá:
   sin split niño/adulto, sin grupos, cobro único con selector de método
   (Pix/Boleto/Cartão) en vez de suscripción mensual. Reusa el shell
   .modal/.modal__header/.modal__cuerpo ya existente del sitio — esto solo
   define lo de adentro. */

.lm-honeypot { display: none !important; }

/* Fondo tierra clarito + textura de grano del sitio, propio de este
   modal — el shell general (.modal__card/.modal__header) usa
   --color-fondo (casi blanco) para el resto del sitio, acá lo escopeamos
   solo a #hero-08-modal-comprar para no tocar otros modales (ej. el gate
   del Auditório). */
/* Verde de WhatsApp para su botón. Texto oscuro: con blanco encima el
   contraste no llega a 4.5:1. */
#hero-08-modal-comprar {
  --color-whatsapp:       #25D366;
  --color-whatsapp-texto: #0B2E17;
}

#hero-08-modal-comprar .modal__header,
#hero-08-modal-comprar .modal__card {
  background-color: var(--color-superficie);
  background-image: var(--t6-h), var(--t6-v);
}

/* Header: logo centrado (reemplaza el título de texto), X esquinada en
   vez de compartir la fila con el título — mismo criterio que usa
   Balafon para su modal de checkout. Línea divisoria más marcada, en el
   marrón del sitio, con más aire arriba/abajo. */
#hero-08-modal-comprar .modal__header {
  position:            relative;
  justify-content:     center;
  padding-top:         var(--espacio-md);
  padding-bottom:       var(--espacio-md);
  border-bottom-color: color-mix(in srgb, var(--color-texto-3) 30%, transparent);
}
.comprar-modal__logo {
  height: 26px;
  width:  auto;
}
#hero-08-modal-comprar .modal__cerrar {
  position: absolute;
  top:      var(--espacio-sm);
  right:    var(--espacio-sm);
}

/* Menos aire arriba que el .modal__cuerpo base (24px): con el header ya
   separado por su línea, 24 más empujaba todo el contenido hacia abajo. */
.comprar-modal__cuerpo {
  padding-top:     var(--espacio-sm);
  scrollbar-width: none;
}
.comprar-modal__cuerpo::-webkit-scrollbar { display: none; }

/* Línea de contexto — qué se compra y cuánto cuesta, arriba de todas las
   pantallas del modal. Mismo lenguaje que el título de Presentear (cursiva
   display entre dos trazos dorados) y en el mismo alto que tenía como texto
   suelto: el modal entra justo en pantalla. Ningún renglón se parte: lo que
   no entra se recorta con "…" (el nombre), el precio nunca. */
.comprar-modal__contexto:not([hidden]) {
  display:     block;
  margin:      0 0 calc(var(--espacio-sm) - 1px);
  font:        italic 500 clamp(16px, 4.4vw, 18px)/1.2 var(--fuente-display);
  text-align:  center;
  color:       var(--color-texto);
}
.comprar-modal__contexto-item {
  display:     flex;
  align-items: center;
  white-space: nowrap;
}
.comprar-modal__contexto-item::before,
.comprar-modal__contexto-item::after {
  content:    '';
  flex:       1;
  min-width:  12px;
  height:     1px;
  background: var(--color-acento);
}
.comprar-modal__contexto-item::before { margin-right: 10px; }
.comprar-modal__contexto-item::after  { margin-left:  10px; }
.comprar-modal__contexto-disco {
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.comprar-modal__contexto-preco { flex-shrink: 0; margin-left: 0.35em; }

/* Cada texto con dos versiones: compra o regalo, según la clase del modal. */
.comprar-modal__so-presente { display: none; }
.comprar-modal--presente .comprar-modal__so-presente { display: inline; }
.comprar-modal--presente .comprar-modal__so-compra { display: none; }
/* Solo primera compra: "volte para esta janela" y el aviso del mail. Con
   sesión en el aparato, lo comprado aparece solo en el reproductor. Va
   después de las de arriba: a igual especificidad, gana esconder. */
.comprar-modal--com-sessao .comprar-modal__so-primeira { display: none; }

/* ── Campos de formulario — base compartida, primera vez que este
   proyecto tiene un form real. Label en 13px (11px se lee con esfuerzo en
   el celu) y campo en 16px: con letra menor, iOS agranda la pantalla al
   tocar el campo. ── */
.lm-campo-wrap {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  var(--espacio-sm);
}
.lm-campo-label {
  font-family: var(--fuente-cuerpo);
  font-size:   var(--texto-sm);
  font-weight: 500;
  color:       var(--color-texto);
}
.lm-req { color: var(--color-acento-2); font-weight: 400; }
.lm-campo {
  font-family:   var(--fuente-cuerpo);
  font-size:     1rem;                                 /* 16px */
  padding:       10px 14px;
  border:        1px solid rgba(var(--color-borde-rgb), 0.9);
  border-radius: var(--radio);
  background:    var(--color-fondo);
  color:         var(--color-texto);
  width:         100%;
  transition:    border-color var(--transicion);
}
.lm-campo::placeholder { color: var(--color-texto-3); opacity: 0.6; }
.lm-campo:focus {
  outline:      none;
  border-color: var(--color-acento-2);
}
/* E-mail fixo da conta verificada: se lê, não se edita. */
.lm-campo[readonly] {
  background: transparent;
  color:      var(--color-texto-2);
}
.lm-campo--error { border-color: #c0392b; }
.lm-error {
  font-size: 0.75rem;                                  /* 12px */
  color:     #c0392b;
  display:   none;
}
.lm-error--visible { display: block; }

/* ── Indicador de avance — círculos numerados + línea, arma la cantidad
   real de círculos en JS (renderProgreso), excluyendo el paso 0 (aviso). ── */
/* :not([hidden]) — un display fijo acá le gana en cascada al atributo
   hidden que pone el JS (author CSS vs. hoja de estilos del navegador),
   dejaba esto visible en el paso 0 aunque el JS lo escondiera bien. */
.comprar-modal__progreso:not([hidden]) {
  position:        relative;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin:          0 0 var(--espacio-md);
}
.comprar-modal__progreso-track,
.comprar-modal__progreso-linea-fill {
  position:  absolute;
  top:       50%;
  left:      15px;
  height:    3px;
  transform: translateY(-50%);
}
.comprar-modal__progreso-track {
  right:         15px;
  background:    var(--color-borde);
  border-radius: 2px;
}
.comprar-modal__progreso-linea-fill {
  width:      0%;
  background: var(--color-acento-2);
  transition: width 0.25s ease;
}
.comprar-modal__progreso-paso {
  position:        relative;
  z-index:         1;
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--fuente-cuerpo);
  font-size:       var(--texto-xs);
  font-weight:     700;
  background:      var(--color-borde);
  color:           var(--color-texto-2);
  transition:      background var(--transicion), color var(--transicion);
}
.comprar-modal__progreso-paso--hecho,
.comprar-modal__progreso-paso--activo {
  background: var(--color-acento-2);
  color:      var(--color-contraste-2);
}

/* Título del paso — centrado y en color de texto (el verde sobre la
   superficie clara no se lee bien). */
.comprar-modal__paso-titulo {
  font-family:   var(--fuente-display);
  font-style:    italic;
  font-weight:   400;
  font-size:     var(--texto-lg);
  text-align:    center;
  color:         var(--color-texto);
  margin-bottom: var(--espacio-md);
}

/* Paso 0 — aviso, sin barra de progreso ni nav compartida. Dos zonas: un
   verso de bienvenida y la instrucción a retener, y un solo botón. */
.comprar-modal__paso--aviso {
  text-align: center;
}
/* Zona 1 — verso de 4 líneas en la voz de la casa (serif). El clamp
   sostiene cada línea en una sola: tope 22px en desktop, baja sola en
   pantallas angostas en vez de partirse.
   line-height en em se calcula acá y se hereda como largo fijo: las 4
   líneas miden lo mismo aunque el dominio vaya en otra fuente y otro
   tamaño, y quedan equiespaciadas. */
.comprar-modal__verso {
  font-family:   var(--fuente-display);
  font-style:    italic;
  font-weight:   400;
  font-size:     clamp(0.9375rem, 4.4vw, 1.375rem);   /* 15px → 22px */
  line-height:   1.25em;
  white-space:   nowrap;
  color:         var(--color-texto);
  margin-bottom: var(--espacio-sm);
}
.comprar-modal__verso-linha { margin: 0 0 2px; }
.comprar-modal__verso-linha:last-child { margin-bottom: 0; }
/* Dominio a memorizar — verde + peso (no es clickeable, es un dato para
   recordar). */
.comprar-modal__dominio {
  font-family:    var(--fuente-cuerpo);
  font-style:     normal;
  font-size:      0.9375rem;                         /* 15px */
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          var(--color-acento-2);
}
/* Zona 2 — la instrucción. Es lo único en caja con fondo propio y borde de
   acento. 15px no está en la escala base (salta de 13 a 17): el escalón
   intermedio es justo lo que la separa del resto sin leerse como titular. */
.comprar-modal__chave {
  background:    var(--color-fondo);
  border:        1px solid color-mix(in srgb, var(--color-acento-2) 35%, transparent);
  border-radius: var(--radio);
  padding:       14px;
  margin-bottom: var(--espacio-sm);
}
.comprar-modal__chave-texto {
  font-family: var(--fuente-cuerpo);
  font-size:   0.9375rem;                            /* 15px */
  font-weight: 500;
  line-height: 1.4;
  color:       var(--color-texto);
  margin:      0;
}

/* ── Conta no passo 1 ─────────────────────────────────────────────────────
   Aviso de mail en uso debajo del campo. :not([hidden]): se esconde desde
   comprar.js y un display fijo le ganaría al atributo. */
.comprar-modal__email-conta:not([hidden]) {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--espacio-xs);
}
.comprar-modal__email-conta {
  font-size: var(--texto-xs);
  color:     var(--color-acento-2);
}
.comprar-modal__email-conta .comprar-modal__btn-secundario { margin: 0; }

/* ── Selector de método de pago — 3 opciones tipo tarjeta, mismo espíritu
   que los grupo-card de Balafon pero sin foto. ── */
/* margin-bottom suma a los 24px del nav: 32px hasta Voltar/Avançar. */
.comprar-modal__metodos {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--espacio-sm);
  margin-bottom:         var(--espacio-xs);
}
.comprar-modal__metodo {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  align-items:    center;
  /* Arriba y no centrado: las notas tienen largos distintos y centrando
     cada nombre quedaba a otra altura. */
  justify-content: flex-start;
  padding:        var(--espacio-md) var(--espacio-xs);
  border:         1px solid rgba(var(--color-borde-rgb), 0.4);
  border-radius:  var(--radio);
  cursor:         pointer;
  transition:     border-color var(--transicion), background var(--transicion);
}
.comprar-modal__metodo input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}
.comprar-modal__metodo-label {
  font-family:    var(--fuente-cuerpo);
  font-weight:    600;
  font-size:      var(--texto-sm);
  color:          var(--color-texto);
}
/* Cuándo se libera el acceso con ese método, debajo del nombre. */
.comprar-modal__metodo-nota {
  font-family: var(--fuente-cuerpo);
  font-size:   var(--texto-xs);
  line-height: 1.3;
  text-align:  center;
  color:       var(--color-texto-2);
}
.comprar-modal__metodo:has(input:checked) {
  border-color: var(--color-acento-2);
  background:   color-mix(in srgb, var(--color-acento-2) 12%, var(--color-fondo));
}

/* ── Resumen — "Resumo" como primera fila y después álbum, valor y pago:
   rótulo a la izquierda, valor a la derecha, todo del mismo tamaño y filas
   pegadas. Ninguna fila se parte: el valor largo (nombre del álbum) se
   recorta con "…", el rótulo nunca. ── */
.comprar-modal__resumen {
  font-size:     var(--texto-md);
  color:         var(--color-texto);
  padding:       var(--espacio-sm);
  background:    rgba(var(--color-borde-rgb), 0.08);
  border-radius: var(--radio);
  margin-bottom: var(--espacio-md);
}
.comprar-modal__resumen-linha {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--espacio-sm);
  line-height:     1.3;
}
/* El título es una fila más: pisa el h3 global (display, itálica, 1.05). */
.comprar-modal__resumen-titulo {
  margin:         0;
  font-family:    var(--fuente-cuerpo);
  font-size:      inherit;
  font-style:     normal;
  font-weight:    700;
  text-transform: none;
  line-height:    1.3;
  text-align:     left;
  color:          var(--color-texto);
}
.comprar-modal__resumen-label {
  flex-shrink: 0;
  white-space: nowrap;
  color:       var(--color-texto-2);
}
.comprar-modal__resumen-valor {
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  text-align:    right;
  font-weight:   600;
}
/* "Volte para esta janela" — mismo cierre en el Resumo y en la pantalla del
   Pix, tipografía de .subtitulo (puesta en el HTML). */
.comprar-modal__volte {
  margin-top:  var(--espacio-md);
  padding-top: var(--espacio-sm);
  border-top:  1px dashed rgba(var(--color-borde-rgb), 0.25);
  text-align:  center;
}
.comprar-modal__realce { font-weight: 600; }
/* Nota bajo el cierre: el acceso también llega por mail, para quien paga
   después y no vuelve a esta ventana. */
.comprar-modal__volte-nota {
  margin:     var(--espacio-xs) 0 0;
  text-align: center;
  font-size:  var(--texto-xs);
  color:      var(--color-texto-3);
}

/* Consentimento LGPD — linha de aviso sem caixa, abaixo do resumo (mesmo
   tom da linha do resgate). O link reusa .privacidad-trigger (modal do footer). */
.comprar-modal__consentimento {
  margin:      0;
  text-align:  center;
  font-family: var(--fuente-cuerpo);
  font-size:   var(--texto-xs);
  line-height: 1.4;
  color:       var(--color-texto-3);
}
/* padding 0: el reset global de <button> no saca el padding del navegador
   (6px por lado), que sumado al espacio del texto se veía doble. */
.comprar-modal__consentimento .privacidad-trigger {
  font-size: inherit;
  padding:   0;
}

/* ── Navegación entre pasos ── */
.comprar-modal__nav:not([hidden]) {
  display:         flex;
  justify-content: space-between;
  gap:             var(--espacio-sm);
  margin-top:      var(--espacio-md);
}
.comprar-modal__nav .comprar-modal__btn-siguiente,
.comprar-modal__nav .comprar-modal__btn-enviar { margin-left: auto; }
/* Sin Voltar al lado (paso 1) es la única acción: ocupa el ancho. */
.comprar-modal__btn-atras[hidden] + .comprar-modal__btn-siguiente { width: 100%; }

.comprar-modal__btn {
  padding:        13px 26px;
  font-family:    var(--fuente-cuerpo);
  font-size:      0.75rem;                              /* 12px */
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius:  var(--radio);
  border:         1px solid transparent;
  cursor:         pointer;
  transition:     opacity var(--transicion), background var(--transicion);
}
.comprar-modal__btn-atras {
  background:   var(--color-superficie);
  border-color: rgba(var(--color-borde-rgb), 0.3);
  color:        var(--color-texto);
}
.comprar-modal__btn-entendi,
.comprar-modal__btn-siguiente,
.comprar-modal__btn-enviar,
.comprar-modal__btn-escutar,
/* Na tela de erro é a única ação possível, então leva o mesmo peso visual
   que os outros principais. Sem isto ficava só com a forma do .btn base,
   sem fundo nem borda, e não se lia como botão. */
.comprar-modal__btn-retentar,
/* "Acessar minha conta" do erro email_verificado: ali é a ação principal.
   Os do passo 1 são secundários (.comprar-modal__btn-secundario). */
.comprar-modal__resultado-erro .comprar-modal__btn-acessar {
  background: var(--color-acento-2);
  color:      var(--color-contraste-2);
}
/* Única salida del paso 0: ocupa el ancho. */
.comprar-modal__btn-entendi { width: 100%; }
.comprar-modal__btn-entendi:hover,
.comprar-modal__btn-siguiente:hover,
.comprar-modal__btn-enviar:hover,
.comprar-modal__btn-escutar:hover,
.comprar-modal__btn-retentar:hover { opacity: 0.85; }

/* Chamada de atenção ao retomar um intento salvo, quando o passo atual já
   não tem nenhum campo vazio pra destacar (só falta clicar): idle a
   maior parte do ciclo, agita só no final, nunca movimento contínuo. Removida sozinha via JS (comprar.js)
   depois de alguns segundos ou no primeiro clique. */
.comprar-modal__btn--destaque {
  animation: comprar-modal-btn-chamar 2.4s ease-in-out infinite;
}
@keyframes comprar-modal-btn-chamar {
  0%, 60%, 100% { transform: scale(1); box-shadow: none; }
  75% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(var(--color-texto-rgb), 0.18); }
  90% { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(var(--color-texto-rgb), 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .comprar-modal__btn--destaque { animation: none; }
}

/* Enviar pelo WhatsApp — acción principal del regalo: ancho completo,
   verde WhatsApp, ícono y texto adentro. */
.comprar-modal__btn-whats {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         15px 20px;
  font-size:       var(--texto-sm);
  text-decoration: none;
  background:      var(--color-whatsapp);
  color:           var(--color-whatsapp-texto);
}
.comprar-modal__btn-whats:hover { opacity: 0.85; }
/* Presente pronto: Compartilhar presente y, al lado, las tres líneas que
   explican las dos formas de entregar. */
.comprar-presente__whats {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-xs);
}
.comprar-presente__whats .comprar-modal__btn-whats {
  flex:      1 1 0;
  min-width: 0;
  gap:       8px;
  padding:   10px 12px;
}
.comprar-presente__whats-ajuda {
  flex:        1 1 0;
  min-width:   0;
  margin:      0;
  font-size:   var(--texto-xs);
  line-height: 1.25;
  color:       var(--color-texto-2);
  text-align:  left;
}
/* Banner del link de un solo uso, bajo Compartilhar: caja suave con ícono,
   mismo lenguaje que el aviso del mail. */
.comprar-presente__aviso-link {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin:        0;
  padding:       8px 12px;
  border-radius: var(--radio);
  background:    var(--color-superficie);
  text-align:    left;
  font-size:     var(--texto-xs);
  line-height:   1.3;
  color:         var(--color-texto);
}
.comprar-presente__aviso-link-icone {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  color:       var(--color-acento-3);
}
.comprar-presente__whats-ajuda b {
  font-weight:   600;
  overflow-wrap: anywhere;
}
.comprar-presente__whats-texto {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  min-width:      0;
  line-height:    1.15;
  text-align:     left;
}
.comprar-presente__whats-texto small { font-size: 0.78em; opacity: 0.85; }
.comprar-presente__whats-texto b {
  max-width:     100%;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-weight:   700;
}
.comprar-modal__btn-whats-icone {
  width:       22px;
  height:      22px;
  flex-shrink: 0;
}

/* Regalo: la pantalla de confirmado solo dura hasta que el link está listo. */
.comprar-modal--presente .comprar-modal__btn-escutar { display: none; }
.comprar-modal__btn-copiar-codigo {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          28px;
  height:         28px;
  flex-shrink:    0;
  border:         none;
  border-radius:  50%;
  background:     none;
  color:          var(--color-texto-2);
  cursor:         pointer;
  transition:     background .15s, color .15s;
}
.comprar-modal__btn-copiar-codigo:hover,
.comprar-modal__btn-copiar-codigo:active {
  background: rgba(var(--color-borde-rgb), 0.5);
  color:      var(--color-acento);
}
.comprar-modal__btn-copiar-codigo--ok { color: var(--color-acento); }
.comprar-modal__btn-enviar:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Resultado — 3 estados, el JS agrega la clase modificadora
   correspondiente sobre .comprar-modal__resultado. ── */
/* Sin aire propio arriba: el título queda a los 16px del cuerpo, como el
   paso 0. */
.comprar-modal__resultado { text-align: center; padding: 0 0 var(--espacio-md); }
.comprar-modal__resultado-pix,
.comprar-modal__resultado-boleto,
.comprar-modal__resultado-boleto-aguardando,
.comprar-modal__resultado-link,
.comprar-modal__resultado-erro,
.comprar-modal__resultado-confirmado,
.comprar-modal__resultado-presente,
.comprar-modal__resultado-aguardando,
.comprar-modal__resultado-aviso-app { display: none; }
.comprar-modal__resultado--pix    .comprar-modal__resultado-pix    { display: block; }
.comprar-modal__resultado--boleto .comprar-modal__resultado-boleto { display: block; }
/* Boleto criado, esperando a linha digitável (ver comprar.js::aguardarCodigoBoleto). */
.comprar-modal__resultado--boleto-aguardando .comprar-modal__resultado-boleto-aguardando { display: block; }
.comprar-modal__resultado--link   .comprar-modal__resultado-link   { display: block; }
.comprar-modal__resultado--erro   .comprar-modal__resultado-erro   { display: block; }
.comprar-modal__resultado--confirmado .comprar-modal__resultado-confirmado { display: block; }
/* Compra pra presentear: mesma tela de confirmado, outro conteudo — nao
   ha nada pra escutar, ha algo pra entregar. */
.comprar-modal__resultado--presente .comprar-modal__resultado-presente { display: block; }
/* Afuera de Instagram, esperando la compra que llegó con el pase. */
.comprar-modal__resultado--aguardando .comprar-modal__resultado-aguardando { display: block; }
/* El bloque de app es para pix/boleto/link y para confirmado — con error no
   hay nada que esperar todavía. En confirmado es la acción principal: el
   objetivo es que el acceso quede en el celu, no en un navegador suelto.
   Quién lo ve de verdad lo decide comprar.js por plataforma. */
.comprar-modal__resultado--pix    .comprar-modal__resultado-aviso-app,
.comprar-modal__resultado--boleto .comprar-modal__resultado-aviso-app,
.comprar-modal__resultado--link   .comprar-modal__resultado-aviso-app,
.comprar-modal__resultado--confirmado .comprar-modal__resultado-aviso-app { display: block; }

/* "Escutar aqui mesmo" vive fuera del bloque de confirmado, después del del
   app, así el orden del HTML ya da lo que queremos: confirmación, instalar
   el app, y escuchar acá como segunda opción. Solo aparece en confirmado. */
.comprar-modal__resultado .comprar-modal__btn-escutar { display: none; }
/* El :not() es lo que mantiene al regalo sin este botón: en una compra pra
   presentear la pantalla pasa por confirmado mientras se arma el link, y
   ahí no hay nada que escuchar en este aparato. */
/* Verde lleno con textura y sombra: es la salida de la compra, tiene que
   verse (mismo verde que el Comprar de benefícios). */
.modal:not(.comprar-modal--presente) .comprar-modal__resultado--confirmado .comprar-modal__btn-escutar {
  display:          block;
  margin-inline:    auto;
  padding-inline:   var(--espacio-lg);
  background-color: color-mix(in srgb, var(--color-acento-2) 72%, var(--color-texto) 28%);
  background-image: var(--t6-h), var(--t6-v);
  color:            #ffffff;
  border:           none;
  box-shadow:       0 6px 16px rgba(var(--color-texto-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* comprar.js lo esconde según la plataforma (iPhone solo con cuenta ✓) y
   en los regalos: dos clases + el atributo ganan a las reglas de arriba,
   que tienen dos clases. */
.comprar-modal__resultado .comprar-modal__resultado-aviso-app[hidden] { display: none; }
/* Trocar a forma de pagamento: só com um pagamento esperando. Uma linha de
   texto chica (mesmo tom do link "Ir pra nosso site"), pra deixar lugar ao
   bloco de instalar o app logo abaixo. */
.comprar-modal__btn-trocar {
  padding:         0;
  border:          none;
  background:      none;
  font-family:     var(--fuente-cuerpo);
  font-size:       var(--texto-xs);
  color:           var(--color-texto-3);
  text-decoration: underline;
  cursor:          pointer;
}
.comprar-modal__resultado .comprar-modal__btn-trocar { display: none; }
.comprar-modal__resultado--pix    .comprar-modal__btn-trocar,
.comprar-modal__resultado--boleto .comprar-modal__btn-trocar,
.comprar-modal__resultado--link   .comprar-modal__btn-trocar {
  display: block;
  margin:  var(--espacio-xs) auto 0;
}
/* Campo copiable del código (Pix copia e cola, linha digitável): caja
   punteada en fila, input real de solo lectura a la izquierda (se puede
   seleccionar/copiar a mano) + botón-ícono a la derecha. */
.comprar-modal__campo-copia {
  display:       flex;
  align-items:   center;
  gap:           4px;
  width:         100%;
  max-width:     320px;
  margin:        0 auto var(--espacio-md);
  padding:       4px 4px 4px 14px;
  border:        1.5px dashed rgba(var(--color-borde-rgb), 0.6);
  border-radius: var(--radio);
}
.comprar-modal__campo-copia-valor {
  flex:        1;
  min-width:   0;
  border:      none;
  background:  none;
  font-family: monospace;
  font-size:   var(--texto-xs);
  color:       var(--color-texto);
  padding:     8px 0;
}

/* Ícone animado de "gerando código" — círculo simples, sem dependência
   externa. Respeita quem pediu menos movimento no sistema. */
.comprar-modal__spinner {
  width:      28px;
  height:     28px;
  margin:     0 auto var(--espacio-sm);
  color:      var(--color-acento);
  animation:  comprar-modal-spinner-girar 0.9s linear infinite;
}
@keyframes comprar-modal-spinner-girar {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .comprar-modal__spinner { animation: none; }
}

/* Baixar boleto — acción secundaria y menos relevante que copiar el código
   o instalar la app: borde suave visible, sin relleno, ícono chico. */
.comprar-modal__btn-baixar {
  display:      flex;
  width:        fit-content;
  align-items:  center;
  gap:          6px;
  margin:       var(--espacio-sm) auto 0;
  border-color: rgba(var(--color-borde-rgb), 0.5);
  color:        var(--color-texto-2);
}
/* Mientras comprar.js sondea si la Asaas ya tiene el PDF (ver
   prepararDownloadBoleto) — atenuado y sin puntero, no es un link real
   todavía. Se saca sola al quedar listo o al pasar a "Tentar de novo". */
.comprar-modal__btn-baixar--espera {
  opacity: 0.55;
  cursor:  default;
}

/* Instalar el app, pegado a lo de arriba y sin línea divisoria: en el Pix
   con QR tiene que entrar en pantalla sin scroll. */
.comprar-modal__resultado-aviso-app {
  margin-top: var(--espacio-sm);
}
/* Va DEBAJO del botón de instalar: explica qué gana la persona, no qué es
   un app. Antes eran dos párrafos (uno fuerte y uno leve) que repetían lo
   mismo y hacían parecer que había un segundo modal adentro del modal. */
.comprar-modal__aviso-app-texto {
  margin:      var(--espacio-xs) 0 0;
  font-size:   var(--texto-sm);
  line-height: 1.4;
  color:       var(--color-texto-2);
}
.comprar-modal__aviso-app-botoes {
  display:         flex;
  justify-content: center;
  gap:             8px;
  flex-wrap:       wrap;
}

/* Instalar app — decisão de produto: antes casi invisible (sin fondo,
   borde fino 1px, texto 11px gris). Reusa la misma textura del nav
   (--t6-h/--t6-v) y el mismo tono de sombra de .nav__venda-btn, sin
   inventar nada nuevo. Flotado CONTINUO y suave (distinto del resto de
   botones del sitio, que agitan cada 3s) — pedido explícito acá. */
.comprar-modal__btn-app {
  padding:          12px 22px;
  font-family:      var(--fuente-cuerpo);
  font-size:        var(--texto-sm);
  font-weight:      600;
  border-radius:    var(--radio);
  border:           none;
  background-color: var(--color-acento-2);
  background-image: var(--t6-h), var(--t6-v);
  color:            var(--color-contraste-2);
  box-shadow:       0 4px 14px rgba(var(--color-texto-rgb), 0.2);
  cursor:           pointer;
  animation:        comprar-modal-btn-app-flutuar 2.6s ease-in-out infinite;
}
.comprar-modal__btn-app:disabled { opacity: 0.6; cursor: default; animation: none; }
@keyframes comprar-modal-btn-app-flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .comprar-modal__btn-app { animation: none; }
}
/* Pasos de iPhone — letra chica debajo del botón, los despliega el botón. */
.comprar-modal__aviso-app-ios {
  list-style:  decimal inside;
  margin:      var(--espacio-sm) auto 0;
  padding:     0;
  font-size:   0.75rem;                                /* 12px */
  line-height: 1.6;
  color:       var(--color-texto-2);
}
.comprar-modal__aviso-app-ios strong { font-weight: 600; }
.comprar-modal__aviso-app-ios-icone {
  width:          14px;
  height:         14px;
  vertical-align: -2px;
  color:          var(--color-texto);
}

.comprar-modal__resultado-titulo {
  font-family:   var(--fuente-display);
  font-style:    italic;
  font-size:     var(--texto-xl);
  color:         var(--color-texto);
  margin-bottom: var(--espacio-sm);
}
/* "Pagamento confirmado!": verde, recto y con peso, se lee de un vistazo. */
.comprar-modal__resultado-confirmado .comprar-modal__resultado-titulo {
  font-style:  normal;
  font-weight: 700;
  color:       color-mix(in srgb, var(--color-acento-2) 72%, var(--color-texto) 28%);
}
.comprar-modal__resultado-texto {
  font-size:     var(--texto-sm);
  color:         var(--color-texto-2);
  margin-bottom: var(--espacio-md);
}
.comprar-modal__resultado-aviso {
  margin-top: var(--espacio-md);
  font-size:  var(--texto-xs);
  color:      var(--color-texto-2);
  opacity:    0.75;
}

/* Retry + mensagem de erro (31/8) — botão de ação real (herda .comprar-
   modal__btn, mesma família de "Confirmar"/"Entendi") em vez do texto
   passivo "tenta mais tarde". Mensagem só aparece na 2ª falha seguida
   (ver comprar.js), texto secundário — nunca compete com o retry. */
.comprar-modal__btn-retentar { margin: 0 auto; }

/* "Ir pra nosso site" do presente comprado dentro do Instagram: link de
   texto chico, sem competir com "Enviar pelo WhatsApp". */
.comprar-modal__link-site {
  font-size:       var(--texto-xs);
  color:           var(--color-texto-3);
  text-decoration: underline;
}
.comprar-modal__link-site:not([hidden]) {
  display:    block;
  margin-top: var(--espacio-sm);
}
.comprar-modal__resultado-mensagem {
  margin-top: var(--espacio-md);
  padding-top: var(--espacio-sm);
  border-top: 1px dashed rgba(var(--color-borde-rgb), 0.3);
  text-align: left;
}
.comprar-modal__resultado-mensagem .lm-campo-label {
  display: block;
  margin-bottom: var(--espacio-xs);
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
}
/* Las 2 lineas del convite a dejar mensaje, cada una en su renglon
   (decisão de produto: sin guiones, texto partido en dos). */
.comprar-modal__mensagem-linha {
  display: block;
}
.comprar-modal__mensagem-texto {
  width: 100%;
  resize: vertical;
  font-family: var(--fuente-cuerpo);
}
.comprar-modal__btn-secundario {
  display:      flex;
  width:        fit-content;
  align-items:  center;
  gap:          6px;
  margin:       var(--espacio-sm) 0 0;
  padding:      8px 14px;
  border:       1.5px solid rgba(var(--color-borde-rgb), 0.5);
  border-radius: var(--radio);
  background:   none;
  font-family:  var(--fuente-cuerpo);
  font-size:    var(--texto-xs);
  color:        var(--color-texto-2);
  cursor:       pointer;
}
.comprar-modal__btn-secundario:disabled { opacity: 0.5; cursor: not-allowed; }
.comprar-modal__mensagem-enviada {
  margin-top: var(--espacio-sm);
  font-size:  var(--texto-xs);
  color:      var(--color-acento);
}

/* ── Resultado Pix — título + cuándo se libera, el código a copiar con su
   ayuda, el QR chico como alternativa y el aviso de no cerrar. ── */
.comprar-modal__resultado-pix .comprar-modal__resultado-titulo {
  line-height:   1.1;
  margin-bottom: 6px;
}
.comprar-modal__resultado-sub {
  font-size:     var(--texto-sm);
  line-height:   1.4;
  color:         var(--color-texto-3);
  margin-bottom: var(--espacio-md);
}
.comprar-modal__resultado-rotulo {
  font-size:      var(--texto-xs);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-texto-3);
  margin-bottom:  calc(var(--espacio-xs) / 2);
}
/* Rótulo con la ayuda en la misma línea, y el campo pegado abajo: un bloque. */
.comprar-modal__resultado-pix .comprar-modal__campo-copia { margin-bottom: calc(var(--espacio-xs) / 2); }
.comprar-modal__resultado-ajuda {
  font-weight:    400;
  letter-spacing: 0;
  text-transform: none;
  color:          var(--color-texto-2);
}
.comprar-modal__resultado-ou {
  margin:    var(--espacio-xs) 0;
  font-size: var(--texto-xs);
  color:     var(--color-texto-3);
}
.comprar-modal__qr {
  display:       block;
  width:         112px;
  height:        112px;
  margin:        0 auto;
  border-radius: var(--radio);
  object-fit:    contain;
}
.comprar-modal__btn-link { display: inline-flex; }


/* ── Modo presente (Presentear) ───────────────────────────────────────────
   El mismo modal a pantalla completa, con el logo y la cruz de siempre; el
   contenido corre centrado en una columna de 480px. Pantallas propias antes
   del checkout (cuántos, datos, prévia) y Presente pronto al final, con el
   progreso de 4 pasos arriba. Ver comprar.js (Modo presente). */
#hero-08-modal-comprar.comprar-modal--presente { padding: 0; }
/* Un solo nivel fijo que scrollea: la tarjeta, no un cuerpo adentro. El
   fijo sin scroll con otro adentro que scrollea deja arrastrar la pantalla
   en Android y ver la página de atrás (lección #87, base/panel.css
   .panel--fullscreen; .auditorio-overlay ya es así). */
.comprar-modal--presente .modal__card {
  max-width:           none;
  max-height:          none;
  height:              100%;
  border-radius:       0;
  overflow-x:          hidden;
  overflow-y:          auto;
  overscroll-behavior: none;
  touch-action:        pan-y;
  scrollbar-width:     none;
}
.comprar-modal--presente .modal__card::-webkit-scrollbar { display: none; }
.comprar-modal--presente .modal__cuerpo { overflow: visible; }
/* Pantalla completa en el celu: encabezado, progreso y título más juntos
   para que cada paso entre sin scroll. */
#hero-08-modal-comprar.comprar-modal--presente .modal__header {
  position:       sticky;
  top:            0;
  z-index:        3;
  padding-top:    12px;
  padding-bottom: 12px;
}
#hero-08-modal-comprar.comprar-modal--presente .modal__cerrar { top: 12px; }
.comprar-modal--presente .comprar-modal__cuerpo {
  width:       100%;
  max-width:   480px;
  margin:      0 auto;
  padding-top: var(--espacio-xs);
}
.comprar-presente__tela:not([hidden]) {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-sm);
}

/* Progreso de 4 pasos: círculos y línea del wizard, con el nombre del paso
   debajo. Cada paso es una columna de --col: la línea va de centro a centro
   y --avance (0..1, del JS) la llena. */
.comprar-presente__progresso:not([hidden]) {
  --col:           72px;
  --avance:        0;
  position:        relative;
  display:         flex;
  justify-content: space-between;
  margin:          0 0 12px;
}
.comprar-presente__progresso-trilho,
.comprar-presente__progresso-fill {
  position:      absolute;
  top:           13px;
  left:          calc(var(--col) / 2);
  height:        3px;
  border-radius: 2px;
}
.comprar-presente__progresso-trilho {
  right:      calc(var(--col) / 2);
  background: var(--color-borde);
}
.comprar-presente__progresso-fill {
  width:      calc((100% - var(--col)) * var(--avance));
  background: var(--color-acento-2);
  transition: width 0.25s ease;
}
.comprar-presente__progresso-passo {
  position:       relative;
  z-index:        1;
  width:          var(--col);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  font-family:    var(--fuente-cuerpo);
  font-size:      var(--texto-xs);
  line-height:    1.2;
  text-align:     center;
  color:          var(--color-texto-3);
}
.comprar-presente__progresso-passo b {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  font-size:       var(--texto-xs);
  font-weight:     700;
  background:      var(--color-borde);
  color:           var(--color-texto-2);
  transition:      background var(--transicion);
}
.comprar-presente__progresso-passo--feito { color: var(--color-texto); }
.comprar-presente__progresso-passo--feito b {
  background: var(--color-acento-2);
  color:      var(--color-contraste-2);
}

/* Título del paso en una línea, entre dos trazos dorados que llenan el
   ancho; con número de presente, "Presente 2/3" con el 2 destacado. */
.comprar-presente__titulo:not([hidden]),
.comprar-modal--presente .comprar-modal__paso-titulo {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0;
  font:        italic 500 clamp(19px, 5.4vw, 24px)/1.2 var(--fuente-display);
  white-space: nowrap;
  text-align:  center;
  color:       var(--color-texto);
}
.comprar-presente__titulo::before,
.comprar-presente__titulo::after,
.comprar-modal--presente .comprar-modal__paso-titulo::before,
.comprar-modal--presente .comprar-modal__paso-titulo::after {
  content:    '';
  flex:       1;
  min-width:  12px;
  height:     1px;
  background: var(--color-acento);
}
.comprar-presente__titulo b {
  font-size:   1.45em;
  font-weight: 500;
  color:       var(--color-acento);
}

/* Un punto por presente: anteriores en verde, el actual en dorado. */
.comprar-presente__pontos:not([hidden]) {
  display:         flex;
  justify-content: center;
  gap:             7px;
  margin-top:      -6px;
}
.comprar-presente__ponto {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-borde);
  transition:    background 0.2s, transform 0.2s;
}
.comprar-presente__ponto--feito { background: var(--color-acento-2); }
.comprar-presente__ponto--atual {
  background: var(--color-acento);
  transform:  scale(1.4);
}

/* Cuántos presentes: de 1 a 4, tarjetas con un presente dibujado por cada
   uno; de 5 a 10, tarjetas chicas con un puñado. Grilla de 12 columnas: 4
   grandes o 6 chicas por fila. La elegida, en dorado. */
.comprar-presente__qtd {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   8px;
  width:                 100%;
  max-width:             360px;
  margin:                0 auto;
  padding:               var(--espacio-sm) 0;
}
.comprar-presente__qtd-opcao {
  position:        relative;
  grid-column:     span 3;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  height:          84px;
  padding:         0 0 7px;
  border:          1.5px solid rgba(var(--color-borde-rgb), 0.7);
  border-radius:   var(--radio);
  background:      none;
  cursor:          pointer;
  color:           var(--color-texto);
  font:            500 18px/1 var(--fuente-cuerpo);
  transition:      border-color var(--transicion), background var(--transicion);
}
.comprar-presente__qtd-opcao--mini {
  grid-column: span 2;
  height:      54px;
  padding:     0 0 5px;
  font-size:   14px;
}
.comprar-presente__qtd-opcao[aria-pressed="true"] {
  border-color: var(--color-acento);
  background:   color-mix(in srgb, var(--color-acento) 14%, transparent);
  box-shadow:   inset 0 0 0 1px var(--color-acento);
  font-weight:  600;
}
.comprar-presente__qtd-pilha {
  position: relative;
  width:    100%;
  flex:     1;
}
.comprar-presente__qtd-pilha svg {
  position:  absolute;
  transform: translate(-50%, -50%) rotate(var(--rot));
  filter:    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}
/* Descuento medio: el sello de precio del sitio, chico, en la esquina de arriba a la izquierda */
.comprar-presente__qtd-selo {
  top:       -9px;
  left:      -9px;
  width:     36px;
  height:    36px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.comprar-presente__qtd-opcao--mini .comprar-presente__qtd-selo {
  top:       -8px;
  left:      -8px;
  width:     28px;
  height:    28px;
  font-size: 8px;
}

/* Al elegirla, la pila salta una vez */
.comprar-presente__qtd-opcao[aria-pressed="true"] .comprar-presente__qtd-pilha {
  animation: comprar-presente-qtd-pulo 0.35s ease-out;
}
@keyframes comprar-presente-qtd-pulo {
  40% { transform: translateY(-4px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .comprar-presente__qtd-opcao[aria-pressed="true"] .comprar-presente__qtd-pilha { animation: none; }
}
.comprar-presente__total {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  text-align:     center;
}
.comprar-presente__total b {
  font-size:   var(--texto-lg);
  font-weight: 500;
}
.comprar-presente__total span {
  font-size: var(--texto-sm);
  color:     var(--color-texto-3);
}

/* Formulario de cada presente: los campos del wizard, sin el aire extra. */
.comprar-presente__form .lm-campo-wrap { margin-bottom: var(--espacio-sm); }
.comprar-presente__mensagem { resize: none; }
.comprar-presente__erro { margin: 0 0 var(--espacio-xs); }

/* Acciones: botón principal a lo ancho; secundarios con borde; links
   subrayados para volver. */
.comprar-presente__btn,
.comprar-presente__btn-linha {
  display:         block;
  width:           100%;
  text-align:      center;
  text-decoration: none;
}
.comprar-presente__btn {
  background: var(--color-acento-2);
  color:      var(--color-contraste-2);
}
.comprar-presente__btn:disabled { opacity: 0.5; }
.comprar-presente__btn-linha {
  background:   transparent;
  border-color: var(--color-borde);
  color:        var(--color-texto);
}
.comprar-presente__btn[hidden],
.comprar-presente__btn-linha[hidden] { display: none; }
.comprar-presente__link {
  align-self:      center;
  background:      none;
  border:          0;
  color:           var(--color-texto-3);
  text-decoration: underline;
  font:            inherit;
  font-size:       var(--texto-sm);
  cursor:          pointer;
}
.comprar-presente__link[hidden] { display: none; }

/* El vale: la imagen a lo ancho. En la prévia se achica lo necesario para
   que Continuar y Editar entren en la pantalla. */
.comprar-presente__vale {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--radio);
  box-shadow:    0 6px 18px rgba(var(--color-texto-rgb), 0.15);
}
.comprar-presente__vale[hidden] { display: none; }
.comprar-presente__vale--cabe {
  width:      auto;
  max-width:  100%;
  margin:     0 auto;
  max-height: calc(100vh - 330px);
  max-height: calc(100dvh - 330px);
}
.comprar-presente__titulo[hidden] ~ .comprar-presente__vale-moldura .comprar-presente__vale--cabe {
  max-height: calc(100vh - 270px);
  max-height: calc(100dvh - 270px);
}

/* El vale con una etiqueta inclinada sobre el borde izquierdo: en la prévia
   (terracota, "Assim fica o seu presente", para que nadie intente escanear el
   QR reservado) y en Presente pronto (verde, "Presente pronto / pra enviar!",
   en lugar del título). */
.comprar-presente__vale-moldura {
  position:  relative;
  width:     fit-content;
  max-width: 100%;
  margin:    0 auto;
}
/* Sobre el borde izquierdo, en el blanco entre el presente de arriba y el de
   abajo, a la izquierda del nombre: no tapa logo ni textos. */
.comprar-presente__vale-selo {
  position:         absolute;
  top:              calc(19% + 20px);
  left:             -19px;
  z-index:          1;
  padding:          6px 10px 7px 14px;
  border-radius:    4px;
  background:       var(--color-acento-3);
  color:            #fff8ef;
  font:             italic 500 15px/1.05 var(--fuente-display);
  white-space:      nowrap;
  box-shadow:       0 4px 10px rgba(0, 0, 0, 0.22);
  transform:        rotate(-12deg);
  transform-origin: left center;
}
/* Pronto: verde, con un destello que la cruza cada tanto. */
.comprar-presente__vale-selo--pronto {
  overflow:   hidden;
  margin:     0;
  background: var(--color-acento-2);
}
.comprar-presente__vale-selo--pronto::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform:  translateX(-120%);
  animation:  comprar-presente-destello 3.2s ease-in-out 0.6s infinite;
}
@keyframes comprar-presente-destello {
  0%, 70% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .comprar-presente__vale-selo--pronto::after { animation: none; display: none; }
}

/* Wizard en modo presente: los títulos de sus pasos son hermanos de los del
   presente (mismo estilo, arriba); aire hasta el contenido del paso. Con
   forma de pago y Resumo en una pantalla, el Resumo se separa de los botones. */
.comprar-modal--presente .comprar-modal__paso-titulo { margin-bottom: var(--espacio-sm); }
.comprar-modal--presente .comprar-modal__paso--resumen { margin-top: 12px; }
.comprar-modal--presente .comprar-modal__paso--resumen .comprar-modal__volte {
  margin-top:  var(--espacio-sm);
  padding-top: var(--espacio-xs);
}

/* Esperando el pago: tarjeta con la miniatura del vale, el total y la vuelta
   a esta ventana; el aviso del mail al final. Solo con un pago a la vista.
   El mismo aviso (ya enviado) cierra Presente pronto. */
.comprar-presente__espera,
.comprar-presente__mail { display: none; }
.comprar-modal--presente :is(.comprar-modal__resultado--pix, .comprar-modal__resultado--boleto, .comprar-modal__resultado--link) .comprar-presente__espera {
  display:       flex;
  align-items:   center;
  gap:           var(--espacio-sm);
  margin-bottom: var(--espacio-md);
  padding:       10px 14px 10px 10px;
  border-radius: var(--radio);
  background:    var(--color-superficie);
  text-align:    left;
}
.comprar-modal--presente :is(.comprar-modal__resultado--pix, .comprar-modal__resultado--boleto, .comprar-modal__resultado--link) .comprar-presente__mail,
.comprar-modal__resultado-presente .comprar-presente__mail {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  margin:      var(--espacio-sm) auto 0;
  max-width:   320px;
  text-align:  left;
  font-size:   var(--texto-sm);
  line-height: 1.35;
  color:       var(--color-texto-2);
}
/* Presentes que voltam por Presentear: quantos faltam enviar, no alto; e a
   saída pra uma compra nova, embaixo. */
.comprar-presente__pendentes {
  margin:      0 0 var(--espacio-xs);
  text-align:  center;
  font-size:   var(--texto-base);
  font-weight: 600;
  color:       var(--color-texto);
}
.comprar-presente__pendentes[hidden] { display: none; }
.comprar-presente__novo { margin-top: var(--espacio-sm); }
.comprar-presente__mail-icone {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  margin-top:  -1px;
  color:       var(--color-acento-3);
}
.comprar-modal--presente .comprar-modal__btn-trocar { margin-top: var(--espacio-md); }
/* "Fazer um novo presente" no pagamento: só de presentes, junto a "Usar outra forma". */
.comprar-modal__resultado .comprar-presente__novo--pagamento { display: none; }
.comprar-modal--presente :is(.comprar-modal__resultado--pix, .comprar-modal__resultado--boleto, .comprar-modal__resultado--link) .comprar-presente__novo--pagamento { display: block; }
.comprar-presente__espera-vale {
  flex-shrink:   0;
  width:         60px;
  height:        75px;
  object-fit:    cover;
  border-radius: 4px;
  box-shadow:    0 3px 8px rgba(var(--color-texto-rgb), 0.18);
}
.comprar-presente__espera-vale[hidden] { display: none; }
/* Varios: otro vale asomando detrás */
.comprar-presente__espera-vale--varios {
  box-shadow: 4px -4px 0 -1px var(--color-fondo), 4px -4px 0 0 var(--color-borde), 0 3px 8px rgba(var(--color-texto-rgb), 0.18);
}
.comprar-presente__espera-titulo {
  font-family: var(--fuente-display);
  font-style:  italic;
  font-size:   var(--texto-lg);
  line-height: 1.1;
  color:       var(--color-texto);
}
.comprar-presente__espera-total {
  margin-top:  2px;
  font-size:   var(--texto-xs);
  font-weight: 600;
  color:       var(--color-texto-2);
}
.comprar-presente__espera-volte {
  margin-top:  6px;
  font-size:   var(--texto-sm);
  line-height: 1.35;
  color:       var(--color-texto);
}
.comprar-presente__espera-volte strong { color: var(--color-acento-3); }

/* Presente pronto: título, vale y acciones en columna. */
/* El vale arriba (sin título) y pegado a "Compartilhar presente". */
.comprar-modal__resultado-presente .comprar-presente__vale-moldura { margin: var(--espacio-xs) auto; }
.comprar-presente__acoes {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-xs);
}
/* Guardar e Imprimir: dos columnas, ícono y palabra en una línea. */
.comprar-presente__secundarias {
  display: flex;
  gap:     var(--espacio-xs);
}
.comprar-presente__secundarias .comprar-presente__btn-linha {
  display:         flex;
  flex:            1 1 0;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  min-width:       0;
}
.comprar-presente__secundarias[hidden] { display: none; }
.comprar-presente__secundaria-icone {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
}
.comprar-modal__resultado-presente .comprar-presente__link { margin-top: var(--espacio-xs); }

/* Impresión del vale (terraTupyVale.imprimir en vale.js, también desde
   Presentes que enviei): solo el vale, al ancho de una hoja A4 (18 x 22,5 cm). */
.vale-impressao { display: none; }
@media print {
  @page { size: A4; margin: 15mm; }
  /* Solo el vale, en el flujo: el resto de la página sale del todo (oculto
     pero ocupando lugar llenaba varias hojas, y un fixed se repite en cada una). */
  body.vale-imprimindo { margin: 0; padding: 0; }
  body.vale-imprimindo > :not(.vale-impressao) { display: none; }
  body.vale-imprimindo .vale-impressao { display: block; }
  .vale-impressao img {
    display: block;
    width:   180mm;
    height:  225mm;
    margin:  0 auto;
  }
}

/* Cambio de presente dentro de un paso. */
.comprar-presente--entra-dir { animation: comprar-presente-entra-dir 0.3s ease; }
.comprar-presente--entra-esq { animation: comprar-presente-entra-esq 0.3s ease; }
@keyframes comprar-presente-entra-dir { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes comprar-presente-entra-esq { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .comprar-presente--entra-dir,
  .comprar-presente--entra-esq { animation: none; }
}