/*
 * LibraPress: CSS base de los componentes del plugin (prefijo lp-).
 *
 * Usa SOLO los tokens del contrato (docs/arquitectura.md), siempre con un valor de respaldo, para
 * verse bien con cualquier tema. El tema pule encima; una variación de estilo cambia los tokens y
 * todo el sitio la sigue. Pensado para celular (390 px), tableta y escritorio.
 */

:root {
	/* Colores. */
	--lp-marca: var(--wp--preset--color--marca, #1f3a5f);
	--lp-marca-hondo: var(--wp--preset--color--marca-hondo, #152a45);
	--lp-marca-suave: var(--wp--preset--color--marca-suave, #e8eef6);
	--lp-fondo: var(--wp--preset--color--fondo, #f5f6f8);
	--lp-borde: var(--wp--preset--color--borde, #d8dde4);
	--lp-tinta: var(--wp--preset--color--tinta, #1a1d21);
	--lp-suave: var(--wp--preset--color--texto-suave, #565f6b);
	--lp-accion: var(--wp--preset--color--accion, #1a7f45);
	--lp-blanco: var(--wp--preset--color--blanco, #fff);
	/* Tamaños de letra. */
	--lp-fs-chica: var(--wp--preset--font-size--chica, 0.875rem);
	--lp-fs-base: var(--wp--preset--font-size--base, 1rem);
	--lp-fs-media: var(--wp--preset--font-size--media, 1.2rem);
	--lp-fs-grande: var(--wp--preset--font-size--grande, 1.65rem);
	--lp-fs-titular: var(--wp--preset--font-size--titular, 2.5rem);
	/* Espacios. */
	--lp-esp-20: var(--wp--preset--spacing--20, 0.5rem);
	--lp-esp-30: var(--wp--preset--spacing--30, 0.75rem);
	--lp-esp-40: var(--wp--preset--spacing--40, 1rem);
	--lp-esp-50: var(--wp--preset--spacing--50, 1.5rem);
	--lp-esp-60: var(--wp--preset--spacing--60, 2.5rem);
	/* Forma. */
	--lp-radio: var(--wp--custom--radio, 10px);
	--lp-radio-grande: var(--wp--custom--radio-grande, 16px);
	--lp-sombra: var(--wp--custom--sombra, 0 12px 28px -14px rgb(20 30 50 / 30%));
	/* Tipografías. */
	--lp-fuente: var(--wp--preset--font-family--texto, inherit);
	--lp-fuente-titulos: var(--wp--preset--font-family--titulos, inherit);
	/* Propios del plugin (no cambian con el tema). */
	--lp-campo-alto: 2.9rem;
	--lp-sale: cubic-bezier(0.16, 1, 0.3, 1);
	--lp-ok-fondo: #e4f1ea;
	--lp-ok-texto: #0f5a33;
	--lp-error-fondo: #fbe9e4;
	--lp-error-texto: #8a2a12;
	--lp-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ base */

.lp-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.lp-ico { width: 1.15em; height: 1.15em; flex: none; }
.lp-ico--izq { transform: scaleX(-1); }
:is(a, button, summary)[class*="lp-"]:focus-visible,
.lp-campo :is(input, select, textarea):focus-visible { outline: 2px solid var(--lp-marca); outline-offset: 2px; }
.lp-principal { padding-block: var(--lp-esp-50) var(--lp-esp-60); }

/* ------------------------------------------------------------ botones */

.lp-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1.15rem;
	border: 1.5px solid var(--lp-borde);
	border-radius: var(--lp-radio);
	background: var(--lp-blanco);
	color: var(--lp-tinta);
	font: inherit;
	font-size: var(--lp-fs-base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
}
.lp-boton:hover { border-color: var(--lp-tinta); color: var(--lp-tinta); }
.lp-boton--marca { background: var(--lp-marca); border-color: var(--lp-marca); color: var(--lp-blanco); }
.lp-boton--marca:hover { background: var(--lp-marca-hondo); border-color: var(--lp-marca-hondo); color: var(--lp-blanco); }
.lp-boton--accion { background: var(--lp-accion); border-color: var(--lp-accion); color: var(--lp-blanco); }
.lp-boton--accion:hover { background: color-mix(in srgb, var(--lp-accion) 84%, black); border-color: color-mix(in srgb, var(--lp-accion) 84%, black); color: var(--lp-blanco); }
.lp-boton--ancho { width: 100%; }
.lp-boton .lp-ico { width: 1.1rem; height: 1.1rem; }

/* ------------------------------------------------------------ campos de formulario */

.lp-campo { display: grid; gap: 0.35rem; min-width: 0; }
.lp-campo > label,
.lp-campo__rotulo { font-size: var(--lp-fs-chica); font-weight: 600; color: var(--lp-suave); }
.lp-campo :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	width: 100%;
	min-height: var(--lp-campo-alto);
	padding: 0 0.9rem;
	border: 1.5px solid var(--lp-borde);
	border-radius: var(--lp-radio);
	background-color: var(--lp-blanco);
	color: var(--lp-tinta);
	font: inherit;
	font-size: var(--lp-fs-base);
}
.lp-campo textarea { padding-block: 0.7rem; min-height: 8rem; resize: vertical; }
.lp-campo select {
	appearance: none;
	padding-right: 2.3rem;
	background-image: var(--lp-flecha);
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	text-overflow: ellipsis;
	cursor: pointer;
}
.lp-campo :is(input, select, textarea):focus { border-color: var(--lp-marca); }
.lp-campo :is(input, select, textarea)::placeholder { color: var(--lp-suave); opacity: 1; }
.lp-campo--check > label { display: flex; align-items: center; gap: 0.55rem; min-height: var(--lp-campo-alto); color: var(--lp-tinta); font-size: var(--lp-fs-base); font-weight: 500; cursor: pointer; }
.lp-campo--check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--lp-marca); }
.lp-campo__junto { display: flex; gap: 0.5rem; }

/* ------------------------------------------------------------ avisos, etiquetas y chips */

.lp-aviso,
.lp-consulta__aviso { margin: 0 0 var(--lp-esp-40); padding: 0.85rem 1rem; border-radius: var(--lp-radio); background: var(--lp-fondo); color: var(--lp-tinta); font-weight: 600; }
.lp-aviso--ok,
.lp-consulta__aviso--ok { background: var(--lp-ok-fondo); color: var(--lp-ok-texto); }
.lp-aviso--error,
.lp-consulta__aviso--error { background: var(--lp-error-fondo); color: var(--lp-error-texto); }
.lp-aviso--editor { border: 1.5px dashed var(--lp-borde); background: transparent; color: var(--lp-suave); font-weight: 500; }

.lp-etiqueta {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--lp-marca-suave);
	color: var(--lp-marca-hondo);
	font-size: var(--lp-fs-chica);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
a.lp-etiqueta:hover { background: var(--lp-marca); color: var(--lp-blanco); }
.lp-chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.7rem;
	border: 1.5px solid var(--lp-borde);
	border-radius: 999px;
	background: var(--lp-blanco);
	color: var(--lp-tinta);
	font-size: var(--lp-fs-chica);
	line-height: 1.3;
}
.lp-chip__etiqueta { color: var(--lp-suave); }

/* ------------------------------------------------------------ listado y grilla */

.lp-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
}
.lp-grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999px) { .lp-grilla--3, .lp-grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lp-grilla--2, .lp-grilla--3, .lp-grilla--4 { grid-template-columns: minmax(0, 1fr); } }

.lp-listado__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--lp-esp-30) var(--lp-esp-50); margin-bottom: var(--lp-esp-50); }
.lp-listado__titulo { margin: 0; font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-grande); line-height: 1.15; text-wrap: balance; }
h1.lp-listado__titulo { font-size: clamp(1.6rem, 3vw, var(--lp-fs-grande)); }
.lp-listado__bajada { margin: 0.35rem 0 0; color: var(--lp-suave); }
.lp-listado__total { margin: 0; color: var(--lp-suave); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-listado__vacio { padding: var(--lp-esp-60) var(--lp-esp-50); border: 1.5px dashed var(--lp-borde); border-radius: var(--lp-radio-grande); text-align: center; }
.lp-listado__vacio-titulo { margin: 0 0 0.4rem; font-size: var(--lp-fs-media); font-weight: 700; }
.lp-listado__vacio-ayuda { max-width: 32rem; margin: 0 auto var(--lp-esp-50); color: var(--lp-suave); }
.lp-listado__vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }

.lp-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: var(--lp-esp-60); }
.lp-paginas__item {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.6rem;
	border: 1.5px solid var(--lp-borde);
	border-radius: var(--lp-radio);
	background: var(--lp-blanco);
	color: var(--lp-tinta);
	font-weight: 700;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
a.lp-paginas__item:hover { border-color: var(--lp-tinta); color: var(--lp-tinta); }
.lp-paginas__item[aria-current] { background: var(--lp-marca); border-color: var(--lp-marca); color: var(--lp-blanco); }
.lp-paginas__salto { align-self: center; color: var(--lp-suave); }

/* ------------------------------------------------------------ tarjeta */

.lp-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--lp-blanco);
	border: 1.5px solid var(--lp-borde);
	border-radius: var(--lp-radio-grande);
	transition: box-shadow 0.3s var(--lp-sale), transform 0.3s var(--lp-sale), border-color 0.2s ease-out;
}
.lp-tarjeta:hover { box-shadow: var(--lp-sombra); transform: translateY(-2px); }
.lp-tarjeta:focus-within { border-color: var(--lp-marca); }
.lp-tarjeta__foto {
	position: relative;
	aspect-ratio: var(--lp-aspecto, 4/3);
	overflow: hidden;
	border-radius: calc(var(--lp-radio-grande) - 1.5px) calc(var(--lp-radio-grande) - 1.5px) 0 0;
	background: var(--lp-fondo);
}
.lp-tarjeta__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-tarjeta__sin-foto {
	display: grid;
	place-items: center;
	height: 100%;
	background: linear-gradient(135deg, var(--lp-marca-suave), var(--lp-fondo));
	color: var(--lp-marca);
	font-family: var(--lp-fuente-titulos);
	font-size: clamp(2.5rem, 8vw, 4rem);
	font-weight: 700;
	opacity: 0.8;
}
.lp-tarjeta__cinta {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
	background: var(--lp-marca);
	color: var(--lp-blanco);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.lp-tarjeta__cuerpo { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.05rem 1.2rem 1.15rem; }
.lp-tarjeta--sin-imagen .lp-tarjeta__cuerpo { padding-top: 1.3rem; }
.lp-tarjeta__terminos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.lp-tarjeta__codigo { margin: 0; color: var(--lp-suave); font-size: var(--lp-fs-chica); font-variant-numeric: tabular-nums; }
.lp-tarjeta__titulo { margin: 0; font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-media); line-height: 1.28; text-wrap: balance; overflow-wrap: anywhere; }
.lp-tarjeta__enlace { color: var(--lp-tinta); text-decoration: none; }
.lp-tarjeta__enlace:hover { color: var(--lp-marca); }
/* El enlace del título cubre toda la tarjeta: un solo destino, sin enlaces anidados. */
.lp-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--lp-radio-grande); }
.lp-tarjeta__enlace:focus-visible { outline: none; }
.lp-tarjeta__enlace:focus-visible::after { outline: 2px solid var(--lp-marca); outline-offset: 2px; }
.lp-tarjeta__bajada {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	overflow: hidden;
	color: var(--lp-suave);
	font-size: var(--lp-fs-chica);
	line-height: 1.55;
}
.lp-tarjeta__datos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.lp-tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.8rem; border-top: 1.5px solid var(--lp-borde); }
.lp-tarjeta__precio { margin: 0; color: var(--lp-marca); font-size: var(--lp-fs-media); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lp-tarjeta__precio--consultar { color: var(--lp-suave); font-size: var(--lp-fs-base); font-weight: 600; }
.lp-tarjeta__wa {
	position: relative;
	z-index: 2;
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	border: 1.5px solid var(--lp-borde);
	border-radius: 50%;
	color: var(--lp-accion);
	transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
}
.lp-tarjeta__wa:hover { background: var(--lp-accion); border-color: var(--lp-accion); color: var(--lp-blanco); }

/* ------------------------------------------------------------ buscador */

.lp-buscador__form { margin: 0; }
.lp-buscador__limpiar { color: var(--lp-suave); font-size: var(--lp-fs-chica); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.lp-buscador__limpiar:hover { color: var(--lp-marca); }
.lp-campo--texto { position: relative; }
.lp-campo--texto .lp-ico { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--lp-suave); pointer-events: none; }
.lp-campo.lp-campo--texto input[type] { padding-left: 2.6rem; } /* le gana a .lp-campo :is(input:not(…)) */

/* Barra: una fila de filtros sobre el listado. */
.lp-buscador--barra .lp-buscador__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lp-buscador--barra .lp-buscador__mas { margin-top: 0.6rem; }
.lp-buscador--barra .lp-buscador__mas > summary { display: inline-flex; align-items: center; min-height: 2.25rem; cursor: pointer; font-size: var(--lp-fs-chica); font-weight: 700; color: var(--lp-marca); }
.lp-buscador--barra .lp-buscador__fila--mas { padding-top: 0.5rem; }
.lp-buscador--barra .lp-campo { gap: 0; }
.lp-buscador--barra .lp-campo :is(input:not([type="checkbox"], [type="radio"]), select) { min-height: 2.75rem; border-radius: 999px; font-size: var(--lp-fs-chica); font-weight: 600; }
.lp-buscador--barra .lp-campo select { width: auto; min-width: 8rem; max-width: 15rem; padding-left: 1rem; padding-right: 2.4rem; }
.lp-buscador--barra .lp-campo--texto { flex: 1 1 11rem; min-width: 10.5rem; max-width: 24rem; }
.lp-buscador--barra .lp-campo--texto input { background-color: var(--lp-fondo); font-weight: 500; }
.lp-buscador--barra .lp-campo > input[type="number"],
.lp-buscador--barra .lp-campo > input[type="text"] { width: 10.5rem; padding-inline: 1rem; }
.lp-buscador--barra .lp-campo--rango { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.lp-buscador--barra .lp-campo--rango .lp-campo__rotulo { white-space: nowrap; }
.lp-buscador--barra .lp-campo--rango input { width: 6rem; padding-inline: 0.8rem; }
.lp-buscador--barra .lp-campo--check > label { min-height: 2.75rem; padding-inline: 0.5rem; font-size: var(--lp-fs-chica); font-weight: 600; }
.lp-buscador--barra .lp-buscador__buscar { border-radius: 999px; padding: 0 1.3rem; }
/* Filtro aplicado: borde oscuro. */
.lp-buscador--barra .lp-campo:has(select option:checked:not([value=""])) select,
.lp-buscador--barra .lp-campo__junto:has(input:not(:placeholder-shown)) input { border-color: var(--lp-tinta); }
@media (max-width: 899px) {
	/* La barra se desliza de costado y el borde derecho se desvanece para avisar que hay más. */
	.lp-buscador--barra .lp-buscador__fila:not(.lp-buscador__fila--mas) {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	}
	.lp-buscador--barra .lp-buscador__fila:not(.lp-buscador__fila--mas)::-webkit-scrollbar { display: none; }
	.lp-buscador--barra .lp-buscador__fila:not(.lp-buscador__fila--mas)::after { content: ""; flex: 0 0 2rem; }
	.lp-buscador--barra .lp-campo,
	.lp-buscador--barra .lp-buscador__buscar,
	.lp-buscador--barra .lp-buscador__limpiar { flex: none; }
	.lp-buscador--barra .lp-campo--texto { flex: 0 0 14.5rem; }
}

/* Portada: una caja con los filtros a la vista y el resto en «Más filtros». */
.lp-buscador--portada .lp-buscador__form {
	max-width: 56rem;
	padding: var(--lp-esp-40);
	background: var(--lp-blanco);
	border: 1.5px solid var(--lp-borde);
	border-radius: var(--lp-radio-grande);
	box-shadow: var(--lp-sombra);
}
.lp-buscador__fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--lp-esp-30); }
.lp-buscador__fila > .lp-campo { flex: 1 1 10rem; }
.lp-buscador__fila > .lp-campo--texto { flex: 2 1 14rem; }
.lp-buscador__fila > .lp-campo--rango { flex: 1 1 14rem; }
.lp-buscador__fila .lp-campo__junto input { min-width: 0; flex: 1; }
.lp-buscador--portada .lp-buscador__buscar { flex: 0 0 auto; min-height: var(--lp-campo-alto); padding-inline: 1.5rem; }
.lp-buscador__mas { margin-top: var(--lp-esp-30); }
.lp-buscador__mas > summary { display: inline-block; padding: 0.4rem 0; color: var(--lp-marca); font-size: var(--lp-fs-chica); font-weight: 700; cursor: pointer; }
.lp-buscador__fila--mas { margin-top: var(--lp-esp-20); }
.lp-buscador--portada .lp-buscador__limpiar { display: inline-block; margin-top: var(--lp-esp-30); margin-left: var(--lp-esp-40); }
@media (max-width: 599px) {
	.lp-buscador--portada .lp-buscador__form { padding: var(--lp-esp-30); }
	.lp-buscador--portada .lp-buscador__buscar { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ vidriera */

.lp-vidriera { position: relative; min-height: 20rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lp-radio-grande); background: var(--lp-marca-suave); }
.lp-vidriera__escena { position: absolute; inset: 0; }
.lp-vidriera__item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s; }
.lp-vidriera__item.is-activa { opacity: 1; visibility: visible; transition: opacity 0.8s ease-in-out, visibility 0s; }
.lp-vidriera__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-vidriera__item.is-activa .lp-vidriera__img { animation: lp-acercar 6s ease-out both; }
@keyframes lp-acercar { from { transform: scale(1.05); } to { transform: scale(1); } }
.lp-vidriera__ficha {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.1rem 1rem;
	max-width: min(24rem, calc(100% - 7.5rem));
	padding: 0.8rem 1rem;
	background: var(--lp-blanco);
	border-radius: var(--lp-radio);
	box-shadow: var(--lp-sombra);
	color: var(--lp-tinta);
	text-decoration: none;
	transition: transform 0.35s var(--lp-sale);
}
.lp-vidriera__ficha:hover { transform: translateY(-2px); color: var(--lp-tinta); }
.lp-vidriera__ficha small { grid-column: 1; color: var(--lp-suave); font-size: var(--lp-fs-chica); }
.lp-vidriera__ficha b { grid-column: 1; font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-base); line-height: 1.3; overflow-wrap: anywhere; }
.lp-vidriera__precio { grid-column: 1; color: var(--lp-marca); font-size: var(--lp-fs-chica); font-weight: 700; }
.lp-vidriera__ficha .lp-ico { grid-column: 2; grid-row: 1 / span 3; color: var(--lp-marca); }
.lp-vidriera__etiqueta {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
	background: var(--lp-marca);
	color: var(--lp-blanco);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}
