/* --- LA SOLUCIÓN DEFINITIVA ESTÁ AQUÍ. Al aplicar "overflow-x: hidden" tanto a como a , forzamos a que ningún elemento pueda salirse de los bordes de la pantalla, eliminando el problema del zoom y el desborde horizontal de raíz. --- */ html, body { overflow-x: hidden; } /* --- FUENTES Y VARIABLES GLOBALES --- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --color-rojo: #E43F5A; --color-azul-oscuro: #0A192F; --color-azul-texto: #192A56; --color-fondo-principal: #f8f9fa; --color-fondo-blanco: #ffffff; --color-texto-principal: #343a40; --color-texto-secundario: #6c757d; --font-principal: 'Poppins', sans-serif; --header-height: 70px; --shadow-suave: 0 4px 15px rgba(0, 0, 0, 0.05); --shadow-medio: 0 8px 25px rgba(0, 0, 0, 0.08); } /* --- ESTILOS GENERALES Y RESET --- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-principal); background-color: var(--color-fondo-principal); color: var(--color-texto-principal); line-height: 1.7; font-size: 16px; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } main { padding-top: var(--header-height); } section { padding: 60px 0; background-color: var(--color-fondo-blanco); } .section-light { background-color: var(--color-fondo-principal); } .section-title { font-size: clamp(2rem, 5vw, 2.5rem); text-align: center; margin-bottom: 50px; font-weight: 700; color: var(--color-azul-texto); } /* --- HEADER Y NAVEGACIÓN --- */ .header { background-color: var(--color-fondo-blanco); padding: 0 20px; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: var(--shadow-suave); height: var(--header-height); display: flex; align-items: center; } .navbar { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 15px; } .logo { display: flex; align-items: center; text-decoration: none; color: var(--color-azul-oscuro); font-weight: 700; font-size: 1.0rem; min-width: 0; } .logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logo img { width: 60px; margin-right: 10px; flex-shrink: 0; } .nav-links { position: fixed; top: var(--header-height); right: -100%; width: 100%; height: calc(100vh - var(--header-height)); background-color: var(--color-fondo-blanco); flex-direction: column; /* <<< SOLUCIÓN #1: Cambiamos centrado por alineación a la izquierda y arriba */ justify-content: flex-start; align-items: flex-start; padding: 40px; gap: 0; /* Eliminamos el gap para controlar el espacio manualmente */ transition: right 0.5s ease-in-out; display: flex; z-index: 999; } .nav-links.active { right: 0; } .nav-links a { font-size: 1.8rem; /* Aumentamos ligeramente el tamaño para mejor tacto */ color: var(--color-texto-secundario); text-decoration: none; font-weight: 500; transition: color 0.3s ease; padding: 15px 0; /* <<< SOLUCIÓN #2: Añadimos padding para separar los elementos */ } .nav-links a:hover { color: var(--color-rojo); } /* <<< SOLUCIÓN #3: Unificamos el estilo del botón con los otros links en el menú móvil */ .nav-links .cta-button { font-size: 1.8rem; padding: 15px 0; background-color: transparent; /* Quitamos el fondo */ color: var(--color-texto-secundario); /* Mismo color que los otros links */ font-weight: 500; /* Mismo grosor de letra */ } .nav-links .cta-button:hover { color: var(--color-rojo); transform: none; /* Quitamos efectos de botón que no aplican aquí */ box-shadow: none; } .menu-icon { display: block; font-size: 1.8rem; cursor: pointer; color: var(--color-azul-oscuro); flex-shrink: 0; } /* --- SECCIÓN HERO --- */ .hero { min-height: auto; padding: 60px 0; text-align: center; position: relative; color: #ffffff; background-image: linear-gradient(rgba(10, 25, 47, 0.6), rgba(10, 25, 47, 0.6)), url('Bariloche.jpg'); background-size: cover; background-position: center center; animation: fadeInBackground 2s ease-in-out forwards; } .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: #ffffff; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); } .hero-subtitle { font-size: 1.1rem; color: #f8f9fa; margin-bottom: 40px; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); } .hero-features { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 40px; color: #e9ecef; font-weight: 500; } .hero-features .feature-item i { color: var(--color-rojo); margin-right: 8px; } /* --- OTRAS SECCIONES --- */ .steps-grid, .features-grid-main, .testimonios-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .contact-container { display: flex; flex-direction: column; gap: 40px; } .step-card { padding: 40px 30px; border-radius: 12px; background-color: var(--color-fondo-blanco); box-shadow: var(--shadow-suave); transition: all 0.3s ease; text-align: center; } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medio); } .step-icon-wrapper { width: 70px; height: 70px; margin: 0 auto 25px; border-radius: 50%; background-color: rgba(228, 63, 90, 0.1); display: flex; align-items: center; justify-content: center; } .step-icon { font-size: 2.5rem; color: var(--color-rojo); } .step-card h3 { font-size: 1.4rem; margin-bottom: 15px; color: var(--color-azul-texto); } .feature-main-card { text-align: center; } .feature-main-card i { font-size: 2.2rem; color: var(--color-rojo); margin-bottom: 15px; } .feature-main-card .fa-layers { font-size: 2.5rem; color: var(--color-rojo); margin-bottom: 15px; display: inline-block; } .feature-main-card h3 { font-size: 1.3rem; color: var(--color-azul-texto); margin-bottom: 10px; } .testimonio-card { background: var(--color-fondo-blanco); padding: 30px; border-radius: 8px; border-left: 4px solid var(--color-rojo); box-shadow: var(--shadow-suave); } .testimonio-card blockquote { font-style: italic; color: var(--color-texto-secundario); border: none; margin-bottom: 20px; } .testimonio-card cite { font-weight: 600; color: var(--color-azul-texto); } .faq-accordion { max-width: 800px; margin: 0 auto; } .faq-item { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 10px; overflow: hidden; } .faq-item.active { border-color: var(--color-rojo); } .faq-question { width: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-principal); font-size: 1.1rem; font-weight: 600; background: var(--color-fondo-blanco); border: none; color: var(--color-azul-texto); cursor: pointer; text-align: left; } .faq-question i { transition: transform 0.3s ease; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } .faq-answer p { padding: 0 20px 20px; color: var(--color-texto-secundario); } .faq-item.active .faq-question i { transform: rotate(180deg); color: var(--color-rojo); } .faq-item.active .faq-answer { max-height: 300px; } .contact-info h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--color-azul-texto); } .oferta-item { display: flex; align-items: flex-start; margin-top: 25px; } .oferta-item i { font-size: 1.5rem; color: var(--color-rojo); margin-right: 20px; margin-top: 5px; } .oferta-item h4 { color: var(--color-azul-texto); } .contact-form-wrapper { background: var(--color-fondo-blanco); padding: 40px; border-radius: 12px; box-shadow: var(--shadow-medio); } .contact-form-wrapper h4, .contact-form-wrapper p { text-align: center; margin-bottom: 10px; } .contact-form-wrapper h4 { color: var(--color-azul-texto); } .contact-form-wrapper p { margin-bottom: 30px; } .form-group { margin-bottom: 20px; } .form-group input { width: 100%; padding: 15px; border-radius: 8px; border: 1px solid #ced4da; background: var(--color-fondo-principal); font-family: var(--font-principal); font-size: 1rem; } .form-group input:focus { outline: none; border-color: var(--color-rojo); box-shadow: 0 0 0 3px rgba(228, 63, 90, 0.15); } .form-button { width: 100%; padding: 15px; font-size: 1.1rem; } .footer { text-align: center; padding: 40px 20px; background: var(--color-azul-oscuro); color: #adb5bd; font-size: 0.9rem; } .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 20px; right: 20px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 100; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: transform 0.3s ease; } .whatsapp-float:hover { transform: scale(1.1); } .hero-button { font-size: 1.5rem; /* Hacemos el texto 2 veces más grande */ padding: 18px 36px; /* Aumentamos el padding para hacer el botón más grande */ background-color: transparent; border: 2px solid #fff; /* Borde blanco */ color: #fff !important; /* Color de texto blanco */ transition: all 0.3s ease; text-decoration: none; display: inline-block; border-radius: 8px; font-weight: 600; } .hero-button:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-3px); } @media (min-width: 768px) { section { padding: 80px 0; } .header { height: var(--header-height); } .menu-icon { display: none; } .nav-links { position: static; flex-direction: row; width: auto; height: auto; background-color: transparent; padding: 0; align-items: center; /* <<< SOLUCIÓN FINAL: Centramos verticalmente en vista de escritorio */ } .nav-links a { font-size: 1rem; margin-left: 30px; padding: 0; /* Reseteamos el padding para la vista de escritorio */ color: var(--color-texto-secundario); } /* Estilo del botón solo para la vista de escritorio */ .nav-links .cta-button { /* <<< CORRECCIÓN #1: Selector más específico */ font-size: 1rem; /* <<< CORRECCIÓN #2: Se añade el font-size correcto */ background-color: var(--color-rojo); color: var(--color-fondo-blanco); padding: 12px 28px; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(228, 63, 90, 0.2); } .hero { min-height: calc(80vh - var(--header-height)); text-align: left; } .hero-features { flex-direction: row; } .steps-grid, .features-grid-main { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .testimonios-grid { grid-template-columns: 1fr 1fr; } .contact-container { flex-direction: row; } } @media (min-width: 992px) { :root { --header-height: 75px; } .steps-grid { grid-template-columns: 1fr 1fr 1fr; } } @keyframes fadeInBackground { from { opacity: 0; } to { opacity: 1; } } /* --- ESTILOS DEL POP-UP DE ÉXITO --- */ /* El fondo oscuro semi-transparente */ .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 25, 47, 0.7); /* Usando tu color azul oscuro con transparencia */ z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } /* Clase para mostrar el pop-up */ .popup-overlay.active { opacity: 1; visibility: visible; } /* La caja del pop-up */ .popup-box { background-color: var(--color-fondo-blanco); padding: 40px 30px; border-radius: 12px; box-shadow: var(--shadow-medio); text-align: center; max-width: 400px; width: 90%; position: relative; transform: scale(0.9); transition: transform 0.4s ease; } .popup-overlay.active .popup-box { transform: scale(1); } /* Icono de éxito */ .popup-icon { font-size: 4rem; color: #25d366; /* Un verde éxito, como el de WhatsApp */ margin-bottom: 20px; } .popup-box h2 { color: var(--color-azul-texto); font-size: 1.8rem; margin-bottom: 15px; } .popup-box p { color: var(--color-texto-secundario); font-size: 1.1rem; line-height: 1.6; } /* Botón para cerrar (la 'X') - REGLA BASE PRIMERO */ .popup-close-btn { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: var(--color-texto-secundario); cursor: pointer; transition: color 0.3s ease; } /* EFECTO HOVER DESPUÉS */ .popup-close-btn:hover { color: var(--color-rojo); } /* --- ESTILOS ADICIONALES PARA POP-UP DE ERROR --- */ /* Contenedor del pop-up en modo error */ .popup-box.error { border-top: 5px solid var(--color-rojo); /* Línea roja superior para destacar */ } /* Icono de error (reemplaza el verde de éxito) */ .popup-box.error .popup-icon { color: var(--color-rojo); /* El ícono será rojo */ } /* Título del pop-up de error */ .popup-box.error h2 { color: var(--color-rojo); /* El título "Error" será rojo */ }