/* ================================================== FOOTER ================================================== */ .footer{ background:#1f1f1f; color:#ffffff; padding:60px 20px 30px; } /*================================================== = CONTENEDOR DEL FOOTER = ==================================================*/ .footer .contenedor{ max-width:1200px; margin:0 auto; width:100%; } /* ================================================== CUADRÍCULA DEL FOOTER ================================================== */ .footer-grid{ display:grid; /* Activa CSS Grid */ grid-template-columns:repeat(4,1fr);/* Cuatro columnas */ gap:50px; /* Separación */ } /* ================================================== COLUMNAS DEL FOOTER ================================================== */ .footer-col{ display:flex; /* Activa Flexbox */ flex-direction:column; /* Elementos en columna */ } /* ================================================== TÍTULOS ================================================== */ .footer-col h3{ position:relative; /* Referencia para la línea */ display:inline-block; /* Ajusta el ancho al texto */ margin:0 0 30px; /* Separación inferior */ padding-bottom:12px; /* Espacio para la línea */ color:#ffffff; /* Color blanco */ font-size:1.8rem; /* Tamaño del título */ font-weight:700; /* Negrita */ } /* ================================================== LÍNEA ROJA ================================================== */ .footer-col h3::after{ content:""; position:absolute; left:0; bottom:0; width:70%; /* Longitud de la línea */ height:4px; /* Grosor */ background:var(--color-primario); border-radius:50px; } /* ================================================== PÁRRAFOS ================================================== */ .footer-col p{ display:flex; /* Icono y texto en la misma línea */ align-items:flex-start; /* Alinea arriba */ gap:12px; /* Separación */ margin:0 0 18px; /* Margen inferior */ color:#d1d5db; /* Gris claro */ font-size:0.95rem; /* Tamaño */ line-height:1.7; /* Altura de línea */ } /* ================================================== ICONOS DEL CONTACTO ================================================== */ .footer-col p i{ width:22px; /* Mismo ancho para todos */ color:#ffffff; /* Blanco */ font-size:1rem; /* Tamaño */ text-align:center; /* Centrado */ flex-shrink:0; /* No se encogen */ } /* ================================================== ENLACES ================================================== */ .footer-col a{ display:block; margin-bottom:14px; color:#d1d5db; text-decoration:none; transition:color .30s ease; } /* ================================================== REDES SOCIALES ================================================== */ .social-icons{ display:flex; /* Activa Flexbox */ flex-direction:column; /* Elementos en columna */ gap:18px; /* Separación entre redes */ } /* ================================================== ENLACES REDES SOCIALES ================================================== */ .social-icons a{ display:flex; /* Icono y texto en la misma línea */ align-items:center; /* Centrado vertical */ gap:14px; /* Separación */ text-decoration:none; /* Sin subrayado */ color:#ffffff; /* Texto blanco */ transition:.30s ease; } /* ================================================== ICONOS REDES SOCIALES ================================================== */ .social-icons i{ width:30px; /* Todos iguales */ font-size:1.5rem; /* Iconos grandes */ text-align:center; color:#ffffff; transition:.30s ease; } /* ================================================== TEXTO REDES SOCIALES ================================================== */ .social-icons span{ color:#ffffff; font-size:1rem; font-weight:500; } /* ================================================== EFECTOS HOVER REDES SOCIALES ================================================== */ /* Facebook */ .facebook:hover, .facebook:hover i, .facebook:hover span{ color:#1877F2; } /* Instagram */ .instagram:hover, .instagram:hover i, .instagram:hover span{ color:#E4405F; } /* WhatsApp */ .whatsapp:hover, .whatsapp:hover i, .whatsapp:hover span{ color:#25D366; } /* ================================================== COPYRIGHT ================================================== */ .copyright{ text-align:center; /* Centra el texto */ margin-top:45px; /* Separación del contenido */ padding-top:25px; /* Espacio sobre el texto */ border-top:1px solid rgba(255,255,255,.10); /* Línea superior */ color:#9ca3af; /* Gris claro */ font-size:.90rem; /* Tamaño del texto */ } /* ================================================== RESPONSIVE ================================================== */ @media(max-width:992px){ .footer-grid{ grid-template-columns:repeat(2,1fr); /* Dos columnas */ } } @media(max-width:768px){ .footer-grid{ grid-template-columns:1fr; /* Una columna */ gap:35px; /* Separación */ } } /* ================================================== INFORMACIÓN LEGAL DEL FOOTER ================================================== */ .footer-legal-info { /* Espacio después de las redes sociales */ margin-top: 25px; } /* ================================================== TÍTULO INFORMACIÓN LEGAL ================================================== */ .footer-col .footer-legal-info h3 { /* Tamaño más pequeño */ font-size: 1rem; /* Grosor */ font-weight: 600; /* Espacios */ margin: 0 0 18px; /* Espacio para la línea */ padding-bottom: 10px; /* Evita que el título se divida */ white-space: nowrap; } /* ================================================== LÍNEA ROJA INFORMACIÓN LEGAL ================================================== */ .footer-col .footer-legal-info h3::after { /* Línea más corta */ width: 70px; /* Línea más fina */ height: 3px; } /* ================================================== TRANSICIÓN DE LOS ENLACES DEL FOOTER SERVICIOS + INFORMACIÓN LEGAL ================================================== */ .footer-col a { /* Transición suave */ transition: color 0.3s ease, text-shadow 0.3s ease; } /* ================================================== HOVER ENLACES DEL FOOTER SERVICIOS + INFORMACIÓN LEGAL ================================================== */ /* ================================================== HOVER ENLACES DE SERVICIOS ================================================== */ .footer-grid .footer-col:nth-child(2) a:hover { /* Rojo vivo */ color: #ff1f1f !important; /* Efecto de luz roja */ text-shadow: 0 0 4px rgba(255, 31, 31, 0.90), 0 0 10px rgba(255, 31, 31, 0.65); } /* ================================================== ENLACES LEGALES ================================================== */ .footer-col .footer-legal-enlaces a { /* Tamaño más pequeño */ font-size: 0.82rem; /* Color gris claro */ color: #d1d5db; /* Separación entre enlaces */ margin-bottom: 10px; } /* ================================================== HOVER ENLACES LEGALES ================================================== */ .footer-col .footer-legal-enlaces a:hover { /* Rojo vivo */ color: #ff3b3b; /* Efecto de luz roja */ text-shadow: 0 0 8px rgba(255, 59, 59, 0.75); } .footer-legal-info{ margin-top:8px; } .footer-legal-enlaces a{ display:block; margin-bottom:12px; } /* ================================================== ACCESIBILIDAD Y AJUSTES DEL FOOTER ================================================== */ .footer a:focus-visible { outline: 3px solid var(--color-primario, #c62828); outline-offset: 4px; border-radius: 3px; } .footer-col p { overflow-wrap: anywhere; } .footer-legal-enlaces a:last-child, .social-icons a:last-child { margin-bottom: 0; } @media (max-width: 768px) { .footer { padding-inline: 20px; } .footer-col h3 { font-size: 1.45rem; } } @media (prefers-reduced-motion: reduce) { .footer a, .social-icons i { transition: none !important; } }