/* Ventana de pago de Freemius con la estética de Bigger (oscura, con brillo) (Freemius › Plans › Customization ›
   Custom Checkout CSS = https://thebiggerstudio.com/subs/checkout-bigger.css). Solo colores y
   letras: los campos de la tarjeta son del procesador de pagos y no se tocan.
   Las letras se piden a nuestra página (tools/web/publicar.sh les da permiso CORS). */
@font-face { font-family: "Archivo"; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap;
  src: url(https://thebiggerstudio.com/subs/fuentes/Archivo-b42cd543.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url(https://thebiggerstudio.com/subs/fuentes/Figtree-7073ac15.woff2) format("woff2"); }

:root {
  /* modo oscuro de Bigger: tinta de fondo, texto crema, rojo de acento (paleta invertida) */
  --fs-ds-white-10: #17130e;
  --fs-ds-neutral-10: #201a13;
  --fs-ds-neutral-100: #2d261c;
  --fs-ds-neutral-200: #43392c;
  --fs-ds-neutral-300: #6a5f50;
  --fs-ds-neutral-400: #8f8372;
  --fs-ds-neutral-500: #ab9f8c;
  --fs-ds-neutral-600: #c9bca6;
  --fs-ds-neutral-700: #e0d3bd;
  --fs-ds-neutral-800: #efe3cf;
  --fs-ds-neutral-900: #f6e9d5;
  --fs-ds-neutral-900-fade-60: rgba(6, 5, 4, 0.8);
  --fs-ds-neutral-900-fade-92: rgba(246, 233, 213, 0.08);
  --fs-ds-blue-500: #e83b3f;
  --fs-ds-blue-600: #c21a1e;
  --fs-ds-freemius-scale: #e83b3f;
  --fs-ds-freemius-grow: #c21a1e;
  --fs-ds-freemius-launch: #e83b3f;
  --fs-ds-theme-primary-accent-color: #e83b3f;
  --fs-ds-theme-primary-accent-color-hover: #ff5a5e;
  --fs-ds-typography-font-base: "Figtree", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* fondo con resplandor cálido y la ventana con borde dorado que late, como la captura de la app en la página */
#checkout_wrapper { background: radial-gradient(ellipse 70% 60% at 50% 45%, #2b1812, #0b0908 72%) !important; }
#content {
  border: 1px solid rgba(255, 214, 140, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 190, 90, 0.35), 0 0 28px rgba(255, 200, 100, 0.7), 0 0 90px rgba(255, 160, 60, 0.5), 0 0 180px rgba(232, 59, 63, 0.35);
  animation: bs-borde 3.6s ease-in-out infinite alternate;
}
@keyframes bs-borde {
  from { box-shadow: 0 0 0 1px rgba(255, 190, 90, 0.3), 0 0 22px rgba(255, 200, 100, 0.55), 0 0 70px rgba(255, 160, 60, 0.4), 0 0 150px rgba(232, 59, 63, 0.25); }
  to { box-shadow: 0 0 0 1px rgba(255, 190, 90, 0.45), 0 0 34px rgba(255, 205, 110, 0.85), 0 0 110px rgba(255, 165, 60, 0.6), 0 0 210px rgba(232, 59, 63, 0.4); }
}
/* halo de luz y rayos que giran detrás de la ventana (la ventana va centrada en la pantalla) */
#checkout_wrapper::before, #checkout_wrapper::after { content: ""; position: fixed; left: 50%; top: 48%; pointer-events: none; z-index: 0; }
#checkout_wrapper::before {
  width: 110vmax; height: 80vmax; translate: -50% -50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 90, 0.55), rgba(255, 150, 60, 0.25) 30%, rgba(232, 59, 63, 0.14) 48%, transparent 66%);
  filter: blur(40px); animation: bs-halo 3.6s ease-in-out infinite alternate;
}
#checkout_wrapper::after {
  width: 160vmax; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 196, 90, 0.16) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 55%); mask: radial-gradient(circle, #000 14%, transparent 55%);
  animation: bs-rayos 60s linear infinite;
}
#checkout_wrapper > * { position: relative; z-index: 1; }
@keyframes bs-halo { from { opacity: 0.75; scale: 0.97; } to { opacity: 1; scale: 1.03; } }
@keyframes bs-rayos { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { #content, #checkout_wrapper::before, #checkout_wrapper::after { animation: none; } }

body { font-family: var(--fs-ds-typography-font-base); }
h1, h2, h3, h4 { font-family: "Archivo", "Figtree", system-ui, sans-serif; font-weight: 900; letter-spacing: -0.01em; }

/* Subtítulo animado arriba de la ventana (estilo Portada, tools/web/pago.py): «¿qué esperas para
   PAGAR?» y luego «adiós a escribir subtítulos a mano», en el idioma de la página; en pantallas
   bajas no cabe y se oculta. Solo en la compra de Bigger Subs (id «bs-…»); los plugins no lo llevan. */
[id^="bs-"] #mode::before {
  content: ""; position: fixed; left: 50%; top: 3vh; translate: -50% 0; z-index: 2; pointer-events: none;
  width: min(420px, 90vw); height: 14vh; background: url(https://thebiggerstudio.com/subs/pago/subtitulo-en.webp?v=7) center / contain no-repeat;
}
#bs-es #mode::before { background-image: url(https://thebiggerstudio.com/subs/pago/subtitulo-es.webp?v=7); }
#bs-pt #mode::before { background-image: url(https://thebiggerstudio.com/subs/pago/subtitulo-pt.webp?v=7); }
#bs-fr #mode::before { background-image: url(https://thebiggerstudio.com/subs/pago/subtitulo-fr.webp?v=7); }
#bs-de #mode::before { background-image: url(https://thebiggerstudio.com/subs/pago/subtitulo-de.webp?v=7); }
#bs-it #mode::before { background-image: url(https://thebiggerstudio.com/subs/pago/subtitulo-it.webp?v=7); }
@media (max-height: 820px) { [id^="bs-"] #mode::before { display: none; } }