/*
 * Portada de liloo.studio (plantilla Inicio).
 * Port del diseño de Claude Design "Liloo Home v2" (diseno/claude-design/) sobre
 * Bootstrap 5.3 de Bootscore (main.css): aquí solo lo que el diseño pone por
 * encima (colores, radios, tipografía, tamaños fluidos) y el escenario del
 * héroe, que va con su propio CSS. La marca (Inter Display, fondo Lemon
 * Chiffon) viene de main.css; la cabecera, el menú, el pie y las piezas que
 * comparten (.liloo-etiqueta, .liloo-btn, .liloo-btn--claro), de comun.css; la
 * cesta (offcanvas de Bootscore), de cesta.css. Los tres se cargan en todo el
 * sitio y antes que este.
 *
 * Clases de <html> (las pone header.php antes del CSS):
 *   liloo-js     hay JS.
 *   liloo-anima  hay JS y no se pide movimiento reducido: héroe animado,
 *                cinta en movimiento y pasos que aparecen. Sin ella, todo
 *                quieto y legible (el héroe, como lista).
 *
 * Mobile-first. Puntos de corte de Bootstrap (lg = 992 px es "escritorio"),
 * salvo la geometría del héroe, que es la del diseño (820 px).
 */


/* ---------- Base: el <helmet> del diseño encima de Bootstrap ---------- */

.liloo-portada {
  --bs-body-color: #2D120D;
  --bs-emphasis-color: #2D120D;
  --bs-link-color: #6B0B0C;
  --bs-link-color-rgb: 107, 11, 12;
  --bs-link-hover-color: #2D120D;
  --bs-link-hover-color-rgb: 45, 18, 13;
  --bs-link-decoration: none;
  --liloo-foco: #6B0B0C;
  color: #2D120D;
}

.liloo-portada a {
  text-decoration: none;
}

.liloo-portada :focus-visible {
  outline: 2px solid var(--liloo-foco);
  outline-offset: 3px;
  box-shadow: none;
}

.liloo-main:focus {
  outline: none;
}

/* Latido del punto de los señaladores: el del diseño (un halo que crece y se
   apaga) con transform y opacity en un anillo, que van por el compositor; el
   box-shadow animado repintaba en el hilo principal en cada fotograma y
   retrasaba la respuesta a los toques (INP). */
@keyframes lil-pulse {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(3); }
}

@keyframes lil-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Las fotos con alto y ancho del adjunto: que no deformen antes de colocarse. */
.liloo-portada main img {
  max-width: 100%;
  height: auto;
}


/* ---------- Piezas comunes ---------- */

.liloo-seccion {
  padding-block: clamp(64px, 10vw, 128px);
}

