/* ==========================================================================
   Aura Vital — tema propio sobre el modelo base SIDERAL.
   Sereno: colores de su logo (crema, verde oliva, dorado, rosa loto),
   tipografía Cormorant y formas redondeadas. Claro por defecto;
   el modo oscuro es "noche de spa" (oliva profundo y dorado).
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fuentes/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4eee3;
  --surface: #f4eee3;
  --text: #2b331c;
  --muted: #59604a;
  --line: rgba(43, 51, 28, .12);
  --edge: rgba(255, 255, 255, .75);

  --acento: #515f2b;
  --acento-2: #6b7a3a;
  --acento-ink: #ffffff;
  --acento-alt: #765717;

  --sh-dark: rgba(170, 156, 128, .45);
  --sh-light: rgba(255, 255, 255, .95);
  --glow: rgba(140, 106, 44, .22);
  --bg-glow-1: rgba(232, 185, 168, .30);
  --bg-glow-2: rgba(184, 146, 74, .16);
  --dot: rgba(81, 95, 43, .05);

  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --r-md: 24px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b2016;
  --surface: #1f251a;
  --text: #f1ecdf;
  --muted: #c4bea9;
  --line: rgba(241, 236, 223, .09);
  --edge: rgba(241, 236, 223, .05);

  --acento: #c3cf94;
  --acento-2: #dbe3b7;
  --acento-ink: #1b2016;
  --acento-alt: #dcb672;

  --sh-dark: rgba(0, 0, 0, .55);
  --sh-light: rgba(241, 236, 223, .035);
  --glow: rgba(220, 182, 114, .28);
  --bg-glow-1: rgba(232, 185, 168, .10);
  --bg-glow-2: rgba(220, 182, 114, .10);
  --dot: rgba(241, 236, 223, .03);
}

/* El logo trae su fondo crema: en un disco grande queda como medallón en ambos modos */
.logo-disc {
  width: clamp(220px, 70vw, 290px);
  background: #f7f2ea;
  padding: 0;
}
.logo-disc img { width: 100%; border-radius: 50%; }

.eyebrow { font-family: var(--font-sans); letter-spacing: .2em; color: var(--acento-alt); }
.eyebrow::before { background: var(--acento-alt); box-shadow: 0 0 10px var(--glow); }

.bajada { font-size: 1.12rem; }

.seccion__titulo {
  justify-content: center;
  font-size: 1.85rem;
  font-weight: 600;
  text-align: center;
}
.seccion__titulo::after { display: none; }
.seccion__titulo::before {
  content: "✦";
  font-size: .9rem;
  color: var(--acento-alt);
}

.servicio h3 { font-size: 1.35rem; font-weight: 600; }
.servicio__icono { color: var(--acento-alt); border-radius: 50%; }

/* Mapa: el iframe no recibe toques, todo el bloque abre Google Maps */
.mapa {
  display: block; padding: .6rem;
  color: var(--text); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mapa:hover { transform: translateY(-2px); }
.mapa:active { transform: scale(.99); box-shadow: var(--inset); }
.mapa:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.mapa__marco {
  display: block; overflow: hidden;
  border-radius: calc(var(--r-md) - .5rem);
  box-shadow: var(--inset);
  aspect-ratio: 4 / 3;
  background: var(--bg);
}
.mapa__marco iframe {
  display: block; width: 100%; height: 100%; border: 0;
  pointer-events: none;
}
[data-theme="dark"] .mapa__marco iframe { filter: brightness(.85) saturate(.85); }
.mapa__pie { display: flex; align-items: center; gap: .9rem; padding: .9rem .5rem .4rem; }
.mapa__pie strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.mapa__pie small { display: block; font-size: .88rem; color: var(--muted); }

/* Pasos para agendar */
.pasos { counter-reset: paso; display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.pasos li {
  counter-increment: paso;
  display: flex; align-items: center; gap: .9rem;
  font-size: .98rem;
}
.pasos li::before {
  content: counter(paso);
  display: grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--surface); box-shadow: var(--inset);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--acento);
}

/* ---------- Portada: foto a color y el logo montado sobre su borde inferior ---------- */
.portada {
  position: relative;
  margin: calc(-44px - 1rem - env(safe-area-inset-top, 0px)) -1rem 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  background: #e9dfd2;
}
.portada img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.portada::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(43, 51, 28, .35)); }
.portada + .logo-disc { position: relative; z-index: 1; width: clamp(190px, 56vw, 236px); margin-top: clamp(-104px, -24vw, -86px);
  box-shadow: 0 0 0 5px var(--bg), var(--raised), 0 30px 70px -30px var(--glow); }
@media (min-width: 592px) { .portada { margin-inline: 0; border-radius: 32px; } }

