/* ==========================================================================
   The Lab Room · sistema de diseño Synaptik
   Capa que se monta encima del tema Passim. Vive fuera del tema a propósito,
   para poder quitarla entera sin tocar nada de lo suyo.
   Tipografías y paleta: las de la preview que validó Mónica el 6 de agosto.
   ========================================================================== */

:root {
  /* paleta validada en la preview */
  /* Fondo B, confirmado por Monica el 13 de agosto. Antes era el hueso #F3EDE3
     de la preview; ahora la pagina va en blanco y el gris #F2F2F0 es la baldosa
     de la tarjeta. */
  --tlr-bone:        #FFFFFF;
  --tlr-ink:         #1B1A17;
  --tlr-ink-soft:    #3A382F;
  /* El verde del pie, por decisión de Dani el 13 de agosto, después de que Mónica
     dijera del eucalipto "es que lo veo demasiado oscuro". Antes: #8A9A82.
     Este es el fondo, y encima siempre va la letra en tinta. */
  --tlr-eucalyptus:  #CCD5C6;
  /* Y el mismo verde en oscuro para cuando el verde ES la letra, que sobre
     blanco la salvia mide 1,4 y no se lee. Mismo tono, distinto papel. */
  --tlr-verde-texto: #5B6B55;
  --tlr-amber:       #C79A5B;
  --tlr-clay:        #C2876A;
  --tlr-card:        #F2F2F0;
  --tlr-linea:       #E9E7E3;   /* con B, antes #E3DDD1 */

  /* paleta oficial del manual de marca, para tintes y fondos */
  --tlr-beige:       #f6f3e4;
  --tlr-rose:        #e2cfc8;
  --tlr-sage:        #ccd5c6;
  --tlr-blue:        #cad9db;
  --tlr-orange:      #f3cfaf;

  --tlr-serif: 'Zodiak', Georgia, 'Times New Roman', serif;
  --tlr-sans:  'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* 18 oct: tipografía A (Oak), elegida por Dani para toda la web. Medida en la
     maqueta A del spa. Cuerpo y etiqueta van como `font:` abreviado; la etiqueta
     lleva además versal y este espacio de letra. Necesitan Zodiak 300/301 y
     Archivo 300 cargados en la plantilla. */
  --tlr-t-cuerpo:      300 14.5px/1.75 var(--tlr-sans);
  --tlr-t-etiqueta:    600 11.5px/1.3 var(--tlr-sans);
  --tlr-t-etiqueta-ls: .16em;
  --tlr-t-titulo-peso: 300;

  --tlr-radio: 2px;
  --tlr-transicion: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* 5 oct 2026: Mónica ve "beige" donde el cuerpo ya medía #FFFFFF. `html` salía
   transparente (el lienzo heredaba del cuerpo); se fija en blanco para que nada
   detrás del cuerpo (rebote al hacer scroll, fuera de la columna) pueda ser otro
   color. Las baldosas de foto (#F2F2F0) y las bandas siguen siendo decisión aparte. */
html { background-color: var(--tlr-bone); }

/* --- tipografía base ---------------------------------------------------- */

body,
body p,
body li,
body td,
body label,
body input,
body select,
body textarea,
body .woocommerce-Price-amount {
  font-family: var(--tlr-sans);
  color: var(--tlr-ink-soft);
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3,
.entry-title, .product_title,
.woocommerce-loop-product__title,
.qodef-e-title, .qodef-m-title {
  font-family: var(--tlr-serif);
  color: var(--tlr-ink);
  font-weight: 400;
  letter-spacing: -0.012em;
}

body h1, .product_title { line-height: 1.08; }
body h2 { line-height: 1.14; }

body h4, body h5, body h6 {
  font-family: var(--tlr-sans);
  color: var(--tlr-ink);
  font-weight: 500;
  letter-spacing: .04em;
}

/* --- botones ------------------------------------------------------------
   Lo primero que se ve y lo que peor está: el botón de pagar es rojo y
   rompe la marca.

   Desde el 13 de agosto va en el verde del pie, la salvia #CCD5C6, por decisión
   de Dani: Mónica dijo del eucalipto que "es que lo veo demasiado oscuro".
   Antes iba en eucalipto #8A9A82, y antes de eso en rojo.

   La letra va en TINTA, y no es opcional: sobre salvia el hueso mide 1,30:1 y
   la tinta 11,52:1. Medido, no elegido.

   El hover sigue yendo a tinta con la letra en hueso, que con el reposo ya en
   verde claro es más contraste todavía, no menos.

   Esta regla es la que manda en todo el sitio, porque lleva `!important` y
   más especificidad que las hojas del carrito y del pago. Cambiarla sólo
   allí no servía de nada: el botón seguía saliendo negro.                 */

body .button,
body button.button,
body input[type="submit"],
body .qodef-button.qodef-layout--filled,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .wc-block-components-button,
body #place_order {
  background-color: var(--tlr-eucalyptus) !important;
  border-color: var(--tlr-eucalyptus) !important;
  color: var(--tlr-ink) !important;
  font-family: var(--tlr-sans) !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: var(--tlr-radio);
  transition: background-color var(--tlr-transicion), opacity var(--tlr-transicion);
}

body .button:hover,
body button.button:hover,
body input[type="submit"]:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .wc-block-components-button:hover,
body #place_order:hover {
  background-color: var(--tlr-ink) !important;
  border-color: var(--tlr-ink) !important;
  color: var(--tlr-bone) !important;
}

/* botón secundario, el de la lista de deseos y similares */
body .button.alt--outline,
body .qodef-button.qodef-layout--outlined {
  background: transparent !important;
  color: var(--tlr-ink) !important;
  border: 1px solid var(--tlr-ink) !important;
}

/* --- precios y detalles -------------------------------------------------- */

body .woocommerce-Price-amount {
  font-family: var(--tlr-sans);
  color: var(--tlr-ink);
  font-weight: 500;
}

body del .woocommerce-Price-amount { color: #9a968c; font-weight: 400; }
body ins .woocommerce-Price-amount { color: var(--tlr-clay); text-decoration: none; }

/* --- enlaces ------------------------------------------------------------- */

body a { transition: color var(--tlr-transicion), opacity var(--tlr-transicion); }
body a:hover { color: var(--tlr-verde-texto); }

/* --- formularios --------------------------------------------------------- */

body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="search"],
body select,
body textarea,
body .wc-block-components-text-input input {
  border-radius: var(--tlr-radio);
  border-color: var(--tlr-linea);
  font-family: var(--tlr-sans);
  color: var(--tlr-ink);
}

body input:focus,
body select:focus,
body textarea:focus {
  border-color: var(--tlr-verde-texto);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 107, 85, .22);
}

/* --- marca de agua de la capa -------------------------------------------
   Solo en la copia de trabajo, para no confundir nunca copia con la real. */

body.syn-copia::before {
  content: "COPIA DE TRABAJO";
  position: fixed;
  z-index: 99999;
  bottom: 12px;
  left: 12px;
  padding: 6px 12px;
  background: var(--tlr-ink);
  color: var(--tlr-bone);
  font-family: var(--tlr-sans);
  font-size: 10px;
  letter-spacing: .16em;
  border-radius: 999px;
  opacity: .55;
  pointer-events: none;
}