/**
 * Secciones de la portada.
 *
 * Los cinco carruseles comparten un mismo patrón: una pista con desplazamiento
 * horizontal y `scroll-snap`, y unos puntos debajo. Lo que cambia entre ellos
 * es el ancho de la lámina, y eso se declara por sección.
 *
 * El desplazamiento lo hace el navegador. El script sólo pinta los puntos y
 * mueve el hero; sin él, los carruseles siguen funcionando con el dedo.
 */

/* WordPress separa los hijos de un grupo `is-layout-flow` con un
   margin-block-start propio. Las secciones del tema ya traen su ritmo vertical
   en su padding, asi que ese margen solo abre un hueco entre la cabecera y el
   banner que el diseno no tiene. */
/* El propio `main` recibe el mismo margen del layout, y separa la cabecera del
   banner. */
main.wp-block-group.alignfull {
	margin-block-start: 0;
}

.wp-block-group > .flv-hero,
.wp-block-group > .flv-cats,
.wp-block-group > .flv-prods,
.wp-block-group > .flv-resenas,
.wp-block-group > .flv-catban,
.wp-block-group > .flv-trust,
.wp-block-group > .flv-news {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   Patrón común
   --------------------------------------------------------------- */

.flv-carrusel {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--flv-sp-5);
	scroll-padding-right: var(--flv-sp-5);
	padding: 0 var(--flv-sp-5) 4px;

	/* La barra se oculta porque los puntos ya dicen que hay más a los lados, y
	   en escritorio el diseño no la contempla. El desplazamiento por teclado y
	   rueda sigue disponible. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.flv-carrusel::-webkit-scrollbar {
	display: none;
}

.flv-carrusel > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Mientras se arrastra, el cursor lo dice y no se selecciona texto por error. */
.flv-carrusel.is-arrastrando {
	cursor: grabbing;
	user-select: none;
	scroll-behavior: auto;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.flv-carrusel {
		cursor: grab;
	}
}

.flv-puntos {
	display: flex;
	justify-content: center;
	gap: var(--flv-sp-2);
	margin-top: var(--flv-sp-5);
}

.flv-punto {
	padding: 0;
	border: 0;
	cursor: pointer;
	appearance: none;
	width: 7px;
	height: 7px;
	border-radius: var(--flv-radius-pill);
	background: var(--flv-sand-200);
	transition: background var(--flv-dur-fast) var(--flv-ease-out), width var(--flv-dur-fast) var(--flv-ease-out);
}

.flv-punto.is-activo {
	width: 20px;
	background: var(--flv-color-accent);
}

/* ---------------------------------------------------------------
   Cabecera de sección
   --------------------------------------------------------------- */

.flv-seccion__cabecera {
	padding: 0 var(--flv-sp-5);
	margin-bottom: var(--flv-sp-5);
}

.flv-seccion__ante {
	margin: 0 0 6px;
	font-family: var(--flv-font-sans);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--flv-rojo-titulo);
}

.flv-seccion__titulo {
	margin: 0;
	font-family: var(--flv-font-display);
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: var(--flv-fw-regular);
	line-height: 1.2;
	color: var(--flv-espresso-900);
}

.flv-seccion__bajada {
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--flv-brown-800);
}

/* ---------------------------------------------------------------
   Botones
   --------------------------------------------------------------- */

.flv-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--flv-sp-5);
	font-family: var(--flv-font-ui);
	font-size: 16px;
	font-weight: var(--flv-fw-semibold);
	/* Para cuando el texto entra en dos líneas: el justify-content centra la
	   caja del texto, no sus renglones. */
	text-align: center;
	text-decoration: none;
	border-radius: var(--flv-radius-md);
	cursor: pointer;
	transition: background var(--flv-dur-fast) var(--flv-ease-out), color var(--flv-dur-fast) var(--flv-ease-out);
}

/* En el celular, más compactos: la pantalla es angosta y el botón no tiene
   que comerse el ancho ni el alto. */
@media ( max-width: 767px ) {
	.flv-boton {
		min-height: 45px;
		padding: 0 var(--flv-sp-4);
		font-size: 14px;
	}
}

