/*
 * Cabecera, menú y pie de todo liloo.studio (header.php, footer.php y
 * template-parts/liloo/cabecera, menu, anclas, idiomas y pie): los del diseño
 * de Claude Design "Liloo Home v2" sobre Bootstrap 5.3 de Bootscore (main.css,
 * que ya trae la marca en todo el sitio: Inter Display y fondo Lemon Chiffon).
 * La cesta (offcanvas de Bootscore) está en cesta.css; la portada, en
 * inicio.css. Al final, el aviso de cookies (plugin neon-consent) con el
 * aspecto de liloo.
 *
 * Clases de <html> (las pone header.php antes del CSS):
 *   liloo-js     hay JS (comun.js cambia el tono de la cabecera).
 *   liloo-anima  hay JS y no se pide movimiento reducido.
 *
 * Fuera de la portada (body sin .liloo-portada) la píldora fija taparía el
 * principio de la página: #page empieza debajo, y las anclas se paran debajo.
 *
 * Mobile-first. Puntos de corte de Bootstrap (lg = 992 px es "escritorio").
 */


/* ---------- Tipografía de títulos: Aleo ----------
   Solo para titulares (h1-h6, las .h1-.h6 que los imitan y las clases de
   título del diseño); el cuerpo sigue en Inter Display (var(--bs-font-sans-serif),
   @font-face en _bootscore-custom.scss). Aleo autoalojada desde
   assets/liloo/fonts/ (Alessio Laiso, OFL; licencia en fonts/OFL-Aleo.txt),
   variable wght 100-900 normal (sin cursiva: no se usa en el sitio), reducida
   a latin + latin-ext con el unicode-range estándar de Fontsource. Aquí en
   CSS plano y no en el SCSS: scssphp solo recompila al tocar un fichero RAÍZ
   de assets/scss/, y este cambio no lo es.

   "Aleo Fallback" ocupa el mismo hueco que Aleo mientras carga (nada salta al
   llegar la fuente real): métricas calculadas con fontTools comparando Aleo
   con Liberation Serif (compatible con Times New Roman) -- size-adjust
   104,04 %, ascent-override 86,99 %, descent-override 28,35 %,
   line-gap-override 0 %, aplicadas sobre Georgia/Times/Noto Serif/DejaVu Serif
   (la que haya instalada). */
@font-face {
  font-family: "Aleo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/aleo-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Aleo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/aleo-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Aleo Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("DejaVu Serif");
  ascent-override: 86.99%;
  descent-override: 28.35%;
  line-gap-override: 0%;
  size-adjust: 104.04%;
}

:root {
  --liloo-font-titulos: "Aleo", "Aleo Fallback", Georgia, serif;
}

/* h1-h6 de WordPress/Bootscore/WooCommerce (entry-title, page-title,
   product_title, widget-title, comments-title, "Your order" de la caja...) y
   las .h1-.h6 que los imitan (offcanvas-title y cart-product-title de la
   cesta lateral, más abajo con su propia regla porque fuerzan font-family:
   inherit). El aviso de cookies se queda en Inter Display: su h2 (más abajo)
   ya fija font-family con !important, con más especificidad que esta regla. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--liloo-font-titulos);
}

/* Caja de bloques de WooCommerce (checkout.css): en el resumen del pedido de
   escritorio, ".wc-block-checkout__sidebar .wc-block-components-product-name"
   (0,2,0) pone font-family: inherit y gana a la regla de arriba (0,1,0). Un
   peldaño más de especificidad (0,2,1), sin !important. A 390 el resumen no
   va en ese contenedor: ya le basta la regla de arriba. */
.wc-block-checkout__sidebar h3.wc-block-components-product-name {
  font-family: var(--liloo-font-titulos);
}

/* "Resumen del pedido" / "Order summary": mismo nivel que los h2 de los
   pasos (ya en Aleo), pero es un <p>, no un h-tag. */
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--liloo-font-titulos);
}


/* ---------- Base de las piezas comunes ---------- */

.liloo-cab,
.liloo-menu,
.liloo-pie,
.liloo-saltar {
  --liloo-foco: #6B0B0C;
}

:is(.liloo-cab, .liloo-menu, .liloo-pie) a {
  text-decoration: none;
}

:is(.liloo-cab, .liloo-menu, .liloo-pie) :focus-visible {
  outline: 2px solid var(--liloo-foco);
  outline-offset: 3px;
  box-shadow: none;
}

