*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}:root{--primary:#0052CC; --primary-dark:#003D99; --primary-darker:#002B6B; --primary-light:#3381E0; --primary-glow:rgba(0,82,204,0.12); --accent:#FF6B00; --accent-dark:#E55D00; --accent-light:#FF8533; --accent-glow:rgba(255,107,0,0.15); --success:#00A651; --whatsapp:#25D366; --whatsapp-dark:#1DA851; --dark:#0f172a; --dark2:#1e293b; --dark3:#334155; --text:#334155; --text-light:#64748b; --border:#e2e8f0; --bg:#ffffff; --bg-alt:#f8fafc; --bg-card:#ffffff; --shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.06); --shadow:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.05); --shadow-md:0 10px 25px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.05); --shadow-lg:0 20px 40px -4px rgba(0,0,0,0.1),0 8px 16px -6px rgba(0,0,0,0.05); --shadow-xl:0 25px 50px -12px rgba(0,0,0,0.15); --radius:16px; --radius-sm:10px; --radius-xs:6px; --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --transition:all 0.25s cubic-bezier(0.4,0,0.2,1)} html{scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%} body{font-family:var(--font); color:var(--text); line-height:1.7; background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden} a{text-decoration:none; color:inherit; transition:var(--transition)} ul{list-style:none} img{max-width:100%; height:auto; display:block} h1,h2,h3,h4,h5{font-weight:800; line-height:1.25; color:var(--dark); letter-spacing:-0.02em} h1{font-size:clamp(1.75rem,4vw,3rem)} h2{font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:0.75rem} h3{font-size:clamp(1.05rem,2vw,1.25rem); font-weight:700} p{margin-bottom:1rem; color:var(--text-light); line-height:1.75} .container{max-width:1200px; margin:0 auto; padding:0 20px} .top-bar{background:var(--dark); color:rgba(255,255,255,0.9); padding:10px 0; font-size:0.82rem; font-weight:500; text-align:center; letter-spacing:0.02em} .top-bar a{color:#fff; font-weight:700} .top-bar a:hover{color:var(--accent-light)} .top-bar span{margin:0 10px; opacity:0.3} .header{background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:14px 0; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; transition:var(--transition)} .header .container{display:flex; align-items:center; justify-content:space-between; gap:16px} .logo{font-size:1.25rem; font-weight:900; color:var(--primary); white-space:nowrap; letter-spacing:-0.03em} .logo span{color:var(--accent)} .nav{display:none} .nav.active{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg); box-shadow:var(--shadow-lg); z-index:99; padding:12px 20px; gap:2px; border-top:1px solid var(--border)} .nav a{padding:12px 16px; border-radius:var(--radius-xs); font-weight:600; font-size:0.9rem; color:var(--text)} .nav a:hover,.nav a.active{background:var(--primary); color:#fff} .header-cta{display:flex; gap:8px; align-items:center} .header-cta .btn-phone{display:flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; padding:10px 20px; border-radius:50px; font-weight:700; font-size:0.85rem; box-shadow:0 4px 12px rgba(255,107,0,0.3)} .header-cta .btn-phone:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,107,0,0.4)} .menu-toggle{background:none; border:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; padding:8px} .menu-toggle span{width:22px; height:2px; background:var(--dark); border-radius:2px; transition:var(--transition)} .hero{background:linear-gradient(145deg,var(--primary-darker) 0%,var(--primary-dark) 40%,var(--primary) 100%); color:#fff; padding:60px 0 70px; text-align:center; position:relative; overflow:hidden} .hero::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")} .hero::after{content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(255,107,0,0.15) 0%,transparent 70%); border-radius:50%} .hero .container{position:relative; z-index:2} .hero h1{color:#fff; font-size:clamp(1.75rem,5vw,2.75rem); margin-bottom:16px; font-weight:900; text-shadow:0 2px 4px rgba(0,0,0,0.1)} .hero > .container > p{color:rgba(255,255,255,0.85); font-size:clamp(0.95rem,2vw,1.15rem); margin-bottom:28px; max-width:650px; margin-left:auto; margin-right:auto; font-weight:400} .hero-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:32px} .hero-badge{background:rgba(255,255,255,0.1); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.15); padding:10px 18px; border-radius:50px; font-size:0.82rem; font-weight:600; display:flex; align-items:center; gap:6px; letter-spacing:0.01em} .hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px} .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 30px; border-radius:50px; font-weight:700; font-size:0.95rem; cursor:pointer; border:none; transition:var(--transition); text-align:center; letter-spacing:0.01em; position:relative; overflow:hidden} .btn::after{content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(255,255,255,0.1); border-radius:50%; transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s} .btn:active::after{width:200%; height:200%; top:-50%; left:-50%} .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; box-shadow:0 4px 15px rgba(255,107,0,0.35)} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,107,0,0.4)} .btn-whatsapp{background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-dark)); color:#fff; box-shadow:0 4px 15px rgba(37,211,102,0.35)} .btn-whatsapp:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,0.4)} .btn-outline{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.4)} .btn-outline:hover{background:#fff; color:var(--primary-dark)} .btn-sm{padding:10px 22px; font-size:0.88rem} .btn-lg{padding:16px 36px; font-size:1.05rem} .section{padding:72px 0} .section-alt{background:var(--bg-alt)} .section-dark{background:linear-gradient(160deg,var(--dark) 0%,var(--dark2) 100%); color:#fff} .section-dark h2,.section-dark h3{color:#fff} .section-dark p{color:rgba(255,255,255,0.7)} .section-header{text-align:center; margin-bottom:48px} .section-header h2{position:relative; display:inline-block} .section-header h2::after{content:''; display:block; width:50px; height:4px; background:linear-gradient(90deg,var(--accent),var(--accent-light)); border-radius:2px; margin:14px auto 0} .section-header p{color:var(--text-light); max-width:560px; margin:10px auto 0; font-size:0.95rem} .section-dark .section-header p{color:rgba(255,255,255,0.6)} .grid{display:grid; gap:24px} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:repeat(2,1fr)} .grid-5{grid-template-columns:repeat(2,1fr)} .card{background:var(--bg-card); border-radius:var(--radius); padding:36px 28px 28px; box-shadow:var(--shadow); transition:var(--transition); text-align:center; border:1px solid var(--border); position:relative; overflow:hidden} .card::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-light)); opacity:0; transition:var(--transition)} .card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-glow)} .card:hover::before{opacity:1} .card-icon{width:72px; height:72px; background:linear-gradient(145deg,var(--primary),var(--primary-dark)); border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 8px 20px rgba(0,82,204,0.2)} .card h3{margin-bottom:10px; color:var(--dark)} .card p{font-size:0.9rem; color:var(--text-light); margin-bottom:16px; line-height:1.6} .card-link{color:var(--primary); font-weight:700; font-size:0.88rem; display:inline-flex; align-items:center; gap:4px} .card:hover .card-link{gap:8px; color:var(--accent)} .brand-card{background:var(--bg-card); border-radius:var(--radius-sm); padding:24px 16px; box-shadow:var(--shadow-sm); text-align:center; transition:var(--transition); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:90px} .brand-card:hover{border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-3px)} .brand-card h3{font-size:1rem; color:var(--primary-dark); margin-bottom:4px} .brand-card p{font-size:0.75rem; margin:0; color:var(--text-light); font-weight:500; text-transform:uppercase; letter-spacing:0.05em} .brand-logo{font-size:1.25rem; font-weight:800; color:var(--dark); margin-bottom:6px; letter-spacing:-0.01em; line-height:1.2} .district-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:10px} .district-tag{display:inline-flex; align-items:center; gap:4px; background:var(--bg-card); padding:10px 20px; border-radius:50px; font-size:0.88rem; font-weight:600; color:var(--dark); box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:var(--transition)} .district-tag:hover{background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--primary)} .feature-item{display:flex; align-items:flex-start; gap:20px; padding:24px; border-radius:var(--radius); transition:var(--transition)} .feature-item:hover{background:rgba(255,255,255,0.06)} .feature-icon{flex-shrink:0; width:52px; height:52px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 6px 16px rgba(255,107,0,0.25)} .feature-item h3{margin-bottom:6px; font-size:1.05rem} .feature-item p{font-size:0.9rem; margin:0; line-height:1.6} .testimonial-card{background:var(--bg-card); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); border:1px solid var(--border); position:relative} .testimonial-card::before{content:'\201C'; font-size:5rem; color:var(--primary); opacity:0.08; position:absolute; top:4px; left:20px; font-family:Georgia,serif; line-height:1} .testimonial-card p{font-style:italic; color:var(--text); margin-bottom:16px; padding-left:4px; font-size:0.95rem; line-height:1.7} .testimonial-author{font-weight:800; color:var(--dark); font-size:0.9rem} .testimonial-meta{font-size:0.8rem; color:var(--text-light); margin-top:2px} .stars{color:#F59E0B; font-size:1rem; margin-bottom:12px; letter-spacing:2px} .faq-item{background:var(--bg-card); border-radius:var(--radius-sm); margin-bottom:10px; box-shadow:var(--shadow-sm); border:1px solid var(--border); overflow:hidden; transition:var(--transition)} .faq-item:hover{border-color:var(--primary-glow)} .faq-question{width:100%; padding:18px 24px; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:0.95rem; font-weight:700; color:var(--dark); text-align:left; font-family:var(--font); transition:var(--transition)} .faq-question:hover{color:var(--primary)} .faq-question .arrow{transition:transform 0.3s; font-size:0.75rem; color:var(--text-light)} .faq-item.active .faq-question .arrow{transform:rotate(180deg); color:var(--primary)} .faq-item.active{border-color:var(--primary); box-shadow:var(--shadow)} .faq-answer{max-height:0; overflow:hidden; transition:max-height 0.35s ease,padding 0.35s ease; padding:0 24px} .faq-item.active .faq-answer{max-height:300px; padding:0 24px 20px} .faq-answer p{font-size:0.9rem; margin:0; color:var(--text-light)} .cta-banner{background:linear-gradient(145deg,var(--accent) 0%,var(--accent-dark) 100%); color:#fff; padding:56px 0; text-align:center; position:relative; overflow:hidden} .cta-banner::before{content:''; position:absolute; bottom:-80px; left:-80px; width:300px; height:300px; background:rgba(255,255,255,0.06); border-radius:50%} .cta-banner h2{color:#fff; font-size:clamp(1.4rem,3vw,1.85rem); margin-bottom:10px} .cta-banner p{color:rgba(255,255,255,0.9); margin-bottom:28px; font-size:1rem} .cta-banner .btn-primary{background:#fff; color:var(--accent-dark); box-shadow:0 4px 20px rgba(0,0,0,0.15)} .cta-banner .btn-primary:hover{background:var(--dark); color:#fff} .footer{background:var(--dark); color:rgba(255,255,255,0.65); padding:56px 0 28px} .footer-grid{display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:36px} .footer h4{color:#fff; margin-bottom:18px; font-size:1rem; font-weight:700} .footer a{color:rgba(255,255,255,0.6); display:block; padding:5px 0; font-size:0.88rem; font-weight:500} .footer a:hover{color:var(--accent-light); padding-left:4px} .footer-info p{font-size:0.9rem; margin-bottom:10px} .footer-bottom{border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; text-align:center; font-size:0.82rem; color:rgba(255,255,255,0.4)} .sticky-phone{position:fixed; bottom:0; left:0; right:0; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); padding:10px 0; z-index:999; box-shadow:0 -4px 24px rgba(0,0,0,0.2)} .sticky-phone .container{display:flex; justify-content:center; gap:10px; width:100%} .sticky-phone a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-weight:700; font-size:0.95rem; padding:8px 16px; border-radius:50px; transition:var(--transition)} .sticky-phone a:first-child{background:var(--accent)} .sticky-phone a:last-child{background:var(--whatsapp)} .float-whatsapp{position:fixed; bottom:76px; right:16px; width:60px; height:60px; background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); z-index:998; transition:var(--transition); animation:pulse-wp 2s infinite} .float-whatsapp:hover{transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.5)} .float-whatsapp svg{width:30px; height:30px; fill:white} @keyframes pulse-wp{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.4)} 50%{box-shadow:0 4px 32px rgba(37,211,102,0.65)}} .page-hero{background:linear-gradient(145deg,var(--primary-darker),var(--primary)); color:#fff; padding:44px 0; text-align:center} .page-hero h1{color:#fff; font-size:clamp(1.4rem,3.5vw,2rem); margin-bottom:8px} .page-hero p{color:rgba(255,255,255,0.8)} .breadcrumb{font-size:0.82rem; color:rgba(255,255,255,0.5); margin-bottom:12px} .breadcrumb a{color:rgba(255,255,255,0.7)} .breadcrumb a:hover{color:#fff} .content-section{padding:48px 0} .content-section h2{color:var(--primary-dark); margin-bottom:14px; font-size:1.5rem} .content-section h3{color:var(--dark); margin-bottom:10px; margin-top:28px; font-size:1.15rem} .content-section ul{padding-left:20px; margin-bottom:20px} .content-section ul li{position:relative; padding:6px 0 6px 16px; color:var(--text); font-size:0.95rem} .content-section ul li::before{content:''; position:absolute; left:0; top:14px; width:6px; height:6px; background:var(--primary); border-radius:50%} .content-cta{background:linear-gradient(135deg,var(--bg-alt),#eef2ff); border:1px solid var(--border); border-radius:var(--radius); padding:36px 28px; text-align:center; margin:36px 0} .content-cta h3{margin-bottom:8px; margin-top:0} .content-cta p{margin-bottom:20px} body{padding-bottom:60px} @media (min-width:640px){.grid-4{grid-template-columns:repeat(3,1fr)} .grid-5{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:768px){.hero{padding:72px 0 80px} .container{padding:0 28px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .section{padding:88px 0}} @media (min-width:1024px){.nav{display:flex !important; position:static; background:none; box-shadow:none; padding:0; gap:2px; flex-direction:row; border-top:none} .menu-toggle{display:none} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-5{grid-template-columns:repeat(5,1fr)} .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr} .sticky-phone{display:none} .float-whatsapp{bottom:28px; right:28px} body{padding-bottom:0}} .text-center{text-align:center} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px}