/* Concatenated main stylesheet - 2026-04-28 */

/* ===== theme.css ===== */
/* ===== SISTEMA DE TEMAS (Light/Dark) ===== */

:root {
  /* Light Mode (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Brand Colors */
  --primary-color: #f97316;
  --primary-dark: #ea580c;
  --secondary-color: #f43f54;
  --accent-color: #ff5722;

  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Neutral */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
html.dark-mode {
  --bg-primary: #000000;
  --bg-secondary: #121212;
  --bg-tertiary: #1e1e1e;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --border-color: #2d2d2d;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);

  /* Brand Colors (adjusted for dark) */
  --primary-color: #fb923c;
  --primary-dark: #f97316;
  --secondary-color: #fb7185;
  --accent-color: #ff6b4a;

  /* Status Colors (darker mode) */
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;
}

/* ===== GLOBAL STYLES WITH THEME ===== */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

/* Text Colors */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* Background Colors */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-tertiary {
  background-color: var(--bg-tertiary);
}

/* Border */
.border-color {
  border-color: var(--border-color);
}

.border {
  border-color: var(--border-color);
}

/* Shadows */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ===== COMPONENT THEMING ===== */

/* Cards */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

.card:hover {
  border-color: var(--primary-color);
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  color: white;
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  background-color: var(--border-color);
}

/* Inputs */
input,
textarea,
select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* Modals & Overlays */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

html.dark-mode .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Headers & Nav */
header,
nav,
.navbar {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Footers */
footer {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
}

/* Tables */
table {
  color: var(--text-primary);
}

table tbody tr {
  border-bottom: 1px solid var(--border-color);
}

table tbody tr:hover {
  background-color: var(--bg-tertiary);
}

/* Code Blocks */
code,
pre {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Scrollbar Theming */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ===== SMOOTH TRANSITIONS ===== */

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent flashing on page load */
html {
  color-scheme: light dark;
}

html.dark-mode {
  color-scheme: dark;
}

/* ===== UTILITY CLASSES ===== */

.text-orange-500 {
  color: var(--primary-color);
}

.text-red-500 {
  color: var(--secondary-color);
}

.bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.1);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

html.dark-mode .bg-gray-50 {
  background-color: var(--bg-tertiary);
}

.bg-white {
  background-color: var(--bg-primary);
}

.bg-gray-900 {
  background-color: var(--bg-secondary);
}

.text-gray-900 {
  color: var(--text-primary);
}

.text-gray-600 {
  color: var(--text-secondary);
}

.text-gray-400 {
  color: var(--text-tertiary);
}

.border-gray-200 {
  border-color: var(--border-color);
}

.border-gray-300 {
  border-color: var(--border-color);
}

.hover\:bg-gray-100:hover {
  background-color: var(--bg-tertiary);
}

.hover\:text-orange-500:hover {
  color: var(--primary-color);
}

/* ===== DARK MODE SPECIFIC ===== */

html.dark-mode input::placeholder {
  color: var(--text-tertiary);
}

html.dark-mode textarea::placeholder {
  color: var(--text-tertiary);
}

/* NeoNav Dark Mode */
html.dark-mode .neonav {
  background-color: var(--bg-secondary);
}

html.dark-mode .neonav-link {
  color: var(--text-primary);
}

html.dark-mode .neonav-mobile {
  background-color: var(--bg-secondary);
}

/* Chat Widget */
html.dark-mode #chat-widget {
  --chat-bg: var(--bg-secondary);
  --chat-msg-user-bg: var(--primary-color);
  --chat-msg-bot-bg: var(--bg-tertiary);
  --chat-text: var(--text-primary);
}

/* Buttons with Tailwind classes */
.py-3.px-4.bg-orange-500 {
  background-color: var(--primary-color);
}

.py-3.px-4.bg-gray-100 {
  background-color: var(--bg-tertiary);
}

html.dark-mode .py-3.px-4.bg-gray-100 {
  background-color: var(--bg-tertiary);
}

/* Modal Fixes */
html.dark-mode .bg-white {
  background-color: var(--bg-secondary);
}

html.dark-mode .text-white {
  color: var(--text-primary);
}

/* Gradients */
.gradient-to-r {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

html.dark-mode .gradient-to-r {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

/* =====================================================================
   DARK MODE OVERRIDES — Sobrescriben clases hardcodeadas de Tailwind
   ===================================================================== */

/* --- Textos: tonos oscuros → claros en dark mode --- */
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-700 {
  color: #e2e8f0 !important;
}

/* Prose en dark mode - muy importante para TinyMCE content */
html.dark-mode .prose.text-gray-700 {
  color: #e2e8f0 !important;
}

html.dark-mode .prose.max-w-none.text-gray-700 {
  color: #e2e8f0 !important;
}

/* Especificidad extra para divs con prose + bg-gray-50 (evento.php) */
html.dark-mode div.prose.max-w-none.text-gray-700.bg-gray-50.p-6.rounded-xl {
  color: #e2e8f0 !important;
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
}

html.dark-mode .text-gray-600,
html.dark-mode .text-gray-500 {
  color: #cbd5e1 !important;
}

html.dark-mode .text-gray-400,
html.dark-mode .text-gray-300 {
  color: #94a3b8 !important;
}

html.dark-mode .text-black {
  color: #f1f5f9 !important;
}

/* Mantener colores de marca en dark */
html.dark-mode .text-orange-500 {
  color: #fb923c !important;
}
html.dark-mode .text-orange-600 {
  color: #f97316 !important;
}
html.dark-mode .text-red-500 {
  color: #f87171 !important;
}
html.dark-mode .text-green-500 {
  color: #34d399 !important;
}
html.dark-mode .text-blue-500 {
  color: #60a5fa !important;
}
html.dark-mode .text-blue-700 {
  color: #93c5fd !important;
}
html.dark-mode .text-amber-600 {
  color: #fcd34d !important;
}

/* Labels de formularios */
html.dark-mode label,
html.dark-mode .label {
  color: #e2e8f0;
}

/* Texto blanco: mantener blanco */
html.dark-mode .text-white {
  color: #ffffff !important;
}

/* --- Fondos: claros → oscuros en dark mode --- */
html.dark-mode .bg-white {
  background-color: #121212 !important;
}

html.dark-mode .bg-gray-50 {
  background-color: #121212 !important;
}

html.dark-mode .bg-gray-100 {
  background-color: #1e1e1e !important;
}

html.dark-mode .bg-gray-200 {
  background-color: #2d2d2d !important;
}

html.dark-mode .bg-gray-300 {
  background-color: #3d3d3d !important;
}

/* Fondos naranja/orange en dark: ligeramente más oscuros */
html.dark-mode .bg-orange-50 {
  background-color: rgba(251, 146, 60, 0.12) !important;
}

html.dark-mode .bg-amber-50 {
  background-color: rgba(251, 191, 36, 0.1) !important;
}

html.dark-mode .bg-blue-50 {
  background-color: rgba(96, 165, 250, 0.1) !important;
}

html.dark-mode .bg-green-50 {
  background-color: rgba(52, 211, 153, 0.1) !important;
}

html.dark-mode .bg-red-50 {
  background-color: rgba(248, 113, 113, 0.1) !important;
}

html.dark-mode .bg-indigo-50 {
  background-color: rgba(165, 180, 252, 0.1) !important;
}

html.dark-mode .bg-emerald-50 {
  background-color: rgba(52, 211, 153, 0.1) !important;
}

/* Fondos gradient claros → dark */
html.dark-mode .bg-gradient-to-br.from-orange-50,
html.dark-mode .from-orange-50 {
  --tw-gradient-from: rgba(251, 146, 60, 0.15) !important;
}
html.dark-mode .from-blue-50 {
  --tw-gradient-from: rgba(96, 165, 250, 0.15) !important;
}
html.dark-mode .from-green-50 {
  --tw-gradient-from: rgba(52, 211, 153, 0.15) !important;
}
html.dark-mode .from-amber-50 {
  --tw-gradient-from: rgba(251, 191, 36, 0.1) !important;
}
html.dark-mode .to-red-50,
html.dark-mode .to-amber-50,
html.dark-mode .to-emerald-50,
html.dark-mode .to-indigo-50 {
  --tw-gradient-to: transparent !important;
}

/* --- Bordes --- */
html.dark-mode .border-gray-100,
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-300 {
  border-color: #2d2d2d !important;
}

html.dark-mode .border-t,
html.dark-mode .border-b,
html.dark-mode .border-l,
html.dark-mode .border-r,
html.dark-mode .border {
  border-color: #2d2d2d !important;
}

/* Bordes de colores de marca: mantener */
html.dark-mode .border-orange-200,
html.dark-mode .border-orange-400 {
  border-color: rgba(251, 146, 60, 0.5) !important;
}

html.dark-mode .border-orange-400 {
  border-color: #fb923c !important;
}

/* --- Hover states --- */
html.dark-mode .hover\:bg-gray-100:hover,
html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-gray-200:hover {
  background-color: #1e1e1e !important;
}

html.dark-mode .hover\:text-gray-700:hover,
html.dark-mode .hover\:text-gray-900:hover {
  color: #f1f5f9 !important;
}

html.dark-mode .hover\:bg-orange-50:hover {
  background-color: rgba(251, 146, 60, 0.15) !important;
}

/* --- Modales --- */
html.dark-mode .relative.bg-white.rounded-3xl {
  background-color: #121212 !important;
}

html.dark-mode #login-modal .relative,
html.dark-mode #forgot-password-modal .relative,
html.dark-mode #user-dashboard-modal .relative,
html.dark-mode #registration-modal .relative,
html.dark-mode #cart-modal .relative,
html.dark-mode #membresia-modal .relative {
  background-color: #121212;
  color: #f1f5f9;
}

/* Separadores dentro de modales */
html.dark-mode .border-t.border-gray-200 {
  border-color: #2d2d2d !important;
}

/* --- Inputs en dark mode --- */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="date"],
html.dark-mode select,
html.dark-mode textarea {
  background-color: #1e1e1e !important;
  color: #f1f5f9 !important;
  border-color: #2d2d2d !important;
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="tel"]:focus,
html.dark-mode input[type="date"]:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  border-color: var(--primary-color) !important;
  background-color: #1e1e1e !important;
}

