/* ==================================================== */ /* INICIO: CONTENIDO DE style01.css (PROPORCIONADO) */ /* ==================================================== */ /* ---------------------------------------------------- */ /* ESTILOS CSS GENERALES Y VARIABLES (PERSONALIZADOS) */ /* ---------------------------------------------------- */ /* PALETA DE COLORES ALBEC (Nuevos valores) */ :root { /* Colores Base ALBEC: Azul: #002e54 | Amarillo: #ffb000 | Celeste: #009fb5 | Blanco: #f2f2f2 */ --color-azul: #002e54; --color-amarillo: #ffb000; --color-celeste: #009fb5; --color-blanco-albec: #f2f2f2; /* Blanco de la paleta */ /* Mapeo de variables originales a la nueva paleta ALBEC: */ /* COLOR BASE TURQUESA (Mapeado a Celeste) */ --color-turquesa-fondo: var(--color-celeste); /* Colores secundarios (ajustados a la paleta) */ --color-turquesa-claro: var(--color-celeste); /* Usamos Celeste como acento */ --color-naranja-boton: var(--color-amarillo); /* Mapeado a Amarillo */ --color-azul-oscuro-titulo: var(--color-azul); /* Mapeado a Azul */ --color-blanco: var(--color-blanco-albec); /* Mapeado a Blanco ALBEC */ --color-gris-claro: var(--color-blanco-albec); /* Usamos Blanco ALBEC */ --color-resalte-texto: rgba(242, 242, 242, 0.2); /* Resalte basado en el nuevo Blanco (#f2f2f2) */ --color-texto-principal: var(--color-azul); /* Mapeado a Azul */ --color-fondo-testimonios: var(--color-blanco-albec); /* Mapeado a Blanco ALBEC */ --color-resalte-texto-rosa: var(--color-celeste); /* Mapeado a Celeste para resaltar */ --color-burbuja-comentario: var(--color-blanco-albec); /* Mapeado a Blanco ALBEC */ --color-burbuja-comentario-blanco: var(--color-blanco-albec); /* Mapeado a Blanco ALBEC */ /* Variable del CSS anterior que no tiene reemplazo directo */ --albec-green: #7BB540; /* Verde de logo Parcelas */ } body { margin: 0; padding: 0; /* ---------------------------------------------------- */ /* 🔥 ARREGLO CLAVE PARA LA SUPERPOSICIÓN 🔥 */ /* Este padding empuja todo el contenido del hacia abajo, liberando el espacio para el menú fijo. 80px es un valor seguro para la mayoría de los menús fijos. */ /* ---------------------------------------------------- */ /* Se cambia la fuente a Montserrat */ font-family: 'Montserrat', sans-serif; min-height: 100vh; display: flex; flex-direction: column; color: var(--color-texto-principal); /* Se asegura el color de texto base */ } a { text-decoration: none; color: inherit; } /* ---------------------------------------------------- */ /* SECCIÓN 1: MENÚ DE NAVEGACIÓN FIJO (HEADER) */ /* ---------------------------------------------------- */ /* Asumo que tienes una clase con position: fixed para el menú, ya que es lo que causa la superposición. Ejemplo: .header-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 10px 0; background-color: var(--color-blanco); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } */ /* ---------------------------------------------------- */ /* TIPOGRAFÍA - PESOS DE FUENTE (Según documento Word) */ /* ---------------------------------------------------- */ /* 1. SECCIÓN CARRUSEL DE TESTIMONIOS (CLIENTES) */ .testimonials-section h2 { font-weight: 800; /* titulo - extrabold */ } .testimonials-section h2 span { /* Mantener el color de fondo Celeste y el texto en Blanco */ color: var(--color-blanco-albec); } .testimonial-card .client-name { font-weight: 700; /* nombre de cliente - bold */ color: var(--color-azul-oscuro-titulo); } .testimonial-card .client-comment { font-weight: 500; /* texto de cliente - medium */ } .testimonial-card .client-origin { font-style: italic; font-weight: 600; /* nombre de cliente - semibold italic */ color: var(--color-azul); /* Usamos el color azul para dar más consistencia */ } /* 2. SECCIÓN CALL TO ACTION (ANUNCIO) */ .cta-section .title-container h2 { font-weight: 800; /* titulo - extrabold (lo aplicamos al h2/span principal) */ } .cta-section .title-container span { font-weight: 800; /* titulo - extrabold */ } .cta-section h3 { font-weight: 600; /* subtitulo - semibold */ color: var(--color-azul-oscuro-titulo); } .cta-section ul li { font-weight: 500; /* interior- medium */ color: var(--color-texto-principal); } .cta-section .solicitar-btn { font-weight: 800; /* boton - extrabold */ } /* 3. FOOTER (TEXTO FINAL) */ .titulo-descuentos { font-weight: 800; /* titulos - extrabold */ color: var(--color-celeste); /* Usamos Celeste como color principal de este elemento */ } .footer-nav a { font-weight: 600; /* Semibold para los enlaces de navegación */ } .oficina-central h3 { font-weight: 700; /* Bold para el subtítulo "OFICINA CENTRAL" */ } .oficina-central ul, .oficina-central li { font-weight: 400; /* interior - regular */ } .ubicacion { font-style: italic; font-weight: 600; /* lugar o direccion - semibold italic */ background-color: var(--color-amarillo); /* Cambiado a Amarillo para mayor contraste */ color: var(--color-azul); /* Texto oscuro sobre amarillo */ } .footer-bottom > div { /* font-weight: 500; - Comentado porque se sobreescribe abajo */ } /* Contenido principal */ .main-content { flex-grow: 1; background-color: var(--color-blanco); padding: 20px; text-align: center; } /* ---------------------------------------------------- */ /* SECCIÓN 1: MENÚ DE NAVEGACIÓN FIJO (HEADER) */ /* ---------------------------------------------------- */ .header-nav { position: fixed; /* 🔥 CLAVE para que flote sobre el contenido */ top: 0; left: 0; width: 100%; z-index: 1000; /* Asegura que esté por encima de todo */ padding: 15px 0; /* Un poco más de padding vertical */ background-color: var(--color-blanco); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 80px; /* Altura fija para coincidir con el padding-top del body */ display: flex; align-items: center; } .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; /* Asegura que el contenido esté centrado */ margin: 0 auto; padding: 0 20px; width: 100%; } .nav-list { list-style: none; display: flex; margin: 0; padding: 0; gap: 15px; /* Espacio entre items */ } .nav-item a { color: var(--color-azul); font-weight: 500; padding: 10px 15px; display: block; transition: color 0.3s; font-size: 0.9rem; } .nav-item a:hover { color: var(--color-celeste); } .btn-contacto { background-color: var(--color-amarillo); color: var(--color-azul); padding: 10px 20px; border-radius: 5px; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; transition: background-color 0.3s; } .btn-contacto:hover { background-color: #e69d00; } /* Agrega aquí los media queries para el menú si es necesario */ /* ---------------------------------------------------- */ /* SECCIÓN 1.1: CARRUSEL PRINCIPAL (HERO) */ /* ---------------------------------------------------- */ /* ---------------------------------------------------- */ /* ---------------------------------------------------- */ /* SECCIÓN 1.1: CARRUSEL PRINCIPAL (HERO) - CON IMAGEN DIRECTA */ /* ---------------------------------------------------- */ .carrusel-section { max-width: 100%; margin: 0 auto; } /* Contenedor principal con altura y fondo */ .hero-carousel-container { position: relative; width: 100%; height: 500px; /* CLAVE */ background-color: var(--color-azul); /* Fondo de reserva */ overflow: hidden; } /* Estilo base para cada slide */ .carousel-item.hero-slide { width: 100%; height: 500px; /* CLAVE */ /* background-size y background-image ya no se usan aquí */ } /* Los estilos .hero-slide-1 y .hero-slide-2 ya NO se necesitan */ /* Ya no necesitamos: .carousel-item.hero-slide-1 { background-image: url(...); } */ /* Ya no necesitamos: .carousel-item.hero-slide-2 { background-image: url(...); } */ /* Contenido superpuesto en el carrusel (Mantiene la clase para aplicar estilos) */ .carrusel-info { /* ... Mantiene todos los estilos de texto, posición y color ... */ position: absolute; top: 50%; right: 15%; transform: translateY(-50%); text-align: right; z-index: 50; max-width: 450px; padding: 10px; pointer-events: all; } /* (El resto del CSS para .carrusel-info p, h2, a, flechas, y puntos se mantiene sin cambios) */ /* Contenido superpuesto en el carrusel (Mantiene la clase para aplicar estilos) */ .carrusel-info { position: absolute; top: 50%; right: 15%; transform: translateY(-50%); /* Centrado vertical */ text-align: right; z-index: 50; max-width: 450px; padding: 10px; pointer-events: all; } /* Estilo para el texto de proyecto (Etiqueta superior) */ .carrusel-info p:first-child { color: var(--color-blanco); background-color: var(--color-amarillo); padding: 5px 10px; display: inline-block; margin-bottom: 5px; font-weight: 600; /* Semi-bold */ text-transform: uppercase; } /* Estilo para el título principal (carrusel-info h2) */ .carrusel-info h2 { background-color: var(--color-celeste); color: var(--color-azul); padding: 10px 15px; margin: 0; font-size: 2.2em; font-weight: 800; /* Extra-bold */ line-height: 1.1; display: inline-block; } /* Botón de Proyecto */ .carrusel-info a.btn-proyecto { background-color: var(--color-amarillo); color: var(--color-azul); padding: 15px 30px; border-radius: 5px; font-weight: 800; /* Extra-bold */ margin-top: 15px; display: inline-block; text-transform: uppercase; transition: background-color 0.3s; } .carrusel-info a.btn-proyecto:hover { background-color: #e69d00; } /* -------------------------------------- */ /* (NUEVO) ESTILO PARA TEXTO IZQUIERDA */ /* -------------------------------------- */ .carrusel-info-left { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 50; color: white; text-align: left; max-width: 400px; } .carrusel-info-left span.text-extra-bold { font-size: 2.5rem; font-weight: 800; color: var(--color-amarillo); } .carrusel-info-left h2.text-extra-bold { font-size: 3.5rem; font-weight: 800; line-height: 1; margin: 0; } .carrusel-info-left p.text-semi-bold { font-size: 1.2rem; font-weight: 600; background-color: rgba(0,0,0,0.3); padding: 5px; display: inline-block; margin-top: 10px; } /* -------------------------------------- */ /* ESTILOS DE NAVEGACIÓN (Flechas Únicas) */ /* -------------------------------------- */ /* Estilo base para las flechas del Hero */ .hero-nav-arrow { width: 50px; opacity: 0.8; } /* Ocultar el icono de Bootstrap y usar nuestro estilo personalizado */ .carousel-control-prev-icon, .carousel-control-next-icon { display: none; } /* Estilo del círculo y flecha personalizados */ .hero-nav-arrow::before { content: '❮'; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; width: 40px; height: 40px; line-height: 40px; text-align: center; color: var(--color-azul); font-size: 28px; font-weight: 700; display: block; } .hero-nav-arrow.arrow-right::before { content: '❯'; } /* -------------------------------------- */ /* ESTILOS DE INDICADORES (Puntos Únicos) */ /* -------------------------------------- */ /* Posicionar el contenedor de indicadores */ .hero-indicators { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 50; margin: 0; /* Anula el margin por defecto de Bootstrap */ padding: 0; } .hero-dot { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; cursor: pointer; border: none; /* Eliminar el borde de Bootstrap */ opacity: 1; transition: background-color 0.3s; /* Asegurar que el punto sea un botón válido para Bootstrap */ box-sizing: content-box; flex: 0 1 auto; padding: 0; margin: 0 3px; /* Remover el padding/margin extra de Bootstrap */ } .hero-dot.active { background-color: var(--color-blanco); } /* Media Query para el contenido del carrusel en móviles (Se mantiene) */ @media (max-width: 767.98px) { .hero-carousel-container { height: 400px; } .carousel-item.hero-slide { height: 400px; } .carousel-item.hero-slide img { height: 400px; } .carrusel-info { right: 50%; transform: translate(50%, -50%); text-align: center; width: 90%; max-width: none; } .carrusel-info h2 { font-size: 1.8em; } .carrusel-info p:first-child { margin-left: auto; margin-right: auto; } .carrusel-info-left { display: none; /* Ocultar en móviles para no saturar */ } } /* ---------------------------------------------------- */ /* SECCIÓN 1.2: FRASE DEBAJO DEL CARRUSEL (INTRO TEXT) */ /* ---------------------------------------------------- */ .intro-text-section { /* Se asegura un buen margen superior para separarse del carrusel */ max-width: 1200px; margin: 40px auto; padding: 0 20px; text-align: center; } .intro-text { font-size: 2em; line-height: 1.2; color: var(--color-azul); } /* Frase debajo de imagen, mezcla - extrabold y semibold */ .intro-text .extra-bold { font-weight: 800; /* Extra-bold */ background-color: var(--color-celeste); color: var(--color-azul); /* Texto Azul sobre Celeste */ padding: 5px 10px; display: inline-block; } .intro-text .semi-bold { font-weight: 600; /* Semi-bold */ } .intro-text .blue-text { color: var(--color-azul); } @media (max-width: 767.98px) { .intro-text { font-size: 1.5em; } } /* ---------------------------------------------------- */ /* SECCIÓN CARRUSEL DE TESTIMONIOS (testimonials-section)*/ /* ---------------------------------------------------- */ .testimonials-section { background-color: var(--color-fondo-testimonios); padding: 60px 0 100px; /* Más padding abajo para los indicadores */ text-align: center; position: relative; } .testimonials-section h2 { font-size: 2.5em; font-weight: 800; /* Extra Bold para título de clientes */ color: var(--color-azul-oscuro-titulo); margin-bottom: 5px; } .testimonials-section h2 span { background-color: var(--color-resalte-texto-rosa); /* Usualmente Celeste */ padding: 5px 15px; border-radius: 5px; display: inline-block; color: var(--color-blanco); } .testimonials-section h3 { font-size: 2em; color: var(--color-resalte-texto-rosa); /* Usualmente Celeste */ margin-bottom: 40px; } /* Contenedor dentro del ítem del carrusel */ .carousel-item .row { padding: 0 50px; justify-content: center; align-items: stretch; } /* Estilo para las tarjetas de testimonio */ .testimonial-card { background-color: var(--color-blanco); border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); position: relative; margin: 20px 0; overflow: hidden; display: flex; flex-direction: column; height: 450px; } .testimonial-card .client-photo-container { width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: 15px; flex-shrink: 0; display: flex; align-items: flex-end; } .testimonial-card .comment-bubble { background-color: var(--color-burbuja-comentario-blanco); border-radius: 10px; padding: 15px 20px; position: relative; width: 90%; margin: 0 auto 20px auto; text-align: left; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* Punta de la burbuja de comentario */ .testimonial-card .comment-bubble::before { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--color-burbuja-comentario-blanco); position: absolute; top: -10px; left: 50%; transform: translateX(-50%); } .testimonial-card .client-name { font-weight: 700; /* Bold para nombre de cliente */ color: var(--color-azul-oscuro-titulo); margin-bottom: 5px; font-size: 1.1em; text-align: center; } .testimonial-card .client-comment { font-size: 0.9em; color: var(--color-texto-principal); margin-bottom: 10px; line-height: 1.4; } .testimonial-card .client-origin { font-size: 0.8em; text-align: center; margin-top: 5px; margin-bottom: 0; } /* Flechas de navegación del carrusel */ .carousel-control-prev, .carousel-control-next { width: 50px; } .carousel-control-prev-icon, .carousel-control-next-icon { background-image: none; } /* (Estos .carousel-control-prev-icon::before no se usan en el Hero Carousel, pero sí en este) */ .testimonials-section .carousel-control-prev-icon::before, .testimonials-section .carousel-control-next-icon::before { font-size: 2.5rem; color: var(--color-turquesa-fondo); /* Usualmente Celeste */ background-color: var(--color-blanco); border-radius: 50%; padding: 5px 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); display: inline-block; } .testimonials-section .carousel-control-prev-icon::before { content: "❮"; } .testimonials-section .carousel-control-next-icon::before { content: "❯"; } /* Indicadores del carrusel */ .testimonials-section .carousel-indicators { bottom: -30px; /* Lo bajamos aún más */ margin-bottom: 0; } .testimonials-section .carousel-indicators [data-bs-target] { background-color: var(--color-azul-oscuro-titulo); width: 12px; height: 12px; border-radius: 50%; margin: 0 7px; opacity: 0.5; } .testimonials-section .carousel-indicators .active { opacity: 1; background-color: var(--color-turquesa-claro); /* Usualmente Celeste */ } /* Media Queries para responsividad (Se mantienen los tuyos) */ @media (max-width: 991.98px) { .testimonials-section { padding-bottom: 80px; } .carousel-item .col-md-6:nth-child(2), .carousel-item .col-sm-12:nth-child(2), .carousel-item .col-md-6:nth-child(3), .carousel-item .col-sm-12:nth-child(3) { display: none; } .carousel-item .col-lg-4, .carousel-item .col-md-6 { flex: 0 0 100%; max-width: 100%; } .carousel-item .row { padding: 0 20px; } .testimonial-card { height: 400px; } } @media (min-width: 768px) and (max-width: 991.98px) { /* Opcional: Mostrar 2 en tablet si se desea */ } /* ---------------------------------------------------- */ /* SECCIÓN CALL TO ACTION (CTA) */ /* ---------------------------------------------------- */ .cta-section { /* 🔥 AJUSTE CLAVE: Margen superior para separarse de la sección de testimonios */ margin-top: 60px; /* Margen inferior para separarse del footer */ margin-bottom: 0; /* Lo dejo en 0, el footer podría manejar su propio padding/margin superior si es necesario */ background-color: var(--color-turquesa-fondo); /* Usualmente Celeste */ padding: 0; overflow: hidden; } .cta-container { display: flex; align-items: flex-end; padding: 0 15px; } .cta-section .modelo-imagen { flex-shrink: 0; max-width: 450px; height: auto; position: relative; left: calc(-15px); } .cta-section .modelo-imagen img { width: 100%; height: auto; display: block; } .cta-section .content-bubble { background-color: var(--color-blanco); border-radius: 15px; padding: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); position: relative; max-width: 550px; color: var(--color-texto-principal); margin: 50px 0 50px 20px; flex-grow: 1; } .cta-section .content-bubble::before { content: ''; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid var(--color-blanco); position: absolute; left: -25px; top: 50%; transform: translateY(-50%); } .cta-section .title-container { background-color: var(--color-azul-oscuro-titulo); color: var(--color-blanco); padding: 15px; margin: -25px -25px 25px -25px; border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; } .cta-section .title-container h2 { font-size: 1.5em; margin: 0; font-weight: 600; /* Semi-bold */ } .cta-section .title-container span { background-color: rgba(242, 242, 242, 0.8); color: var(--color-azul-oscuro-titulo); padding: 2px 10px; display: inline-block; font-weight: 800; /* Extra Bold para título de anuncio */ } .cta-section h3 { font-size: 1.2em; color: var(--color-azul-oscuro-titulo); margin: 0 0 15px 0; font-weight: 600; /* Semi-bold para subtítulo de anuncio */ } .cta-section ul { list-style: none; padding: 0; margin-bottom: 30px; } .cta-section ul li { font-size: 1em; margin-bottom: 10px; padding-left: 30px; position: relative; color: var(--color-texto-principal); font-weight: 500; /* Medium para interior de anuncio */ } .cta-section ul li::before { content: '✓'; color: var(--color-turquesa-fondo); /* Usualmente Celeste */ font-weight: bold; position: absolute; left: 0; font-size: 1.2em; } .cta-section .solicitar-btn { display: block; background-color: var(--color-naranja-boton); /* Usualmente Amarillo */ color: var(--color-azul-oscuro-titulo); /* Texto Azul sobre botón Amarillo */ padding: 15px 25px; text-align: center; text-decoration: none; border-radius: 5px; font-size: 1.2em; font-weight: 800; /* Extra Bold para botón de anuncio */ border: none; cursor: pointer; transition: background-color 0.3s; } .cta-section .solicitar-btn:hover { background-color: #e69d00; /* Tono más oscuro de Amarillo/Naranja */ } /* Media Queries CTA (Se mantienen los tuyos) */ @media (max-width: 991.98px) { .cta-container { flex-direction: column; align-items: center; padding: 40px 15px; } .cta-section .modelo-imagen { max-width: 60%; margin-left: 0; position: static; left: auto; align-self: center; } .cta-section .content-bubble { margin: 20px 0 0 0; } .cta-section .content-bubble::before { display: none; } } /* ---------------------------------------------------- */ /* SECCIÓN 2: TEXTO INTRODUCTORIO Y FORMULARIO */ /* ---------------------------------------------------- */ .intro-text-section { padding: 80px 0; background-color: var(--color-blanco); display: flex; justify-content: center; } .intro-container { display: flex; /* Habilita el diseño de dos columnas */ max-width: 1200px; width: 90%; gap: 50px; /* Espacio entre el texto y el formulario */ align-items: center; /* Centrado vertical */ } /* Columna 1: Contenido de Texto */ .intro-content { flex: 1; /* Ocupa el espacio disponible */ max-width: 600px; } /* -------------------------------------- */ /* ESTILOS DE TIPOGRAFÍA Y COLOR (Texto) */ /* -------------------------------------- */ /* Estilos de Color (usando variables) */ .text-azul { color: var(--color-azul); } .text-amarillo { color: var(--color-amarillo); } /* Estilos de Peso de Fuente */ .text-extra-bold { font-weight: 800; } /* Extra Bold */ .text-semi-bold { font-weight: 600; } /* Semi-bold */ /* Títulos */ .intro-title-line1, .intro-title-line2 { font-size: 2.5em; line-height: 1.1; } .intro-title-line1 { margin-bottom: 5px; } .intro-title-line2 { margin-bottom: 25px; } /* Párrafo descriptivo (interior - medium) */ .intro-text-description { font-size: 1.1em; font-weight: 500; /* Medium */ line-height: 1.5; margin-bottom: 30px; color: #333; } /* Botón "CONOCE ALBEC" (botones - extrabold) */ .btn-intro { display: inline-block; background-color: var(--color-amarillo); color: var(--color-azul); padding: 15px 35px; border-radius: 5px; font-weight: 800; /* Extra Bold */ text-transform: uppercase; text-decoration: none; transition: background-color 0.3s; } .btn-intro:hover { background-color: #e69d00; } /* -------------------------------------- */ /* COLUMNA 2: FORMULARIO */ /* -------------------------------------- */ .intro-form-container { flex: 0 0 350px; /* Ancho fijo para el formulario, no se reduce */ display: flex; justify-content: flex-end; } .intro-form { width: 100%; max-width: 350px; background-color: var(--color-azul); /* Fondo Azul (Según la imagen) */ border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); overflow: hidden; } .intro-form .form-header { background-color: var(--color-celeste); /* Título del formulario en Celeste */ color: var(--color-azul); padding: 15px 20px; text-align: center; } .intro-form h4 { font-size: 1.2em; font-weight: 900; /* Black (según recurso) */ margin: 0; } .intro-form form { padding: 20px; } .intro-form .form-control { border-radius: 5px; font-weight: 500; /* Medium */ } /* Botón de envío (botones - extrabold) */ .intro-form .btn-form-submit-intro { background-color: var(--color-amarillo); color: var(--color-azul); font-weight: 800; /* Extra Bold */ padding: 10px 20px; border: none; transition: background-color 0.3s; } .intro-form .btn-form-submit-intro:hover { background-color: #e69d00; } .intro-form .form-disclaimer-intro { font-size: 0.8em; color: var(--color-blanco); /* Texto de disclaimer en blanco sobre fondo azul */ margin-top: 10px; text-align: center; font-weight: 500; /* Medium */ } /* -------------------------------------- */ /* MEDIA QUERIES (Responsividad) */ /* -------------------------------------- */ @media (max-width: 991.98px) { .intro-container { flex-direction: column; /* Apila el contenido en móvil */ gap: 40px; } .intro-content { text-align: center; max-width: 100%; } .intro-form-container { flex: 1 1 auto; /* Permite que el contenedor del formulario ocupe el ancho */ justify-content: center; /* Centra el formulario */ } .intro-title-line1, .intro-title-line2 { font-size: 2em; } } /* ---------------------------------------------------- */ /* SECCIÓN 3: BANNER CON FORMULARIO COMPLETO */ /* ---------------------------------------------------- */ .banner-form-section { padding: 60px 0; /* Color de fondo del banner (Usaremos Azul Oscuro) */ background-color: var(--color-azul); display: flex; justify-content: center; } .banner-form-container { display: flex; /* Habilita el diseño de dos columnas */ max-width: 1200px; width: 90%; gap: 40px; /* Espacio entre el texto y el formulario */ align-items: center; /* Centrado vertical */ } /* -------------------------------------- */ /* TEXTO DE LA IZQUIERDA */ /* -------------------------------------- */ .banner-text-content { flex: 1; /* Ocupa el espacio disponible */ } .banner-text-content h2 { font-size: 3.5em; /* Tamaño grande para el título */ line-height: 1; margin-bottom: 5px; } .banner-subtitle { font-size: 2em; line-height: 1; } /* -------------------------------------- */ /* FORMULARIO DE LA DERECHA */ /* -------------------------------------- */ .banner-form-wrapper { flex: 0 0 500px; /* Ancho fijo para el formulario (500px) */ background-color: var(--color-blanco); /* Fondo Blanco */ border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } .form-title-bar { background-color: var(--color-celeste); /* Barra de título en Celeste */ padding: 15px 20px; text-align: center; } .form-title-bar h4 { font-weight: 900; /* Black */ font-size: 1.2em; color: var(--color-azul); /* Texto del título en Azul */ margin: 0; } .banner-form { padding: 30px; } .banner-form .form-control, .banner-form .form-select { height: 45px; border-radius: 5px; font-weight: 500; /* Medium */ border: 1px solid #ccc; color: #333; } /* Botón de Envío */ .btn-banner-submit { /* Estilo del botón: extrabold, según recurso */ background-color: var(--color-amarillo); color: var(--color-azul); font-weight: 800; /* Extra Bold */ padding: 10px 20px; border: none; transition: background-color 0.3s; } .btn-banner-submit:hover { background-color: #e69d00; } /* -------------------------------------- */ /* MEDIA QUERIES (Responsividad) */ /* -------------------------------------- */ @media (max-width: 991.98px) { .banner-form-section { padding: 40px 0; } .banner-form-container { flex-direction: column; /* Apila el contenido en móvil */ gap: 30px; } .banner-text-content { text-align: center; } .banner-text-content h2 { font-size: 2.5em; } .banner-subtitle { font-size: 1.5em; } .banner-form-wrapper { flex: 1 1 100%; /* El formulario ocupa todo el ancho */ max-width: 90%; } .banner-form { padding: 20px; } } /* -------------------------------------- */ /* ESTILOS ADICIONALES PARA EL FORMULARIO DE SECCIÓN 3 */ /* -------------------------------------- */ /* Estilo para los labels de los checkboxes */ .banner-form .form-check-label { font-size: 0.9em; font-weight: 500; /* Medium */ color: var(--color-azul); /* Texto en Azul Oscuro */ } /* Estilo para los enlaces de Términos y Políticas */ .banner-form .link-legal { color: var(--color-celeste); /* El enlace en color Celeste */ font-weight: 600; /* Semi-bold para destacarlo */ text-decoration: none; transition: color 0.3s; } .banner-form .link-legal:hover { color: var(--color-azul); text-decoration: underline; } /* Estilo para el ícono del checkbox de Bootstrap */ .banner-form .form-check-input:checked { background-color: var(--color-celeste); /* Checkbox marcado en Celeste */ border-color: var(--color-celeste); } .banner-form .form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(0, 159, 181, 0.25); /* Sombra de foco en Celeste */ } /* ==================================================== */ /* ESTILOS DEL NUEVO FOOTER */ /* ==================================================== */ .footer-albec-new { background-color: var(--color-celeste); /* Fondo turquesa oscuro */ color: white; width: 100%; box-sizing: border-box; margin-top: auto; /* Empuja el footer hacia abajo */ font-family: 'Montserrat', sans-serif; /* Asegura la fuente */ } .footer-main-content-new { padding: 60px 0; /* Mayor padding vertical */ border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Divisor más sutil */ } .footer-col { /* Base para las columnas del footer */ padding: 0 15px; /* Espaciado interno */ } /* Columna del Logo */ .footer-logo-col { flex: 1 1 300px; /* Base ancha, permite reducir */ display: flex; flex-direction: column; align-items: flex-start; /* Alinear el contenido a la izquierda */ text-align: left; } .footer-logo-col img { max-width: 200px; /* Tamaño del logo */ height: auto; } .footer-slogan { font-size: 1.1rem; font-weight: 500; margin-top: 10px; opacity: 0.9; } /* Columna de Navegación */ .footer-nav-col { flex: 1 1 200px; /* Ancho fijo para la navegación */ display: flex; flex-direction: column; gap: 8px; /* Espacio entre enlaces */ } .footer-nav-col a { color: white; text-decoration: none; font-weight: 600; /* Semibold */ font-size: 0.95rem; padding: 5px 10px; background-color: #009fb5; /* Fondo sutil para enlaces */ border-radius: 5px; transition: background-color 0.3s ease; width: fit-content; /* Se ajusta al ancho del texto */ } .footer-nav-col a:hover { background-color: rgba(255, 255, 255, 0.25); } /* Columna de Contacto */ .footer-contact-col { flex: 1 1 350px; /* Un poco más ancha para el texto de dirección */ text-align: left; } .footer-section-title { font-weight: 700; /* Bold */ font-size: 1.1rem; margin-bottom: 15px; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; display: inline-block; } .footer-contact-col p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 15px; opacity: 0.9; } .footer-location-tag { background-color: var(--color-amarillo); /* Color amarillo */ color: var(--color-azul); /* Texto azul oscuro */ padding: 8px 15px; border-radius: 5px; font-weight: 700; /* Bold */ font-size: 0.95rem; display: inline-block; /* Ajusta el ancho al contenido */ margin-bottom: 20px; } .footer-phone { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; } .footer-phone i { font-size: 1.5rem; color: var(--color-amarillo); /* Icono de teléfono amarillo */ } .footer-social-icons { display: flex; gap: 15px; /* Espacio entre íconos */ } .social-icon { width: 35px; /* Tamaño de los íconos */ height: 35px; transition: transform 0.2s ease; } .social-icon:hover { transform: translateY(-3px); /* Pequeño efecto hover */ } /* Footer Bottom (Información Legal) */ .footer-bottom-new { padding: 20px 0; font-size: 0.85rem; opacity: 0.8; } .footer-bottom-new p { margin-bottom: 0; } /* Media Queries para Responsividad */ @media (max-width: 991.98px) { .footer-main-content-new .container { flex-direction: column; /* Apila las columnas */ align-items: center; text-align: center; } .footer-col { margin-bottom: 30px; /* Espacio entre columnas apiladas */ padding: 0; /* Quita padding horizontal */ width: 100%; max-width: 400px; /* Limita el ancho de las columnas */ } .footer-logo-col, .footer-nav-col, .footer-contact-col { align-items: center; /* Centrar contenido apilado */ text-align: center; } .footer-nav-col a { width: auto; /* Permite que los enlaces se centren */ } .footer-section-title, .footer-location-tag { margin-left: auto; margin-right: auto; } } @media (max-width: 575.98px) { .footer-main-content-new { padding: 40px 0; } .footer-logo-col img { max-width: 150px; } .footer-slogan { font-size: 1rem; } .footer-nav-col a { font-size: 0.9rem; } .footer-phone span { font-size: 1.1rem; } .social-icon { width: 30px; height: 30px; } } /* ==================================================== */ /* FIN: CONTENIDO DE style01.css (PROPORCIONADO) */ /* ==================================================== */ /* ==================================================== */ /* INICIO: ESTILOS DE "NOSOTROS" (ADAPTADOS) */ /* ==================================================== */ /* --- Estilos Generales --- */ .bg-light { background-color: var(--color-blanco-albec) !important; } .text-albec-teal { color: var(--color-celeste) !important; } .text-albec-orange { color: var(--color-amarillo) !important; } .bg-albec-teal { background-color: var(--color-celeste); } .bg-albec-orange { background-color: var(--color-amarillo); } /* --- Títulos de Sección --- */ .section-title { text-align: center; font-weight: 700; margin-bottom: 3rem; text-transform: uppercase; } .section-title.text-white { color: white !important; } /* Asegura que el .section-title dentro de #quienes-somos tenga margen inferior */ #quienes-somos .section-title { margin-bottom: 1.5rem; } .title-bar { display: inline-block; padding: 0.6rem 2rem; border-radius: 50px; /* Bordes redondeados */ font-weight: 700; font-size: 1.75rem; color: white; } .title-bar.bg-albec-orange { color: var(--color-azul); /* Texto oscuro sobre fondo amarillo */ } /* --- Sección: Quiénes Somos (Corregida) --- */ .experiencia-box { padding-top: 1rem; } .experiencia-line { border: 0; border-top: 4px solid var(--color-amarillo); opacity: 1; width: 70%; margin: 0 auto 1rem auto; } .experiencia-box .h4 { color: var(--color-texto-principal) !important; font-weight: 600; } /* --- Sección: Misión y Visión (Re-agregada y Ajustada) --- */ #mision-vision { /* El .bg-albec-teal ya le da el color */ /* La imagen 5-100.jpg muestra un borde redondeado grande */ border-radius: 30px; margin-top: -30px; /* Traslape ligero para unir visualmente */ position: relative; /* Para el z-index */ z-index: 10; /* Para que esté sobre el fondo blanco de la sección siguiente */ } /* Divisor vertical para escritorio (ahora posicionado) */ .vision-divider { border-left: 2px solid rgba(242, 242, 242, 0.5); /* Usa el nuevo blanco */ height: 100%; position: absolute; left: 0; top: 0; } /* Divisor horizontal para móvil */ .vision-divider-mobile { border-top: 2px solid rgba(242, 242, 242, 0.5); /* Usa el nuevo blanco */ height: auto; width: 50%; margin: 0 auto 2rem auto; /* Espacio antes del título Visión */ } /* Quitar redondeo y traslape en móviles */ @media (max-width: 767.98px) { #mision-vision { border-radius: 0; margin-top: 0; } } /* --- (NUEVO) Contenedor para Objetivos y Pilares --- */ .rounded-container-teal { background-color: var(--color-celeste); border-radius: 30px; /* Borde redondeado grande como en la imagen */ padding: 2rem; position: relative; z-index: 5; /* Asegura que esté detrás de mision-vision si se traslapan */ } /* --- Sección: Objetivos (AJUSTADA) --- */ .objetivo-card { background-color: #ffffff; /* Mantenemos blanco puro para tarjetas */ padding: 1.5rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); height: 100%; text-align: center; } .objetivo-title { display: inline-block; background-color: var(--color-blanco-albec); /* Fondo gris claro (nuevo blanco) */ border-radius: 50px; padding: 0.4rem 1.5rem; font-size: 1.1rem; font-weight: 600; color: var(--color-azul); margin-bottom: 1rem; } /* --- Sección: Pilares (AJUSTADA) --- */ .pillar-item i { font-size: 3.5rem; line-height: 1; } /* Estilos para cuando los pilares están sobre fondo celeste */ .pillar-item-white h4 { color: white !important; font-weight: 600; font-size: 1.25rem; } .pillar-item-white .icon-teal { color: rgb(192, 17, 17) !important; /* Icono de confianza y compromiso en blanco */ } .pillar-item-white .icon-orange { color: var(--color-amarillo); /* Icono de innovación y calidad en amarillo */ } /* Estilos para cuando los pilares están sobre fondo blanco (Default) */ .pillar-item h4 { color: var(--color-texto-principal); font-weight: 600; font-size: 1.25rem; } .pillar-item .icon-teal { color: var(--color-celeste); } .pillar-item .icon-orange { color: var(--color-amarillo); } /* --- Sección: Líderes --- */ .leader-card { text-align: center; } .leader-placeholder { width: 100%; max-width: 250px; /* Tamaño máximo */ aspect-ratio: 1 / 1; /* Cuadrado */ background-color: var(--color-blanco-albec); border: 7px solid var(--color-celeste); border-radius: 15px; margin: 0 auto 1rem auto; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* --- Sección: Sedes --- */ .sedes-list { list-style: none; padding-left: 0; } .sedes-list li { position: relative; padding-left: 2.2rem; margin-bottom: 1rem; font-size: 1.1rem; } .sedes-list li i { position: absolute; left: 0; top: 4px; color: var(--color-celeste); font-size: 1.5rem; } .map-placeholder { width: 100%; height: 100%; min-height: 350px; background-color: var(--color-blanco-albec); border: 3px dashed var(--color-celeste); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #aaa; font-weight: 500; } /* --- Sección: Contacto --- */ .contact-item { text-align: center; background-color: #ffffff; /* Blanco puro para tarjetas */ padding: 1.5rem; border-radius: 10px; height: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .contact-item i { font-size: 3rem; color: var(--color-amarillo); margin-bottom: 1rem; } .contact-item h5 { min-height: 2.5em; /* Asegura altura similar para los títulos */ font-weight: 600; } .contact-item p { color: var(--color-texto-principal); margin-bottom: 0; } /* --- Footer (Estilos del footer original, ahora dentro del .footer-bottom) --- */ .footer-logo-albec { font-size: 2rem; font-weight: 900; color: var(--color-azul); letter-spacing: -1px; } .footer-logo-sub { font-size: 1.2rem; font-weight: 300; color: var(--color-celeste); display: block; margin-top: -12px; letter-spacing: 1px; } /* Texto "Es un producto..." ahora es más claro sobre fondo celeste */ .text-muted-footer { color: rgba(242, 242, 242, 0.8) !important; } .footer-logo-parcelas { font-size: 1.8rem; font-weight: 800; color: var(--color-blanco-albec); /* Texto blanco sobre fondo celeste */ letter-spacing: 1px; } .footer-logo-sub-green { font-size: 1rem; font-weight: 400; color: var(--albec-green); background-color: var(--albec-green); color: white; padding: 0 5px; border-radius: 3px; display: inline-block; margin-left: 5px; } .footer-ruc { font-size: 0.9rem; color: var(--color-blanco-albec); /* Texto blanco sobre fondo celeste */ margin-top: 1rem; } /* 1. Ocultar el submenú por defecto */ .submenu { display: none; position: absolute; /* Permite que el submenú flote sobre el contenido */ list-style: none; /* Quita los puntos de la lista */ padding: 0; margin: 0; /* Estilos básicos para el fondo y borde del submenú */ background-color: white; border: 1px solid #ccc; z-index: 10; /* Asegura que esté por encima de otros elementos */ } /* 2. Posicionar el submenú correctamente */ .has-submenu { position: relative; /* Es clave para que 'position: absolute' del submenú funcione correctamente */ } /* 3. Mostrar el submenú al pasar el ratón (hover) */ .has-submenu:hover .submenu { display: block; } /* Opcional: Estilos para que los elementos del submenú se vean mejor */ .submenu-item a { padding: 10px 15px; display: block; white-space: nowrap; /* Evita que el texto de los nombres largos se rompa */ } /* Estilos para la nueva lista de proyectos en el footer */ .footer-projects-list { list-style: none; /* Elimina las viñetas */ padding: 0; /* Elimina el padding por defecto de las listas */ margin-top: 5px; /* Pequeño espacio debajo del título PROYECTOS */ margin-bottom: 15px; /* Espacio antes de los siguientes enlaces */ } .footer-projects-list a { /* Puedes aplicar estilos similares a tus enlaces existentes */ display: block; /* Asegura que cada enlace ocupe su propia línea */ margin-bottom: 5px; /* Espacio entre cada proyecto */ text-decoration: none; /* Asegúrate que el color de texto sea el mismo que los otros enlaces */ /* Ejemplo: color: #FFFFFF; */ } /* Oculta la lista de proyectos por defecto */ #listaProyectos { display: none; list-style: none; padding: 0; margin: 0; } .telefono { display: flex; align-items: center; gap: 10px; font-size: 1em; } .telefono img { width: 30px; height: 30px; vertical-align: middle; } .telefono .numero { padding: 5px 10px; background-color: var(--color-turquesa-claro); /* Ahora Celeste */ color: var(--color-turquesa-fondo); /* Ahora Celeste (se mantiene el contraste con el fondo Celeste) */ font-weight: bold; } .redes-sociales { display: flex; gap: 15px; } .redes-sociales img { width: 30px; height: 30px; vertical-align: middle; }