/*
 * La Canasta - cabecera y pie.
 *
 * Medido de Figma: HEADER (231:949) y Pie de pagina (231:738).
 *
 * COLORES PENDIENTES DE CONFIRMAR
 * Los fondos de la franja naranja y del pie turquesa estan dibujados como
 * vectores en Figma, no como rellenos planos, asi que su hex no viene en
 * los datos del archivo. Los de abajo son lectura de las capturas.
 * Para corregirlos: selecciona la forma en Figma, copia el hex del panel
 * de relleno y sustituyelo aqui. Es el unico sitio donde se declaran.
 */

:root {
	--lc-naranja: #f08a1c;   /* franja "ENTREGAS EN" - POR CONFIRMAR */
	--lc-turquesa: #10d2df;  /* fondo del pie        - POR CONFIRMAR */
	--lc-turquesa-caja: #4fc9d6;     /* rectangulos del pie - POR CONFIRMAR */
	--lc-turquesa-caja-alt: #3fbcc9; /* alterno en movil    - POR CONFIRMAR */
	--lc-gris: #3a3a3a;      /* franja legal del pie - POR CONFIRMAR */
	--lc-azul: #1b77ba;      /* azul de marca, tomado de los SVG entregados */
}

/* ---------------------------------------------------------------
   Cabecera: fila blanca con logo y menu, franja naranja debajo
   --------------------------------------------------------------- */

.lc-header {
	background: var(--wp--preset--color--base, #fff);
}

.lc-header__superior {
	max-width: var(--lc-ancho-max);
	margin-inline: auto;
	padding: clamp(0.75rem, 1.6vw, 1.25rem) clamp(1rem, 4vw, 4.5rem);
	gap: clamp(1rem, 3vw, 2.5rem);
}

.lc-header__superior .wp-block-site-logo img {
	width: clamp(88px, 9vw, 116px);
	height: auto;
}

.lc-nav {
	font-weight: 900;
	font-size: clamp(0.8125rem, 1.35vw, 1.375rem); /* 22px al ancho ancla */
	letter-spacing: 0.01em;
}

.lc-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 3.2vw, 3.25rem);
}

.wp-block-navigation.lc-nav .wp-block-navigation-item__content,
.lc-nav .wp-block-navigation__container a,
.lc-nav a {
	color: var(--wp--preset--color--primary, #cd3c87);
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-navigation.lc-nav .wp-block-navigation-item__content:hover,
.lc-nav a:hover,
.lc-nav a:focus-visible {
	color: var(--wp--preset--color--primary, #cd3c87);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* En movil la hamburguesa va a la izquierda del logo, en azul de marca. */
@media (max-width: 61.99rem) {
	.lc-header__superior .lc-nav {
		order: -1;
		flex: 0 0 auto;
	}

	/* nowrap para que hamburguesa, logo e iconos queden en una sola
	   linea; antes los iconos caian a un segundo renglon. */
	.lc-header__superior {
		flex-wrap: nowrap;
		gap: clamp(0.5rem, 3vw, 1rem);
	}

	.lc-header__superior .wp-block-site-logo {
		flex: 0 1 auto;
	}
}

.lc-nav .wp-block-navigation__responsive-container-open,
.lc-nav .wp-block-navigation__responsive-container-close {
	color: var(--lc-azul);
}

.lc-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* El icono del core se sustituye por el de marca via mascara, asi
   conserva el color heredado en lugar de quedar fijo. */
.lc-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: clamp(28px, 7vw, 40px);
	aspect-ratio: 35 / 27;
	background: currentColor;
	mask: url("../svg/icono-menu.svg") no-repeat center / contain;
	-webkit-mask: url("../svg/icono-menu.svg") no-repeat center / contain;
}

.lc-nav .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: clamp(24px, 5vw, 32px);
	height: auto;
}

/* Franja naranja. Sin height: crece con su contenido. */
.lc-header__franja {
	background: var(--lc-naranja);
	gap: clamp(0.75rem, 2vw, 2rem);
	padding: clamp(0.5rem, 1.2vw, 0.875rem) clamp(1rem, 4vw, 4.5rem);
}

.lc-header__franja > * {
	max-width: var(--lc-ancho-max);
}

.lc-entregas {
	gap: 0.5rem;
	align-items: baseline;
}

.lc-entregas__etiqueta {
	font-weight: 900;
	font-size: clamp(0.8125rem, 1.35vw, 1.375rem);
	color: #fff;
	margin: 0;
	white-space: nowrap;
}

/* El pin de ubicacion va como marca tipografica para no depender de un
   SVG externo; se sustituye por el icono del diseno cuando se exporte. */
.lc-entregas__lugar {
	font-weight: 700;
	font-size: clamp(0.875rem, 1.55vw, 1.5625rem); /* 25px al ancho ancla */
	color: var(--wp--preset--color--contrast, #333);
	margin: 0;
}

.lc-cuenta__enlace {
	margin: 0;
	font-weight: 900;
	font-size: clamp(0.8125rem, 1.35vw, 1.375rem);
	text-align: right;
	line-height: 1.05;
}

.lc-cuenta__enlace a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

.lc-cuenta__enlace a:hover {
	text-decoration: underline;
}

/* En movil la franja se apila en lugar de comprimirse. */
@media (max-width: 40rem) {
	.lc-header__franja {
		flex-direction: column;
		align-items: flex-start;
	}

	.lc-cuenta__enlace {
		text-align: left;
	}
}

/* ---------------------------------------------------------------
   Pie
   --------------------------------------------------------------- */

.lc-footer {
	background: var(--lc-turquesa);
	margin-top: auto;
}

/* ---------------------------------------------------------------
   Menu del pie: bloque de navegacion pintado como rectangulos
   Se gestiona desde Apariencia > Editor > Navegacion.
   --------------------------------------------------------------- */

.lc-footer-nav {
	max-width: var(--lc-ancho-max);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 4.25rem) clamp(1rem, 4vw, 4.5rem);
}

.lc-footer-nav .wp-block-navigation__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 3vw, 2.6rem);
	align-items: stretch;
	width: 100%;
}