html.dark-mode select option {
  background-color: #121212;
  color: #f1f5f9;
}

/* --- Buttons secundarios en dark --- */
html.dark-mode .bg-gray-100.text-gray-700,
html.dark-mode .bg-gray-100.text-gray-600 {
  background-color: #1e1e1e !important;
  color: #e2e8f0 !important;
}

html.dark-mode button.bg-gray-100,
html.dark-mode a.bg-gray-100 {
  background-color: #1e1e1e !important;
  color: #e2e8f0 !important;
}

/* Divider "o continúa con email" */
html.dark-mode .bg-white.text-gray-500 {
  background-color: #121212 !important;
  color: #94a3b8 !important;
}

/* --- Chat Widget dark mode --- */
html.dark-mode #chat-window {
  background: #121212;
  border-color: #1e1e1e;
}

html.dark-mode #chat-messages {
  background: #121212 !important;
}

html.dark-mode .chat-msg.bot {
  background: #1e1e1e !important;
  color: #f1f5f9 !important;
}

html.dark-mode #chat-input-wrap {
  background: #121212 !important;
  border-top-color: #2d2d2d !important;
}

html.dark-mode #chat-input {
  background: #1e1e1e !important;
  color: #f1f5f9 !important;
  border-color: #2d2d2d !important;
}

html.dark-mode #chat-input:focus {
  background: #2a2a2a !important;
  border-color: var(--primary-color) !important;
}

html.dark-mode .chat-typing {
  background: #1e1e1e !important;
}