.liloo-saltar.visually-hidden-focusable:focus {
  position: fixed !important;
  top: 76px;
  left: 16px;
  z-index: 1060;
  padding: 12px 18px;
  border-radius: 100px;
  background: #FFF8CA;
  color: #2D120D;
  box-shadow: 0 0 0 2px #2D120D;
  font-size: 15px;
  font-weight: 600;
}


/* ---------- Fuera de la portada: el contenido empieza debajo de la píldora ---------- */

/* 8 px de margen arriba + 56 px de píldora. Con la barra de administración,
   WordPress baja todo (html con margin-top) y Bootscore baja la píldora. */
:root {
  --liloo-cab-alto: 64px;
}

body:not(.liloo-portada) {
  --bs-scroll-margin-top: calc(var(--liloo-cab-alto) + 24px);
}

body:not(.liloo-portada) #page {
  padding-top: calc(var(--liloo-cab-alto) + 16px);
}


/* ---------- Piezas del diseño que usan el menú y el pie ---------- */

/* Etiquetas en mayúsculas del diseño (12 px, espaciado .1em). */
.liloo-etiqueta {
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.liloo-etiqueta--calida {
  color: #FFC57E;
}


/* Botones del diseño: píldoras sobre .btn de Bootstrap */

.liloo-btn {
  --bs-btn-padding-x: 26px;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 100px;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  white-space: nowrap;
}

.liloo-btn--claro {
  --bs-btn-bg: #FFF8CA;
  --bs-btn-color: #2D120D;
  --bs-btn-hover-bg: #FFFFFF;
  --bs-btn-hover-color: #2D120D;
  --bs-btn-active-bg: #FFFFFF;
  --bs-btn-active-color: #2D120D;
}


/* ---------- Cabecera en píldora ----------
   data-tono = estados de la tabla HT del diseño:
   top   arriba del todo, sobre el héroe claro: texto Coffee Bean, sin fondo
   img   sobre una foto a pantalla completa: texto Lemon Chiffon. El diseño la
         deja sin fondo; aquí lleva un velo oscuro translúcido para que el
         texto pase de 4,5:1 sobre cualquier foto (una ventana, una pared)
   light sobre secciones claras: píldora Coffee Bean translúcida, texto Lemon
   dark  sobre secciones oscuras: píldora Lemon translúcida, texto Coffee Bean */

.liloo-cab.fixed-top {
  z-index: 1030;
  padding: 8px 8px 0;
  pointer-events: none;
}

.liloo-cab__pildora {
  --cab-texto: #FFF8CA;
  --cab-inverso: #2D120D;
  --cab-fondo: rgba(45, 18, 13, .9);
  --cab-desenfoque: 14px;
  --cab-sombra: .14;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  height: 56px;
  margin: 0 auto;
  padding: 0 6px 0 clamp(10px, 3vw, 28px);
  border-radius: 100px;
  color: var(--cab-texto);
  background: var(--cab-fondo);
  -webkit-backdrop-filter: blur(var(--cab-desenfoque)) saturate(1.4);
  backdrop-filter: blur(var(--cab-desenfoque)) saturate(1.4);
  box-shadow: 0 6px 24px rgba(45, 18, 13, var(--cab-sombra));
  transition: color .3s, background .3s;
  pointer-events: auto;
}

.liloo-cab[data-tono="top"] .liloo-cab__pildora {
  --cab-texto: #2D120D;
  --cab-inverso: #FFF8CA;
  --cab-fondo: transparent;
  --cab-desenfoque: 0px;
  --cab-sombra: 0;
}

.liloo-cab[data-tono="img"] .liloo-cab__pildora {
  --cab-texto: #FFF8CA;
  --cab-inverso: #2D120D;
  --cab-fondo: rgba(24, 9, 6, .6);
  --cab-sombra: 0;
}

.liloo-cab[data-tono="dark"] .liloo-cab__pildora {
  --cab-texto: #2D120D;
  --cab-inverso: #FFF8CA;
  --cab-fondo: rgba(255, 248, 202, .92);
}

/* Sin JS nadie cambia el tono: se queda en el que se lee sobre todo. */
html:not(.liloo-js) .liloo-cab[data-tono] .liloo-cab__pildora {
  --cab-texto: #FFF8CA;
  --cab-inverso: #2D120D;
  --cab-fondo: rgba(45, 18, 13, .94);
  --cab-desenfoque: 14px;
}

.liloo-cab a,
.liloo-cab a:hover {
  color: inherit;
}

/* Con dos clases: en la portada, ".liloo-portada :focus-visible" (inicio.css,
   que se carga después) le pondría el contorno Rosewood. Igual el campo del
   boletín y el enlace de la casilla, frente a ".liloo-portada a". */
.liloo-cab .liloo-cab__pildora :focus-visible {
  outline-color: currentColor;
}

.liloo-cab__menu {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.liloo-cab__raya {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.liloo-cab__raya--corta {
  width: 16px;
}

.liloo-cab__logo {
  display: block;
  flex: none;
  width: 78px;
  height: 31px;
  background: currentColor;
  -webkit-mask: url('logo-liloo.svg') center / contain no-repeat;
  mask: url('logo-liloo.svg') center / contain no-repeat;
}

.liloo-cab__nav {
  gap: 36px;
  font-size: 15px;
  font-weight: 500;
}

.liloo-cab__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Idioma en escritorio: discreto, junto a la cesta. */
.liloo-cab__idiomas {
  align-items: center;
}

.liloo-cab__idiomas a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.liloo-cab__idiomas a[aria-current] {
  text-decoration-line: underline;
}

.liloo-cab__cesta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
}

.liloo-cab__cesta-txt {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.liloo-cab__contador {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 100px;
  background: currentColor;
  transform: scale(1);
  transition: transform .35s cubic-bezier(.3, 1.8, .5, 1);
}

.liloo-cab__contador.is-salto {
  transform: scale(1.35);
}

.liloo-cab__numero {
  color: var(--cab-inverso);
  font-size: 12px;
  font-weight: 700;
}

/* Barra de administración de WordPress (sesión iniciada). */
.admin-bar .liloo-cab.fixed-top {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .liloo-cab.fixed-top {
    top: 46px;
  }
}



/* ---------- Menú (Offcanvas de Bootstrap) ---------- */

.liloo-menu {
  --bs-offcanvas-width: min(360px, 86vw);
  --bs-offcanvas-bg: #6B0B0C;
  --bs-offcanvas-color: #FFF8CA;
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 20px;
  --bs-offcanvas-transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  --liloo-foco: #FFF8CA;
}

.liloo-menu a,
.liloo-menu a:hover {
  color: #FFF8CA;
}

.liloo-menu .offcanvas-header {
  justify-content: flex-end;
  padding-bottom: 0;
}

.liloo-menu .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.liloo-cerrar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.liloo-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.liloo-menu__enlace {
  padding: 6px 0;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.liloo-menu__tienda {
  margin: -14px 0 0;
}

.liloo-menu__tienda a {
  display: block;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 600;
}

.liloo-menu__final {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: auto;
}

.liloo-menu__idiomas {
  display: flex;
  gap: 8px;
}

.liloo-menu__idiomas a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid #FFF8CA;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.liloo-menu__idiomas a[aria-current],
.liloo-menu__idiomas a[aria-current]:hover {
  background: #FFF8CA;
  color: #6B0B0C;
}

.liloo-menu__pie {
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.8;
  text-transform: uppercase;
}



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

.liloo-pie {
  background: #2D120D;
  color: #FFF8CA;
  --liloo-foco: #FFF8CA;
}

.liloo-pie a,
.liloo-pie a:hover {
  color: #FFF8CA;
}

.liloo-pie a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.liloo-pie__garantias {
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid rgba(255, 248, 202, .18);
}

.liloo-pie__garantias li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.liloo-pie__garantias strong {
  font-size: 17px;
  font-weight: 700;
}

.liloo-pie__garantias span {
  color: rgba(255, 248, 202, .78);
  font-size: 14px;
}

.liloo-pie__cuerpo {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  padding-block: clamp(56px, 8vw, 96px) 32px;
}

.liloo-pie__titulo {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.liloo-boletin__form {
  max-width: 520px;
}

.liloo-boletin__fila {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1.5px solid rgba(255, 248, 202, .5);
  border-radius: 100px;
}

.liloo-boletin__fila:focus-within {
  border-color: #FFF8CA;
}

.liloo-boletin__email {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #FFF8CA;
  font-size: 16px;
}

.liloo-boletin__email::placeholder {
  color: rgba(255, 248, 202, .72);
  opacity: 1;
}

.liloo-boletin__fila .liloo-boletin__email:focus-visible {
  outline-offset: 0;
}

.liloo-boletin__fila .liloo-btn {
  --bs-btn-padding-x: 22px;
  --bs-btn-font-size: 15px;
  --bs-btn-hover-bg: #FFB45E;
  --bs-btn-active-bg: #FFB45E;
}

.liloo-boletin__acepto {
  margin-top: 14px;
  color: rgba(255, 248, 202, .88);
  font-size: 14px;
  line-height: 1.45;
}

.liloo-pie .liloo-boletin__acepto a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.liloo-boletin__acepto .form-check-input {
  --bs-form-check-bg: transparent;
  width: 1.15em;
  height: 1.15em;
  border: 1.5px solid #FFF8CA;
}

.liloo-boletin__acepto .form-check-input:checked {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232D120D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: #FFF8CA;
  background-color: #FFF8CA;
}

.liloo-boletin__acepto .form-check-input:focus {
  box-shadow: none;
}

.liloo-boletin__aviso {
  margin: 10px 0 0;
  color: #FFB45E;
  font-size: 14px;
  font-weight: 600;
}

.liloo-boletin__aviso:empty {
  margin: 0;
}

.liloo-boletin__hecho {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* Campo trampa: fuera de la vista y del foco. */
.liloo-boletin__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.liloo-pie__logo {
  display: block;
  width: clamp(130px, 14vw, 180px);
  aspect-ratio: 449 / 178;
  background: #FFF8CA;
  -webkit-mask: url('logo-liloo.svg') left center / contain no-repeat;
  mask: url('logo-liloo.svg') left center / contain no-repeat;
}

.liloo-pie__enlaces .liloo-etiqueta {
  margin-bottom: 14px;
  font-size: 11px;
}

.liloo-pie__enlaces li + li {
  margin-top: 10px;
}

.liloo-pie__enlaces a {
  display: inline-block;
  padding-block: 2px;
  font-size: 15px;
}

.liloo-pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 248, 202, .2);
  color: rgba(255, 248, 202, .78);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.liloo-pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.liloo-pie__legal a,
.liloo-pie__legal a:hover {
  display: inline-block;
  padding-block: 4px;
  color: inherit;
}

.liloo-pie__idiomas {
  display: flex;
  gap: 6px;
}

.liloo-pie__idiomas a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(255, 248, 202, .4);
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: .06em;
}

.liloo-pie__idiomas a[aria-current] {
  border-color: #FFF8CA;
  background: #FFF8CA;
  color: #2D120D !important;
}



/* Contacto bajo el logo: el correo y, si está en Ajustes → Generales →
   "liloo · Contacto", el teléfono; debajo, los iconos de las redes que tengan
   dirección (template-parts/liloo/pie.php). */
.liloo-pie__contacto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0 0;
  font-size: 15px;
}

.liloo-pie__contacto a {
  display: inline-block;
  padding-block: 2px;
}

.liloo-pie__redes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.liloo-pie__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 248, 202, .4);
  border-radius: 50%;
}

.liloo-pie__redes a:hover {
  border-color: #FFF8CA;
  background: rgba(255, 248, 202, .1);
  text-decoration: none;
}

.liloo-pie__redes svg {
  width: 18px;
  height: 18px;
}

/* Sin el margen entre renglones de las listas de enlaces del pie: aquí manda el gap. */
.liloo-pie__enlaces :is(.liloo-pie__contacto, .liloo-pie__redes) li + li {
  margin-top: 0;
}

/* El pie deja sitio abajo al botón de WhatsApp para que no tape los últimos
   enlaces (legales e idioma). */
.liloo-con-whatsapp .liloo-pie {
  padding-bottom: 88px;
}


/* ---------- Botón flotante de WhatsApp (template-parts/liloo/whatsapp.php) ----------
   Solo si hay número en Ajustes → Generales → "liloo · Contacto". Círculo
   Coffee Bean con el icono en Lemon Chiffon (16,2:1) y un aro Lemon que lo
   despega del pie y de las fotos oscuras. Capas: debajo de la píldora de la
   cabecera (1030), del aviso de cookies (1035) y del fondo y los cajones de
   Bootstrap (1040/1045): con el menú o la cesta abiertos queda tapado. Mientras
   se ve el aviso de cookies (que en el móvil ocupa ese mismo sitio) no sale. */
.liloo-whatsapp {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2D120D;
  color: #FFF8CA;
  box-shadow: 0 0 0 2px rgba(255, 248, 202, .6), 0 8px 24px rgba(45, 18, 13, .28);
  transition: transform .2s ease, background-color .2s ease;
}

.liloo-whatsapp svg {
  width: 28px;
  height: 28px;
}

.liloo-whatsapp:hover,
.liloo-whatsapp:focus-visible {
  background: #4A2219;
  color: #FFF8CA;
  transform: translateY(-2px);
}

/* Foco visible sobre fondo claro y sobre el pie oscuro: aro Lemon + aro Coffee Bean. */
.liloo-whatsapp:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #FFF8CA, 0 0 0 6px #2D120D;
}

