/* Footer (issue #44), según ABRASIVO_Complete.pdf (p.1, franja negra al
   final). El contenido de cada columna vive en widgets de bloque HTML
   personalizado -no en una plantilla del tema-, ver
   scripts/apply_footer_db_changes.php. Antes cada widget traía su propio
   <style> repetido (uno por columna) con un naranja suelto (#ffb800, no el
   de marca) y íconos que el diseño no lleva; se centraliza acá con el mismo
   naranja que ya usa el header (#f4ab04) y Rubik. */

/* El logo iba arriba de las 4 columnas, en un widget aparte -sidebar
   "prefooter", ya la trae XStore pero vacía-, no dentro de ninguna columna.
   Es un <footer> propio, pegado justo arriba de .footer (incluso con
   height:0 estando vacío ya queda ahí, se verificó con getBoundingClientRect:
   su borde inferior coincide con el borde superior de .footer), así que solo
   necesita el mismo fondo oscuro que .footer (#222, no negro puro) para que
   se vea como parte de la misma franja y no como un salto de color. */
.prefooter,
.footer,
.footer-bottom {
	/* El tema pinta el footer de #222222 y la propuesta lo lleva casi negro
	   -muestreado del PDF: #0f0f0f sobre toda la franja-. Van los tres juntos
	   porque son tres <footer> distintos que solo se ven como una franja
	   continua si comparten el fondo: el del logo, el de las columnas y el del
	   copyright. */
	background: #0f0f0f !important;
}

.prefooter {
	padding: 24px 0 0;
}

/* El tema le da a .footer un padding-top de 4rem (~57px) pensado para cuando
   arranca directo en las columnas; con el logo arriba eso se suma a su
   margin-bottom y deja un salto muy grande entre el logo y "Contacto" -se
   nota "flotando" en vez de ir pegado a sus columnas-. .prefooter y .footer
   no son hermanos en el DOM (cada uno vive en su propio wrapper de
   template, solo quedan pegados visualmente al no haber nada entre medio),
   así que no se puede acotar esto con un selector de hermanos -.footer es
   el footer del sitio entero, se toca directo; !important porque compite
   con el shorthand "padding" del tema, misma especificidad. */
.footer {
	padding-top: 24px !important;
}

/* !important en los colores de todo el bloque: el tema trae sus propias
   reglas para <p>/<a> dentro del footer (más específicas que .footer-col p /
   .footer-col a) que si no, ganan -el texto quedaba gris apagado (#888) en
   vez de blanco, y los links casi invisibles-. Una regla que apunta directo
   al elemento siempre le gana a un valor heredado, sin importar de dónde
   venga el heredado, así que no alcanza con solo poner color en .footer-col. */