/* --- Toast en dark --- */
html.dark-mode #toast {
  background: #121212 !important;
  color: #f1f5f9 !important;
  border: 1px solid #2d2d2d;
}

html.dark-mode #toast-title {
  color: #f1f5f9 !important;
}

html.dark-mode #toast-message {
  color: #cbd5e1 !important;
}

/* --- Dashboard stats cards en dark --- */
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50 {
  background: rgba(251, 146, 60, 0.15) !important;
}
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50 {
  background: rgba(96, 165, 250, 0.15) !important;
}
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50 {
  background: rgba(52, 211, 153, 0.15) !important;
}

/* Tarjetas de Puntos TIM3 e Invita un Amigo */
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50 {
  background: rgba(99, 102, 241, 0.15) !important;
}
html.dark-mode .border-indigo-100 {
  border-color: rgba(99, 102, 241, 0.3) !important;
}
html.dark-mode .text-indigo-800,
html.dark-mode .text-indigo-700 {
  color: #c7d2fe !important; /* indigo-200 */
}
html.dark-mode .text-indigo-500 {
  color: #818cf8 !important; /* indigo-400 */
}

html.dark-mode .bg-gradient-to-br.from-teal-50.to-green-50 {
  background: rgba(20, 184, 166, 0.15) !important;
}
html.dark-mode .border-teal-100,
html.dark-mode .border-teal-200 {
  border-color: rgba(20, 184, 166, 0.3) !important;
}
html.dark-mode .text-teal-800,
html.dark-mode .text-teal-700 {
  color: #99f6e4 !important; /* teal-200 */
}
html.dark-mode .text-teal-600 {
  color: #2dd4bf !important; /* teal-400 */
}
html.dark-mode .text-teal-500 {
  color: #14b8a6 !important; /* teal-500 */
}

/* --- Membresía modal en dark --- */
html.dark-mode .bg-gradient-to-br.from-orange-50.to-amber-50 {
  background: rgba(251, 146, 60, 0.12) !important;
}

/* --- Info banner en dashboard --- */
html.dark-mode .bg-blue-50.border-l-2.border-blue-300 {
  background-color: rgba(96, 165, 250, 0.1) !important;
  border-color: #60a5fa !important;
}

html.dark-mode .text-blue-700 {
  color: #93c5fd !important;
}

/* --- Tabs en dashboard --- */
html.dark-mode .border-b.border-gray-200 {
  border-color: #2d2d2d !important;
}

/* --- Pill nav en dark (si aparece) --- */
html.dark-mode #pill-nav-wrap {
  --pn-base: #121212;
  --pn-pill: #f1f5f9;
  --pn-text: #f1f5f9;
}

/* ===== PROSE & CONTENT BLOCKS (TinyMCE, Event Details) ===== */

/* Prose (TinyMCE editor content) */
html.dark-mode .prose {
  color: #f1f5f9;
}

html.dark-mode .prose p,
html.dark-mode .prose li,
html.dark-mode .prose td,
html.dark-mode .prose blockquote {
  color: #e2e8f0;
}

html.dark-mode .prose h1,
html.dark-mode .prose h2,
html.dark-mode .prose h3,
html.dark-mode .prose h4,
html.dark-mode .prose h5,
html.dark-mode .prose h6 {
  color: #f1f5f9;
}

html.dark-mode .prose a {
  color: #fb923c;
}

html.dark-mode .prose a:hover {
  color: #fbbf24;
}

html.dark-mode .prose strong {
  color: #f1f5f9;
}

html.dark-mode .prose em {
  color: #f1f5f9;
}

html.dark-mode .prose code {
  background-color: #000000;
  color: #f1f5f9;
  border: 1px solid #1e1e1e;
}

html.dark-mode .prose pre {
  background-color: #000000;
  color: #f1f5f9;
}

html.dark-mode .prose table {
  border-color: #2d2d2d;
}

html.dark-mode .prose table thead {
  border-color: #2d2d2d;
  background-color: #1e1e1e;
}

html.dark-mode .prose table tr {
  border-color: #2d2d2d;
}

html.dark-mode .prose table tr:nth-child(2n) {
  background-color: #1e1e1e;
}

html.dark-mode .prose table th,
html.dark-mode .prose table td {
  color: #f1f5f9;
  border-color: #2d2d2d;
}

html.dark-mode .prose hr {
  border-color: #2d2d2d;
}

html.dark-mode .prose blockquote {
  border-color: #2d2d2d;
  color: #cbd5e1;
}

/* Content sections with bg-gray-50 */
html.dark-mode .bg-gray-50.p-6.rounded-xl {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
}

/* TinyMCE content wrapper */
html.dark-mode .tinymce-content {
  color: #e2e8f0;
}

html.dark-mode .tinymce-content p {
  color: #e2e8f0;
}

html.dark-mode .tinymce-content strong,
html.dark-mode .tinymce-content b {
  color: #f1f5f9;
}

/* Event description areas */
html.dark-mode .bg-white.bg-opacity-90,
html.dark-mode .bg-white\/90 {
  background-color: #121212 !important;
}

html.dark-mode .bg-white\/90.backdrop-blur-sm {
  background-color: #121212 !important;
}

/* Acerca del evento section */
html.dark-mode .bg-white\/90.backdrop-blur-sm.rounded-2xl {
  background-color: #121212;
}

html.dark-mode .bg-white\/90 .text-gray-800 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-800 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-600.leading-relaxed {
  color: #cbd5e1 !important;
}

/* ===== MORPHY BUTTONS (Dark Mode) ===== */

/* morphy-btn--dark en dark mode: fondo blanco/claro con texto oscuro */
html.dark-mode .morphy-btn--dark .morphy-bg {
  background: #f8fafc !important;
}

html.dark-mode .morphy-btn--dark .morphy-dot {
  background: #e2e8f0 !important;
}

html.dark-mode .morphy-btn--dark .morphy-label {
  color: #000000 !important;
  transform: translateX(0) !important;
}

