/* Estilos principales de la Landing Page - Diseño Corporativo Premium */ :root{ --ink:#0B0E14; --ink-soft:#161A22; --paper:#FFFFFF; --gray-50:#F6F7F9; --gray-100:#EEF0F3; --line:#e4ebed; --red:#E01C3E; --red-dark:#B0142F; --red-soft:#FDE7EB; --grad:linear-gradient(135deg,#E01C3E 0%,#FF6B4A 100%); --radius:20px; } *{box-sizing:border-box;} html{ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.01em; color:var(--ink); } a{ text-decoration:none; color:inherit; } .container{ max-width:1180px; margin:0 auto; padding:0 32px; } .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:8px; } .eyebrow:before{ content:""; width:18px; height:2px; background:var(--red); display:inline-block; } section{padding:76px 0;} /* Botones */ .btn{ display:inline-flex; align-items:center; gap:8px;padding:14px 26px; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid transparent; white-space:nowrap; font-family:'Inter'; } .btn-grad{ background:var(--grad); color:#fff; box-shadow:0 12px 26px rgba(224,28,62,.28); } .btn-grad:hover{ filter:brightness(1.06); } .btn-dark{ background:var(--ink); color:#fff; } .btn-dark:hover{ background:var(--ink-soft); } .btn-outline{ border-color:var(--line); color:var(--ink); background:#fff; } .btn-outline:hover{ border-color:var(--red); color:var(--red); } .btn-outline-white{ border-color:rgba(255,255,255,.35); color:#fff; } .btn-outline-white:hover{ border-color:#fff; background:rgba(255,255,255,.08); } /* Header de navegación */ header.nav{ background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; } .navrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0;} .logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:18px;} .logo .mark{width:36px;height:36px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;} .logo span{color:var(--red);} nav.links{display:flex;gap:28px;font-weight:600;font-size:13.5px;color:var(--ink-soft);} /* Fix: sin esta regla, los de nav.links heredan el reset genérico "a{color:inherit}" (especificidad 0,0,1), que Bootstrap puede sobrescribir con su propio "a{color:...; text-decoration:underline}" (misma especificidad, pero declarado después en el ). Al declarar el color aquí, con selector "nav.links a" (especificidad 0,1,2), queda protegido sin importar el orden de carga de las hojas de estilo externas. */ nav.links a{color:inherit;text-decoration:none;} nav.links a:hover{color:var(--red);} .nav-actions{display:flex;align-items:center;gap:18px;} .site-link{font-size:13px;font-weight:600;color:#8A90A0;border-bottom:1px solid var(--line);padding-bottom:1px;} .site-link:hover{color:var(--red);border-color:var(--red);} /* Layout principal con sidebar - Diseño Premium */ .layout{display:grid;grid-template-columns:1fr 372px;gap:72px;align-items:start;padding-top:80px;} .main-col{min-width:0;} .sidebar{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto;} .sidebar::-webkit-scrollbar{width:6px;} .sidebar::-webkit-scrollbar-track{background:transparent;} .sidebar::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px;} .sidebar::-webkit-scrollbar-thumb:hover{background:#9CA3AF;} /* Hero Section Moderno con Slider Automático */ .hero-modern{position:relative;padding:40px 0 0;max-width:800px;z-index:2;} .hero-slider{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;overflow:hidden;} .hero-slider::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, rgba(11,14,20,0.85) 0%, rgba(11,14,20,0.75) 50%, rgba(11,14,20,0.85) 100%);z-index:1;} .hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 2s ease-in-out;} .hero-slide.active{opacity:1;} .hero-modern .eyebrow{margin-bottom:32px;} .hero-modern h1{font-size:56px;line-height:1.05;margin:0 0 20px;max-width:720px;font-weight:700;color:#fff;} .hero-modern h1 .accent{color:#FF8AA0;background:none;-webkit-background-clip:unset;background-clip:unset;} .hero-modern p.lead{font-size:20px;color:#E4E7ED;max-width:600px;margin-bottom:10px;line-height:1.6;} .hero-ctas{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:48px;} .hero-categories{margin-bottom:0;} .chips-row{display:flex;gap:16px;flex-wrap:wrap;} .chip-pill{border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:#fff;padding:14px 24px;border-radius:30px;font-size:14px;font-weight:600;transition:.2s;box-shadow:0 4px 12px rgba(11,14,20,.2);backdrop-filter:blur(10px);} .chip-pill:hover{border-color:var(--red);color:#fff;background:var(--red);transform:translateY(-3px);box-shadow:0 8px 20px rgba(224,28,62,.3);} /* Animación de entrada para elementos */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease-out forwards; } /* Sección de Diferenciadores - Diseño Premium */ .differentiators-section{ background:#fff; padding:40px 60px; margin-bottom:80px; margin-top:0; border-radius:24px; border:1px solid var(--line); box-shadow:0 4px 24px rgba(11,14,20,.04); } .differentiators-section .bento-head{ margin-bottom:32px; } .differentiators-section .bento-head h2{ font-size:32px; font-weight:700; } .differentiators-section .bento-head p{ font-size:16px; color:#5B6270; max-width:320px; } .stats-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,auto); gap:20px; } .stat-tile{border-radius:16px;padding:28px;border:1px solid var(--line);background:var(--gray-50);transition:.2s;} .stat-tile:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(11,14,20,.08);} .stat-tile.big{grid-column:span 2;grid-row:span 2;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;} .stat-tile.big .num{font-family:'Space Grotesk';font-size:52px;font-weight:700;} .stat-tile.big .lbl{color:#B7BCC6;font-size:14px;margin-top:8px;} .stat-tile .num{font-family:'Space Grotesk';font-size:28px;font-weight:700;} .stat-tile .lbl{font-size:12px;color:#6B7280;margin-top:6px;} /* Stats Bento Horizontal con Gráficos Circulares */ .stats-bento-horizontal{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px;} .stat-circle-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px;background:linear-gradient(135deg, #F8FAFB 0%, #F1F5F9 100%);border-radius:16px;border:1px solid var(--line);box-shadow:0 2px 12px rgba(11,14,20,.04);transition:.3s;} .stat-circle-item:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 8px 24px rgba(224,28,62,.12);} .progress-circle{position:relative;width:100px;height:100px;margin-bottom:16px;} .progress-circle svg{width:100%;height:100%;transform:rotate(-90deg);} .progress-bg{fill:none;stroke:var(--gray-200);stroke-width:8;} .progress-bar{fill:none;stroke:var(--red);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.5s ease-out;} .progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;} .progress-text .percent{font-family:'Space Grotesk';font-size:22px;font-weight:700;color:var(--ink);} .stat-circle-item p{font-size:13px;color:#6B7280;line-height:1.4;margin:0;} /* Sección de Programas - Diseño Premium */ .programs-section{background:linear-gradient(135deg, #F8FAFB 0%, #FFFFFF 100%);padding:40px;margin-bottom:60px;border-radius:24px;border:1px solid var(--line);box-shadow:0 4px 24px rgba(11,14,20,.04);} .programs-section .bento-head{margin-bottom:20px;} .programs-section .bento-head h2{font-size:32px;font-weight:700;margin-bottom:4px;} .programs-section .bento-head p{font-size:16px;color:#5B6270;max-width:320px;margin:0;} .prog-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} .prog-tile{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.3s;box-shadow:0 2px 12px rgba(11,14,20,.04);display:flex;flex-direction:column;} .prog-tile:hover{border-color:var(--red);background:var(--red-soft);transform:translateY(-6px);box-shadow:0 12px 32px rgba(224,28,62,.12);} .prog-image{width:100%;height:160px;overflow:hidden;background:var(--gray-100);position:relative;} .prog-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;} .prog-tile:hover .prog-image img{transform:scale(1.05);} .prog-content{padding:14px 18px;flex:1;display:flex;flex-direction:column;} .prog-content h4{font-size:18px;margin-bottom:4px;font-weight:700;color:var(--ink);transition:.3s;line-height:1.2;} .prog-tile:hover h4{color:var(--ink);} .prog-content p{font-size:14px;color:#6B7280;margin:0;line-height:1.3;} .programs-section .cta-section{text-align:center;margin-top:24px;} /* Formulario de captación (sidebar) - Tarjeta Flotante Optimizada */ .lead-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 40px rgba(11,14,20,.12);overflow:hidden;position:relative;transition:.3s;} .lead-card:hover{box-shadow:0 24px 48px rgba(11,14,20,.15);transform:translateY(-2px);} .lead-card .accent-bar{height:4px;background:var(--grad);} .lead-card .inner{padding:24px;} .lead-card h3{font-size:18px;margin:8px 0 6px;font-weight:700;} .lead-card p.sub{font-size:13px;color:#6B7280;margin-bottom:20px;line-height:1.4;} form.leadform label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8A90A0;display:block;margin-bottom:6px;} form.leadform input,form.leadform select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:'Inter';font-size:13px;margin-bottom:12px;background:var(--gray-50);transition:.2s;} form.leadform input:focus,form.leadform select:focus{outline:2px solid var(--red);background:#fff;} .privacy{font-size:11px;color:#9AA0AC;margin-bottom:16px;line-height:1.4;display:flex;align-items:flex-start;gap:8px;} .privacy input[type="checkbox"]{margin:0;flex-shrink:0;margin-top:3px;width:14px;height:14px;} .privacy label{margin:0;cursor:pointer;display:inline;line-height:1.4;} .privacy a{color:var(--red);font-weight:600;} .lead-card .marks-mini{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 20px;border-top:1px solid var(--line);margin-top:2px;} .lead-card .marks-mini span{font-size:10px;font-weight:700;color:#9AA0AC;letter-spacing:.03em;} /* Modal de Promociones */ .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;justify-content:center;align-items:center;padding:20px;} .modal.active{display:flex;} .modal-content{background:#fff;border-radius:12px;max-width:320px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn 0.3s ease;border:1px solid var(--line);} .modal-content.modal-video-only{padding:0;max-width:300px;} .modal-video-only .modal-close{position:absolute;top:10px;right:10px;z-index:10;background:rgba(0,0,0,0.5);color:#fff;border-radius:50%;width:32px;height:32px;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s ease;} .modal-video-only .modal-close:hover{background:rgba(0,0,0,0.8);} .modal-video-only .modal-body{padding:0;} .modal-video-only .video-frame{width:100%;height:auto;aspect-ratio:9/16;border-radius:12px;overflow:hidden;} @keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}} .modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line);} .modal-header h3{font-size:18px;font-weight:700;color:var(--ink);margin:0;} .modal-close{background:none;border:none;font-size:24px;color:#6B7280;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s ease;} .modal-close:hover{background:var(--gray-100);color:var(--ink);} .modal-body{padding:16px;} .modal-body .video-frame{width:100%;height:auto;aspect-ratio:9/16;border-radius:8px;overflow:hidden;} .modal-body .video-info{margin-top:12px;} .modal-body .video-info h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px;} .modal-body .video-info p{font-size:13px;color:#6B7280;line-height:1.4;margin:0;} /* Animación de pulso mejorada para botón de promociones */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 28, 62, 0.7), 0 0 20px rgba(224, 28, 62, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 0 15px rgba(224, 28, 62, 0), 0 0 30px rgba(224, 28, 62, 0.5); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(224, 28, 62, 0), 0 0 20px rgba(224, 28, 62, 0.3); transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .pulse-animation { animation: pulse 2s ease-in-out infinite; border: 2px solid #E01C3E !important; color: #E01C3E !important; font-weight: 700; background: linear-gradient(90deg, #fff 0%, #fff 50%, #FFE5E9 50%, #fff 100%); background-size: 200% 100%; animation: pulse 2s ease-in-out infinite, shimmer 3s linear infinite; position: relative; overflow: hidden; } .pulse-animation::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(224, 28, 62, 0.2), transparent); animation: shimmer 2.5s infinite; } .pulse-animation:hover { animation: none; background: #E01C3E !important; color: #fff !important; border-color: #E01C3E !important; transform: scale(1.05); box-shadow: 0 8px 24px rgba(224, 28, 62, 0.4); } .pulse-animation:hover::before { animation: none; } /* Componentes Bento genéricos */ .bento-head{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;} .bento-head h2{font-size:26px;max-width:440px;font-weight:700;margin-bottom:0;} .bento-head p{color:#6B7280;font-size:13.5px;max-width:280px;line-height:1.5;margin:0;} /* Video Section */ .video-section{background:var(--ink);color:#fff;} .video-section .eyebrow{color:#FF8AA0;} .video-section .eyebrow:before{background:#FF8AA0;} .video-grid{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;} .video-frame{aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;border:1px solid #262B36;width:267px;} .video-frame iframe{width:100%;height:100%;border:0;display:block;} .facebook-reel{width:100%;height:100%;position:relative;} .reel-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg, #1a1d23 0%, #2d3038 100%);gap:16px;min-height:400px;} .reel-play-icon{width:64px;height:64px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease, box-shadow 0.3s ease;cursor:pointer;} .reel-placeholder:hover .reel-play-icon{transform:scale(1.1);box-shadow:0 8px 24px rgba(224,28,62,.4);} .reel-placeholder span{font-size:14px;font-weight:600;color:#D1D5DB;text-align:center;padding:0 16px;} .video-side h3{color:#fff;font-size:23px;margin:14px 0 12px;} .video-side p{color:#B7BCC6;font-size:14px;margin-bottom:22px;} .video-list{display:flex;flex-direction:column;gap:12px;margin-bottom:26px;} .video-list .row{display:flex;gap:12px;align-items:center;font-size:13px;color:#E6E7EA;} .video-list .ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;} /* Companies Strip */ .cert-strip{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .cert-strip .name{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--ink);opacity:.55;} /* Testimonials Bento */ .testi-bento{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;grid-template-rows:auto auto;} .testi-card{border-radius:16px;padding:26px;border:1px solid var(--line);background:var(--gray-50);} .testi-card.feat{grid-row:span 2;background:var(--ink);color:#fff;border:none;} .testi-card.feat .stars{color:#FF8AA0;} .testi-card.feat p{color:#E6E7EA;font-size:16px;} .testi-card .stars{color:var(--red);font-size:13px;margin-bottom:14px;letter-spacing:2px;} .testi-card p{font-size:13.5px;margin-bottom:20px;} .testi-person{display:flex;align-items:center;gap:11px;} .avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;} .testi-person .name{font-size:13px;font-weight:700;} .testi-person .role{display:block;font-weight:400;font-size:11.5px;color:#6B7280;margin-top:2px;} .testi-card.feat .role{color:#9CA1AD;} /* ============================================================ Sección: Profesionales Certificados (Testimonios en Video) Clases exclusivas con prefijo "testicert-" — no reutilizadas en ninguna otra sección del sitio. ============================================================= */ .testicert-section{ background:var(--gray-50); padding:64px; margin:80px 0; border-radius:24px; border:1px solid var(--line); } .testicert-head{ text-align:center; max-width:560px; margin:0 auto 40px; } .testicert-head .eyebrow{justify-content:center;margin-bottom:12px;} .testicert-head h2{font-size:30px;font-weight:700;color:var(--ink);margin-bottom:10px;} .testicert-head p{color:#6B7280;font-size:15px;line-height:1.5;} .testicert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .testicert-card{ border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff; transition:all 0.3s ease; box-shadow:0 2px 12px rgba(11,14,20,.04); } .testicert-card:hover{ border-color:var(--red); transform:translateY(-4px); box-shadow:0 12px 32px rgba(224,28,62,.12); } .testicert-thumb{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--gray-100); cursor:pointer; } .testicert-thumb:focus-visible{outline:2px solid var(--red);outline-offset:-2px;} .testicert-img{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; display:block; } .testicert-card:hover .testicert-img{transform:scale(1.06);} .testicert-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(224,28,62,.92); display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; box-shadow:0 6px 18px rgba(0,0,0,.3); } .testicert-play svg{width:20px;height:20px;fill:#fff;margin-left:2px;} .testicert-card:hover .testicert-play{background:var(--red);transform:translate(-50%,-50%) scale(1.1);} .testicert-info{padding:16px;} .testicert-info h4{font-size:15px;margin-bottom:4px;font-weight:700;color:var(--ink);} .testicert-info p{font-size:13px;color:#6B7280;margin:0;line-height:1.4;} /* Modal de testimonios (video horizontal 16:9, distinto del modal de promociones). z-index reforzado (por encima de header, menú móvil y botones flotantes, cuyo máximo en el sitio es 100) y sin cabecera/texto: solo el video y el cierre. */ .testicert-modal{ z-index:999999; } .testicert-modal-content{ background:transparent; border:none; box-shadow:none; padding:0; max-width:900px; max-height:none; overflow:visible; position:relative; } .testicert-modal-close{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease, transform 0.2s ease; z-index:1; } .testicert-modal-close:hover{background:rgba(255,255,255,.28);transform:scale(1.08);} .testicert-video-frame{width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5);} .testicert-video-frame iframe{width:100%;height:100%;border:0;display:block;} /* Final CTA */ .final-cta{ background:var(--grad); text-align:center; padding:110px 0; min-height:420px; display:flex; align-items:center; justify-content:center; } .final-cta .container{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .final-cta h2{color:#fff;font-size:38px;max-width:640px;margin:0 auto 16px;line-height:1.15;} .final-cta p{color:rgba(255,255,255,.9);font-size:16px;margin-bottom:32px;} .final-cta .ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:8px;} /* Botones del CTA final: clases exclusivas, no comparten estilos con .btn-white / .btn-outline-white usados en otras secciones. */ .finalcta-btn{ display:inline-flex; align-items:center; gap:10px; padding:17px 30px; border-radius:14px; font-weight:700; font-size:15px; font-family:'Inter',sans-serif; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .finalcta-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform 0.25s ease;} .finalcta-btn-primary{ background:#fff; color:var(--ink); border:1.5px solid #fff; box-shadow:0 10px 28px rgba(11,14,20,.2); } .finalcta-btn-primary:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px); box-shadow:0 16px 38px rgba(11,14,20,.32); } .finalcta-btn-primary:hover svg{transform:translateX(4px);} .finalcta-btn-secondary{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(6px); } .finalcta-btn-secondary:hover{ background:#25D366; border-color:#25D366; color:#fff; transform:translateY(-3px); box-shadow:0 14px 34px rgba(37,211,102,.4); } .finalcta-btn-secondary:hover svg{transform:scale(1.12);} .btn-white{background:#fff;color:var(--ink);} .btn-white:hover{background:var(--ink);color:#fff;} /* Floating Buttons */ .float-wa{position:fixed;bottom:26px;right:26px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:100;color:#fff;font-size:26px;} .float-call{position:fixed;bottom:94px;right:26px;width:50px;height:50px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:100;color:#fff;font-size:19px;} .logo{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; font-size: 1.3rem; font-weight: 700; } .logo-img{ height: 40px; width: auto; max-width: 150px; display: block; object-fit: contain; } /* Mobile Menu Toggle */ .mobile-menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; } .mobile-menu-toggle span{ width:24px; height:2px; background:#fff; transition:all 0.3s ease; } .mobile-menu-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); } .mobile-menu-toggle.active span:nth-child(2){ opacity:0; } .mobile-menu-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); } /* Mobile Menu */ .mobile-menu{ display:none; position:fixed; top:70px; left:0; right:0; background:var(--ink); padding:24px; border-bottom:1px solid var(--line); z-index:99; transform:translateY(-100%); opacity:0; transition:all 0.3s ease; } .mobile-menu.active{ transform:translateY(0); opacity:1; } .mobile-nav{ display:flex; flex-direction:column; gap:16px; margin-bottom:24px; } .mobile-nav-link{ color:#fff; text-decoration:none; font-size:16px; font-weight:500; padding:12px; border-radius:8px; transition:background 0.2s ease; } .mobile-nav-link:hover{ background:rgba(255,255,255,.1); } .mobile-cta .btn{ width:100%; justify-content:center; }