/* ---------- Dónde te atendemos ---------- */
.domicilio { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: 1rem 1.1rem; }
.domicilio p { margin: 0; font-size: .92rem; color: var(--muted); }
.domicilio strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text); }

/* ---------- Servicios y precios (una columna; cada precio abre el chat de Instagram) ---------- */
.nota { margin: .4rem 0 0; text-align: center; font-size: .92rem; color: var(--muted); }
.subtitulo { margin: 2.2rem 0 .2rem; text-align: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.subtitulo::before, .subtitulo::after { content: "✦"; margin: 0 .5rem; font-size: .75rem; color: var(--acento-alt); vertical-align: middle; }

.producto { margin-top: 1.1rem; padding: 0; overflow: hidden; }
.producto__cab { padding: 1.1rem 1.2rem .9rem; text-align: center; }
.producto__cab h3 { margin: 0; font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; line-height: 1.1; }
.producto__cab p { margin: .25rem 0 0; font-size: .88rem; color: var(--muted); }
.producto__intro { margin: .9rem 1.2rem 0; font-size: .88rem; color: var(--muted); text-align: center; line-height: 1.5; }
.producto__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.producto__fotos img, .producto__video { aspect-ratio: 4 / 5; }
.producto__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #2b2b2b; }
.producto__ampliar { position: relative; display: block; overflow: hidden; cursor: zoom-in; }
.producto__ampliar img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.producto__ampliar.guia img { max-height: none; }
.producto__ampliar:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }
.producto__lupa { position: absolute; right: .7rem; bottom: .7rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(43, 51, 28, .72); color: #f7f2ea; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }

.tarifa { margin: 0; padding: 1rem .8rem .9rem; list-style: none; }
.tarifa li + li { margin-top: .5rem; }
.tarifa__fila {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem; border-radius: 16px;
  color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--raised-sm);
  transition: transform .15s ease, border-color .15s ease;
}
.tarifa__fila:hover { transform: translateY(-1px); border-color: var(--acento-alt); }
.tarifa__fila:active { box-shadow: var(--inset); }
.tarifa__fila:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tarifa__fila--base { border-color: var(--acento-alt); }
.tarifa__detalle { flex: 1; min-width: 0; }
.tarifa__detalle strong { display: block; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; line-height: 1.15; }
.tarifa__detalle small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.tarifa__precio { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--acento); font-variant-numeric: lining-nums; }
.tarifa__flecha { flex: none; color: var(--acento-alt); }

.producto__pie { display: flex; align-items: center; gap: .7rem; margin: 0 1.2rem; font-size: .9rem; }
.producto__pie .ico { flex: none; color: var(--acento-alt); }
.producto__sub { margin: 1.3rem 0 .7rem; text-align: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.producto__sub::before, .producto__sub::after { content: "✦"; margin: 0 .5rem; font-size: .7rem; color: var(--acento-alt); vertical-align: middle; }
.trabajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; padding: 0 .8rem 1rem; }
.trabajos a { display: block; overflow: hidden; border-radius: 14px; cursor: zoom-in; }
.trabajos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* Aviso al copiar el mensaje de un precio */
.aviso-copiado {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  width: min(30rem, calc(100% - 2rem)); margin: 0; padding: .9rem 1.1rem; border-radius: 18px;
  background: var(--acento); color: var(--acento-ink); font-size: .92rem; font-weight: 600; text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

/* Pastilla «Atención en Quilicura» bajo el logo: lleva al mapa del final */
.chip--lugar { color: var(--text); text-decoration: none; }
.chip--lugar .ico { color: var(--acento-alt); }
.chip--lugar:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Qué incluyen los masajes y la reserva */
.incluye { display: grid; gap: .6rem; margin: 0; padding: 0 1.2rem; list-style: none; }
.incluye li { display: flex; align-items: center; gap: .75rem; font-size: .92rem; line-height: 1.4; }
.incluye .ico { flex: none; width: 2.2rem; height: 2.2rem; padding: .5rem; border-radius: 50%; background: var(--surface); box-shadow: var(--inset); color: var(--acento-alt); }
.incluye small { color: var(--muted); }
.producto__pie--reserva { margin: 1.1rem 1.2rem 1.2rem; padding: .8rem 1rem; border-radius: 16px; border: 1px dashed var(--acento-alt); }

/* Servicio adicional: ícono en la cabecera y en cada fila */
.producto__icono { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto .5rem; border-radius: 50%;
  background: var(--surface); box-shadow: var(--inset); color: var(--acento-alt); }
.producto__icono .ico { width: 1.5rem; height: 1.5rem; }
.tarifa__icono { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--surface); box-shadow: var(--inset); color: var(--acento-alt); }