/* Hover state en dark mode: fondo gris más oscuro */
html.dark-mode .morphy-btn--dark.is-active .morphy-bg,
html.dark-mode .morphy-btn--dark:hover .morphy-bg {
  background: #e2e8f0 !important;
}

html.dark-mode .morphy-btn--dark.is-active .morphy-dot,
html.dark-mode .morphy-btn--dark:hover .morphy-dot {
  background: #cbd5e1 !important;
}

html.dark-mode .morphy-btn--dark.is-active .morphy-label,
html.dark-mode .morphy-btn--dark:hover .morphy-label {
  color: #000000 !important;
  transform: translateX(0.375rem) !important;
}

html.dark-mode .morphy-btn--dark.is-active,
html.dark-mode .morphy-btn--dark:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important;
}


/* ===== theme-toggle-button.css ===== */
/* From Uiverse.io by juanpabl0svn */
/* The switch - the box around the slider */
.switch {
    font-size: 11px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    cursor: pointer;
    overflow: hidden;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    --background: #20262c;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background);
    transition: 0.5s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 10%;
    bottom: 15%;
    box-shadow: inset 8px -4px 0px 0px #ececd9, -4px 1px 4px 0px #dadada;
    background: var(--background);
    transition: 0.5s;
}

.decoration {
    position: absolute;
    content: "";
    height: 2px;
    width: 2px;
    border-radius: 50%;
    right: 20%;
    top: 15%;
    background: #e5f041e6;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.5s;
    box-shadow: -4px 6px 0 #e5f041e6, 5px 9px 0 #e5f041e6, -11px 1px 0 #e5f041e6,
        -13px 6px 0 #e5f041e6, -4px 14px 0 #e5f041e6, -10px 15px 0 #e5f041e6;
}

input:checked~.decoration {
    transform: translateX(-13px);
    width: 6px;
    height: 6px;
    background: white;
    box-shadow: -8px 0 0 white, -4px 0 0 1px white, 3px 9px 0 1px white,
        1px 11px 0 white, 6px 11px 0 white;
}

input:checked+.slider {
    background-color: #5494de;
}

input:checked+.slider:before {
    transform: translateX(100%);
    box-shadow: inset 15px -4px 0px 15px #efdf2b, 0 0 10px 0px #efdf2b;
}

