/* ========================================================================== Boleto Efectivo - stylesheet propio (reemplaza el runtime/config de Tailwind) Reproduce, uno a uno, los mismos tokens y utilidades que ya se usaban en las 5 páginas originales, para no alterar el resultado visual. Se usa junto con Bootstrap (grid/reset) vía CDN en el . ========================================================================== */ :root { --color-background: #131313; --color-surface: #131313; --color-surface-dim: #131313; --color-surface-bright: #393939; --color-surface-container-lowest: #0e0e0e; --color-surface-container-low: #1b1b1b; --color-surface-container: #1f1f1f; --color-surface-container-high: #2a2a2a; --color-surface-container-highest: #353535; --color-surface-elevated: #121212; --color-surface-variant: #353535; --color-on-surface: #e2e2e2; --color-on-surface-variant: #c4c7c8; --color-on-background: #e2e2e2; --color-primary: #ffffff; --color-on-primary: #2f3131; --color-background-text: #131313; --color-secondary: #c8c6c5; --color-error: #ffb4ab; --color-success: #00FF41; --color-text-primary: #FFFFFF; --color-text-secondary: #888888; --color-border-subtle: #262626; --color-accent: #E8763F; /* alias: brand-orange / accent / accent-orange */ --radius-default: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; --space-margin-mobile: 16px; --space-margin-desktop: 40px; --space-container-max: 1200px; --space-stack-sm: 8px; --space-stack-md: 24px; --space-stack-lg: 48px; --space-gutter: 24px; --space-unit: 4px; } /* ---- Base ---- */ body { background-color: #000000; color: #ffffff; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } /* ---- Iconos / clases decorativas propias (idénticas a las de origen) ---- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined[data-weight="fill"] { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .event-card-gradient { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); } .hero-gradient { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); } .glass-panel { background: rgba(31, 31, 31, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: #000000; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #262626; border-radius: 10px; } .checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; } @media (max-width: 1024px) { .checkout-grid { grid-template-columns: 1fr; } } .success-bg-glow { background: radial-gradient(circle at center, rgba(232, 118, 63, 0.15) 0%, rgba(19, 19, 19, 0) 70%); } .gradient-mesh { background-color: #131313; background-image: radial-gradient(at 0% 0%, hsla(20, 80%, 15%, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, hsla(20, 80%, 10%, 0.1) 0px, transparent 50%); } @keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .animate-bounce-subtle { animation: bounce-subtle 3s ease-in-out infinite; } @keyframes utility-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } [class~="animate-pulse"] { animation: utility-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ========================================================================== Layout / display ========================================================================== */ [class~="flex"] { display: flex; } [class~="inline-block"] { display: inline-block; } [class~="hidden"] { display: none; } [class~="grid"] { display: grid; } [class~="flex-col"] { flex-direction: column; } [class~="flex-wrap"] { flex-wrap: wrap; } [class~="flex-grow"] { flex-grow: 1; } [class~="items-center"] { align-items: center; } [class~="items-start"] { align-items: flex-start; } [class~="items-end"] { align-items: flex-end; } [class~="justify-center"] { justify-content: center; } [class~="justify-between"] { justify-content: space-between; } [class~="justify-end"] { justify-content: flex-end; } [class~="grid-cols-1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); } [class~="relative"] { position: relative; } [class~="absolute"] { position: absolute; } [class~="fixed"] { position: fixed; } [class~="sticky"] { position: sticky; } [class~="inset-0"] { top: 0; right: 0; bottom: 0; left: 0; } [class~="inset-x-0"] { left: 0; right: 0; } [class~="top-0"] { top: 0; } [class~="top-4"] { top: 16px; } [class~="top-28"] { top: 7rem; } [class~="bottom-0"] { bottom: 0; } [class~="bottom-4"] { bottom: 16px; } [class~="left-0"] { left: 0; } [class~="left-4"] { left: 16px; } [class~="right-0"] { right: 0; } [class~="z-10"] { z-index: 10; } [class~="z-50"] { z-index: 50; } [class~="-z-10"] { z-index: -10; } [class~="-top-[10%]"] { top: -10%; } [class~="-left-[10%]"] { left: -10%; } [class~="-right-[5%]"] { right: -5%; } [class~="bottom-[20%]"] { bottom: 20%; } [class~="overflow-hidden"] { overflow: hidden; } [class~="overflow-x-auto"] { overflow-x: auto; } [class~="pointer-events-none"] { pointer-events: none; } [class~="cursor-pointer"] { cursor: pointer; } [class~="whitespace-nowrap"] { white-space: nowrap; } [class~="object-cover"] { object-fit: cover; } [class~="bg-cover"] { background-size: cover; } [class~="bg-center"] { background-position: center; } [class~="mx-auto"] { margin-left: auto; margin-right: auto; } [class~="mt-auto"] { margin-top: auto; } /* tamaños */ [class~="w-2"] { width: 8px; } [class~="w-5"] { width: 20px; } [class~="w-6"] { width: 24px; } [class~="w-8"] { width: 32px; } [class~="w-24"] { width: 96px; } [class~="w-48"] { width: 192px; } [class~="w-full"] { width: 100%; } [class~="w-[30%]"] { width: 30%; } [class~="w-[40%]"] { width: 40%; } [class~="min-w-[20px]"] { min-width: 20px; } [class~="h-2"] { height: 8px; } [class~="h-5"] { height: 20px; } [class~="h-8"] { height: 32px; } [class~="h-16"] { height: 64px; } [class~="h-24"] { height: 96px; } [class~="h-32"] { height: 128px; } [class~="h-48"] { height: 192px; } [class~="h-64"] { height: 256px; } [class~="h-full"] { height: 100%; } [class~="h-[30%]"] { height: 30%; } [class~="h-[40%]"] { height: 40%; } [class~="h-[60vh]"] { height: 60vh; } [class~="min-h-screen"] { min-height: 100vh; } [class~="max-w-2xl"] { max-width: 42rem; } [class~="max-w-md"] { max-width: 28rem; } [class~="max-w-sm"] { max-width: 24rem; } [class~="max-w-container-max"] { max-width: var(--space-container-max); } [class~="aspect-[4/5]"] { aspect-ratio: 4 / 5; } /* espaciados custom del theme */ [class~="px-margin-mobile"] { padding-left: var(--space-margin-mobile); padding-right: var(--space-margin-mobile); } [class~="py-stack-lg"] { padding-top: var(--space-stack-lg); padding-bottom: var(--space-stack-lg); } [class~="pb-stack-lg"] { padding-bottom: var(--space-stack-lg); } [class~="p-stack-md"] { padding: var(--space-stack-md); } [class~="mb-stack-lg"] { margin-bottom: var(--space-stack-lg); } [class~="mb-stack-md"] { margin-bottom: var(--space-stack-md); } [class~="mb-stack-sm"] { margin-bottom: var(--space-stack-sm); } [class~="mt-stack-lg"] { margin-top: var(--space-stack-lg); } [class~="mt-stack-md"] { margin-top: var(--space-stack-md); } [class~="my-stack-md"] { margin-top: var(--space-stack-md); margin-bottom: var(--space-stack-md); } [class~="gap-gutter"] { gap: var(--space-gutter); } [class~="gap-stack-lg"] { gap: var(--space-stack-lg); } [class~="gap-stack-md"] { gap: var(--space-stack-md); } [class~="gap-stack-sm"] { gap: var(--space-stack-sm); } [class~="gap-unit"] { gap: var(--space-unit); } [class~="space-y-stack-lg"] > * + * { margin-top: var(--space-stack-lg); } [class~="space-y-stack-md"] > * + * { margin-top: var(--space-stack-md); } /* espaciados estándar */ [class~="gap-1"] { gap: 4px; } [class~="gap-2"] { gap: 8px; } [class~="gap-3"] { gap: 12px; } [class~="gap-4"] { gap: 16px; } [class~="gap-8"] { gap: 32px; } [class~="gap-x-8"] { column-gap: 32px; } [class~="gap-y-4"] { row-gap: 16px; } [class~="space-y-2"] > * + * { margin-top: 8px; } [class~="space-y-3"] > * + * { margin-top: 12px; } [class~="space-y-4"] > * + * { margin-top: 16px; } [class~="space-y-6"] > * + * { margin-top: 24px; } [class~="mb-1"] { margin-bottom: 4px; } [class~="mb-2"] { margin-bottom: 8px; } [class~="mb-3"] { margin-bottom: 12px; } [class~="mb-4"] { margin-bottom: 16px; } [class~="mb-6"] { margin-bottom: 24px; } [class~="mt-4"] { margin-top: 16px; } [class~="ml-2"] { margin-left: 8px; } [class~="p-3"] { padding: 12px; } [class~="p-4"] { padding: 16px; } [class~="p-6"] { padding: 24px; } [class~="p-8"] { padding: 32px; } [class~="px-2"] { padding-left: 8px; padding-right: 8px; } [class~="px-3"] { padding-left: 12px; padding-right: 12px; } [class~="px-4"] { padding-left: 16px; padding-right: 16px; } [class~="px-6"] { padding-left: 24px; padding-right: 24px; } [class~="px-8"] { padding-left: 32px; padding-right: 32px; } [class~="px-10"] { padding-left: 40px; padding-right: 40px; } [class~="py-0.5"] { padding-top: 2px; padding-bottom: 2px; } [class~="py-1"] { padding-top: 4px; padding-bottom: 4px; } [class~="py-2"] { padding-top: 8px; padding-bottom: 8px; } [class~="py-3"] { padding-top: 12px; padding-bottom: 12px; } [class~="py-4"] { padding-top: 16px; padding-bottom: 16px; } [class~="pt-2"] { padding-top: 8px; } [class~="pt-4"] { padding-top: 16px; } [class~="pt-6"] { padding-top: 24px; } [class~="pt-20"] { padding-top: 80px; } [class~="pb-2"] { padding-bottom: 8px; } [class~="pb-24"] { padding-bottom: 96px; } /* ========================================================================== Tipografía ========================================================================== */ [class~="font-label-sm"], [class~="font-headline-lg-mobile"], [class~="font-label-md"], [class~="font-body-lg"], [class~="font-body-md"], [class~="font-headline-sm"], [class~="font-headline-md"], [class~="font-headline-lg"], [class~="font-display-lg"] { font-family: 'Inter', sans-serif; } [class~="text-label-sm"] { font-size: 12px; line-height: 16px; font-weight: 600; } [class~="text-headline-lg-mobile"] { font-size: 28px; line-height: 34px; font-weight: 700; } [class~="text-label-md"] { font-size: 14px; line-height: 20px; letter-spacing: 0.01em; font-weight: 500; } [class~="text-body-lg"] { font-size: 18px; line-height: 28px; font-weight: 400; } [class~="text-body-md"] { font-size: 16px; line-height: 24px; font-weight: 400; } [class~="text-headline-sm"] { font-size: 20px; line-height: 28px; font-weight: 600; } [class~="text-headline-md"] { font-size: 24px; line-height: 32px; font-weight: 700; } [class~="text-headline-lg"] { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 700; } [class~="text-display-lg"] { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; font-weight: 800; } [class~="font-black"] { font-weight: 900; } [class~="font-bold"] { font-weight: 700; } [class~="font-semibold"] { font-weight: 600; } [class~="font-medium"] { font-weight: 500; } [class~="font-mono"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } [class~="text-3xl"] { font-size: 1.875rem; line-height: 2.25rem; } [class~="text-4xl"] { font-size: 2.25rem; line-height: 2.5rem; } [class~="text-6xl"] { font-size: 3.75rem; line-height: 1; } [class~="text-lg"] { font-size: 1.125rem; line-height: 1.75rem; } [class~="text-sm"] { font-size: 0.875rem; line-height: 1.25rem; } [class~="text-xs"] { font-size: 0.75rem; line-height: 1rem; } [class~="text-[10px]"] { font-size: 10px; } [class~="text-[12px]"] { font-size: 12px; } [class~="text-[18px]"] { font-size: 18px; } [class~="text-[64px]"] { font-size: 64px; } [class~="text-[80px]"] { font-size: 80px; } [class~="!text-5xl"] { font-size: 3rem !important; line-height: 1 !important; } [class~="text-center"] { text-align: center; } [class~="text-left"] { text-align: left; } [class~="text-right"] { text-align: right; } [class~="uppercase"] { text-transform: uppercase; } [class~="italic"] { font-style: italic; } [class~="underline"] { text-decoration: underline; } [class~="leading-relaxed"] { line-height: 1.625; } [class~="tracking-tight"] { letter-spacing: -0.025em; } [class~="tracking-tighter"] { letter-spacing: -0.05em; } [class~="tracking-wider"] { letter-spacing: 0.05em; } [class~="tracking-widest"] { letter-spacing: 0.1em; } /* ========================================================================== Color: fondos, texto, bordes (con alias brand-orange / accent / accent-orange) ========================================================================== */ [class~="bg-background"] { background-color: var(--color-background); } [class~="bg-surface"] { background-color: var(--color-surface); } [class~="bg-surface-container"] { background-color: var(--color-surface-container); } [class~="bg-surface-container-high"] { background-color: var(--color-surface-container-high); } [class~="bg-surface-container-highest"] { background-color: var(--color-surface-container-highest); } [class~="bg-surface-container-low"] { background-color: var(--color-surface-container-low); } [class~="bg-surface-container-lowest"] { background-color: var(--color-surface-container-lowest); } [class~="bg-surface-elevated"] { background-color: var(--color-surface-elevated); } [class~="bg-surface-variant"] { background-color: var(--color-surface-variant); } [class~="bg-surface/80"] { background-color: rgba(19, 19, 19, 0.8); } [class~="bg-transparent"] { background-color: transparent; } [class~="bg-success"] { background-color: var(--color-success); } [class~="bg-primary"] { background-color: var(--color-primary); } [class~="bg-primary/10"] { background-color: rgba(255, 255, 255, 0.1); } [class~="bg-accent"], [class~="bg-brand-orange"], [class~="bg-accent-orange"] { background-color: var(--color-accent); } [class~="bg-brand-orange/10"] { background-color: rgba(232, 118, 63, 0.1); } [class~="text-on-background"] { color: var(--color-on-background); } [class~="text-on-surface-variant"] { color: var(--color-on-surface-variant); } [class~="text-background"] { color: var(--color-background-text); } [class~="text-primary"] { color: var(--color-primary); } [class~="text-secondary"] { color: var(--color-secondary); } [class~="text-text-secondary"] { color: var(--color-text-secondary); } [class~="text-success"] { color: var(--color-success); } [class~="text-error"] { color: var(--color-error); } [class~="text-white"] { color: #ffffff; } [class~="text-accent"], [class~="text-brand-orange"], [class~="text-accent-orange"] { color: var(--color-accent); } [class~="text-brand-orange/40"] { color: rgba(232, 118, 63, 0.4); } [class~="border"] { border-width: 1px; border-style: solid; border-color: currentColor; } [class~="border-2"] { border-width: 2px; border-style: solid; } [class~="border-b"] { border-bottom-width: 1px; border-bottom-style: solid; } [class~="border-t"] { border-top-width: 1px; border-top-style: solid; } [class~="border-t-2"] { border-top-width: 2px; border-top-style: solid; } [class~="border-none"] { border-style: none; } [class~="border-dashed"] { border-style: dashed; } [class~="border-transparent"] { border-color: transparent; } [class~="border-white"] { border-color: #ffffff; } [class~="border-white/20"] { border-color: rgba(255, 255, 255, 0.2); } [class~="border-border-subtle"] { border-color: var(--color-border-subtle); } [class~="border-on-surface-variant"] { border-color: var(--color-on-surface-variant); } [class~="border-primary/20"] { border-color: rgba(255, 255, 255, 0.2); } [class~="border-brand-orange/20"] { border-color: rgba(232, 118, 63, 0.2); } [class~="border-accent"], [class~="border-brand-orange"] { border-color: var(--color-accent); } [class~="rounded"] { border-radius: var(--radius-default); } [class~="rounded-lg"] { border-radius: var(--radius-lg); } [class~="rounded-xl"] { border-radius: var(--radius-xl); } [class~="rounded-2xl"] { border-radius: 1rem; } [class~="rounded-full"] { border-radius: var(--radius-full); } [class~="rounded-bl-lg"] { border-bottom-left-radius: var(--radius-lg); } [class~="shadow-lg"] { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -4px rgba(0, 0, 0, .4); } [class~="shadow-brand-orange/10"] { box-shadow: 0 10px 15px -3px rgba(232, 118, 63, 0.1), 0 4px 6px -4px rgba(232, 118, 63, 0.1); } [class~="shadow-accent-orange/20"] { box-shadow: 0 10px 15px -3px rgba(232, 118, 63, 0.2), 0 4px 6px -4px rgba(232, 118, 63, 0.2); } [class~="drop-shadow-md"] { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); } [class~="opacity-10"] { opacity: .1; } [class~="opacity-20"] { opacity: .2; } [class~="blur-[100px]"] { filter: blur(100px); } [class~="blur-[120px]"] { filter: blur(120px); } [class~="backdrop-blur-md"] { backdrop-filter: blur(12px); } [class~="transition-all"] { transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 150ms; } [class~="transition-colors"] { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 150ms; } [class~="transition-opacity"] { transition-property: opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 150ms; } [class~="duration-150"] { transition-duration: 150ms; } [class~="duration-200"] { transition-duration: 200ms; } [class~="duration-300"] { transition-duration: 300ms; } [class~="bg-gradient-to-b"][class~="from-black/60"][class~="to-transparent"] { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); } [class~="bg-gradient-to-t"][class~="from-surface-container"][class~="to-transparent"] { background-image: linear-gradient(to top, var(--color-surface-container), transparent); } /* ========================================================================== Pseudo-clases / variantes (hover, focus, active, disabled, group, peer...) ========================================================================== */ [class~="hover:opacity-80"]:hover { opacity: .8; } [class~="hover:opacity-90"]:hover { opacity: .9; } [class~="hover:brightness-110"]:hover { filter: brightness(1.1); } [class~="hover:underline"]:hover { text-decoration: underline; } [class~="hover:transform"]:hover { /* habilitado vía hover:scale-* */ } [class~="hover:scale-[1.02]"]:hover { transform: scale(1.02); } [class~="hover:bg-surface-container-high"]:hover { background-color: var(--color-surface-container-high); } [class~="hover:bg-white/5"]:hover { background-color: rgba(255, 255, 255, 0.05); } [class~="hover:border-accent"]:hover { border-color: var(--color-accent); } [class~="hover:border-white/20"]:hover { border-color: rgba(255, 255, 255, 0.2); } [class~="hover:text-accent"]:hover { color: var(--color-accent); } [class~="hover:text-brand-orange"]:hover { color: var(--color-accent); } [class~="hover:text-primary"]:hover { color: var(--color-primary); } [class~="hover:text-white"]:hover { color: #ffffff; } [class~="active:scale-95"]:active { transform: scale(.95); } [class~="active:scale-[0.98]"]:active { transform: scale(.98); } [class~="active:scale-[0.99]"]:active { transform: scale(.99); } [class~="focus:border-brand-orange"]:focus { border-color: var(--color-accent); outline: none; } [class~="outline-none"] { outline: none; } [class~="focus:outline-none"]:focus { outline: none; } [class~="focus:ring-0"]:focus { box-shadow: none; } [class~="disabled:opacity-30"]:disabled { opacity: .3; } [class~="placeholder:text-on-surface-variant"]::placeholder { color: var(--color-on-surface-variant); } [class~="placeholder:text-text-secondary"]::placeholder { color: var(--color-text-secondary); } body [class~="selection:bg-accent"]::selection, [class~="selection:bg-accent"]::selection { background-color: var(--color-accent); } body [class~="selection:bg-brand-orange"]::selection, [class~="selection:bg-brand-orange"]::selection { background-color: var(--color-accent); } [class~="selection:text-white"]::selection { color: #ffffff; } .group:hover [class~="group-hover:border-accent/50"] { border-color: rgba(232, 118, 63, 0.5); } [class~="peer"]:checked ~ [class~="peer-checked:border-brand-orange"] { border-color: var(--color-accent); } [class~="peer"]:checked ~ [class~="peer-checked:bg-brand-orange"] { background-color: var(--color-accent); } /* ========================================================================== Responsive (sm 640px / md 768px / lg 1024px) — deben ir al final para ganar la cascada sobre las reglas base equivalentes. ========================================================================== */ @media (min-width: 640px) { [class~="sm:flex-row"] { flex-direction: row; } } @media (min-width: 768px) { [class~="md:block"] { display: block; } [class~="md:inline"] { display: inline; } [class~="md:flex-row"] { flex-direction: row; } [class~="md:items-center"] { align-items: center; } [class~="md:items-start"] { align-items: flex-start; } [class~="md:justify-center"] { justify-content: center; } [class~="md:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } [class~="md:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } [class~="md:gap-4"] { gap: 16px; } [class~="md:gap-8"] { gap: 32px; } [class~="md:p-8"] { padding: 32px; } [class~="md:px-margin-desktop"] { padding-left: var(--space-margin-desktop); padding-right: var(--space-margin-desktop); } [class~="md:h-[75vh]"] { height: 75vh; } [class~="md:text-left"] { text-align: left; } [class~="md:text-[64px]"] { font-size: 64px; } [class~="md:text-display-lg"] { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; font-weight: 800; } [class~="md:text-headline-lg"] { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 700; } [class~="md:text-headline-md"] { font-size: 24px; line-height: 32px; font-weight: 700; } [class~="md:font-headline-lg"] { font-family: 'Inter', sans-serif; } } @media (min-width: 1024px) { [class~="lg:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } [class~="lg:grid-cols-12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); } [class~="lg:col-span-5"] { grid-column: span 5 / span 5; } [class~="lg:col-span-7"] { grid-column: span 7 / span 7; } }