body:has(#neon-consent:not([hidden])) .liloo-whatsapp {
  display: none;
}

@media (min-width: 992px) {
  .liloo-whatsapp {
    right: 24px;
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liloo-whatsapp {
    transition: none;
  }

  .liloo-whatsapp:hover,
  .liloo-whatsapp:focus-visible {
    transform: none;
  }
}

@media print {
  .liloo-whatsapp {
    display: none;
  }
}



/* ---------- Aviso de cookies (plugin neon-consent) ----------
   El plugin es el mismo en todas las webs de Neon y trae su tarjeta oscura con
   !important en color, fondo y borde (consent.v2.css y un <style> crítico en
   el pie, que va después de esta hoja). Aquí se le pone la ropa de liloo sin
   tocar el plugin: todo va bajo ":root #neon-consent" / ":root #neon-consent-modal",
   un punto más de especificidad que el plugin, también con !important.

   Tarjeta Lemon Chiffon con texto Coffee Bean (16,2:1), como el cajón de la
   cesta; botones en píldora: "Aceptar todo" Rosewood con texto Lemon (11,6:1)
   y los otros con borde Coffee Bean. Rosewood nunca va sobre Coffee Bean.
   z-index 1035: por encima de la píldora de la cabecera (1030) pero debajo del
   fondo y los cajones de Bootstrap (1040/1045), para que la cesta y el menú,
   al abrirse, no queden con su pie tapado por el aviso. */

:root #neon-consent {
  z-index: 1035 !important;
  width: min(432px, calc(100vw - 40px)) !important;
  padding: 20px 22px 22px !important;
  border: 1px solid rgba(45, 18, 13, .14) !important;
  border-radius: 24px !important;
  background: #FFF8CA !important;
  color: #2D120D !important;
  box-shadow: 0 6px 24px rgba(45, 18, 13, .14), 0 18px 48px rgba(45, 18, 13, .12) !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

:root #neon-consent .nc-txt {
  margin: 0 0 16px !important;
  color: #2D120D !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

:root #neon-consent .nc-txt strong {
  color: #2D120D !important;
  font-weight: 700 !important;
}

