/* ================================================== HERO EMPRESA ================================================== */ .hero-rjl{ width:100%; /* Ocupa todo el ancho de la pantalla */ min-height:500px; /* Altura del Hero */ display:flex; /* Activa Flexbox */ justify-content:center; /* Centra horizontalmente */ align-items:center; /* Centra verticalmente */ padding:120px 20px; /* Espacio superior e inferior */ background: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), url("../img/empresa/empresa.png"); background-repeat:no-repeat; /* Evita repetir la imagen */ background-position:center center; /* Centra la imagen */ background-size:cover; /* Cubre todo el Hero */ } /* ================================================== CONTENEDOR DEL HERO ================================================== */ .hero-rjl-contenido{ width:100%; /* Ocupa todo el ancho disponible */ max-width:900px; /* Limita el ancho del contenido */ margin:auto; /* Centra el bloque */ text-align:center; /* Centra el texto */ } /* ================================================== ETIQUETA SUPERIOR ================================================== */ .hero-rjl-etiqueta{ color:#F5E6C8; font-size:1.10rem; font-weight:700; letter-spacing:6px; text-transform:uppercase; margin-bottom:2px; text-shadow:0 2px 8px rgba(0,0,0,.35); } /* ================================================== TÍTULO PRINCIPAL ================================================== */ .hero-rjl-titulo{ color:#ffffff; /* Blanco */ font-size:4rem; /* Tamaño del título */ font-weight:800; /* Muy grueso */ text-transform:uppercase; /* Mayúsculas */ letter-spacing:2px; /* Separación entre letras */ margin-bottom:25px; /* Espacio inferior */ line-height:1.1; /* Altura entre líneas */ } /* ================================================== TEXTO DESCRIPTIVO ================================================== */ .hero-rjl-descripcion{ max-width:760px; /* Limita el ancho del texto */ margin:auto; /* Centra el texto */ color:#f5f5f5; /* Blanco suave */ font-size:1.25rem; /* Tamaño del texto */ font-weight:400; /* Grosor normal */ line-height:1.8; /* Separación entre líneas */ } /* ================================================== TABLET ================================================== */ @media (max-width:992px){ .hero-rjl{ min-height:420px; /* Reduce la altura */ padding:100px 20px; /* Reduce el espacio */ } .hero-rjl-titulo{ font-size:3.2rem; /* Reduce el tamaño del título */ } } /* ================================================== MÓVIL ================================================== */ @media (max-width:768px){ .hero-rjl{ min-height:360px; /* Hero más compacto */ padding:80px 20px; /* Reduce el espacio */ } .hero-rjl-etiqueta{ font-size:1rem; /* Reduce la etiqueta */ letter-spacing:5px; /* Menor separación */ } .hero-rjl-titulo{ font-size:2.4rem; /* Reduce el título */ } .hero-rjl-descripcion{ font-size:1rem; /* Reduce el texto */ line-height:1.7; /* Mantiene buena lectura */ } } /* ================================================== SECCIÓN QUIÉNES SOMOS ================================================== */ .rjl-quienes{ width:100%; /* Ocupa todo el ancho */ padding:90px 20px 40px; /* Arriba 90px, laterales 20px y abajo solo 40px */ background:#ffffff; /* Fondo blanco */ } /* ================================================== CONTENEDOR PRINCIPAL ================================================== */ .rjl-quienes-contenedor{ max-width:1300px; /* Ancho máximo */ margin:0 auto; /* Centra la sección */ display:flex; /* Activa Flexbox */ justify-content:space-between; /* Separa imagen y texto */ align-items:center; /* Centra verticalmente */ gap:80px; /* Espacio entre columnas */ } /* ================================================== COLUMNA IMAGEN ================================================== */ .rjl-quienes-imagen{ flex:1; /* Ocupa una columna */ } .rjl-quienes-imagen img{ width:100%; /* Ocupa todo el ancho */ display:block; /* Elimina espacios */ border-radius:18px; /* Esquinas redondeadas */ box-shadow:0 15px 40px rgba(0,0,0,.18); /* Sombra elegante */ } /* ================================================== COLUMNA TEXTO ================================================== */ .rjl-quienes-info{ flex:1; /* Ocupa una columna */ } /* ================================================== TÍTULO PEQUEÑO ================================================== */ .rjl-quienes-etiqueta{ color:#c62828; /* Rojo corporativo */ font-size:1.60rem; /* Más grande */ font-weight:700; /* Negrita */ letter-spacing:6px; /* Separación entre letras */ text-transform:uppercase; /* Mayúsculas */ margin-bottom:15px; /* Espacio inferior */ } /* ================================================== CONTENEDOR PRINCIPAL ================================================== */ .rjl-valores-contenedor{ width:100%; /* Ocupa todo el ancho */ max-width:1200px; /* Ancho máximo */ margin:0 auto; /* Centra todo el contenido */ padding:0 20px; /* Margen lateral */ text-align:center; /* Centra títulos y texto */ } /* ================================================== TÍTULO PRINCIPAL ================================================== */ .rjl-quienes-titulo{ color:#222222; /* Negro */ font-size:1.30rem; /* Más pequeño */ font-weight:700; /* Negrita */ line-height:1.20; /* Separación entre líneas */ margin-top:12px; /* Baja el título respecto al rojo */ margin-bottom:20px; /* Espacio inferior */ } /* ================================================== PÁRRAFOS ================================================== */ .rjl-quienes-texto{ color:#555555; /* Gris oscuro */ font-size:0.98rem; line-height:1.65; /* Muy cómodo de leer */ margin-bottom:25px; /* Separación */ } /* ================================================== TABLET ================================================== */ @media(max-width:992px){ .rjl-quienes-contenedor{ flex-direction:column; /* Imagen arriba */ gap:50px; /* Reduce separación */ } } /* ================================================== MÓVIL ================================================== */ @media(max-width:768px){ .rjl-quienes{ padding:70px 20px; /* Menos espacio */ } .rjl-quienes-etiqueta{ font-size:1.10rem; /* Reduce tamaño */ letter-spacing:5px; /* Menos separación */ } .rjl-quienes-titulo{ font-size:1.90rem; /* Título adaptable */ } .rjl-quienes-texto{ font-size:1rem; /* Texto adaptable */ } } /* ================================================== SECCIÓN NUESTROS VALORES ================================================== */ .rjl-valores{ width:100%; /* Ocupa todo el ancho */ padding:30px 20px 40px; /* 30px arriba, 20px a los lados y solo 40px abajo */ background:#ffffff; /* Fondo blanco */ } /* ================================================== CONTENEDOR PRINCIPAL ================================================== */ .rjl-valores-contenedor{ max-width:1200px; /* Igual que el resto de la web */ margin:0 auto; /* Centra el contenido */ text-align:center; /* Centra todo */ } /* ================================================== TÍTULO ROJO ================================================== */ .rjl-valores-etiqueta{ color:#c62828; /* Rojo corporativo */ font-size:1.60rem; /* Más grande que el título negro */ font-weight:700; /* Negrita */ letter-spacing:6px; /* Separación entre letras */ text-transform:uppercase; /* Mayúsculas */ margin-bottom:15px; /* Espacio inferior */ } /* ================================================== TÍTULO PRINCIPAL ================================================== */ .rjl-valores-titulo{ color:#222222; /* Negro */ font-size:2rem; /* Más pequeño que el rojo */ font-weight:700; /* Negrita */ line-height:1.15; /* Poco espacio entre líneas */ margin-bottom:20px; /* Espacio inferior */ } /* ================================================== TEXTO INTRODUCTORIO ================================================== */ .rjl-valores-intro{ max-width:700px; /* Limita el ancho */ margin:0 auto 20px auto; /* Antes 35px */ color:#555555; font-size:1rem; line-height:1.6; } /* ================================================== CONTENEDOR DE LAS TARJETAS ================================================== */ .rjl-valores-grid{ display:grid; /* Activa CSS Grid */ grid-template-columns:repeat(3,1fr); /* Tres columnas iguales */ gap:25px; /* Espacio entre tarjetas */ margin-top:15px; /* Separación respecto al texto */ } /* ================================================== TARJETA ================================================== */ .rjl-valor{ background:#ffffff; /* Fondo blanco */ border:1px solid #e5e5e5; /* Borde gris */ border-top:4px solid #c62828; /* Línea roja fija */ border-radius:16px; /* Esquinas redondeadas */ padding:22px 18px; /* Espacio interior */ text-align:center; /* Centra el contenido */ transition:all .35s ease; /* Animación */ } /* ================================================== EFECTO AL PASAR EL RATÓN ================================================== */ .rjl-valor:hover{ transform:translateY(-8px); /* Sube ligeramente */ border-left:1px solid #c62828; /* Borde izquierdo rojo */ border-right:1px solid #c62828; /* Borde derecho rojo */ border-bottom:1px solid #c62828; /* Borde inferior rojo */ border-top:4px solid #c62828; /* Mantiene la línea superior */ box-shadow:0 15px 35px rgba(0,0,0,.15); /* Sombra */ } /* ================================================== ICONOS ================================================== */ .rjl-valor i{ font-size:2.30rem; /* Icono más pequeño */ color:#c62828; /* Rojo corporativo */ margin-bottom:18px; /* Espacio inferior */ } /* ================================================== TÍTULO DE LA TARJETA ================================================== */ .rjl-valor h3{ color:#222222; /* Negro */ font-size:1.20rem; /* Tamaño del título */ font-weight:700; /* Negrita */ margin-bottom:12px; /* Separación inferior */ } /* ================================================== TEXTO DE LA TARJETA ================================================== */ .rjl-valor p{ color:#555555; /* Gris oscuro */ font-size:.92rem; /* Tamaño del texto */ line-height:1.55; /* Altura entre líneas */ margin:0; /* Elimina márgenes */ } /* ================================================== TABLET ================================================== */ @media(max-width:992px){ .rjl-valores-grid{ grid-template-columns:repeat(2,1fr); /* Dos columnas */ gap:20px; /* Reduce separación */ } } /* ================================================== MÓVIL ================================================== */ @media(max-width:768px){ .rjl-valores-grid{ grid-template-columns:1fr; /* Una sola columna */ gap:18px; /* Espacio entre tarjetas */ } .rjl-valor{ padding:25px 20px; /* Reduce el relleno */ } .rjl-valor i{ font-size:2rem; /* Icono más pequeño */ } .rjl-valor h3{ font-size:1.10rem; /* Reduce el título */ } .rjl-valor p{ font-size:.90rem; /* Reduce el texto */ } } /* ================================================== SECCIÓN CÓMO TRABAJAMOS ================================================== */ .rjl-proceso{ width:100%; /* Ocupa todo el ancho de la pantalla */ padding:40px 20px 30px; /* 40px arriba, 20px a los lados y 40px abajo */ background:#f8f8f8; /* Fondo gris muy claro para diferenciar la sección */ } /* ================================================== CONTENEDOR PRINCIPAL ================================================== */ .rjl-proceso-contenedor{ max-width:1200px; /* Ancho máximo */ margin:0 auto; /* Centra la sección */ text-align:center; /* Centra todo el contenido */ } /* ================================================== TÍTULO ROJO ================================================== */ .rjl-proceso-etiqueta{ color:#c62828; /* Rojo corporativo */ font-size:1.60rem; /* Tamaño */ font-weight:700; /* Negrita */ letter-spacing:6px; /* Espaciado entre letras */ text-transform:uppercase; /* Mayúsculas */ margin-bottom:15px; /* Espacio inferior */ } /* ================================================== TÍTULO PRINCIPAL ================================================== */ .rjl-proceso-titulo{ color:#222222; /* Negro */ font-size:2rem; /* Tamaño */ font-weight:700; /* Negrita */ line-height:1.20; /* Altura entre líneas */ margin-bottom:20px; /* Espacio inferior */ } /* ================================================== TEXTO INTRODUCTORIO ================================================== */ .rjl-proceso-intro{ max-width:700px; /* Limita el ancho */ margin:0 auto 45px auto; /* Centra y separa de la imagen */ color:#555555; /* Gris oscuro */ font-size:1rem; /* Tamaño */ line-height:1.7; /* Lectura cómoda */ } /* ================================================== CONTENEDOR DE LA IMAGEN ================================================== */ .rjl-proceso-imagen{ max-width:900px; /* No ocupa toda la pantalla */ margin:0 auto; /* Centra la imagen */ } /* ================================================== IMAGEN ================================================== */ .rjl-proceso-imagen img{ width:100%; /* Ocupa todo el contenedor */ height:320px; /* Altura fija */ object-fit:cover; /* Recorta sin deformar */ display:block; /* Elimina espacios */ border-radius:18px; /* Esquinas redondeadas */ box-shadow:0 15px 35px rgba(0,0,0,.15); /* Sombra elegante */ transition:.35s ease; /* Animación suave */ } /* ================================================== EFECTO AL PASAR EL RATÓN ================================================== */ .rjl-proceso-imagen img:hover{ transform:scale(1.02); /* Ligero aumento */ } /* ================================================== TABLET ================================================== */ @media(max-width:992px){ .rjl-proceso-imagen{ max-width:100%; /* Aprovecha el ancho */ } } /* ================================================== MÓVIL ================================================== */ @media(max-width:768px){ .rjl-proceso{ padding:70px 20px; /* Reduce el espacio */ } .rjl-proceso-etiqueta{ font-size:1.20rem; /* Reduce tamaño */ letter-spacing:5px; /* Menos separación */ } .rjl-proceso-titulo{ font-size:1.90rem; /* Reduce el título */ } .rjl-proceso-imagen img{ height:230px; /* Imagen más baja en móvil */ } } /* ================================================== SECCIÓN DÓNDE ESTAMOS ================================================== */ .rjl-ubicacion{ width:100%; /* Ocupa todo el ancho */ padding:50px 20px 25px; /* Espacio superior e inferior */ background:#ffffff; /* Fondo blanco */ } /* ================================================== CONTENEDOR PRINCIPAL ================================================== */ .rjl-ubicacion-contenedor{ max-width:1200px; /* Ancho máximo */ margin:0 auto; /* Centra el contenido */ text-align:center; /* Centra los títulos */ } /* ================================================== TÍTULO ROJO ================================================== */ .rjl-ubicacion-etiqueta{ color:#c62828; /* Rojo corporativo */ font-size:1.60rem; /* Tamaño */ font-weight:700; /* Negrita */ letter-spacing:6px; /* Separación entre letras */ text-transform:uppercase; /* Mayúsculas */ margin-bottom:15px; /* Espacio inferior */ } /* ================================================== TÍTULO PRINCIPAL ================================================== */ .rjl-ubicacion-titulo{ color:#222222; /* Negro */ font-size:2rem; /* Tamaño */ font-weight:700; /* Negrita */ line-height:1.20; /* Altura entre líneas */ margin-bottom:20px; /* Espacio inferior */ } /* ================================================== TEXTO INTRODUCTORIO ================================================== */ .rjl-ubicacion-intro{ max-width:700px; /* Limita el ancho */ margin:0 auto 45px auto; /* Centra y separa del contenido */ color:#555555; /* Gris oscuro */ font-size:1rem; /* Tamaño */ line-height:1.7; /* Facilita la lectura */ } /* ================================================== INFORMACIÓN DE CONTACTO ================================================== */ .rjl-ubicacion-info{ display:flex; /* Activa Flexbox */ justify-content:center; /* Centra las tarjetas */ gap:35px; /* Espacio entre ellas */ flex-wrap:wrap; /* Baja en pantallas pequeñas */ margin-bottom:50px; /* Espacio antes del mapa */ } /* ================================================== TARJETA DE INFORMACIÓN ================================================== */ .rjl-dato{ flex:1; /* Reparte el espacio */ min-width:260px; /* Ancho mínimo */ max-width:340px; /* Ancho máximo */ background:#f8f8f8; /* Fondo gris muy claro */ border:1px solid #ececec; /* Borde suave */ border-radius:15px; /* Esquinas redondeadas */ padding:30px 25px; /* Espacio interior */ display:flex; /* Icono junto al texto */ align-items:flex-start; /* Alineación superior */ gap:18px; /* Espacio entre icono y texto */ text-align:left; /* Texto alineado a la izquierda */ transition:.35s ease; /* Animación */ } /* ================================================== EFECTO HOVER ================================================== */ .rjl-dato:hover{ transform:translateY(-6px); /* Sube ligeramente */ border-color:#c62828; /* Borde rojo */ box-shadow:0 12px 28px rgba(0,0,0,.12); /* Sombra */ } /* ================================================== ICONOS ================================================== */ .rjl-dato i{ color:#c62828; /* Rojo corporativo */ font-size:1.80rem; /* Tamaño */ margin-top:3px; /* Ajuste vertical */ } /* ================================================== TÍTULOS DE LAS TARJETAS ================================================== */ .rjl-dato h3{ color:#222222; /* Negro */ font-size:1.20rem; /* Tamaño */ margin-bottom:8px; /* Espacio inferior */ } /* ================================================== TEXTO DE LAS TARJETAS ================================================== */ .rjl-dato p{ color:#555555; /* Gris oscuro */ font-size:.95rem; /* Tamaño */ line-height:1.6; /* Lectura cómoda */ margin:0; /* Elimina márgenes */ } /* ================================================== MAPA ================================================== */ .rjl-mapa{ width:100%; /* Ocupa todo el ancho */ max-width:1100px; /* Ancho máximo */ height:500px; /* Altura del mapa */ margin:0 auto; /* Centra el mapa */ border-radius:18px; /* Esquinas redondeadas */ overflow:hidden; /* Recorta el iframe */ box-shadow:0 15px 35px rgba(0,0,0,.15); /* Sombra elegante */ } /* ================================================== IFRAME DEL MAPA ================================================== */ .rjl-mapa iframe{ width:100%; /* Ocupa todo el contenedor */ height:100%; /* Ocupa toda la altura */ border:none; /* Sin borde */ } /* ================================================== TABLET ================================================== */ @media(max-width:992px){ .rjl-ubicacion-info{ gap:20px; /* Reduce separación */ } } /* ================================================== MÓVIL ================================================== */ @media(max-width:768px){ .rjl-ubicacion{ padding:70px 20px; /* Reduce espacio */ } .rjl-ubicacion-etiqueta{ font-size:1.20rem; /* Reduce tamaño */ letter-spacing:5px; /* Menos separación */ } .rjl-ubicacion-titulo{ font-size:1.90rem; /* Reduce el título */ } .rjl-mapa{ height:320px; /* Reduce la altura del mapa */ } } /* ================================================== AJUSTES DE INTEGRACIÓN - EMPRESA ================================================== */ .rjl-quienes-imagen, .rjl-ubicacion-info, .rjl-mapa { min-width: 0; } .rjl-mapa iframe { display: block; width: 100%; border: 0; } @media (prefers-reduced-motion: reduce) { .rjl-valor, .rjl-paso, .rjl-quienes-imagen img { transition: none !important; } .rjl-valor:hover, .rjl-paso:hover, .rjl-quienes-imagen:hover img { transform: none !important; } }