.lp-vidriera__controles { position: absolute; right: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem 0.4rem; border-radius: 999px; background: rgb(15 20 30 / 55%); backdrop-filter: blur(6px); }
.lp-vidriera__puntos { display: flex; gap: 0.1rem; }
.lp-vidriera__punto { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.lp-vidriera__punto::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: rgb(255 255 255 / 55%); transition: width 0.3s var(--lp-sale), background-color 0.3s ease-out; }
.lp-vidriera__punto[aria-current]::before { width: 1.15rem; background: #fff; }
.lp-vidriera__pausa { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.lp-vidriera__pausa::before { content: ""; width: 0.55rem; height: 0.7rem; border-inline: 0.18rem solid currentColor; }
.lp-vidriera__pausa[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-block: 0.38rem solid transparent; border-inline-start: 0.6rem solid currentColor; }
.lp-vidriera__controles :is(button):focus-visible { outline-color: #fff; border-radius: 999px; }
@media (max-width: 599px) {
	.lp-vidriera { aspect-ratio: 4 / 5; min-height: 0; }
	.lp-vidriera__ficha { left: 0.75rem; right: 0.75rem; bottom: 3.4rem; max-width: none; }
	.lp-vidriera__controles { right: 0.75rem; bottom: 0.75rem; }
	.lp-vidriera__etiqueta { top: 0.75rem; left: 0.75rem; }
}

/* ------------------------------------------------------------ ficha */

.lp-ficha { min-width: 0; }
.lp-ficha__migas ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 0; padding: 0; list-style: none; color: var(--lp-suave); font-size: var(--lp-fs-chica); }
.lp-ficha__migas li + li::before { content: "/"; margin-inline: 0.5rem; opacity: 0.6; }
.lp-ficha__migas a { color: var(--lp-suave); text-decoration: none; }
.lp-ficha__migas a:hover { color: var(--lp-marca); text-decoration: underline; }
.lp-ficha__cabecera { margin-block: var(--lp-esp-30) var(--lp-esp-50); }
.lp-ficha__titulo { max-width: 32ch; margin: 0; font-family: var(--lp-fuente-titulos); font-size: clamp(1.75rem, 3.4vw, var(--lp-fs-titular)); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.lp-ficha__terminos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--lp-esp-30) 0 0; padding: 0; list-style: none; }

.lp-ficha__principal { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 1000px) {
	.lp-ficha__principal { grid-template-columns: minmax(0, 1fr) 22.5rem; }
	.lp-ficha__principal--sin-fotos,
	.lp-ficha__principal--sin-panel { grid-template-columns: minmax(0, 1fr); }
	.lp-ficha__principal--sin-fotos .lp-ficha__panel { max-width: 32rem; }
	.lp-ficha__panel { position: sticky; top: var(--lp-esp-50); }
}

/* Galería. */
.lp-galeria { min-width: 0; }
.lp-galeria__escena {
	position: relative;
	display: flex;
	aspect-ratio: 3 / 2;
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: var(--lp-radio-grande);
	background: var(--lp-fondo);
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.lp-galeria__escena::-webkit-scrollbar { display: none; }
.lp-galeria__escena:focus-visible { outline: 3px solid var(--lp-marca); outline-offset: 3px; }
.lp-galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.lp-galeria__ampliar { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.lp-galeria__ampliar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-galeria__cuenta { margin: 0.6rem 0 0; color: var(--lp-suave); font-size: var(--lp-fs-chica); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-galeria__miniaturas { display: flex; gap: 0.5rem; margin-top: 0.5rem; padding: 2px 2px 0.25rem; overflow-x: auto; scrollbar-width: thin; }
.lp-galeria__mini { display: block; flex: 0 0 5rem; aspect-ratio: 1; overflow: hidden; border-radius: 8px; opacity: 0.65; transition: opacity 0.2s ease-out; }
.lp-galeria__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-galeria__mini:hover,
.lp-galeria__mini[aria-current] { opacity: 1; }
.lp-galeria__mini[aria-current] { outline: 2px solid var(--lp-marca); outline-offset: -2px; }
@media (max-width: 999px) { .lp-galeria__escena { border-radius: var(--lp-radio); } }

/* Visor a pantalla completa. */
.lp-visor { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; background: rgb(8 10 14 / 95%); color: #fff; }
.lp-visor[open] { display: grid; }
.lp-visor::backdrop { background: rgb(0 0 0 / 80%); }
html:has(.lp-visor[open]) { overflow: hidden; }
.lp-visor__marco { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 3.5rem 0.75rem 3rem; }
.lp-visor__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lp-visor__cerrar,
.lp-visor__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 14%);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease-out;
}
.lp-visor__cerrar:hover,
.lp-visor__nav:hover { background: rgb(255 255 255 / 28%); }
.lp-visor__cerrar { top: 0.75rem; right: 0.75rem; }
.lp-visor__nav { top: 50%; transform: translateY(-50%); }
.lp-visor__nav--anterior { left: 0.75rem; }
.lp-visor__nav--siguiente { right: 0.75rem; }
.lp-visor :is(button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lp-visor__cuenta { position: absolute; bottom: 0.9rem; left: 0; right: 0; margin: 0; text-align: center; font-size: var(--lp-fs-chica); font-variant-numeric: tabular-nums; }

/* Panel de precio y consulta. */
.lp-ficha__panel { padding: var(--lp-esp-50); background: var(--lp-blanco); border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio-grande); box-shadow: var(--lp-sombra); }
.lp-ficha__codigo { margin: 0; color: var(--lp-suave); font-size: var(--lp-fs-chica); font-variant-numeric: tabular-nums; }
.lp-ficha__precio { margin: 0.2rem 0 0; color: var(--lp-marca); font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-grande); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lp-ficha__precio--consultar { color: var(--lp-suave); font-size: var(--lp-fs-media); font-weight: 700; }
.lp-ficha__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: var(--lp-esp-40); }
.lp-ficha__acciones .lp-boton--ancho { grid-column: 1 / -1; min-height: 3.1rem; }
.lp-ficha__compartir-solo { margin-top: var(--lp-esp-40); }

.lp-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; margin-top: var(--lp-esp-40); padding-top: var(--lp-esp-30); border-top: 1.5px solid var(--lp-borde); }
.lp-ficha__compartir-solo .lp-compartir { margin-top: 0; padding-top: 0; border-top: 0; }
.lp-compartir__rotulo { margin-right: 0.25rem; color: var(--lp-suave); font-size: var(--lp-fs-chica); font-weight: 600; }
.lp-compartir__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.5rem;
	padding: 0 0.7rem;
	border: 0;
	border-radius: var(--lp-radio);
	background: none;
	color: var(--lp-suave);
	font: inherit;
	font-size: var(--lp-fs-chica);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.lp-compartir__boton[hidden] { display: none; }
.lp-compartir__boton:hover { background: var(--lp-fondo); color: var(--lp-marca); }
.lp-compartir__boton .lp-ico { width: 1.1rem; height: 1.1rem; }

/* Secciones. */
.lp-ficha__seccion { margin-top: clamp(2rem, 5vw, 3.5rem); }
.lp-ficha__seccion > h2 { margin: 0 0 var(--lp-esp-40); font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-grande); line-height: 1.2; }
.lp-ficha__texto { max-width: 70ch; line-height: 1.7; overflow-wrap: anywhere; }
.lp-ficha__texto > :first-child { margin-top: 0; }
.lp-ficha__texto :is(h3, h4, h5, h6) { margin: 1.4em 0 0.4em; font-size: var(--lp-fs-media); line-height: 1.35; }
.lp-ficha__texto :is(img, iframe, video) { max-width: 100%; height: auto; }
.lp-ficha__texto iframe { aspect-ratio: 16 / 9; width: 100%; }

