* {margin: 0;padding: 0;box-sizing: border-box} body {font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333333;background-color: #ffffff} .container {max-width: 1200px;margin: 0 auto;padding: 0 20px}  :root {--primary-color: #2c5aa0;--secondary-color: #4a90e2;--accent-color: #7bb3f0;--text-color: #333333;--light-bg: #f8f9fa;--white: #ffffff;--border-radius: 10px;--box-shadow: 0 5px 15px rgba(0,0,0,0.1);--transition: all 0.3s ease}  .site-header {background: var(--white);box-shadow: var(--box-shadow);position: sticky;top: 0;z-index: 1000;padding: 15px 0} .header-content {display: flex;align-items: center;justify-content: space-between;max-width: 1200px;margin: 0 auto;padding: 0 20px} .site-branding {flex: 0 0 auto} .custom-logo-link {text-decoration: none;display: block} .custom-logo {max-height: 80px;width: auto;height: 80px;border-radius: 8px;object-fit: contain;transition: var(--transition);border: none} .custom-logo:hover {opacity: 0.8} .main-navigation {flex: 1;text-align: center} .nav-menu {list-style: none;margin: 0;padding: 0;display: flex;justify-content: center;gap: 30px} .nav-menu li a {color: var(--text-color);text-decoration: none;font-weight: 500;padding: 10px 15px;transition: var(--transition);position: relative} .nav-menu li a:hover {color: var(--primary-color)} .header-cta {flex: 0 0 auto}  .btn-primary {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));border: none;padding: 15px 35px;border-radius: 30px;text-decoration: none;color: var(--white);display: inline-block;transition: var(--transition);font-weight: 600;text-transform: uppercase;letter-spacing: 1px;font-size: 0.9rem} .btn-primary:hover {transform: translateY(-3px);box-shadow: 0 10px 20px rgba(44, 90, 160, 0.3);color: var(--white)} .btn-secondary {background: transparent;border: 2px solid var(--primary-color);color: var(--primary-color);padding: 13px 33px;border-radius: 30px;text-decoration: none;display: inline-block;transition: var(--transition);font-weight: 600;text-transform: uppercase;letter-spacing: 1px;font-size: 0.9rem} .btn-secondary:hover {background: var(--primary-color);color: var(--white);transform: translateY(-3px)}  .hero-section {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: var(--white);padding: 100px 0;text-align: center;position: relative;overflow: hidden} .hero-content {position: relative;z-index: 2} .hero-title {font-size: 3.5rem;font-weight: 700;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0,0,0,0.3)} .hero-subtitle {font-size: 1.3rem;margin-bottom: 30px;opacity: 0.9}  .section-title {text-align: center;font-size: 2.5rem;color: var(--primary-color);margin-bottom: 20px;font-weight: 700} .section-subtitle {text-align: center;font-size: 1.2rem;color: var(--text-color);margin-bottom: 60px;max-width: 600px;margin-left: auto;margin-right: auto}  .services-section {padding: 80px 0;background: var(--light-bg)} .services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 40px;margin-top: 60px} .service-card {background: var(--white);border-radius: var(--border-radius);padding: 40px 30px;box-shadow: var(--box-shadow);transition: var(--transition);text-align: center;position: relative;overflow: hidden} .service-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color))} .service-card:hover {transform: translateY(-10px);box-shadow: 0 15px 30px rgba(0,0,0,0.15)} .service-icon {margin-bottom: 20px;display: flex;justify-content: center;align-items: center;height: 180px} .service-icon img {width: 150px;height: 150px;object-fit: contain;filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));transition: all 0.3s ease;border-radius: 12px;background: rgba(44, 90, 160, 0.05);padding: 15px} .service-icon img:hover {transform: scale(1.05);filter: drop-shadow(0 2px 6px rgba(44, 90, 160, 0.2));background: rgba(44, 90, 160, 0.1)} .service-title {font-size: 1.5rem;font-weight: 600;color: var(--primary-color);margin-bottom: 15px} .service-description {color: var(--text-color);margin-bottom: 25px;line-height: 1.7} .service-price {font-size: 1.3rem;font-weight: 700;color: var(--secondary-color);margin-bottom: 20px}  .welcome-section {padding: 80px 0;background: white} .welcome-content {display: grid;grid-template-columns: 1fr 1fr;gap: 60px;align-items: center} .welcome-text h2 {font-size: 2.5rem;color: var(--primary-color);margin-bottom: 20px;font-weight: 700} .welcome-text p {font-size: 1.1rem;color: var(--text-color);line-height: 1.7;margin-bottom: 30px} .welcome-benefits {display: grid;grid-template-columns: 1fr 1fr;gap: 30px} .benefit-item {text-align: center;padding: 20px} .benefit-icon {font-size: 3rem;color: var(--primary-color);margin-bottom: 15px;display: block} .benefit-title {font-size: 1.2rem;color: var(--primary-color);margin-bottom: 10px;font-weight: 600} .benefit-description {font-size: 0.95rem;color: #666;line-height: 1.5} .welcome-highlight {text-align: center} .highlight-box {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius: 15px;padding: 40px;color: white} .highlight-box h3 {font-size: 1.8rem;margin-bottom: 20px;font-weight: 600} .highlight-box ul {text-align: left;font-size: 1.1rem;line-height: 1.8;list-style: none;padding: 0} .highlight-box li {margin-bottom: 10px}  .mission-vision-section {padding: 80px 0;background: white} .mission-vision-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 40px;margin: 60px 0} .mission-card, .vision-card {background: var(--light-bg);padding: 40px;border-radius: 10px;text-align: center;border-top: 4px solid var(--primary-color)} .vision-card {border-top-color: var(--secondary-color)} .mission-icon, .vision-icon {font-size: 4rem;color: var(--primary-color);margin-bottom: 20px} .vision-icon {color: var(--secondary-color)} .mission-title, .vision-title {font-size: 1.8rem;font-weight: 600;margin-bottom: 20px;color: var(--primary-color)} .mission-description, .vision-description {color: var(--text-color);line-height: 1.7;font-size: 1.1rem}  .contact-section {padding: 80px 0;background: var(--light-bg)}  .map-container {position: relative;width: 100%;height: 300px;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 12px rgba(0,0,0,0.1)} .map-container iframe {border: 0;border-radius: 10px;width: 100%;height: 100%} .map-links {display: flex;gap: 15px;margin-top: 20px;flex-wrap: wrap} .map-link {padding: 10px 20px;border-radius: 8px;text-decoration: none;font-weight: 600;display: inline-flex;align-items: center;gap: 8px;transition: all 0.3s ease} .map-link:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.2)} .map-link.google {background: #2c5aa0;color: white} .map-link.google:hover {background: #1e3f73;color: white} .map-link.waze {background: #33ccff;color: white} .map-link.waze:hover {background: #00b8e6;color: white} @media (max-width: 768px) {.map-links {flex-direction: column} .map-link {justify-content: center} }  .contact-form {background: white;padding: 40px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0,0,0,0.1)} .form-group {margin-bottom: 25px} .form-label {display: block;margin-bottom: 8px;font-weight: 600;color: #333} .form-input, .form-select, .form-textarea {width: 100%;padding: 15px;border: 2px solid #e9ecef;border-radius: 8px;font-size: 1rem;transition: border-color 0.3s ease} .form-input:focus, .form-select:focus, .form-textarea:focus {outline: none;border-color: #2c5aa0} .form-buttons {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;margin-top: 30px} .form-button {border: none;padding: 18px;border-radius: 8px;font-size: 1.1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 8px} .form-button:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.2)} .form-button.email {background: #2c5aa0;color: white} .form-button.email:hover {background: #1e3f73} .form-button.whatsapp {background: #25D366;color: white} .form-button.whatsapp:hover {background: #1DA851} @media (max-width: 768px) {.form-buttons {grid-template-columns: 1fr} .form-button {padding: 15px;font-size: 1rem}  .contact-section .container > div {grid-template-columns: 1fr !important;gap: 30px !important} .contact-section .container > div > div:first-child {margin-bottom: 0}  .contact-section div[style*="display: flex"] {flex-direction: column !important;align-items: flex-start !important;text-align: left !important} .contact-section div[style*="display: flex"] span {margin-right: 0 !important;margin-bottom: 10px !important} .contact-section div[style*="display: flex"] div {width: 100% !important;word-wrap: break-word !important;overflow-wrap: break-word !important}  .contact-section div[style*="display: flex"][style*="gap: 15px"] {flex-direction: column !important;gap: 10px !important} .contact-section div[style*="display: flex"][style*="gap: 15px"] a {width: 100% !important;text-align: center !important;justify-content: center !important} }  .site-footer {background: var(--primary-color);color: var(--white);padding: 40px 0;text-align: center}   @media (max-width: 1200px) {.container {padding: 0 20px} .services-grid {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px} .hero-title {font-size: 3.2rem} .hero-subtitle {font-size: 1.4rem} }  @media (max-width: 992px) {.hero-title {font-size: 2.8rem} .hero-subtitle {font-size: 1.2rem} .section-title {font-size: 2.2rem} .section-subtitle {font-size: 1.1rem} .services-grid {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 25px} .service-card {padding: 35px 25px} .service-title {font-size: 1.4rem} .service-icon {height: 150px} .service-icon img {width: 120px;height: 120px} .btn-primary, .btn-secondary {padding: 12px 25px;font-size: 0.9rem}  .welcome-content {grid-template-columns: 1fr;gap: 40px} .welcome-benefits {grid-template-columns: 1fr;gap: 20px} .welcome-text h2 {font-size: 2.2rem} .welcome-text p {font-size: 1rem} .highlight-box {padding: 30px 20px} .highlight-box h3 {font-size: 1.5rem} .highlight-box ul {font-size: 1rem}  .mission-vision-content {grid-template-columns: 1fr;gap: 30px} .mission-card, .vision-card {padding: 30px 20px} .mission-title, .vision-title {font-size: 1.5rem} .mission-description, .vision-description {font-size: 1rem} }  @media (max-width: 768px) {.container {padding: 0 15px} .hero-section {padding: 80px 0;min-height: 60vh} .hero-title {font-size: 2.5rem;line-height: 1.2} .hero-subtitle {font-size: 1.1rem;margin-bottom: 30px} .section-title {font-size: 2rem} .section-subtitle {font-size: 1rem} .services-section, .welcome-section, .mission-vision-section, .contact-section, .testimonials-section {padding: 60px 0} .services-grid {grid-template-columns: 1fr;gap: 20px;margin-top: 40px} .service-card {padding: 30px 20px} .service-title {font-size: 1.3rem} .service-icon {height: 130px} .service-icon img {width: 100px;height: 100px} .service-description {font-size: 1rem} .btn-primary, .btn-secondary {padding: 10px 20px;font-size: 0.9rem;margin: 5px;display: block;width: 100%;text-align: center} .btn-secondary {margin-left: 0;margin-top: 10px}  .welcome-content {gap: 30px} .welcome-text h2 {font-size: 2rem} .welcome-text p {font-size: 0.95rem} .welcome-benefits {gap: 15px;grid-template-columns: 1fr} .benefit-item {padding: 15px;display: flex;align-items: center;text-align: left;background: #f8f9fa;border-radius: 10px;border-left: 4px solid var(--primary-color)} .benefit-icon {font-size: 2.5rem;margin-right: 15px;margin-bottom: 0;flex-shrink: 0} .benefit-content {flex: 1} .benefit-title {font-size: 1.1rem;margin-bottom: 5px} .benefit-description {font-size: 0.9rem;margin-bottom: 0} .highlight-box {padding: 25px 15px} .highlight-box h3 {font-size: 1.3rem} .highlight-box ul {font-size: 0.95rem}  .mission-vision-content {margin: 40px 0;gap: 25px} .mission-card, .vision-card {padding: 25px 15px} .mission-icon, .vision-icon {font-size: 3rem} .mission-title, .vision-title {font-size: 1.3rem} .mission-description, .vision-description {font-size: 0.95rem}  .header-content {flex-direction: column;gap: 20px;padding: 15px 0} .site-branding {order: 1;width: 100%;text-align: center} .main-navigation {order: 2;width: 100%} .nav-menu {flex-direction: column;gap: 10px;background: var(--white);padding: 20px;border-radius: 10px;box-shadow: var(--box-shadow);margin: 0} .nav-menu li a {padding: 15px;border-radius: 8px;display: block;text-align: center;font-size: 1rem} .header-cta {order: 3;width: 100%;text-align: center} .custom-logo {max-height: 60px;height: 60px;width: auto}  .contact-form {padding: 30px 20px} .form-group {margin-bottom: 20px} .form-input, .form-select, .form-textarea {padding: 12px;font-size: 0.95rem} .form-buttons {grid-template-columns: 1fr;gap: 10px} .form-button {padding: 15px;font-size: 1rem}  .contact-section .container > div {grid-template-columns: 1fr !important;gap: 30px !important} .contact-section .container > div > div:first-child {margin-bottom: 0}  .map-container {height: 250px} .map-links {flex-direction: column;gap: 10px} .map-link {justify-content: center;padding: 12px 20px}  .site-footer {padding: 30px 0} .footer-content {gap: 20px} .footer-nav ul {flex-direction: column;gap: 10px} }  @media (max-width: 480px) {.container {padding: 0 10px} .hero-section {padding: 60px 0;min-height: 50vh} .hero-title {font-size: 2rem;line-height: 1.1} .hero-subtitle {font-size: 1rem;margin-bottom: 25px} .section-title {font-size: 1.8rem} .section-subtitle {font-size: 0.9rem} .services-section, .welcome-section, .mission-vision-section, .contact-section, .testimonials-section {padding: 50px 0} .service-card {padding: 25px 15px} .service-title {font-size: 1.2rem} .service-icon {height: 110px} .service-icon img {width: 80px;height: 80px} .service-description {font-size: 0.95rem} .btn-primary, .btn-secondary {padding: 12px 15px;font-size: 0.85rem;margin: 3px 0}  .welcome-text h2 {font-size: 1.8rem} .welcome-text p {font-size: 0.9rem} .benefit-item {padding: 12px;flex-direction: column;text-align: center} .benefit-icon {font-size: 2rem;margin-right: 0;margin-bottom: 10px} .benefit-title {font-size: 1rem;margin-bottom: 8px} .benefit-description {font-size: 0.85rem} .highlight-box {padding: 20px 12px} .highlight-box h3 {font-size: 1.2rem} .highlight-box ul {font-size: 0.9rem}  .mission-vision-content {margin: 30px 0;gap: 20px} .mission-card, .vision-card {padding: 20px 12px} .mission-icon, .vision-icon {font-size: 2.5rem} .mission-title, .vision-title {font-size: 1.2rem} .mission-description, .vision-description {font-size: 0.9rem}  .header-content {padding: 10px 0;gap: 15px} .nav-menu {padding: 15px;gap: 8px} .nav-menu li a {padding: 12px;font-size: 0.95rem} .custom-logo {max-height: 50px;height: 50px}  .contact-form {padding: 25px 15px} .form-input, .form-select, .form-textarea {padding: 10px;font-size: 0.9rem} .form-button {padding: 12px;font-size: 0.95rem}  .map-container {height: 200px} .map-link {padding: 10px 15px;font-size: 0.9rem}  .site-footer {padding: 25px 0} .footer-logo {font-size: 2rem}  .whatsapp-button {width: 50px;height: 50px;font-size: 1.8rem;bottom: 15px;right: 15px} }  .testimonials-section {background-color: var(--light-bg)} .testimonials-carousel {position: relative;max-width: 800px;margin: 0 auto;overflow: hidden;border-radius: var(--border-radius);box-shadow: var(--box-shadow)} .testimonial-slide {display: none;padding: 40px;background: white;text-align: center;animation: fadeIn 0.5s ease-in-out} .testimonial-slide.active {display: block} .testimonial-content {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;align-items: center} .testimonial-video, .testimonial-image {display: flex;justify-content: center;align-items: center} .testimonial-video video, .testimonial-image img {border-radius: var(--border-radius);box-shadow: 0 4px 12px rgba(0,0,0,0.15)}  .testimonial-image div[style*="display: flex"] {display: flex !important;gap: 10px !important;justify-content: center !important;align-items: center !important;flex-wrap: wrap !important} .testimonial-image div[style*="display: flex"] img {max-width: 200px !important;width: 100% !important;height: auto !important;border-radius: 10px !important;box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;transition: transform 0.3s ease !important} .testimonial-image div[style*="display: flex"] img:hover {transform: scale(1.05) !important} .testimonial-text {text-align: left} .testimonial-text p {font-size: 1.3rem;font-style: italic;color: #555;line-height: 1.6;margin-bottom: 25px;position: relative} .testimonial-text p::before {content: '"';font-size: 4rem;color: var(--primary-color);position: absolute;top: -20px;left: -20px;opacity: 0.3} .testimonial-author {border-top: 2px solid var(--primary-color);padding-top: 15px} .testimonial-author strong {display: block;font-size: 1.2rem;color: var(--primary-color);margin-bottom: 5px} .testimonial-author span {color: #666;font-size: 1rem}  .carousel-controls {display: flex;justify-content: center;align-items: center;gap: 20px;margin-top: 30px} .carousel-btn {background: var(--primary-color);color: white;border: none;width: 50px;height: 50px;border-radius: 50%;font-size: 1.5rem;cursor: pointer;transition: var(--transition);display: flex;align-items: center;justify-content: center} .carousel-btn:hover {background: var(--secondary-color);transform: scale(1.1)} .carousel-dots {display: flex;gap: 10px} .dot {width: 12px;height: 12px;border-radius: 50%;background: #ccc;cursor: pointer;transition: var(--transition)} .dot.active, .dot:hover {background: var(--primary-color);transform: scale(1.2)}  @keyframes fadeIn {from {opacity: 0;transform: translateY(20px)} to {opacity: 1;transform: translateY(0)} }  @media (max-width: 992px) {.testimonials-carousel {max-width: 90%} .testimonial-content {gap: 30px} .testimonial-text p {font-size: 1.2rem} } @media (max-width: 768px) {.testimonials-carousel {max-width: 95%} .testimonial-content {grid-template-columns: 1fr;gap: 20px} .testimonial-text {text-align: center} .testimonial-text p {font-size: 1.1rem} .testimonial-slide {padding: 20px} .testimonial-video video, .testimonial-image img {max-width: 100%;height: auto}  .testimonial-image div[style*="display: flex"] {flex-direction: column !important;gap: 15px !important} .testimonial-image div[style*="display: flex"] img {max-width: 150px !important} .carousel-controls {gap: 15px} .carousel-btn {width: 40px;height: 40px;font-size: 1.2rem} .carousel-dots {gap: 8px} .dot {width: 10px;height: 10px} } @media (max-width: 480px) {.testimonials-carousel {max-width: 100%;margin: 0 10px} .testimonial-slide {padding: 15px} .testimonial-text p {font-size: 1rem;margin-bottom: 20px} .testimonial-text p::before {font-size: 3rem;top: -15px;left: -15px} .testimonial-author {padding-top: 12px} .testimonial-author strong {font-size: 1.1rem} .testimonial-author span {font-size: 0.9rem} .carousel-controls {gap: 10px;margin-top: 20px} .carousel-btn {width: 35px;height: 35px;font-size: 1rem} .carousel-dots {gap: 6px} .dot {width: 8px;height: 8px} }  .whatsapp-button {position: fixed;bottom: 30px;right: 30px;background-color: #25D366;color: white;border-radius: 50%;width: 65px;height: 65px;display: flex;align-items: center;justify-content: center;font-size: 2.5rem;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);z-index: 1000;text-decoration: none;transition: background-color 0.3s ease, transform 0.3s ease;border: none;outline: none} .whatsapp-button:hover {background-color: #1DA851;transform: scale(1.05);text-decoration: none} .whatsapp-button:focus {outline: none;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(37, 211, 102, 0.3)} @media (max-width: 768px) {.whatsapp-button {width: 55px;height: 55px;font-size: 2rem;bottom: 20px;right: 20px} }  .mobile-menu-toggle {display: none;flex-direction: column;background: none;border: none;cursor: pointer;padding: 8px;z-index: 1001} .hamburger-line {width: 25px;height: 3px;background: var(--primary-color);margin: 3px 0;transition: 0.3s;border-radius: 2px} .mobile-menu-toggle.active .hamburger-line:nth-child(1) {transform: rotate(-45deg) translate(-5px, 6px)} .mobile-menu-toggle.active .hamburger-line:nth-child(2) {opacity: 0} .mobile-menu-toggle.active .hamburger-line:nth-child(3) {transform: rotate(45deg) translate(-5px, -6px)}  @media (max-width: 768px) {.mobile-menu-toggle {display: flex} .main-navigation {position: fixed;top: 0;left: -100%;width: 100%;height: 100vh;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(10px);transition: left 0.3s ease;z-index: 1000;display: flex;align-items: center;justify-content: center} .main-navigation.active {left: 0} .nav-menu {flex-direction: column;gap: 40px;text-align: center} .nav-menu li a {font-size: 1.5rem;font-weight: 600;color: var(--primary-color)} .header-cta {display: none} } @media (max-width: 480px) {.nav-menu li a {font-size: 1.3rem}  .contact-section div[style*="padding: 40px"] {padding: 20px !important} .contact-section h3[style*="font-size: 1.8rem"] {font-size: 1.5rem !important} .contact-section div[style*="font-size: 1.5rem"] {font-size: 1.2rem !important} .contact-section div[style*="display: flex"][style*="gap: 15px"] a {padding: 12px 15px !important;font-size: 0.9rem !important}  .contact-section div[style*="display: flex"] div {min-width: 0 !important;max-width: 100% !important}  .contact-email {flex-direction: column !important;align-items: flex-start !important} .contact-email span {margin-right: 0 !important;margin-bottom: 10px !important} .contact-email div {width: 100% !important;word-break: break-all !important;overflow-wrap: anywhere !important} }