/* ========================================== * landing-shared.css * Estilos compartidos para todas las landing pages de Clinica Pradillo * IMPORTANTE: El wrapper HTML debe tener id="landing-page" * ========================================== */ /* ===== Bloque CSS 1 ===== */ /* Importar Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* Encapsular todos los estilos dentro de #landing-page */ /* Añadir !important donde sea necesario para sobrescribir estilos de Elementor */ #landing-page { font-family: 'Inter', sans-serif !important; } /* ==================== */ /* COLORES DE MARCA */ /* ==================== */ :root { --brand-primary: #3c6e71; --brand-primary-dark: #2d5457; --brand-secondary: #f7f9f7; --brand-text: #404040; --brand-accent-gray: #d9d9d9; } #landing-page .brand-text { color: var(--brand-text) !important; } #landing-page .brand-primary { color: var(--brand-primary) !important; } #landing-page .brand-primary-bg { background-color: var(--brand-primary) !important; } #landing-page .brand-secondary-bg { background-color: var(--brand-secondary) !important; } /* ==================== */ /* TAILWIND CSS CONVERTIDO A CSS PURO */ /* Todas las clases de Tailwind usadas en el HTML */ /* ==================== */ /* Layout & Positioning */ #landing-page .fixed { position: fixed !important; } #landing-page .relative { position: relative !important; } #landing-page .absolute { position: absolute !important; } #landing-page .top-0 { top: 0 !important; } #landing-page .left-0 { left: 0 !important; } #landing-page .right-0 { right: 0 !important; } #landing-page .bottom-0 { bottom: 0 !important; } #landing-page .z-50 { z-index: 50 !important; } /* Display */ #landing-page .block { display: block !important; } #landing-page .inline-block { display: inline-block !important; } #landing-page .inline { display: inline !important; } #landing-page .flex { display: flex !important; } #landing-page .inline-flex { display: inline-flex !important; } #landing-page .grid { display: grid !important; } #landing-page .hidden { display: none !important; } /* Flexbox */ #landing-page .flex-col { flex-direction: column !important; } #landing-page .flex-row { flex-direction: row !important; } #landing-page .flex-wrap { flex-wrap: wrap !important; } #landing-page .items-center { align-items: center !important; } #landing-page .items-start { align-items: flex-start !important; } #landing-page .justify-center { justify-content: center !important; } #landing-page .justify-between { justify-content: space-between !important; } #landing-page .flex-grow { flex-grow: 1 !important; } #landing-page .flex-shrink-0 { flex-shrink: 0 !important; } /* Gap */ #landing-page .gap-2 { gap: 0.5rem !important; } #landing-page .gap-3 { gap: 0.75rem !important; } #landing-page .gap-4 { gap: 1rem !important; } #landing-page .gap-6 { gap: 1.5rem !important; } #landing-page .gap-8 { gap: 2rem !important; } #landing-page .gap-12 { gap: 3rem !important; } /* Grid */ #landing-page .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #landing-page .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #landing-page .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } /* Padding */ #landing-page .p-6 { padding: 1.5rem !important; } #landing-page .p-8 { padding: 2rem !important; } #landing-page .p-12 { padding: 3rem !important; } #landing-page .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } #landing-page .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } #landing-page .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } #landing-page .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } #landing-page .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } #landing-page .py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } #landing-page .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } #landing-page .pt-4 { padding-top: 1rem !important; } #landing-page .pt-8 { padding-top: 2rem !important; } /* Margin */ #landing-page .mx-auto { margin-left: auto !important; margin-right: auto !important; } #landing-page .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } #landing-page .mb-2 { margin-bottom: 0.5rem !important; } #landing-page .mb-3 { margin-bottom: 0.75rem !important; } #landing-page .mb-4 { margin-bottom: 1rem !important; } #landing-page .mb-6 { margin-bottom: 1.5rem !important; } #landing-page .mb-8 { margin-bottom: 2rem !important; } #landing-page .mb-10 { margin-bottom: 2.5rem !important; } #landing-page .mb-12 { margin-bottom: 3rem !important; } #landing-page .mb-16 { margin-bottom: 4rem !important; } #landing-page .mt-2 { margin-top: 0.5rem !important; } #landing-page .mt-4 { margin-top: 1rem !important; } #landing-page .mt-6 { margin-top: 1.5rem !important; } #landing-page .mt-16 { margin-top: 4rem !important; } /* Width & Height */ #landing-page .w-3 { width: 0.75rem !important; } #landing-page .w-5 { width: 1.25rem !important; } #landing-page .w-6 { width: 1.5rem !important; } #landing-page .h-3 { height: 0.75rem !important; } #landing-page .h-5 { height: 1.25rem !important; } #landing-page .h-6 { height: 1.5rem !important; } #landing-page .h-10 { height: 2.5rem !important; } #landing-page .w-full { width: 100% !important; } /* Max Width */ #landing-page .max-w-2xl { max-width: 42rem !important; } #landing-page .max-w-3xl { max-width: 48rem !important; } #landing-page .max-w-4xl { max-width: 56rem !important; } #landing-page .max-w-6xl { max-width: 72rem !important; } #landing-page .max-w-7xl { max-width: 80rem !important; } /* Typography - Size */ #landing-page .text-xs { font-size: 0.75rem !important; } #landing-page .text-sm { font-size: 0.875rem !important; } #landing-page .text-base { font-size: 1rem !important; } #landing-page .text-lg { font-size: 1.125rem !important; } #landing-page .text-xl { font-size: 1.25rem !important; } #landing-page .text-2xl { font-size: 1.5rem !important; } #landing-page .text-3xl { font-size: 1.875rem !important; } #landing-page .text-4xl { font-size: 2.25rem !important; } #landing-page .text-5xl { font-size: 3rem !important; } /* Typography - Weight */ #landing-page .font-light { font-weight: 300 !important; } #landing-page .font-semibold { font-weight: 600 !important; } #landing-page .font-bold { font-weight: 700 !important; } #landing-page .font-extrabold { font-weight: 800 !important; } /* Typography - Alignment */ #landing-page .text-center { text-align: center !important; } #landing-page .text-left { text-align: left !important; } #landing-page .text-right { text-align: right !important; } /* Line Height */ #landing-page .leading-tight { line-height: 1.25 !important; } #landing-page .leading-relaxed { line-height: 1.625 !important; } /* Colors - Text */ #landing-page .text-white { color: white !important; } #landing-page .text-transparent { color: transparent !important; } #landing-page .text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; } #landing-page .text-white\/90 { color: rgba(255, 255, 255, 0.9) !important; } /* Colors - Background */ #landing-page .bg-white { background-color: white !important; } #landing-page .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; } #landing-page .bg-white\/30 { background-color: rgba(255, 255, 255, 0.3) !important; } /* Gradients */ #landing-page .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; } #landing-page .from-yellow-300 { --tw-gradient-from: #fde047; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 224, 71, 0)); } #landing-page .via-yellow-200 { --tw-gradient-stops: var(--tw-gradient-from), #fef08a, var(--tw-gradient-to, rgba(254, 240, 138, 0)); } #landing-page .to-yellow-300 { --tw-gradient-to: #fde047; } #landing-page .from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0)); } #landing-page .to-gray-100 { --tw-gradient-to: #f3f4f6; } /* Brand green gradient for HERO */ #landing-page .from-brand-green { --tw-gradient-from: #3c6e71; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(60, 110, 113, 0)); } #landing-page .via-brand-green-light { --tw-gradient-stops: var(--tw-gradient-from), #4a8c8f, var(--tw-gradient-to, rgba(74, 140, 143, 0)); } #landing-page .to-brand-green { --tw-gradient-to: #3c6e71; } #landing-page .bg-clip-text { -webkit-background-clip: text !important; background-clip: text !important; } /* Dark text for HERO */ #landing-page .text-slate-900 { color: #0f172a !important; } #landing-page .text-slate-800 { color: #1e293b !important; } #landing-page .text-slate-700 { color: #334155 !important; } /* Borders */ #landing-page .border { border-width: 1px !important; } #landing-page .border-2 { border-width: 2px !important; } #landing-page .border-t { border-top-width: 1px !important; } #landing-page .border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; } #landing-page .border-white\/30 { border-color: rgba(255, 255, 255, 0.3) !important; } #landing-page .border-gray-100 { border-color: #f3f4f6 !important; } #landing-page .border-gray-200 { border-color: #e5e7eb !important; } #landing-page .rounded-full { border-radius: 9999px !important; } #landing-page .rounded-2xl { border-radius: 1rem !important; } /* Effects */ #landing-page .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } #landing-page .backdrop-blur-md { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } #landing-page .opacity-75 { opacity: 0.75 !important; } #landing-page .opacity-90 { opacity: 0.9 !important; } /* Transitions */ #landing-page .transition-all { transition: all 0.3s ease !important; } #landing-page .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important; transition-duration: 150ms !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } #landing-page .duration-300 { transition-duration: 300ms !important; } /* Transforms */ #landing-page .transform { transform: translateZ(0) !important; } #landing-page .hover\:scale-105:hover { transform: scale(1.05) !important; } /* Other */ #landing-page .cursor-pointer { cursor: pointer !important; } #landing-page .overflow-hidden { overflow: hidden !important; } #landing-page .underline { text-decoration: underline !important; } #landing-page .uppercase { text-transform: uppercase !important; } #landing-page .italic { font-style: italic !important; } /* Space Y (vertical spacing) */ #landing-page .space-y-2 > * + * { margin-top: 0.5rem !important; } #landing-page .space-y-4 > * + * { margin-top: 1rem !important; } /* Hover States */ #landing-page .hover\:underline:hover { text-decoration: underline !important; } #landing-page .hover\:opacity-90:hover { opacity: 0.9 !important; } /* ==================== */ /* RESPONSIVE - Tablet (md: 768px+) */ /* ==================== */ @media (min-width: 768px) { #landing-page .md\:flex { display: flex !important; } #landing-page .md\:hidden { display: none !important; } #landing-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #landing-page .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #landing-page .md\:flex-row { flex-direction: row !important; } #landing-page .md\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } #landing-page .md\:p-12 { padding: 3rem !important; } #landing-page .md\:text-5xl { font-size: 3rem !important; } #landing-page .md\:col-span-2 { grid-column: span 2 / span 2 !important; } } /* ==================== */ /* RESPONSIVE - Desktop (lg: 1024px+) */ /* ==================== */ @media (min-width: 1024px) { #landing-page .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #landing-page .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #landing-page .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #landing-page .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } #landing-page .lg\:text-3xl { font-size: 1.875rem !important; } #landing-page .lg\:text-6xl { font-size: 3.75rem !important; } } /* ==================== */ /* RESPONSIVE - Mobile (sm: 640px+) */ /* ==================== */ @media (min-width: 640px) { #landing-page .sm\:flex-row { flex-direction: row !important; } #landing-page .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } #landing-page .sm\:text-lg { font-size: 1.125rem !important; } #landing-page .sm\:text-2xl { font-size: 1.5rem !important; } #landing-page .sm\:text-5xl { font-size: 3rem !important; } } /* ==================== */ /* RESPONSIVE - Extra Large (xl: 1280px+) */ /* ==================== */ @media (min-width: 1280px) { #landing-page .xl\:text-7xl { font-size: 4.5rem !important; } } /* ==================== */ /* HEADER STICKY */ /* ==================== */ #landing-page #header { transition: all 0.3s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #landing-page #header.scrolled { background-color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; } #landing-page #header.scrolled .logo-text { font-size: 1.25rem !important; } /* ==================== */ /* HERO SECTION */ /* ==================== */ #landing-page .hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; background: linear-gradient(to right, rgba(212, 235, 238, 0.75) 0%, /* Izquierda azul claro suave (detrás del texto) */ rgba(212, 235, 238, 0.55) 50%, /* Transición suave */ rgba(212, 235, 238, 0.30) 100%), /* Derecha más transparente (sobre la imagen) */ url('https://clinica-pradillo.com/wp-content/uploads/2026/01/Pagina_Landing_Page_Hero_1280x720-Fondo-Azul.png') center/cover no-repeat; background-attachment: fixed; } #landing-page .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; /* Eliminado el overlay oscuro para mantener el fondo azul claro */ z-index: 1; } #landing-page .hero-content { position: relative; z-index: 2; } /* ==================== */ /* CTA BUTTON */ /* ==================== */ #landing-page .cta-primary { background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%) !important; color: white !important; padding: 1.25rem 3rem; border-radius: 50px; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(60, 110, 113, 0.4); display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none !important; border: none; cursor: pointer; position: relative; overflow: hidden; } #landing-page .cta-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } #landing-page .cta-primary:hover::before { left: 100%; } #landing-page .cta-primary:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 15px 40px rgba(60, 110, 113, 0.5) !important; } #landing-page .cta-primary:active { transform: translateY(-1px) scale(0.98) !important; } #landing-page .cta-secondary { background: transparent !important; color: var(--brand-primary) !important; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 600; font-size: 1rem; border: 2px solid var(--brand-primary) !important; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none !important; cursor: pointer; } #landing-page .cta-secondary:hover { background: var(--brand-primary) !important; color: white !important; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(60, 110, 113, 0.3); } /* ==================== */ /* PREMIUM BADGE (Badge Superior Hero) */ /* ==================== */ #landing-page .premium-badge { position: relative !important; display: inline-block !important; background: linear-gradient(135deg, var(--brand-primary) 0%, #2d5457 100%) !important; color: white !important; padding: 0.75rem 2rem !important; border-radius: 50px !important; font-weight: 600 !important; font-size: 0.95rem !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 20px rgba(60, 110, 113, 0.4) !important; overflow: hidden !important; transition: all 0.3s ease !important; } /* Efecto shimmer/shine que se mueve de izquierda a derecha */ #landing-page .premium-badge::before { content: '' !important; position: absolute !important; top: -50% !important; left: -100% !important; width: 100% !important; height: 200% !important; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ) !important; transform: skewX(-20deg) !important; animation: shine 3s infinite !important; } @keyframes shine { 0% { left: -100%; } 50%, 100% { left: 150%; } } #landing-page .premium-badge:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(60, 110, 113, 0.5) !important; } /* ==================== */ /* TRUST BADGES */ /* ==================== */ #landing-page .trust-badge { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(71, 85, 105, 0.2) !important; padding: 0.75rem 1.5rem; border-radius: 50px; color: #1e293b !important; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; } #landing-page .trust-badge:hover { background: rgba(255, 255, 255, 0.95) !important; transform: translateY(-2px); } #landing-page .trust-badge .icon { font-size: 1.25rem; } /* ==================== */ /* ANIMATED ELEMENTS */ /* ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } #landing-page .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; } #landing-page .animate-fadeInDown { animation: fadeInDown 0.8s ease-out forwards; } #landing-page .animate-scaleIn { animation: scaleIn 0.8s ease-out forwards; } #landing-page .delay-100 { animation-delay: 0.1s; opacity: 0; } #landing-page .delay-200 { animation-delay: 0.2s; opacity: 0; } #landing-page .delay-300 { animation-delay: 0.3s; opacity: 0; } #landing-page .delay-400 { animation-delay: 0.4s; opacity: 0; } #landing-page .delay-500 { animation-delay: 0.5s; opacity: 0; } #landing-page .delay-600 { animation-delay: 0.6s; opacity: 0; } #landing-page .delay-700 { animation-delay: 0.7s; opacity: 0; } #landing-page .delay-800 { animation-delay: 0.8s; opacity: 0; } #landing-page .delay-900 { animation-delay: 0.9s; opacity: 0; } #landing-page .delay-1000 { animation-delay: 1s; opacity: 0; } /* ==================== */ /* FLOATING ELEMENTS */ /* ==================== */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } #landing-page .floating { animation: float 3s ease-in-out infinite; } /* ==================== */ /* SCROLL INDICATOR */ /* ==================== */ #landing-page .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; cursor: pointer; } #landing-page .scroll-indicator .mouse { width: 30px; height: 50px; border: 2px solid var(--brand-primary); border-radius: 15px; display: flex; justify-content: center; padding-top: 8px; } #landing-page .scroll-indicator .wheel { width: 4px; height: 10px; background: var(--brand-primary); border-radius: 2px; animation: scroll 2s infinite; } @keyframes scroll { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } /* ==================== */ /* PHONE LINK STYLING */ /* ==================== */ #landing-page .phone-link { color: var(--brand-primary) !important; text-decoration: none !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; } #landing-page .phone-link:hover { color: var(--brand-primary-dark) !important; transform: scale(1.05); } #landing-page #header.scrolled .phone-link { color: var(--brand-primary) !important; } /* ==================== */ /* GLASSMORPHISM EFFECT */ /* ==================== */ #landing-page .glass-card { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 20px; padding: 2rem; } /* ==================== */ /* BENEFIT CARDS */ /* ==================== */ #landing-page .benefit-card { background: white !important; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid transparent; height: 100%; position: relative; overflow: hidden; } #landing-page .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3c6e71, #2d5457); transform: scaleX(0); transition: transform 0.4s ease; } #landing-page .benefit-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(60, 110, 113, 0.15) !important; border-color: #3c6e71 !important; } #landing-page .benefit-card:hover::before { transform: scaleX(1); } #landing-page .benefit-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #f7f9f7, #e8f0f1) !important; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: all 0.3s ease; } #landing-page .benefit-icon svg { width: 44px; height: 44px; color: #3c6e71; transition: color 0.3s ease; } #landing-page .benefit-card:hover .benefit-icon { transform: scale(1.1) rotate(5deg); background: linear-gradient(135deg, #3c6e71, #2d5457) !important; } #landing-page .benefit-card:hover .benefit-icon svg { color: white; } /* ==================== */ /* SECONDARY CTA */ /* ==================== */ #landing-page .cta-secondary-outline { background: transparent !important; color: #3c6e71 !important; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 600; font-size: 1rem; border: 2px solid #3c6e71 !important; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none !important; cursor: pointer; } #landing-page .cta-secondary-outline:hover { background: #3c6e71 !important; color: white !important; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(60, 110, 113, 0.3); } /* ==================== */ /* FADE IN SECTIONS */ /* ==================== */ #landing-page .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* ==================== */ /* SECTION BADGE */ /* ==================== */ #landing-page .section-badge { display: inline-block; background: linear-gradient(135deg, #3c6e71, #2d5457) !important; color: white !important; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.5px; } /* ==================== */ /* TIMELINE (PROCESO) */ /* ==================== */ #landing-page .timeline-container { position: relative; max-width: 1200px; margin: 0 auto; } #landing-page .timeline-line { position: absolute; left: 50%; top: 80px; bottom: 80px; width: 4px; background: linear-gradient(180deg, #3c6e71, #d9d9d9); transform: translateX(-50%); } #landing-page .process-step { display: flex; align-items: center; margin-bottom: 4rem; position: relative; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .process-step.visible { opacity: 1; transform: translateY(0); } #landing-page .process-step:nth-child(odd) { flex-direction: row; text-align: left; } #landing-page .process-step:nth-child(even) { flex-direction: row-reverse; text-align: right; } #landing-page .step-content { flex: 1; background: white !important; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); position: relative; border: 2px solid #f7f9f7; transition: all 0.3s ease; } #landing-page .step-content:hover { border-color: #3c6e71 !important; box-shadow: 0 15px 40px rgba(60, 110, 113, 0.15) !important; transform: scale(1.02); } #landing-page .step-number { width: 80px; height: 80px; background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white !important; font-size: 2rem; font-weight: 800; position: relative; z-index: 2; box-shadow: 0 8px 20px rgba(60, 110, 113, 0.4); flex-shrink: 0; margin: 0 2rem; } #landing-page .step-number::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #3c6e71; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } #landing-page .step-icon { margin-bottom: 1rem; display: inline-block; } #landing-page .step-icon svg { width: 48px; height: 48px; color: #3c6e71; } /* ==================== */ /* TESTIMONIALS */ /* ==================== */ #landing-page .testimonial-card { background: white !important; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); position: relative; border-left: 5px solid #3c6e71; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; } #landing-page .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(60, 110, 113, 0.15) !important; } #landing-page .quote-icon { position: absolute; top: -15px; left: 20px; width: 50px; height: 50px; background: linear-gradient(135deg, #3c6e71, #2d5457) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white !important; font-size: 1.5rem; font-weight: bold; box-shadow: 0 4px 12px rgba(60, 110, 113, 0.3); } #landing-page .stars { color: #fbbf24 !important; font-size: 1.25rem; margin-bottom: 1rem; } #landing-page .patient-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #e8f0f1, #d9d9d9) !important; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #3c6e71 !important; margin-right: 1rem; flex-shrink: 0; border: 3px solid white !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } #landing-page .verified-badge { display: inline-flex; align-items: center; gap: 0.25rem; background: #10b981 !important; color: white !important; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; } #landing-page .trust-stat { text-align: center; padding: 1.5rem; } #landing-page .trust-stat-number { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #3c6e71, #2d5457); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 0.5rem; } #landing-page .video-testimonial { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease; } #landing-page .video-testimonial:hover { transform: scale(1.02); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important; } #landing-page .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(60, 110, 113, 0.9) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white !important; font-size: 2rem; transition: all 0.3s ease; } #landing-page .video-testimonial:hover .video-play-button { background: rgba(60, 110, 113, 1) !important; transform: translate(-50%, -50%) scale(1.1); } /* ==================== */ /* FORM SECTION */ /* ==================== */ #landing-page .form-section { background: linear-gradient(135deg, #f7f9f7 0%, #e8f0f1 100%) !important; } #landing-page .form-container { background: white !important; padding: 3rem; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); border: 2px solid #e8f0f1; } #landing-page .form-group { margin-bottom: 1.5rem; } #landing-page .form-group label { display: block; color: #3c6e71 !important; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem; } #landing-page .form-group input, #landing-page .form-group textarea { width: 100%; padding: 1rem 1.25rem; border: 2px solid #e8f0f1 !important; border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: white !important; font-family: inherit; } #landing-page .form-group input:focus, #landing-page .form-group textarea:focus { outline: none !important; border-color: #3c6e71 !important; box-shadow: 0 0 0 4px rgba(60, 110, 113, 0.1) !important; transform: translateY(-2px); } #landing-page .form-group input.error, #landing-page .form-group textarea.error { border-color: #ef4444 !important; background: #fef2f2 !important; } #landing-page .form-group textarea { resize: vertical; min-height: 120px; } #landing-page .error-message { color: #ef4444 !important; font-size: 0.875rem; margin-top: 0.5rem; display: none; } #landing-page .error-message.show { display: block; } #landing-page .checkbox-container { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; } #landing-page .checkbox-container input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; cursor: pointer; flex-shrink: 0; } #landing-page .submit-button { width: 100%; background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%) !important; color: white !important; padding: 1.25rem 2rem; border: none !important; border-radius: 12px; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(60, 110, 113, 0.3); display: flex; align-items: center; justify-content: center; gap: 0.75rem; } #landing-page .submit-button:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(60, 110, 113, 0.4) !important; } #landing-page .submit-button:active { transform: translateY(0); } #landing-page .submit-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } #landing-page .spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid white; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: none; } #landing-page .submit-button.loading .spinner { display: block; } #landing-page .submit-button.loading .button-text { display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #landing-page .form-message { padding: 1.25rem; border-radius: 12px; margin-bottom: 1.5rem; display: none; font-weight: 500; } #landing-page .form-message.show { display: block; } #landing-page .form-message.success { background: #d1fae5 !important; color: #065f46 !important; border: 2px solid #34d399 !important; } #landing-page .form-message.error { background: #fee2e2 !important; color: #991b1b !important; border: 2px solid #f87171 !important; } #landing-page .trust-signal { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f7f9f7 !important; border-radius: 12px; margin-bottom: 1rem; } #landing-page .trust-signal-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #3c6e71, #2d5457) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white !important; flex-shrink: 0; } #landing-page .trust-signal-icon svg { width: 26px; height: 26px; } /* ==================== */ /* FAQ SECTION */ /* ==================== */ #landing-page .faq-item { background: white !important; border-radius: 16px; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); overflow: hidden; border: 2px solid #f7f9f7; transition: all 0.3s ease; } #landing-page .faq-item.active { border-color: #3c6e71 !important; box-shadow: 0 10px 25px rgba(60, 110, 113, 0.1) !important; } #landing-page .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; cursor: pointer; background: white !important; transition: all 0.3s ease; gap: 1rem; } #landing-page .faq-question:hover { background: #f7f9f7 !important; } #landing-page .faq-item.active .faq-question { background: #f7f9f7 !important; } #landing-page .faq-question h3 { font-size: 1.125rem; font-weight: 700; color: #3c6e71 !important; margin: 0; flex-grow: 1; } #landing-page .faq-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #3c6e71, #2d5457) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white !important; font-size: 1.5rem; font-weight: bold; transition: transform 0.3s ease; flex-shrink: 0; } #landing-page .faq-item.active .faq-icon { transform: rotate(45deg); } #landing-page .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 2rem; } #landing-page .faq-item.active .faq-answer { max-height: 500px; padding: 0 2rem 1.5rem 2rem; } #landing-page .faq-answer p { color: #404040 !important; line-height: 1.8; margin: 0; } #landing-page .faq-category { margin-bottom: 2rem; } #landing-page .faq-category-title { font-size: 1.5rem; font-weight: 700; color: #3c6e71 !important; margin-bottom: 1.5rem; padding-left: 1rem; border-left: 4px solid #3c6e71; } #landing-page .cta-final-box { background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%) !important; border-radius: 24px; padding: 3rem; text-align: center; color: white !important; margin-top: 3rem; } #landing-page .cta-final-box h3 { color: white !important; } #landing-page .cta-final-box p { color: white !important; } #landing-page .cta-final-button { background: white !important; color: #3c6e71 !important; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } #landing-page .cta-final-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; background: #f7f9f7 !important; } /* ==================== */ /* FOOTER */ /* ==================== */ footer h3 { color: #FFFFFF !important; } footer h4 { color: white !important; } footer a { color: white !important; } footer p { color: white !important; } footer li { color: white !important; } /* ==================== */ /* RESPONSIVE */ /* ==================== */ @media (max-width: 768px) { #landing-page .hero-section { background-attachment: scroll !important; min-height: 100svh; } #landing-page .cta-primary { padding: 1rem 2rem; font-size: 1rem; width: 100%; justify-content: center; } #landing-page .cta-secondary { padding: 0.875rem 1.5rem; font-size: 0.875rem; width: 100%; justify-content: center; } #landing-page .trust-badge { font-size: 0.75rem; padding: 0.5rem 1rem; } #landing-page .premium-badge { font-size: 0.7rem !important; padding: 0.6rem 1.2rem !important; white-space: nowrap !important; } #landing-page .timeline-line { left: 30px; top: 60px; bottom: 60px; } #landing-page .process-step, #landing-page .process-step:nth-child(even) { flex-direction: row; text-align: left; padding-left: 80px; } #landing-page .step-number { position: absolute; left: 0; margin: 0; width: 60px; height: 60px; font-size: 1.5rem; } #landing-page .form-container { padding: 2rem 1.5rem; } } /* ===== Bloque CSS 2 ===== */ /* Colores de marca */ #landing-page .brand-text { color: #404040; } #landing-page .brand-primary { color: #3c6e71; } #landing-page .brand-primary-bg { background-color: #3c6e71; } #landing-page .brand-secondary-bg { background-color: #f7f9f7; } /* Tarjetas de beneficios */ #landing-page .benefit-card { background: white; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid transparent; height: 100%; position: relative; overflow: hidden; } #landing-page .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3c6e71, #2d5457); transform: scaleX(0); transition: transform 0.4s ease; } #landing-page .benefit-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(60, 110, 113, 0.15); border-color: #3c6e71; } #landing-page .benefit-card:hover::before { transform: scaleX(1); } #landing-page .benefit-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #f7f9f7, #e8f0f1); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: all 0.3s ease; } #landing-page .benefit-icon svg { width: 44px; height: 44px; color: #3c6e71; transition: color 0.3s ease; } #landing-page .benefit-card:hover .benefit-icon { transform: scale(1.1) rotate(5deg); background: linear-gradient(135deg, #3c6e71, #2d5457); } #landing-page .benefit-card:hover .benefit-icon svg { color: white; } /* CTA secundario */ #landing-page .cta-secondary-outline { background: transparent; color: #3c6e71; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 600; font-size: 1rem; border: 2px solid #3c6e71; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; cursor: pointer; } #landing-page .cta-secondary-outline:hover { background: #3c6e71; color: white; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(60, 110, 113, 0.3); } /* Animación de entrada */ #landing-page .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* Badge decorativo */ #landing-page .section-badge { display: inline-block; background: linear-gradient(135deg, #3c6e71, #2d5457); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.5px; } /* ===== Bloque CSS 3 ===== */ /* ==================== */ /* CASOS REALES - BEFORE/AFTER SLIDER */ /* ==================== */ #landing-page .casos-section { background: linear-gradient(170deg, #f7f9f7 0%, #eef3ee 60%, #e4edea 100%); position: relative; overflow: hidden; } #landing-page .casos-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(60,110,113,0.06) 0%, transparent 70%); pointer-events: none; } #landing-page .casos-section::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(60,110,113,0.04) 0%, transparent 70%); pointer-events: none; } /* Carousel wrapper */ #landing-page .casos-carousel-wrapper { position: relative; max-width: 900px; margin: 0 auto; } /* Carousel track */ #landing-page .casos-carousel-track { display: flex; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } /* Individual slide */ #landing-page .caso-slide { min-width: 100%; padding: 0 0.5rem; box-sizing: border-box; } /* Case card */ #landing-page .caso-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(60, 110, 113, 0.12), 0 4px 12px rgba(0,0,0,0.04); border: 1px solid rgba(60,110,113,0.08); transition: box-shadow 0.4s ease; } #landing-page .caso-card:hover { box-shadow: 0 25px 70px rgba(60, 110, 113, 0.18), 0 6px 16px rgba(0,0,0,0.06); } /* ==================== */ /* BEFORE/AFTER SLIDER COMPONENT */ /* ==================== */ #landing-page .ba-slider-container { position: relative; width: 100%; overflow: hidden; cursor: col-resize; user-select: none; -webkit-user-select: none; background: #f0f0f0; } #landing-page .ba-slider-container img { display: block; pointer-events: none; -webkit-user-drag: none; } /* After image: flows naturally to define container height */ #landing-page .ba-img-after { position: relative; z-index: 1; width: 100%; height: auto; } /* Before image: absolute overlay, same size as after */ #landing-page .ba-img-before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } /* Clip overlay for before image */ #landing-page .ba-clip-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; } /* Divider line */ #landing-page .ba-divider { position: absolute; top: 0; bottom: 0; width: 3px; background: white; z-index: 4; box-shadow: 0 0 12px rgba(0,0,0,0.35); transform: translateX(-50%); pointer-events: none; } /* Handle circle */ #landing-page .ba-handle { position: absolute; top: 50%; z-index: 5; transform: translate(-50%, -50%); width: 52px; height: 52px; background: white; border-radius: 50%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; cursor: col-resize; transition: transform 0.2s ease, box-shadow 0.2s ease; } #landing-page .ba-handle:hover, #landing-page .ba-handle:active { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 28px rgba(0,0,0,0.4); } #landing-page .ba-handle svg { width: 24px; height: 24px; color: #3c6e71; flex-shrink: 0; } /* Labels */ #landing-page .ba-label { position: absolute; top: 16px; z-index: 3; padding: 6px 16px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; pointer-events: none; font-family: 'Inter', sans-serif; } #landing-page .ba-label-antes { left: 16px; background: rgba(0,0,0,0.55); color: white; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #landing-page .ba-label-despues { right: 16px; background: rgba(60,110,113,0.85); color: white; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Hint animation (pulsing arrows on load) */ #landing-page .ba-hint-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 1; transition: opacity 0.5s ease; } #landing-page .ba-hint-overlay.hidden { opacity: 0; } #landing-page .ba-hint-text { background: rgba(60,110,113,0.85); color: white; padding: 10px 22px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); animation: ba-hint-pulse 2s ease-in-out infinite; } @keyframes ba-hint-pulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.04); opacity: 1; } } /* ==================== */ /* CASE INFO PANEL */ /* ==================== */ #landing-page .caso-info { padding: 2rem 2.5rem 2rem; } @media (max-width: 640px) { #landing-page .caso-info { padding: 1.5rem 1.25rem 1.5rem; } } #landing-page .caso-info-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; } #landing-page .caso-titulo { font-size: 1.35rem; font-weight: 700; color: #3c6e71; line-height: 1.3; margin: 0; font-family: 'Inter', sans-serif; } #landing-page .caso-duracion { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #3c6e71, #2d5457); color: white; padding: 5px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; font-family: 'Inter', sans-serif; } #landing-page .caso-descripcion { color: #404040; font-size: 0.95rem; line-height: 1.65; margin: 0; font-family: 'Inter', sans-serif; } /* ==================== */ /* CAROUSEL NAVIGATION */ /* ==================== */ /* Arrow buttons */ #landing-page .casos-nav-btn { position: absolute; top: 38%; transform: translateY(-50%); z-index: 10; width: 50px; height: 50px; border-radius: 50%; background: white; border: 2px solid rgba(60,110,113,0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #3c6e71; padding: 0; } #landing-page .casos-nav-btn:hover { background: #3c6e71; color: white; border-color: #3c6e71; box-shadow: 0 6px 24px rgba(60,110,113,0.35); transform: translateY(-50%) scale(1.08); } #landing-page .casos-nav-btn svg { width: 22px; height: 22px; } #landing-page .casos-nav-prev { left: -28px; } #landing-page .casos-nav-next { right: -28px; } @media (max-width: 960px) { #landing-page .casos-nav-prev { left: -6px; } #landing-page .casos-nav-next { right: -6px; } #landing-page .casos-nav-btn { width: 42px; height: 42px; } } @media (max-width: 640px) { #landing-page .casos-nav-btn { width: 38px; height: 38px; top: 32%; } #landing-page .casos-nav-prev { left: 4px; } #landing-page .casos-nav-next { right: 4px; } #landing-page .casos-nav-btn svg { width: 18px; height: 18px; } } /* Dots navigation */ #landing-page .casos-dots { display: flex; justify-content: center; gap: 10px; margin-top: 2rem; } #landing-page .casos-dot { width: 12px; height: 12px; border-radius: 50%; background: #d9d9d9; border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } #landing-page .casos-dot.active { background: linear-gradient(135deg, #3c6e71, #2d5457); transform: scale(1.2); box-shadow: 0 2px 8px rgba(60,110,113,0.4); } #landing-page .casos-dot:hover:not(.active) { background: #b0c4c5; transform: scale(1.1); } /* Counter badge */ #landing-page .casos-counter { text-align: center; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: #3c6e71; font-family: 'Inter', sans-serif; } /* Mobile swipe hint */ @media (max-width: 640px) { #landing-page .caso-titulo { font-size: 1.15rem; } } /* ===== Bloque CSS 4 ===== */ /* Colores de marca */ #landing-page .brand-text { color: #404040; } #landing-page .brand-primary { color: #3c6e71; } #landing-page .brand-primary-bg { background-color: #3c6e71; } #landing-page .brand-secondary-bg { background-color: #f7f9f7; } /* Timeline container */ #landing-page .timeline-container { position: relative; max-width: 1200px; margin: 0 auto; } /* Línea central (solo desktop) */ #landing-page .timeline-line { position: absolute; left: 50%; top: 80px; bottom: 80px; width: 4px; background: linear-gradient(180deg, #3c6e71, #d9d9d9); transform: translateX(-50%); } @media (max-width: 768px) { #landing-page .timeline-line { left: 30px; top: 60px; bottom: 60px; } } /* Paso del proceso */ #landing-page .process-step { display: flex; align-items: center; margin-bottom: 4rem; position: relative; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .process-step.visible { opacity: 1; transform: translateY(0); } /* Alternar izquierda/derecha en desktop */ #landing-page .process-step:nth-child(odd) { flex-direction: row; text-align: left; } #landing-page .process-step:nth-child(even) { flex-direction: row-reverse; text-align: right; } @media (max-width: 768px) { .process-step, #landing-page .process-step:nth-child(even) { flex-direction: row; text-align: left; padding-left: 80px; } } /* Contenido del paso */ #landing-page .step-content { flex: 1; background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); position: relative; border: 2px solid #f7f9f7; transition: all 0.3s ease; } #landing-page .step-content:hover { border-color: #3c6e71; box-shadow: 0 15px 40px rgba(60, 110, 113, 0.15); transform: scale(1.02); } /* Número del paso */ #landing-page .step-number { width: 80px; height: 80px; background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 800; position: relative; z-index: 2; box-shadow: 0 8px 20px rgba(60, 110, 113, 0.4); flex-shrink: 0; margin: 0 2rem; } @media (max-width: 768px) { #landing-page .step-number { position: absolute; left: 0; margin: 0; width: 60px; height: 60px; font-size: 1.5rem; } } #landing-page .step-number::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #3c6e71; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } /* Icono del paso */ #landing-page .step-icon { margin-bottom: 1rem; display: inline-block; } #landing-page .step-icon svg { width: 48px; height: 48px; color: #3c6e71; } /* Badge decorativo */ #landing-page .section-badge { display: inline-block; background: linear-gradient(135deg, #3c6e71, #2d5457); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.5px; } /* Fade in */ #landing-page .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* ===== Bloque CSS 5 ===== */ /* Colores de marca */ #landing-page .brand-text { color: #404040; } #landing-page .brand-primary { color: #3c6e71; } #landing-page .brand-primary-bg { background-color: #3c6e71; } #landing-page .brand-secondary-bg { background-color: #f7f9f7; } /* Card de doctora */ #landing-page .doctor-card { background: white !important; border-radius: 24px !important; padding: 3rem !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important; display: flex !important; align-items: center !important; gap: 2.5rem !important; transition: all 0.4s ease !important; border: 2px solid transparent !important; margin-bottom: 2rem !important; } #landing-page .doctor-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 60px rgba(60, 110, 113, 0.15) !important; border-color: #3c6e71 !important; } /* Foto circular */ #landing-page .doctor-photo { width: 180px !important; height: 180px !important; border-radius: 50% !important; flex-shrink: 0 !important; object-fit: cover !important; border: 5px solid #f7f9f7 !important; box-shadow: 0 8px 24px rgba(60, 110, 113, 0.2) !important; transition: all 0.3s ease !important; } #landing-page .doctor-card:hover .doctor-photo { transform: scale(1.05) !important; border-color: #3c6e71 !important; } /* Contenido de la doctora */ #landing-page .doctor-content { flex: 1 !important; } #landing-page .doctor-name { font-size: 2rem !important; font-weight: 700 !important; color: #3c6e71 !important; margin-bottom: 0.5rem !important; } #landing-page .doctor-title { font-size: 1.125rem !important; color: #404040 !important; font-weight: 500 !important; margin-bottom: 1.25rem !important; } #landing-page .doctor-quote { font-size: 1rem !important; line-height: 1.7 !important; color: #404040 !important; font-style: italic !important; margin-bottom: 1.5rem !important; padding-left: 1.5rem !important; border-left: 4px solid #3c6e71 !important; } /* Credenciales */ #landing-page .doctor-credentials { display: flex !important; gap: 2rem !important; flex-wrap: wrap !important; } #landing-page .credential-item { display: flex !important; align-items: center !important; gap: 0.5rem !important; color: #3c6e71 !important; font-weight: 600 !important; font-size: 0.95rem !important; } #landing-page .credential-icon { width: 20px !important; height: 20px !important; color: #10b981 !important; } /* Badge decorativo */ #landing-page .section-badge { display: inline-block !important; background: linear-gradient(135deg, #3c6e71, #2d5457) !important; color: white !important; padding: 0.5rem 1.5rem !important; border-radius: 50px !important; font-size: 0.875rem !important; font-weight: 600 !important; margin-bottom: 1rem !important; letter-spacing: 0.5px !important; } /* Animación de entrada */ #landing-page .fade-in-section { opacity: 0 !important; transform: translateY(30px) !important; transition: opacity 0.8s ease, transform 0.8s ease !important; } #landing-page .fade-in-section.visible { opacity: 1 !important; transform: translateY(0) !important; } /* Responsive - Mobile */ @media (max-width: 768px) { #landing-page .doctor-card { flex-direction: column !important; text-align: center !important; padding: 2rem !important; gap: 1.5rem !important; } #landing-page .doctor-photo { width: 150px !important; height: 150px !important; } #landing-page .doctor-name { font-size: 1.5rem !important; } #landing-page .doctor-title { font-size: 1rem !important; } #landing-page .doctor-quote { padding-left: 0 !important; border-left: none !important; border-top: 4px solid #3c6e71 !important; padding-top: 1rem !important; } #landing-page .doctor-credentials { justify-content: center !important; gap: 1rem !important; } #landing-page .credential-item { font-size: 0.875rem !important; } } /* ===== Bloque CSS 6 ===== */ /* CTA Box de Confianza */ #landing-page .transition-cta-section { background: linear-gradient(135deg, #f7f9f7 0%, #e8f0f1 100%) !important; padding: 5rem 0 !important; } #landing-page .transition-cta-box { background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%) !important; border-radius: 24px !important; padding: 4rem 3rem !important; text-align: center !important; box-shadow: 0 20px 60px rgba(60, 110, 113, 0.25) !important; position: relative !important; overflow: hidden !important; } /* Efecto de brillo sutil */ #landing-page .transition-cta-box::before { content: '' !important; position: absolute !important; top: -50% !important; right: -50% !important; width: 200% !important; height: 200% !important; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important; pointer-events: none !important; } #landing-page .transition-cta-box h3 { color: white !important; font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 1rem !important; line-height: 1.2 !important; } #landing-page .transition-cta-box p { color: white !important; font-size: 1.25rem !important; margin-bottom: 2.5rem !important; opacity: 0.95 !important; } /* Botón principal del CTA */ #landing-page .cta-transition-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; background: white !important; color: #3c6e71 !important; padding: 1.25rem 3rem !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 1.125rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; transition: all 0.3s ease !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; border: none !important; cursor: pointer !important; } #landing-page .cta-transition-button:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; background: #f7f9f7 !important; } #landing-page .cta-transition-button:active { transform: translateY(-1px) scale(1) !important; } #landing-page .cta-transition-button svg { width: 24px !important; height: 24px !important; } /* Trust signals debajo del botón */ #landing-page .cta-trust-signals { display: flex !important; align-items: center !important; justify-content: center !important; gap: 2rem !important; margin-top: 2rem !important; flex-wrap: wrap !important; } #landing-page .cta-trust-item { display: flex !important; align-items: center !important; gap: 0.5rem !important; color: white !important; font-size: 0.95rem !important; font-weight: 500 !important; } #landing-page .cta-trust-item svg { width: 20px !important; height: 20px !important; color: #10b981 !important; } /* Responsive */ @media (max-width: 768px) { #landing-page .transition-cta-section { padding: 3rem 0 !important; } #landing-page .transition-cta-box { padding: 3rem 1.5rem !important; } #landing-page .transition-cta-box h3 { font-size: 1.75rem !important; } #landing-page .transition-cta-box p { font-size: 1rem !important; } #landing-page .cta-transition-button { width: 100% !important; padding: 1.25rem 2rem !important; font-size: 1rem !important; } #landing-page .cta-trust-signals { flex-direction: column !important; gap: 1rem !important; } } /* Animación de entrada */ #landing-page .transition-cta-section { opacity: 0 !important; transform: translateY(30px) !important; transition: opacity 0.8s ease, transform 0.8s ease !important; } #landing-page .transition-cta-section.visible { opacity: 1 !important; transform: translateY(0) !important; } /* ===== Bloque CSS 7 ===== */ /* Colores de marca */ #landing-page .brand-text { color: #404040; } #landing-page .brand-primary { color: #3c6e71; } #landing-page .brand-primary-bg { background-color: #3c6e71; } #landing-page .brand-secondary-bg { background-color: #f7f9f7; } /* Tarjeta de testimonio */ #landing-page .testimonial-card { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); position: relative; border-left: 5px solid #3c6e71; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; } #landing-page .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(60, 110, 113, 0.15); } /* Comillas decorativas */ #landing-page .quote-icon { position: absolute; top: -15px; left: 20px; width: 50px; height: 50px; background: linear-gradient(135deg, #3c6e71, #2d5457); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: bold; box-shadow: 0 4px 12px rgba(60, 110, 113, 0.3); } /* Estrellas */ #landing-page .stars { color: #fbbf24; font-size: 1.25rem; margin-bottom: 1rem; } /* Avatar del paciente */ #landing-page .patient-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #e8f0f1, #d9d9d9); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #3c6e71; margin-right: 1rem; flex-shrink: 0; border: 3px solid white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Badge verificado */ #landing-page .verified-badge { display: inline-flex; align-items: center; gap: 0.25rem; background: #10b981; color: white; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; } /* Badge decorativo */ #landing-page .section-badge { display: inline-block; background: linear-gradient(135deg, #3c6e71, #2d5457); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.5px; } /* Animaciones */ #landing-page .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* Stats de confianza */ #landing-page .trust-stat { text-align: center; padding: 1.5rem; } #landing-page .trust-stat-number { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #3c6e71, #2d5457); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 0.5rem; } /* Video testimonial placeholder */ #landing-page .video-testimonial { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease; } #landing-page .video-testimonial:hover { transform: scale(1.02); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } #landing-page .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(60, 110, 113, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; transition: all 0.3s ease; } #landing-page .video-testimonial:hover .video-play-button { background: rgba(60, 110, 113, 1); transform: translate(-50%, -50%) scale(1.1); } /* ===== Bloque CSS 8 ===== */ /* Colores de marca */ #landing-page .brand-text { color: #404040; } #landing-page .brand-primary { color: #3c6e71; } #landing-page .brand-primary-bg { background-color: #3c6e71; } #landing-page .brand-secondary-bg { background-color: #f7f9f7; } /* Sección de formulario */ #landing-page .form-section { background: linear-gradient(135deg, #f7f9f7 0%, #e8f0f1 100%); } /* Contenedor del formulario */ #landing-page .form-container { background: white; padding: 3rem; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); border: 2px solid #e8f0f1; } /* Campos del formulario */ #landing-page .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; color: #3c6e71; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem; } .form-group input, .form-group textarea { width: 100%; padding: 1rem 1.25rem; border: 2px solid #e8f0f1; border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: white; font-family: inherit; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #3c6e71; box-shadow: 0 0 0 4px rgba(60, 110, 113, 0.1); transform: translateY(-2px); } .form-group input.error, .form-group textarea.error { border-color: #ef4444; background: #fef2f2; } .form-group textarea { resize: vertical; min-height: 120px; } /* Mensajes de error */ #landing-page .error-message { color: #ef4444; font-size: 0.875rem; margin-top: 0.5rem; display: none; } #landing-page .error-message.show { display: block; } /* Checkbox personalizado */ #landing-page .checkbox-container { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; } .checkbox-container input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; cursor: pointer; flex-shrink: 0; } /* Botón de envío */ #landing-page .submit-button { width: 100%; background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%); color: white; padding: 1.25rem 2rem; border: none; border-radius: 12px; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(60, 110, 113, 0.3); display: flex; align-items: center; justify-content: center; gap: 0.75rem; } #landing-page .submit-button:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(60, 110, 113, 0.4); } #landing-page .submit-button:active { transform: translateY(0); } #landing-page .submit-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Loading spinner */ #landing-page .spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid white; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: none; } #landing-page .submit-button.loading .spinner { display: block; } #landing-page .submit-button.loading .button-text { display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Mensaje de éxito/error */ #landing-page .form-message { padding: 1.25rem; border-radius: 12px; margin-bottom: 1.5rem; display: none; font-weight: 500; } #landing-page .form-message.show { display: block; } #landing-page .form-message.success { background: #d1fae5; color: #065f46; border: 2px solid #34d399; } #landing-page .form-message.error { background: #fee2e2; color: #991b1b; border: 2px solid #f87171; } /* Trust signals */ #landing-page .trust-signal { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f7f9f7; border-radius: 12px; margin-bottom: 1rem; } #landing-page .trust-signal-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #3c6e71, #2d5457); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; flex-shrink: 0; } /* Badge decorativo */ #landing-page .section-badge { display: inline-block; background: linear-gradient(135deg, #3c6e71, #2d5457); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.5px; } /* Animaciones */ #landing-page .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 768px) { #landing-page .form-container { padding: 2rem 1.5rem; } } /* ===== Bloque CSS 9 ===== */ /* Colores de marca */ #landing-page .brand-text { color: #404040; } #landing-page .brand-primary { color: #3c6e71; } #landing-page .brand-primary-bg { background-color: #3c6e71; } #landing-page .brand-secondary-bg { background-color: #f7f9f7; } /* Acordeón FAQ */ #landing-page .faq-item { background: white; border-radius: 16px; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); overflow: hidden; border: 2px solid #f7f9f7; transition: all 0.3s ease; } #landing-page .faq-item.active { border-color: #3c6e71; box-shadow: 0 10px 25px rgba(60, 110, 113, 0.1); } #landing-page .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; cursor: pointer; background: white; transition: all 0.3s ease; gap: 1rem; } #landing-page .faq-question:hover { background: #f7f9f7; } #landing-page .faq-item.active .faq-question { background: #f7f9f7; } .faq-question h3 { font-size: 1.125rem; font-weight: 700; color: #3c6e71; margin: 0; flex-grow: 1; } #landing-page .faq-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #3c6e71, #2d5457); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: bold; transition: transform 0.3s ease; flex-shrink: 0; } #landing-page .faq-item.active .faq-icon { transform: rotate(45deg); } #landing-page .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 2rem; } #landing-page .faq-item.active .faq-answer { max-height: 500px; padding: 0 2rem 1.5rem 2rem; } .faq-answer p { color: #404040; line-height: 1.8; margin: 0; } /* Badge decorativo */ #landing-page .section-badge { display: inline-block; background: linear-gradient(135deg, #3c6e71, #2d5457); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.5px; } /* CTA Final */ #landing-page .cta-final-box { background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%); border-radius: 24px; padding: 3rem; text-align: center; color: white; margin-top: 3rem; } #landing-page .cta-final-box h3 { color: white !important; } #landing-page .cta-final-box p { color: white !important; } #landing-page .cta-final-button { background: white; color: #3c6e71; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } #landing-page .cta-final-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); background: #f7f9f7; } /* ==================== */ /* FOOTER */ /* ==================== */ footer h3 { color: #FFFFFF !important; } footer h4 { color: white !important; } footer a { color: white !important; } footer p { color: white !important; } footer li { color: white !important; } /* Animaciones */ #landing-page .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } #landing-page .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* Categorías de FAQ (opcional) */ #landing-page .faq-category { margin-bottom: 2rem; } #landing-page .faq-category-title { font-size: 1.5rem; font-weight: 700; color: #3c6e71; margin-bottom: 1.5rem; padding-left: 1rem; border-left: 4px solid #3c6e71; } /* ===== Bloque CSS 10 ===== */ /* ========================================== */ /* STICKY MOBILE BAR */ /* ========================================== */ #landing-page .sticky-mobile-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; display: none !important; /* Oculto por defecto */ background: white !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important; padding: 10px !important; gap: 10px !important; animation: slideUp 0.4s ease-out !important; } /* Mostrar la barra cuando tenga la clase 'show' */ #landing-page .sticky-mobile-bar.show { display: flex !important; } /* Nota: La visibilidad es controlada por JavaScript añadiendo/quitando la clase 'show' */ /* Solo se muestra en móviles después de hacer scroll pasando el HERO */ @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Botones de la barra */ #landing-page .sticky-mobile-btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 14px 12px !important; border-radius: 12px !important; text-decoration: none !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; position: relative !important; overflow: hidden !important; } /* Efecto de pulso sutil */ #landing-page .sticky-mobile-btn::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.3) !important; transform: translate(-50%, -50%) !important; transition: width 0.6s, height 0.6s !important; } #landing-page .sticky-mobile-btn:active::before { width: 300px !important; height: 300px !important; } /* Botón WhatsApp */ #landing-page .whatsapp-btn { background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%) !important; color: white !important; } #landing-page .whatsapp-btn:active { background: linear-gradient(135deg, #20BA5A 0%, #1DA851 100%) !important; transform: scale(0.98) !important; } /* Botón Llamar */ #landing-page .call-btn { background: linear-gradient(135deg, #3c6e71 0%, #2d5457 100%) !important; color: white !important; } #landing-page .call-btn:active { background: linear-gradient(135deg, #2d5457 0%, #234244 100%) !important; transform: scale(0.98) !important; } /* Icono del botón */ #landing-page .sticky-mobile-btn .btn-icon { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } /* Contenido del botón */ #landing-page .sticky-mobile-btn .btn-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.2 !important; } #landing-page .sticky-mobile-btn .btn-text { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } #landing-page .sticky-mobile-btn .btn-subtext { font-size: 11px !important; font-weight: 500 !important; opacity: 0.9 !important; margin-top: 2px !important; } /* Animación de llamada de atención cada 8 segundos */ @keyframes attention { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.03); } 50% { transform: scale(1); } 75% { transform: scale(1.03); } } #landing-page .sticky-mobile-bar { animation: slideUp 0.4s ease-out, attention 2s ease-in-out 5s infinite !important; } /* Ajuste de padding al contenedor para que el contenido no quede tapado */ @media (max-width: 768px) { body { padding-bottom: 80px !important; /* Espacio para la barra sticky */ } }