/* ---
Código html:
--- */
/*
============================================================================
PIE DE PÁGINA - ESTILOS BASE
============================================================================
Estilos base para el componente de pie de página.
Incluye soporte para modo oscuro y transiciones suaves.
============================================================================ */
.footer {
/* Fondo y borde */
background-color: var(--color-section-bg); /* Color de fondo del tema claro */
border-top: 1px solid var(--color-section-border); /* Borde superior sutil */
/* Espaciado */
padding: 3rem var(--padding-global) 2rem; /* Relleno: 3rem arriba, variable en lados, 2rem abajo */
margin-top: 4rem; /* Margen superior para separar del contenido */
/* Alineación */
text-align: center; /* Centra todo el contenido */
/* Transiciones */
transition: background-color 0.3s ease, border-color 0.3s ease; /* Efectos suaves al cambiar tema */
}
/*
============================================================================
MODO OSCURO - PIE DE PÁGINA
============================================================================
Ajustes específicos para el modo oscuro del pie de página.
Cambia los colores para mantener el contraste y la legibilidad.
============================================================================ */
body.dark .footer {
background-color: var(--color-section-bg-dark); /* Fondo más oscuro */
border-top-color: var(--color-section-border-dark); /* Borde con tono más oscuro */
}
/*
============================================================================
LISTA DE REDES SOCIALES - CONTENEDOR
============================================================================
Estilos para el contenedor de la lista de redes sociales.
Utiliza flexbox para una disposición centrada y adaptable.
============================================================================ */
.footer > ul {
list-style: none; /* Elimina las viñetas por defecto */
padding: 0; /* Elimina el padding por defecto */
margin: 0 0 2rem 0; /* Margen inferior de 2rem */
display: flex; /* Activa flexbox */
justify-content: center; /* Centra los elementos horizontalmente */
gap: 1.5rem; /* Espacio entre elementos */
flex-wrap: wrap; /* Permite que los elementos se envuelvan */
}
/*
============================================================================
ELEMENTOS DE LA LISTA
============================================================================
Estilos base para cada ítem de la lista de redes sociales
============================================================================ */
.footer > ul li {
margin: 0; /* Elimina márgenes por defecto */
}
/*
============================================================================
ENLACES DE REDES SOCIALES
============================================================================
Estilos para los enlaces de redes sociales (iconos)
============================================================================ */
.footer > ul li a {
/* Diseño de caja */
display: flex;
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente */
width: 3rem; /* Ancho fijo */
height: 3rem; /* Altura fija (mismo valor para crear un círculo) */
/* Estilo visual */
background-color: var(--color-section-bg-alt); /* Fondo alternativo */
border: 2px solid var(--color-section-border); /* Borde sutil */
border-radius: 50%; /* Forma circular */
color: var(--color-primary); /* Color del icono */
font-size: 1.5rem; /* Tamaño del icono */
/* Efectos */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
text-decoration: none; /* Sin subrayado */
box-shadow: 0 0.25rem 0.75rem var(--color-shadow); /* Sombra sutil */
}
/*
============================================================================
EFECTO HOVER - ENLACES
============================================================================
Efectos al pasar el ratón sobre los iconos de redes sociales
============================================================================ */
.footer > ul li a:hover {
background-color: var(--color-primary); /* Fondo con color primario */
color: var(--color-section-bg-alt); /* Color de icono invertido */
border-color: var(--color-primary); /* Borde con color primario */
transform: translateY(-0.25rem) scale(1.05); /* Efecto de elevación */
box-shadow: 0 0.5rem 1.5rem var(--color-shadow-hover); /* Sombra más pronunciada */
}
/*
============================================================================
MODO OSCURO - ENLACES
============================================================================
Ajustes de color para el modo oscuro
============================================================================ */
body.dark .footer > ul li a {
background-color: var(--color-section-bg-alt-dark); /* Fondo oscuro */
border-color: var(--color-section-border-dark); /* Borde oscuro */
color: var(--color-primary-dark); /* Color primario oscuro */
box-shadow: 0 0.25rem 0.75rem var(--color-shadow-dark); /* Sombra oscura */
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Ajustes del efecto hover para el modo oscuro
============================================================================ */
body.dark .footer > ul li a:hover {
background-color: var(--color-primary-dark); /* Fondo primario oscuro */
color: var(--color-section-bg-alt-dark); /* Color de icono invertido */
border-color: var(--color-primary-dark); /* Borde primario oscuro */
box-shadow: 0 0.5rem 1.5rem var(--color-shadow-hover-dark); /* Sombra oscura más pronunciada */
}
/*
============================================================================
ENLACES DE INFORMACIÓN
============================================================================
Estilos para los enlaces de información (dirección y teléfono).
Incluye transiciones suaves y soporte para modo oscuro.
============================================================================ */
.footer > a {
display: block; /* Hace que el enlace ocupe toda la línea */
color: var(--color-text-secondary); /* Color de texto secundario */
text-decoration: none; /* Elimina el subrayado por defecto */
margin-bottom: 1rem; /* Espaciado inferior */
font-size: 1rem; /* Tamaño de fuente estándar */
transition: color 0.3s ease; /* Transición suave para el cambio de color */
}
/*
============================================================================
EFECTO HOVER - ENLACES DE INFORMACIÓN
============================================================================
Cambia el color al pasar el ratón sobre los enlaces
============================================================================ */
.footer > a:hover {
color: var(--color-primary); /* Color primario al hacer hover */
}
/*
============================================================================
MODO OSCURO - ENLACES
============================================================================
Ajustes de color para los enlaces en modo oscuro
============================================================================ */
body.dark .footer > a {
color: var(--color-text-secondary-dark); /* Color de texto más claro */
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Ajustes del efecto hover para el modo oscuro
============================================================================ */
body.dark .footer > a:hover {
color: var(--color-primary-dark); /* Color primario oscuro al hacer hover */
}
/*
============================================================================
ESTILOS ESPECÍFICOS - DIRECCIÓN
============================================================================
Estilos específicos para el enlace de dirección.
Destaca ligeramente el texto para mejor legibilidad.
============================================================================ */
.footer-a-Direccion {
font-weight: 500; /* Peso de fuente medio para mejor legibilidad */
font-size: 1.0625rem; /* Tamaño ligeramente mayor que el texto normal */
}
/*
============================================================================
ENLACE DE TELÉFONO
============================================================================
Estilos específicos para el enlace de teléfono.
Selector de atributo [href^="tel"] para seleccionar solo enlaces telefónicos.
============================================================================ */
.footer > a[href^="tel"] {
font-weight: 600; /* Peso de fuente semibold para destacar */
font-size: 1.25rem; /* Tamaño de fuente más grande */
color: var(--color-primary); /* Color primario para mayor visibilidad */
margin-bottom: 2rem; /* Mayor margen inferior para separación */
}
/*
============================================================================
EFECTO HOVER - TELÉFONO
============================================================================
Cambio de color al pasar el ratón sobre el enlace de teléfono
============================================================================ */
.footer > a[href^="tel"]:hover {
color: var(--color-primary-hover); /* Color más claro al hacer hover */
}
/*
============================================================================
MODO OSCURO - TELÉFONO
============================================================================
Ajustes de color para el enlace de teléfono en modo oscuro
============================================================================ */
body.dark .footer > a[href^="tel"] {
color: var(--color-primary-dark); /* Color primario para modo oscuro */
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER TELÉFONO
============================================================================
Ajustes del efecto hover para el enlace de teléfono en modo oscuro
============================================================================ */
body.dark .footer > a[href^="tel"]:hover {
color: var(--color-primary-hover-dark); /* Color hover para modo oscuro */
}
/*
============================================================================
TÍTULO DE SECCIÓN
============================================================================
Estilos para los títulos de sección en el pie de página.
Incluye un subrayado decorativo con gradiente.
============================================================================ */
.footer h3 {
/* Tipografía */
font-size: 1.5rem; /* Tamaño de fuente grande para destacar */
font-weight: 700; /* Negrita para mejor jerarquía */
color: var(--color-primary); /* Color primario del tema */
/* Espaciado */
margin: 0 0 1.5rem 0; /* Margen inferior de 1.5rem */
/* Posicionamiento */
position: relative; /* Necesario para el pseudo-elemento */
display: inline-block; /* Ajusta el ancho al contenido */
padding-bottom: 0.5rem; /* Espacio para el subrayado */
}
/*
============================================================================
SUBRAYADO DECORATIVO
============================================================================
Línea decorativa bajo el título con efecto de gradiente
============================================================================ */
.footer h3::after {
content: ''; /* Necesario para mostrar el pseudo-elemento */
position: absolute; /* Posicionamiento absoluto respecto al título */
bottom: 0; /* Alineado en la parte inferior */
left: 50%; /* Centrado horizontalmente */
transform: translateX(-50%); /* Ajuste fino para centrar */
width: 3rem; /* Ancho de la línea */
height: 0.25rem; /* Altura de la línea */
background: linear-gradient(90deg,
transparent,
var(--color-primary), /* Color primario en el centro */
transparent); /* Degradado a transparente en los extremos */
border-radius: 0.125rem; /* Esquinas ligeramente redondeadas */
}
/*
============================================================================
MODO OSCURO - TÍTULO
============================================================================
Ajustes de color para el título en modo oscuro
============================================================================ */
body.dark .footer h3 {
color: var(--color-primary-dark); /* Color primario para modo oscuro */
}
/*
============================================================================
MODO OSCURO - SUBRAYADO
============================================================================
Ajustes del subrayado decorativo para modo oscuro
============================================================================ */
body.dark .footer h3::after {
background: linear-gradient(90deg,
transparent,
var(--color-primary-dark), /* Color primario oscuro en el centro */
transparent);
}
/*
============================================================================
LISTA DE HORARIOS
============================================================================
Estilos para la sección de horarios del pie de página.
Incluye un diseño de tarjeta con sombra y soporte para modo oscuro.
============================================================================ */
.footer-ul-horario {
/* Estilos base de la lista */
list-style: none; /* Elimina las viñetas */
padding: 0; /* Elimina el padding por defecto */
margin: 0; /* Elimina los márgenes por defecto */
/* Diseño de la tarjeta */
display: inline-block; /* Permite centrado con text-align */
text-align: left; /* Alineación del texto a la izquierda */
background-color: var(--color-section-bg-alt); /* Fondo alternativo */
border-radius: 0.75rem; /* Bordes redondeados */
padding: 1.5rem 2rem; /* Relleno interno generoso */
border: 1px solid var(--color-section-border); /* Borde sutil */
box-shadow: 0 0.25rem 0.75rem var(--color-shadow); /* Sombra suave */
transition: all 0.3s ease; /* Transición para efectos hover */
}
/*
============================================================================
MODO OSCURO - LISTA DE HORARIOS
============================================================================
Ajustes de estilo para la tarjeta de horarios en modo oscuro
============================================================================ */
body.dark .footer-ul-horario {
background-color: var(--color-section-bg-alt-dark); /* Fondo oscuro */
border-color: var(--color-section-border-dark); /* Borde oscuro */
box-shadow: 0 0.25rem 1rem var(--color-shadow-dark); /* Sombra oscura */
}
/*
============================================================================
ELEMENTOS DE LA LISTA DE HORARIOS
============================================================================
Estilos para cada línea de horario
============================================================================ */
.footer-ul-horario li {
margin-bottom: 0.875rem; /* Espaciado entre elementos */
font-size: 1rem; /* Tamaño de fuente estándar */
color: var(--color-text-secondary); /* Color de texto secundario */
display: flex; /* Usa flexbox para alinear elementos */
justify-content: space-between; /* Separa los textos */
gap: 1.5rem; /* Espacio entre textos */
}
/*
============================================================================
ÚLTIMO ELEMENTO DE LA LISTA
============================================================================
Elimina el margen inferior del último elemento
============================================================================ */
.footer-ul-horario li:last-child {
margin-bottom: 0; /* Sin margen en el último elemento */
}
/*
============================================================================
MODO OSCURO - TEXTO DE HORARIOS
============================================================================
Ajustes de color para el texto en modo oscuro
============================================================================ */
body.dark .footer-ul-horario li {
color: var(--color-text-secondary-dark); /* Color más claro para mejor contraste */
}
/*
============================================================================
DÍAS DE LA SEMANA
============================================================================
Estilos para los días de la semana (etiquetas )
============================================================================ */
.footer-ul-horario li strong {
color: var(--color-text); /* Color de texto principal */
font-weight: 600; /* Peso de fuente semibold */
}
/*
============================================================================
MODO OSCURO - DÍAS DE LA SEMANA
============================================================================
Ajustes de color para los días en modo oscuro
============================================================================ */
body.dark .footer-ul-horario li strong {
color: var(--color-text-dark); /* Color de texto claro */
}
/*
============================================================================
TÍTULO DE UBICACIÓN
============================================================================
Estilos para el título de la sección de ubicación
============================================================================ */
footer > h4 {
font-size: 2rem; /* Tamaño grande para el título */
}
/*
============================================================================
IFRAME DE GOOGLE MAPS
============================================================================
Estilos para el mapa de Google Maps
============================================================================ */
footer > iframe {
margin: 1rem; /* Margen exterior */
padding: 0.4rem; /* Relleno interno */
border: 0.1rem solid coral; /* Borde decorativo */
width: 200px; /* Ancho fijo */
height: 250px; /* Altura fija */
}
/*
============================================================================
DISEÑO RESPONSIVE - TABLETS (≥640px)
============================================================================
Ajustes para pantallas medianas (tablets y pantallas pequeñas).
Mejora la legibilidad y el espaciado para una mejor experiencia de usuario.
============================================================================ */
@media (min-width: 40rem) { /* 640px */
/* Contenedor principal del footer */
.footer {
padding: 4rem var(--padding-global) 3rem; /* Mayor espacio vertical */
}
/* Lista de redes sociales */
.footer > ul {
gap: 2rem; /* Más espacio entre iconos */
margin-bottom: 2.5rem; /* Mayor margen inferior */
}
/* Iconos de redes sociales */
.footer > ul li a {
width: 3.5rem; /* Tamaño aumentado */
height: 3.5rem; /* Tamaño aumentado */
font-size: 1.75rem; /* Tamaño de icono mayor */
}
/* Dirección */
.footer-a-Direccion {
font-size: 1.125rem; /* Texto ligeramente más grande */
}
/* Teléfono */
.footer > a[href^="tel"] {
font-size: 1.5rem; /* Tamaño de fuente aumentado */
margin-bottom: 2.5rem; /* Mayor margen inferior */
}
/* Título "Horarios" */
.footer h3 {
font-size: 1.75rem; /* Tamaño de fuente aumentado */
margin-bottom: 2rem; /* Mayor margen inferior */
}
/* Contenedor de horarios */
.footer-ul-horario {
padding: 2rem 3rem; /* Mayor espacio interno */
}
/* Elementos de horario */
.footer-ul-horario li {
font-size: 1.0625rem; /* Tamaño de fuente ligeramente mayor */
margin-bottom: 1rem; /* Espaciado entre elementos */
}
/* Mapa de Google */
.footer > iframe {
height: 350px; /* Altura fija */
width: 300px; /* Ancho fijo */
}
}
/*
============================================================================
DISEÑO RESPONSIVE - ESCRITORIO (≥1024px)
============================================================================
Ajustes para pantallas de escritorio.
Optimiza el espacio y mejora la jerarquía visual.
============================================================================ */
@media (min-width: 64rem) { /* 1024px */
/* Contenedor principal del footer */
.footer {
padding: 5rem var(--padding-global) 4rem; /* Espaciado vertical aumentado */
}
/* Lista de redes sociales */
.footer > ul {
gap: 2.5rem; /* Espacio entre iconos aumentado */
}
/* Título "Horarios" */
.footer h3 {
font-size: 2rem; /* Tamaño de fuente mayor */
}
/* Mapa de Google */
.footer > iframe {
height: 450px; /* Altura aumentada */
width: 400px; /* Ancho aumentado */
}
}