/* Contenedor del switch en el nav */
#theme-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    flex-shrink: 0;
}
/* ===== styles.css ===== */
    body {
      box-sizing: border-box;
    }

    .font-bebas {
      font-family: 'Bebas Neue', sans-serif;
    }

    .font-inter {
      font-family: 'Inter', sans-serif;
    }

    .gradient-overlay {
      background: linear-gradient(135deg, rgba(255, 87, 34, 0.9) 0%, rgba(244, 67, 54, 0.85) 50%, rgba(211, 47, 47, 0.9) 100%);
    }

    .card-hover {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(255, 87, 34, 0.25);
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: #FF5722;
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .pulse-animation {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.7;
      }
    }

    .slide-in {
      animation: slideIn 0.6s ease-out forwards;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .geometric-pattern {
      background-image:
        linear-gradient(30deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(150deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(30deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(150deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(60deg, #fed7aa 25%, transparent 25.5%, transparent 75%, #fed7aa 75%, #fed7aa),
        linear-gradient(60deg, #fed7aa 25%, transparent 25.5%, transparent 75%, #fed7aa 75%, #fed7aa);
      background-size: 80px 140px;
      background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
      opacity: 0.03;
    }

    .slider-container {
      scroll-behavior: smooth;
      scrollbar-width: none;
    }

    .slider-container::-webkit-scrollbar {
      display: none;
    }

    .blog-card {
      transition: all 0.3s ease;
    }

    .blog-card:hover .blog-image {
      transform: scale(1.05);
    }

    .service-icon {
      transition: all 0.3s ease;
    }

    .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
    }

    .footer-link {
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .footer-link:hover {
      color: #FF5722;
      transform: translateX(4px);
    }

    .scroll-smooth {
      scroll-behavior: smooth;
    }

    .cart-badge {
      animation: cartPulse 0.3s ease-out;
    }

    @keyframes cartPulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    .modal-backdrop {
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .toast {
      animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(400px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .fade-in {
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Skeleton loading */
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeletonShimmer 1.5s ease-in-out infinite;
      border-radius: 0.5rem;
    }

    @keyframes skeletonShimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    .skeleton-text {
      height: 0.875rem;
      margin-bottom: 0.5rem;
    }

    .skeleton-text-sm {
      height: 0.75rem;
      margin-bottom: 0.375rem;
    }

    .skeleton-circle {
      border-radius: 50%;
    }

    /* Real-time validation styles */
    .field-valid {
      border-color: #22c55e !important;
      box-shadow: 0 0 0 1px #22c55e;
    }

    .field-invalid {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 1px #ef4444;
    }

    .field-error-msg {
      color: #ef4444;
      font-size: 0.75rem;
      margin-top: 0.25rem;
      display: block;
      animation: fadeIn 0.2s ease-out;
    }

    .password-strength {
      height: 4px;
      border-radius: 2px;
      margin-top: 0.5rem;
      background: #e5e7eb;
      overflow: hidden;
      transition: all 0.3s;
    }

    .password-strength-bar {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s, background-color 0.3s;
    }

    @view-transition {
      navigation: auto;
    }

    /* ============================================
   PILL NAV - Navegación estilo píldoras
   ============================================ */
    .pill-nav-items {
      position: relative;
      display: flex;
      align-items: center;
      height: 42px;
      background: var(--pn-base, #111827);
      border-radius: 9999px;
    }

    .pill-list {
      list-style: none;
      display: flex;
      align-items: stretch;
      gap: 3px;
      margin: 0;
      padding: 3px;
      height: 100%;
    }

    .pill-list>li {
      display: flex;
      height: 100%;
    }

    .pill-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 0 16px;
      background: var(--pn-pill, #fff);
      color: var(--pn-text, #111827);
      text-decoration: none;
      border-radius: 9999px;
      box-sizing: border-box;
      font-weight: 600;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border: none;
      background-color: var(--pn-pill, #fff);
    }

    .pill-item .pill-circle {
      position: absolute;
      left: 50%;
      bottom: 0;
      border-radius: 50%;
      background: var(--pn-base, #111827);
      z-index: 1;
      display: block;
      pointer-events: none;
      will-change: transform;
    }

    .pill-item .pill-label-stack {
      position: relative;
      display: inline-block;
      line-height: 1;
      z-index: 2;
    }

    .pill-item .pill-label-main {
      position: relative;
      z-index: 2;
      display: inline-block;
      line-height: 1;
      will-change: transform;
    }

    .pill-item .pill-label-over {
      position: absolute;
      left: 0;
      top: 0;
      color: var(--pn-hover-text, #fff);
      z-index: 3;
      display: inline-block;
      will-change: transform, opacity;
    }

    .pill-item.is-active {
      background: var(--pn-base, #111827);
      color: #fff;
    }

    /* ============================================
   TOGGLE SWITCH - Admin (interruptores)
   ============================================ */
    .tim3-switch {
      font-size: 0.6rem;
      position: relative;
      display: inline-block;
      width: 4em;
      height: 2em;
      cursor: pointer;
    }

    .tim3-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .tim3-switch .tim3-knob {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #eee;
      transition: 0.4s;
      border-radius: 0.5em;
      box-shadow: 0 0.2em #dfd9d9;
    }

    .tim3-switch .tim3-knob:before {
      position: absolute;
      content: "";
      height: 1.5em;
      width: 1.4em;
      border-radius: 0.3em;
      left: 0.3em;
      bottom: 0.7em;
      background-color: #fca5a5;
      transition: 0.4s;
      box-shadow: 0 0.4em #bcb4b4;
    }

    .tim3-switch .tim3-knob:hover::before {
      box-shadow: 0 0.2em #bcb4b4;
      bottom: 0.5em;
    }

    .tim3-switch input:checked+.tim3-knob:before {
      transform: translateX(2em);
      background: #86efac;
    }

    .tim3-switch input:checked+.tim3-knob {
      background-color: #dcfce7;
    }


    /* ============================================
   CARRITO FLOTANTE (solo móvil)
   ============================================ */
    body.modal-open #cart-fab,
    body.modal-open #chat-widget,
    body.modal-open .neonav-container,
    body.menu-open #cart-fab,
    body.menu-open #chat-widget {
      display: none !important;
    }

    #cart-fab {
      display: none;
      position: fixed;
      bottom: 92px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #ff0000 !important;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(239, 68, 68, 0.45);
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 9998;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    #cart-fab:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(249, 115, 22, 0.55);
    }

    #cart-fab-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 11px;
      background: #ff0000;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
    }

    #cart-fab-badge.hidden {
      display: none;
    }

    @media (max-width: 992px) {
      #cart-fab {
        display: flex;
      }
    }

    @media (max-width: 640px) {
      #cart-fab {
        bottom: 78px;
        right: 16px;
        width: 50px;
        height: 50px;
      }
    }

    /* ============================================
   CHAT WIDGET - Bot TIM3
   ============================================ */
    #chat-widget {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9998;
      font-family: 'Inter', sans-serif;
    }

    #chat-toggle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f97316, #ef4444);
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-left: auto;
    }

    #chat-toggle:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(249, 115, 22, 0.55);
    }

    #chat-window {
      display: none;
      position: absolute;
      bottom: 68px;
      right: 0;
      width: 340px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      flex-direction: column;
    }

    #chat-window.open {
      display: flex;
    }

    #chat-header {
      background: linear-gradient(135deg, #f97316, #ef4444);
      padding: 14px 16px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    #chat-header-avatar {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0;
    }

    #chat-header-info {
      flex: 1;
    }

    #chat-header-info strong {
      display: block;
      font-size: 0.9rem;
    }

    #chat-header-info span {
      font-size: 0.72rem;
      opacity: 0.85;
    }

    #chat-close {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      padding: 2px;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    #chat-close:hover {
      opacity: 1;
    }

    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 260px;
      max-height: 320px;
      background: #fafafa;
    }

    .chat-msg {
      max-width: 84%;
      padding: 9px 13px;
      border-radius: 14px;
      font-size: 0.85rem;
      line-height: 1.5;
      word-break: break-word;
    }

    .chat-msg.bot {
      background: #fff;
      color: #1f2937;
      border-bottom-left-radius: 4px;
      align-self: flex-start;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    .chat-msg.user {
      background: linear-gradient(135deg, #f97316, #ef4444);
      color: #fff;
      border-bottom-right-radius: 4px;
      align-self: flex-end;
    }

    .chat-typing {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 10px 13px;
      background: #fff;
      border-radius: 14px;
      border-bottom-left-radius: 4px;
      align-self: flex-start;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    .chat-typing span {
      width: 7px;
      height: 7px;
      background: #d1d5db;
      border-radius: 50%;
      animation: chatBounce 1.2s infinite;
    }

    .chat-typing span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .chat-typing span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes chatBounce {

      0%,
      60%,
      100% {
        transform: translateY(0);
      }

      30% {
        transform: translateY(-6px);
      }
    }

    #chat-input-wrap {
      display: flex;
      border-top: 1px solid #e5e7eb;
      padding: 10px;
      gap: 8px;
      flex-shrink: 0;
      background: #fff;
    }

    #chat-input {
      flex: 1;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 0.85rem;
      outline: none;
      resize: none;
      font-family: inherit;
      line-height: 1.4;
      max-height: 80px;
      background: #f9fafb;
      color: #111;
    }

    #chat-input:focus {
      border-color: #f97316;
      background: #fff;
    }

    #chat-send {
      background: linear-gradient(135deg, #f97316, #ef4444);
      color: #fff;
      border: none;
      border-radius: 10px;
      width: 38px;
      height: 38px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.2s;
      align-self: flex-end;
    }

    #chat-send:hover {
      opacity: 0.85;
    }

    #chat-send:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Responsive Chat Bubble */
    @media (max-width: 480px) {
      #chat-widget {
        bottom: 16px;
        right: 16px;
      }

      #chat-toggle {
        width: 50px;
        height: 50px;
      }

      #chat-window {
        width: calc(100vw - 32px);
        right: 0;
        bottom: 64px;
        max-height: min(400px, calc(100vh - 90px));
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      }
    }
