/*
Theme Name: LabMystic 2026
Theme URI: https://labmystic.cl
Author: DimensionTech
Description: Tema a medida de LabMystic — "Círculos en el agua". Reemplaza a Astra + Elementor manteniendo intactos los plugins funcionales (agenda SSA, WPForms, WP Mail SMTP, AIOSEO).
Version: 2.6.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: labmystic
*/
/* ══════════════════════════════════════════════════════════════════════════
   LabMystic — Círculos en el agua
   El sitio repite una idea: "lo que transformamos en nuestro interior se
   refleja en nuestro exterior". Eso es una onda expandiéndose desde un centro.
   Todo el sistema sale de ahí: círculos que respiran, formas de pétalo,
   curvas en vez de esquinas, y luz cálida en vez de pantalla oscura.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Color — luz cálida, agua y lavanda ───────────────────────────────────── */
  --marfil:      #FBF8F3;   /* fondo base, papel cálido */
  --arena:       #F4EFE7;   /* fondo alterno */
  --nata:        #FFFFFF;   /* superficie de tarjeta */
  --agua-clara:  #E3F1EE;   /* velo verde agua */
  --lavanda:     #EDE7F8;   /* velo violeta */

  --agua:        #17807A;   /* verde agua profundo: texto de acento */
  --agua-viva:   #48B3A6;   /* calypso */
  --violeta:     #6B5AA6;   /* violeta sereno */
  --violeta-luz: #9C8AD4;

  --tinta:       #2E2A31;   /* texto principal, casi negro cálido */
  --tinta-suave: #6B6472;   /* texto secundario */
  --tinta-tenue: #9A93A1;

  --aura: linear-gradient(135deg, var(--agua-viva) 0%, var(--violeta-luz) 100%);

  /* Tipografía — curvas, nada cuadrado ───────────────────────────────────── */
  --titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texto:  'Figtree', system-ui, -apple-system, sans-serif;

  /* Forma — el pétalo, no el rectángulo ──────────────────────────────────── */
  --curva:       28px;
  --curva-suave: 18px;
  --petalo:      64px 24px 64px 24px;   /* radio asimétrico, forma de hoja */

  --sombra-baja: 0 2px 14px rgba(46,42,49,.05);
  --sombra:      0 14px 40px -18px rgba(46,42,49,.16);
  --sombra-alta: 0 28px 70px -30px rgba(46,42,49,.22);

  --ancho: 1160px;
  --angosto: 720px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17.5px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--titulo);
  font-weight:400;                       /* Fraunces luce mejor con peso bajo */
  font-variation-settings:'SOFT' 60, 'WONK' 1, 'opsz' 40;
  line-height:1.14; letter-spacing:-.015em;
  color:var(--tinta); margin:0 0 .55em; text-wrap:balance;
}
h1{ font-size:clamp(2.3rem, 4.6vw, 3.7rem); line-height:1.08; }
h2{ font-size:clamp(1.75rem, 3.1vw, 2.6rem); }
h3{ font-size:clamp(1.2rem, 1.8vw, 1.5rem); font-weight:500; }
h4{ font-size:1.08rem; font-weight:500; }
em, .enfasis{ font-style:italic; color:var(--agua); }

p{ margin:0 0 1.2em; color:var(--tinta-suave); text-wrap:pretty; }
p strong{ color:var(--tinta); font-weight:600; }
a{ color:var(--agua); text-decoration:none; }

/* Etiqueta de sección: minúscula, espaciada, con un punto de agua */
.etiqueta{
  font-family:var(--texto); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--agua);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
}
.etiqueta::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--aura); flex:none;
}