/* ---------- Cómo reservar tu hora ---------- */
.pasos-reserva { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos-reserva li { counter-increment: paso; display: flex; align-items: center; gap: .9rem; }
.pasos-reserva p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.pasos-reserva strong { color: var(--text); }
.paso__icono { position: relative; display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--surface); box-shadow: var(--inset); color: var(--acento-alt); }
.paso__icono::after { content: counter(paso); position: absolute; top: -.25rem; right: -.25rem; display: grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--acento); color: var(--acento-ink); font-size: .72rem; font-weight: 700; }

.importante { margin-top: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); border: 1px dashed var(--acento-alt); }
.importante p { display: flex; gap: .75rem; margin: .8rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.importante p .ico { flex: none; margin-top: .15rem; color: var(--acento-alt); }
.importante strong { color: var(--text); }
.importante .importante__titulo { justify-content: center; align-items: center; margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--text); }

/* ---------- Datos de transferencia ---------- */
.transferencia { margin-top: 1rem; padding: 1.2rem 1rem; }
.transferencia__titulo { margin: 0; text-align: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.transferencia__bajada { margin: .2rem 0 .9rem; text-align: center; font-size: .86rem; color: var(--muted); }
.datos { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.datos li { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .6rem .7rem; border-radius: 16px; background: var(--surface); box-shadow: var(--inset); }
.dato__icono { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--acento-alt); }
.dato__texto { flex: 1; min-width: 0; }
.dato__texto small { display: block; font-size: .74rem; color: var(--muted); }
.dato__texto strong { display: block; font-size: .95rem; overflow-wrap: break-word; }
.dato__copiar, .transferencia__todos {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--raised-sm);
  color: var(--acento); font: inherit; font-weight: 600; cursor: pointer;
}
.dato__copiar { padding: .45rem .8rem; font-size: .82rem; }
.dato__copiar .ico, .transferencia__todos .ico { width: 1rem; height: 1rem; }
.dato__copiar:active, .transferencia__todos:active { box-shadow: var(--inset); }
.dato__copiar:focus-visible, .transferencia__todos:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.transferencia__todos { width: 100%; margin-top: .9rem; padding: .85rem 1rem; background: var(--acento); color: var(--acento-ink); border-color: transparent; font-size: .95rem; }
.copiado { border-color: var(--acento-alt); }
.transferencia__gracias { margin: .9rem 0 0; text-align: center; font-family: var(--font-display); font-size: 1.15rem; color: var(--muted); }

/* Botón «Escríbenos por Instagram» dentro de una tarjeta */
.carta__consulta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 999px;
  background: var(--acento); color: var(--acento-ink);
  font-weight: 600; font-size: .95rem; text-decoration: none;
}
.carta__consulta:active { transform: scale(.98); }
.carta__consulta:focus-visible { outline: 2px solid var(--acento-alt); outline-offset: 3px; }

/* Datos ocultos (RUT y N° de cuenta): se ven enmascarados y se copian completos */
.dato__oculto { display: flex; align-items: center; gap: .2rem; margin: .1rem 0 .1rem; color: var(--acento-alt); font-size: .7rem; font-weight: 600; }
.dato__oculto .ico { width: .8rem; height: .8rem; }
.dato__mascara { letter-spacing: .06em; }


/* ---------- Fondo: patrón sutil de flores de loto (contorno, color de la paleta, detrás de todo) ---------- */
:root, [data-theme="light"] { --loto: rgba(118, 87, 23, .16); --loto-trazo: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cg transform=%22translate%2840 44%29 rotate%280%29 scale%281.0%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 124%29 rotate%280%29 scale%281.0%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 44%29 rotate%280%29 scale%280.55%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3Cg transform=%22translate%2840 124%29 rotate%280%29 scale%280.55%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="dark"] { --loto: rgba(220, 182, 114, .2); --loto-trazo: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cg transform=%22translate%2840 44%29 rotate%280%29 scale%281.0%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 124%29 rotate%280%29 scale%281.0%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 44%29 rotate%280%29 scale%280.55%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3Cg transform=%22translate%2840 124%29 rotate%280%29 scale%280.55%29%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 6C-5-1-5-9 0-16 5-9 5-1 0 6Z%22/%3E%3Cpath d=%22M-1 6C-8 4-12-3-11-11-5-8-1-3-1 6Z%22/%3E%3Cpath d=%22M1 6C8 4 12-3 11-11 5-8 1-3 1 6Z%22/%3E%3Cpath d=%22M-2 6.5C-10 8-16 4-18-2-11-3-5 1-2 6.5Z%22/%3E%3Cpath d=%22M2 6.5C10 8 16 4 18-2 11-3 5 1 2 6.5Z%22/%3E%3Cpath d=%22M-14 9.5C-5 11.5 5 11.5 14 9.5%22/%3E%3C/g%3E%3C/svg%3E"); }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--loto);
  -webkit-mask: var(--loto-trazo) 0 0 / 160px 160px repeat;
  mask: var(--loto-trazo) 0 0 / 160px 160px repeat;
}