/* ===== border-glow.css ===== */
/* ============================================================================
   BORDER-GLOW.CSS — Port from React Bits BorderGlow (@DavidHDev)
   Efecto de borde brillante que sigue el cursor al hacer hover en tarjetas.
   ============================================================================ */

.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 16px;
  --glow-padding: 30px;
  --cone-spread: 25;
  --fill-opacity: 0.5;
  --card-bg: #060010;

  --gradient-one: radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%);
  --gradient-base: linear-gradient(#c084fc 0 100%);

  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 60%);
  --glow-color-50: hsl(40deg 80% 80% / 50%);
  --glow-color-40: hsl(40deg 80% 80% / 40%);
  --glow-color-30: hsl(40deg 80% 80% / 30%);
  --glow-color-20: hsl(40deg 80% 80% / 20%);
  --glow-color-10: hsl(40deg 80% 80% / 10%);

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}

/* Variante para cards con fondo claro (index.php) */
.border-glow-card.border-glow-light {
  --card-bg: #ffffff;
  --glow-color: hsl(25deg 90% 55% / 100%);
  --glow-color-60: hsl(25deg 90% 55% / 60%);
  --glow-color-50: hsl(25deg 90% 55% / 50%);
  --glow-color-40: hsl(25deg 90% 55% / 40%);
  --glow-color-30: hsl(25deg 90% 55% / 30%);
  --glow-color-20: hsl(25deg 90% 55% / 20%);
  --glow-color-10: hsl(25deg 90% 55% / 10%);
  --gradient-one: radial-gradient(at 80% 55%, #f97316 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #ef4444 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #f59e0b 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #f97316 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #ef4444 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #f59e0b 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #ef4444 0px, transparent 50%);
  --gradient-base: linear-gradient(#f97316 0 100%);
  background: var(--card-bg);
  border: 1px solid rgb(0 0 0 / 8%);
}

/* Override para resultados (fondo sólido necesario para mask) */
.resultados-module .border-glow-card {
  --card-bg: #0a0a1a;
}

/* Ajuste para modo claro en resultados */
html:not(.dark-mode) .resultados-module .border-glow-card {
  --card-bg: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
}

html:not(.dark-mode) .resultados-module .border-glow-inner {
  background: #ffffff;
}

/* ===== scroll-float.css ===== */
/* ============================================================================
   SCROLL-FLOAT.CSS — Animacion de texto flotante al hacer scroll
   Adaptado de React-Bits ScrollFloat para vanilla JS + GSAP ScrollTrigger
   ============================================================================ */

.scroll-float {
  overflow: hidden;
}

.scroll-float-text,
.scroll-float-text * {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

.scroll-float-text {
  display: inline;
}

.scroll-float-text .char {
  display: inline-block;
  white-space: pre;
  will-change: opacity, transform;
}

/* Variante para subtitulos (no split por caracter, anima el bloque completo) */
.scroll-float-block {
  overflow: hidden;
}

.scroll-float-block .scroll-float-child {
  display: block;
  will-change: opacity, transform;
}

/* Desactivar en moviles pequenos para rendimiento */
@media (max-width: 640px) {
  .scroll-float-text .char {
    will-change: auto;
  }
}

/* ===== morphy-button.css ===== */
/* ============================================================================
   MORPHY-BUTTON.CSS — Port de ScrollX-UI MorphyButton para vanilla CSS
   Boton con dot animado, transicion de color y movimiento de texto reversible.
   ============================================================================ */

.morphy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: 700;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 700ms ease-in-out;
  outline: none;
}

.morphy-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
}

/* Tamanos */
.morphy-btn-sm  { height: 2rem;   padding: 0 1.25rem; font-size: 0.75rem; }
.morphy-btn-md  { height: 2.25rem; padding: 0 1.5rem;  font-size: 0.875rem; }
.morphy-btn-lg  { height: 2.75rem; padding: 0 2.5rem;  font-size: 0.95rem; }
.morphy-btn-xl  { height: 3.25rem; padding: 0 3rem;    font-size: 1rem; }

/* Capa de fondo */
.morphy-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: background-color 700ms ease-in-out;
}

/* Dot animado */
.morphy-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 9999px;
  transition: all 700ms ease-in-out;
}

/* Label */
.morphy-label {
  position: relative;
  z-index: 10;
  font-weight: 700;
  transition: all 700ms ease-in-out;
}

/* ============================================================================
   TEMA: Naranja TIM3 (default)
   ============================================================================ */

/* Estado default: boton oscuro con gradiente naranja */
.morphy-btn--orange {
  border-color: transparent;
}

