/*
 * La Canasta - secciones de la pagina Inicio.
 *
 * Valores tomados de Figma: 228:397 tarjeta destacada, 228:387 categoria,
 * 228:375 titulo de seccion, 228:395 y 228:396 titulos amarillos,
 * 231:566 banda de promociones.
 *
 * REGLA: ninguna seccion lleva `height`. Las alturas del lienzo de Figma
 * son medidas del artboard, no especificaciones.
 */

:root {
	--lc-azul-texto: var(--wp--preset--color--azul-texto, #0075b9);
	--lc-amarillo: var(--wp--preset--color--amarillo, #f4cc25);
	--lc-magenta-flor: var(--wp--preset--color--magenta-flor, #b22472);
	--lc-naranja-promos: #f28c00;
	--lc-radio-tarjeta-grande: 24px;

	/* Margen lateral que centra el contenido a 1280 sin que el fondo
	   pierda el sangrado completo. */
	--lc-margen-fluido: max(clamp(1rem, 4vw, 4.5rem), calc((100% - var(--lc-ancho-max)) / 2));
}

/* ---------------------------------------------------------------
   Secciones a sangre, pegadas entre si
   Los huecos blancos entre bloques venian del blockGap que WordPress
   aplica a los hijos del contenido. Se anulan solo en las secciones
   del tema, sin tocar el espaciado del resto del editor.
   --------------------------------------------------------------- */

.lc-seccion-full {
	position: relative;
}

/*
 * El hueco blanco venia de tres sitios a la vez: el blockGap que WordPress
 * pone entre los hijos de .wp-site-blocks (header / main / footer), el que
 * pone entre los bloques del contenido, y el margen propio del contenedor
 * del contenido. Las tres reglas del core se generan con `:where()` o con
 * clases de contenedor variables, asi que se anulan de forma explicita.
 * Es uno de los pocos sitios del tema donde !important esta justificado.
 */
.wp-site-blocks > main,
main > .wp-block-post-content,
main > .entry-content {
	margin-block: 0 !important;
}

.lc-seccion-full,
.wp-site-blocks .lc-seccion-full,
.entry-content .lc-seccion-full,
.wp-block-post-content .lc-seccion-full {
	margin-block: 0 !important;
}

/* Los hijos DIRECTOS de una seccion a sangre tampoco separan; el
   contenido interior conserva su propio ritmo vertical. */
.lc-seccion-full > .wp-block-group {
	margin-block: 0;
}

/* Una seccion pegada a otra nunca deja hueco, sea cual sea el contenedor
   que las envuelva. */
.lc-seccion-full + .lc-seccion-full {
	margin-block-start: 0 !important;
}

/* Al insertar patrones, el editor suele dejar un parrafo vacio entre
   bloques. No se ve, pero ocupa alto y abre una franja blanca. */
.wp-block-post-content > p:empty,
.entry-content > p:empty {
	display: none;
}

/* Contenedor interno: el fondo va a sangre, el contenido se centra. */
.lc-contenido {
	max-width: var(--lc-ancho-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 4.5rem);
}

/* ---------------------------------------------------------------
   Cabecera: la franja naranja tambien centra su contenido
   --------------------------------------------------------------- */

.lc-header__franja {
	padding-inline: var(--lc-margen-fluido);
}

/* ---------------------------------------------------------------
   Titulos de seccion
   --------------------------------------------------------------- */

.lc-titulo-seccion,
.lc-titulo-amarillo {
	font-weight: 900;
	font-size: clamp(2rem, 5.5vw, 4.375rem); /* 70px al ancho ancla */
	line-height: 1.08;
	text-align: center;
	margin: 0 0 clamp(1.5rem, 4vw, 3.5rem);
}

.lc-titulo-seccion {
	color: var(--wp--preset--color--primary, #cd3c87);
}

.lc-titulo-amarillo {
	color: var(--lc-amarillo);
}

.lc-titulo-contacto {
	margin-top: clamp(3rem, 8vw, 6rem);
}

/* ---------------------------------------------------------------
   1. Buscador
   Fondo magenta a sangre; las flores y el campo se limitan al ancho
   maximo del contenido.
   --------------------------------------------------------------- */

.lc-buscador {
	background-color: var(--wp--preset--color--primary, #cd3c87);
}

/*
 * La imagen de flores mide 1280x179. Si la franja solo crece con el alto
 * del input, la imagen se recorta y no se ven las flores de arriba y abajo.
 * El `min-height` reproduce esa proporcion (179/1280 = 13.98%) y el input
 * se centra dentro.
 */
.lc-buscador__interior {
	position: relative;
	display: grid;
	place-items: center;
	max-width: var(--lc-ancho-max);
	margin-inline: auto;
	min-height: clamp(104px, 13.98vw, 179px);
	padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
	padding-inline: clamp(1rem, 4vw, 4.5rem);
	background: url("../img/flores-buscador.png") no-repeat center center / cover;
}

.lc-buscador__interior > * {
	width: 100%;
}

.lc-buscador__campo {
	max-width: 651px;
	margin-inline: auto;
}

.lc-buscador .wp-block-search__inside-wrapper {
	background: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.3rem 0.3rem 0.3rem 1.25rem;
}

.lc-buscador .wp-block-search__input {
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: clamp(0.9375rem, 1.4vw, 1.3125rem);
	color: var(--wp--preset--color--contrast, #333);
	padding-block: 0.55rem;
}

.lc-buscador .wp-block-search__input:focus {
	outline: none;
}

.lc-buscador .wp-block-search__inside-wrapper:focus-within {
	outline: 3px solid var(--lc-amarillo);
	outline-offset: 2px;
}

/* Boton amarillo, como en Figma. */
.lc-buscador .wp-block-search__button,
.lc-buscador .wp-block-search__button.has-icon {
	background: var(--lc-amarillo);
	color: var(--wp--preset--color--contrast, #333);
	border: 0;
	border-radius: 999px;
	padding: 0.55rem 1rem;
	margin: 0;
}

.lc-buscador .wp-block-search__button svg {
	fill: currentColor;
}

.lc-buscador .wp-block-search__button:hover {
	background: color-mix(in srgb, var(--lc-amarillo) 86%, #000);
}

/* ---------------------------------------------------------------
   2. Textura de papel
   Envuelve carrusel y categorias para que el fondo corra sin corte.
   --------------------------------------------------------------- */

/*
 * La textura NO se repite. Al teselarla en vertical, el borde inferior de
 * la imagen no empalma con el superior y aparecia una linea blanca en cada
 * repeticion, muy visible en movil, donde la seccion es mucho mas alta.
 * `cover` la escala para cubrir toda la seccion: al ser un grano irregular,
 * el estirado no se nota.
 */
.lc-textura {
	z-index: 1;
	background-color: #f2f2f2;
	background-image: url("../img/textura.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.lc-textura > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------
   3. Carrusel
   En Figma la segunda tarjeta arranca en x=1017 sobre un lienzo de
   1280: se sale a proposito, o sea que es un carrusel horizontal.
   Se resuelve con scroll-snap, sin JavaScript.
   --------------------------------------------------------------- */

.lc-destacados {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/*
 * La pista se limita al ancho del contenido: solo se ven las tarjetas que
 * caben dentro de la seccion, y el resto queda recortado. Se sigue pudiendo
 * desplazar con el dedo, la rueda o el teclado, pero sin barra visible.
 */
.lc-destacados__pista {
	display: flex;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: var(--lc-ancho-max);
	margin-inline: auto;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: clamp(1rem, 4vw, 4.5rem);
	padding-inline: clamp(1rem, 4vw, 4.5rem);
	padding-block-end: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lc-destacados__pista::-webkit-scrollbar {
	display: none;
}

/* Diapositiva de imagen completa. Acepta cualquier numero de imagenes:
   basta anadir bloques de imagen dentro del grupo desde el editor. */
.lc-destacados__pista .lc-diapositiva,
.lc-destacados__pista > .wp-block-image {
	flex: 0 0 clamp(260px, 33vw, 423px);
	scroll-snap-align: start;
	margin: 0;
}

.lc-destacados__pista .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-radio-tarjeta-grande);
}

/* Al ponerle enlace desde la barra de herramientas, el bloque de imagen
   envuelve la etiqueta en <a>: el radio debe aplicarse tambien ahi. */
.lc-destacados__pista .wp-block-image a {
	display: block;
	border-radius: var(--lc-radio-tarjeta-grande);
	overflow: hidden;
}

.lc-destacados__pista .wp-block-image a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #cd3c87);
	outline-offset: 3px;
}

/* Tarjeta compuesta (variante con texto editable) */
.lc-tarjeta-destacada {
	flex: 0 0 clamp(260px, 33vw, 423px);
	scroll-snap-align: start;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--lc-turquesa, #10d2df);
	border-radius: var(--lc-radio-tarjeta-grande);
	padding: clamp(1.5rem, 3.2vw, 2.5rem);
	overflow: hidden;
	aspect-ratio: 423 / 648;
}

.lc-tarjeta-destacada__titulo {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 5.4vw, 4.375rem);
	line-height: 1.02;
	text-transform: uppercase;
}

.lc-tarjeta-destacada__titulo span {
	font-weight: 700;
}

.lc-tarjeta-destacada__titulo strong {
	font-weight: 900;
}

.lc-tarjeta-destacada__fotos {
	position: relative;
	margin-top: auto;
	min-height: 42%;
}

.lc-tarjeta-destacada__fotos .lc-foto {
	position: absolute;
	margin: 0;
}

.lc-tarjeta-destacada__fotos .lc-foto img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 2px 2px 3px rgb(0 0 0 / 30%);
}

.lc-foto--a {
	left: 0;
	bottom: 0;
	width: 62%;
	transform: rotate(17.54deg);
	transform-origin: bottom left;
	z-index: 1;
}

.lc-foto--b {
	right: 6%;
	bottom: 4%;
	width: 34%;
	transform: rotate(-15.39deg);
	transform-origin: bottom right;
	z-index: 2;
}

/* ---------------------------------------------------------------
   4. Categorias del Mercadito
   Tarjeta blanca con la imagen sobresaliendo por arriba.
   --------------------------------------------------------------- */

.lc-seccion-mercadito {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.lc-categorias {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
	justify-items: center;
	/* Aire arriba para que la imagen que sobresale no quede cortada. */
	padding-top: clamp(3rem, 7vw, 6rem);
}

@media (min-width: 40rem) {
	.lc-categorias {
		grid-template-columns: repeat(2, 1fr);
	}
}

.lc-categoria {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	width: 100%;
	max-width: 388px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgb(0 0 0 / 10%);
	padding: clamp(1.25rem, 2.6vw, 2rem);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lc-categoria:hover,
.lc-categoria:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgb(0 0 0 / 16%);
}

/* La imagen rebasa el borde superior de la tarjeta: es el efecto del
   diseno. Se consigue con margen negativo, no recortando la tarjeta. */
.lc-categoria__media {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	margin-top: clamp(-4.5rem, -9vw, -2.5rem);
}

.lc-categoria__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(4.76px 4.76px 6.8px rgb(0 0 0 / 30%));
}

.lc-categoria__nombre {
	font-weight: 500;
	font-size: clamp(1.5rem, 3.9vw, 3.125rem); /* 50px al ancho ancla */
	line-height: 1.1;
	text-align: center;
	color: var(--lc-azul-texto);
}

.lc-categoria:hover .lc-categoria__nombre {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------
   5. Promociones
   Banda naranja inclinada -2.84deg con el texto en marquesina.
   --------------------------------------------------------------- */

/*
 * La banda gira y se ensancha por encima del 100%, asi que desbordaba a la
 * derecha y abria scroll horizontal. Se recorta SOLO en el eje X: en Y sigue
 * visible para que pueda montar sobre la seccion de arriba.
 */
.lc-promos {
	background: #fff;
	padding-block-end: clamp(2.5rem, 6vw, 4.5rem);
	z-index: 2;
	overflow-x: clip;
	overflow-y: visible;
}

/*
 * La banda monta sobre la seccion de arriba, como en el diseno: mitad
 * encima de la textura y mitad sobre el blanco de promociones. El margen
 * superior negativo la saca de su seccion y el z-index la deja delante.
 */
.lc-marquesina {
	position: relative;
	z-index: 3;
	background: var(--lc-naranja-promos);
	transform: rotate(-2.84deg);
	/* Se ensancha mas del 100% para que al girar no queden esquinas
	   vacias en los extremos. */
	width: 108%;
	margin-inline: -4%;
	margin-block-start: clamp(-5rem, -6vw, -2.5rem);
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(0.5rem, 1.4vw, 1rem);
	overflow: hidden;
}

.lc-marquesina__pista {
	display: flex;
	width: max-content;
	animation: lc-desliza 28s linear infinite;
}

.lc-marquesina__pista span {
	white-space: nowrap;
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.25rem, 3.9vw, 3.125rem); /* 50px al ancho ancla */
	line-height: 1.4;
	padding-inline-end: 1rem;
}

@keyframes lc-desliza {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Respeta a quien pide menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.lc-marquesina__pista {
		animation: none;
	}
}

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

.lc-promos__imagen {
	margin: 0;
}

.lc-promos__imagen img {
	display: block;
	width: 100%;
	height: auto;
}

.lc-promos__accion {
	margin-top: clamp(1.5rem, 4vw, 3rem);
}

.lc-boton-promos .wp-block-button__link {
	background: var(--wp--preset--color--primary, #cd3c87);
	color: #fff;
	font-weight: 700;
	font-size: clamp(1rem, 2.2vw, 1.75rem);
	border-radius: 12px;
	padding: 0.6em 1.6em;
}

.lc-boton-promos .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #cd3c87) 88%, #000);
}

/* ---------------------------------------------------------------
   6. Somos La Canasta Imports y Contacto
   Comparten el fondo magenta con flores, sin corte entre ambos.
   El fondo no se pudo exportar como una sola imagen, asi que se
   reconstruye por capas: color de marca y los PNG de flores encima.
   --------------------------------------------------------------- */

.lc-somos {
	background-color: var(--wp--preset--color--primary, #cd3c87);
	padding-block: clamp(3rem, 8vw, 6.5rem);
	isolation: isolate;
	overflow: clip;
}

.lc-somos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("../img/flores.png"),
		url("../img/flor.png"),
		url("../img/flor-pequena.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:
		center top,
		right -6% top 42%,
		left 4% bottom 8%;
	background-size:
		100% auto,
		clamp(160px, 26vw, 448px) auto,
		clamp(100px, 16vw, 274px) auto;
}

/* En movil las flores laterales estorban la lectura: se deja solo la
   banda superior, que es la que da el caracter. */
@media (max-width: 48rem) {
	.lc-somos::before {
		background-image: url("../img/flores.png");
		background-position: center top;
		background-size: 160% auto;
	}
}

.lc-somos__texto {
	max-width: 62ch;
	margin: 0 auto;
	color: #fff;
	text-align: center;
	font-size: clamp(1rem, 1.8vw, 1.5rem);
	line-height: 1.45;
}

.lc-somos__sello {
	margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	justify-content: center;
}

.lc-sello {
	display: block;
	flex: 0 0 auto;
	width: clamp(88px, 12vw, 153px);
	color: #fff;
}

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

.lc-somos__lema {
	margin: 0;
	flex: 1 1 22ch;
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.25rem, 3.2vw, 2.5rem);
	line-height: 1.15;
}

@media (max-width: 48rem) {
	.lc-somos__sello {
		flex-direction: column;
		text-align: center;
	}
}

/* Contacto */
.lc-contacto {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	color: #fff;
}

@media (min-width: 62rem) {
	.lc-contacto {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.lc-contacto__datos {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	align-items: flex-start;
}

.lc-contacto__foto {
	margin: 0;
	justify-self: center;
}

.lc-contacto__foto img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 420px;
	border-radius: 12px;
}

.lc-contacto__dato {
	margin: 0;
	color: #fff;
	font-size: clamp(1rem, 1.9vw, 1.625rem);
	line-height: 1.35;
}

.lc-contacto__dato a {
	color: #fff;
	text-decoration: none;
}

.lc-contacto__dato a:hover,
.lc-contacto__dato a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.lc-rrss {
	display: block;
	width: clamp(96px, 10vw, 124px);
	flex: 0 0 auto;
}

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

@media (max-width: 48rem) {
	.lc-contacto {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}