.flv-boton--linea {
	border: 1.5px solid var(--flv-rojo-titulo);
	color: var(--flv-rojo-titulo);
	background: transparent;
}

.flv-boton--linea:hover {
	background: var(--flv-rojo-titulo);
	color: var(--flv-white);
}

.flv-boton--rosa {
	border: 0;
	background: var(--flv-rose-300);
	color: var(--flv-espresso-900);
}

.flv-boton--rosa:hover {
	background: var(--flv-salmon-400);
}

.flv-boton--oscuro {
	border: 0;
	background: var(--flv-espresso-900);
	color: var(--flv-white);
}

.flv-boton--oscuro:hover {
	background: var(--flv-brown-800);
}

/* Marcador cuando falta una imagen, compartido por categorías y banners. */
.flv-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--flv-cream-100);
	font-family: var(--flv-font-display);
	font-size: 44px;
	color: var(--flv-sand-300);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.flv-hero {
	background: var(--flv-color-surface);
}

.flv-hero__pista {
	padding: 0;
	gap: 0;
	scroll-padding: 0;
}

.flv-hero__slide {
	display: block;
	width: 100%;
	scroll-snap-align: center;
}

.flv-hero__img {
	width: 100%;
	height: auto;
	display: block;
}

.flv-hero .flv-puntos {
	margin: var(--flv-sp-3) 0 var(--flv-sp-4);
}

/* ---------------------------------------------------------------
   Carrusel de categorías
   --------------------------------------------------------------- */

.flv-cats {
	padding: var(--flv-sp-6) 0 28px;
	background: var(--flv-color-surface);
}

.flv-cats__item {
	width: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.flv-cats__img {
	width: 130px;
	height: 170px;
	object-fit: contain;
	display: block;
	background: var(--flv-color-surface);
}

.flv-cats__nombre {
	font-family: var(--flv-font-sans);
	font-size: 16px;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--flv-ink-900);
}

/* ---------------------------------------------------------------
   Carrusel de productos
   --------------------------------------------------------------- */

.flv-prods {
	padding: 36px 0 56px;
	background: var(--flv-color-surface);
}

.flv-prods__slide {
	width: 66vw;
	max-width: 300px;
}

.flv-prods__acciones {
	display: flex;
	justify-content: center;
	gap: var(--flv-sp-3);
	margin-top: var(--flv-sp-6);
	padding: 0 var(--flv-sp-5);
}

/* ---------------------------------------------------------------
   Reseñas
   --------------------------------------------------------------- */

.flv-resenas {
	padding: 64px var(--flv-sp-5);
	background: var(--flv-color-surface);
}

.flv-resenas__interior {
	max-width: var(--flv-container);
	margin: 0 auto;
}

.flv-resenas__titulo {
	text-align: center;
	margin-bottom: 18px;
	padding: 0 var(--flv-sp-5);
	font-size: clamp(22px, 3vw, 28px);
}

.flv-resenas__resumen {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-bottom: 28px;
	padding: 0 var(--flv-sp-5);
}

/* Con la sección delante: en la tienda la hoja de WooCommerce pone
   `.woocommerce img { height: auto }`, que pesa más que una clase sola. */
.flv-resenas .flv-resenas__google {
	height: 26px;
	width: auto;
	max-width: none;
	display: block;
}

.flv-resenas__excelente {
	font-family: var(--flv-font-sans);
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--flv-ink-900);
}

.flv-resenas__nota {
	font-family: var(--flv-font-ui);
	font-size: 20px;
	font-weight: var(--flv-fw-bold);
	color: var(--flv-ink-900);
}

.flv-resenas__cuantas {
	font-family: var(--flv-font-sans);
	font-size: 16px;
	color: var(--flv-brown-800);
}

/* El amarillo de Google, no el de la marca: es la nota de un tercero y se
   reconoce por el color. */
.flv-estrellas {
	display: inline-flex;
	gap: 2px;
	color: #FBBC04;
	line-height: 1;
}

.flv-resena {
	position: relative;
	width: 78vw;
	max-width: 360px;
	background: var(--flv-ivory-50);
	padding: 22px;
	border-radius: var(--flv-radius-lg);
	border: 1px solid var(--flv-color-border);
}