:root #neon-consent .nc-txt a,
:root #neon-consent .nc-txt a:hover {
  color: #6B0B0C !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  opacity: 1 !important;
}

:root #neon-consent .nc-acts {
  gap: 8px !important;
}

/* Píldoras (aviso y modal), como .liloo-btn: 44 px de alto, peso 700. */
:root #neon-consent .nc-btn,
:root #neon-consent-modal .nc-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 18px !important;
  border: 1.5px solid #2D120D !important;
  border-radius: 100px !important;
  background: transparent !important;
  color: #2D120D !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  filter: none !important;
}

:root #neon-consent .nc-btn:hover,
:root #neon-consent-modal .nc-btn:hover {
  border-color: #2D120D !important;
  background: rgba(45, 18, 13, .08) !important;
  color: #2D120D !important;
}

:root #neon-consent .nc-btn--fill,
:root #neon-consent-modal .nc-btn--fill {
  border-color: #6B0B0C !important;
  background: #6B0B0C !important;
  color: #FFF8CA !important;
}

/* Al pasar, Coffee Bean con texto Lemon (16,2:1), como .liloo-btn--oscuro al revés. */
:root #neon-consent .nc-btn--fill:hover,
:root #neon-consent-modal .nc-btn--fill:hover {
  border-color: #2D120D !important;
  background: #2D120D !important;
  color: #FFF8CA !important;
}

