/* ==========================================================================
   The Lab Room · aviso del 15 %
   Tarjeta discreta abajo a la derecha. No lleva velo por detrás a propósito:
   la portada se sigue viendo y se sigue pudiendo usar mientras está abierta.
   Las variables son las de `piezas.css`, que es la que gastan las plantillas
   nuevas. El respaldo en `--tlr-*` es para el día que esto salga en una
   página que aún lleve la capa de encima del tema.
   ========================================================================== */

.tlr-promo {
  --p-bone:  var(--bone,      var(--tlr-bone,      #F3EDE3));
  --p-ink:   var(--ink,       var(--tlr-ink,       #1B1A17));
  --p-soft:  var(--ink-soft,  var(--tlr-ink-soft,  #3A382F));
  --p-euca:  var(--eucalyptus,var(--tlr-eucalyptus,#8A9A82));
  --p-linea: var(--line, rgba(27, 26, 23, .14));
  --p-serif: var(--serif, var(--tlr-serif, 'Zodiak', Georgia, serif));
  --p-sans:  var(--sans,  var(--tlr-sans,  'Archivo', system-ui, sans-serif));

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  width: min(392px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--p-bone);
  border: 1px solid var(--p-linea);
  border-radius: 3px;
  box-shadow: 0 22px 54px -14px rgba(27, 26, 23, .32);
  font-family: var(--p-sans);
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1),
              transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.tlr-promo *, .tlr-promo *::before, .tlr-promo *::after { box-sizing: border-box; }
.tlr-promo[hidden] { display: none; }
.tlr-promo.is-visible { opacity: 1; transform: none; }

/* --- la foto ------------------------------------------------------------- */

.tlr-promo__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 389;
  object-fit: cover;
}

/* --- cerrar --------------------------------------------------------------
   Encima de la foto, en hueso translúcido para que se lea sobre la piel.    */

.tlr-promo__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(243, 237, 227, .92);
  color: var(--p-ink);
  transition: background-color .3s, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.tlr-promo__cerrar:hover { background: #fff; transform: rotate(90deg); }

.tlr-promo__cerrar:focus-visible {
  outline: 2px solid var(--p-ink);
  outline-offset: 2px;
}

/* --- texto ---------------------------------------------------------------- */

.tlr-promo__cuerpo { padding: 24px 26px 26px; }

.tlr-promo__antetitulo {
  margin: 0 0 10px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-soft);
  opacity: .8;
}

.tlr-promo__titulo {
  margin: 0 0 10px;
  font-family: var(--p-serif);
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--p-ink);
}

.tlr-promo__sub {
  margin: 0 0 20px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--p-soft);
}

/* --- el formulario de Mailchimp -------------------------------------------
   Las clases son las que ya trae el formulario 34126 en producción, para que
   lo que se ve en la copia sea exactamente lo que se verá allí. La forma es
   la del boletín del pie de la portada: campo y botón en píldora.          */

.tlr-promo .mc4wp-form,
.tlr-promo .mc4wp-form-fields { margin: 0; }

/* La etiqueta del campo no se pinta, pero no se puede quitar con `display:
   none`: es la única que tiene el campo, y sin ella un lector de pantalla solo
   encuentra el texto de muestra. Se esconde a la vista y se deja al oído, con
   el mismo apaño que ya usa `piezas.css` en `.sr-only`. */
.tlr-promo .promo15-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tlr-promo .promo15-fields {
  display: grid;
  gap: 10px;
  margin: 0;
}

.tlr-promo input[type="email"] {
  width: 100%;
  padding: .95rem 1.4rem;
  background: transparent;
  border: 1px solid var(--p-linea);
  border-radius: 999px;
  font-family: var(--p-sans);
  font-size: .92rem;
  color: var(--p-ink);
}

.tlr-promo input[type="email"]::placeholder { color: var(--p-soft); opacity: .7; }

.tlr-promo input[type="email"]:focus {
  outline: none;
  border-color: var(--p-ink);
}

.tlr-promo button[type="submit"] {
  width: 100%;
  padding: 1rem 1.9rem;
  border: 1px solid var(--p-ink);
  border-radius: 999px;
  cursor: pointer;
  background: var(--p-ink);
  color: var(--p-bone);
  font-family: var(--p-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .35s, color .35s, border-color .35s;
}

.tlr-promo button[type="submit"]:hover {
  background: var(--p-euca);
  border-color: var(--p-euca);
  color: var(--p-bone);
}

.tlr-promo button[type="submit"]:focus-visible {
  outline: 2px solid var(--p-ink);
  outline-offset: 2px;
}

.tlr-promo .promo15-consent {
  margin: 14px 0 0;
  font-size: .7rem;
  line-height: 1.45;
  color: var(--p-soft);
}

.tlr-promo .promo15-consent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.tlr-promo .promo15-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 2px 0 0;
  accent-color: var(--p-ink);
}

/* El aviso de Mailchimp después de enviar. */
.tlr-promo .mc4wp-response {
  margin-top: 14px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--p-ink);
}

.tlr-promo .mc4wp-response p { margin: 0; }
.tlr-promo .mc4wp-alert.mc4wp-error { color: #a1442c; }

/* Trampa antirrobots de Mailchimp: va oculta y no debe abrir hueco. */
.tlr-promo .mc4wp-form > label[style] { display: none !important; }

/* --- móvil ----------------------------------------------------------------
   Pegada abajo y a lo ancho, con la foto más baja para no comerse la pantalla. */

@media (max-width: 560px) {
  .tlr-promo {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100dvh - 24px);
  }
  /* La foto se queda con su recorte entero: rebajarla aquí cortaba la palabra
     "Balm" de la lata justo por la mitad. */
  .tlr-promo__cuerpo { padding: 20px 20px 22px; }
  .tlr-promo__titulo { font-size: 1.75rem; }
}

/* Pantallas bajas: la foto estorba más de lo que suma. Sin ella, la equis
   cae sobre el texto, así que el cuerpo abre hueco arriba. */
@media (max-height: 620px) {
  .tlr-promo__foto { display: none; }
  .tlr-promo__cuerpo { padding-top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .tlr-promo { transition: opacity 200ms linear; transform: none; }
  .tlr-promo__cerrar:hover { transform: none; }
}