.flv-resena__cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.flv-resena__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--flv-radius-pill);
	background: var(--flv-sand-200);
	color: var(--flv-espresso-900);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--flv-font-ui);
	font-weight: var(--flv-fw-bold);
	flex: 0 0 auto;
}

/* Enlace a la ficha real. Sólo aparece con la cuenta de Google vinculada: sin
   ficha no hay adónde llevar a nadie. */
.flv-resenas__enlace {
	font-family: var(--flv-font-sans);
	font-size: 15px;
	color: var(--flv-brown-800);
	text-underline-offset: 3px;
}

.flv-resenas__enlace:hover,
.flv-resenas__enlace:focus-visible {
	color: var(--flv-color-accent);
}

/* Foto de perfil de Google. Ocupa el mismo hueco que la inicial para que la
   cabecera no cambie de alto según la reseña traiga foto o no. */
.flv-resena__avatar--foto {
	object-fit: cover;
	background: var(--flv-sand-200);
}

.flv-resena__quien {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.flv-resena__nombre {
	font-family: var(--flv-font-sans);
	font-size: 16px;
	color: var(--flv-ink-900);
}

.flv-resena__cuando {
	font-size: 14px;
	color: var(--flv-color-text-muted);
}

/* Medidas del prototipo: estrellas a 10px del texto y a 12 de la cabecera, y
   el texto a 16px en tinta. Antes el hueco lo ponía en parte un <p> que
   wpautop metía alrededor de las estrellas; sin él, lo pone esto. */
.flv-resena .flv-estrellas {
	display: flex;
	margin-bottom: 10px;
}

.flv-resena .flv-estrella {
	width: 16px;
	height: 16px;
}

.flv-resena__texto {
	margin: 0;
	font-family: var(--flv-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--flv-ink-900);
}

/* ---------------------------------------------------------------
   Reseñas largas: «Leer más»
   --------------------------------------------------------------- */

/* La casilla queda fuera de la vista pero sigue recibiendo el foco del
   teclado, así el desplegado se maneja sin ratón y sin JavaScript.

   Va anclada a su tarjeta: sin `position: relative` en la tarjeta, una casilla
   absoluta dentro de un carrusel se ubica contra la página y queda tan a la
   derecha como esté su tarjeta en la pista. Con tres reseñas largas eso sumaba
   casi 2.000 px de ancho fantasma y la página entera aparecía con scroll
   horizontal. */
.flv-resena__control {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.flv-resena__resto {
	display: none;
}

.flv-resena__control:checked ~ .flv-resena__texto .flv-resena__resto {
	display: inline;
}

.flv-resena__control:checked ~ .flv-resena__texto .flv-resena__puntos {
	display: none;
}

.flv-resena__mas {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--flv-font-ui);
	font-size: 14px;
	color: var(--flv-burgundy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.flv-resena__mas:hover {
	color: var(--flv-salmon-700);
}

/* El foco se ve en la etiqueta, que es lo que se toca; la casilla no se ve. */
.flv-resena__control:focus-visible ~ .flv-resena__mas {
	outline: 3px solid var(--flv-burgundy-700);
	outline-offset: 3px;
}

.flv-resena__mas-cerrar,
.flv-resena__control:checked ~ .flv-resena__mas .flv-resena__mas-abrir {
	display: none;
}

.flv-resena__control:checked ~ .flv-resena__mas .flv-resena__mas-cerrar {
	display: inline;
}

/* ---------------------------------------------------------------
   Banners de categoría
   --------------------------------------------------------------- */

.flv-catban {
	padding: 44px 0 48px;
	background: var(--flv-color-surface);
}

.flv-catban__card {
	position: relative;
	display: block;
	width: 82vw;
	max-width: 420px;
	aspect-ratio: 3 / 4;
	border-radius: var(--flv-radius-lg);
	overflow: hidden;
	scroll-snap-align: center;
	color: var(--flv-cream-100);
	text-decoration: none;
}

.flv-catban__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--flv-dur-slow) var(--flv-ease-out);
}

.flv-catban__card:hover .flv-catban__img {
	transform: scale( 1.04 );
}

.flv-catban__velo {
	position: absolute;
	inset: 0;
	background: var(--flv-overlay-caption);
}

.flv-catban__nombre {
	position: absolute;
	left: var(--flv-sp-5);
	right: var(--flv-sp-5);
	bottom: var(--flv-sp-5);
	padding-right: 72px;
	font-family: var(--flv-font-display);
	font-size: clamp(21px, 4.8vw, 28px);
	line-height: 1.15;
	color: var(--flv-cream-100);
}

.flv-catban__flecha {
	position: absolute;
	right: var(--flv-sp-5);
	bottom: var(--flv-sp-5);
	width: 52px;
	height: 52px;
	border-radius: var(--flv-radius-pill);
	border: 1.5px solid var(--flv-cream-100);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--flv-cream-100);
}