.cita{
  font-family:var(--titulo); font-style:italic; font-weight:400;
  font-variation-settings:'SOFT' 80, 'WONK' 1;
  font-size:clamp(1.3rem, 2.3vw, 1.75rem); line-height:1.5;
  color:var(--violeta); margin:0;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.envoltura{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto;
  position:relative; z-index:1; }
.angosto{ max-width:var(--angosto); }
section{ padding-block:clamp(3.5rem, 6vw, 6rem); position:relative; }

/* Franjas de color que separan sin líneas duras */
.franja-agua{ background:var(--agua-clara); }
.franja-arena{ background:var(--arena); }
.franja-lavanda{ background:var(--lavanda); }

/* Auras de fondo: manchas suaves de color, dan profundidad sin oscurecer */
.aura-fondo{ position:absolute; border-radius:50%; filter:blur(80px);
  opacity:.5; pointer-events:none; z-index:0; }
.aura-fondo.verde{ background:#9FDDD3; width:520px; height:520px; }
.aura-fondo.lila{ background:#C7B6EE; width:460px; height:460px; }

/* ── Navegación ─────────────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--marfil) 90%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid rgba(46,42,49,.07);
}
.barra-interna{ display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:.9rem; }
.marca{ display:flex; align-items:center; gap:.6rem; font-family:var(--titulo);
  font-weight:500; font-size:1.3rem; color:var(--tinta); letter-spacing:-.02em; }
.marca .gota{ width:27px; height:27px; flex:none; transform:rotate(-8deg);
  border-radius:58% 42% 55% 45% / 52% 48% 52% 48%;
  background:var(--aura);
  box-shadow:0 3px 10px -3px rgba(107,90,166,.45), inset -2px -3px 6px rgba(255,255,255,.4); }
.menu{ display:flex; gap:1.35rem; list-style:none; margin:0; padding:0;
  flex-wrap:nowrap; align-items:center; }
.menu a{ font-size:.9rem; color:var(--tinta-suave); font-weight:500;
  padding-block:.3rem; position:relative; transition:color .2s; white-space:nowrap; }
.menu a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--aura); border-radius:2px; transition:width .3s ease;
}
.menu a:hover{ color:var(--tinta); }
.menu a:hover::after, .menu a[aria-current]::after{ width:100%; }
.menu a[aria-current]{ color:var(--tinta); }
.abrir-menu{ display:none; background:none; border:1px solid rgba(46,42,49,.14);
  border-radius:12px; color:var(--tinta); padding:.45rem .7rem; cursor:pointer; font-size:1.05rem; }

/* ── Botones: cápsula suave ─────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--texto); font-size:.95rem; font-weight:600;
  padding:.85rem 1.7rem; border-radius:999px; cursor:pointer;
  background:var(--agua); color:#fff; border:1.5px solid var(--agua);
  box-shadow:0 8px 22px -12px var(--agua);
  transition:transform .22s ease, box-shadow .22s ease, background .2s;
}
.boton:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--agua); }
.boton.suave{ background:transparent; color:var(--agua); box-shadow:none; }
.boton.suave:hover{ background:var(--agua-clara); }
.boton.violeta{ background:var(--violeta); border-color:var(--violeta);
  box-shadow:0 8px 22px -12px var(--violeta); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem); position:relative; }
.hero-grilla{ display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1 .agua-txt{
  background:var(--aura); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-style:italic;
}
.hero-bajada{ font-size:1.13rem; max-width:44ch; margin-bottom:2rem; }
.hero-acciones{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }

/* Retrato circular con las ondas alrededor: el elemento firma */
.ondas-envase{ position:relative; width:min(100%, 470px); aspect-ratio:1;
  margin-inline:auto; }
.ondas{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ondas circle{ fill:none; stroke-width:1.2; }
.retrato{
  position:absolute; inset:16%; border-radius:50%; overflow:hidden;
  box-shadow:var(--sombra-alta);
}
.retrato img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.tarjeta{
  background:var(--nata); border-radius:var(--curva);
  padding:2rem 1.9rem; box-shadow:var(--sombra-baja);
  border:1px solid rgba(46,42,49,.05);
  transition:transform .28s ease, box-shadow .28s ease;
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.tarjeta p:last-child{ margin-bottom:0; }
.tarjeta.destacada{
  background:linear-gradient(158deg, #4FBCAF 0%, #35A79B 100%);
  color:#fff; border-color:transparent;
  box-shadow:0 18px 44px -22px rgba(53,167,155,.7);
}
.tarjeta.destacada h3, .tarjeta.destacada h4{ color:#fff; }
.tarjeta.destacada p{ color:rgba(255,255,255,.94); }
.tarjeta.destacada .precio{ color:#fff; }
.tarjeta.destacada .lista-gotas li{ color:rgba(255,255,255,.94); }
.tarjeta.destacada .lista-gotas li::before{ background:rgba(255,255,255,.75); }

/* Tarjeta con imagen: la foto en forma de pétalo */
.tarjeta-img{ width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--petalo); margin-bottom:1.4rem; display:block; }

.rejilla{ display:grid; gap:1.5rem; }
.rejilla.dos{ grid-template-columns:repeat(2,1fr); }
.rejilla.tres{ grid-template-columns:repeat(3,1fr); }
.rejilla.cuatro{ grid-template-columns:repeat(4,1fr); }

.precio{ font-family:var(--titulo); font-size:1.9rem; font-weight:500;
  color:var(--agua); letter-spacing:-.02em; line-height:1.2; }
.precio .unidad{ font-family:var(--texto); font-size:.8rem; font-weight:600;
  color:var(--tinta-tenue); letter-spacing:.08em; }
.dato{ font-family:var(--texto); font-size:.8rem; font-weight:600;
  color:var(--tinta-tenue); letter-spacing:.12em; text-transform:uppercase; }

/* Listas con gota en vez de viñeta */
.lista-gotas{ list-style:none; padding:0; margin:0 0 1.2em; }
.lista-gotas li{ position:relative; padding-left:1.6rem; margin-bottom:.62rem;
  color:var(--tinta-suave); }
.lista-gotas li::before{
  content:''; position:absolute; left:0; top:.72em; width:8px; height:8px;
  border-radius:50% 50% 50% 12%; background:var(--agua-viva); transform:rotate(-12deg);
}
.lista-gotas.lila li::before{ background:var(--violeta-luz); }

/* ── Dimensiones: círculos que se tocan ────────────────────────────────── */
.dimensiones{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
  margin-top:2.5rem; }
.dimension{ text-align:center; }
.dimension .circulo{
  width:88px; height:88px; margin:0 auto 1rem; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff 0%, var(--agua-clara) 100%);
  box-shadow:var(--sombra-baja), inset 0 0 0 1px rgba(23,128,122,.14);
  display:grid; place-items:center; font-family:var(--titulo);
  font-size:2rem; color:var(--agua); line-height:1;
  transition:transform .3s ease, box-shadow .3s ease;
}
.dimension:hover .circulo{ transform:scale(1.07); box-shadow:var(--sombra); }
.dimension h4{ margin-bottom:.2rem; }
.dimension p{ font-size:.9rem; margin:0; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{ background:var(--arena); padding-block:3.5rem 2rem; margin-top:clamp(2.5rem,5vw,4rem); }
.pie-grilla{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2.5rem; }
.pie a{ color:var(--tinta-suave); display:block; margin-bottom:.55rem; font-size:.94rem; }
.pie a:hover{ color:var(--agua); }
.pie h4{ font-family:var(--texto); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-tenue); font-weight:600; margin-bottom:1rem; }
.pie-legal{ margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(46,42,49,.09);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.84rem; color:var(--tinta-tenue); }

a:focus-visible, button:focus-visible{ outline:2.5px solid var(--violeta); outline-offset:3px; border-radius:4px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .hero-grilla{ grid-template-columns:1fr; }
  .ondas-envase{ max-width:360px; }
  .rejilla.tres, .rejilla.cuatro{ grid-template-columns:repeat(2,1fr); }
  .dimensiones{ grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .pie-grilla{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .barra-interna > .boton{ display:none; }
  .menu{ display:none; }
  .abrir-menu{ display:block; }
}
@media (max-width:640px){
  body{ font-size:16.5px; }
  .barra-interna > .boton{ display:none; }
  .menu{ display:none; }
  .menu.abierto{ display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--marfil); padding:1.2rem 1.5rem;
    border-bottom:1px solid rgba(46,42,49,.08); gap:.85rem;
    box-shadow:var(--sombra); }
  .abrir-menu{ display:block; }
  .rejilla.dos, .rejilla.tres, .rejilla.cuatro{ grid-template-columns:1fr; }
  .dimensiones{ grid-template-columns:repeat(2,1fr); }
  .pie-grilla{ grid-template-columns:1fr; }
  .ondas-envase{ max-width:290px; }
  :root{ --petalo:44px 18px 44px 18px; }
}
.solo-movil{ display:none; }
@media (max-width:640px){ .solo-movil{ display:block; } .solo-movil a{ color:var(--agua) !important; font-weight:700; } }

/* Retratos del equipo: circulares, con un halo de agua */
.retrato-equipo{
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  object-position:center top; display:block; margin:0 auto 1.2rem;
  box-shadow:0 0 0 5px var(--nata), 0 0 0 6.5px var(--agua-clara), var(--sombra-baja);
}
@media (max-width:640px){ .retrato-equipo{ width:118px; height:118px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Integración con los plugins funcionales.
   Solo tipografía y color: nada que altere la estructura ni el comportamiento
   de los widgets, para no romper reservas ni envíos.
   ══════════════════════════════════════════════════════════════════════════ */

.lm-agenda, .lm-formulario{ margin-top:1.5rem; }

/* Simply Schedule Appointments */
.lm-agenda .ssa, .lm-agenda [class^="ssa-"], .lm-agenda [class*=" ssa-"]{
  font-family:var(--texto) !important;
}
.lm-agenda h1, .lm-agenda h2, .lm-agenda h3, .lm-agenda h4{ font-family:var(--titulo); }
.lm-agenda .ssa-primary-button,
.lm-agenda button[class*="primary"]{
  background:var(--agua) !important; border-color:var(--agua) !important;
  border-radius:999px !important; font-family:var(--texto) !important; font-weight:600 !important;
}
.lm-agenda a{ color:var(--agua); }

/* WPForms */
.lm-formulario .wpforms-form input[type=text],
.lm-formulario .wpforms-form input[type=email],
.lm-formulario .wpforms-form input[type=tel],
.lm-formulario .wpforms-form select,
.lm-formulario .wpforms-form textarea{
  font-family:var(--texto); font-size:1rem; color:var(--tinta);
  background:var(--marfil); border:1.5px solid rgba(46,42,49,.12);
  border-radius:var(--curva-suave); padding:.75rem .95rem; width:100%;
}
.lm-formulario .wpforms-form input:focus,
.lm-formulario .wpforms-form textarea:focus,
.lm-formulario .wpforms-form select:focus{
  outline:none; border-color:var(--agua-viva);
  box-shadow:0 0 0 3px rgba(72,179,166,.18);
}
.lm-formulario .wpforms-form label.wpforms-field-label{
  font-family:var(--texto); font-weight:600; color:var(--tinta); font-size:.95rem;
}
.lm-formulario .wpforms-form button[type=submit]{
  font-family:var(--texto); font-size:.95rem; font-weight:600;
  background:var(--agua); color:#fff; border:1.5px solid var(--agua);
  border-radius:999px; padding:.85rem 1.7rem; cursor:pointer;
  box-shadow:0 8px 22px -12px var(--agua); transition:transform .2s ease;
}
.lm-formulario .wpforms-form button[type=submit]:hover{ transform:translateY(-2px); }
.lm-formulario .wpforms-error{ color:#B3261E; font-size:.88rem; }

/* Contenido editado desde WordPress en páginas sin plantilla propia */
.lm-contenido h2{ margin-top:2rem; }
.lm-contenido img{ max-width:100%; height:auto; border-radius:var(--curva-suave); }
.lm-contenido ul{ padding-left:1.1rem; }
.lm-contenido li{ margin-bottom:.5rem; color:var(--tinta-suave); }

/* Testimonios: son textos largos de personas reales, no frases sueltas.
   Foto y nombre a un lado, relato al otro, para que se pueda leer de verdad. */
.testimonio{ display:grid; grid-template-columns:220px 1fr; gap:2.2rem;
  align-items:start; margin-bottom:1.6rem; }
.testimonio-quien{ text-align:center; }
.testimonio-quien h3{ margin-bottom:.15rem; font-size:1.15rem; }
.testimonio-texto p{ font-family:var(--titulo); font-style:italic; font-weight:300;
  font-size:1.06rem; line-height:1.72; color:var(--tinta-suave); margin:0; }
.testimonio-texto p::first-letter{ font-size:2.4em; float:left; line-height:.9;
  padding:.06em .12em 0 0; color:var(--agua); font-style:normal; }
@media (max-width:760px){
  .testimonio{ grid-template-columns:1fr; gap:1.4rem; }
  .testimonio-texto p::first-letter{ font-size:2em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Capa mística — v1.1
   Las ilustraciones del sitio están llenas de oro, constelaciones y geometría
   sagrada. La primera versión no recogía nada de eso: era limpia pero fría.
   Acá se suma un tercer acento dorado, textura de estrellas, geometría sagrada
   de fondo y transiciones en onda entre secciones.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --oro:        #C9A227;   /* el dorado que aparece en todas sus ilustraciones */
  --oro-suave:  #E8D9A8;
  --aura-oro:   linear-gradient(135deg, var(--oro) 0%, var(--violeta-luz) 100%);
}

/* ── Cielo estrellado, muy tenue, sobre el marfil ──────────────────────── */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(201,162,39,.85) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 68% 8%,  rgba(107,90,166,.8) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 84% 32%, rgba(72,179,166,.75) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 32% 62%, rgba(201,162,39,.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 71%, rgba(107,90,166,.7) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 24% 88%, rgba(72,179,166,.7) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 56% 44%, rgba(201,162,39,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 8% 52%,  rgba(107,90,166,.7) 50%, transparent 51%);
  background-size:440px 440px;
  opacity:1;
}
@media (prefers-reduced-motion:no-preference){
  body::before{ animation:lm-respirar 14s ease-in-out infinite; }
}
@keyframes lm-respirar{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }

/* ── Auras: más color, borde difuso, latido lento ─────────────────────── */
.aura-fondo{ filter:blur(90px); opacity:.55; }
.aura-fondo.verde{ background:radial-gradient(circle, #7ED4C6 0%, rgba(126,212,198,0) 70%); }
.aura-fondo.lila{  background:radial-gradient(circle, #B9A4EC 0%, rgba(185,164,236,0) 70%); }
.aura-fondo.oro{   background:radial-gradient(circle, #E3C877 0%, rgba(227,200,119,0) 70%);
  width:420px; height:420px; }
@media (prefers-reduced-motion:no-preference){
  .aura-fondo{ animation:lm-latir 18s ease-in-out infinite; }
  .aura-fondo.lila{ animation-delay:-6s; }
  .aura-fondo.oro{ animation-delay:-12s; }
}
@keyframes lm-latir{
  0%,100%{ transform:scale(1) translate(0,0); opacity:.45 }
  50%    { transform:scale(1.15) translate(2%,-2%); opacity:.65 }
}

/* ── Geometría sagrada como marca de agua ─────────────────────────────── */
.flor{ position:absolute; pointer-events:none; z-index:0; opacity:.16; }
.flor svg{ display:block; width:100%; height:auto; }
.flor circle{ fill:none; stroke:var(--agua); stroke-width:1; }
@media (prefers-reduced-motion:no-preference){
  .flor{ animation:lm-girar 90s linear infinite; }
}
@keyframes lm-girar{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* ── Transición en onda entre franjas ─────────────────────────────────── */
.onda-sep{ display:block; width:100%; height:clamp(56px,7vw,112px); margin-bottom:-1px; }
.onda-sep path{ fill:currentColor; }
.hacia-agua{ color:var(--agua-clara); }
.hacia-arena{ color:var(--arena); }
.hacia-lavanda{ color:var(--lavanda); }
.hacia-marfil{ color:var(--marfil); }

/* ── Tarjetas: borde con luz y elevación con brillo ───────────────────── */
.tarjeta{ position:relative; }
.tarjeta::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(72,179,166,.5), rgba(201,162,39,.35) 45%, rgba(155,138,212,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; opacity:0; transition:opacity .35s ease;
}
.tarjeta:hover::after{ opacity:1; }
.tarjeta:hover{ box-shadow:0 20px 50px -24px rgba(107,90,166,.45); }

/* Igualar alturas cuando hay columnas de distinto largo */
.rejilla > .tarjeta{ height:100%; }
.rejilla{ align-items:stretch; }

/* ── Detalles dorados ─────────────────────────────────────────────────── */
.etiqueta::before{ background:var(--aura-oro); box-shadow:0 0 10px rgba(201,162,39,.55); }
.cita{ position:relative; }
.cita::before{
  content:'❦'; display:block; font-size:1.5rem; color:var(--oro);
  margin-bottom:.6rem; opacity:.8;
}
.precio{ text-shadow:0 0 22px rgba(72,179,166,.25); }
.dimension .circulo{
  box-shadow:var(--sombra-baja), inset 0 0 0 1px rgba(201,162,39,.28),
             0 0 0 0 rgba(201,162,39,0);
}
.dimension:hover .circulo{
  box-shadow:var(--sombra), inset 0 0 0 1px rgba(201,162,39,.5),
             0 0 26px -4px rgba(201,162,39,.45);
}

/* ── Retratos con halo de luz ─────────────────────────────────────────── */
.retrato{ box-shadow:var(--sombra-alta), 0 0 60px -18px rgba(201,162,39,.5); }
.retrato-equipo{
  box-shadow:0 0 0 5px var(--nata), 0 0 0 6.5px var(--agua-clara),
             0 10px 30px -14px rgba(107,90,166,.4);
  transition:box-shadow .3s ease, transform .3s ease;
}
.tarjeta:hover .retrato-equipo{
  transform:translateY(-2px);
  box-shadow:0 0 0 5px var(--nata), 0 0 0 6.5px var(--oro-suave),
             0 14px 36px -14px rgba(201,162,39,.5);
}

/* ── Imágenes con marco de luz ────────────────────────────────────────── */
.tarjeta-img{ box-shadow:0 18px 46px -24px rgba(107,90,166,.5); }

/* ── Enlaces del menú y botones con un punto de oro ───────────────────── */
.boton{ position:relative; overflow:hidden; }
.boton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.boton:hover::after{ transform:translateX(120%); }

/* Encabezado de página interior: la flor ocupa el aire que antes quedaba muerto */
.encabezado-pagina{ position:relative; overflow:hidden;
  padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem); }
.encabezado-pagina .flor{ opacity:.13; }
@media (max-width:860px){ .encabezado-pagina .flor{ display:none; } }

/* Partículas doradas orbitando el retrato del hero */
.ondas .chispa{ fill:var(--oro); }
.ondas .chispa.agua{ fill:var(--agua-viva); }
.ondas .chispa.lila{ fill:var(--violeta-luz); }
@media (prefers-reduced-motion:reduce){ .ondas .orbita{ display:none; } }

/* Halo pulsante detrás del retrato */
.ondas-envase::before{
  content:''; position:absolute; inset:8%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(201,162,39,.3) 0%, rgba(155,138,212,.16) 45%, transparent 70%);
  filter:blur(26px);
}
@media (prefers-reduced-motion:no-preference){
  .ondas-envase::before{ animation:lm-halo 7s ease-in-out infinite; }
}
@keyframes lm-halo{ 0%,100%{ transform:scale(1); opacity:.75 } 50%{ transform:scale(1.09); opacity:1 } }

/* Feed de Instagram: hereda el redondeo del sistema sin tocar su estructura */
.lm-instagram #sb_instagram .sbi_photo{ border-radius:var(--curva-suave); overflow:hidden; }
.lm-instagram #sb_instagram #sbi_load .sbi_load_btn,
.lm-instagram #sb_instagram .sbi_follow_btn a{
  border-radius:999px !important; font-family:var(--texto) !important; font-weight:600 !important;
}

/* ── Símbolo Om ────────────────────────────────────────────────────────── */
.om{
  font-family:'Noto Sans Devanagari', serif; font-weight:400;
  line-height:1; display:inline-block; color:var(--oro);
}
/* Om como marca de agua de fondo */
.om.marca{
  position:absolute; z-index:0; pointer-events:none;
  font-size:clamp(9rem, 20vw, 17rem); opacity:.07; color:var(--violeta);
}
@media (prefers-reduced-motion:no-preference){
  .om.marca{ animation:lm-respirar-om 11s ease-in-out infinite; }
}
@keyframes lm-respirar-om{ 0%,100%{ opacity:.055 } 50%{ opacity:.11 } }

/* Om como remate de sección */
.om.remate{
  font-size:2.1rem; opacity:.75; display:block; margin:0 auto .8rem;
  text-align:center; text-shadow:0 0 26px rgba(201,162,39,.5);
}

/* La semilla se dibuja un punto más marcada que la flor completa */
.flor.semilla circle{ stroke:var(--oro); }
.flor.semilla{ opacity:.2; }

/* La cita se remata con Om en vez del ornamento anterior */
.cita::before{ content:'\0950'; font-family:'Noto Sans Devanagari', serif;
  font-size:1.9rem; color:var(--oro); opacity:.85; font-style:normal; }

/* ══════════════════════════════════════════════════════════════════════════
   v2.0 — Anochecer
   El marfil de la v1 era mediodía. Esto lo lleva a la hora azul: el cielo
   después del atardecer, cuando todavía hay luz pero ya se ven las primeras
   estrellas. Sigue siendo claro y legible, pero más calmo y más profundo.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --marfil:      #F2EFF8;   /* base crepuscular, lavanda pálido */
  --arena:       #E9E4F1;
  --nata:        #FDFCFF;   /* tarjetas: casi blanco, para que el texto respire */
  --agua-clara:  #DEEDEC;
  --lavanda:     #E5DDF4;
  --tinta:       #2A2733;
  --tinta-suave: #635C70;
  --tinta-tenue: #928BA0;
  --nebulosa-1:  rgba(139,120,200,.26);
  --nebulosa-2:  rgba(72,179,166,.18);
  --nebulosa-3:  rgba(201,162,39,.14);
  --nebulosa-4:  rgba(107,90,166,.22);
}

/* Galaxia: nebulosas fijas que no se mueven al hacer scroll, para que el sitio
   se sienta apoyado sobre un cielo y no sobre un papel. */
body{
  background-color:var(--marfil);
  background-image:
    radial-gradient(ellipse 62% 42% at 14% 6%,  var(--nebulosa-1), transparent 62%),
    radial-gradient(ellipse 52% 36% at 88% 22%, var(--nebulosa-2), transparent 62%),
    radial-gradient(ellipse 58% 40% at 72% 74%, var(--nebulosa-3), transparent 62%),
    radial-gradient(ellipse 48% 32% at 22% 90%, var(--nebulosa-4), transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* Las franjas dejan pasar algo del cielo de fondo */
.franja-agua{ background:color-mix(in srgb, var(--agua-clara) 88%, transparent); }
.franja-arena{ background:color-mix(in srgb, var(--arena) 88%, transparent); }
.franja-lavanda{ background:color-mix(in srgb, var(--lavanda) 88%, transparent); }

/* Tarjetas con un velo, para que se apoyen sobre el cielo sin taparlo del todo */
.tarjeta{ background:color-mix(in srgb, var(--nata) 92%, transparent);
  backdrop-filter:blur(6px); }

/* ── Figuras sagradas girando ─────────────────────────────────────────────
   Es el elemento que Manu pidió replicar: la figura que gira de fondo. Cada
   sección tiene la suya, con distinto símbolo, tamaño y sentido de giro. */
.figura{
  position:absolute; z-index:0; pointer-events:none;
  width:340px; aspect-ratio:1; opacity:.2;
}
.figura svg{ display:block; width:100%; height:100%; }
.figura svg circle, .figura svg path, .figura svg polygon,
.figura svg ellipse, .figura svg rect, .figura svg line{
  fill:none; stroke:currentColor; stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.figura.tono-agua{ color:var(--agua); }
.figura.tono-oro{ color:var(--oro); }
.figura.tono-violeta{ color:var(--violeta); }

/* El Om también gira, como una figura más */
.om-figura{
  position:absolute; z-index:0; pointer-events:none;
  font-family:'Noto Sans Devanagari', serif; line-height:1;
  font-size:clamp(7rem, 15vw, 13rem); opacity:.17;
  display:inline-block;
}
.om-figura.tono-agua{ color:var(--agua); }
.om-figura.tono-oro{ color:var(--oro); }
.om-figura.tono-violeta{ color:var(--violeta); }

@media (prefers-reduced-motion:no-preference){
  .figura{ animation:lm-girar 120s linear infinite; }
  .figura.reves{ animation-direction:reverse; animation-duration:150s; }
  .figura.lenta{ animation-duration:200s; }
  .om-figura{ animation:lm-girar 160s linear infinite; }
  .om-figura.reves{ animation-direction:reverse; }
}
@keyframes lm-girar{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* En pantallas chicas se dejan solo las más grandes, para no ensuciar */
@media (max-width:860px){
  .figura{ width:230px; opacity:.14; }
  .om-figura{ font-size:6.5rem; opacity:.13; }
  .figura.oculta-movil, .om-figura.oculta-movil{ display:none; }
}

/* Las secciones necesitan recortar lo que sobresale */
section{ overflow:hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — Anochecer de verdad, marca propia y figuras visibles en el teléfono
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* El crepúsculo baja un escalón más: ya no es papel con tinte, es cielo. */
  --marfil:      #E6E0F2;
  --marfil-alto: #EEE9F7;   /* la parte alta del cielo, aún con luz */
  --marfil-bajo: #D4CCE8;   /* la baja, donde el día ya se fue */
  --arena:       #DED6EC;
  --nata:        #FBF9FE;
  --agua-clara:  #D3E7E5;
  --lavanda:     #DCD2F0;
  --nebulosa-1:  rgba(124,102,196,.34);
  --nebulosa-2:  rgba(56,166,152,.24);
  --nebulosa-3:  rgba(201,162,39,.20);
  --nebulosa-4:  rgba(88,70,150,.30);
}

body{
  background-color:var(--marfil);
  background-image:
    radial-gradient(ellipse 62% 42% at 14% 6%,  var(--nebulosa-1), transparent 62%),
    radial-gradient(ellipse 52% 36% at 88% 22%, var(--nebulosa-2), transparent 62%),
    radial-gradient(ellipse 58% 40% at 72% 74%, var(--nebulosa-3), transparent 62%),
    radial-gradient(ellipse 48% 32% at 22% 90%, var(--nebulosa-4), transparent 62%),
    linear-gradient(180deg, var(--marfil-alto) 0%, var(--marfil) 45%, var(--marfil-bajo) 100%);
  background-attachment:fixed;
}

/* La barra se apoya en el cielo alto */
.barra{ background:color-mix(in srgb, var(--marfil-alto) 86%, transparent); }

/* Estrellas más nítidas: sobre un fondo más profundo se leen mejor */
body::before{ opacity:1; }

/* ── Marca ──────────────────────────────────────────────────────────────── */
.marca{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.isotipo{ width:44px; height:44px; flex:none; display:block;
  filter:drop-shadow(0 3px 10px rgba(107,90,166,.3)); }
.marca-texto{ display:flex; flex-direction:column; line-height:1.05; }
.marca-nombre{
  font-family:var(--titulo); font-size:1.42rem; font-weight:500;
  font-variation-settings:'SOFT' 60,'WONK' 1; color:var(--tinta);
  letter-spacing:-.015em;
}
.marca-nombre em{
  font-style:italic; font-weight:400;
  background:linear-gradient(112deg, var(--agua) 0%, var(--violeta) 55%, var(--oro) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.marca-bajo{
  font-family:var(--texto); font-size:.6rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--tinta-tenue);
  margin-top:.18rem;
}
@media (prefers-reduced-motion:no-preference){
  .marca .isotipo{ transition:transform .6s cubic-bezier(.34,1.3,.64,1); }
  .marca:hover .isotipo{ transform:rotate(72deg); }   /* un pétalo de giro */
}
.marca-pie .marca-nombre{ font-size:1.28rem; }
.marca-pie .isotipo{ width:38px; height:38px; }
@media (max-width:520px){
  .marca-bajo{ display:none; }
  .marca-nombre{ font-size:1.24rem; }
  .isotipo{ width:38px; height:38px; }
}

/* ── Figuras: en el teléfono tienen que verse ───────────────────────────── */
@media (max-width:860px){
  .figura{ width:330px; opacity:.26; }
  .om-figura{ font-size:9rem; opacity:.22; }
}
@media (max-width:520px){
  .figura{ width:290px; opacity:.28; }
  .om-figura{ font-size:8rem; opacity:.24; }
  /* el trazo fino se pierde en pantalla chica: se engrosa */
  .figura svg circle, .figura svg path, .figura svg polygon,
  .figura svg ellipse, .figura svg rect, .figura svg line{ stroke-width:1.5; }
}

/* ── v2.2 — el cielo baja otro escalón ──────────────────────────────────────
   Con #E6E0F2 el centro de la pantalla seguía leyéndose como papel claro. Esto
   lo lleva a un crepúsculo real: sigue habiendo luz arriba, pero abajo el día
   ya se fue. El texto mantiene contraste sobrado (7:1) y las tarjetas, casi
   blancas, ahora resaltan como luces encendidas sobre el cielo. */
:root{
  --marfil-alto: #DFD8F1;
  --marfil:      #CEC5E7;
  --marfil-bajo: #B9ADD9;
  --arena:       #C9BEE4;
  --agua-clara:  #BFDCD9;
  --lavanda:     #C6B8E6;
  --nata:        #FCFAFE;
  --tinta:       #241F2E;
  --tinta-suave: #514A60;
  --tinta-tenue: #7B7391;
  --nebulosa-1:  rgba(116,92,190,.42);
  --nebulosa-2:  rgba(46,158,144,.30);
  --nebulosa-3:  rgba(201,162,39,.26);
  --nebulosa-4:  rgba(74,58,132,.38);
}

/* Las franjas ahora son casi opacas: son bandas de cielo, no velos */
.franja-agua{ background:color-mix(in srgb, var(--agua-clara) 94%, transparent); }
.franja-arena{ background:color-mix(in srgb, var(--arena) 94%, transparent); }
.franja-lavanda{ background:color-mix(in srgb, var(--lavanda) 94%, transparent); }

/* Sobre el cielo profundo, las figuras y las estrellas ganan presencia sin tocarlas */
.figura{ opacity:.24; }
.om-figura{ opacity:.2; }
.aura-fondo{ opacity:.6; }

/* Las tarjetas se separan del fondo con un poco más de sombra */
.tarjeta{ box-shadow:0 4px 20px -8px rgba(36,31,46,.16); }
.tarjeta:hover{ box-shadow:0 22px 52px -22px rgba(74,58,132,.5); }

/* El menú y el pie necesitan un punto más de contraste sobre el cielo */
.menu a{ color:var(--tinta-suave); }
.pie{ background:color-mix(in srgb, var(--arena) 92%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   v2.3 — Equilibrio del cielo
   El violeta se había comido la parte alta: la barra y el hero se leían morados.
   Ahora el cielo arranca casi neutro arriba (donde vive el título), pasa por
   verde agua, y recién en la mitad baja entra el violeta. El dorado deja de ser
   un detalle y se usa como bisagra entre ambos.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* la parte alta pierde el tinte morado y gana luz */
  --marfil-alto: #EDEAF3;
  --marfil:      #D6D0E6;
  --marfil-bajo: #B5A9D6;

  /* nebulosas rebalanceadas: agua y oro arriba, violeta abajo */
  --nebulosa-1:  rgba(46,158,144,.30);   /* agua, arriba izquierda */
  --nebulosa-2:  rgba(201,162,39,.26);   /* oro, arriba derecha */
  --nebulosa-3:  rgba(116,92,190,.40);   /* violeta, abajo derecha */
  --nebulosa-4:  rgba(74,58,132,.34);    /* violeta profundo, abajo izquierda */
  --nebulosa-5:  rgba(46,158,144,.22);   /* agua de vuelta, al medio */
}

body{
  background-image:
    radial-gradient(ellipse 58% 34% at 12% 4%,  var(--nebulosa-1), transparent 60%),
    radial-gradient(ellipse 54% 30% at 86% 10%, var(--nebulosa-2), transparent 60%),
    radial-gradient(ellipse 50% 30% at 20% 46%, var(--nebulosa-5), transparent 62%),
    radial-gradient(ellipse 60% 40% at 78% 72%, var(--nebulosa-3), transparent 62%),
    radial-gradient(ellipse 52% 36% at 18% 94%, var(--nebulosa-4), transparent 62%),
    linear-gradient(180deg,
      var(--marfil-alto) 0%,
      #E4DFEF 22%,
      var(--marfil) 55%,
      var(--marfil-bajo) 100%);
}

/* ── La barra del título: neutra, casi luz, integrada por transparencia ──── */
.barra{
  background:linear-gradient(180deg,
    rgba(253,252,255,.88) 0%,
    rgba(247,245,252,.78) 100%);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(36,31,46,.07);
  box-shadow:0 1px 24px -12px rgba(74,58,132,.4);
}

/* El encabezado de cada página arranca en luz y no en morado */
.encabezado-pagina{
  background:linear-gradient(180deg, rgba(253,252,255,.5) 0%, transparent 78%);
}

/* ── El dorado entra donde el morado pesaba ─────────────────────────────── */
/* franja lavanda: se calienta con un velo dorado, deja de ser plana */
.franja-lavanda{
  background:
    radial-gradient(ellipse 70% 90% at 78% 30%, rgba(201,162,39,.22), transparent 65%),
    color-mix(in srgb, var(--lavanda) 92%, transparent);
}
/* franja arena: un punto de verde agua para que dialogue con el violeta */
.franja-arena{
  background:
    radial-gradient(ellipse 60% 80% at 12% 70%, rgba(46,158,144,.2), transparent 65%),
    color-mix(in srgb, var(--arena) 92%, transparent);
}
/* franja agua: una insinuación dorada en el borde opuesto */
.franja-agua{
  background:
    radial-gradient(ellipse 55% 75% at 88% 80%, rgba(201,162,39,.18), transparent 65%),
    color-mix(in srgb, var(--agua-clara) 94%, transparent);
}

/* Las figuras alternan tono según el fondo donde caen */
.franja-lavanda .figura{ color:var(--oro); opacity:.28; }
.franja-arena .figura{ color:var(--agua); opacity:.26; }
.franja-agua .figura{ color:var(--violeta); opacity:.24; }

/* El pie cierra en dorado tenue, no en morado */
.pie{
  background:
    radial-gradient(ellipse 60% 120% at 82% 0%, rgba(201,162,39,.16), transparent 62%),
    color-mix(in srgb, var(--arena) 92%, transparent);
}

/* Estrellas: más oro arriba, más violeta abajo, para acompañar el degradado */
body::before{
  background-image:
    radial-gradient(2.1px 2.1px at 12% 12%, rgba(201,162,39,.95) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 68% 6%,  rgba(46,158,144,.85) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 84% 26%, rgba(201,162,39,.8) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 32% 44%, rgba(46,158,144,.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 62%,     rgba(139,120,200,.8) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 24% 78%, rgba(139,120,200,.75) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 56% 88%, rgba(201,162,39,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 8% 58%,  rgba(46,158,144,.7) 50%, transparent 51%);
  background-size:440px 440px;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.6 — Botón de reserva siempre a mano + el oro de vuelta en la zona media
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El oro había quedado solo arriba ────────────────────────────────────
   Con el rebalanceo anterior el dorado se concentró en la cabecera y el
   centro del scroll quedó sin él. Estas dos nebulosas lo devuelven a la
   franja intermedia, que es donde se ve al ir bajando. */
:root{
  --nebulosa-oro-media: rgba(201,162,39,.30);
  --nebulosa-oro-baja:  rgba(190,150,50,.22);
}
body{
  background-image:
    radial-gradient(ellipse 58% 34% at 12% 4%,  var(--nebulosa-1), transparent 60%),
    radial-gradient(ellipse 54% 30% at 86% 10%, var(--nebulosa-2), transparent 60%),
    radial-gradient(ellipse 46% 26% at 82% 40%, var(--nebulosa-oro-media), transparent 62%),
    radial-gradient(ellipse 50% 30% at 16% 52%, var(--nebulosa-5), transparent 62%),
    radial-gradient(ellipse 44% 24% at 40% 62%, var(--nebulosa-oro-baja), transparent 64%),
    radial-gradient(ellipse 60% 40% at 80% 76%, var(--nebulosa-3), transparent 62%),
    radial-gradient(ellipse 52% 36% at 18% 94%, var(--nebulosa-4), transparent 62%),
    linear-gradient(180deg,
      var(--marfil-alto) 0%,
      #E4DFEF 22%,
      var(--marfil) 55%,
      var(--marfil-bajo) 100%);
}

/* ── Botón de reserva flotante ──────────────────────────────────────────
   Lleva la misma mezcla que la marca: agua → violeta → oro. Va abajo a la
   izquierda para no chocar con el botón de WhatsApp, que ocupa la derecha. */
.reserva-flotante{
  /* Convive con el botón de WhatsApp del plugin, que es fijo en 56x56 con
     bottom:30px / right:30px. El de reserva se apoya a su izquierda, a la misma
     altura y con la misma altura de caja, para que se lean como una sola fila. */
  position:fixed; right:5.75rem; bottom:30px; left:auto; z-index:60;
  height:56px; box-sizing:border-box;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:0 1.35rem 0 .8rem; border-radius:999px;
  font-family:var(--texto); font-size:.97rem; font-weight:600;
  color:#fff; text-decoration:none; white-space:nowrap;
  background:linear-gradient(112deg, var(--agua) 0%, var(--violeta) 46%, var(--oro) 100%);
  background-size:150% 100%; background-position:12% 50%;
  box-shadow:0 8px 26px -8px rgba(74,58,132,.6),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:background-position .6s ease, transform .25s ease, box-shadow .25s ease;
}
.reserva-flotante:hover{
  background-position:88% 50%;
  transform:translateY(-2px);
  box-shadow:0 16px 38px -10px rgba(201,162,39,.6),
             inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff;
}
.reserva-flotante:focus-visible{ outline:3px solid var(--oro); outline-offset:3px; }

.reserva-flotante .isotipo{ width:30px; height:30px; filter:none; flex:none; }
.reserva-flotante .isotipo g{ stroke:rgba(255,255,255,.95) !important; }
.reserva-flotante .isotipo circle[fill]{ fill:#fff !important; }

/* El plugin de WhatsApp muestra un texto flotante justo en ese espacio. Con dos
   botones en la fila estorbaba; el ícono verde ya se entiende solo. */
.wa__btn_popup_txt{ display:none !important; }

@media (prefers-reduced-motion:no-preference){
  .reserva-flotante::after{
    content:''; position:absolute; inset:-3px; border-radius:999px; z-index:-1;
    background:linear-gradient(112deg, var(--agua), var(--violeta), var(--oro));
    opacity:.4; filter:blur(9px);
    animation:lm-pulso-reserva 4.5s ease-in-out infinite;
  }
}
@keyframes lm-pulso-reserva{
  0%,100%{ opacity:.28; transform:scale(.985) }
  50%    { opacity:.55; transform:scale(1.03) }
}

@media (max-width:640px){
  .reserva-flotante{
    right:5.25rem; bottom:30px; height:52px;
    padding:0 1.1rem 0 .7rem; font-size:.9rem;
  }
  .reserva-flotante .isotipo{ width:26px; height:26px; }
}
@media (max-width:380px){
  /* En pantallas muy angostas queda solo el loto: el destino es evidente. */
  .reserva-flotante span{ display:none; }
  .reserva-flotante{ padding:0; width:52px; justify-content:center; right:5.25rem; }
}

/* Ya hay un botón de reserva a la vista en la propia agenda: ahí sobra */
body.page-agenda .reserva-flotante,
body.page-reserva-tu-cita .reserva-flotante{ display:none; }