/*
 * Marca AmericaWant.
 *
 * Space Grotesk, Jet Black, Electric Chartreuse y Chalk White, del brand book.
 * La estructura es la de una tienda y no la de una landing: barra de anuncios
 * que corre, cabecera, secciones de foto y grilla de productos. Todo el
 * argumento de confianza vive en la barra que corre, no en secciones aparte.
 */

h1,
h2,
h3,
.heroe__titulo,
.seccion__titulo,
.tienda__titulo,
.uso__titulo,
.pie__nombre {
	font-family: var(--wp--preset--font-family--titulo);
	letter-spacing: -0.035em;
	line-height: 1.02;
}

/*
 * Los titulares grandes van en 300; los chicos siguen en 700.
 *
 * En 300 un titulo de 3 rem se lee elegante y uno de 1 rem se lee destenido. El
 * peso liviano necesita tamano para sostenerse.
 */
h1,
h2,
.heroe__titulo,
.seccion__titulo,
.tienda__titulo {
	font-weight: 300;
	letter-spacing: -0.03em;
}

/*
 * La minuscula va SOLO donde el texto lo escribimos nosotros.
 *
 * En un h1 generico arruinaria el nombre del producto: "Wallbox AW-AC-KQ08-7"
 * quedaria "wallbox aw-ac-kq08-7", y un codigo de modelo en minuscula ya no es
 * el codigo. Lo mismo con "DC" en los nombres de rubro.
 */
.heroe__titulo,
.seccion__titulo {
	text-transform: lowercase;
}

h3,
.pie__nombre {
	font-weight: 700;
}

.rotulo {
	margin: 0 0 0.7rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

.rotulo--verde {
	color: var(--wp--preset--color--verde);
}

/* --- Barra de anuncios --- */

/*
 * Corre en loop. El truco es duplicar la lista y desplazar exactamente el ancho
 * de una copia: al terminar la vuelta, la segunda ya esta donde arrancaba la
 * primera y no se ve el corte.
 */
.anuncios {
	overflow: hidden;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--tiza);
	font-size: 0.78rem;
}

.anuncios__pista {
	display: flex;
	width: max-content;
	animation: aw-correr 44s linear infinite;
}

.anuncios__lista {
	display: flex;
	align-items: center;
	gap: 3rem;
	list-style: none;
	margin: 0;
	padding: 0.62rem 3rem 0.62rem 0;
}

.anuncios__item {
	display: flex;
	align-items: center;
	gap: 3rem;
	white-space: nowrap;
}

.anuncios__item::after {
	content: "";
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 0;
	background: var(--wp--preset--color--verde);
}

@keyframes aw-correr {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.anuncios__pista {
		animation: none;
	}
}

/* --- Cabecera --- */

.tope {
	position: sticky;
	top: 0;
	z-index: 40;
}

.cabecera {
	position: static;
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.menu a {
	color: var(--wp--preset--color--gris);
	font-weight: 500;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.menu a:hover {
		color: var(--wp--preset--color--negro);
	}
}

/* --- Boton verde --- */

.boton--verde {
	background: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--negro);
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.boton--verde:hover {
		background: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--verde);
	}
}

/* --- Secciones de la portada --- */

.seccion {
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--linea);
}

/*
 * Cabecera centrada y en columna. Alineada a la izquierda con el enlace pegado a
 * la derecha era el encabezado de panel de administracion; centrada, la seccion
 * se lee como una portada de revista y le da aire al ritmo foto/blanco.
 */
.seccion__cabecera {
	display: grid;
	justify-items: center;
	gap: 0.8rem;
	margin-bottom: var(--wp--preset--spacing--50);
	text-align: center;
}

.seccion__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 300;
	letter-spacing: -0.03em;
	text-transform: lowercase;
}

.seccion__ver {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--verde);
	padding-bottom: 0.15rem;
}

/*
 * Ladrillos pegados y de borde a borde: la junta la hace el cambio de foto, no
 * un canal blanco. A 9 rem los ladrillos quedaban tan bajos que la tira se leia
 * como un banner y no como un mosaico.
 */
/*
 * Aca el margen negativo si funciona, y alignfull no: la maquetaria de
 * WordPress solo trata a los hijos DIRECTOS del grupo, y esta grilla esta
 * anidada dentro de la seccion. Por eso el heroe usa la clase y esto usa margen.
 */
.rubros-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0;
	margin-inline: calc(50% - 50vw);
}

@media (max-width: 599px) {
	.rubros-grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Datos duros en la tarjeta --- */

/*
 * Es lo que hace Huel con las calorias y la proteina: el que ya sabe lo que
 * busca compara sin entrar a ninguna ficha.
 */
.tarjeta__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.tarjeta__dato {
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 0;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--wp--preset--color--gris);
}

/* --- Pie --- */

/*
 * El pie es un grupo "constrained", y WordPress le pone max-width: 44rem a cada
 * hijo directo. Con cuatro columnas adentro eso dejaba el pie apretado en 704 px
 * con un vacio enorme a la izquierda. Se necesita el selector con el padre para
 * ganarle en especificidad a la regla de la maquetaria.
 */
.pie > .pie__cuerpo,
.pie > .pie__pata {
	max-width: none;
	width: 100%;
}

.pie__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.pie__nombre {
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--verde);
}

.pie__lema {
	margin: 0 0 0.6rem;
	max-width: 26ch;
	color: var(--wp--preset--color--tiza);
	font-size: 0.95rem;
}

.pie__legal {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--gris);
}

.pie__titulo {
	margin: 0 0 0.7rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

.pie__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.pie__col a {
	color: var(--wp--preset--color--gris-claro);
	text-decoration: none;
	font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
	.pie__col a:hover {
		color: var(--wp--preset--color--verde);
	}
}

.pie__pata {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(238, 244, 255, 0.14);
}

.pie__nota {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--gris);
}

.pie__pagos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.pie__pagos span {
	padding: 0.28rem 0.6rem;
	border: 1px solid rgba(238, 244, 255, 0.2);
	border-radius: 0;
	font-size: 0.72rem;
	color: var(--wp--preset--color--gris-claro);
}

/* --- Colapso --- */

@media (max-width: 899px) {
	.heroe {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
		padding-block: var(--wp--preset--spacing--50);
	}

	.pie__cuerpo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pie__marca {
		grid-column: 1 / -1;
	}

	.garantia {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}

	.rubros-grilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Encabezado en una sola linea --- */

/*
 * El nombre y el menu se partian en dos renglones y la cabecera quedaba del
 * doble de alto. El nombre no se parte nunca; el menu se achica antes de
 * envolver, y si no entra pasa a menu desplegable.
 */
.cabecera .wp-block-site-title {
	white-space: nowrap;
	flex: none;
}

.cabecera .wp-block-site-title a {
	letter-spacing: -0.04em;
}

.cabecera > .wp-block-group {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
}

.menu .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(0.8rem, 1.8vw, 1.6rem);
}

.menu .wp-block-navigation-item__content {
	white-space: nowrap;
	font-size: clamp(0.78rem, 1.05vw, 0.92rem);
}

@media (max-width: 1023px) {
	.cabecera .menu {
		margin-left: auto;
	}
}