/* Datos: tabla de tarjetitas o chips. */
.lp-datos--tabla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0.75rem; margin: 0; }
.lp-datos__item { min-width: 0; padding: 0.8rem 1rem; background: var(--lp-fondo); border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio); }
.lp-datos__item dt { color: var(--lp-suave); font-size: var(--lp-fs-chica); }
.lp-datos__item dd { margin: 0.15rem 0 0; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lp-datos__item dd a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.lp-datos__item--ancho { grid-column: span 2; }
.lp-datos__item--entero { grid-column: 1 / -1; }
.lp-datos__item--entero dd { max-width: 60ch; font-weight: 600; }
@media (max-width: 479px) { .lp-datos__item--ancho { grid-column: 1 / -1; } }
.lp-datos--chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lp-dato { margin: 0; }
.lp-dato__etiqueta { color: var(--lp-suave); }
.lp-dato__valor { font-weight: 600; }

/* Mapa. */
.lp-mapa__marco { position: relative; width: 100%; height: var(--lp-mapa-alto, 22rem); min-height: 14rem; overflow: hidden; border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio-grande); background: var(--lp-fondo); }
.lp-mapa__marco iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.lp-mapa__direccion { display: flex; align-items: flex-start; gap: 0.5rem; margin: var(--lp-esp-30) 0 0; color: var(--lp-suave); }
.lp-mapa__direccion .lp-ico { margin-top: 0.15em; color: var(--lp-marca); }
.lp-mapa__abrir { margin-top: var(--lp-esp-30); }

