/* MC Home v2 — footer compacto, en todo el sitio. El footer de Blocksy (mapas + contacto + enlaces) repite el mismo contenido en cada página y pesa ~1.500 px en celular. Este archivo lo hace más denso sin borrar información: los mapas visuales se ocultan, pero toda la información de contacto y los enlaces de ambas direcciones a Google Maps siguen presentes y funcionando (medido en dev, celular 375 px: 1.505 px → 618 px, -59%). Selectores verificados contra el DOM real de dev.modacoolsas.com. No toca precios, pedidos, ni el header — sólo el footer. */ @media(max-width:767px){ /* Ocultar sólo los mapas, no cualquier widget de tipo "encabezado" que el footer pueda tener en el futuro. .ct-header-text es una clase genérica de Blocksy (hay 2 más fuera del footer en esta misma página) — el selector real es "el que contiene un mapa embebido". Se apunta a [data-src], no a [src]: el mapa carga diferido y src vale "about:blank" hasta que el usuario hace scroll hasta ahí; data-src ya trae la URL real desde el primer render, así que oculta siempre, no sólo después de que el mapa llegue a cargar. */ .ct-footer .ct-header-text:has(iframe[data-src*="google.com/maps/embed"]){display:none!important} /* Dirección / celular / horario / email: mismo contenido, más denso. !important porque Blocksy fija su propio gap con más especificidad. */ .ct-footer .ct-contact-info ul{gap:6px 0!important} .ct-footer .ct-contact-info .contact-text{font-size:12px!important;line-height:1.3!important} .ct-footer .ct-contact-info .ct-icon-container{width:13px!important;height:13px!important} /* Cada enlace del footer ocupaba casi todo el ancho (358 de 375 px) y forzaba una fila por enlace, aunque el contenedor ya era flex-wrap. */ .ct-footer .footer-menu-inline .menu{gap:2px 6px!important} .ct-footer .footer-menu-inline .menu li{width:auto!important;flex:0 0 auto!important} .ct-footer .footer-menu-inline .menu a{padding:4px 8px!important;font-size:11px!important;line-height:1.3!important} /* Encontrado en vivo: los íconos sociales estaban en flex-direction: column, así que "envolvían" en una sola columna de 6 filas en vez de una grilla. Esto solo era el 89% del alto de esa sección. Acotado a .ct-footer: sin el prefijo, esta regla alcanzaría también a cualquier bloque de íconos sociales de la cabecera o del contenido que use la misma clase .ct-social-box. */ .ct-footer .ct-social-box{flex-direction:row!important;flex-wrap:wrap!important;width:100%!important} .ct-footer-socials .ct-social-box{gap:6px!important} .ct-footer-socials .ct-icon-container{width:16px!important;height:16px!important} .ct-footer .ct-container{padding-block:14px!important} .ct-footer-copyright{font-size:11px!important} } /* ───────────────────────────────────────────────────────────── v0.30.1 — Footer móvil compacto (tarjetas + acordeones). Todo lo de arriba sigue siendo el respaldo: si footer.js no corre (JS deshabilitado, o no encontró datos esenciales), el footer original de Blocksy queda visible con la compactación de 0.28.1. Estas reglas sólo aplican a lo que footer.js construye y sólo cuando la construcción salió bien (footer.classList tiene mc-home-v2__footer-compact-active). ───────────────────────────────────────────────────────────── */ @media(max-width:767px){ /* Blocksy fija display:flex en los divs genéricos que envuelven cada widget del footer, y eso le gana al estilo de user-agent que oculta [hidden] por defecto — sin esta regla, "ocultar" no ocultaba nada. */ .ct-footer [hidden]{display:none!important} .mc-home-v2__footer-stores{display:flex;flex-direction:column;gap:7px;padding:8px 16px 0} .mc-home-v2__footer-store{ display:flex;flex-direction:column;gap:6px; padding:8px 12px;border:1px solid #e4e7ec;border-radius:10px;background:#fff } .mc-home-v2__footer-store-address{ font-size:12px;color:#526075;text-decoration:none;line-height:1.3; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden } .mc-home-v2__footer-store-address:hover{text-decoration:underline} .mc-home-v2__footer-store-name{font-size:13px;font-weight:850;color:#17243a} .mc-home-v2__footer-store-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .mc-home-v2__footer-store-go{ flex:0 0 auto;padding:5px 12px;border:1px solid #173d67;border-radius:999px; font-size:11px;font-weight:850;color:#173d67;text-decoration:none } .mc-home-v2__footer-store-go:hover{background:#173d67;color:#fff} .mc-home-v2__footer-store-wa{ flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:#25D366;color:#fff } /* Horario real y visible, no sólo en "title" (poco fiable en táctil y lectores de pantalla). Separado con un borde en vez de texto "·" para no competir visualmente con los dos botones de acción. */ .mc-home-v2__footer-store-hours{ font-size:11px;color:#8a93a3;white-space:nowrap;line-height:1; padding-left:8px;border-left:1px solid #e4e7ec } .mc-home-v2__footer-accordions{padding:6px 16px 0;display:flex;flex-direction:column;gap:5px} .mc-home-v2__footer-accordion{border:1px solid #e4e7ec;border-radius:8px;overflow:hidden} .mc-home-v2__footer-accordion summary{ padding:7px 12px;font-size:12px;font-weight:800;color:#17243a; cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between } .mc-home-v2__footer-accordion summary::-webkit-details-marker{display:none} .mc-home-v2__footer-accordion summary::after{content:"+";font-size:14px;color:#8a93a3} .mc-home-v2__footer-accordion[open] summary::after{content:"–"} .mc-home-v2__footer-accordion ul{margin:0;padding:0 12px 10px;list-style:none;display:flex;flex-direction:column;gap:6px} .mc-home-v2__footer-accordion a{font-size:11.5px;color:#526075;text-decoration:none} .mc-home-v2__footer-accordion a:hover{text-decoration:underline} .mc-home-v2__footer-store-address:focus-visible, .mc-home-v2__footer-store-go:focus-visible, .mc-home-v2__footer-store-wa:focus-visible, .mc-home-v2__footer-store-review:focus-visible, .mc-home-v2__footer-accordion summary:focus-visible, .mc-home-v2__footer-accordion a:focus-visible{ outline:2px solid #e53e65;outline-offset:2px } }