.morphy-btn--orange .morphy-bg {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.morphy-btn--orange .morphy-dot {
  background: linear-gradient(135deg, #ea580c, #dc2626);
  width: 200%;
  height: 200%;
  left: -50%;
}

.morphy-btn--orange .morphy-label {
  color: #fff;
  transform: translateX(0);
}

/* Hover: fondo claro, dot se contrae, texto oscurece y se desplaza */
.morphy-btn--orange.is-active,
.morphy-btn--orange:hover {
  border-color: #f97316;
}

.morphy-btn--orange.is-active .morphy-bg,
.morphy-btn--orange:hover .morphy-bg {
  background: #fff7ed;
}

.morphy-btn--orange.is-active .morphy-dot,
.morphy-btn--orange:hover .morphy-dot {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.morphy-btn--orange.is-active .morphy-label,
.morphy-btn--orange:hover .morphy-label {
  color: #9a3412;
  transform: translateX(0.375rem);
}

/* Tamanos del dot en hover */
.morphy-btn-sm.morphy-btn--orange.is-active .morphy-dot,
.morphy-btn-sm.morphy-btn--orange:hover .morphy-dot {
  width: 0.5rem; height: 0.5rem; left: 0.65rem;
}

.morphy-btn-md.morphy-btn--orange.is-active .morphy-dot,
.morphy-btn-md.morphy-btn--orange:hover .morphy-dot {
  width: 0.625rem; height: 0.625rem; left: 0.75rem;
}

.morphy-btn-lg.morphy-btn--orange.is-active .morphy-dot,
.morphy-btn-lg.morphy-btn--orange:hover .morphy-dot {
  width: 0.75rem; height: 0.75rem; left: 1rem;
}

.morphy-btn-xl.morphy-btn--orange.is-active .morphy-dot,
.morphy-btn-xl.morphy-btn--orange:hover .morphy-dot {
  width: 0.85rem; height: 0.85rem; left: 1.15rem;
}

/* ============================================================================
   TEMA: Oscuro (para botones sobre fondos claros)
   ============================================================================ */

.morphy-btn--dark .morphy-bg {
  background: #111827;
}

.morphy-btn--dark .morphy-dot {
  background: #1f2937;
  width: 200%;
  height: 200%;
  left: -50%;
}

.morphy-btn--dark .morphy-label {
  color: #fff;
  transform: translateX(0);
}

.morphy-btn--dark.is-active,
.morphy-btn--dark:hover {
  border-color: #111827;
}

.morphy-btn--dark.is-active .morphy-bg,
.morphy-btn--dark:hover .morphy-bg {
  background: #f3f4f6;
}

.morphy-btn--dark.is-active .morphy-dot,
.morphy-btn--dark:hover .morphy-dot {
  background: #111827;
}

.morphy-btn--dark.is-active .morphy-label,
.morphy-btn--dark:hover .morphy-label {
  color: #111827;
  transform: translateX(0.375rem);
}

.morphy-btn-sm.morphy-btn--dark.is-active .morphy-dot,
.morphy-btn-sm.morphy-btn--dark:hover .morphy-dot {
  width: 0.5rem; height: 0.5rem; left: 0.65rem;
}

.morphy-btn-md.morphy-btn--dark.is-active .morphy-dot,
.morphy-btn-md.morphy-btn--dark:hover .morphy-dot {
  width: 0.625rem; height: 0.625rem; left: 0.75rem;
}

.morphy-btn-lg.morphy-btn--dark.is-active .morphy-dot,
.morphy-btn-lg.morphy-btn--dark:hover .morphy-dot {
  width: 0.75rem; height: 0.75rem; left: 1rem;
}

.morphy-btn-xl.morphy-btn--dark.is-active .morphy-dot,
.morphy-btn-xl.morphy-btn--dark:hover .morphy-dot {
  width: 0.85rem; height: 0.85rem; left: 1.15rem;
}

/* ============================================================================
   TEMA: Blanco (para botones sobre fondos oscuros/gradientes)
   ============================================================================ */

.morphy-btn--white .morphy-bg {
  background: #fff;
}

.morphy-btn--white .morphy-dot {
  background: #e5e7eb;
  width: 200%;
  height: 200%;
  left: -50%;
}

.morphy-btn--white .morphy-label {
  color: #111827;
  transform: translateX(0);
}

.morphy-btn--white.is-active,
.morphy-btn--white:hover {
  border-color: #fff;
}

.morphy-btn--white.is-active .morphy-bg,
.morphy-btn--white:hover .morphy-bg {
  background: rgba(255,255,255,0.15);
}

.morphy-btn--white.is-active .morphy-dot,
.morphy-btn--white:hover .morphy-dot {
  background: #fff;
}

.morphy-btn--white.is-active .morphy-label,
.morphy-btn--white:hover .morphy-label {
  color: #fff;
  transform: translateX(0.375rem);
}

.morphy-btn-sm.morphy-btn--white.is-active .morphy-dot,
.morphy-btn-sm.morphy-btn--white:hover .morphy-dot {
  width: 0.5rem; height: 0.5rem; left: 0.65rem;
}

.morphy-btn-md.morphy-btn--white.is-active .morphy-dot,
.morphy-btn-md.morphy-btn--white:hover .morphy-dot {
  width: 0.625rem; height: 0.625rem; left: 0.75rem;
}

.morphy-btn-lg.morphy-btn--white.is-active .morphy-dot,
.morphy-btn-lg.morphy-btn--white:hover .morphy-dot {
  width: 0.75rem; height: 0.75rem; left: 1rem;
}

.morphy-btn-xl.morphy-btn--white.is-active .morphy-dot,
.morphy-btn-xl.morphy-btn--white:hover .morphy-dot {
  width: 0.85rem; height: 0.85rem; left: 1.15rem;
}

/* Adaptación para modo claro en Resultados */
html:not(.dark-mode) .resultados-module .morphy-btn--white .morphy-bg {
  background: #111827;
}
html:not(.dark-mode) .resultados-module .morphy-btn--white .morphy-label {
  color: #ffffff;
}
html:not(.dark-mode) .resultados-module .morphy-btn--white .morphy-dot {
  background: #1f2937;
}
html:not(.dark-mode) .resultados-module .morphy-btn--white:hover .morphy-bg {
  background: #f3f4f6;
}
html:not(.dark-mode) .resultados-module .morphy-btn--white:hover .morphy-label {
  color: #111827;
}
html:not(.dark-mode) .resultados-module .morphy-btn--white:hover .morphy-dot {
  background: #111827;
}

/* ============================================================================
   Sombra en hover (todos los temas)
   ============================================================================ */

.morphy-btn--orange:hover,
.morphy-btn--orange.is-active {
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.3);
}

.morphy-btn--dark:hover,
.morphy-btn--dark.is-active {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.morphy-btn--white:hover,
.morphy-btn--white.is-active {
  box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.2);
}

/* Transicion de sombra */
.morphy-btn {
  transition: border-color 700ms ease-in-out, box-shadow 700ms ease-in-out;
}

/* ===== neonav.css ===== */
/* ==================== NEONAV MENU FOR TIM3 ==================== */

.neonav-container {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 90%;
    max-width: 90%;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.neonav {
    background: rgba(1, 33, 97, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.neonav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent);
    transition: left 0.8s ease;
}

.neonav:hover::before {
    left: 100%;
}

.neonav:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Logo/Brand */
.neonav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    z-index: 2;
    position: relative;
}

.neonav-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Nav Items */
.neonav-items {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    z-index: 2;
    position: relative;
    flex: 1;
    justify-content: center;
}

@media (min-width: 993px) {
    .neonav-items {
        display: flex !important;
    }
}

.neonav-item {
    position: relative;
}

.neonav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.82rem;
    border-radius: 25px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.neonav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-radius: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neonav-link:hover::before {
    opacity: 1;
}

.neonav-link:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.neonav-link.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    color: white;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

/* CTA Button */
.neonav-cta {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-left: 5px;
    border: none;
    cursor: pointer;
}

.neonav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);
}