/* Consulta de la ficha. */
.lp-ficha__consulta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--lp-fondo); border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio-grande); }
.lp-ficha__consulta-otros { display: grid; gap: 0.75rem; padding: var(--lp-esp-50); background: var(--lp-blanco); border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio); }
.lp-ficha__consulta-otros h3 { margin: 0 0 0.25rem; font-size: var(--lp-fs-media); }
.lp-ficha__horario { display: flex; gap: 0.6rem; margin: 0.25rem 0 0; color: var(--lp-suave); font-size: var(--lp-fs-chica); line-height: 1.5; }
.lp-ficha__horario .lp-ico { flex: none; margin-top: 0.1rem; color: var(--lp-marca); }
@media (max-width: 859px) { .lp-ficha__consulta { grid-template-columns: minmax(0, 1fr); } }

.lp-ficha__similares .lp-grilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

/* Barra fija del celular: WhatsApp y Llamar siempre a mano. */
.lp-ficha__barra { display: none; }
@media (max-width: 999px) {
	.lp-ficha:has(.lp-ficha__barra) { padding-bottom: 5rem; }
	.lp-ficha__barra {
		position: fixed;
		inset: auto 0 0;
		z-index: 30;
		display: grid;
		grid-template-columns: 1.6fr 1fr;
		gap: 0.6rem;
		padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
		background: var(--lp-blanco);
		border-top: 1px solid var(--lp-borde);
		box-shadow: 0 -8px 24px -16px rgb(0 0 0 / 30%);
	}
	.lp-ficha__barra .lp-boton { min-height: 3rem; }
	.lp-ficha__barra .lp-boton:only-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ negocio: contacto, WhatsApp, legal */

.lp-contacto__lista { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.lp-contacto__lista li { display: flex; align-items: flex-start; gap: 0.6rem; }
.lp-contacto__lista .lp-ico { margin-top: 0.2em; color: var(--lp-marca); }
.lp-contacto__lista a { color: var(--lp-tinta); font-weight: 500; text-decoration: none; }
.lp-contacto__lista a:hover { color: var(--lp-marca); text-decoration: underline; }
.lp-contacto--botones,
.lp-contacto__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lp-contacto--tarjeta { display: grid; gap: var(--lp-esp-40); padding: clamp(1.25rem, 3vw, 2rem); background: var(--lp-blanco); border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio-grande); }
.lp-contacto__nombre { margin: 0; font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-media); }
.lp-contacto__descripcion { margin: 0; color: var(--lp-suave); }
.lp-redes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--lp-esp-30) 0 0; padding: 0; list-style: none; }
.lp-contacto--tarjeta .lp-redes { margin: 0; }
.lp-redes__enlace { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--lp-borde); border-radius: 50%; color: var(--lp-tinta); transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out; }
.lp-redes__enlace:hover { background: var(--lp-marca); border-color: var(--lp-marca); color: var(--lp-blanco); }

