/**
 * Layout: estructura general del sitio. Contenedor centrado,
 * pie de página y el armazón de páginas/entradas genéricas
 * (page.php, single.php, 404.php). El encabezado del sitio vive en
 * components.css (junto a los botones); las cuadrículas propias de
 * cada sección del home viven en sections.css.
 *
 * @package Induscore
 */

/* ---------------------------------------------------
   Contenedor centrado (máx. var(--ancho-maximo))
   --------------------------------------------------- */
.contenedor {
	width: 100%;
	max-width: var(--ancho-maximo);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--e-24);
	padding-right: var(--e-24);
}

/* ---------------------------------------------------
   Pie de página (ver footer.php): franja superior de cotización,
   cuerpo en columnas y barra inferior. El logo sobre placa blanca
   vive en components.css (.pie-pagina__logo-placa).
   --------------------------------------------------- */
.pie-pagina {
	background-color: var(--color-pie-fondo);
	color: var(--texto-sobre-oscuro);
}

/* Franja superior: texto y botón suave (.boton--suave). Base = móvil,
   apilados; desde 768px, texto a la izquierda y botón a la derecha. */
.pie-pagina__franja {
	background-color: var(--color-pie-franja);
}

.pie-pagina__franja-interior {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-20);
	padding-top: var(--e-32);
	padding-bottom: var(--e-32);
}

@media (min-width: 768px) {
	.pie-pagina__franja-interior {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--e-32);
	}
}

.pie-pagina__franja-texto {
	margin: 0;
	color: var(--color-blanco);
	font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl));
	font-weight: var(--peso-medio);
	line-height: var(--interlineado-medio);
}

/* Cuerpo: 1 columna en móvil, 2 en tablet (la de marca ocupa toda la
   primera fila) y hasta 5 en escritorio. En escritorio las columnas
   se generan con grid-auto-flow: column, así si alguna no se imprime
   (por ejemplo Contacto sin datos) las demás reparten el ancho sin
   dejar un hueco vacío al final. */
.pie-pagina__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-40);
	padding-top: var(--e-48);
	padding-bottom: var(--e-48);
}

@media (min-width: 768px) {
	.pie-pagina__cuerpo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: var(--e-56);
		padding-bottom: var(--e-56);
	}

	.pie-pagina__columna--marca {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.pie-pagina__cuerpo {
		grid-template-columns: minmax(0, 1.5fr);
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		padding-top: var(--e-64);
		padding-bottom: var(--e-64);
	}

	.pie-pagina__columna--marca {
		grid-column: auto;
	}
}

.pie-pagina__descripcion {
	margin: var(--e-20) 0 0;
	max-width: var(--ancho-contenido-sm);
	font-size: var(--fs-base);
	color: var(--overlay-blanco-65);
}

.pie-pagina__titulo {
	margin: 0 0 var(--e-12);
	font-size: var(--fs-sm);
	font-weight: var(--peso-negrita);
	line-height: var(--interlineado-base);
	letter-spacing: var(--letras-abiertas-xl);
	text-transform: uppercase;
	color: var(--color-blanco);
}

.pie-pagina__lista,
.pie-pagina__contacto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: var(--fs-base);
	font-style: normal;
	color: var(--overlay-blanco-75);
}

/* Enlaces: área táctil de 44px en móvil/tablet; en escritorio (con
   mouse) vuelven a su alto natural para que la lista no se estire. */
.pie-pagina__lista a,
.pie-pagina__contacto a {
	display: inline-flex;
	align-items: center;
	min-height: var(--e-44);
	color: var(--overlay-blanco-75);
	overflow-wrap: anywhere;
}

.pie-pagina__contacto span {
	padding: var(--e-10) 0;
}

@media (min-width: 1024px) {
	.pie-pagina__lista a,
	.pie-pagina__contacto a,
	.pie-pagina__contacto span {
		min-height: 0;
		padding: var(--e-4) 0;
	}
}

@media (hover: hover) {
	.pie-pagina__lista a:hover,
	.pie-pagina__contacto a:hover {
		color: var(--color-pie-enlace-activo);
	}
}

.pie-pagina__lista a:focus-visible,
.pie-pagina__contacto a:focus-visible {
	color: var(--color-pie-enlace-activo);
}

