/* ==========================================================================
   The Lab Room · cabecera y pie de Synaptik
   Una sola pieza para todo el sitio: la portada y el resto.
   Todo cuelga de .tlr-chrome para que el CSS del tema no la pise y para no
   pisarle nada a él. Las variables salen de design-system.css, con respaldo
   por si esta hoja se carga sola.
   ========================================================================== */

.tlr-chrome {
  --c-bone:  var(--tlr-bone, #F3EDE3);
  --c-ink:   var(--tlr-ink, #1B1A17);
  --c-soft:  var(--tlr-ink-soft, #3A382F);
  --c-euca:  var(--tlr-eucalyptus, #CCD5C6);
  --c-amber: var(--tlr-amber, #C79A5B);
  --c-linea: rgba(27, 26, 23, .14);
  --c-serif: var(--tlr-serif, 'Zodiak', Georgia, serif);
  --c-sans:  var(--tlr-sans, 'Archivo', system-ui, sans-serif);
  --c-pad:   clamp(1.25rem, 5vw, 6rem);
  --c-maxw:  1500px;
  /* 18 oct. Tipografía A (Oak) en toda la web (DIRECCION-diseno-referencias.md,
     "18 oct"). Dos voces: la etiqueta, que es la de TIENDA / NOSOTROS del pie,
     y el cuerpo. Los tokens los pone design-system.css; aquí van con respaldo. */
  --c-et-tam: 11.5px;
  --c-et-ls:  var(--tlr-t-etiqueta-ls, .16em);
  --c-cu-tam: 14.5px;
  font-family: var(--c-sans);
  box-sizing: border-box;
}
.tlr-chrome *,
.tlr-chrome *::before,
.tlr-chrome *::after { box-sizing: border-box; }
.tlr-chrome a { text-decoration: none; color: inherit; }
.tlr-chrome img { display: block; max-width: 100%; }
.tlr-chrome ul { list-style: none; margin: 0; padding: 0; }

/* Passim sube el contenido 133 px para meterlo bajo su cabecera transparente,
   con un <style> que escribe en cada página. La nuestra va en el flujo, así
   que ese tirón dejaba el título de cada página tapado. Va con !important
   porque el suyo se imprime después. */
#qodef-page-outer { margin-top: 0 !important; }

/* --- barra de aviso ------------------------------------------------------ */

/* 18 de septiembre. Mónica, vídeo del 17: "la barra de arriba en negro no,
   mejor el verde clarito nuestro". Eucalipto con el texto en TINTA: medido,
   11,66:1.

   5 de octubre. Mónica, capturas 3226 y 3289: que el texto "vaya pasando".
   Antes los tres mensajes se turnaban con fundido, apilados en una celda de
   rejilla (y en la 3243 se veía "HECHO EN MADRID" detrás de otro mensaje). Ahora
   es una marquesina continua: la pista lleva el grupo de mensajes 4 veces y se
   desplaza un grupo exacto (-25 % de su propio ancho), así que el bucle no da
   saltos ni deja hueco. Nada de mensajes apilados. */
.tlr-aviso {
  background: var(--c-euca);
  color: var(--c-ink);
  position: relative;
  z-index: 60;
  overflow: hidden;
}
.tlr-aviso__pista {
  display: flex;
  width: max-content;
  animation: tlr-marquesina 36s linear infinite;
}
.tlr-aviso:hover .tlr-aviso__pista { animation-play-state: paused; }
.tlr-aviso__grupo { display: flex; flex: none; align-items: center; }
.tlr-aviso__msg {
  margin: 0;
  padding: .65rem 0;
  font-size: var(--c-et-tam);
  letter-spacing: var(--c-et-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}
/* El separador entre mensajes: un punto, a derecha de cada uno. */
.tlr-aviso__msg::after {
  content: "";
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  margin-inline: 2.4rem;
  vertical-align: middle;
}
@keyframes tlr-marquesina { from { transform: translateX(0); } to { transform: translateX(-25%); } }
/* Movimiento reducido: quieto y legible. Solo el primer mensaje, centrado y
   con salto de línea si no cabe (como antes del turno). `animation:none` ya
   lo pone el bloque general del final; aquí se deshace el resto. */
@media (prefers-reduced-motion: reduce) {
  .tlr-aviso__pista, .tlr-aviso__grupo { display: block; width: auto; animation: none; transform: none; }
  .tlr-aviso__grupo:not(:first-child) { display: none; }
  .tlr-aviso__msg:not(:first-child) { display: none; }
  .tlr-aviso__msg { white-space: normal; text-align: center; padding-inline: 1rem; }
  .tlr-aviso__msg::after { display: none; }
}

/* --- cabecera ------------------------------------------------------------ */

.tlr-hdr {
  position: relative; /* contenedor del desplegable de la tienda */
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .4s, color .4s, border-color .4s;
}

/* La portada: superpuesta sobre el vídeo, en claro. */
.tlr-hdr--sobre-video {
  position: absolute;
  color: var(--c-bone);
  background: transparent;
}

/* El resto del sitio: sólida, en el flujo, sin tapar el contenido. */
.tlr-hdr--solida {
  position: relative;
  color: var(--c-ink);
  background: var(--c-bone);
  border-bottom-color: var(--c-linea);
}

/* Al bajar, las dos se quedan arriba y en claro. */
.tlr-hdr.tlr-hdr--fija {
  position: fixed;
  top: 0;
  color: var(--c-ink);
  /* Iba a fuego en el hueso `rgba(243,237,227,.92)`, y por eso la cabecera se
     quedaba beige al bajar aunque el fondo B ya fuera blanco: el selector de
     fondos cambiaba variables y esta linea no era una variable. Se veia midiendo
     el pixel con la pagina bajada, no arriba del todo, que es donde la cabecera
     va transparente sobre el video. Ahora sigue a `--c-bone`. */
  background: rgba(255, 255, 255, .92);
  background: color-mix(in srgb, var(--c-bone) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--c-linea);
}

.tlr-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 78px;
  max-width: var(--c-maxw);
  margin: 0 auto;
  padding-inline: var(--c-pad);
}

.tlr-nav__links {
  display: flex;
  gap: 2.2rem;
  font-size: var(--c-et-tam);
  letter-spacing: var(--c-et-ls);
  text-transform: uppercase;
  font-weight: 600;
}
.tlr-nav__links a { position: relative; padding-block: .4rem; }
/* 5 oct. "Reserva tu tratamiento" (en vez de "Spa") hace el menú de escritorio
   98 px más ancho: medido a 1440, la última entrada quedaba a 5 px del logo, y
   por debajo de 1440 el texto se partía en dos líneas. De 1440 en adelante
   entra con el hueco entre entradas más corto (1,6 rem, queda un margen de 34 px
   hasta el logo, ES; más en EN). Entre 901 y 1439 se queda "Spa". Cada rango
   enseña un solo texto (el otro, display:none), así el nombre accesible es
   siempre el que se ve y quien dicte "Spa" por voz acierta. */
/* 5 oct, tarde. Mónica (vídeo): en este menú largo del ordenador prefiere "Spa",
   que es más corto; "Reserva tu tratamiento" queda en el botón de la página del
   Spa y en el menú del móvil. Aquí sale siempre el texto corto y vuelve el hueco
   de 2,2 rem entre entradas (el de 1,6 rem solo hacía falta para el largo). El
   largo sigue con display:none, así el nombre accesible es el que se ve. */
.tlr-nav__largo { display: none; }
.tlr-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .1rem;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.tlr-nav__links a:hover::after { width: 100%; }
/* 16 oct. Blog y Prensa junto a Nosotros (reunión). Las seis entradas solo
   caben desde 1366 px y con el hueco a 1,4 rem (menu16-medir.js, hasta el logo:
   ES 36 px a 1366 y 69 a 1440; EN 72 y 105). Con 2,2 rem no cabían ni a 1440
   (5 px). Por debajo de 1366 se quedan las cuatro de siempre con su hueco, y
   Blog y Prensa viven en el panel de Nosotros, que a partir de 1366 sobra. */
.tlr-nav__links .tlr-nav__ancho { display: none; }
/* 19 oct, Melissa: "todavía no está lo del blog aquí" (portátil por debajo de 1366). Desde el 17 sin
   Prensa son cinco entradas y caben desde 1100 px con el hueco a 1,4 rem: hasta el logo quedan
   ES 40 px y EN 64 a 1100, ES 90 y EN 114 a 1280 (medido en staging). */
@media (min-width: 1100px) {
  .tlr-nav__links { gap: 1.4rem; }
  .tlr-nav__links .tlr-nav__ancho { display: inline; }
  .tlr-mega--nosotros .tlr-mega__panel { display: none; }
}

/* --- desplegable de la tienda, 9 de septiembre ---------------------------
   Referencia: el "SHOP" de omorovicza.eu. Se abre con el ratón encima y con
   el foco dentro (teclado), sin JavaScript. `.tlr-mega` estira a todo el alto
   de la barra para que el puntero no pierda el hover al bajar del enlace al
   panel; el panel cuelga del `header` (position:relative más abajo), a toda
   anchura, en bone con la tinta encima aunque la cabecera esté sobre el
   vídeo. El enlace "Tienda" sigue siendo un enlace: clic va a la tienda. */
.tlr-mega { align-self: stretch; display: flex; align-items: center; }
.tlr-mega__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-bone); color: var(--c-ink);
  border-top: 1px solid var(--c-linea); border-bottom: 1px solid var(--c-linea);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
  z-index: 5;
}
.tlr-mega:hover .tlr-mega__panel,
.tlr-mega:focus-within .tlr-mega__panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.tlr-mega__cols {
  max-width: var(--c-maxw); margin: 0 auto; padding: 2.4rem var(--c-pad) 2.8rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 3rem;
}
.tlr-mega__col { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.tlr-mega__titulo {
  margin: 0 0 .6rem; font-size: var(--c-et-tam); letter-spacing: var(--c-et-ls); text-transform: uppercase;
  font-weight: 600; color: var(--c-ink); /* 10-sep: Dani, "en negrita para que se vea más"; 18 oct: 600, la voz de etiqueta */
}
/* Los enlaces del panel van en caja baja, tamaño de lectura, sin el
   subrayado de los del menú (que se quita con el ::after a cero). */
.tlr-nav__links .tlr-mega__col a {
  font-size: var(--c-cu-tam); letter-spacing: 0; text-transform: none; font-weight: 300;
  color: var(--c-soft); padding-block: .15rem; transition: opacity .25s;
}
.tlr-nav__links .tlr-mega__col a::after { display: none; }
.tlr-nav__links .tlr-mega__col a:hover { opacity: .6; }

/* Sobre el vídeo, los enlaces en tinta desaparecían. Conservan su color y
   solo bajan de intensidad, así funciona igual sobre vídeo que sobre bone.

   Oportunidad 4 del pase de animaciones, 1 de septiembre. Antes esto era
   `.tlr-hdr a:hover`, que alcanzaba TAMBIÉN a `.tlr-nav__links a`: el enlace
   del menú sumaba esta caída a .62 al subrayado que ya crece por debajo
   (línea 124), dos efectos en el mismo elemento. Ahora el .62 se reserva
   para el logotipo y los enlaces de acción sin gesto propio (buscar, cuenta,
   cesta); el menú se queda solo con el subrayado.

   Y de paso deja de tapar al selector de idioma: `.tlr-idiomas__op` ya trae
   su propio hover (.66 a .88, más abajo) que hasta ahora perdía siempre
   contra esta regla por especificidad (0,2,1 contra 0,2,0), así que nunca se
   veía. No se toca su regla; simplemente deja de estar por debajo. */
.tlr-brand:hover,
.tlr-oculta-movil:hover,
.tlr-cesta:hover { color: inherit; opacity: .62; }

.tlr-brand { justify-self: center; }
.tlr-brand img { height: 26px; width: auto; }
/* 18 de septiembre: el logotipo más grande (Mónica, vídeo del 17). 230 px de
   ancho, y el alto lo pone el fichero (743x115), así que la proporción es la
   suya y no una inventada.

   Por qué a partir de 1280 y no siempre: la barra es `1fr auto 1fr` y en la
   ventana caben, medido, el menú (430 px) y las acciones (300 px). Con el logo
   a 230 hacen falta 2 x (430 + 8) + 230 = 1106 px de hueco útil, y el hueco útil
   es el 90 % de la ventana: 1229 px. Por debajo de eso el logo se queda como
   estaba, 26 px de alto, que es lo que cabe. Entre 900 y 1280 la barra ya iba
   justa antes de esto (el logo se encogía solo a 143 px) y ahí no se toca nada.
   A 390 el menú y "Buscar" no están, pero las acciones sí: a 230 rozarían la
   cesta, así que tampoco crece. */
@media (min-width: 1280px) {
  .tlr-brand img { width: 230px; height: auto; }
}
/* Van con .tlr-hdr delante a proposito: si no, `.tlr-chrome img{display:block}`
   les gana por especificidad y salen los dos logotipos a la vez. */
.tlr-hdr .tlr-logo-oscuro { display: none; }
.tlr-hdr--solida .tlr-logo-claro,
.tlr-hdr--fija .tlr-logo-claro { display: none; }
.tlr-hdr--solida .tlr-logo-oscuro,
.tlr-hdr--fija .tlr-logo-oscuro { display: block; }

/* --- selector de idioma, 13 de agosto -------------------------------------
   Mónica lo pidió en la videollamada y en su web de ahora son dos banderas
   pixeladas dentro de un desplegable. Aquí son las dos siglas seguidas, en la
   misma letra que el resto de la cabecera: el idioma en el que estás va en el
   color del texto y el otro apagado, así que se ve de un vistazo cuál es cuál
   sin abrir nada y sin un solo icono.

   Los colores salen de `currentColor` a propósito: la cabecera tiene dos modos,
   transparente sobre el vídeo de la portada y sólida en el resto, y así el
   selector se lee en los dos sin una segunda regla que mantener.            */
.tlr-idiomas { display: inline-flex; align-items: center; gap: .5rem; }
.tlr-idiomas i {
  width: 1px; height: .78em;
  background: currentColor; opacity: .28;
}
/* El .66 no es a ojo: con la cabecera sólida, la tinta al 50 % sobre blanco
   mide 3,32:1 y no pasa AA. Al 62 % son 4,84 y al 66 % son 5,53. */
.tlr-idiomas__op {
  color: currentColor; opacity: .66;
  transition: opacity var(--c-trans, 180ms) ease;
}
.tlr-idiomas__op:hover { opacity: .88; }
.tlr-idiomas__op.es-actual { opacity: 1; font-weight: 600; }

.tlr-nav__acciones {
  display: flex;
  gap: 1.4rem;
  justify-self: end;
  align-items: center;
  font-size: var(--c-et-tam);
  letter-spacing: var(--c-et-ls);
  text-transform: uppercase;
  font-weight: 600;
}
.tlr-cesta__num { font-variant-numeric: tabular-nums; }
/* 5 oct, captura 3226: en móvil la cesta es un icono con el número. En
   escritorio se queda el texto, igual que Buscar y Cuenta (que ahí no hay). */
.tlr-cesta { position: relative; }
.tlr-cesta__icono, .tlr-cesta__badge { display: none; }
/* Oportunidad 4 de tienda, 1 de septiembre. Mismo keyframe que ya usaba
   `carrito.css` para el importe del carrito (`tlr-aparece-importe`, 260ms),
   subido aquí porque el contador de la cesta vive en la cabecera y esta es
   la única hoja que se carga en todo el sitio. `chrome.js` solo añade la
   clase cuando el número leído de la Store API cambia de verdad. */
@keyframes tlr-aparece-importe { from { opacity: 0; } to { opacity: 1; } }
.tlr-cesta__num.tlr-pulso,
.tlr-cesta__badge.tlr-pulso { animation: tlr-aparece-importe 260ms ease; }

/* --- menú de móvil ------------------------------------------------------- */

.tlr-burger {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  place-items: center;
  /* 5 oct, captura 3226: "esas dos rayas están muy separadas". Con el botón a
     34 px de alto y las filas estiradas (align-content por defecto) las dos
     rayas quedaban a 17 px una de otra. Juntas en el centro, 5 px de hueco. */
  align-content: center;
  gap: 5px;
  grid-auto-flow: row;
}
.tlr-burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s;
}
.tlr-burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.tlr-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

.tlr-menu-movil {
  display: none;
  flex-direction: column;
  gap: .2rem;
  padding: .5rem var(--c-pad) 1.6rem;
  background: var(--c-bone);
  border-top: 1px solid var(--c-linea);
}
.tlr-menu-movil__sub { display: flex; flex-direction: column; }
.tlr-menu-movil .tlr-menu-movil__sub a {
  padding: .6rem 0 .6rem 1.2rem; font-size: var(--c-et-tam); border-bottom: 0; opacity: .78;
}
.tlr-menu-movil__sub { border-bottom: 1px solid var(--c-linea); padding-bottom: .5rem; }
.tlr-menu-movil__idiomas { display: none; gap: 1.4rem; padding-top: 1.1rem; }
.tlr-menu-movil .tlr-menu-movil__idiomas a { border-bottom: 0; padding: 0; opacity: .66; }
.tlr-menu-movil .tlr-menu-movil__idiomas a.es-actual { opacity: 1; font-weight: 600; }
.tlr-menu-movil a {
  color: var(--c-ink);
  padding: .95rem 0;
  font-size: var(--c-et-tam);
  letter-spacing: var(--c-et-ls);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--c-linea);
}

@media (max-width: 600px) {
  .tlr-nav .tlr-idiomas { display: none; }
  .tlr-menu-movil__idiomas { display: flex; }
}
/* 6 oct. La cabecera del móvil (hamburguesa, icono de cesta, menú desplegable)
   llega ahora hasta 1023 px, antes hasta 900: entre 901 y unos 980 px el menú de
   escritorio tocaba el logo (0 px de margen, medido). Desde 1024 hay aire (22 px
   a 1024 en ES). El pie sigue cambiando a 900 (bloque de más abajo). */
@media (max-width: 1023px) {
  /* El texto se oculta solo a la vista: es el nombre accesible del enlace. */
  .tlr-cesta__txt, .tlr-cesta__num {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .tlr-cesta { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
  .tlr-cesta__icono { display: block; }
  /* El número va dentro de la bolsa, en el color del texto: así se lee igual
     sobre el vídeo (hueso) y sobre la cabecera sólida (tinta), sin fondo. */
  .tlr-cesta__badge {
    display: block; position: absolute; left: 0; right: 0; top: 16px;
    font-size: .6rem; line-height: 10px; font-weight: 600; letter-spacing: 0;
    text-align: center; font-variant-numeric: tabular-nums;
  }
  .tlr-nav { height: 64px; }
  .tlr-nav__links { display: none; }
  .tlr-oculta-movil { display: none; }
  .tlr-burger { display: grid; }
  .tlr-menu-movil[hidden] { display: none; }
  .tlr-menu-movil { display: flex; }
  /* Con el menú abierto la cabecera necesita fondo aunque esté sobre el vídeo */
  .tlr-hdr.tlr-menu-abierto { background: var(--c-bone); color: var(--c-ink); }
  .tlr-hdr.tlr-menu-abierto .tlr-logo-claro { display: none; }
  .tlr-hdr.tlr-menu-abierto .tlr-logo-oscuro { display: block; }
}

/* --- el hueco blanco de debajo del pie, 13 de agosto ----------------------
   Mónica: "en el footer ese espacio blanco queda así como raro". Son 76 px, y
   no son margen nuestro: los ocupan dos contenedores de plugins suyos que se
   pintan después del pie, medidos en el navegador.

     div.qwfw-m    26 px   widget flotante de WooCommerce
     div.cr-pswp   51 px   la lupa de Customer Reviews (PhotoSwipe)

   Los dos van vacíos y transparentes mientras no se usan, así que se les quita
   el hueco solo en reposo. La lupa recupera su sitio al abrirse, que es cuando
   PhotoSwipe le pone `pswp--open`: si se ocultara siempre, dejaría de verse la
   foto ampliada de una reseña.                                              */
.qwfw-m:not(.qwfw-m--abierto) { display: none; }
.cr-pswp:not(.pswp--open) { display: none; }

/* --- pie ----------------------------------------------------------------- */

/* El pie va en verde, no en negro. Decision de Monica el 11 de agosto: el negro
   "es volver un poco al beige y al negro" y quiere evitarlo porque los colores
   nuevos no son esos.

   Los dos colores estan aqui para poder cambiar de uno a otro tocando una sola
   linea. Salvia claro #CCD5C6 es el puesto; eucalipto #8A9A82 es el de su propio
   sistema de diseno, el del hover de los botones. Con cualquiera de los dos el
   texto va en TINTA: sobre eucalipto, el hueso da 2,57 de contraste y no se lee.
   Medido, no supuesto. */
.tlr-ftr {
  --c-pie-fondo: #CCD5C6;   /* alternativa: #8A9A82, el eucalipto de la paleta */
  --c-pie-texto: var(--c-ink);
  background: var(--c-pie-fondo);
  color: var(--c-pie-texto);
  padding-block: clamp(3.2rem, 6vw, 5rem) 2rem;
  margin: 0;
}
.tlr-ftr__wrap {
  max-width: var(--c-maxw);
  margin: 0 auto;
  padding-inline: var(--c-pad);
}

/* 5 de octubre. Mónica, capturas 3234 a 3242: pie mucho más corto, como el de
   Augustinus Bader. Newsletter a la izquierda (arriba en móvil), tres columnas
   Tienda / Ayuda / Legal, y una línea de copyright. En escritorio las columnas
   van abiertas; en móvil son acordeones (`chrome.js` añade `--acordeon`, así
   sin JavaScript se quedan abiertas y se leen igual). */
.tlr-ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
}
.tlr-ftr__nl h2 {
  font-family: var(--c-serif);
  font-weight: var(--tlr-t-titulo-peso, 300);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
  color: var(--c-pie-texto);
  /* En las páginas que pinta el tema Passim (carrito, aviso legal...) sus h2
     salen en versales; en nuestras plantillas no. Medido el 5 oct. */
  text-transform: none;
  letter-spacing: 0;
}
.tlr-ftr__nl > p {
  margin: 0 0 1.3rem;
  font-weight: 300;
  font-size: var(--c-cu-tam);
  color: var(--c-soft);
  max-width: 42ch;
  line-height: 1.75;
}
/* El formulario (Mailchimp o su maqueta): mismas clases que en el aviso de
   portada y en la página de newsletter, con la piel del pie. */
.tlr-ftr__form .mc4wp-form, .tlr-ftr__form .mc4wp-form-fields { margin: 0; }
.tlr-ftr__form p { margin: 0 0 .7rem; }
.tlr-ftr__form .promo15-label label {
  font-size: var(--c-et-tam); letter-spacing: var(--c-et-ls); text-transform: uppercase; font-weight: 600;
}
.tlr-ftr__form .promo15-fields { display: flex; gap: .6rem; }
.tlr-ftr__form input[type="email"] {
  flex: 1; min-width: 0;
  font-family: var(--c-sans); font-size: 16px; color: var(--c-ink);
  background: transparent; border: 1px solid rgba(27, 26, 23, .45); border-radius: 999px;
  padding: .8rem 1.2rem; outline: none;
  /* El tema le da margen inferior a los campos y, con la fila en `flex`, el
     botón se estiraba hasta 70 px de alto en las páginas del tema (5 oct). */
  margin: 0; height: auto; line-height: 1.3; box-shadow: none;
}
.tlr-ftr__form input[type="email"]::placeholder { color: rgba(27, 26, 23, .6); }
.tlr-ftr__form input[type="email"]:focus { border-color: var(--c-ink); }
.tlr-ftr__form button[type="submit"],
.tlr-ftr__form input[type="submit"] {
  font-family: var(--c-sans); font-size: var(--c-et-tam); letter-spacing: var(--c-et-ls); text-transform: uppercase;
  font-weight: 600; padding: .8rem 1.5rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-ink); background: var(--c-ink); color: #fff;
  margin: 0; height: auto; line-height: 1.3; box-shadow: none; white-space: nowrap;
  transition: background .35s, color .35s;
}
.tlr-ftr__form button[type="submit"]:hover,
.tlr-ftr__form input[type="submit"]:hover { background: transparent; color: var(--c-ink); }
.tlr-ftr__form .promo15-consent { font-size: .74rem; line-height: 1.45; opacity: .8; }
.tlr-ftr__form .promo15-consent label { display: flex; gap: .5rem; align-items: flex-start; }
.tlr-ftr__form .promo15-consent input { margin-top: .15rem; }
.tlr-ftr__form .mc4wp-response { font-size: .8rem; }
.tlr-ftr__form .mc4wp-response p { margin: 0; }

.tlr-ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-content: start; }
.tlr-ftr__tit {
  font-family: var(--c-sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 1.3rem;
  opacity: .6;
  font-weight: 600;
  color: var(--c-pie-texto);
}
.tlr-ftr__acc { display: none; }
.tlr-ftr li { margin-bottom: .75rem; }
.tlr-ftr__col a { font-weight: 300; font-size: var(--c-cu-tam); color: var(--c-soft); }
.tlr-ftr__col a:hover { color: var(--c-ink); }
/* "Preferencias de cookies" (9 oct): es un botón, porque abre el aviso y no
   lleva a ninguna página, pero se lee igual que los enlaces de al lado. */
.tlr-ftr__legal .tlr-ftr__boton { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--c-pie-texto); text-transform: none; letter-spacing: 0; box-shadow: none; }
/* 17 oct. La línea de abajo de oakessentials.com: el copyright y, a su lado,
   los enlaces legales sueltos en letra pequeña (Dani: el plegable "Legal y
   cookies" bajo el logo "no pinta nada ahí"). Todo a la izquierda: a la
   derecha lo tapaba el "Back to top" fijo de Passim en sus páginas
   (carrito, aviso legal), medido el 16 oct. */
.tlr-ftr__legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin: 0; padding: 0; list-style: none; font-size: .78rem; letter-spacing: 0; text-transform: none; font-weight: 300;
}
.tlr-ftr .tlr-ftr__legal li { margin: 0; }
.tlr-ftr__legal a, .tlr-ftr__legal .tlr-ftr__boton { opacity: .7; font-size: .78rem; color: var(--c-soft); }
.tlr-ftr__legal a:hover, .tlr-ftr__legal .tlr-ftr__boton:hover { opacity: 1; }
.tlr-ftr__abajo {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .8rem 3rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.7rem;
  border-top: 1px solid rgba(27, 26, 23, .22);
  font-size: var(--c-et-tam);
  letter-spacing: var(--c-et-ls);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.tlr-ftr__copy { opacity: .65; font-weight: 600; }

@media (max-width: 900px) {
  .tlr-ftr { padding-block: 2.4rem 1.6rem; }
  .tlr-ftr__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .tlr-ftr__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* Acordeón. El panel colapsa con grid 0fr a 1fr, y el relleno va en el hijo
     (`ul`), dentro del contenedor con overflow: hidden, no en el panel (memoria
     el-relleno-no-colapsa-con-0fr). Cerrado, `visibility` saca los enlaces del
     tabulador; abierto, vuelve sin retraso. */
  .tlr-ftr--acordeon .tlr-ftr__tit { display: none; }
  .tlr-ftr--acordeon .tlr-ftr__col { border-top: 1px solid rgba(27, 26, 23, .22); }
  .tlr-ftr--acordeon .tlr-ftr__col:last-child { border-bottom: 1px solid rgba(27, 26, 23, .22); }
  .tlr-ftr--acordeon .tlr-ftr__acc {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 1rem 0; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--c-sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 600; color: var(--c-pie-texto);
  }
  .tlr-ftr__acc i { position: relative; width: 12px; height: 12px; flex: none; }
  .tlr-ftr__acc i::before, .tlr-ftr__acc i::after {
    content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: currentColor;
    transition: transform .3s ease;
  }
  .tlr-ftr__acc i::after { transform: rotate(90deg); }
  .tlr-ftr__col.es-abierto .tlr-ftr__acc i::after { transform: none; }
  .tlr-ftr--acordeon .tlr-ftr__panel {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease;
  }
  .tlr-ftr--acordeon .es-abierto .tlr-ftr__panel { grid-template-rows: 1fr; }
  .tlr-ftr--acordeon .tlr-ftr__dentro {
    min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .35s;
  }
  .tlr-ftr--acordeon .es-abierto .tlr-ftr__dentro { visibility: visible; transition: none; }
  .tlr-ftr--acordeon .tlr-ftr__panel ul { padding-bottom: .5rem; }
  /* Sin raya arriba: la última línea del acordeón ya separa, y con las dos
     salía una raya doble (17 oct). */
  .tlr-ftr__abajo { flex-direction: column; align-items: center; text-align: center; gap: 1rem; margin-top: 2rem; border-top: 0; padding-top: 0; }
  .tlr-ftr__legal { justify-content: center; }
}
@media (max-width: 560px) {
  .tlr-ftr__form .promo15-fields { flex-direction: column; }
  .tlr-ftr__form button[type="submit"],
  .tlr-ftr__form input[type="submit"] { width: 100%; }
}

/* ---------------------------------------------------------------------------
   REDUCIR MOVIMIENTO · el interruptor de todo el sitio, y va AQUÍ a propósito.

   Esta hoja es la única que se carga en TODAS las páginas: `design-system.css`
   se salta nuestras plantillas y `piezas.css` sólo entra en ellas. Puesto en
   cualquiera de las otras dos, medio sitio se quedaba sin cumplirlo.

   Lo que había antes era `.tlr-chrome *`, y el asterisco son los HIJOS: la
   cabecera es `.tlr-chrome`, no un hijo suyo, así que se seguía animando ella
   sola. Medido en navegador con el modo activado: 0,4 s. Es el mismo fallo que
   `.card-shot__alt`, una regla escrita de buena fe que se aplica y no hace nada.

   Y se quita el MOVIMIENTO, no el color: lo que molesta a quien pide reducir
   movimiento es que las cosas se desplacen, escalen y giren. Un cambio de color
   al pasar el ratón no sólo no molesta, es la única señal de que el botón
   responde. Por eso la lista de propiedades que sobreviven es corta y explícita,
   y las demás (`transform` incluida) se quedan fuera.

   El `!important` no es pereza: sin él pierde contra cualquier regla con más
   especificidad, que es exactamente lo que llevaba pasando.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color, fill, stroke, box-shadow !important;
    transition-duration: 150ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* EL RIESGO DE ESTE BLOQUE, y comprobado antes de dejarlo así.

     `animation:none` llega ahora al carrito y al pago por primera vez, porque
     hasta hoy el bloque vivía en `piezas.css`, que no entra en esas dos
     páginas. Y ahí es donde WooCommerce pondría sus ruedecitas de carga. Una
     ruedecita PARADA es peor que una que gira: dice "esto no funciona" en vez
     de "espera un momento", y el peor sitio para decir eso es el paso de pago.

     Ojo, porque la comprobación obvia NO lo detecta: una animación congelada
     devuelve duración 0 s, o sea que un contador de "elementos que animan"
     la da por buena. Hay que buscar el ELEMENTO, no el número.

     Buscado en navegador, con producto en la cesta y cambiando la cantidad:
     el único elemento con animación de fotogramas en el carrito es el importe
     nuestro, y en el paso de pago no hay ninguno. **Hoy no hay nada que
     congelar.**

     Si algún día aparece una (los 40 y pico plugins se actualizan solos de
     madrugada), el arreglo va justo aquí: devolverle su animación a mano al
     selector de la ruedecita. No se deja escrito por adelantado porque
     `animation-name:revert-layer` NO la recupera, hay que nombrarla, y una
     regla que no se puede probar hoy es una regla que nadie sabe si funciona. */
}

