/* ----------------------------------------- */ /* Fix for Footer Width and Sticking to Bottom */ /* ----------------------------------------- */ /* 1. Make the main site container a full-height flex column. This is more reliable for block themes than styling the tag. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } /* 2. Allow the main content area to grow and push the footer down. This selector targets the primary content container within .wp-site-blocks. */ .wp-site-blocks > .is-layout-flow { flex-grow: 1; } /* 3. Force the footer block to span the full viewport width, breaking out of its constrained parent container. */ /* 🔹 Reset suave solo para márgenes/paddings en el footer */ #mi-footer, #mi-footer * { margin: 0; padding: 0; box-sizing: border-box; /* opcional: asegura consistencia */ } #mi-footer { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } /* 🔹 Reset de estilos DENTRO de #mi-footer. Se aplica solo a los elementos HIJOS para no anular los estilos del propio #mi-footer. */ /* 🔹 Footer base */ #mi-footer footer { display: flex; flex-wrap: wrap; color: #fff; font-family: Arial, sans-serif; text-align: center; width: 100%; /* Asegura que el footer interno ocupe todo el #mi-footer */ } /* Columnas */ #mi-footer .col { flex: 1; padding: 20px; min-width: 250px; } #mi-footer .col1 { background: rgba(243,174,174,0.8); } #mi-footer .col2 { background: #34495e; } #mi-footer .col3 { background: rgb(217, 171, 97); } #mi-footer .col1, #mi-footer .col3 { display: flex; flex-direction: column; justify-content: center; /* centra verticalmente */ } #mi-footer .col h3 { margin-bottom: 1.5rem; /* separa el título del contenido */ font-size: 1.5rem; /* opcional: tamaño uniforme */ font-weight: 600; /* opcional: darle más fuerza */ } /* Logo */ #mi-footer .logo { max-width: 120px; margin-bottom: 10px; } /* Redes sociales */ #mi-footer .social-icons { margin-top: 15px; } #mi-footer .social-icons a { display: inline-block; margin: 0 8px; color: #fff; font-size: 20px; text-decoration: none; } /* Lista de enlaces */ #mi-footer .links { list-style: none; padding: 0; margin: 0; } #mi-footer .links li { margin: 8px 0; } #mi-footer .links a { color: black; text-decoration: none; font-size: 1.2rem; } #mi-footer .links a:hover { text-decoration: underline; } /* Logos de pagos */ #mi-footer .payments { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin: 3rem 0 ; } #mi-footer .payments img { max-height: 40px; object-fit: contain; } #mi-footer a svg { width: 24px; height: 24px; fill: #f5e6e6; /* gris por defecto */ transition: fill 0.3s; } #mi-footer a:hover svg { fill: #fcfafb; /* ejemplo: Instagram rosado */ } /* Pie inferior */ #mi-footer .bottom { width: 100%; background: #222; color: #ccc; padding: 10px; font-size: 0.9rem; margin: 0; flex-basis: 100%; } #mi-footer a { margin-right: 15px; /* separa el ícono del contenido que viene después */ } #mi-footer .horario, #mi-footer .social-icons, #mi-footer .payments { margin-top: 0.8rem; /* espacio arriba del bloque con texto */ } #mi-footer .horario p + p { margin-top: 0.75rem; } #mi-footer .horario { line-height: 1.6; font-size: 0.9rem; } .informacion-legal { margin-bottom: 1.2rem; } .page-id-41513 .wp-site-blocks > footer { margin-block-start: 0; } /* Responsivo: en pantallas medianas y chicas */ @media (max-width: 992px) { #mi-footer footer { flex-direction: column; align-items: center; /* centra las columnas */ text-align: center; } #mi-footer .col { flex: unset; width: 100%; /* cada bloque ocupa todo el ancho */ margin:0; } #mi-footer .payments img { max-width: 80px; margin: 5px; } }