:root #neon-consent :focus-visible,
:root #neon-consent-modal :focus-visible {
  outline: 2px solid #6B0B0C !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* El interruptor esconde su casilla: el foco se pinta en la pista. */
:root #neon-consent-modal .nc-sw input:focus-visible + span {
  outline: 2px solid #6B0B0C !important;
  outline-offset: 2px !important;
}

/* Modal de preferencias: caja Lemon como el cajón de la cesta, fondo Coffee Bean al 45 % como el de Bootstrap. */
:root #neon-consent-modal .nc-overlay {
  background: rgba(45, 18, 13, .45) !important;
}

:root #neon-consent-modal .nc-box {
  max-width: 520px !important;
  border: 1px solid rgba(45, 18, 13, .14) !important;
  border-radius: 24px !important;
  background: #FFF8CA !important;
  color: #2D120D !important;
  box-shadow: 0 24px 70px rgba(45, 18, 13, .3) !important;
  font-family: var(--bs-font-sans-serif) !important;
}

:root #neon-consent-modal .nc-head {
  gap: 16px !important;
  padding: 18px 18px 8px 24px !important;
}

:root #neon-consent-modal .nc-head h2 {
  color: #2D120D !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

/* Cerrar: el círculo de 44 px de .liloo-cerrar. */
:root #neon-consent-modal .nc-x {
  display: flex !important;
  flex: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 0 2px !important;
  border: 1.5px solid #2D120D !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #2D120D !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