/* ---------------------------------------------------------------------------
   La banda de titulo de Passim, justo debajo de nuestra cabecera.

   Va aqui y no en la hoja del carrito porque sale en TODAS las paginas del
   tema (blog, paginas estaticas, carrito, cuenta), y dejarla gris #f2f2f2 en
   una sola rompia la continuidad con el hueso del resto. Solo cambia el
   fondo y la tipografia de las migas: el contenido lo sigue poniendo el tema.
   --------------------------------------------------------------------------- */
.qodef-page-title {
  background-color: var(--tlr-bone, #F3EDE3);
}
.qodef-page-title .qodef-breadcrumbs,
.qodef-page-title .qodef-breadcrumbs a,
.qodef-page-title .qodef-breadcrumbs span {
  font-family: var(--tlr-sans, system-ui), sans-serif;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tlr-ink-soft, #3A382F);
}
.qodef-page-title .qodef-breadcrumbs a:hover {
  color: var(--tlr-ink, #1B1A17);
}

/* ---------------------------------------------------------------------------
   WordPress cambia los emoji por una <img>. Sin tamano se comen la pagina: paso
   en una resena de la ficha (un corazon ocupando media tarjeta) y otra vez en
   el carrito vacio, donde la cara llorando de WooCommerce salia a 230 px.
   Va aqui porque chrome.css es la unica hoja que se carga en TODO el sitio,
   tanto en nuestras plantillas como en las del tema.
   --------------------------------------------------------------------------- */
img.emoji {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  margin: 0 .07em;
  vertical-align: -.15em;
  padding: 0;
  background: none;
  border: 0;
}