/* Barra inferior: derechos | "Una empresa del Grupo" + logo | medios
   de pago. Base = móvil, apilados; desde 768px, tres zonas en una
   fila con el bloque del grupo realmente centrado. */
.pie-pagina__barra {
	border-top: var(--linea-divisoria-oscura);
}

.pie-pagina__inferior {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-16);
	padding-top: var(--e-20);
	padding-bottom: var(--e-20);
	font-size: var(--fs-sm);
	color: var(--overlay-blanco-55);
}

.pie-pagina__inferior p {
	margin: 0;
	color: inherit;
}

@media (min-width: 768px) {
	.pie-pagina__inferior {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--e-24);
	}

	.pie-pagina__pagos {
		justify-self: end;
	}
}

.pie-pagina__grupo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--e-8);
}

.pie-pagina__grupo a {
	display: flex;
	align-items: center;
}

/* Doble clase: en las páginas de WooCommerce la regla del plugin
   ".woocommerce-page img { height: auto }" le ganaría a una sola clase
   y el logo se vería a su tamaño natural. */
.pie-pagina .pie-pagina__grupo-logo {
	height: var(--alto-logo-grupo);
	width: auto;
	max-width: none;
}

.pie-pagina__pagos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-8);
}

.pie-pagina__pagos li {
	padding: var(--e-4) var(--e-10);
	border: var(--linea-divisoria-oscura);
	font-size: var(--fs-xs);
	color: var(--overlay-blanco-75);
}

/* ---------------------------------------------------
   Contenido general de páginas y entradas
   (page.php, single.php, index.php, 404.php)
   --------------------------------------------------- */
/* Espaciado vertical reducido en móvil, gradual hacia el valor de
   escritorio (sin cambios) a partir de 1024px. */
.contenido-pagina {
	padding-top: var(--e-40);
	padding-bottom: var(--e-40);
}

@media (min-width: 768px) {
	.contenido-pagina {
		padding-top: var(--e-56);
		padding-bottom: var(--e-56);
	}
}

@media (min-width: 1024px) {
	.contenido-pagina {
		padding-top: var(--e-64);
		padding-bottom: var(--e-64);
	}
}

.entrada__cabecera {
	margin-bottom: var(--e-32);
	padding-bottom: var(--e-32);
	border-bottom: var(--linea-divisoria);
}

.entrada__meta {
	color: var(--color-texto-secundario);
	font-size: var(--fs-base);
	text-transform: uppercase;
	letter-spacing: var(--letras-abiertas-sm);
}

.entrada__imagen-destacada {
	margin-bottom: var(--e-32);
}

.entrada__navegacion {
	display: flex;
	justify-content: space-between;
	gap: var(--e-24);
	margin-top: var(--e-48);
	padding-top: var(--e-24);
	border-top: var(--linea-divisoria);
	font-weight: var(--peso-semi);
}

.formulario-busqueda-404 {
	display: flex;
	gap: var(--e-12);
	max-width: var(--ancho-contenido-lg);
	margin-top: var(--e-24);
}

.formulario-busqueda-404 input[type="search"] {
	flex: 1;
	/* Sin esto el campo no baja de su ancho natural y en móvil empuja el
	   botón "Buscar" fuera de la pantalla. */
	min-width: 0;
	padding: var(--e-14) var(--e-16);
	border: 1px solid var(--color-gris-borde);
	background-color: var(--color-blanco);
}

/* Modo vitrina: en vez del buscador, enlaces a las unidades y a cotizar. */
.pagina-404__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-12);
	margin: var(--e-24) 0 0;
	padding: 0;
	list-style: none;
}

/* Botón "Volver al catálogo" (antes con un margen en línea en 404.php). */
.pagina-404__volver {
	margin-top: var(--e-24);
}

/* ---------------------------------------------------
   WooCommerce: cuadrícula base de productos
   --------------------------------------------------- */
/* Mobile-first: 1 columna en móvil, 2 en tablet, 4 en escritorio
   (igual que el resto de cuadrículas del tema). */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-32);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	border: var(--linea-divisoria);
	padding: var(--e-20);
}

@media (min-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}