/* Botones de acción (carrito, membresía, login) */
.neonav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    position: relative;
}

.neonav-icon-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neonav-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.neonav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: #33dd23 !important;
    color: white;
    font-size: 0.65rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.neonav-membresia-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #f97316;
    color: #fdba74;
    padding: 7px 12px;
    border-radius: 25px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.neonav-membresia-btn:hover {
    background: rgba(249, 115, 22, 0.15);
    transform: translateY(-1px);
}

.neonav-user-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 12px;
    border-radius: 25px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.neonav-user-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateY(-1px);
}

.neonav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Ocultar acciones en mobile */
@media (max-width: 992px) {
    .neonav-actions {
        display: none;
    }
}

/* Mobile Toggle */
.neonav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1001;
    position: relative;
    flex-shrink: 0;
}

.neonav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.neonav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 24px;
    height: 18px;
    justify-content: center;
}

.neonav-hamburger span {
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

.neonav-toggle.active .neonav-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.neonav-toggle.active .neonav-hamburger span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.neonav-toggle.active .neonav-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.neonav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.neonav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.neonav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #012161 0%, #0a3f6f 50%, #1a5fa0 100%);
    z-index: 1600;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
}

.neonav-mobile.active {
    transform: translateY(0);
}

.neonav-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.neonav-mobile-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

.neonav-mobile-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.neonav-mobile-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.neonav-mobile-nav {
    padding: 20px 24px;
    list-style: none;
}

.neonav-mobile-item {
    margin-bottom: 4px;
}

.neonav-mobile-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 16px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
}

.neonav-mobile-link:hover,
.neonav-mobile-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateX(8px);
    border-color: rgba(255, 255, 255, 0.2);
}

.neonav-mobile-cta {
    margin: 30px 30px 40px;
}

.neonav-mobile-cta-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.neonav-mobile-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .neonav-container {
        top: 15px;
        width: calc(100% - 30px);
    }

    .neonav {
        padding: 12px 20px;
    }

    .neonav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .neonav-items {
        display: none;
    }
}

@media (max-width: 480px) {
    .neonav-container {
        width: calc(100% - 20px);
        top: 10px;
    }

    .neonav {
        padding: 10px 15px;
    }

    .neonav-brand {
        gap: 8px;
    }

    .neonav-logo {
        width: 35px;
        height: 35px;
    }
}
/* ===== membresia.css ===== */
/* Membresía Modal - Estilos Responsivos */

/* Animaciones del Modal */
#membresia-modal {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#membresia-modal .modal-backdrop {
  animation: backdropFadeIn 0.3s ease-in-out;
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

#membresia-modal .relative {
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Transiciones */
#membresia-tab-oferta,
#membresia-tab-pago {
  transition: all 0.3s ease;
}

#membresia-tab-oferta:hover,
#membresia-tab-pago:hover {
  opacity: 0.85;
}

/* Inputs */
input[type="email"],
input[type="date"],
input[type="text"],
input[type="password"] {
  transition: all 0.2s ease;
}

input:focus {
  box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.1);
}

/* Botones */
#btn-activar-oferta:enabled:hover,
#btn-membresia-anual:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

#btn-membresia-mensual:hover {
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
  #membresia-modal .relative {
    border-radius: 1.5rem;
    padding: 1.5rem;
  }

  #membresia-tab-oferta,
  #membresia-tab-pago {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }

  input {
    font-size: 16px; /* Prevenir zoom en mobile */
  }

  #btn-activar-oferta,
  #btn-membresia-anual,
  #btn-membresia-mensual {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 480px) {
  #membresia-modal .relative {
    padding: 1rem;
  }

  .md\:scale-105 {
    transform: none;
  }
}

/* Acceibilidad */
@media (prefers-reduced-motion: reduce) {
  #membresia-modal,
  #membresia-modal .modal-backdrop,
  #membresia-modal .relative,
  input,
  button {
    animation: none !important;
    transition: none !important;
  }
}

/* Efectos de Iluminación para Planes */
.membresia-plan-card {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--border-color) !important; /* Base neutra */
}

.membresia-plan-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--primary-color-rgb, 234, 88, 12), 0.5) !important;
}

.membresia-plan-card.selected {
  border-color: var(--primary-color) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Eliminando la marca de verificación y animaciones de glow */
.membresia-plan-card.selected::after {
  display: none !important;
}

html.dark-mode .membresia-plan-card.selected {
  background-color: transparent !important;
  box-shadow: none !important;
}