.footer-col {
	color: #ffffff !important;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

.footer-col + .footer-col {
	margin-top: 28px;
}

.footer-col h3 {
	color: #f4ab04 !important;
	font-family: 'Rubik', sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 14px;
}

/* font-size explícito: el tema trae su propia regla para <p> a 16px (más
   específica que el 14px heredado de .footer-col) -mismo problema que el
   color de arriba-. Como en Marcas la columna entera es un solo <p> (sin
   .footer-item que mezcle el tamaño correcto), ahí se notaba más: se veía
   desproporcionada frente a las demás columnas, pero el bug afectaba el
   texto en <p> de las 5. */
.footer-col p {
	color: #ffffff !important;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.footer-col a {
	color: #ffffff !important;
	text-decoration: none;
}

.footer-col a:hover {
	color: #f4ab04 !important;
}

/* Palabras/etiquetas resaltadas en naranja dentro del texto (p.ej. "WhatsApp:",
   los días del horario, "¿Ya conoces la clave de tu producto?", y
   "ABRASIVO.MX" en el copyright). El segundo selector (más específico que
   .footer-col a) es necesario para el caso en que footer-highlight cae en
   un link -si no, gana el blanco de .footer-col a por especificidad, aunque
   ambos tengan !important-. */
.footer-highlight {
	color: #f4ab04 !important;
}

.footer-col a.footer-highlight {
	color: #f4ab04 !important;
}

/* Filas con "+" (Facturas, Envíos) en vez de los iconos que traía antes. */
.footer-item {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	color: #ffffff !important;
}

.footer-item .plus {
	color: #f4ab04 !important;
	font-weight: 700;
}

.footer-cities {
	color: #ffffff !important;
}

/* En escritorio las 4 columnas son col-md-3 (25% parejo cada una). Marcas
   trae mucho menos contenido que las demás (nombres de marca, cortos) y
   con 25% le sobra ancho de columna -se ve "flotando", separada de Envíos
   por un hueco grande que no es el gutter normal sino puro espacio vacío
   dentro de la propia celda de Marcas-. En la referencia del cliente Marcas
   es visiblemente más angosta que las otras 3 y Envíos ocupa lo que le
   sobra, quedando más cerca una de otra.

   Se busca cada columna por la clase de su propio contenido y no por su
   posición: si alguien reordena los widgets desde Apariencia > Widgets, un
   :nth-child le pondría estos anchos a la columna equivocada sin que nada
   avise. */
@media (min-width: 992px) {
	.footer > .container > .row > .footer-widgets:has(.footer-col--marcas) {
		width: 18%;
	}

	.footer > .container > .row > .footer-widgets:has(.footer-col--envios) {
		width: 31%;
	}
}

/* Grid de 2 columnas en mobile (Contacto/Facturas arriba, Marcas/Envíos
   abajo), según Responsive_ABRASIVO_homepage.pdf. Por debajo de su
   breakpoint "sm" (768px) el tema no trae ningún intermedio -las 4 columnas
   se apilan en una sola-, así que se arma aparte con flexbox. */
@media (max-width: 767px) {
	.footer > .container > .row {
		display: flex;
		flex-wrap: wrap;
	}

	.footer > .container > .row > .footer-widgets {
		width: 50%;
	}

	/* La lista de ciudades se sale del grid a todo el ancho en mobile (según
	   el PDF), pero sigue viviendo dentro del widget de Envíos (celda de
	   50%) -no hay forma de que un descendiente ocupe todo el row salvo que
	   sea hijo directo de él-. En vez de duplicarla, se la ensancha con
	   width/margin-left negativo solo en este breakpoint. Los +30px/-30px son
	   el padding propio de la celda .footer-widgets (15px a cada lado) que si
	   no, la deja 30px corrida hacia adentro en vez de alinear con el gutter
	   del contenedor -se verificó con getBoundingClientRect contra el x de los
	   títulos "Contacto"/"Marcas", que sí caen justo en el gutter-. */
	.footer-cities {
		width: calc(200% + 30px);
		margin-left: calc(-100% - 30px);
	}
}

.footer-logo {
	display: block;
	width: 190px;
	max-width: 60%;
	height: auto;
	margin-bottom: 12px;
}

.footer-cta {
	display: inline-block;
	background: #f4ab04;
	padding: 9px 30px;
	border-radius: 999px;
	font-weight: 700;
	transition: color 0.2s;
}

/* .footer-col a (color blanco, !important) tiene más especificidad que
   .footer-cta sola -clase+etiqueta contra solo clase-, así que le ganaba
   pese al !important de ambos lados: el botón se veía con texto blanco
   siempre, encima del fondo naranja, en vez de negro. Mismo patrón que
   .footer-col a.footer-highlight más arriba. */
.footer-col a.footer-cta {
	color: #111111 !important;
}

.footer-col a.footer-cta:hover {
	color: #ffffff !important;
}

.footer-col--copyright {
	font-weight: 700;
	font-size: 13px;
}

/* El tema alinea a la derecha (text-align: end) la columna del copyright que
   va a la derecha -.footer-copyrights-right, col-sm-6-, lo que empuja el
   texto a pegarse al borde derecho. En la propuesta del cliente va corrido
   a la izquierda dentro de esa mitad, no pegado al borde, sin negrita.
   letter-spacing: a 13px el texto ("Distribuidor autorizado...") mide 594px
   contra 555px de caja -se partía en dos líneas-; con el letter-spacing
   negativo entra holgado en una sola. */
.footer-col--copyright-right {
	text-align: left;
	font-weight: 400;
	letter-spacing: -0.1px;
}

/* En mobile el orden del PDF es al revés del DOM: "Distribuidor
   autorizado..." (.footer-copyrights-right) va primero, con una línea
   divisoria, y despues "Copyright © 2026 ABRASIVO.MX" (.footer-copyrights)
   -en el DOM está primero el de copyright-. Sin negrita en ninguno de los
   dos, como se pidió para escritorio (.footer-col--copyright ya la trae en
   700 arriba; se quita solo en este breakpoint). !important en
   display/flex-direction: hay alguna otra regla de un plugin (entre ~112
   hojas de estilo cargadas) que gana por encima de .footer-bottom .container
   > .row del tema -que también pone display:flex- y deja esto en block; no
   se pudo aislar cuál exactamente, así que se fuerza directo. */
@media (max-width: 767px) {
	.footer-bottom .row {
		display: flex !important;
		flex-direction: column !important;
	}

	.footer-copyrights-right {
		order: 1;
	}

	.footer-copyrights {
		order: 2;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 16px;
		margin-top: 16px;
	}

	.footer-col--copyright {
		font-weight: 400;
	}
}