.flv-catban .flv-ph {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
   Garantías
   --------------------------------------------------------------- */

.flv-trust {
	padding: 40px 0 44px;
	background: var(--flv-color-surface);
	border-top: 1px solid var(--flv-color-border);
	border-bottom: 1px solid var(--flv-color-border);
}

.flv-trust__card {
	width: calc(100vw - 40px);
	max-width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 4px 0 8px;
	scroll-snap-align: center;
}

.flv-trust__titulo {
	margin: 0;
	font-family: var(--flv-font-sans);
	font-size: 17px;
	line-height: 1.35;
	color: var(--flv-ink-900);
}

.flv-trust__texto {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--flv-brown-800);
}

/* ---------------------------------------------------------------
   Boletín
   --------------------------------------------------------------- */

.flv-news {
	padding: 70px var(--flv-sp-5);
	background: var(--flv-rose-300);
	display: flex;
	justify-content: center;
}

.flv-news__interior {
	max-width: 520px;
	width: 100%;
	text-align: center;
}

.flv-news__titulo {
	margin: 0 0 var(--flv-sp-3);
	font-family: var(--flv-font-display);
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: var(--flv-fw-regular);
	color: var(--flv-espresso-900);
}

.flv-news__texto {
	margin: 0 0 26px;
	font-family: var(--flv-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--flv-espresso-900);
}

/* Centrado para cuando el botón baja a su propia línea; mientras entren los
   dos en una, el campo se estira y esto no cambia nada. */
.flv-news__form {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.flv-news__campo {
	flex: 1 1 220px;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--flv-espresso-900);
	border-radius: var(--flv-radius-md);
	background: var(--flv-white);
	font-family: var(--flv-font-sans);
	font-size: 16px;
	color: var(--flv-color-text);
}

.flv-news__campo:focus {
	outline: 2px solid var(--flv-espresso-900);
	outline-offset: 1px;
}

.flv-news__nota {
	margin: 14px 0 0;
	font-size: 16px;
	color: var(--flv-espresso-900);
}

.flv-news__aviso {
	margin: 0 0 var(--flv-sp-4);
	padding: 10px var(--flv-sp-4);
	border-radius: var(--flv-radius-md);
	font-family: var(--flv-font-sans);
	font-size: 15px;
}

.flv-news__aviso--ok {
	background: var(--flv-white);
	color: var(--flv-espresso-900);
}

.flv-news__aviso--error {
	background: var(--flv-color-price);
	color: var(--flv-white);
}

/* ---------------------------------------------------------------
   Reseñas: marco del carrusel
   --------------------------------------------------------------- */

/* El prototipo mide la tarjeta con el padding dentro: 360px en total. Con el
   modelo por defecto medía 406, tres ya no cabían en el contenedor y la
   tercera salía cortada. */
.flv-resena {
	box-sizing: border-box;
}

.flv-resenas__marco {
	margin: 0 auto;
}

/* ---------------------------------------------------------------
   Escritorio
   --------------------------------------------------------------- */