@media (min-width: 40rem) {
	.lc-footer-nav .wp-block-navigation__container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.lc-footer-nav .wp-block-navigation__container {
		grid-template-columns: repeat(4, 1fr);
	}
}

.lc-footer-nav .wp-block-navigation-item {
	display: flex;
}

/* El rectangulo es el propio enlace: toda la caja es clicable.
   Sin height fija; el minimo lo marca el diseno y crece si el texto
   necesita mas lineas. */
.wp-block-navigation.lc-footer-nav .wp-block-navigation-item__content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: clamp(88px, 14vw, 200px);
	padding: clamp(0.75rem, 2vw, 1.5rem);
	background: var(--lc-turquesa-caja);
	font-weight: 400;
	font-size: clamp(1.125rem, 2.4vw, 2.5rem);
	line-height: 1.15;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.wp-block-navigation.lc-footer-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.wp-block-navigation.lc-footer-nav .wp-block-navigation-item__content:focus-visible {
	background: color-mix(in srgb, var(--lc-turquesa-caja) 82%, #000);
	color: #fff;
	text-decoration: none;
}

.wp-block-navigation.lc-footer-nav .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* En movil el diseno los muestra a sangre, pegados y con el texto a la
   izquierda, no como tarjetas centradas con margen. */
@media (max-width: 39.99rem) {
	.lc-footer-nav {
		padding: 0;
	}

	/* A sangre y sin separacion: las bandas se distinguen por el color,
	   no por el hueco. */
	.lc-footer-nav .wp-block-navigation__container {
		gap: 0;
	}

	.wp-block-navigation.lc-footer-nav .wp-block-navigation-item__content {
		justify-content: flex-start;
		text-align: left;
		min-height: 84px;
		padding-inline: clamp(1rem, 6vw, 2rem);
		font-size: clamp(1.25rem, 5.5vw, 1.75rem);
	}

	/* Bandas alternas. El nth-child va sobre el <li>, asi el patron sigue
	   siendo correcto cuando el cliente anada o quite enlaces del menu. */
	.wp-block-navigation.lc-footer-nav .wp-block-navigation-item:nth-child(even) .wp-block-navigation-item__content {
		background: var(--lc-turquesa-caja-alt);
	}
}

.lc-footer__legal {
	background: var(--lc-gris);
	color: #fff;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 4.5rem);
}

.lc-footer__legal > * {
	max-width: var(--lc-ancho-max);
	margin-inline: auto;
}

.lc-footer__legal p {
	font-size: clamp(0.9375rem, 1.85vw, 1.875rem); /* 30px al ancho ancla */
	line-height: 1.4;
	margin: 0 0 0.9em;
}

.lc-footer__legal p:last-child {
	margin-bottom: 0;
}

.lc-footer__legal a {
	color: #fff;
}

/* ---------------------------------------------------------------
   Iconos de la franja (cuenta y canasta)
   Los SVG reales se exportan de Figma a assets/svg/. Mientras falten,
   se pinta un marcador visible para que se note que hay algo pendiente
   en lugar de dejar un hueco silencioso.
   --------------------------------------------------------------- */

.lc-acciones {
	gap: clamp(0.75rem, 2vw, 1.75rem);
	align-items: center;
}

.lc-acciones__iconos {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

/* El diseno coloca los iconos en la franja naranja en escritorio y en la
   fila blanca en movil. Se imprimen en ambas filas y solo una se muestra. */
.lc-acciones__iconos--movil {
	display: none;
}

.lc-acciones__iconos--movil .lc-icono {
	color: var(--wp--preset--color--primary, #cd3c87);
}

@media (max-width: 61.99rem) {
	.lc-acciones__iconos--escritorio {
		display: none;
	}

	.lc-acciones__iconos--movil {
		display: flex;
	}
}

.lc-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(28px, 2.6vw, 42px);
	color: #fff;
}

.lc-icono {
	position: relative;
}

.lc-icono svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Contador de la canasta. Se renderiza en servidor: si usas cache de
   pagina, purga al anadir al carrito o el numero se quedara atras. */
.lc-icono__contador {
	position: absolute;
	top: -0.45em;
	right: -0.6em;
	min-width: 1.5em;
	padding: 0.1em 0.35em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #cd3c87);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* Pin de ubicacion junto a "ENTREGAS EN" */
.lc-entregas__pin {
	display: inline-flex;
	align-items: center;
	color: #fff;
	width: clamp(12px, 1.1vw, 18px);
	flex: 0 0 auto;
}

.lc-entregas__pin svg {
	width: 100%;
	height: auto;
	display: block;
}

.lc-icono__falta {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: 2px dashed currentColor;
	border-radius: 4px;
	opacity: 0.7;
}

/* ---------------------------------------------------------------
   Enlaces legales de la franja gris, tambien como menu editable
   --------------------------------------------------------------- */

.lc-legal-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.75em;
	align-items: baseline;
}

.lc-legal-nav .wp-block-navigation-item__content {
	color: #fff;
	font-size: clamp(0.9375rem, 1.85vw, 1.875rem);
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Separador " | " entre enlaces, como en el diseno, sin meterlo en el
   texto del menu (asi el cliente no tiene que escribirlo a mano). */
.lc-legal-nav .wp-block-navigation-item:not(:last-child)::after {
	content: "|";
	margin-left: 0.75em;
	text-decoration: none;
	opacity: 0.8;
}