.liloo-cabeza {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.liloo-etiqueta--marca {
  color: #6B0B0C;
}

.liloo-etiqueta--ambar {
  color: #FFB45E;
}

.liloo-h2 {
  margin: 10px 0 0;
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.liloo-enlace {
  padding-bottom: 2px;
  border-bottom: 1.5px solid currentColor;
  color: #6B0B0C;
  font-size: 16px;
  font-weight: 600;
}

.liloo-enlace:hover {
  color: #2D120D;
}

.liloo-enlace--claro,
.liloo-enlace--claro:hover {
  border-bottom-color: rgba(255, 248, 202, .6);
  color: #FFF8CA;
}

.liloo-enlace--claro:hover {
  border-bottom-color: #FFF8CA;
}

.liloo-chapa {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 100px;
  background: #FFF8CA;
  color: #2D120D;
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  pointer-events: none;
}

.liloo-chapa--grande {
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  letter-spacing: .1em;
}


/* Botones del diseño: variantes de .liloo-btn (la base y --claro, en comun.css) */

.liloo-btn--grande {
  height: 52px;
}

.liloo-btn--xl {
  --bs-btn-padding-x: 28px;
  height: 56px;
  box-shadow: 0 8px 28px rgba(24, 9, 6, .3);
}

.liloo-btn--oscuro {
  --bs-btn-padding-x: 22px;
  --bs-btn-font-size: 15px;
  --bs-btn-bg: #2D120D;
  --bs-btn-color: #FFF8CA;
  --bs-btn-hover-bg: #6B0B0C;
  --bs-btn-hover-color: #FFF8CA;
  --bs-btn-active-bg: #6B0B0C;
  --bs-btn-active-color: #FFF8CA;
}

/* Añadir a la cesta: mientras va (clase de WooCommerce) y el "✓" de añadida.
   Sin pointer-events: none: un segundo toque caería en la foto que hay debajo
   y llevaría a la ficha. inicio.js bloquea los clics mientras carga. */
.add_to_cart_button.loading {
  opacity: .7;
  cursor: progress;
}

.liloo-portada a.added_to_cart {
  display: none !important;
}

.liloo-btn__ok {
  margin-left: .35em;
}


/* ---------- Héroe ----------
   Base = la lista (sin JS o con movimiento reducido): intro, tres tarjetas con
   la lámpara encendida y sus textos, y el cierre. Con .liloo-anima, el
   escenario del diseño (más abajo). */

.liloo-heroe {
  padding-block: 96px clamp(40px, 8vw, 96px);
  background: #FFF8CA;
}

.liloo-heroe__escenario {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 32px);
}

.liloo-heroe__antetitulo {
  color: #6B0B0C;
}

.liloo-heroe__titulo {
  margin: 12px 0 0;
  font-size: clamp(48px, 7.5vw, 116px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.liloo-heroe__baja {
  display: none;
}

.liloo-heroe__cierre {
  margin: 0;
  font-size: clamp(40px, 6vw, 92px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.liloo-heroe__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.liloo-heroe__cta .liloo-etiqueta {
  letter-spacing: .08em;
}

/* En la lista el cierre va sobre el fondo claro: botón oscuro. */
html:not(.liloo-anima) .liloo-heroe__cta .liloo-btn--claro {
  --bs-btn-bg: #2D120D;
  --bs-btn-color: #FFF8CA;
  --bs-btn-hover-bg: #6B0B0C;
  --bs-btn-hover-color: #FFF8CA;
  --bs-btn-active-bg: #6B0B0C;
  --bs-btn-active-color: #FFF8CA;
}

.liloo-heroe__sombra,
.liloo-co {
  display: none;
}

/* Tarjeta de cada lámpara en la lista */
.liloo-lampara {
  display: grid;
  overflow: hidden;
  border-radius: 20px;
  background: #2D120D;
  color: #FFF8CA;
  --liloo-foco: #FFF8CA;
}

@media (min-width: 992px) {
  .liloo-lampara {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.liloo-panel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #2D120D;
}

@media (min-width: 992px) {
  .liloo-panel {
    aspect-ratio: auto;
    min-height: 480px;
  }
}

.liloo-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: var(--fx) var(--fy);
}

.liloo-panel__noche,
.liloo-panel__brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Velo azul nocturno (apagada) y resplandor cálido (encendida). En la lista,
   encendidas. */
.liloo-panel__noche {
  background: #0E1A3C;
  mix-blend-mode: multiply;
  opacity: 0;
}

.liloo-panel__brillo {
  background: radial-gradient(38% 32% at var(--fx) var(--fy), rgba(255, 176, 86, .6), rgba(255, 176, 86, 0) 72%);
  mix-blend-mode: screen;
  opacity: 1;
}

.liloo-panel__etiqueta {
  display: none;
}

html:not(.liloo-anima) .liloo-info.container {
  max-width: none;
  margin: 0;
  padding: clamp(20px, 3vw, 40px);
}

.liloo-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
}

.liloo-info__meta {
  display: flex;
  gap: 14px;
  color: #FFC57E;
}

.liloo-info__nombre {
  margin: 8px 0 0;
  font-size: clamp(60px, 10vw, 148px);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.01em;
}

html:not(.liloo-anima) .liloo-info__nombre {
  font-size: clamp(56px, 8vw, 112px);
}

.liloo-info__linea {
  max-width: 420px;
  margin: 12px 0 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.45;
  text-wrap: pretty;
}

.liloo-info__puntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.liloo-info__puntos li {
  padding: 6px 12px;
  border: 1px solid rgba(255, 248, 202, .3);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
}

.liloo-info__compra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.liloo-info__precio {
  font-size: 26px;
  font-weight: 700;
}


/* ---------- Héroe animado: el escenario del diseño ----------
   720vh de recorrido con un escenario pegajoso a pantalla completa. Aquí, la
   posición de partida (p = 0) de todo, con la misma geometría que inicio.js:
   así no salta nada al cargar. La caja del collage no pasa de 1400 px; las
   fotos a pantalla completa, sí (el escenario es la excepción al grid).

   Sin desplazamientos de diseño (CLS): ningún panel cambia de caja al bajar.
   Cada panel ocupa siempre el escenario entero y su rectángulo visible es un
   clip-path; la foto, el resplandor y la etiqueta se colocan con transform.
   Los rectángulos (--rx, --ry, --rw, --rh) van en unidades del escenario
   (cqw, cqh: es un contenedor de tamaño). */

.liloo-anima .liloo-heroe {
  height: 720vh;
  padding: 0;
}

.liloo-anima .liloo-heroe__escenario {
  --s: 12px;
  --t: 72px;
  --b: 12px;
  --r: 16px;
  --x0: calc((100cqw - min(100cqw, 1400px)) / 2);
  --W: calc(min(100cqw, 1400px) - 2 * var(--s));
  --H: calc(100cqh - var(--t) - var(--b));
  position: sticky;
  top: 0;
  display: block;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  container-type: size;
  contain: strict;
}

@media (min-width: 820px) {
  .liloo-anima .liloo-heroe__escenario {
    --s: 32px;
    --t: 84px;
    --b: 28px;
    --r: 22px;
  }
}

.liloo-anima .liloo-lampara {
  display: contents;
}

/* Rectángulos de partida: celdas del collage (móvil y desde 820 px). */
.liloo-anima [data-panel="0"],
.liloo-anima .liloo-heroe__intro,
.liloo-anima .liloo-heroe__outro {
  --rx: calc(var(--x0) + var(--s));
  --ry: var(--t);
  --rw: var(--W);
  --rh: calc(.6 * var(--H));
}

.liloo-anima [data-panel="1"] {
  --rx: calc(var(--x0) + var(--s));
  --ry: calc(var(--t) + .615 * var(--H));
  --rw: calc(.56 * var(--W));
  --rh: calc(.385 * var(--H));
}

.liloo-anima [data-panel="2"] {
  --rx: calc(var(--x0) + var(--s) + .575 * var(--W));
  --ry: calc(var(--t) + .615 * var(--H));
  --rw: calc(.425 * var(--W));
  --rh: calc(.385 * var(--H));
}

@media (min-width: 820px) {
  .liloo-anima [data-panel="0"],
  .liloo-anima .liloo-heroe__intro,
  .liloo-anima .liloo-heroe__outro {
    --rw: calc(.58 * var(--W));
    --rh: var(--H);
  }

  .liloo-anima [data-panel="1"] {
    --rx: calc(var(--x0) + var(--s) + .6 * var(--W));
    --ry: var(--t);
    --rw: calc(.4 * var(--W));
    --rh: calc(.6 * var(--H));
  }

  .liloo-anima [data-panel="2"] {
    --rx: calc(var(--x0) + var(--s) + .6 * var(--W));
    --ry: calc(var(--t) + .62 * var(--H));
    --rw: calc(.4 * var(--W));
    --rh: calc(.38 * var(--H));
  }
}

.liloo-anima .liloo-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  min-height: 0;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  clip-path: inset(var(--ry) calc(100cqw - var(--rx) - var(--rw)) calc(100cqh - var(--ry) - var(--rh)) var(--rx) round var(--r));
}

.liloo-anima .liloo-heroe__intro,
.liloo-anima .liloo-heroe__outro {
  position: absolute;
  top: var(--ry);
  left: var(--rx);
  width: var(--rw);
  height: var(--rh);
  border-radius: var(--r);
}

/* La foto, como object-fit: cover dentro de su rectángulo, con el foco del
   diseño (--fxn, --fyn) y el zoom de partida (1,02). --ar = ancho / alto. */
.liloo-anima .liloo-panel__img {
  --ancho: max(var(--rw), calc(var(--rh) * var(--ar)));
  top: calc(var(--ry) + (var(--rh) - var(--ancho) / var(--ar)) * var(--fyn));
  right: auto;
  bottom: auto;
  left: calc(var(--rx) + (var(--rw) - var(--ancho)) * var(--fxn));
  width: var(--ancho);
  height: auto !important;
  transform: scale(1.02);
  transform-origin: var(--fx) var(--fy);
  /* Apagada: brillo .4, saturación .5 (con el velo nocturno .6 y sin resplandor). */
  filter: brightness(.4) saturate(.5);
  will-change: transform;
}

.liloo-anima .liloo-panel__noche {
  opacity: .6;
}

.liloo-anima .liloo-panel__brillo {
  top: var(--ry);
  right: auto;
  bottom: auto;
  left: var(--rx);
  width: var(--rw);
  height: var(--rh);
  opacity: 0;
  transform-origin: 0 0;
}

.liloo-anima .liloo-panel__etiqueta {
  position: absolute;
  top: calc(var(--ry) + var(--rh) - 12px);
  left: calc(var(--rx) + 12px);
  display: flex;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(255, 248, 202, .92);
  color: #2D120D;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-100%);
}

/* Intro y cierre: sobre la primera foto del collage (su mismo rectángulo). */
.liloo-anima .liloo-heroe__intro,
.liloo-anima .liloo-heroe__outro {
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 clamp(20px, 3.5vw, 48px) clamp(20px, 4vh, 44px);
  color: #FFF8CA;
  --liloo-foco: #FFF8CA;
}

.liloo-anima .liloo-heroe__antetitulo {
  color: #FFF8CA;
}

.liloo-anima .liloo-heroe__baja {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  letter-spacing: .08em;
}

.liloo-heroe__raya {
  width: 1.5px;
  height: 22px;
  background: currentColor;
  animation: lil-bob 1.8s ease-in-out infinite;
}

.liloo-anima .liloo-heroe__outro {
  opacity: 0;
  pointer-events: none;
  /* Al final la primera foto está encendida: degradado para que el texto se lea. */
  background: linear-gradient(to top, rgba(24, 9, 6, .86), rgba(24, 9, 6, .62) 50%, rgba(24, 9, 6, 0) 88%);
}

/* Degradado sobre la foto a pantalla completa, bajo los textos. Más denso que
   el del diseño en la mitad inferior: el texto pasa de 4,5:1 sobre las fotos. */
.liloo-anima .liloo-heroe__sombra {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(24, 9, 6, .86), rgba(24, 9, 6, .62) 36%, rgba(24, 9, 6, 0) 62%),
    linear-gradient(to bottom, rgba(24, 9, 6, .45), rgba(24, 9, 6, 0) 22%);
}

/* Texto de cada lámpara: abajo, dentro del .container. */
.liloo-anima .liloo-info {
  position: absolute;
  right: 0;
  bottom: clamp(18px, 4vh, 40px);
  left: 0;
  z-index: 6;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.liloo-anima .liloo-info__texto {
  max-width: 560px;
}

.liloo-anima .liloo-info__puntos {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Señaladores: punto que late, línea y etiqueta. inicio.js los coloca. */
.liloo-anima .liloo-co {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.liloo-co.is-izquierda {
  flex-direction: row-reverse;
}

.liloo-co__punto {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid #FFB45E;
  border-radius: 50%;
  background: #FFF8CA;
}

.liloo-co__punto::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(255, 248, 202, .9);
  opacity: 0;
  animation: lil-pulse 1.6s ease-out infinite paused;
}

.liloo-co.is-visible .liloo-co__punto::after {
  animation-play-state: running;
}

.liloo-co__linea {
  flex: none;
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: rgba(255, 248, 202, .85);
}

.liloo-co__texto {
  box-sizing: border-box;
  padding: 8px 13px;
  border: 1px solid rgba(255, 248, 202, .3);
  border-radius: 100px;
  background: rgba(45, 18, 13, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFF8CA;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 600;
  white-space: nowrap;
}


/* ---------- Cinta de ventajas ----------
   Banda de borde a borde, como en el diseño (decorativa; el tope de 1400 px es
   para el contenido). Se para con el botón, al pasar el ratón y con el foco
   dentro (WCAG 2.2.2). */

.liloo-ventajas {
  position: relative;
  overflow: hidden;
  padding-block: 13px;
  background: #6B0B0C;
  color: #FFF8CA;
  --liloo-foco: #FFF8CA;
}

.liloo-ventajas__pista {
  display: flex;
  width: max-content;
}

.liloo-ventajas__lista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.liloo-ventajas__lista li {
  padding-right: clamp(48px, 6vw, 88px);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.liloo-anima .liloo-ventajas__pista {
  animation: liloo-cinta var(--cinta-duracion, 90s) linear infinite;
}

.liloo-anima .liloo-ventajas:hover .liloo-ventajas__pista,
.liloo-anima .liloo-ventajas:focus-within .liloo-ventajas__pista,
.liloo-anima .liloo-ventajas.is-pausada .liloo-ventajas__pista {
  animation-play-state: paused;
}

@keyframes liloo-cinta {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Botón de pausa: a la derecha, sobre un fundido del mismo Rosewood. */
.liloo-ventajas__pausa {
  position: absolute;
  top: 50%;
  right: max(8px, calc((100% - 1400px) / 2 + 12px));
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid rgba(255, 248, 202, .7);
  border-radius: 50%;
  background: #6B0B0C;
  color: #FFF8CA;
  transform: translateY(-50%);
  box-shadow: -24px 0 16px 4px #6B0B0C;
}

.liloo-ventajas__pausa:hover {
  border-color: #FFF8CA;
}

.liloo-anima .liloo-ventajas__pausa {
  display: flex;
}

.liloo-ventajas__icono-sigue,
.liloo-ventajas.is-pausada .liloo-ventajas__icono-pausa {
  display: none;
}

.liloo-ventajas.is-pausada .liloo-ventajas__icono-sigue {
  display: block;
}

/* Quieta: una sola lista, centrada y en varias líneas si hace falta. */
html:not(.liloo-anima) .liloo-ventajas__pista {
  width: auto;
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: 12px;
  justify-content: center;
}

html:not(.liloo-anima) .liloo-ventajas__lista[aria-hidden] {
  display: none;
}

html:not(.liloo-anima) .liloo-ventajas__lista {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 32px;
}

html:not(.liloo-anima) .liloo-ventajas__lista li {
  padding-right: 0;
}


/* ---------- Destacadas ---------- */

.liloo-producto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.liloo-producto__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #2D120D;
}

.liloo-producto__fotos {
  position: absolute;
  inset: 0;
  display: block;
}

.liloo-producto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.liloo-producto__img--2 {
  opacity: 0;
  transition: opacity .4s ease;
}

@media (hover: hover) {
  .liloo-producto__media:hover .liloo-producto__img--2 {
    opacity: 1;
  }
}

/* El "+" que se despliega en "En tu cesta ×" */
.liloo-mas {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 48px;
  height: 48px;
  padding: 0 4px 0 14px;
  overflow: hidden;
  border-radius: 100px;
  background: #FFF8CA;
  color: #2D120D;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(45, 18, 13, .25);
  transition: width .45s cubic-bezier(.5, 1.4, .4, 1), background .3s;
  --liloo-foco: #FFF8CA;
}

.liloo-mas:hover {
  color: #2D120D;
}

.liloo-mas__texto {
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .3s;
}

.liloo-mas__icono {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2D120D;
  color: #FFF8CA;
  transition: transform .4s;
}

.liloo-mas__icono::before {
  content: '+';
  font-size: 24px;
  line-height: 1;
}

.liloo-mas.is-en-cesta {
  width: 138px;
  background: #FFB45E;
}

.liloo-mas.is-en-cesta .liloo-mas__texto {
  opacity: 1;
}

.liloo-mas.is-en-cesta .liloo-mas__icono {
  transform: rotate(45deg);
}

@media (min-width: 992px) {
  .liloo-mas {
    right: 14px;
    bottom: 14px;
    width: 56px;
    height: 56px;
    padding: 0 6px 0 18px;
  }

  .liloo-mas__texto {
    font-size: 15px;
  }

  .liloo-mas__icono {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .liloo-mas.is-en-cesta {
    width: 170px;
  }
}

.liloo-producto__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.liloo-producto__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  margin: 0;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.liloo-producto__nombre a {
  color: #2D120D;
}

.liloo-producto__nombre a:hover {
  color: #6B0B0C;
}

.liloo-producto__tipo {
  /* Dentro de .liloo-producto__nombre (h3, ahora Aleo): sin esto heredaría
     Aleo. Es dato secundario, no título. */
  font-family: var(--bs-font-sans-serif);
  color: #5C3B33;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
}

.liloo-producto__precio {
  font-size: clamp(13px, 1.2vw, 15px);
  white-space: nowrap;
}


/* ---------- Por espacio ---------- */

.liloo-espacios {
  background: #CDE3E8;
}

.liloo-espacio {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #2D120D;
  color: #FFF8CA;
}

.liloo-espacio:hover {
  color: #FFF8CA;
}

.liloo-espacio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.liloo-espacio:hover .liloo-espacio__img {
  transform: scale(1.06);
}

/* Degradado algo más denso que el del diseño: el texto pasa de 4,5:1. */
.liloo-espacio::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 9, 6, .86), rgba(24, 9, 6, .55) 38%, rgba(24, 9, 6, 0) 66%);
}

.liloo-espacio__texto {
  position: absolute;
  right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  left: clamp(14px, 1.6vw, 22px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.liloo-espacio__titulo {
  font-family: var(--liloo-font-titulos);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}

.liloo-espacio__desc {
  color: rgba(255, 248, 202, .9);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.35;
  text-wrap: pretty;
}


/* ---------- La favorita ---------- */

.liloo-favorita {
  background: #6B0B0C;
  color: #FFF8CA;
  --liloo-foco: #FFF8CA;
}

.liloo-favorita__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  background: #2D120D;
}

.liloo-favorita__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.liloo-favorita__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.liloo-favorita__titulo {
  margin: 10px 0 0;
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.01em;
}

.liloo-favorita__entradilla {
  max-width: 460px;
  margin: 18px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  text-wrap: pretty;
}

.liloo-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255, 248, 202, .25);
  border-bottom: 1px solid rgba(255, 248, 202, .25);
}

.liloo-datos__item {
  padding: 16px 12px;
}

.liloo-datos__item:first-child {
  padding-left: 0;
}

.liloo-datos__item + .liloo-datos__item {
  border-left: 1px solid rgba(255, 248, 202, .25);
}

.liloo-datos__item:last-child {
  padding-right: 0;
}

.liloo-datos dt {
  font-size: 11px;
  font-weight: 400;
}

.liloo-datos dd {
  margin: 6px 0 0;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
}

.liloo-favorita__compra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.liloo-favorita__precio {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.liloo-puntos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  color: rgba(255, 248, 202, .9);
  font-size: 15px;
}

.liloo-puntos li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.liloo-puntos li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB45E;
  transform: translateY(-1px);
}


/* ---------- Capa a capa ---------- */

.liloo-capa {
  padding-block: clamp(72px, 10vw, 136px);
  background: #2D120D;
  color: #FFF8CA;
  --liloo-foco: #FFF8CA;
}

.liloo-capa__cabeza {
  gap: 16px 40px;
}

.liloo-capa__titulo {
  max-width: 880px;
  font-size: clamp(38px, 6vw, 84px);
  letter-spacing: -.01em;
}

.liloo-capa__entradilla {
  max-width: 360px;
  margin: 0;
  color: rgba(255, 248, 202, .82);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* En móvil, carrusel con imán; desde lg, tres columnas. */
.liloo-pasos {
  margin-top: clamp(36px, 5vw, 64px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* La columna empieza medio canal antes que su tarjeta: el imán deja la
     tarjeta alineada con el resto del contenido. */
  scroll-padding-inline: 4px; /* 12 px del container − 8 px de medio canal (g-3) */
  scrollbar-width: none;
}

.liloo-pasos::-webkit-scrollbar {
  display: none;
}

@media (min-width: 992px) {
  .liloo-pasos {
    overflow: visible;
  }
}

.liloo-paso {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-snap-align: start;
}

.liloo-paso__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  background: #3A1912;
}

.liloo-paso__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* Respaldo de los números sobre fotos claras: un degradado oscuro en la
   esquina (con él pasan de 3:1, texto grande). */
.liloo-paso__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 70% at 0 0, rgba(24, 9, 6, .72), rgba(24, 9, 6, .38) 35%, rgba(24, 9, 6, 0) 60%);
  pointer-events: none;
}

.liloo-paso__num {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  color: #FFF8CA;
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 2px 24px rgba(45, 18, 13, .45);
}

.liloo-paso__titulo {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.liloo-paso__texto {
  margin: -10px 0 0;
  color: rgba(255, 248, 202, .82);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Aparecen al entrar en pantalla (inicio.js pone .is-visible). */
.liloo-anima .liloo-paso {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease var(--retardo, 0s), transform .9s cubic-bezier(.2, .8, .2, 1) var(--retardo, 0s);
}

.liloo-anima .liloo-capa.is-visible .liloo-paso {
  opacity: 1;
  transform: none;
}


/* ---------- Materiales ---------- */

.liloo-materiales {
  background: #FFF8CA;
}

.liloo-materiales__media {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: #2D120D;
}

.liloo-materiales__img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.liloo-materiales__titulo {
  font-size: clamp(34px, 5vw, 68px);
  line-height: .94;
}

.liloo-materiales__texto {
  max-width: 520px;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  text-wrap: pretty;
}

.liloo-materiales__tarjetas {
  margin-top: clamp(28px, 4vw, 44px) !important;
}

.liloo-tarjeta {
  height: 100%;
  padding: 18px;
  border-radius: 16px;
  background: #FFF8CA;
}

.liloo-tarjeta__titulo {
  margin: 0;
  font-family: var(--liloo-font-titulos);
  font-size: 20px;
  font-weight: 700;
}

.liloo-tarjeta__texto {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}


/* ---------- Preguntas frecuentes (Accordion de Bootstrap) ---------- */

.liloo-faq {
  background: #F2E9B8;
}

.liloo-faq__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.liloo-faq__intro .liloo-h2 {
  margin: 0;
}

.liloo-ayuda {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  margin-top: 12px;
  padding: 22px;
  border-radius: 20px;
  background: #FFF8CA;
}

.liloo-ayuda__titulo {
  margin: 0;
  font-family: var(--liloo-font-titulos);
  font-size: 20px;
  font-weight: 700;
}

.liloo-ayuda__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.liloo-ayuda .liloo-btn {
  align-self: flex-start;
}

.liloo-acordeon {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: #2D120D;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 18px;
  --bs-accordion-btn-color: #2D120D;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-color: #2D120D;
  --bs-accordion-active-bg: transparent;
  border-top: 1.5px solid #2D120D;
}

.liloo-acordeon .accordion-item,
.liloo-acordeon.accordion-flush > .accordion-item,
.liloo-acordeon.accordion-flush > .accordion-item:last-child {
  border: 0;
  border-bottom: 1.5px solid #2D120D;
}

.liloo-acordeon .accordion-header {
  margin: 0;
}

.liloo-acordeon .accordion-button {
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  font-family: var(--liloo-font-titulos);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  box-shadow: none;
}

.liloo-acordeon .accordion-button::after {
  display: none;
}

.liloo-acordeon .accordion-button:focus-visible {
  outline: 2px solid #6B0B0C;
  outline-offset: 2px;
}

.liloo-acordeon__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid #2D120D;
  border-radius: 50%;
  transition: transform .35s, background .3s, color .3s;
}

.liloo-acordeon__icono::before {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.liloo-acordeon .accordion-button:not(.collapsed) .liloo-acordeon__icono {
  background: #2D120D;
  color: #FFF8CA;
  transform: rotate(45deg);
}

.liloo-acordeon .accordion-body p {
  margin: 0 0 22px;
  padding-right: 52px;
  color: #4A2A22;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Sin JS no se pueden abrir: se ven todas las respuestas. */
html:not(.liloo-js) .liloo-acordeon .collapse {
  display: block;
}

html:not(.liloo-js) .liloo-acordeon__icono {
  display: none;
}


/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .liloo-portada *,
  .liloo-portada *::before,
  .liloo-portada *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}