:root #neon-consent-modal .nc-x:hover {
  background: rgba(45, 18, 13, .08) !important;
  color: #2D120D !important;
}

:root #neon-consent-modal .nc-body {
  padding: 4px 24px 6px !important;
}

:root #neon-consent-modal .nc-row {
  border-top: 1px solid rgba(45, 18, 13, .14) !important;
}

:root #neon-consent-modal .nc-row:first-child {
  border-top: 0 !important;
}

:root #neon-consent-modal .nc-row strong {
  color: #2D120D !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Coffee Bean al 78 % sobre Lemon: 8,3:1. */
:root #neon-consent-modal .nc-row span {
  color: rgba(45, 18, 13, .78) !important;
  font-size: 13.5px !important;
}

/* Interruptor: pista apagada Coffee Bean al 55 % (3,9:1 con la tarjeta y con
   la bola, mínimo 3:1 de un control), encendida Rosewood (11,6:1). */
:root #neon-consent-modal .nc-sw span {
  background: rgba(45, 18, 13, .55) !important;
}

:root #neon-consent-modal .nc-sw span::before {
  background: #FFF8CA !important;
}

:root #neon-consent-modal .nc-sw input:checked + span {
  background: #6B0B0C !important;
}

:root #neon-consent-modal .nc-foot {
  gap: 8px !important;
  padding: 14px 24px 24px !important;
}

/* Móvil: la misma tarjeta a lo ancho, más justa, y los tres botones en una
   fila mientras quepan (390 px). */
@media (max-width: 560px) {
  :root #neon-consent {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    width: auto !important;
    padding: 16px 16px 16px 18px !important;
    border-radius: 20px !important;
  }

  :root #neon-consent .nc-txt {
    margin-bottom: 14px !important;
  }

  :root #neon-consent .nc-acts {
    gap: 6px !important;
  }

  :root #neon-consent .nc-btn {
    flex: 1 1 auto !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
  }

  :root #neon-consent-modal {
    padding: 12px !important;
  }

  :root #neon-consent-modal .nc-foot .nc-btn {
    flex: 1 1 auto !important;
    padding: 0 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root #neon-consent .nc-btn,
  :root #neon-consent-modal .nc-btn,
  :root #neon-consent-modal .nc-sw span,
  :root #neon-consent-modal .nc-sw span::before {
    transition: none !important;
  }
}

/* Páginas legales (legal.css del plugin, por legal_slugs): el texto se alinea
   con el título de la página en vez de centrarse en la columna. El contenido ya
   trae su <div class="legal-doc"> y el plugin lo vuelve a envolver: el de
   dentro no repite el ancho ni el margen. */
.entry-content > .legal-doc {
  margin-inline: 0;
}

.legal-doc .legal-doc {
  max-width: none;
  padding: 0;
}

/* Solo Inter Display: legal.css pone en monoespaciada la primera columna de
   las tablas (el nombre de la cookie). */
.entry-content .legal-doc tbody td:first-child {
  font-family: inherit;
}



/* ---------- Alto contraste y movimiento reducido ---------- */

@media (forced-colors: active) {
  .liloo-cab__logo,
  .liloo-pie__logo {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

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