@media ( min-width: 768px ) {
	.flv-carrusel:not( .flv-hero__pista ) {
		padding-left: var(--flv-pad-x);
		padding-right: var(--flv-pad-x);
		scroll-padding-left: var(--flv-pad-x);
		scroll-padding-right: var(--flv-pad-x);
	}

	.flv-seccion__cabecera {
		padding: 0 var(--flv-pad-x);
	}

	.flv-resena {
		width: 360px;
	}

	/* Las reseñas van dentro de un contenedor, no a sangre como los productos.
	   Sin relleno lateral, la primera tarjeta arranca en el borde del bloque y
	   no asoma un trozo de la anterior; y el marco mide justo tres tarjetas y
	   dos huecos, así que en escritorio se ven tres enteras. */
	.flv-resenas .flv-resenas__pista {
		padding-left: 0;
		padding-right: 0;
		scroll-padding-left: 0;
		scroll-padding-right: 0;
	}

	.flv-resenas__marco {
		max-width: calc( 3 * 360px + 2 * 14px );
	}

	.flv-trust__card {
		width: 245px;
	}
}

/* Imagen propia de una garantía, en lugar del icono dibujado. */
.flv-trust__img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	display: block;
}

/* A partir de aquí las secciones dejan de necesitar desplazamiento: caben
   enteras y el carrusel se convierte en una fila centrada. */
@media ( min-width: 1280px ) {
	/* Centrada sólo si cabe. Con `overflow: visible` se centraba siempre, y a
	   1280 justos —1265 útiles descontando la barra de scroll— las tarjetas no
	   entraban y se salían por los dos lados: la página entera se desplazaba
	   en horizontal. Con `safe`, si no cabe se alinea al principio y sigue
	   siendo carrusel; si cabe, el script no clona nada y queda la fila
	   centrada de antes. */
	.flv-trust__pista {
		justify-content: center;
		justify-content: safe center;
	}

	.flv-trust .flv-puntos {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Carruseles de columnas: productos y categorías
   --------------------------------------------------------------- */

/* Las dos secciones van a sangre, con el mismo margen lateral que su título,
   y las tarjetas se reparten el ancho en columnas enteras: nunca asoma media
   tarjeta por un lado. Cuántas columnas depende de la pantalla, para que cada
   tarjeta quede entre unos 260 y 410px: 2 en tableta vertical, 3 desde 900, 4
   desde 1280 (a 1440, unos 320px), 5 desde 1680 y 6 desde 2200. En móvil
   siguen el patrón del prototipo: una tarjeta y el borde de las vecinas.

   El marco pone el margen y recorta: la pista no lleva relleno, así que lo que
   cae fuera de las columnas visibles no se ve. */
@media ( min-width: 768px ) {
	.flv-prods,
	.flv-catban {
		--flv-cols: 2;
	}

	.flv-prods__marco,
	.flv-catban__marco {
		padding-left: var(--flv-pad-x);
		padding-right: var(--flv-pad-x);
	}

	.flv-prods .flv-prods__pista,
	.flv-catban .flv-catban__pista {
		padding-left: 0;
		padding-right: 0;
		scroll-padding-left: 0;
		scroll-padding-right: 0;
	}

	/* El porcentaje se resuelve contra la pista, que mide el ancho útil.

	   Con menos tarjetas que columnas —cinco categorías en una pantalla de
	   seis— se reparten entre las que hay y ocupan todo el ancho: centradas y
	   con aire a los lados, parecía que la sección tenía un ancho máximo. El
	   número de tarjetas lo pone cada sección en --flv-items. */
	.flv-prods__slide,
	.flv-catban__card {
		--flv-n: min( var(--flv-cols), var(--flv-items, 99) );

		width: calc( ( 100% - ( var(--flv-n) - 1 ) * 14px ) / var(--flv-n) );
		max-width: none;
	}

	/* En móvil la tarjeta de categoría encaja centrada; en columnas, al borde. */
	.flv-catban__card {
		scroll-snap-align: start;
	}
}

@media ( min-width: 900px ) {
	.flv-prods,
	.flv-catban {
		--flv-cols: 3;
	}
}

@media ( min-width: 1280px ) {
	.flv-prods,
	.flv-catban {
		--flv-cols: 4;
	}
}

@media ( min-width: 1680px ) {
	.flv-prods,
	.flv-catban {
		--flv-cols: 5;
	}
}

@media ( min-width: 2200px ) {
	.flv-prods,
	.flv-catban {
		--flv-cols: 6;
	}
}