.lp-whatsapp--flotante {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 40;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--lp-accion);
	box-shadow: 0 10px 24px -8px rgb(0 0 0 / 45%);
	color: var(--lp-blanco);
	transition: transform 0.25s var(--lp-sale), background-color 0.18s ease-out;
}
.lp-whatsapp--flotante:hover { transform: scale(1.06); background: color-mix(in srgb, var(--lp-accion) 84%, black); color: var(--lp-blanco); }
.lp-whatsapp--flotante .lp-ico { width: 1.7rem; height: 1.7rem; }
@media (max-width: 999px) { body:has(.lp-ficha__barra) .lp-whatsapp--flotante { bottom: 5.25rem; } }

.lp-legal { margin: 0; color: var(--lp-suave); font-size: var(--lp-fs-chica); }

/* ------------------------------------------------------------ formularios: consulta y boletín */

.lp-consulta__titulo,
.lp-boletin__titulo { margin: 0 0 var(--lp-esp-30); font-family: var(--lp-fuente-titulos); font-size: var(--lp-fs-grande); line-height: 1.2; }
.lp-consulta__bajada,
.lp-boletin__bajada { margin: 0 0 var(--lp-esp-40); color: var(--lp-suave); }
.lp-consulta__form,
.lp-boletin__form { display: grid; gap: var(--lp-esp-40); margin: 0; }
.lp-consulta__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--lp-esp-40); }
.lp-consulta__nota,
.lp-boletin__nota { margin: 0; color: var(--lp-suave); font-size: var(--lp-fs-chica); }
.lp-consulta__form .lp-boton--marca { justify-self: start; min-height: 3rem; padding-inline: 1.6rem; }
/* El campo trampa: una persona no lo ve ni lo toca. */
.lp-consulta__trampa,
.lp-boletin__trampa,
.lp-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-boletin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--lp-esp-40) 2.5rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--lp-blanco); border: 1.5px solid var(--lp-borde); border-radius: var(--lp-radio-grande); }
.lp-boletin__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.lp-boletin__fila .lp-boton { min-height: var(--lp-campo-alto); padding-inline: 1.4rem; }
.lp-boletin__interes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; margin: 0; padding: 0; border: 0; font-size: var(--lp-fs-chica); }
.lp-boletin__interes legend { float: left; margin-right: 0.35rem; padding: 0; color: var(--lp-suave); font-weight: 600; }
.lp-boletin__interes label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.lp-boletin__interes input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--lp-marca); }
@media (max-width: 781px) { .lp-boletin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
	.lp-boletin__fila { grid-template-columns: minmax(0, 1fr); }
	.lp-boletin__interes legend { float: none; width: 100%; margin: 0 0 0.25rem; }
}

/* ------------------------------------------------------------ movimiento reducido */

@media (prefers-reduced-motion: reduce) {
	.lp-tarjeta,
	.lp-boton,
	.lp-vidriera__ficha,
	.lp-vidriera__punto::before,
	.lp-whatsapp--flotante,
	.lp-galeria__mini,
	.lp-visor__cerrar,
	.lp-visor__nav { transition-duration: 0.01ms !important; }
	.lp-tarjeta:hover,
	.lp-vidriera__ficha:hover,
	.lp-whatsapp--flotante:hover { transform: none; }
	.lp-vidriera__item,
	.lp-vidriera__item.is-activa { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
	.lp-vidriera__item.is-activa .lp-vidriera__img { animation: none; }
	.lp-galeria__escena { scroll-behavior: auto; }
}
