/* Public prices page — load in to prevent FOUC */ .section.pricing { padding-top: calc(var(--os-public-header-h, 4rem) + 1.5rem); padding-bottom: 3rem; } /* ===== VARIABLES CSS DE KEEN THEME - SOLO PARA PRICING ===== */ :root { --kt-primary: #0879fd; --kt-primary-light: #E1F0FF; --kt-primary-rgb: 54, 153, 255; --kt-card-bg: #ffffff; --kt-card-border-color: #eff2f5; --kt-text-dark: #181C32; --kt-text-muted: #A1A5B7; --kt-text-gray-700: #5E6278; --kt-text-gray-800: #3F4254; --kt-gray-100: #F9F9F9; --kt-gray-200: #F4F4F4; --kt-success: #00d163; --kt-success-light: #E8FFF3; } /* ===== BOOTSTRAP UTILITIES - SOLO LAS NECESARIAS ===== */ .section.pricing .d-flex { display: flex !important; } .section.pricing .d-none { display: none !important; } .section.pricing .align-items-center { align-items: center !important; } .section.pricing .align-items-end { align-items: flex-end !important; } .section.pricing .justify-content-center { justify-content: center !important; } .section.pricing .justify-content-between { justify-content: space-between !important; } .section.pricing .flex-column { flex-direction: column !important; } .section.pricing .flex-grow-1 { flex-grow: 1 !important; } .section.pricing .position-relative { position: relative !important; } .section.pricing .position-absolute { position: absolute !important; } .section.pricing .text-center { text-align: center !important; } .section.pricing .text-success { color: var(--kt-success) !important; } .section.pricing .text-muted { color: var(--kt-text-muted) !important; } .section.pricing .fw-medium { font-weight: 500 !important; } .section.pricing .fw-semibold { font-weight: 600 !important; } .section.pricing .fw-bold { font-weight: 700 !important; } .section.pricing .h5 { font-size: 1.125rem !important; } .section.pricing .w-100 { width: 100% !important; } .section.pricing .h-100 { height: 100% !important; } .section.pricing .mb-0 { margin-bottom: 0 !important; } .section.pricing .mb-1 { margin-bottom: 0.25rem !important; } .section.pricing .mb-2 { margin-bottom: 0.5rem !important; } .section.pricing .mb-3 { margin-bottom: 1rem !important; } .section.pricing .mb-4 { margin-bottom: 1.5rem !important; } .section.pricing .mb-5 { margin-bottom: 3rem !important; } .section.pricing .mt-4 { margin-top: 1.5rem !important; } .section.pricing .me-3 { margin-right: 1rem !important; } .section.pricing .ms-2 { margin-left: 0.5rem !important; } .section.pricing .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .section.pricing .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .section.pricing .p-0 { padding: 0 !important; } .section.pricing .p-2 { padding: 0.5rem !important; } .section.pricing .p-6 { padding: 1.5rem !important; } .section.pricing .p-10 { padding: 2.5rem !important; } .section.pricing .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .section.pricing .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .section.pricing .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .section.pricing .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .section.pricing .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .section.pricing .border-0 { border: 0 !important; } .section.pricing .rounded-2 { border-radius: 0.375rem !important; } .section.pricing .rounded-3 { border-radius: 0.5rem !important; } .section.pricing .rounded-4 { border-radius: 0.75rem !important; } .section.pricing .shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; } .section.pricing .list-unstyled { list-style: none; padding-left: 0; } /* ===== BOOTSTRAP GRID - SOLO LO NECESARIO ===== */ .section.pricing .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .section.pricing .container { max-width: 540px; } } @media (min-width: 768px) { .section.pricing .container { max-width: 720px; } } @media (min-width: 992px) { .section.pricing .container { max-width: 960px; } } @media (min-width: 1200px) { .section.pricing .container { max-width: 1140px; } } @media (min-width: 1400px) { .section.pricing .container { max-width: 1320px; } } .section.pricing .row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; } .section.pricing .g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; } .section.pricing .row > * { padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); margin-top: var(--bs-gutter-y, 0); } .section.pricing .col-12 { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { .section.pricing .col-md-6 { flex: 0 0 auto; width: 50%; } .section.pricing .px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; } } @media (min-width: 1200px) { .section.pricing .col-xl-4 { flex: 0 0 auto; width: 33.333333%; } } /* ===== CARD STYLES ===== */ .section.pricing .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--kt-card-bg); background-clip: border-box; border: 1px solid var(--kt-card-border-color); border-radius: 0.75rem; } .section.pricing .card-body { flex: 1 1 auto; padding: 1rem; } /* ===== BUTTON STYLES ===== */ .section.pricing .btn { display: inline-block; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; padding: 0.575rem 1rem; font-size: 1rem; border-radius: 0.475rem; transition: all 0.2s ease; } .section.pricing .btn-sm { padding: 0.55rem 0.75rem; font-size: 0.925rem; } .section.pricing .btn-primary { color: #ffffff; background-color: var(--kt-primary); border-color: var(--kt-primary); } .section.pricing .btn-primary:hover { background-color: #187DE4; border-color: #187DE4; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .section.pricing .btn-secondary { color: #ffffff; background-color: #A1A5B7; border-color: #A1A5B7; } .section.pricing .link-primary { color: var(--kt-primary); text-decoration: none; } .section.pricing .link-primary:hover { color: #0668d4; text-decoration: underline; } .section.pricing .opacity-100 { opacity: 1 !important; } /* Mejoras de responsividad para tablets */ @media (min-width: 768px) and (max-width: 991.98px) { .section.pricing .pricing-section .card { min-height: 500px; max-width: 400px; margin: 0 auto; } .section.pricing .pricing-section .col-md-6 { display: flex; justify-content: center; margin-bottom: 2rem; } } /* Para tablets en modo landscape y desktop */ @media (min-width: 992px) { .section.pricing .pricing-section .card { min-height: 550px; } } /* Mejoras adicionales para móviles */ @media (max-width: 767.98px) { .section.pricing .pricing-section .card { margin-bottom: 1.5rem; } /* Reducir tamaño del título en móviles */ .section.pricing h1, .section.pricing .os-pricing-title { font-size: 1.5rem !important; } /* Reducir tamaño del párrafo en móviles */ .section.pricing header p { font-size: 13px !important; } } /* Estilos personalizados para Bootstrap */ .section.pricing .transition-all { transition: all 0.3s ease; } .section.pricing .cursor-pointer { cursor: pointer; } /* Solución para evitar desplazamiento vertical */ .section.pricing .sections-container { min-height: 600px; overflow: hidden; } .section.pricing .pricing-section { min-height: 600px; } .section.pricing .pricing-section .col-12 { transition: opacity 0.3s ease, transform 0.3s ease; } .section.pricing .pricing-section .col-12[data-category-type="service"] { display: none; } .section.pricing .pricing-section .col-12[data-category-type="package"] { display: block; } /* TOOLTIP CON JAVASCRIPT - Sin parpadeo garantizado */ .section.pricing .ki-information-2.cursor-pointer { position: relative; } .section.pricing .custom-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); background-color: #1f2937; color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; white-space: pre; line-height: 1.5; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; pointer-events: none; } .section.pricing .custom-tooltip::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #1f2937; } .section.pricing .custom-tooltip.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Radio buttons personalizados */ .section.pricing .radio-circle { width: 18px; height: 18px; border: 2px solid var(--kt-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; background-color: transparent; } .section.pricing .radio-circle.selected { border-color: var(--kt-primary); background-color: white; } .section.pricing .radio-dot { width: 8px; height: 8px; background-color: var(--kt-primary); border-radius: 50%; opacity: 1; } /* Dropdown styles */ .section.pricing .period-dropdown { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); } .section.pricing .period-option:hover { background-color: var(--kt-gray-100) !important; } .section.pricing .selected-option { background-color: rgba(59, 130, 246, 0.1) !important; } /* Button hover effects */ .section.pricing .period-selector-btn:hover { background-color: var(--kt-gray-100) !important; } /* Primary button styling */ .section.pricing .btn-primary { background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary) 100%); border: none; transition: all 0.3s ease; } .section.pricing .btn-primary:hover { background: linear-gradient(135deg, var(--kt-primary) 0%, rgba(10, 88, 214, 0.9) 100%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } /* Success color for check icons */ .section.pricing .ki-check-circle { font-weight: 500; } /* Check icon with soft background */ .section.pricing .check-icon-with-bg { background-color: rgba(34, 197, 94, 0.2); border-radius: 50%; padding: 4px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; } /* Responsive adjustments */ @media (max-width: 992px) { .section.pricing .col-lg-4 { margin-bottom: 1.5rem; } } @media (max-width: 768px) { .section.pricing .p-md-5 { padding: 1rem !important; } .section.pricing .card { padding: 1.5rem !important; } .section.pricing .display-4 { font-size: 2rem !important; } .section.pricing .display-6 { font-size: 1.5rem !important; } } /* Additional styling for better visual hierarchy */ .section.pricing .rounded-4 { border-radius: 1.5rem !important; } .section.pricing .rounded-pill { border-radius: 50rem !important; } .section.pricing .shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; } /* Custom spacing */ .section.pricing .mb-3 { margin-bottom: 1rem !important; } /* Título y colores según tema (anula h1 global #04121f de public-base.css) */ .section.pricing .os-pricing-title, .section.pricing h1 { color: var(--kt-text-dark); font-size: 2.2rem; font-weight: bold; } .section.pricing .card { color: var(--kt-text-dark); } .section.pricing .small { font-size: 0.875rem; } html[data-theme="dark"] .section.pricing, html.dark .section.pricing { --kt-card-bg: #15171c; --kt-card-border-color: rgba(48, 54, 61, 0.65); --kt-text-dark: #f9fafb; --kt-text-muted: #9ca3af; --kt-text-gray-700: #d1d5db; --kt-text-gray-800: #e5e7eb; --kt-gray-100: #1f2937; --kt-gray-200: #374151; --kt-primary-light: rgba(8, 121, 253, 0.15); --kt-success-light: rgba(0, 209, 99, 0.12); } html[data-theme="dark"] .section.pricing, html.dark .section.pricing { color: var(--kt-text-dark); }