/* ──────────────────────────────────────────────────────────────────────────
   Velario · estilos globales
   Estética mística: fondo profundo, oro cálido, tipografía serif elegante.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg-0: #0a0814;
  --bg-1: #14101f;
  --bg-2: #1b1530;
  --ink: #f5ecd6;
  --ink-dim: #c9bfa6;
  --ink-faint: #8a8270;
  --gold: #d4af37;
  --gold-soft: #b8923a;
  --gold-glow: rgba(212, 175, 55, 0.35);
  --danger: #d97777;
  --ok: #7bc88a;
  --serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(circle at 20% 10%, rgba(212, 175, 55, 0.06), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(125, 60, 152, 0.08), transparent 50%),
    linear-gradient(180deg, #0a0814 0%, #14101f 60%, #0a0814 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* Estrellitas sutiles */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 240, 200, 0.4), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 240, 200, 0.3), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 240, 200, 0.5), transparent),
    radial-gradient(1px 1px at 90% 20%, rgba(255, 240, 200, 0.3), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(255, 240, 200, 0.4), transparent),
    radial-gradient(2px 2px at 50% 50%, rgba(255, 240, 200, 0.2), transparent),
    radial-gradient(1px 1px at 85% 85%, rgba(255, 240, 200, 0.3), transparent);
  background-size: 100% 100%;
  opacity: 0.6;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.01em; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 28px;
  position: relative;
  z-index: 2;
}

/* ── Logo MiVelario (vela dibujada en CSS, escala con font-size) ── */
.mv-logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  font-size: 25px;
}
.mv-logo__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
.mv-logo__flame {
  position: relative;
  width: .66em;
  height: .86em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
  animation: mv-flicker 3.4s ease-in-out infinite;
}
.mv-logo__flame::before {
  content: "";
  width: .58em;
  height: .58em;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: linear-gradient(45deg, #a86e22, #f2d27c);
  box-shadow: 0 0 .9em .25em rgba(230, 200, 120, .45);
}
.mv-logo__flame::after {
  content: "";
  position: absolute;
  bottom: .1em;
  width: .28em;
  height: .28em;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: #fff8e2;
}
.mv-logo__wick {
  width: .09em;
  height: .16em;
  background: #46392c;
  margin-top: -.06em;
  z-index: 1;
}
.mv-logo__wax {
  width: .95em;
  height: 1.45em;
  margin-top: -.03em;
  border-radius: .2em .2em .09em .09em;
  background: linear-gradient(90deg, #c7ba9c, #ece4d2 24%, #f8f2e7 50%, #e2d9c4 74%, #bfb295);
  box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .5), inset -.09em 0 .18em rgba(120, 100, 60, .25);
}
.mv-logo__text {
  display: flex;
  flex-direction: column;
  gap: .18em;
}
.mv-logo__name {
  font-family: 'Cormorant Garamond', var(--serif), serif;
  font-weight: 500;
  font-size: 1.9em;
  line-height: .9;
  color: var(--ink);
  letter-spacing: .004em;
}
.mv-logo__name em {
  font-style: italic;
  font-weight: 400;
  color: #e6c879;
}
.mv-logo__tag {
  font-family: 'Jost', var(--sans), sans-serif;
  font-weight: 400;
  font-size: .42em;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(201, 162, 75, .85);
}
@keyframes mv-flicker {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  42% { transform: scale(.94) translateY(.04em); opacity: .9; }
  68% { transform: scale(1.04) translateY(-.03em); opacity: .98; }
}

.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 9px 16px;
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
}
.nav a.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.10);
}

@media (max-width: 720px) {
  .site-header { padding: 16px 16px; gap: 12px 10px; align-items: center; }
  .mv-logo { font-size: 21px; gap: 10px; order: 0; }
  /* El usuario sube a la primera fila, alineado a la derecha junto al logo. */
  .auth-area { order: 1; margin-left: auto; }
  /* El menú baja a su propia fila completa, debajo del logo y el usuario. */
  .nav { order: 2; flex-basis: 100%; width: 100%; gap: 8px; justify-content: center; }
  .nav a { padding: 7px 12px; font-size: 10.5px; letter-spacing: 0.07em; }
  /* Chip de usuario algo más pequeño para que quepa junto al logo. */
  .user-chip { gap: 7px; padding: 4px 6px 4px 4px; }
  .user-chip__avatar { width: 26px; height: 26px; }
  .user-chip__avatar--initial { font-size: 13px; }
  .user-chip__name { font-size: 12.5px; max-width: 90px; }
  .user-chip__logout { font-size: 10px; padding: 4px 9px; }
}
@media (max-width: 420px) {
  .mv-logo { font-size: 18px; }
  .mv-logo__tag { letter-spacing: .28em; }
  .nav a { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.05em; }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 80px;
  position: relative;
  z-index: 2;
}

.hero {
  text-align: center;
  padding: 60px 24px 40px;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 18px;
  background: linear-gradient(180deg, var(--ink) 30%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1.6;
}

/* ── Catálogo ──────────────────────────────────────────────────────────── */

.section-title {
  text-align: center;
  margin: 60px 0 36px;
}
.section-title h2 {
  font-size: 32px;
  margin: 0 0 8px;
}
.section-title p {
  color: var(--ink-faint);
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.candle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.candle-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  /* overflow visible para que la llama no se recorte por encima de la vela */
}
.candle-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, var(--card-glow, transparent) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s;
}
.candle-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.candle-card:hover::before { opacity: 1; }

.candle-card .candle-mini {
  width: 100px;
  height: 160px;
  margin: 0 auto 18px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.candle-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
}
.candle-card .format {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.candle-card .keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 12px 0 16px;
}
.candle-card .keyword {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--ink-dim);
}
.candle-card .price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.candle-card .price .amount {
  font-size: 20px;
  font-family: var(--serif);
  color: var(--gold);
}
.candle-card .price .duration {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

/* ── Vela: render compartido ───────────────────────────────────────────── */
/*
   Estructura (vela como pilar standalone, sin vaso/contenedor):
     .candle-figure  (caja de tamaño --cw × --ch)
       └── .glass    (wrapper transparente — solo posiciona la cera)
              └── .wax (cuerpo de cera; ::before = pool fundido, ::after = halo)
       ├── .wick     (mecha — sobre la superficie de la cera)
       └── .flame    (llama — sobre la mecha)

   La altura de cera se controla con --wax-frac (0..1, sin unidad), que permite
   posicionar mecha y llama con calc() en píxeles exactos.
   La vela "se consume" reduciendo la altura de la cera; al ser un pilar sin
   contenedor, parece físicamente más corta a medida que se quema.
*/

.candle-figure {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: var(--cw, 120px);
  height: var(--ch, 200px);
}

/* Wrapper transparente — solo sirve para posicionar la cera */
.candle-figure .glass {
  position: absolute;
  inset: 0;
}

/* ── Cuerpo de cera (vela pilar standalone) ────────────────────────────── */

.candle-figure .wax {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--wax-frac, 1) * 100%);
  background:
    /* highlight central — efecto cilíndrico 3D */
    radial-gradient(ellipse 55% 100% at 50% 50%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.06) 35%,
      transparent 65%),
    /* sombreado lateral, oscurece hacia los bordes del cilindro */
    linear-gradient(90deg,
      var(--wax-color-deep, #888) 0%,
      var(--wax-color-deep, #888) 5%,
      var(--wax-color, #ccc) 30%,
      var(--wax-color, #ccc) 70%,
      var(--wax-color-deep, #888) 95%,
      var(--wax-color-deep, #888) 100%),
    /* color base del cuerpo, leve oscurecimiento abajo */
    linear-gradient(180deg,
      var(--wax-color, #ccc) 0%,
      var(--wax-color-deep, #888) 100%);
  background-blend-mode: screen, multiply, normal;
  border-radius: 6px 6px 5px 5px;
  transition: height 1s linear;
  box-shadow:
    /* sombra interna leve abajo (efecto base) */
    inset 0 -3px 6px rgba(0, 0, 0, 0.30),
    /* sombra proyectada al suelo */
    0 10px 22px rgba(0, 0, 0, 0.55),
    /* halo cálido alrededor de la vela (luz emitida) */
    0 0 50px var(--candle-glow, rgba(255, 200, 80, 0.35));
}

/* Pool de cera fundida (menisco cóncavo) en la superficie */
.candle-figure .wax::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 4%;
  right: 4%;
  height: 12px;
  background:
    /* depresión central oscura — la vela se ha ahuecado por la llama */
    radial-gradient(ellipse 80% 230% at 50% 100%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.18) 35%,
      transparent 70%),
    /* color cera (más oscura arriba por el reborde) */
    linear-gradient(180deg,
      var(--wax-color-deep, #888) 0%,
      var(--wax-color, #ccc) 70%,
      var(--wax-color, #ccc) 100%);
  border-radius: 50% / 60% 60% 40% 40%;
  filter: blur(0.4px);
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Halo cálido proyectado por la llama sobre la superficie de la cera */
.candle-figure .wax::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 26px;
  background: radial-gradient(ellipse at 50% 0%,
    var(--candle-glow, rgba(255, 200, 100, 0.6)) 0%,
    transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0.95;
  z-index: 2;
}

/* ── Mecha — fuera del glass, no se recorta ────────────────────────────── */

.candle-figure .wick {
  position: absolute;
  bottom: calc(var(--wax-frac, 1) * var(--ch, 200px) - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--cw, 120px) * 0.022 + 1px);
  height: calc(var(--cw, 120px) * 0.06 + 4px);
  background: linear-gradient(180deg,
    #fff5b0 0%,
    #ffb04a 12%,
    #4a2810 38%,
    #1a0e02 100%);
  border-radius: 1.5px;
  z-index: 6;
  transition: bottom 1s linear;
  box-shadow:
    0 -2px 4px rgba(255, 150, 50, 0.55),
    0 0 1.5px rgba(0, 0, 0, 0.5);
}

/* ── Llama — fuera del glass, escala con el ancho de la vela ───────────── */

.candle-figure .flame {
  position: absolute;
  bottom: calc(var(--wax-frac, 1) * var(--ch, 200px) + var(--cw, 120px) * 0.05 + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--cw, 120px) * 0.13 + 4px);
  height: calc(var(--cw, 120px) * 0.22 + 6px);
  z-index: 7;
  transition: bottom 1s linear;
  pointer-events: none;
}
.candle-figure .flame .flame-outer,
.candle-figure .flame .flame-inner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  filter: blur(0.5px);
}
.candle-figure .flame .flame-outer {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 78%,
    #fff2b0 0%,
    #ffae3a 22%,
    #ff7733 50%,
    #c0451a 80%,
    transparent 100%);
  animation: flicker-outer 0.18s infinite alternate ease-in-out;
}
.candle-figure .flame .flame-inner {
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 70%,
    #ffffff 0%,
    #fff8c0 35%,
    #ffd970 70%,
    #ffae3b 100%);
  animation: flicker-inner 0.13s infinite alternate ease-in-out;
}
.candle-figure .flame .flame-glow {
  position: absolute;
  bottom: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--cw, 120px) * 0.7 + 30px);
  height: calc(var(--cw, 120px) * 0.7 + 30px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 200, 100, 0.55) 0%,
    rgba(255, 150, 50, 0.20) 35%,
    transparent 70%);
  filter: blur(10px);
  animation: glow-pulse 1.4s infinite alternate ease-in-out;
  z-index: -1;
}

@keyframes flicker-outer {
  0%   { transform: translateX(-50%) scale(1, 1) rotate(-1deg); opacity: 0.95; }
  50%  { transform: translateX(-52%) scale(0.94, 1.06) rotate(1.5deg); opacity: 1; }
  100% { transform: translateX(-48%) scale(1.05, 0.95) rotate(-2deg); opacity: 0.92; }
}
@keyframes flicker-inner {
  0%   { transform: translateX(-50%) scale(1, 1); }
  50%  { transform: translateX(-51%) scale(0.90, 1.10); }
  100% { transform: translateX(-49%) scale(1.07, 0.92); }
}
@keyframes glow-pulse {
  0%   { opacity: 0.55; transform: translateX(-50%) scale(1); }
  100% { opacity: 1;    transform: translateX(-50%) scale(1.18); }
}

/* ── Variantes de la llama (data-flame) ────────────────────────────────── */

/* Origen de transformación al pie de la llama, para inclinaciones naturales */
.candle-figure .flame { transform-origin: 50% 100%; }

/* Constante e intensa: parpadeo lento y firme */
.candle-figure[data-flame="constante"] .flame .flame-outer { animation-duration: 0.45s; animation-timing-function: ease-in-out; }
.candle-figure[data-flame="constante"] .flame .flame-inner { animation-duration: 0.35s; }
.candle-figure[data-flame="constante"] .flame .flame-glow  { animation-duration: 1.8s; }

/* Titilante: parpadeo rapidísimo */
.candle-figure[data-flame="titilante"] .flame .flame-outer { animation-duration: 0.07s; }
.candle-figure[data-flame="titilante"] .flame .flame-inner { animation-duration: 0.05s; }
.candle-figure[data-flame="titilante"] .flame .flame-glow  { animation-duration: 0.5s; }

/* Débil: pequeña, opaca */
.candle-figure[data-flame="debil"] .flame {
  transform: translateX(-50%) scale(0.62);
  opacity: 0.6;
}
.candle-figure[data-flame="debil"] .flame .flame-glow { opacity: 0.3 !important; }

/* Inclinada a la izquierda */
.candle-figure[data-flame="izquierda"] .flame {
  transform: translateX(-50%) rotate(-18deg);
}

/* Inclinada a la derecha */
.candle-figure[data-flame="derecha"] .flame {
  transform: translateX(-50%) rotate(18deg);
}

/* Color vivo: naranjas y rojos saturados */
.candle-figure[data-flame="color_vivo"] .flame .flame-outer {
  background: radial-gradient(ellipse at 50% 78%,
    #fff8a0 0%,
    #ff8c1a 25%,
    #ff3a00 60%,
    #a01200 90%,
    transparent 100%);
}
.candle-figure[data-flame="color_vivo"] .flame .flame-inner {
  background: radial-gradient(ellipse at 50% 70%,
    #ffffff 0%,
    #fff0a0 30%,
    #ffaa44 70%,
    #ff5500 100%);
}
.candle-figure[data-flame="color_vivo"] .flame .flame-glow {
  background: radial-gradient(circle,
    rgba(255, 130, 30, 0.65) 0%,
    rgba(255, 60, 10, 0.25) 35%,
    transparent 70%);
}

/* Azul: presencia espiritual, raro */
.candle-figure[data-flame="azul"] .flame .flame-outer {
  background: radial-gradient(ellipse at 50% 78%,
    #ffffff 0%,
    #d6e6ff 25%,
    #88aadd 55%,
    #3355aa 85%,
    transparent 100%);
}
.candle-figure[data-flame="azul"] .flame .flame-inner {
  background: radial-gradient(ellipse at 50% 70%,
    #ffffff 0%,
    #e8f0ff 35%,
    #a0bee0 70%,
    #5577bb 100%);
}
.candle-figure[data-flame="azul"] .flame .flame-glow {
  background: radial-gradient(circle,
    rgba(150, 200, 255, 0.6) 0%,
    rgba(80, 130, 255, 0.2) 35%,
    transparent 70%);
}

/* ── HUMO — capnomancia ────────────────────────────────────────────────── */

.candle-figure .smoke {
  position: absolute;
  /* Se sitúa justo encima de la llama */
  bottom: calc(var(--wax-frac, 1) * var(--ch, 200px) + var(--cw, 120px) * 0.27 + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--cw, 120px) * 0.5 + 10px);
  height: calc(var(--ch, 200px) * 0.45);
  z-index: 8;
  pointer-events: none;
  opacity: 0.85;
  transition: bottom 1s linear;
}

.candle-figure .smoke .puff {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--cw, 120px) * 0.10 + 5px);
  height: calc(var(--cw, 120px) * 0.10 + 5px);
  margin-left: calc((var(--cw, 120px) * 0.10 + 5px) / -2);
  background: radial-gradient(circle,
    rgba(220, 220, 230, 0.55) 0%,
    rgba(220, 220, 230, 0.30) 40%,
    transparent 70%);
  border-radius: 50%;
  filter: blur(2.5px);
  opacity: 0;
  animation: smoke-rise 3.6s infinite ease-out;
}
.candle-figure .smoke .puff:nth-child(1) { animation-delay: 0s; }
.candle-figure .smoke .puff:nth-child(2) { animation-delay: 0.7s; }
.candle-figure .smoke .puff:nth-child(3) { animation-delay: 1.4s; }
.candle-figure .smoke .puff:nth-child(4) { animation-delay: 2.1s; }
.candle-figure .smoke .puff:nth-child(5) { animation-delay: 2.8s; }

@keyframes smoke-rise {
  0%   { transform: translateY(0)     translateX(0)    scale(0.4); opacity: 0; }
  15%  {                                                          opacity: 0.55; }
  100% { transform: translateY(-100%) translateX(0)    scale(2.4); opacity: 0; }
}
@keyframes smoke-rise-disperse {
  0%   { transform: translateY(0)     translateX(0)    scale(0.3); opacity: 0; }
  15%  {                                                          opacity: 0.6; }
  100% { transform: translateY(-100%) translateX(0)    scale(3.4); opacity: 0; }
}
@keyframes smoke-rise-right {
  0%   { transform: translateY(0)     translateX(0)    scale(0.4); opacity: 0; }
  15%  {                                                          opacity: 0.55; }
  100% { transform: translateY(-100%) translateX(70%)  scale(2.5); opacity: 0; }
}
@keyframes smoke-rise-left {
  0%   { transform: translateY(0)     translateX(0)    scale(0.4); opacity: 0; }
  15%  {                                                          opacity: 0.55; }
  100% { transform: translateY(-100%) translateX(-70%) scale(2.5); opacity: 0; }
}

/* Variantes del humo */

.candle-figure[data-smoke="recto"] .smoke .puff {
  animation-duration: 4s;
}

.candle-figure[data-smoke="blanco_disperso"] .smoke .puff {
  animation-name: smoke-rise-disperse;
  animation-duration: 2.2s;
  background: radial-gradient(circle,
    rgba(245, 245, 255, 0.75) 0%,
    rgba(245, 245, 255, 0.30) 45%,
    transparent 70%);
}

.candle-figure[data-smoke="denso"] .smoke .puff {
  width: calc(var(--cw, 120px) * 0.13 + 7px);
  height: calc(var(--cw, 120px) * 0.13 + 7px);
  margin-left: calc((var(--cw, 120px) * 0.13 + 7px) / -2);
  background: radial-gradient(circle,
    rgba(190, 190, 205, 0.85) 0%,
    rgba(190, 190, 205, 0.45) 40%,
    transparent 75%);
  animation-duration: 4.5s;
}

.candle-figure[data-smoke="derecha"] .smoke .puff {
  animation-name: smoke-rise-right;
}

.candle-figure[data-smoke="izquierda"] .smoke .puff {
  animation-name: smoke-rise-left;
}

.candle-figure[data-smoke="negro_espeso"] .smoke .puff {
  background: radial-gradient(circle,
    rgba(40, 40, 55, 0.80) 0%,
    rgba(40, 40, 55, 0.40) 40%,
    transparent 75%);
  width: calc(var(--cw, 120px) * 0.12 + 6px);
  height: calc(var(--cw, 120px) * 0.12 + 6px);
  margin-left: calc((var(--cw, 120px) * 0.12 + 6px) / -2);
  filter: blur(2px);
}

.candle-figure[data-smoke="tenue"] .smoke {
  opacity: 0.30;
}
.candle-figure[data-smoke="tenue"] .smoke .puff {
  width: calc(var(--cw, 120px) * 0.06 + 3px);
  height: calc(var(--cw, 120px) * 0.06 + 3px);
  margin-left: calc((var(--cw, 120px) * 0.06 + 3px) / -2);
  animation-duration: 5s;
}

/* Cuando termina */
.candle-figure.finished .flame,
.candle-figure.finished .wick,
.candle-figure.finished .wax,
.candle-figure.finished .smoke {
  display: none;
}

/* Forma final — solo la silueta, en el color de la vela quemada, sin contenedor */
.wax-shape {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* sin fondo, sin caja — la forma flota libre */
}
.wax-shape svg {
  width: 78%;
  max-height: 86%;
  color: var(--wax-color);
  /* fill heredable: las paths/circles sin fill propio toman el color de la vela */
  fill: currentColor;
  filter:
    /* halo cálido suave alrededor del resultado */
    drop-shadow(0 0 18px var(--candle-glow, rgba(212, 175, 55, 0.55)))
    drop-shadow(0 0 6px var(--candle-glow, rgba(212, 175, 55, 0.5)))
    /* sombra para dar volumen a la silueta */
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}
/* Por si algún elemento SVG hijo trae fill="" vacío o un fill negro implícito */
.wax-shape svg path:not([fill]),
.wax-shape svg circle:not([fill]),
.wax-shape svg ellipse:not([fill]),
.wax-shape svg rect:not([fill]),
.wax-shape svg polygon:not([fill]),
.wax-shape svg text:not([fill]) {
  fill: currentColor;
}

/* ── Página: encender vela ─────────────────────────────────────────────── */

.layout-light {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
  margin-top: 30px;
}
@media (max-width: 800px) {
  .layout-light { grid-template-columns: 1fr; gap: 30px; }
}

.candle-preview {
  position: sticky;
  top: 30px;
  text-align: center;
}
@media (max-width: 800px) {
  /* En una sola columna, sticky hace que la previsualización flote encima
     del formulario al scrollear y se solape el texto. La desactivamos. */
  .candle-preview { position: static; top: auto; }
}
.candle-preview .candle-figure {
  /* La llama y su halo se dibujan POR ENCIMA de la caja de la vela
     (~50px para una vela de 140px de ancho). Este margen evita que
     choquen con el enlace "← Volver al catálogo", también en móvil. */
  margin-top: 56px;
  margin-bottom: 24px;
}
.candle-preview h2 {
  font-size: 28px;
  margin: 0 0 6px;
  color: var(--gold);
}
.candle-preview .format {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.candle-preview .meaning {
  color: var(--ink-dim);
  line-height: 1.6;
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  padding: 18px 20px;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 15px;
}
.candle-preview .for {
  color: var(--ink-faint);
  font-size: 13px;
  font-style: italic;
}

.form-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius);
  padding: 32px;
}
.form-card h2 {
  font-size: 26px;
  margin: 0 0 8px;
}
.form-card .lede {
  color: var(--ink-faint);
  margin: 0 0 24px;
  font-size: 14px;
}

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.field input[type="text"],
.field textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  padding: 14px 16px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.field input[type="text"]:focus,
.field textarea:focus { border-color: var(--gold); }
.field textarea { min-height: 110px; line-height: 1.5; }
.field .help {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 6px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 4px;
  cursor: pointer;
}
.checkbox-row input { margin-top: 4px; }
.checkbox-row .label-text { flex: 1; }
.checkbox-row .label-text strong { display: block; color: var(--ink); }
.checkbox-row .label-text span { font-size: 13px; color: var(--ink-faint); }

.summary {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 20px 0;
}
.summary .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
}
.summary .row:last-child { margin-bottom: 0; padding-top: 8px; border-top: 1px solid rgba(212, 175, 55, 0.15); }
.summary .row .v { color: var(--ink); }
.summary .row.total .v { color: var(--gold); font-family: var(--serif); font-size: 22px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%);
  color: #1a1408;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  font-weight: 600;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(212, 175, 55, 0.3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.btn-block { width: 100%; }
.btn.btn-ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn.btn-ghost:hover { background: rgba(212, 175, 55, 0.1); color: var(--ink); }

.error {
  background: rgba(217, 119, 119, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
}

/* ── Página: ver vela ──────────────────────────────────────────────────── */

.view-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 800px) { .view-wrap { grid-template-columns: 1fr; gap: 30px; } }

.view-candle { text-align: center; }
.view-candle .candle-figure {
  --cw: 200px;
  --ch: 340px;
}
/* % consumida — protagonista visual de la vista de la vela */
.view-candle .burn-percent {
  font-family: var(--serif);
  font-size: 62px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 22px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.view-candle #burn-percent-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* Tiempo restante aproximado, debajo y secundario */
.view-candle .countdown-approx {
  margin-top: 14px;
  text-align: center;
}
.view-candle .countdown-approx #countdown {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.view-candle .countdown-approx small {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.7;
  margin-top: 3px;
}

/* Compat: si en algún sitio queda el viejo .countdown (mensajes de error, etc.) */
.view-candle .countdown {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-top: 14px;
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.view-candle .countdown small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
.view-candle .progress-bar {
  margin: 16px auto 0;
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.view-candle .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  width: 0%;
  transition: width 1s linear;
}

.view-candle .fullscreen-toggle {
  margin-top: 22px;
  font-size: 13px;
  padding: 9px 18px;
}
.view-candle .fullscreen-toggle::before {
  content: '⤢';
  margin-right: 6px;
  font-size: 15px;
}

/* ── Modo pantalla completa de la vela ─────────────────────────────────── */

body.fullscreen-mode { overflow: hidden; }

.view-candle.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.10), transparent 55%),
    linear-gradient(180deg, #0a0814 0%, #14101f 60%, #0a0814 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 20px 28px;
  margin: 0;
  overflow: hidden;
  animation: fullscreen-fade-in 0.35s ease-out;
}
@keyframes fullscreen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.view-candle.fullscreen #candle-figure-host {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 12px;
  /* deja sitio para que la llama sobresalga sin recortarse arriba */
  padding-top: 28px;
}

.view-candle.fullscreen .burn-percent {
  font-size: clamp(40px, 7vw, 64px);
  margin-top: 2px;
  line-height: 1;
}
.view-candle.fullscreen #burn-percent-label { margin-top: 2px; }
.view-candle.fullscreen .countdown-approx {
  margin-top: 22px;            /* separa el tiempo de la vela / barra */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                    /* aire entre la hora y "aproximadamente" */
}
.view-candle.fullscreen .countdown-approx #countdown {
  font-size: clamp(18px, 2.6vw, 26px);
}
.view-candle.fullscreen .countdown {
  font-size: clamp(18px, 2.6vw, 26px);
  margin-top: 8px;
}
.view-candle.fullscreen .progress-bar {
  width: min(80vw, 420px);
  margin-top: 12px;
}

/* Botón salir (visible solo en fullscreen) */
.fullscreen-exit {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1010;
  background: rgba(20, 16, 31, 0.85);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  display: none;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
}
.fullscreen-exit::before {
  content: '✕';
  font-size: 14px;
}
.fullscreen-exit:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--ink);
}
body.fullscreen-mode .fullscreen-exit { display: inline-flex; }

/* Toggle "pantalla completa" oculto cuando ya estamos en fullscreen */
.view-candle.fullscreen .fullscreen-toggle { display: none; }

/* En pantalla completa ocultamos los chips de clima y ubicación: ensucian
   la vista inmersiva y se solapaban con la vela. La info sigue disponible
   en la vista normal. */
.view-candle.fullscreen .weather-chip,
.view-candle.fullscreen .weather-coords { display: none; }

.view-info h1 {
  font-size: 32px;
  margin: 0 0 6px;
}
.view-info .lit-by {
  font-size: 14px;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.view-info .petition {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--gold);
  padding: 20px 22px;
  border-radius: 6px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 24px;
}
.view-info .petition::before { content: '“'; color: var(--gold); margin-right: 4px; }
.view-info .petition::after { content: '”'; color: var(--gold); margin-left: 4px; }

.view-info .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 28px;
}
.view-info .meta span { display: flex; align-items: center; gap: 6px; }

.share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.share .btn {
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--sans);
  letter-spacing: 0;
}

/* Compartir el resultado (la "señal") — bloque dentro de la tarjeta */
.result-share {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  text-align: center;
}
.result-share__title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 6px;
}
.result-share__hint {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 auto 16px;
  max-width: 420px;
  line-height: 1.5;
}
.result-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.result-share__actions .btn {
  padding: 11px 20px;
  font-size: 14px;
  font-family: var(--sans);
  letter-spacing: 0;
}
.result-share__wa {
  background: linear-gradient(180deg, #25d366 0%, #1da851 100%);
  border-color: #1da851;
  color: #06210f;
  font-weight: 600;
}
.result-share__wa:hover { filter: brightness(1.06); }

/* Resultado final */
.result-card {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 30px;
  text-align: center;
  animation: result-reveal 0.8s ease-out;
}
@keyframes result-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-card .omen-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.result-card .shape-display {
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
  color: var(--gold);
  filter: drop-shadow(0 0 20px var(--gold-glow));
}
.result-card .shape-display svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.result-card .shape-display svg path:not([fill]),
.result-card .shape-display svg circle:not([fill]),
.result-card .shape-display svg ellipse:not([fill]),
.result-card .shape-display svg rect:not([fill]),
.result-card .shape-display svg polygon:not([fill]),
.result-card .shape-display svg text:not([fill]) {
  fill: currentColor;
}
.result-card h2 {
  font-size: 32px;
  margin: 0 0 16px;
}
.result-card .meaning {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 540px;
  margin: 0 auto;
  font-family: var(--serif);
}

/* Tres lecturas: cera, llama, humo */
.result-card .readings {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  text-align: left;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.result-card .reading {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-left: 3px solid var(--reading-accent, var(--gold-soft));
  border-radius: 8px;
  padding: 16px 18px;
}
.result-card .reading.reading-muy_favorable { --reading-accent: #7be495; }
.result-card .reading.reading-favorable     { --reading-accent: var(--gold); }
.result-card .reading.reading-ambiguo       { --reading-accent: #d9a93b; }
.result-card .reading.reading-advertencia   { --reading-accent: #d97777; }

.result-card .reading-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.result-card .reading-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.result-card .reading-head > div { flex: 1; min-width: 0; }
.result-card .reading-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.result-card .reading h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
}
.result-card .reading-omen {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--reading-accent);
  border: 1px solid var(--reading-accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.result-card .reading p {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
  font-style: italic;
}

.result-card .combined-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-dim);
  text-align: center;
  letter-spacing: 0.02em;
}
.result-card .combined-note strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 16px;
}

/* Nota comunitaria de la lectura de un altar (Punto 2) */
.result-card .reading-communal {
  margin-top: 12px;
  background: rgba(123, 228, 149, 0.08);
  border-color: rgba(123, 228, 149, 0.28);
  color: var(--ink-dim);
  font-style: italic;
}

/* Resultado privado para quien no es el dueño de la vela (Punto 1) */
.result-card--private {
  text-align: center;
}
.result-card .shape-display--veiled {
  font-size: 64px;
  opacity: 0.5;
  margin: 0 auto 8px;
  filter: grayscale(0.3);
}
.result-private-note {
  color: var(--ink-faint);
  max-width: 420px;
  margin: 8px auto 0;
  font-size: 15px;
  line-height: 1.5;
}

/* Pestañas de categorías en "Mis velas" (públicas / privadas / altares) */
.mis-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.mis-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(20, 16, 31, 0.5);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mis-tab:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); }
.mis-tab.is-active {
  background: rgba(212, 175, 55, 0.16);
  border-color: var(--gold);
  color: var(--ink);
}
.mis-tab:disabled { opacity: 0.4; cursor: default; }
.mis-tab__count {
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--gold);
}
.mis-tab-panel[hidden] { display: none; }

/* Sección de lectura de la vela principal en la vista de altar (Punto 2) */
.altar-reading {
  margin: 28px auto 0;
  max-width: 720px;
}
.altar-reading__hint {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  margin: 4px 0 16px;
  letter-spacing: 0.02em;
}

/* Botón "Ver lectura" en las tarjetas de Mis velas / Mis altares */
.mis-velas-reading-btn,
.mis-altar-reading-btn {
  font-size: 12px;
  padding: 5px 12px;
  margin-top: 6px;
}

/* Resultado de la vela — ajustes para móvil (evita que se descuadre) */
@media (max-width: 560px) {
  .container { padding: 20px 16px 64px; }
  .result-card { padding: 24px 16px; }
  .result-card h2 { font-size: 24px; }
  .result-card .meaning { font-size: 16px; }
  .result-card .shape-display { width: 132px; height: 132px; }
  .result-card .readings { gap: 12px; }
  .result-card .reading { padding: 14px; }
  /* La cabecera de cada lectura se reorganiza: título a lo ancho y la
     etiqueta del augurio baja a su propia línea, alineada bajo el título. */
  .result-card .reading-head { flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; }
  .result-card .reading-head > div { flex: 1 1 calc(100% - 34px); }
  .result-card .reading-omen { margin-left: 34px; }
  .view-candle .countdown { font-size: 34px; }
}

/* ── Galería ───────────────────────────────────────────────────────────── */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.gallery-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius);
  padding: 32px 20px 20px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: border-color 0.25s;
  cursor: pointer;
}
.gallery-item:hover { border-color: var(--gold); }
.gallery-item .candle-figure { --cw: 60px; --ch: 100px; flex-shrink: 0; }
.gallery-item .info h3 { margin: 0 0 4px; font-size: 18px; }
.gallery-item .info .by { font-size: 12px; color: var(--ink-faint); margin-bottom: 2px; }
.gallery-item .info .lit-at {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-bottom: 8px;
}
.gallery-item .info .pet {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-item .info .status {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.gallery-item .info .status.finished { color: var(--ink-faint); }

.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-faint);
}

/* ── Loading / Spinner ─────────────────────────────────────────────────── */

.loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-faint);
}
.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(212, 175, 55, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal pago ────────────────────────────────────────────────────────── */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-bg.active { display: flex; }
.modal {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow);
}
.modal h3 { margin: 0 0 12px; font-size: 24px; }
.modal p { color: var(--ink-dim); margin: 0 0 20px; }
.modal .pay-fields { display: grid; gap: 12px; margin-bottom: 22px; }
.modal .pay-fields input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--sans);
  outline: none;
}
.modal .pay-fields input:focus { border-color: var(--gold); }
.modal .actions { display: flex; gap: 10px; }
.modal .actions .btn { flex: 1; }

.note {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 14px;
  letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────────────────────
   RINCÓN ESPIRITUAL — Landing con dos accesos principales
   ────────────────────────────────────────────────────────────────────────── */

.rincon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 20px;
}
.rincon-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .rincon-grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .rincon-grid,
  .rincon-grid--three { grid-template-columns: 1fr; gap: 24px; }
}

.rincon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius);
  transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.rincon-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12) 0%, transparent 60%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.3s;
}
.rincon-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  color: var(--ink);
}
.rincon-card:hover::before { opacity: 1; }

.rincon-card__icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  color: var(--gold);
  filter: drop-shadow(0 0 18px var(--gold-glow));
}
.rincon-card__icon svg { width: 100%; height: 100%; }

.rincon-card h2 {
  font-size: 30px;
  margin: 0 0 14px;
  color: var(--ink);
}
.rincon-card p {
  color: var(--ink-dim);
  line-height: 1.7;
  font-size: 15px;
  margin: 0 0 26px;
  max-width: 380px;
}
.rincon-card__badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.rincon-card__cta {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.04em;
  padding: 12px 24px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.rincon-card:hover .rincon-card__cta {
  background: var(--gold);
  color: #1a1408;
}

.rincon-secondary {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.rincon-secondary__item {
  display: inline-flex;
  flex-direction: column;
  padding: 16px 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  color: var(--ink-dim);
}
.rincon-secondary__item:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
  color: var(--ink);
}
.rincon-secondary__label {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.rincon-secondary__hint {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   TAROT — Catálogo de tiradas
   ────────────────────────────────────────────────────────────────────────── */

.spread-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.spread-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  color: var(--ink);
}
.spread-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.spread-card__preview {
  width: 100%;
  height: 130px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spread-card__layout {
  position: relative;
  width: 220px;
  height: 110px;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08), transparent 70%);
}
.mini-card {
  position: absolute;
  width: 18px;
  height: 28px;
  /* Pergamino crema con rombo central rojo Marsella, imitando el
     reverso real del Solesio a escala diminuta. */
  background:
    radial-gradient(circle at 50% 50%, rgba(196, 50, 54, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #f4e8c8 0%, #e6d4a3 100%);
  border: 0.8px solid #1f1714;
  border-radius: 1.5px;
  transform: translate(-50%, -50%);
  box-shadow:
    0 1px 1.5px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2);
}
.mini-card::before {
  /* Marco interno fino negro, imitando el doble filete de la carta real. */
  content: '';
  position: absolute;
  inset: 1.5px;
  border: 0.4px solid rgba(31, 23, 20, 0.5);
  border-radius: 0.6px;
  pointer-events: none;
}
.mini-card::after {
  /* Rombo central rojo/azul: motivo principal del reverso Marsella. */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 6px;
  margin: -3px -2px;
  background: #c43236;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 0 0.3px #1f1714;
}
.mini-card.rotated { transform: translate(-50%, -50%) rotate(90deg); }

/* Contenedor para reverso real (Solesio) usado como mini-preview del layout
   tanto en el catálogo de tiradas como en el formulario de consulta. Sustituye
   al `.mini-card` puro CSS para que el preview muestre el mismo reverso que
   verá el usuario cuando las cartas se reparten. */
.layout-back {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.layout-back.rotated {
  transform: translate(-50%, -50%) rotate(90deg);
}
.layout-back .tarot-card {
  box-shadow:
    0 0.5px 0.5px rgba(0, 0, 0, 0.4),
    0 1.5px 3px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
.layout-back--big .tarot-card {
  border-radius: 3px;
  box-shadow:
    0 1px 1.5px rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.35);
}

.spread-card h3 {
  margin: 0 0 8px;
  font-size: 21px;
  color: var(--ink);
}
.spread-card__desc {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.spread-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.spread-card__count {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.spread-card__price {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold);
}

/* ──────────────────────────────────────────────────────────────────────────
   TAROT — Preview grande (en formulario de tirada)
   ────────────────────────────────────────────────────────────────────────── */

.spread-preview-big {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}
.spread-preview-big__board {
  position: relative;
  width: 100%;
  height: 260px;
}
.mini-card.big {
  width: 52px;
  height: 86px;
  border-radius: 4px;
  /* Sobrescribimos el rombo rojo central del mini-card pequeño para que
     a este tamaño tenga más presencia y no compita con la cara cremosa. */
}
.mini-card.big::before {
  inset: 3px;
  border-radius: 2px;
  border-width: 0.7px;
}
.mini-card.big::after {
  width: 10px;
  height: 16px;
  margin: -8px -5px;
  box-shadow: 0 0 0 0.4px #1f1714;
}

.positions-detail {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.12);
}
.positions-detail summary {
  cursor: pointer;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.positions-detail ol {
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
}
.positions-detail ol li { margin-bottom: 8px; }
.positions-detail strong { color: var(--ink); }

/* Select adaptado a la estética */
.select-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1 L6 6 L11 1' stroke='%23d4af37' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.select-input:focus { border-color: var(--gold); }
.select-input option { background: var(--bg-2); color: var(--ink); }

/* ──────────────────────────────────────────────────────────────────────────
   TAROT — Carta (reverso y frente)
   ────────────────────────────────────────────────────────────────────────── */

.tarot-card {
  position: relative;
  width: var(--card-w, 120px);
  height: var(--card-h, 200px);
  border-radius: 4px;
  overflow: hidden;
  background: #f4e8c8;
  /* Sombras estilo grabado antiguo: definición cercana + anclaje al suelo,
     sin halo dorado para no romper la paleta plana del Marsella. */
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.30),
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 0 0.5px rgba(31, 23, 20, 0.45);
}
.tarot-card::after {
  /* Sutil veteado de pergamino — diagonal apenas perceptible. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 240, 200, 0) 30%,
    rgba(139, 94, 60, 0.04) 50%,
    rgba(255, 240, 200, 0) 70%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.tarot-card__inner {
  position: absolute;
  inset: 0;
  display: block;
}
.tarot-card__inner svg { width: 100%; height: 100%; display: block; }

/* ──────────────────────────────────────────────────────────────────────────
   TAROT — Ritual (la experiencia de la tirada)
   ────────────────────────────────────────────────────────────────────────── */

.ritual {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 0 60px;
}
.ritual__title {
  text-align: center;
}
.ritual__title h1 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 8px;
  background: linear-gradient(180deg, var(--ink) 30%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ritual__step {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold);
  margin: 0;
  letter-spacing: 0.03em;
  min-height: 28px;
  transition: opacity 0.3s;
}

.ritual__board {
  position: relative;
  min-height: 600px;
  background:
    radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06), transparent 65%),
    rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: var(--radius);
  padding: 20px;
  overflow: visible;
}
@media (max-width: 720px) {
  .ritual__board { min-height: 540px; padding: 12px; }
}

/* Slots de destino (posiciones donde irán las cartas elegidas) */
.ritual-slot {
  position: absolute;
  width: 90px;
  height: 150px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px;
  pointer-events: none;
  transition: border-color 0.4s, background 0.4s;
}
.ritual-slot.rotated {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ritual-slot.filled {
  border-color: transparent;
  background: transparent;
}
.ritual-slot__label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.ritual-slot.rotated .ritual-slot__label {
  transform: translateX(-50%) rotate(-90deg);
  bottom: 50%;
}
.ritual-slot__cardname {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
  animation: result-reveal 0.5s ease-out;
}
.ritual-slot.rotated .ritual-slot__cardname {
  top: 50%;
  transform: translateX(-50%) rotate(-90deg);
}

/* Baraja apilada y barajeo */
.ritual-deck {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 150px;
}
.ritual-deck__card {
  position: absolute;
  inset: 0;
  /* Cada carta usa --ix/--iy/--ir como posición de "stack inicial". El
     barajeo desplaza temporalmente la carta y al terminar vuelve aquí. */
  transform: translate(var(--ix, 0), var(--iy, 0)) rotate(var(--ir, 0));
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Riffle shuffle: dos cortes (corte+entrelazado) en 2.6 s. Cada carta
   recibe --side (+1/-1) y --order (0..N) para que el desplazamiento
   y el momento difieran entre cartas. Eso da el efecto de manojo de
   cartas que se separan, se entrelazan y vuelven a apilarse. */
.ritual-deck.shuffling .ritual-deck__card {
  animation: riffle-shuffle 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 both;
  animation-delay: calc(var(--order, 0) * 0.025s);
}
@keyframes riffle-shuffle {
  0% {
    transform: translate(var(--ix, 0), var(--iy, 0)) rotate(var(--ir, 0));
  }
  15% {
    /* Primer corte: cada mitad de la baraja se separa */
    transform:
      translateX(calc(var(--side, 1) * 90px))
      translateY(-18px)
      rotate(calc(var(--side, 1) * 16deg));
  }
  35% {
    /* Entrelazado: cartas vuelven al centro, ligeramente alzadas */
    transform: translate(0, -34px) rotate(0deg);
  }
  55% {
    /* Segundo corte hacia el lado contrario */
    transform:
      translateX(calc(var(--side, 1) * -90px))
      translateY(-14px)
      rotate(calc(var(--side, 1) * -14deg));
  }
  78% {
    /* Vuelta al centro */
    transform: translate(0, -28px) rotate(0deg);
  }
  100% {
    /* Asentamiento final en la pila inicial */
    transform: translate(var(--ix, 0), var(--iy, 0)) rotate(var(--ir, 0));
  }
}
.ritual-deck.settled .ritual-deck__card {
  transform: translate(var(--ix, 0), var(--iy, 0)) rotate(var(--ir, 0));
}

/* Abanico de cartas seleccionables */
.ritual-fan {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  max-width: 96%;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
  animation: fan-reveal 0.8s ease-out;
}
@keyframes fan-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ritual-fan__card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90px;
  height: 150px;
  margin-left: -45px;
  transform-origin: 50% 130%;
  transform: rotate(var(--angle, 0deg));
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  will-change: transform;
}
.ritual-fan__card:hover:not(.picked) {
  transform: rotate(var(--angle, 0deg)) translateY(-18px) scale(1.05);
  filter: drop-shadow(0 0 20px var(--gold-glow));
}
.ritual-fan.done .ritual-fan__card:not(.picked) {
  opacity: 0.25;
  pointer-events: none;
  filter: blur(0.5px);
}

/* Carta que vuela a su posición */
.ritual-fan__card.picked {
  --dx: 0px;
  --dy: 0px;
  --final-angle: 0deg;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1), filter 0.4s;
  transform:
    translate(var(--dx), var(--dy))
    rotate(var(--final-angle));
  z-index: 5;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7));
}

/* Volteo (flip 3D) */
.ritual-fan__card.flipping {
  transition: transform 0.45s ease-in;
  transform:
    translate(var(--dx), var(--dy))
    rotate(var(--final-angle))
    rotateY(90deg);
}
.ritual-fan__card.flipped {
  transition: transform 0.45s ease-out;
  transform:
    translate(var(--dx), var(--dy))
    rotate(var(--final-angle))
    rotateY(0deg);
}

/* ──────────────────────────────────────────────────────────────────────────
   TAROT — Página de resultado
   ────────────────────────────────────────────────────────────────────────── */

.tarot-result {
  padding: 30px 0 60px;
}
.tarot-result__head {
  text-align: center;
  margin-bottom: 40px;
}
.tarot-result__kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.tarot-result__head h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 8px;
}
.tarot-result__area {
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-bottom: 22px;
  font-style: italic;
}

.tarot-result__board {
  background:
    radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08), transparent 65%),
    rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius);
  padding: 36px 24px;
  margin-bottom: 60px;
}
.tarot-result__board-inner {
  position: relative;
  width: 100%;
  height: 480px;
  margin: 0 auto;
}
.result-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}
.result-slot.rotated {
  transform: translate(-50%, -50%) rotate(90deg);
}
.result-slot__card {
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7));
  animation: result-reveal 0.6s ease-out;
}
.result-slot__label {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.result-slot.rotated .result-slot__label {
  transform: rotate(-90deg);
  margin-top: 0;
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
}

@media (max-width: 720px) {
  .tarot-result__board-inner { height: 380px; }
  .result-slot__card .tarot-card { --card-w: 64px; --card-h: 106px; }
  .result-slot__card .tarot-card__inner svg { width: 100%; height: 100%; }
}

/* Lectura detallada por carta */
.tarot-result__readings .reading-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
  padding: 28px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius);
}
@media (max-width: 720px) {
  .tarot-result__readings .reading-card {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
}
.reading-card__visual {
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.reading-card__pos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  justify-content: flex-start;
}
@media (max-width: 720px) {
  .reading-card__pos { justify-content: center; }
}
.reading-card__pos-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 14px;
}
.reading-card__pos-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reading-card__text h3 {
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--gold);
}
.reading-card__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.reading-card__general {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 18px;
}
.reading-card__area-block {
  padding: 16px 18px;
  background: rgba(212, 175, 55, 0.06);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  margin-bottom: 14px;
}
.reading-card__area-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.reading-card__area-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.reading-card__pos-meaning {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Voz del tarotista (apertura / cierre generados por IA) */
.tarot-result__voice {
  margin: 32px 0;
  padding: 28px 32px 28px 38px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.04));
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  position: relative;
  animation: result-reveal 0.6s ease-out;
}
.tarot-result__voice::before {
  content: '"';
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
}
.tarot-result__voice-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.tarot-result__voice-text {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  font-style: italic;
  position: relative;
  z-index: 1;
  white-space: pre-line;
}

.tarot-result__voice--pending {
  text-align: center;
}

.tarot-result__voice--error {
  background: linear-gradient(180deg, rgba(217, 119, 119, 0.10), rgba(217, 119, 119, 0.03));
  border-color: rgba(217, 119, 119, 0.4);
  border-left-color: var(--danger);
}
.tarot-result__voice--error .tarot-result__voice-kicker {
  color: var(--danger);
}
.tarot-result__voice--error em {
  color: var(--ink-dim);
  font-style: normal;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}
.tarot-result__voice-retry {
  margin-left: 12px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tarot-result__voice-retry:hover {
  background: var(--gold);
  color: #1a1408;
}
.tarot-result__voice-retry:disabled { opacity: 0.5; cursor: not-allowed; }
.tarot-result__voice-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 15px;
}
.tarot-result__voice-loading .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: voice-dot 1.4s infinite ease-in-out;
  opacity: 0.4;
}
.tarot-result__voice-loading .dot:nth-child(2) { animation-delay: 0.2s; }
.tarot-result__voice-loading .dot:nth-child(3) { animation-delay: 0.4s; }
.tarot-result__voice-loading-text {
  margin-left: 8px;
}
@keyframes voice-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

.tarot-result__share {
  text-align: center;
  margin-top: 50px;
  padding: 32px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius);
}
.tarot-result__share-title {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
  font-weight: 600;
}
.tarot-result__share .share {
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   PÉNDULO — Aviso desktop
   ────────────────────────────────────────────────────────────────────────── */

.desktop-warning {
  max-width: 520px;
  margin: 30px auto 60px;
  text-align: center;
  padding: 40px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius);
}
.desktop-warning__icon {
  width: 72px;
  height: 108px;
  margin: 0 auto 24px;
  color: var(--gold);
  filter: drop-shadow(0 0 12px var(--gold-glow));
}
.desktop-warning__icon svg { width: 100%; height: 100%; }
.desktop-warning h2 {
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--ink);
}
.desktop-warning p {
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0 0 16px;
}
.desktop-warning__url {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 18px;
}
.desktop-warning__url code {
  flex: 1;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.btn.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────────────────
   PÉNDULO — Formulario
   ────────────────────────────────────────────────────────────────────────── */

.pendulo-intro {
  text-align: center;
  margin: 30px 0 28px;
}
.pendulo-intro h1 {
  font-size: clamp(34px, 8vw, 48px);
  margin: 0 0 14px;
  background: linear-gradient(180deg, var(--ink) 30%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pendulo-intro__lede {
  max-width: 480px;
  margin: 0 auto;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.65;
}

.pendulo-form { max-width: 540px; margin: 0 auto; }

/* ──────────────────────────────────────────────────────────────────────────
   PÉNDULO — Permiso del sensor
   ────────────────────────────────────────────────────────────────────────── */

.permission-card {
  max-width: 440px;
  margin: 50px auto;
  padding: 40px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius);
}
.permission-card__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  color: var(--gold);
  filter: drop-shadow(0 0 10px var(--gold-glow));
  animation: spin 8s linear infinite;
}
.permission-card__icon svg { width: 100%; height: 100%; }
.permission-card h2 {
  font-size: 24px;
  margin: 0 0 12px;
}
.permission-card p {
  color: var(--ink-dim);
  margin: 0 0 24px;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────────────────────
   PÉNDULO — Escenario del péndulo (la experiencia interactiva)
   ────────────────────────────────────────────────────────────────────────── */

.pendulo-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 30px;
  user-select: none;
  -webkit-user-select: none;
}
.pendulo-stage__head {
  text-align: center;
  margin-bottom: 22px;
  padding: 0 16px;
}
.pendulo-stage__question {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 12px;
  max-width: 520px;
}
.pendulo-stage__hint {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0;
  transition: color 0.4s;
}

.pendulo-stage__board {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 60vh;
  min-height: 460px;
  max-height: 640px;
  background:
    radial-gradient(ellipse at center top, rgba(212, 175, 55, 0.08), transparent 70%),
    rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Etiquetas SÍ y NO a los lados */
.pendulo-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(56px, 14vw, 88px);
  letter-spacing: 0.08em;
  color: rgba(245, 236, 214, 0.15);
  transition: color 0.6s, text-shadow 0.6s, transform 0.6s;
  pointer-events: none;
}
.pendulo-side--no { left: 14px; }
.pendulo-side--si { right: 14px; }
.pendulo-side span { display: block; }

/* Cuando el péndulo se decanta, resaltamos el ganador */
.pendulo-stage__board--si .pendulo-side--si,
.pendulo-stage__board--no .pendulo-side--no {
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.65);
  transform: translateY(-50%) scale(1.12);
  animation: pendulo-winner-pulse 1.2s ease-out 0.2s 1 both;
}
@keyframes pendulo-winner-pulse {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Anclaje (punto del que cuelga el péndulo) */
.pendulo-anchor {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: radial-gradient(circle at 35% 35%, #fff5d6 0%, #d4af37 55%, #785a18 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.5),
    0 0 14px rgba(212, 175, 55, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.pendulo-anchor::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4) 100%);
  border-radius: 50%;
}

/* Péndulo: contenedor de altura completa que pivota desde el anclaje.
   width 0 sirve como eje; los hijos (cuerda y peso) están centrados. */
.pendulo {
  position: absolute;
  top: 45px;
  left: 50%;
  width: 0;
  height: calc(60vh - 100px);
  max-height: 540px;
  transform-origin: top center;
  transform: rotate(0deg);
  transition: transform 0.12s cubic-bezier(0.4, 1.2, 0.55, 1);
  will-change: transform;
  z-index: 3;
}
.pendulo-rope {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: calc(100% - 36px);
  background: linear-gradient(180deg, #c9bfa6 0%, #8a8270 100%);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
.pendulo-weight {
  position: absolute;
  bottom: 0;
  left: -28px;
  width: 56px;
  height: 56px;
  background:
    radial-gradient(circle at 35% 30%, #fff5d6 0%, #f0d77a 22%, #d4af37 55%, #8b6914 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, 0.45),
    inset 0 4px 8px rgba(255, 245, 214, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(212, 175, 55, 0.45);
}
.pendulo-weight__shine {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, rgba(255, 245, 214, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(1px);
}

.pendulo.deciding {
  /* Cuando se decide, la transición es más lenta y elástica */
}

/* Barra de progreso (cuánto se ha decantado el péndulo) */
.pendulo-progress {
  width: min(380px, 80%);
  height: 3px;
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.pendulo-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  width: 0%;
  transition: width 0.2s ease-out;
}

/* ──────────────────────────────────────────────────────────────────────────
   PÉNDULO — Página de resultado
   ────────────────────────────────────────────────────────────────────────── */

.pendulo-result {
  padding: 30px 0 60px;
}
.pendulo-result__head {
  text-align: center;
  margin-bottom: 30px;
}
.pendulo-result__kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.pendulo-result__head h1 {
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 18px;
}

.pendulo-answer {
  position: relative;
  margin: 30px auto;
  padding: 36px 24px 30px;
  max-width: 520px;
  text-align: center;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  animation: result-reveal 0.8s ease-out;
}
.pendulo-answer__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.pendulo-answer__big {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(72px, 18vw, 120px);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff5d6 0%, var(--gold) 60%, #8b6914 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin: 0;
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.25);
}
.pendulo-answer__icon {
  width: 120px;
  height: 140px;
  margin: 16px auto 0;
}
.pendulo-answer__icon svg { width: 100%; height: 100%; }

.pendulo-answer--si {
  border-color: #b8e0c4;
  background: linear-gradient(180deg, rgba(123, 200, 138, 0.12), rgba(123, 200, 138, 0.02));
}
.pendulo-answer--si .pendulo-answer__big {
  background: linear-gradient(180deg, #d6f0db 0%, #7be495 60%, #3a8a4e 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.pendulo-answer--no {
  border-color: #d97777;
  background: linear-gradient(180deg, rgba(217, 119, 119, 0.12), rgba(217, 119, 119, 0.02));
}
.pendulo-answer--no .pendulo-answer__big {
  background: linear-gradient(180deg, #ffd1d1 0%, #d97777 60%, #8a3939 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Cuando viene del flujo de consulta (parámetro ?new=1), un pequeño
   destello adicional para celebrar la respuesta */
.pendulo-answer[data-fresh="1"] {
  animation: result-reveal 0.6s ease-out, pendulo-fresh-glow 1.6s ease-out 0.3s 1;
}
@keyframes pendulo-fresh-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50%  { box-shadow: 0 0 0 16px rgba(212, 175, 55, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: 40px 20px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(212, 175, 55, 0.08);
  margin-top: 80px;
}

/* ──────────────────────────────────────────────────────────────────────────
   AUTENTICACIÓN — área de usuario en la cabecera + modal de acceso
   ────────────────────────────────────────────────────────────────────────── */

.site-header { flex-wrap: wrap; }

.auth-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.btn-login {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg-0);
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: filter 0.2s, transform 0.1s;
}
.btn-login:hover { filter: brightness(1.1); }
.btn-login:active { transform: scale(0.97); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px 5px 5px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.05);
}
.user-chip__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.user-chip__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  color: var(--bg-0);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
}
.user-chip__name {
  font-size: 14px;
  color: var(--ink);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip__logout {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.user-chip__logout:hover { color: var(--gold); border-color: var(--gold); }

.modal--login { position: relative; }
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: transparent;
  color: var(--ink-dim);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.modal__close:hover { color: var(--gold); border-color: var(--gold); }
.modal__mark {
  font-size: 34px;
  color: var(--gold);
  filter: drop-shadow(0 0 10px var(--gold-glow));
  margin-bottom: 6px;
}
.google-btn-host {
  display: flex;
  justify-content: center;
  min-height: 48px;
  margin: 22px 0 6px;
}
.login-msg {
  color: var(--danger);
  font-size: 14px;
  margin: 8px 0 4px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .user-chip__name { max-width: 80px; font-size: 13px; }
  .btn-login { font-size: 10.5px; padding: 8px 13px; }
}

/* Nota bajo los formularios y bajo el bloque de compartir */
.form-note {
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}
.share-note {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 22px 0 12px;
  line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────────────────────
   MIS VELAS
   ────────────────────────────────────────────────────────────────────────── */

.mis-velas-gate { max-width: 480px; margin: 0 auto; }
.mis-velas-gate .construccion__icon { color: var(--gold); margin-bottom: 4px; }
.mis-velas-count {
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
}
.mis-velas-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

/* ──────────────────────────────────────────────────────────────────────────
   PÁGINA "EN CONSTRUCCIÓN"
   ────────────────────────────────────────────────────────────────────────── */

.construccion {
  max-width: 540px;
  margin: 40px auto;
  text-align: center;
  padding: 50px 30px;
  background: linear-gradient(180deg, rgba(27, 21, 48, 0.6), rgba(20, 16, 31, 0.6));
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius);
}
.construccion__icon {
  color: var(--gold);
  width: 90px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 12px var(--gold-glow));
}
.construccion__icon svg { width: 100%; height: auto; }
.construccion__badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.construccion h1 { font-size: 28px; margin: 0 0 14px; }
.construccion p {
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 auto 12px;
  max-width: 420px;
}
.construccion__hint { color: var(--ink-faint); font-size: 14px; margin-top: 20px; }
.construccion__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Tarjeta del Rincón marcada como "próximamente" */
.rincon-card--soon { opacity: 0.72; }
.rincon-card--soon .rincon-card__cta {
  color: var(--ink-faint);
  border-color: rgba(212, 175, 55, 0.18);
}
.rincon-card--soon:hover { opacity: 0.92; }

/* ──────────────────────────────────────────────────────────────────────────
   CÓMO FUNCIONA (manual / FAQ)
   Tipografía y aire generoso, sin sobrecargar. Reutiliza .hero, .container
   y la paleta dorado/marfil del resto del sitio.
   ────────────────────────────────────────────────────────────────────────── */

.manual-section {
  padding-top: 48px;
  padding-bottom: 48px;
}
.manual-section__head {
  max-width: 720px;
  margin: 0 0 32px;
}
.manual-section__kicker {
  display: inline-block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.manual-section__head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--ink);
}
.manual-section__head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-faint);
}
.manual-soon {
  display: inline-block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-left: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 999px;
  color: var(--gold);
  vertical-align: middle;
}

.manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.manual-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.manual-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Hero: kicker + fila de botones (home y otras portadas) */
.hero-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 14px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

/* Rejilla de los 12 colores en la página de ayuda */
.help-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.help-type {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
  border: 1px solid rgba(212, 175, 55, 0.12);
}
.help-type__candle {
  flex: 0 0 auto;
  width: 48px;
  display: flex;
  justify-content: center;
}
.help-type__body { min-width: 0; }
.help-type__body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--ink);
}
.help-type__meta {
  font-size: 12.5px;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 8px;
}
.help-type__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.manual-step,
.manual-spread {
  position: relative;
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
  border: 1px solid rgba(212, 175, 55, 0.12);
}
.manual-step__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
}
.manual-step h3,
.manual-spread h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  margin: 0 0 10px;
  padding-right: 32px;
  color: var(--ink);
}
.manual-step p,
.manual-spread p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-faint);
}

.manual-flow {
  margin-top: 36px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(212,175,55,0.04), rgba(0,0,0,0.15));
  border-left: 3px solid var(--gold);
}
.manual-flow h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--ink);
}
.manual-flow ol {
  margin: 0;
  padding-left: 22px;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1.75;
}
.manual-flow ol li {
  margin-bottom: 10px;
}
.manual-flow ol li::marker {
  color: var(--gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}
.manual-flow ol li strong {
  color: var(--ink);
}

.manual-note {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.12);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-faint);
}
.manual-note strong { color: var(--gold); }

.manual-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-faq details {
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.15));
  overflow: hidden;
  transition: border-color 0.2s;
}
.manual-faq details[open] {
  border-color: rgba(212, 175, 55, 0.28);
}
.manual-faq summary {
  cursor: pointer;
  padding: 16px 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.manual-faq summary::-webkit-details-marker { display: none; }
.manual-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.2s;
}
.manual-faq details[open] summary::after {
  content: "−";
}
.manual-faq details p {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-faint);
}
.manual-faq details p strong { color: var(--ink); }

.manual-cta {
  text-align: center;
  padding-top: 48px;
  padding-bottom: 72px;
}
.manual-cta h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  margin: 0 0 24px;
  color: var(--ink);
}
.manual-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .manual-section { padding-top: 32px; padding-bottom: 32px; }
  .manual-section__head h2 { font-size: 26px; }
  .manual-flow { padding: 22px; }
  .manual-faq summary { font-size: 16px; padding: 14px 18px; padding-right: 42px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ATMÓSFERA DE LA VELA
   La vela "siente" el clima del lugar donde la encendieron: sol, nubes,
   lluvia, tormenta, nieve, niebla, viento. Cada estado activa unas capas
   visuales sutiles detrás de la vela y modula la llama y el humo.
   Todas las animaciones son pure CSS para no comer batería.
   ────────────────────────────────────────────────────────────────────────── */

.candle-atmosphere {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px;            /* ceñida a la vela */
  height: 360px;
  margin: 0 auto;
  padding: 0;
  background: transparent; /* NUNCA crear caja visible — la vela flota */
  border: none;
  border-radius: 0;
  isolation: isolate;
  overflow: visible;       /* los efectos se desvanecen por máscara, no por corte */
  /* Variables modulables por JS según el clima actual.
     Las usan los keyframes de la llama y el humo para reaccionar al
     viento (dirección + fuerza), la lluvia, la humedad, etc. */
  --flame-lean: 0deg;           /* inclinación base de la llama (signo = dirección) */
  --flame-sway-amp: 1.5deg;     /* amplitud del balanceo */
  --flame-sway-period: 3.2s;    /* periodo del balanceo */
  --flame-opacity: 1;           /* opacidad global de la llama */
  --flame-color-shift: 0deg;    /* viraje cromático (más naranja con perturbación) */
  --smoke-drift-x: 0;           /* deriva horizontal (-1..+1) */
  --smoke-density: 0.55;        /* opacidad pico de cada voluta (0..1) */
  --smoke-spread: 1;            /* escala final del humo */
  --smoke-period: 4s;           /* tiempo de ascenso por voluta */
  --sky-veil: rgba(0, 0, 0, 0);
}
.candle-atmosphere > #candle-figure-host {
  position: relative;
  z-index: 5;
}

@media (max-width: 720px) {
  .candle-atmosphere { width: 220px; height: 330px; padding: 0; }
}

.atmosphere-layer {
  position: absolute;
  /* Las capas se extienden bien más allá del contenedor para que el
     efecto cubra un área amplia, pero la máscara las apaga muy pronto
     hacia los bordes. El resultado: el efecto es perceptible en un
     halo pequeño y gradual, sin ningún borde detectable. */
  top: -60px;
  left: -70px;
  right: -70px;
  bottom: -60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease;
  /* mix-blend-mode: screen → las capas SUMAN luz sobre el fondo de la
     página en lugar de taparlo. Así nunca se crea una "zona de color"
     diferente al fondo: solo aparecen los puntos brillantes (sol,
     gotas, etc.). Es como la luz real en la atmósfera. */
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 50% 60% at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0) 100%);
}
.atmosphere-veil {
  z-index: 4;
  background: var(--sky-veil);
  transition: background 1.5s ease;
  /* El veil sí necesita oscurecer (es lo opuesto al screen) → usa
     multiply para sumarse al fondo en plan más oscuro sin marcar caja. */
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.50) 50%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.50) 50%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0) 100%);
}

/* ── Sol / Luna ───────────────────────────────────────────────────────── */
/*
 * El cielo se manifiesta con un astro central según hora y condición:
 *   día + (clear|cloudy)   → sol brillante
 *   noche + (clear|cloudy) → luna pálida
 * El disco usa ::after, el halo usa box-shadow (es la luz emitida) y
 * sigue siendo redondo perfecto — ningún rectángulo posible.
 *
 * La capa del astro NO usa la máscara apretada de los demás efectos:
 * el sol y la luna deben verse nítidos. La forma circular del disco y
 * el box-shadow ya garantizan que no se forme rectángulo.
 */
.atmosphere-sun {
  background: transparent;
  -webkit-mask-image: none;
          mask-image: none;
}
.atmosphere-sun::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 14%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  /* Por defecto sol — la luna sobrescribe estos colores en su selector */
  background: radial-gradient(circle,
    #fff7c8 0%,
    #ffd968 38%,
    #ffae26 72%,
    rgba(255, 174, 38, 0) 100%);
  box-shadow:
    0 0 70px 24px rgba(255, 210, 110, 0.55),
    0 0 36px 10px rgba(255, 195, 80, 0.50),
    0 0 14px 4px rgba(255, 230, 150, 0.65);
  animation: atm-sun-pulse 5s ease-in-out infinite;
}

/* DÍA: sol visible con cielo despejado o algo nublado */
.candle-atmosphere[data-condition="clear"][data-night="false"] .atmosphere-sun,
.candle-atmosphere[data-condition="cloudy"][data-night="false"] .atmosphere-sun { opacity: 1; }
.candle-atmosphere[data-condition="cloudy"][data-night="false"] .atmosphere-sun::after {
  /* Sol más velado tras nubes */
  opacity: 0.65;
  filter: blur(1.5px);
}

/* NOCHE: luna en lugar de sol — mismo soporte, colores fríos */
.candle-atmosphere[data-condition="clear"][data-night="true"] .atmosphere-sun,
.candle-atmosphere[data-condition="cloudy"][data-night="true"] .atmosphere-sun { opacity: 1; }
.candle-atmosphere[data-night="true"] .atmosphere-sun::after {
  width: 76px;
  height: 76px;
  background: radial-gradient(circle,
    #fbfcff 0%,
    #e8ecf6 45%,
    #c8d0e2 80%,
    rgba(200, 208, 226, 0) 100%);
  /* Pequeñas sombras grises que sugieren cráteres */
  background-image:
    radial-gradient(circle at 60% 38%, rgba(180,188,210,0.25) 0%, transparent 18%),
    radial-gradient(circle at 35% 60%, rgba(180,188,210,0.20) 0%, transparent 14%),
    radial-gradient(circle at 70% 70%, rgba(180,188,210,0.18) 0%, transparent 12%),
    radial-gradient(circle, #fbfcff 0%, #e8ecf6 45%, #c8d0e2 80%, rgba(200,208,226,0) 100%);
  box-shadow:
    0 0 55px 18px rgba(220, 230, 255, 0.42),
    0 0 28px 8px rgba(200, 215, 245, 0.38),
    0 0 12px 3px rgba(240, 245, 255, 0.55);
  animation: atm-moon-pulse 9s ease-in-out infinite;
}
.candle-atmosphere[data-condition="cloudy"][data-night="true"] .atmosphere-sun::after {
  opacity: 0.65;
  filter: blur(1.5px);
}

@keyframes atm-sun-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.93; }
}
@keyframes atm-moon-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.03); opacity: 1; }
}

/* ── Cielo nocturno con estrellas ─────────────────────────────────────── */
.atmosphere-stars {
  background-image:
    radial-gradient(2px   2px   at 20% 12%, #ffffff 70%, transparent 100%),
    radial-gradient(1.4px 1.4px at 70% 22%, #fffae0 70%, transparent 100%),
    radial-gradient(2.2px 2.2px at 45% 38%, #ffeec0 70%, transparent 100%),
    radial-gradient(1.4px 1.4px at 85% 58%, #ffffff 70%, transparent 100%),
    radial-gradient(1.6px 1.6px at 30% 68%, #fffae0 70%, transparent 100%),
    radial-gradient(2.4px 2.4px at 60% 78%, #ffeec0 70%, transparent 100%),
    radial-gradient(1.4px 1.4px at 12% 84%, #ffffff 70%, transparent 100%),
    radial-gradient(1.6px 1.6px at 90% 88%, #fffae0 70%, transparent 100%),
    radial-gradient(1.2px 1.2px at 55% 18%, #ffffff 70%, transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 50%, #fffae0 70%, transparent 100%);
  filter: drop-shadow(0 0 2px rgba(255, 245, 200, 0.7));
  animation: atm-stars-twinkle 5s ease-in-out infinite;
  /* Sin la máscara apretada — las estrellas deben verse en todo el cielo */
  -webkit-mask-image: none;
          mask-image: none;
}
.candle-atmosphere[data-night="true"][data-condition="clear"]  .atmosphere-stars { opacity: 1; }
.candle-atmosphere[data-night="true"][data-condition="cloudy"] .atmosphere-stars { opacity: 0.55; }
@keyframes atm-stars-twinkle {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 2px rgba(255, 245, 200, 0.6)); }
  50%      { filter: brightness(1.4) drop-shadow(0 0 4px rgba(255, 245, 200, 0.9)); }
}

/* ── Nubes ────────────────────────────────────────────────────────────── */
.atmosphere-clouds {
  background-image:
    radial-gradient(ellipse 160px 50px at 18% 18%, rgba(245, 245, 252, 0.85), rgba(245, 245, 252, 0.30) 50%, transparent 75%),
    radial-gradient(ellipse 120px 38px at 78% 12%, rgba(240, 240, 248, 0.75), rgba(240, 240, 248, 0.25) 50%, transparent 75%),
    radial-gradient(ellipse 180px 55px at 50% 28%, rgba(250, 250, 255, 0.65), rgba(250, 250, 255, 0.20) 50%, transparent 75%);
  background-size: 360px 110px, 280px 90px, 420px 120px;
  background-repeat: repeat-x;
  background-position: 0 0, 0 0, 0 0;
  animation: atm-cloud-drift 60s linear infinite;
}
.candle-atmosphere[data-condition="cloudy"]  .atmosphere-clouds { opacity: 1; }
.candle-atmosphere[data-condition="overcast"] .atmosphere-clouds { opacity: 1; filter: brightness(0.7); }
.candle-atmosphere[data-condition^="rain"]    .atmosphere-clouds { opacity: 1; filter: brightness(0.55) hue-rotate(-10deg); }
.candle-atmosphere[data-condition="storm"]    .atmosphere-clouds { opacity: 1; filter: brightness(0.35) hue-rotate(-15deg); }
.candle-atmosphere[data-condition^="snow"]    .atmosphere-clouds { opacity: 1; filter: brightness(0.9); }
@keyframes atm-cloud-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -720px 0, -560px 0, -840px 0; }
}
@keyframes atm-cloud-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -560px 0, -440px 0, -640px 0; }
}

/* ── Lluvia — gotas verticales, densidad sutil ────────────────────────── */
/*
 * Tres capas de gotitas elípticas, cada una con un tile distinto.
 * Los tiles son grandes a propósito (más espacio entre gotas → no parece
 * que vaya a apagar la vela). La opacidad de cada gota es media, y cada
 * nivel de lluvia ajusta la opacidad global de la capa.
 */
.atmosphere-rain {
  background-image:
    radial-gradient(ellipse 0.8px 7px at 50% 25%,
      rgba(230, 240, 255, 0.85) 0%,
      rgba(230, 240, 255, 0.45) 60%,
      transparent 100%),
    radial-gradient(ellipse 0.6px 5px at 50% 25%,
      rgba(210, 225, 250, 0.65) 0%,
      transparent 100%),
    radial-gradient(ellipse 1.0px 8px at 50% 25%,
      rgba(245, 250, 255, 0.70) 0%,
      rgba(245, 250, 255, 0.35) 50%,
      transparent 100%);
  background-size: 42px 78px, 56px 92px, 36px 64px;
  background-position: 0 0, 22px 32px, 12px 48px;
  background-repeat: repeat;
  filter: drop-shadow(0 0 0.8px rgba(255,255,255,0.4));
  animation: atm-rain-fall 0.9s linear infinite;
}
.candle-atmosphere[data-condition="rain-light"] .atmosphere-rain { opacity: 0.40; }
.candle-atmosphere[data-condition="rain"]       .atmosphere-rain { opacity: 0.62; }
.candle-atmosphere[data-condition="rain-heavy"] .atmosphere-rain { opacity: 0.85; animation-duration: 0.65s; }
.candle-atmosphere[data-condition="storm"]      .atmosphere-rain { opacity: 0.78; animation-duration: 0.55s; }
@keyframes atm-rain-fall {
  from { background-position: 0 0,     22px 32px,  12px 48px; }
  to   { background-position: 0 78px,  22px 124px, 12px 112px; }
}

/* ── Nieve ───────────────────────────────────────────────────────────── */
.atmosphere-snow {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 1)    1.8px, transparent 2.3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 1.3px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.70) 1.0px, transparent 1.4px);
  background-size: 80px 100px, 60px 80px, 110px 130px;
  background-position: 0 0, 30px 40px, 60px 80px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.6));
  animation: atm-snow-fall 10s linear infinite;
}
.candle-atmosphere[data-condition="snow"]       .atmosphere-snow { opacity: 0.95; }
.candle-atmosphere[data-condition="snow-heavy"] .atmosphere-snow { opacity: 1; animation-duration: 6s; }
@keyframes atm-snow-fall {
  from { background-position: 0 0, 30px 40px, 60px 80px; }
  to   { background-position: -30px 400px, 10px 440px, 40px 480px; }
}

/* ── Niebla ───────────────────────────────────────────────────────────── */
.atmosphere-fog {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(220, 220, 220, 0.18) 30%,
      rgba(220, 220, 220, 0.30) 60%,
      rgba(220, 220, 220, 0.18) 100%);
  backdrop-filter: blur(0.5px);
  animation: atm-fog-drift 30s ease-in-out infinite;
}
.candle-atmosphere[data-condition="fog"] .atmosphere-fog { opacity: 0.9; }
@keyframes atm-fog-drift {
  0%, 100% { transform: translateX(-12px); }
  50%      { transform: translateX(12px); }
}

/* ── Tormenta — flash + rayo zigzag SVG ──────────────────────────────── */
/*
 * Dos elementos coordinados:
 *  - El fondo (radial gradient) → el FLASH que ilumina el cielo
 *  - El ::before → el RAYO en sí, un zigzag blanco con halo
 * Ambos comparten la misma animación pero el rayo solo aparece en los
 * picos del flash, no en los rebotes.
 */
.atmosphere-lightning {
  background: radial-gradient(ellipse 80% 60% at 50% 30%,
    rgba(255, 255, 245, 1) 0%,
    rgba(220, 230, 255, 0.85) 40%,
    rgba(180, 200, 255, 0) 100%);
  mix-blend-mode: screen;
}
.atmosphere-lightning::before {
  content: "";
  position: absolute;
  top: 4%;
  left: 40%;
  width: 24%;
  height: 78%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'><path d='M24 0 L12 36 L22 36 L8 70 L18 70 L4 100' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  opacity: 0;
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 18px rgba(200, 220, 255, 0.75))
    drop-shadow(0 0 36px rgba(180, 210, 255, 0.55));
}
.candle-atmosphere[data-condition="storm"] .atmosphere-lightning {
  animation: atm-lightning-flash 9s ease-in-out infinite;
}
.candle-atmosphere[data-condition="storm"] .atmosphere-lightning::before {
  animation: atm-bolt-strike 9s ease-in-out infinite;
}
@keyframes atm-lightning-flash {
  0%, 6.5%, 100% { opacity: 0; }
  1%             { opacity: 1; }
  1.6%           { opacity: 0; }
  2.4%           { opacity: 0.85; }
  3%             { opacity: 0.15; }
  3.7%           { opacity: 0; }
}
@keyframes atm-bolt-strike {
  0%, 0.7%, 2%, 2.2%, 3.2%, 100% { opacity: 0; }
  0.9%, 1.4%      { opacity: 1; }
  2.5%, 2.9%      { opacity: 0.85; }
}

/* ── Viento — wisps elípticos con ráfagas (gust pulse) ──────────────── */
/*
 * El viento real no son líneas rectas, son corrientes que pasan en
 * ráfagas. Cada capa pinta wisps elípticos (afilados, sin extremos
 * cuadrados) a alturas distintas. Tres animaciones combinadas:
 *   - atm-wind-blow  → desplaza el patrón horizontalmente (corriente)
 *   - atm-wind-gust  → modula la opacidad (ráfaga: aparece, se va)
 *   - atm-wind-drift → diminuto movimiento vertical (turbulencia)
 *
 * Sin las líneas continuas de antes, da sensación de aire en movimiento
 * en lugar de cortina horizontal.
 */
.atmosphere-wind {
  background-image:
    radial-gradient(ellipse 48px 1.4px at 30% 50%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.20) 50%,
      transparent 90%),
    radial-gradient(ellipse 36px 1.0px at 65% 50%,
      rgba(255, 255, 255, 0.40) 0%,
      rgba(255, 255, 255, 0.15) 55%,
      transparent 100%),
    radial-gradient(ellipse 64px 1.6px at 40% 50%,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 95%);
  background-size: 230px 26px, 170px 22px, 290px 32px;
  background-repeat: repeat-x;
  background-position: 0 22%, 0 50%, 0 78%;
  filter: blur(0.4px);
  animation:
    atm-wind-blow 4s linear infinite,
    atm-wind-gust 5.2s ease-in-out infinite;
}
.candle-atmosphere[data-wind="breeze"] .atmosphere-wind {
  opacity: 0.50;
  animation-duration: 4s, 5.2s;
}
.candle-atmosphere[data-wind="wind"] .atmosphere-wind {
  opacity: 0.72;
  animation-duration: 2.6s, 3.8s;
}
.candle-atmosphere[data-wind="strong"] .atmosphere-wind {
  opacity: 0.92;
  animation-duration: 1.6s, 2.6s;
  filter: blur(0.3px);
}
.candle-atmosphere[data-wind="gale"] .atmosphere-wind {
  opacity: 1;
  animation-duration: 0.9s, 1.8s;
  filter: blur(0.6px);
}
@keyframes atm-wind-blow {
  from { background-position: 0 22%, 0 50%, 0 78%; }
  to   { background-position: 460px 22%, 340px 50%, 580px 78%; }
}
@keyframes atm-wind-gust {
  0%, 100% { opacity: 0.35; }
  35%      { opacity: 1;    }
  72%      { opacity: 0.50; }
}

/* ── Veil de noche / lluvia / tormenta sobre toda la atmósfera ───────── */
.candle-atmosphere[data-night="true"]  { --sky-veil: rgba(8, 10, 24, 0.35); }
.candle-atmosphere[data-condition="overcast"]   { --sky-veil: rgba(40, 50, 60, 0.18); }
.candle-atmosphere[data-condition^="rain"]      { --sky-veil: rgba(40, 50, 60, 0.30); }
.candle-atmosphere[data-condition="storm"]      { --sky-veil: rgba(20, 25, 40, 0.55); }
.candle-atmosphere[data-condition^="snow"]      { --sky-veil: rgba(160, 175, 195, 0.12); }
.candle-atmosphere[data-condition="fog"]        { --sky-veil: rgba(190, 195, 210, 0.18); }

/* ── LLAMA REAL: una sola animación, parametrizada por variables ─────── */
/*
 * La llama responde al viento usando las variables CSS que el JS calcula
 * desde el snapshot meteorológico:
 *
 *   --flame-lean         dirección base (positivo = derecha, negativo = izquierda)
 *   --flame-sway-amp     amplitud de la oscilación alrededor del lean
 *   --flame-sway-period  velocidad de la oscilación (más rápido con más viento)
 *   --flame-opacity      opacidad global (lluvia, tormenta debilitan)
 *   --flame-color-shift  hue-rotate (perturbación → más anaranjado/rojo)
 *
 * Si mañana el viento cambia de dirección, JS cambia `--flame-lean` y la
 * llama se inclina al otro lado automáticamente.
 */
/* La inclinación y balanceo de la llama se aplican SIEMPRE que haya una
   vela, no solo dentro de .candle-atmosphere. Antes esta regla estaba
   limitada al visor; ahora cualquier vela (tarjetas de "Mis velas",
   galería, etc.) refleja el mismo viento que la página individual.
   Si la vela no trae clima, las vars caen a 0deg/1.5deg y la llama queda
   recta con un sutil balanceo. */
.candle-figure .flame {
  transform-origin: 50% 100%;
  opacity: var(--flame-opacity, 1);
  filter: hue-rotate(var(--flame-color-shift, 0deg));
  animation: atm-flame-sway var(--flame-sway-period, 3.2s) ease-in-out infinite;
}
@keyframes atm-flame-sway {
  0%, 100% {
    transform: translateX(-50%)
               rotate(calc(var(--flame-lean, 0deg) - var(--flame-sway-amp, 1.5deg)))
               scaleY(0.96);
  }
  50% {
    transform: translateX(-50%)
               rotate(calc(var(--flame-lean, 0deg) + var(--flame-sway-amp, 1.5deg)))
               scaleY(1.04);
  }
}

/* ── HUMO REAL: nuevo origen en la punta de la llama ────────────────── */
/*
 * Sobrescribimos el wrapper .smoke para que se ancle a la punta de la
 * llama (la posición existente lo ponía sobre el centro de la vela). En
 * calma sube vertical; con viento las volutas derivan horizontalmente.
 *
 *   --smoke-drift-x   −1..+1 multiplica la deriva horizontal final
 *   --smoke-density   opacidad pico
 *   --smoke-spread    escala final de la voluta
 *   --smoke-period    tiempo de ascenso
 */
.candle-atmosphere .candle-figure .smoke {
  /* La llama termina en bottom = wax-frac*ch + cw*0.05 + 4 + cw*0.22+6.
     El humo nace justo encima → mismo cálculo + un pequeño gap. */
  bottom: calc(var(--wax-frac, 1) * var(--ch, 200px) + var(--cw, 120px) * 0.30 + 14px);
  /* Más ancho para acomodar derivas grandes (gale) */
  width: calc(var(--cw, 120px) * 0.65 + 20px);
  /* Altura: que llegue hasta arriba */
  height: calc(var(--ch, 200px) * 0.50);
  opacity: 1;
}
.candle-atmosphere .candle-figure .smoke .puff {
  /* Wisp elongado, no círculo. El gradiente es elíptico (más alto que
     ancho), con dos lóbulos verticales para que la forma no sea uniforme.
     Cada wisp empieza pequeño y estrecho, asciende deformándose, y se
     dispersa al final como humo real. */
  width: calc(var(--cw, 120px) * 0.16 + 6px);
  height: calc(var(--cw, 120px) * 0.26 + 12px);
  margin-left: calc((var(--cw, 120px) * 0.16 + 6px) / -2);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse 60% 70% at 50% 35%,
      rgba(230, 230, 240, calc(var(--smoke-density, 0.55) * 0.85)) 0%,
      rgba(230, 230, 240, calc(var(--smoke-density, 0.55) * 0.55)) 35%,
      transparent 80%),
    radial-gradient(ellipse 50% 60% at 50% 70%,
      rgba(225, 225, 235, calc(var(--smoke-density, 0.55) * 0.65)) 0%,
      rgba(225, 225, 235, calc(var(--smoke-density, 0.55) * 0.30)) 45%,
      transparent 85%);
  filter: blur(3.5px);
  animation: atm-smoke-rise var(--smoke-period, 4s) infinite ease-out;
}
/* Variación de tamaño y forma entre wisps para no parecer copias */
.candle-atmosphere .candle-figure .smoke .puff:nth-child(2) {
  width: calc(var(--cw, 120px) * 0.13 + 5px);
  height: calc(var(--cw, 120px) * 0.30 + 14px);
  margin-left: calc((var(--cw, 120px) * 0.13 + 5px) / -2);
  filter: blur(4px);
}
.candle-atmosphere .candle-figure .smoke .puff:nth-child(3) {
  width: calc(var(--cw, 120px) * 0.18 + 7px);
  height: calc(var(--cw, 120px) * 0.22 + 10px);
  margin-left: calc((var(--cw, 120px) * 0.18 + 7px) / -2);
  filter: blur(3px);
}
.candle-atmosphere .candle-figure .smoke .puff:nth-child(4) {
  width: calc(var(--cw, 120px) * 0.14 + 5px);
  height: calc(var(--cw, 120px) * 0.28 + 13px);
  margin-left: calc((var(--cw, 120px) * 0.14 + 5px) / -2);
  filter: blur(4.5px);
}
.candle-atmosphere .candle-figure .smoke .puff:nth-child(5) {
  width: calc(var(--cw, 120px) * 0.17 + 6px);
  height: calc(var(--cw, 120px) * 0.24 + 11px);
  margin-left: calc((var(--cw, 120px) * 0.17 + 6px) / -2);
  filter: blur(3.5px);
}
@keyframes atm-smoke-rise {
  0% {
    transform: translateY(0)
               translateX(0)
               scale(0.30, 0.45)
               rotate(0deg);
    opacity: 0;
  }
  10% { opacity: var(--smoke-density, 0.55); }
  45% {
    transform: translateY(-45%)
               translateX(calc(var(--smoke-drift-x, 0) * 32px))
               scale(0.85, 1.05)
               rotate(4deg);
    opacity: var(--smoke-density, 0.55);
  }
  100% {
    transform: translateY(-115%)
               translateX(calc(var(--smoke-drift-x, 0) * 75px))
               scale(calc(1.9 * var(--smoke-spread, 1)),
                     calc(2.6 * var(--smoke-spread, 1)))
               rotate(12deg);
    opacity: 0;
  }
}

/* La densidad y el "espesor" del humo derivan de variables, pero las
   variantes del backend (data-smoke="denso", "tenue", etc.) siguen
   sobrescribiendo si vienen — son parte del oráculo final de la vela. */

/* ──────────────────────────────────────────────────────────────────────────
   WEATHER CHIP — etiqueta con el clima actual de la vela
   ────────────────────────────────────────────────────────────────────────── */

.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  border: 1px solid rgba(212, 175, 55, 0.18);
  color: var(--ink-faint);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-top: 14px;
}
.weather-chip__icon {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.3));
}
.weather-chip__text strong {
  color: var(--ink);
  font-weight: 500;
}
.weather-chip__sep {
  opacity: 0.4;
  margin: 0 2px;
}

/* Caja con las coordenadas exactas del lugar donde se ancló la vela.
   Solo la ve el dueño (el backend oculta las coords a terceros). */
.weather-coords {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px dashed rgba(212, 175, 55, 0.20);
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.weather-coords__pin {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}
.weather-coords__hint {
  margin-left: 6px;
  opacity: 0.55;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Notas de estado del anclaje preciso en el formulario de encender */
.anchor-status {
  margin-top: -6px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  font-family: Inter, system-ui, sans-serif;
}
.anchor-status p { margin: 6px 0; }
.anchor-status ol { margin: 6px 0 4px 22px; padding: 0; }
.anchor-status li { margin: 2px 0; }
.anchor-status--warn {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.20);
  color: var(--ink-faint);
}
.anchor-status--ok {
  background: rgba(80, 200, 130, 0.06);
  border: 1px solid rgba(80, 200, 130, 0.20);
  color: var(--ink-faint);
}
.anchor-status--error {
  background: rgba(220, 60, 70, 0.08);
  border: 1px solid rgba(220, 60, 70, 0.30);
  color: var(--ink);
}
.anchor-status--error strong { color: #ff9aa0; }

/* Bloque informativo del anclaje (sustituye al selector de modos) */
.anchor-info {
  margin: 18px 0 6px;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10));
}
.anchor-info__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 8px;
}
.anchor-info__help {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.anchor-info__altar-hint {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(212, 175, 55, 0.12);
  opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────────────────────
   ANCLAJE: selector de modo + picker de mapa al encender vela
   ────────────────────────────────────────────────────────────────────────── */

.anchor-block {
  margin: 18px 0 4px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
}
.anchor-block legend {
  padding: 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.anchor-block__help {
  margin: 4px 0 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  border-top: 1px dashed rgba(212, 175, 55, 0.10);
}
.radio-row:first-of-type { border-top: none; }
.radio-row input[type="radio"] {
  margin-top: 4px;
  flex: 0 0 auto;
  accent-color: var(--gold);
}
.radio-row .label-text { display: block; }
.radio-row .label-text strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}
.radio-row .label-text span {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}

#map-picker-wrap {
  margin-top: 14px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}
.map-picker {
  width: 100%;
  height: 240px;
  background: #1a1410;
}
.map-picker-info {
  padding: 10px 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px solid rgba(212, 175, 55, 0.12);
  background: rgba(255,255,255,0.015);
}
.map-picker-info strong { color: var(--ink); }
.map-picker-coords {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  opacity: 0.85;
}

/* Buscador del picker (dentro del mini-mapa de encender vela) */
.map-picker-search {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.10);
  background: rgba(0,0,0,0.25);
}
.map-picker-search input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(12, 9, 21, 0.85);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}
.map-picker-search input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.map-picker-search__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  z-index: 500;
  background: rgba(12, 9, 21, 0.96);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
  backdrop-filter: blur(6px);
}
.map-picker-search__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(212, 175, 55, 0.08);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.map-picker-search__item:first-child { border-top: none; }
.map-picker-search__item:hover { background: rgba(212, 175, 55, 0.08); }
.map-picker-search__pin { flex: 0 0 auto; opacity: 0.7; }
.map-picker-search__empty {
  padding: 12px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* Bloque anidado debajo de un radio (extras del modo seleccionado) */
.anchor-extras {
  margin: -4px 0 12px 32px;
  padding: 10px 14px;
  border-left: 2px solid rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.04);
  border-radius: 0 8px 8px 0;
}
.checkbox-row--nested {
  padding: 4px 0;
}
.checkbox-row--nested .label-text strong { font-size: 14px; }
.checkbox-row--nested .label-text span { font-size: 12.5px; }

/* Popup "Encender vela aquí" en la galería */
.gallery-light-here-popup .leaflet-popup-content-wrapper {
  padding: 4px;
}
.light-here {
  padding: 4px 6px;
  text-align: center;
}
.light-here strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.light-here p {
  margin: 0 0 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}
.light-here .btn { width: 100%; }

/* ──────────────────────────────────────────────────────────────────────────
   GALERÍA — mapa mundial con velas + buscador + popups
   ────────────────────────────────────────────────────────────────────────── */

.gallery-body { background: #0a0815; }

.gallery-map-shell {
  position: relative;
  width: 100%;
  height: calc(100vh - 70px);   /* alto total menos header */
  min-height: 480px;
  /* Carrusel arriba (fijo) + mapa debajo ocupando el resto. Antes el
     carrusel se superponía al mapa, ahora el mapa empieza justo debajo. */
  display: flex;
  flex-direction: column;
}
/* Contenedor del mapa + controles flotantes (buscador, stats). Es el
   contexto de posicionamiento de ambos, así nunca caen detrás de los
   carruseles superior/inferior. */
.gallery-map-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;       /* permite que flex calcule bien con overflow */
  display: flex;
  flex-direction: column;
}
#gallery-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0c0915;
}
/* Modo noche por capa. Aplicamos los filtros solo al pane de tiles —
   los markers (velas, dots) viven en otro pane y NO se ven afectados.

   ─ Oscuro (CartoDB Dark Matter): ya es de noche, solo lo bajamos un pelín.
   ─ Satélite (Esri World Imagery): foto diurna por naturaleza; oscurecer
     mucho y desaturar para que parezca "satélite nocturno" — al estilo
     de la NASA Black Marble. Las luces de las velas brillan encima.
   ─ Mapa estándar (OpenStreetMap): claro por naturaleza; invertir + rotar
     hue 180° es el truco clásico para convertir un mapa claro en dark
     mode preservando matices de tipografía y carreteras.                */
#gallery-map .leaflet-tile-pane {
  filter: brightness(0.85) contrast(0.95);
  transition: filter 0.35s ease;
}
#gallery-map[data-base="dark"] .leaflet-tile-pane {
  filter: brightness(0.92) contrast(1.0);
}
#gallery-map[data-base="satellite"] .leaflet-tile-pane {
  filter: brightness(0.62) contrast(1.05) saturate(0.7);
}
#gallery-map[data-base="standard"] .leaflet-tile-pane {
  /* Mapa de calles Voyager: se muestra tal cual, solo un leve apagado para
     que encaje con el tema oscuro sin perder legibilidad (calles, nombres).
     Así el usuario puede ver exactamente dónde ardió una vela. */
  filter: brightness(0.95) contrast(1.0) saturate(0.95);
}
#gallery-map .leaflet-control-attribution {
  background: rgba(0,0,0,0.55);
  color: rgba(244, 232, 200, 0.65);
  font-size: 10px;
}
#gallery-map .leaflet-control-attribution a { color: var(--gold); }

.gallery-search {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  width: min(360px, calc(100% - 32px));
}
.gallery-search input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(12, 9, 21, 0.92);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
}
.gallery-search input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.gallery-search__results {
  margin-top: 8px;
  background: rgba(12, 9, 21, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
  backdrop-filter: blur(8px);
}
.gallery-search__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(212, 175, 55, 0.08);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.gallery-search__item:first-child { border-top: none; }
.gallery-search__item:hover { background: rgba(212, 175, 55, 0.08); }
.gallery-search__pin { flex: 0 0 auto; opacity: 0.7; }
.gallery-search__empty {
  padding: 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}

.gallery-stats {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(12, 9, 21, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.18);
  color: var(--ink-faint);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.gallery-stats strong { color: var(--gold); }

/* Popup de cada vela en el mapa */
.leaflet-popup-content-wrapper {
  background: rgba(12, 9, 21, 0.96);
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.leaflet-popup-content { margin: 14px 16px; font-family: Inter, system-ui, sans-serif; }
.leaflet-popup-tip { background: rgba(12, 9, 21, 0.96); }
.leaflet-popup-close-button { color: var(--ink-faint) !important; font-size: 18px !important; }
.gallery-popup__head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}
.gallery-popup__by {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 400;
}
.gallery-popup__place {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.gallery-popup__petition {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 2px solid var(--gold);
  background: rgba(212, 175, 55, 0.06);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.gallery-popup__status {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

/* ─── Popup de vela consumida (memoria de 72 h) ───
   Muestra la figura de cera real (mismo SVG que usa el visor) +
   nombre de la figura + presagio interpretado + tipo de humo.   */
.gallery-popup--finished .gallery-popup__head {
  color: var(--ink-faint);
  font-style: italic;
}
.gallery-popup__shape {
  width: 88px;
  height: 88px;
  margin: 6px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 60%,
    rgba(255, 200, 100, 0.10) 0%, transparent 70%);
}
.gallery-popup__shape svg {
  width: 100%;
  height: 100%;
  /* Las formas (backend/data/shapes.js) usan fill por defecto + a veces
     currentColor para stroke. Aplicando color + fill al <svg> mismo,
     todos los paths heredan el color de la vela del usuario. */
  color: var(--wax-color, #f4ecd8);
  fill: var(--wax-color, #f4ecd8);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
/* Marcador de forma de cera en el mapa (solo lo ve el dueño de la vela) */
.shape-marker-wrap { background: none !important; border: none !important; }
.shape-marker {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shape-marker svg {
  width: 100%;
  height: 100%;
  color: var(--wax-color, #f4ecd8);
  fill: var(--wax-color, #f4ecd8);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

.gallery-popup__omen-name {
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 4px;
}
.gallery-popup__omen-name em { font-style: italic; }
.gallery-popup__omen {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft, var(--ink));
  margin: 0 0 8px;
  padding: 0 4px;
  line-height: 1.45;
}
.gallery-popup__smoke {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

/* Iconos del cluster ajustados a la paleta dorada del sitio */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(212, 175, 55, 0.18) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: rgba(212, 175, 55, 0.85) !important;
  color: #1a1410 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
}

@media (max-width: 720px) {
  .gallery-map-shell { height: calc(100vh - 64px); }
  .gallery-search { left: 12px; top: 12px; }
  .gallery-stats { bottom: 16px; font-size: 11.5px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   CARRUSEL DE ÚLTIMAS VELAS (encima del mapa)
   ────────────────────────────────────────────────────────────────────────── */

.gallery-carousel-wrap {
  /* En flujo: el carrusel ocupa su propio espacio en la parte superior
     del shell y el mapa empieza justo debajo. Así nada queda tapado. */
  flex: 0 0 auto;
  position: relative;
  z-index: 600;
  padding: 10px 12px 8px;
  background: rgba(10, 8, 21, 0.96);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.gallery-carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 6px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.gallery-carousel-title { color: var(--gold); }
.gallery-carousel-hint { opacity: 0.6; }

.gallery-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.45) transparent;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.gallery-carousel::-webkit-scrollbar { height: 6px; }
.gallery-carousel::-webkit-scrollbar-track { background: transparent; }
.gallery-carousel::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 3px;
}

.gallery-carousel__loading,
.gallery-carousel__empty {
  flex: 0 0 100%;
  padding: 16px 20px;
  color: var(--ink-faint);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  text-align: center;
}

.gallery-card {
  flex: 0 0 240px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  background: rgba(20, 16, 30, 0.88);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}
.gallery-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.gallery-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25),
              0 0 0 2px rgba(212, 175, 55, 0.55);
  background: rgba(30, 24, 40, 0.95);
}
/* Tarjeta de vela ya consumida: visualmente más apagada para que el
   usuario distinga de un vistazo las vivas de las que ya dieron su
   forma. El icono pasa de llama viva a figura de cera. */
.gallery-card--finished {
  background: rgba(16, 14, 24, 0.78);
  border-color: rgba(180, 190, 210, 0.16);
}
.gallery-card--finished .gallery-card__type {
  color: var(--ink-faint);
}
.gallery-card--finished .gallery-card__name {
  color: rgba(212, 175, 55, 0.55);
}
.gallery-card--finished .gallery-card__icon {
  opacity: 0.92;
}
.gallery-card__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 42px;
}
.gallery-card__icon svg { width: 100%; height: 100%; }
/* Tarjeta consumida: que la figura de cera herede el color real de
   la vela (los paths del backend no llevan fill explícito). */
.gallery-card--finished .gallery-card__icon svg {
  color: var(--wax-color, #f4ecd8);
  fill: var(--wax-color, #f4ecd8);
}
.gallery-card__body { flex: 1; min-width: 0; }
.gallery-card__type {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-card__name {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-card__petition {
  margin: 0;
  font-size: 12px;
  line-height: 1.42;
  color: var(--ink-faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* (Reservado para futuros ajustes — el layout flex hace el trabajo) */

/* ──────────────────────────────────────────────────────────────────────────
   MARCADORES — llamas pequeñas
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Punto de luz escalable (marker individual + cluster) ───
   Una sola regla CSS para ambos: el JS calcula --halo-size (tamaño
   total) y --core-stop (porcentaje del gradient donde el núcleo
   brillante se desvanece). El resultado:
     · 1 vela        → puntito mínimo de ~4 px, halo casi imperceptible
     · 100 velas     → ~26 px, halo cálido bien visible
     · 10 000 velas  → ~48 px, halo amplio, resplandor de ciudad
   Halo y box-shadow proporcionales al tamaño para que la radiación
   lumínica crezca con la densidad de velas. */
.light-dot-wrap { background: transparent !important; border: none !important; }
.light-dot {
  width: var(--halo-size, 10px);
  height: var(--halo-size, 10px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 245, 192, 1) 0%,
    rgba(255, 200, 100, 0.95) var(--core-stop, 14%),
    rgba(255, 138, 48, 0.55) calc(var(--core-stop, 14%) + 14%),
    rgba(255, 138, 48, 0.20) calc(var(--core-stop, 14%) + 36%),
    transparent 92%);
  box-shadow:
    0 0 calc(var(--halo-size, 10px) * 0.45) rgba(255, 200, 100, 0.50),
    0 0 calc(var(--halo-size, 10px) * 1.1)  rgba(255, 160, 50, 0.25);
  animation: light-dot-pulse 2.8s ease-in-out infinite;
}
.light-dot-wrap.is-selected .light-dot {
  transform: scale(1.25);
  box-shadow:
    0 0 calc(var(--halo-size, 10px) * 0.6) rgba(255, 230, 130, 0.95),
    0 0 calc(var(--halo-size, 10px) * 1.5) rgba(255, 200, 80, 0.55);
}
@keyframes light-dot-pulse {
  0%, 100% { opacity: 0.85; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* ─── Punto de CENIZA (grupos sin velas encendidas) ───
   Residuos/humo de velas ya consumidas. Frío, tenue y sin brillo:
   de lejos NO debe parecer una vela ardiendo.                    */
.residue-dot-wrap { background: transparent !important; border: none !important; }
.residue-dot {
  width: var(--residue-size, 10px);
  height: var(--residue-size, 10px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(200, 205, 215, 0.55) 0%,
    rgba(150, 156, 170, 0.32) 45%,
    rgba(120, 126, 140, 0.12) 70%,
    transparent 90%);
  border: 1px solid rgba(170, 176, 190, 0.25);
  opacity: 0.75;
}
.residue-dot-wrap.is-selected .residue-dot {
  opacity: 1;
  border-color: rgba(190, 196, 210, 0.5);
}

/* ─── Marker LLAMA (vista media — zoom 7-10) ───
   Pequeño: solo se ve la llama, sin cuerpo de vela. Halo cálido
   por drop-shadow, sin disco luminoso de fondo.                */
.flame-marker-wrap { background: transparent !important; border: none !important; }
.flame-marker {
  width: 16px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.flame-marker img {
  width: 12px;
  height: 18px;
  filter:
    drop-shadow(0 0 2px rgba(255, 170, 60, 0.80))
    drop-shadow(0 0 6px rgba(255, 140, 30, 0.45));
  animation: flame-marker-flicker 1.3s ease-in-out infinite;
}
.flame-marker--fast img {
  animation-duration: 0.55s;  /* viento fuerte → titileo rápido */
}
.flame-marker.is-selected img,
.flame-marker-wrap.is-selected .flame-marker img {
  filter:
    drop-shadow(0 0 6px rgba(255, 230, 130, 1))
    drop-shadow(0 0 22px rgba(255, 200, 80, 0.85))
    drop-shadow(0 0 36px rgba(255, 170, 50, 0.50));
  transform: scale(1.25);
  transition: transform 0.25s ease;
}
@keyframes flame-marker-flicker {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ─── Marker VELA ENTERA (zoom cercano ≥ 9) ───
   Cuerpo de cera + llama. La llama ya viene inclinada por el viento
   real desde el SVG inline (rotate aplicado en backend → flameLean).
   Aquí solo añadimos halo y un titileo sutil para que respire.   */
.candle-marker-wrap { background: transparent !important; border: none !important; }
.candle-marker {
  width: 24px;
  height: 36px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.candle-marker img {
  width: 22px;
  height: 36px;
  filter:
    drop-shadow(0 0 3px rgba(255, 180, 70, 0.55))
    drop-shadow(0 0 9px rgba(255, 140, 30, 0.30))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
  animation: candle-marker-breathe 2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.candle-marker--fast img {
  animation: candle-marker-shudder 0.6s ease-in-out infinite;
}
.candle-marker.is-selected img,
.candle-marker-wrap.is-selected .candle-marker img {
  filter:
    drop-shadow(0 0 8px rgba(255, 230, 130, 0.95))
    drop-shadow(0 0 26px rgba(255, 200, 80, 0.75))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
  transform: scale(1.12);
  transition: transform 0.25s ease;
}
@keyframes candle-marker-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
@keyframes candle-marker-shudder {
  /* Viento fuerte: la llama (dentro del SVG) tiembla en horizontal */
  0%, 100% { transform: translateX(0) scale(1); }
  25%      { transform: translateX(-0.6px) scale(1.01); }
  75%      { transform: translateX(0.6px) scale(1.01); }
}

/* ─── Marker HUMO (vela finalizada, residual 72 h) ───
   Tono frío gris azulado para distinguirla de las llamas vivas.
   Ascenso lento con leve deriva según variante.                 */
.smoke-marker-wrap { background: transparent !important; border: none !important; }
.smoke-marker {
  width: 24px;
  height: 36px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.85;
}
.smoke-marker img {
  width: 22px;
  height: 34px;
  filter: drop-shadow(0 0 4px rgba(180, 200, 220, 0.40));
  animation: smoke-marker-rise 4.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
/* Variantes de humo: la deriva refleja la lectura del oráculo */
.smoke-marker--izquierda img { animation-name: smoke-marker-left; }
.smoke-marker--derecha   img { animation-name: smoke-marker-right; }
.smoke-marker--denso     img { opacity: 0.95; filter: drop-shadow(0 0 6px rgba(120, 130, 145, 0.55)); }
.smoke-marker--ligero    img { opacity: 0.55; }
.smoke-marker.is-selected img,
.smoke-marker-wrap.is-selected .smoke-marker img {
  filter:
    drop-shadow(0 0 6px rgba(220, 230, 245, 0.95))
    drop-shadow(0 0 16px rgba(180, 200, 220, 0.55));
  transform: scale(1.18);
}
@keyframes smoke-marker-rise {
  0%   { transform: translateY(2px) scaleY(0.95); opacity: 0.55; }
  50%  { transform: translateY(-1px) scaleY(1.02); opacity: 0.92; }
  100% { transform: translateY(2px) scaleY(0.95); opacity: 0.55; }
}
@keyframes smoke-marker-left {
  0%   { transform: translate(0, 2px); }
  50%  { transform: translate(-3px, -1px); }
  100% { transform: translate(0, 2px); }
}
@keyframes smoke-marker-right {
  0%   { transform: translate(0, 2px); }
  50%  { transform: translate(3px, -1px); }
  100% { transform: translate(0, 2px); }
}

/* (El antiguo .flame-cluster ya no se usa: tanto el marker individual
    como el cluster comparten la regla .light-dot escalable definida
    más arriba. La fórmula JS — log10(count) — se encarga del tamaño.) */

/* Override del cluster por defecto para que NUNCA muestre el círculo
   azul/verde de Leaflet — siempre usamos nuestro divIcon. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background: transparent !important; }

/* ── Control de capas Leaflet, look Velario ───────────────────────── */
.leaflet-control-layers {
  background: rgba(12, 9, 21, 0.92) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
  color: var(--ink) !important;
  padding: 6px 4px !important;
  backdrop-filter: blur(6px);
}
.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  padding: 4px 10px 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.leaflet-control-layers input[type="radio"] { accent-color: var(--gold); }

/* ── Ajustes para que el carrusel no choque con el mapa en móvil ── */
@media (max-width: 720px) {
  .gallery-carousel-wrap { padding: 8px 10px 4px; }
  .gallery-card { flex: 0 0 200px; }
  .gallery-card__petition { -webkit-line-clamp: 2; }
}

/* ══════════════════════════════════════════════════════════════════════
   ALTARES — Fase 3
   ══════════════════════════════════════════════════════════════════════ */

/* ── Crear altar (altar-nuevo.html) ─────────────────────────────────── */

.altar-new {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  margin-top: 18px;
}
.altar-new__preview {
  text-align: center;
  padding: 22px 18px 26px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10));
  position: sticky;
  top: 90px;
  align-self: start;
}
@media (max-width: 820px) {
  .altar-new { grid-template-columns: 1fr; }
  /* En móvil, una sola columna — quitamos sticky para no flotar encima
     del formulario al hacer scroll. */
  .altar-new__preview {
    position: static;
    top: auto;
  }
}
/* La llama sobresale ~55px por encima de la caja de la vela: dejamos
   hueco para que no pise la etiqueta "VELA PRINCIPAL DEL ALTAR". */
.altar-new__preview .candle-figure { margin: 58px auto 10px; }
.altar-new__preview h2 {
  margin: 8px 0 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: var(--ink);
}
.altar-new__preview .format {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.altar-new__preview .meaning {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.altar-new__preview-label {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 12px;
}
.altar-new__preview-help {
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
  padding-top: 12px;
  margin: 12px 0 0;
  line-height: 1.55;
}
.altar-new__form { padding: 26px 28px; }
.altar-new__location {
  margin: 18px 0 6px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
}
.altar-new__location legend {
  padding: 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: var(--ink);
}
.altar-new__location-help {
  margin: 4px 0 12px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ── Vista de altar (altar.html) ────────────────────────────────────── */

.altar-newly-banner {
  margin: 12px auto 18px;
  max-width: 720px;
  padding: 12px 18px;
  text-align: center;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 10px;
  color: var(--gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
}

.altar-hero {
  text-align: center;
  margin: 14px auto 18px;
  padding: 8px 16px 4px;
  max-width: 820px;
}
.altar-hero__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
}
.altar-hero__lugar { color: var(--ink-faint); }
.altar-hero__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.altar-hero__meta {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-faint);
}
.altar-hero__meta strong { color: var(--gold); }

/* Chip de estado */
.altar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.altar-chip--open {
  background: rgba(255, 150, 60, 0.12);
  border: 1px solid rgba(255, 150, 60, 0.40);
  color: #ffb04a;
}
.altar-chip--closed {
  background: rgba(180, 200, 220, 0.08);
  border: 1px solid rgba(180, 200, 220, 0.25);
  color: var(--ink-faint);
}
.altar-chip--archived {
  background: rgba(110, 120, 140, 0.08);
  border: 1px solid rgba(110, 120, 140, 0.25);
  color: var(--ink-faint);
  opacity: 0.85;
}

/* Sección principal: atmósfera + info */
.altar-main {
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto 36px;
  padding: 0 18px;
  align-items: start;
}
.altar-main__atmosphere {
  position: sticky;
  top: 90px;
  align-self: start;
}
.altar-main__atmosphere .candle-atmosphere {
  width: 100%;
  max-width: 460px;
  height: 480px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .altar-main { grid-template-columns: 1fr; gap: 20px; }
  /* En móvil hay UNA sola columna — sticky haría que la vela se quedase
     fija arriba ocupando 480px y todo el contenido siguiente le pasara
     por delante o por debajo de forma rara. La devolvemos al flujo. */
  .altar-main__atmosphere {
    position: static;
    top: auto;
  }
  .altar-main__atmosphere .candle-atmosphere {
    height: 360px;          /* más compacta para que no ocupe pantalla entera */
  }
}
.altar-main__atmosphere .weather-chip {
  margin: 14px auto 0;
}

.altar-main__info { min-width: 0; }
.altar-section-label {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 10px;
}
.altar-intention {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(212, 175, 55, 0.05);
  border-radius: 6px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}
.altar-main__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 540px) {
  .altar-main__stats { grid-template-columns: 1fr; }
}
.altar-stat {
  padding: 12px 16px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
.altar-stat__label {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.altar-stat__value {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  color: var(--gold);
}
.altar-stat--finished .altar-stat__value { color: var(--ink-faint); font-style: italic; }

.btn-accompany {
  background: linear-gradient(180deg, rgba(255, 170, 60, 0.18), rgba(212, 130, 40, 0.22));
  border: 1px solid rgba(255, 170, 60, 0.50);
  color: #fff5c0;
  font-size: 17px;
  padding: 14px;
  box-shadow: 0 0 18px rgba(255, 160, 50, 0.20);
}
.btn-accompany:hover {
  background: linear-gradient(180deg, rgba(255, 170, 60, 0.28), rgba(212, 130, 40, 0.32));
  box-shadow: 0 0 26px rgba(255, 160, 50, 0.35);
}
.btn-relight-main {
  background: linear-gradient(180deg, rgba(120, 190, 255, 0.16), rgba(70, 130, 210, 0.20));
  border: 1px solid rgba(120, 190, 255, 0.50);
  color: #e8f3ff;
  font-size: 17px;
  padding: 14px;
  box-shadow: 0 0 18px rgba(90, 160, 240, 0.18);
  margin-bottom: 10px;
}
.btn-relight-main:hover {
  background: linear-gradient(180deg, rgba(120, 190, 255, 0.26), rgba(70, 130, 210, 0.30));
  box-shadow: 0 0 26px rgba(90, 160, 240, 0.32);
}
.altar-accompany-help,
.altar-accompany-msg {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.55;
}
.altar-accompany-msg {
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(212, 175, 55, 0.20);
  border-radius: 10px;
}

/* Compartir */
.altar-share { margin-top: 28px; }
.altar-share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.altar-share__buttons a,
.altar-share__buttons button {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.30);
  background: rgba(212, 175, 55, 0.06);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.altar-share__buttons a:hover,
.altar-share__buttons button:hover {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold);
}

/* Plegarias acompañantes */
.altar-companions {
  max-width: 1200px;
  margin: 0 auto 64px;
  padding: 0 18px;
}
.altar-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.altar-section-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  margin: 0;
  color: var(--ink);
}
.altar-companions__count {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
}
.companions-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-faint);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  border: 1px dashed rgba(212, 175, 55, 0.18);
  border-radius: 12px;
}
.companions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.companion-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 12px;
  background: rgba(20, 16, 30, 0.78);
}
.companion-card__candle {
  flex: 0 0 auto;
}
.companion-card__candle .candle-figure { margin: 0; }
.companion-card__body { flex: 1; min-width: 0; }
.companion-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.companion-card__head strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: var(--gold);
}
.companion-card__time {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  color: var(--ink-faint);
  opacity: 0.7;
}
.companion-card__blessing {
  margin: 0 0 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.companion-card__status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.companion-card__status.finished {
  background: rgba(180, 200, 220, 0.05);
  border-color: rgba(180, 200, 220, 0.20);
  color: var(--ink-faint);
}

/* ── Modal de acompañar ─────────────────────────────────────────────── */

.accompany-modal[hidden] { display: none; }
.accompany-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.accompany-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}
.accompany-modal__panel {
  position: relative;
  max-width: 760px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 30px 26px;
  background: #14101e;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.accompany-modal__close {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.accompany-modal__close:hover {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
.accompany-modal__panel h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--ink);
}
.accompany-modal__panel .lede {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 18px;
  line-height: 1.55;
}
.accompany-modal__catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.accompany-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: left;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.accompany-card:hover {
  border-color: rgba(212, 175, 55, 0.40);
  background: rgba(212, 175, 55, 0.05);
}
.accompany-card.selected {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.10);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.30);
}
.accompany-card__candle .candle-figure { margin: 0; }
.accompany-card__body {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
}
.accompany-card__body strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.accompany-card__body span {
  color: var(--ink-faint);
  font-size: 11.5px;
}
.accompany-modal__form .field {
  margin-bottom: 14px;
}

/* Banner CTA "Crear altar" arriba del catálogo de velas */
.altar-cta {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 28px;
  padding: 18px 22px;
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top right, rgba(212, 175, 55, 0.10), transparent 60%),
    rgba(20, 16, 30, 0.6);
}
.altar-cta__body strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 4px;
}
.altar-cta__body p {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 540px;
}
.altar-cta .btn { flex: 0 0 auto; }
@media (max-width: 720px) {
  .altar-cta { flex-direction: column; align-items: flex-start; }
}

/* Acciones dentro de cada tarjeta de vela en el catálogo */
.candle-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
}
.candle-card__actions .btn { flex: 1; padding: 8px 10px; font-size: 13px; }
.candle-card__actions .btn-ghost {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--ink);
}
.candle-card__actions .btn-ghost:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════
   ALTARES EN EL MAPA (Fase 4)
   ══════════════════════════════════════════════════════════════════════ */

/* Marker: rayo de luz vertical para zooms bajos/medios. La base es un
   halo cálido en el suelo, sobre él asciende un beam que se desvanece
   hacia el cielo. Altura y luminosidad escalan con log10(candleCount).
   Color = tinte de la vela principal del altar. */
.altar-marker-wrap { background: transparent !important; border: none !important; }
.altar-marker {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Halo CIRCULAR pequeño en el pie del beam — discreto, del color de la
   principal. Crece muy poco a poco con el número de velas (sutil), para
   que muchos altares juntos no compitan visualmente. El que marca es el
   beam vertical, no el halo. */
.altar-marker__halo {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--halo-r) * 2);
  height: calc(var(--halo-r) * 2);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--altar-color, #ffb650) 0%,
    var(--altar-color, #ffb650) 35%,
    transparent 80%);
  filter: blur(0.3px);
  box-shadow: 0 0 calc(var(--halo-r) * 0.6) var(--altar-color, #ffb650);
  opacity: 0.85;
}
/* Beam ascendente — HILO muy fino, casi un trazo. Crece sobre todo
   en altura con el número de velas (cuanto más alto, más subvelas).
   El ancho apenas cambia, así no se solapan en altares densos. */
.altar-marker__beam {
  position: absolute;
  bottom: calc(var(--halo-r) * 0.6);
  left: 50%;
  width: var(--beam-w);
  height: var(--beam-h);
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(255, 200, 100, 0)    0%,
    rgba(255, 220, 140, 0.55) 65%,
    rgba(255, 245, 200, 0.95) 100%);
  filter: blur(0.3px);
  border-radius: 50%;     /* extremos redondeados */
  box-shadow:
    0 0 3px rgba(255, 200, 100, 0.45),
    0 0 6px rgba(255, 180, 60, 0.25);
  animation: altar-beam-flicker 3.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes altar-beam-flicker {
  0%, 100% { opacity: 0.92; transform: translateX(-50%) scaleY(0.98) scaleX(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scaleY(1.03) scaleX(1.04); }
}
/* Contador (medium): número de velas en pequeño badge */
.altar-marker__count {
  position: absolute;
  bottom: calc(var(--halo-r) * 1.3);
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(20, 16, 30, 0.92);
  border: 1px solid var(--altar-color, #ffb650);
  color: #fff5c0;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.altar-marker-wrap.is-selected .altar-marker__halo {
  box-shadow: 0 0 calc(var(--halo-r) * 1.5) rgba(255, 220, 130, 0.95);
}
.altar-marker-wrap.is-selected .altar-marker__beam {
  animation-duration: 0.9s;
  background: linear-gradient(180deg,
    rgba(255, 200, 100, 0.20) 0%,
    rgba(255, 220, 140, 0.85) 60%,
    rgba(255, 245, 220, 1) 100%);
}

/* Composición de altar en zoom cercano: plataforma + principal + subvelas */
.altar-composition {
  position: relative;
  width: 80px;
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Residuo de altar apagado (solo creador): forma de cera sobre la peana.
   Frío y sin brillo cálido — un recuerdo, no una vela encendida. */
.altar-residue {
  width: 80px;
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.85;
}
.altar-residue svg {
  width: 78px;
  height: 88px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.altar-composition img {
  width: 78px;
  height: 88px;
  filter:
    drop-shadow(0 0 6px rgba(255, 180, 70, 0.55))
    drop-shadow(0 0 20px rgba(255, 140, 30, 0.30))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7));
  animation: candle-marker-breathe 2.4s ease-in-out infinite;
  transform-origin: 50% 95%;
}
.altar-composition__badge {
  position: absolute;
  /* Fuera del wrapper hacia arriba — no tapa ninguna vela del altar */
  top: -12px;
  right: -6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 16, 30, 0.95);
  border: 1px solid var(--altar-color, #ffb650);
  color: #fff5c0;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 0 8px rgba(255, 180, 60, 0.40);
  z-index: 2;
}
.altar-marker-wrap.is-selected .altar-composition img {
  filter:
    drop-shadow(0 0 10px rgba(255, 230, 130, 1))
    drop-shadow(0 0 30px rgba(255, 200, 80, 0.85));
  transform: scale(1.12);
}

/* Popup de altar */
.altar-popup {
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  max-width: 300px;
}
.altar-popup__pre {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 4px;
}
.altar-popup__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  display: block;
  margin-bottom: 4px;
}
.altar-popup__by {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.altar-popup__intention {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 2px solid var(--gold);
  background: rgba(212, 175, 55, 0.06);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  border-radius: 4px;
}
.altar-popup__state {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}
.altar-popup__state.open { color: #ffb04a; }
.altar-popup__state.closed { color: var(--ink-faint); }
.altar-popup .btn-accompany {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

/* ── Carrusel inferior de altares ─────────────────────────────────── */

.altar-carousel-wrap {
  flex: 0 0 auto;
  padding: 8px 12px 10px;
  background: linear-gradient(180deg,
    rgba(10, 8, 21, 0) 0%,
    rgba(10, 8, 21, 0.85) 30%,
    rgba(10, 8, 21, 0.96) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  position: relative;
  z-index: 600;
}
.altar-carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.altar-carousel-title { color: var(--gold); font-weight: 600; }
.altar-carousel-hint {
  color: var(--ink-faint);
  text-decoration: none;
  font-weight: 500;
}
.altar-carousel-hint:hover { color: var(--gold); }

.altar-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.45) transparent;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.altar-carousel::-webkit-scrollbar { height: 6px; }
.altar-carousel::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 3px;
}
.altar-carousel__loading,
.altar-carousel__empty {
  flex: 0 0 100%;
  padding: 14px 18px;
  text-align: center;
  color: var(--ink-faint);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}
.altar-carousel__empty a { color: var(--gold); }

.altar-carousel-card {
  flex: 0 0 280px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(20, 16, 30, 0.92);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.altar-carousel-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.48);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.altar-carousel-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25),
              0 0 0 2px rgba(212, 175, 55, 0.55);
}
/* Mini altar SVG dentro de la tarjeta del carrusel */
.altar-carousel-card__altar {
  flex: 0 0 48px;
  width: 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 0 6px rgba(255, 180, 60, 0.45))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.altar-carousel-card__altar svg {
  width: 100%;
  height: 100%;
}
.altar-carousel-card__body { flex: 1; min-width: 0; }
.altar-carousel-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.altar-carousel-card__meta {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.altar-carousel-card__intention {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-faint);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.altar-carousel-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.altar-carousel-card__state.open { color: #ffb04a; }
.altar-carousel-card__state.closed { color: var(--ink-faint); opacity: 0.7; }
.altar-carousel-card__count { color: var(--gold); }

/* Ajustes móviles */
@media (max-width: 720px) {
  .altar-carousel-wrap { padding: 6px 10px 8px; }
  .altar-carousel-card { flex: 0 0 230px; padding: 8px 12px; }
}

/* ── Animación: nueva plegaria entrando al altar ─────────────────────
   .companion-card--fresh    → entrada suave de otra persona
   .companion-card--just-mine → entrada destacada cuando soy yo el que se
                                acaba de sumar (más glow, más larga). */
.companion-card--fresh,
.companion-card--just-mine {
  animation: companion-spawn 1.6s ease-out both;
  will-change: transform, opacity, box-shadow;
}
.companion-card--just-mine {
  animation: companion-spawn-mine 2.2s ease-out both;
}
@keyframes companion-spawn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    box-shadow: 0 0 0 rgba(255, 200, 100, 0);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    box-shadow: 0 0 28px rgba(255, 200, 100, 0.55);
    border-color: rgba(255, 200, 100, 0.65);
  }
  100% {
    opacity: 1;
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
}
@keyframes companion-spawn-mine {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    box-shadow: 0 0 0 rgba(255, 220, 130, 0);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
    box-shadow:
      0 0 36px rgba(255, 220, 130, 0.85),
      0 0 0 2px rgba(255, 220, 130, 0.55);
    border-color: rgba(255, 220, 130, 0.85);
  }
  60% {
    transform: scale(1.02);
    box-shadow:
      0 0 28px rgba(255, 220, 130, 0.55),
      0 0 0 2px rgba(255, 220, 130, 0.35);
  }
  100% {
    opacity: 1;
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
}

/* ── Mis altares (en /mis-velas.html) ─────────────────────────────── */

.mis-altares-section,
.mis-velas-section {
  margin-bottom: 40px;
}
.mis-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.mis-section-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.mis-section-meta {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
}
.mis-section-meta strong { color: var(--gold); }
.mis-new-badge {
  background: rgba(255, 170, 60, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 170, 60, 0.45);
  color: #ffb04a !important;
}

.mis-altares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.mis-altar-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  padding-right: 44px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(20, 16, 30, 0.78);
  color: var(--ink);
  text-decoration: none;
  font-family: Inter, system-ui, sans-serif;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mis-altar-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid rgba(217, 119, 119, 0.35);
  background: rgba(20, 16, 30, 0.85);
  color: #d97777;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mis-altar-card:hover .mis-altar-delete-btn { opacity: 1; }
.mis-altar-delete-btn:hover {
  background: rgba(217, 119, 119, 0.18);
  border-color: #d97777;
}
.mis-altar-delete-btn:disabled { opacity: 0.3; cursor: default; }
.mis-altar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.mis-altar-card.has-new {
  border-color: rgba(255, 170, 60, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 170, 60, 0.30),
              0 6px 20px rgba(0, 0, 0, 0.45);
  background: rgba(28, 22, 38, 0.85);
}
.mis-altar-card.has-new .mis-altar-card__title {
  color: #fff5c0;
}
.mis-altar-card__candle { flex: 0 0 auto; }
.mis-altar-card__candle .candle-figure { margin: 0; }
.mis-altar-card__body { flex: 1; min-width: 0; }
.mis-altar-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mis-altar__new-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10.5px;
  background: rgba(255, 170, 60, 0.18);
  border: 1px solid rgba(255, 170, 60, 0.55);
  color: #ffb04a;
  letter-spacing: 0.02em;
  animation: mis-altar-new-pulse 1.6s ease-in-out infinite;
}
@keyframes mis-altar-new-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 170, 60, 0); }
  50%      { box-shadow: 0 0 12px rgba(255, 170, 60, 0.55); }
}
.mis-altar-card__meta {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.mis-altar-card__counts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mis-altar__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: 0.03em;
}
.mis-altar__chip.open {
  background: rgba(255, 150, 60, 0.12);
  border: 1px solid rgba(255, 150, 60, 0.40);
  color: #ffb04a;
}
.mis-altar__chip.closed {
  background: rgba(180, 200, 220, 0.06);
  border: 1px solid rgba(180, 200, 220, 0.22);
  color: var(--ink-faint);
}
.mis-altar__chip.archived {
  background: rgba(110, 120, 140, 0.08);
  border: 1px solid rgba(110, 120, 140, 0.22);
  color: var(--ink-faint);
  opacity: 0.8;
}
.mis-altar__count {
  font-size: 11.5px;
  color: var(--gold);
  font-family: 'JetBrains Mono', Consolas, monospace;
}

/* Botón nativo de compartir (Web Share API) — destacado, va arriba */
.altar-share__native {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.10));
  border: 1px solid rgba(212, 175, 55, 0.50);
  color: var(--gold);
}
.altar-share__native:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0.18));
  border-color: var(--gold);
}

/* ── Mis velas: tarjeta con barra de %, tiempo y coords ──────────── */
.gallery-item--rich {
  position: relative;
  flex-direction: row;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(20, 16, 30, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Botón de borrar vela: esquina superior derecha de cada tarjeta */
.mis-velas-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid rgba(217, 119, 119, 0.35);
  background: rgba(20, 16, 30, 0.85);
  color: #d97777;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.gallery-item--rich:hover .mis-velas-delete-btn { opacity: 1; }
.mis-velas-delete-btn:hover {
  background: rgba(217, 119, 119, 0.18);
  border-color: #d97777;
}
.mis-velas-delete-btn:disabled { opacity: 0.3; cursor: default; }

/* Diálogo de confirmación */
.confirm-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  flex-wrap: wrap;
}
.btn-danger {
  background: #c0564f;
  border-color: #c0564f;
  color: #fff;
}
.btn-danger:hover { background: #a8443e; border-color: #a8443e; }
.gallery-item--rich:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.gallery-item--rich .gallery-item__candle {
  flex: 0 0 60px;
  text-decoration: none;
}
.gallery-item--rich .gallery-item__candle .candle-figure { margin: 0; }
.gallery-item--rich .gallery-item__title { text-decoration: none; color: inherit; }
.gallery-item--rich .info { flex: 1; min-width: 0; }
.mis-velas-progress {
  margin: 8px 0 6px;
}
.mis-velas-progress__bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.mis-velas-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 170, 60, 0.55), var(--gold));
  border-radius: 3px;
  transition: width 0.8s ease;
}
.mis-velas-progress__row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.mis-velas-progress__pct {
  font-family: 'JetBrains Mono', Consolas, monospace;
  color: var(--gold);
  font-weight: 600;
}
.mis-velas-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

/* Versión compacta de las coordenadas (para tarjetas chicas) */
.weather-coords--compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 10.5px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px dashed rgba(212, 175, 55, 0.30);
  color: var(--ink-faint);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.weather-coords--compact:hover {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
}

/* ── Mis altares: composición real + desplegable de plegarias ───── */
.mis-altar-card {
  display: flex;
  flex-direction: column;
  /* sobrescribe el padding del estilo previo */
  padding: 0;
  text-decoration: none;
}
.mis-altar-card__main {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
}
.mis-altar-card__altar {
  flex: 0 0 64px;
  width: 64px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 0 6px rgba(255, 180, 60, 0.45))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  text-decoration: none;
}
.mis-altar-card__altar svg { width: 100%; height: 100%; }
.mis-altar-card__title-link { text-decoration: none; color: inherit; }
.mis-altar-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mis-altar__expand-btn {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mis-altar__expand-btn:hover {
  background: rgba(212, 175, 55, 0.10);
  border-color: var(--gold);
}
.mis-altar__expand-btn.is-open {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold);
  color: var(--gold);
}
.mis-altar__chevron {
  font-size: 10px;
  line-height: 1;
}

/* Panel desplegable */
.mis-altar-card__plegarias[hidden] { display: none; }
.mis-altar-card__plegarias {
  padding: 0 16px 16px;
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mis-altar__plegarias-empty {
  grid-column: 1 / -1;
  padding: 16px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  font-family: Inter, system-ui, sans-serif;
}
.mis-plegaria {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.12);
  background: rgba(16, 14, 24, 0.72);
}
.mis-plegaria__candle { flex: 0 0 auto; }
.mis-plegaria__candle .candle-figure { margin: 0; }
.mis-plegaria__body { flex: 1; min-width: 0; }
.mis-plegaria__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.mis-plegaria__head strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  color: var(--gold);
}
.mis-plegaria__time {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  color: var(--ink-faint);
  opacity: 0.7;
}
.mis-plegaria__blessing {
  margin: 0 0 6px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}
.mis-plegaria__status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: var(--gold);
}
.mis-plegaria__status.finished {
  background: rgba(180, 200, 220, 0.05);
  border-color: rgba(180, 200, 220, 0.20);
  color: var(--ink-faint);
}

/* Coords + ciudad apilados a la izquierda al pie de la tarjeta */
.mis-velas-loc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.mis-velas-place {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-align: left;
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Picker de altar: feedback agua/tierra ──────────────────────── */

.map-picker-info--land {
  border-color: rgba(80, 200, 130, 0.30);
  background: rgba(80, 200, 130, 0.06);
}
.map-picker-info--water {
  border-color: rgba(255, 80, 96, 0.40);
  background: rgba(255, 80, 96, 0.08);
  color: #ffc9cf;
}
.map-picker-info--water strong { color: #ff9aa0; }

/* Pin custom con anillo pulsante: rojo en agua, dorado en tierra */
.picker-pin-wrap { background: transparent !important; border: none !important; }
.picker-pin {
  position: relative;
  width: 22px;
  height: 22px;
}
.picker-pin__dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pin-color, #ffb650);
  box-shadow: 0 0 8px var(--pin-color, #ffb650);
}
.picker-pin__ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--pin-color, #ffb650);
  opacity: 0.65;
  animation: picker-pin-pulse 1.6s ease-out infinite;
}
.picker-pin--water .picker-pin__dot,
.picker-pin--water .picker-pin__ring {
  filter: drop-shadow(0 0 6px #ff5060);
}
@keyframes picker-pin-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0;    }
}

/* ══════════════════════════════════════════════════════════════════════
   BOTÓN "i" DE INFORMACIÓN + VENTANA EMERGENTE (common.js → infoBtnHTML)
   Para descargar de texto los formularios: lo esencial visible, la
   explicación larga detrás de un botoncito.
   ══════════════════════════════════════════════════════════════════════ */

.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.10);
  color: var(--gold);
  font-family: Georgia, 'Playfair Display', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.info-btn:hover {
  background: rgba(212, 175, 55, 0.25);
  transform: scale(1.1);
}

.info-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 3, 12, 0.72);
  backdrop-filter: blur(4px);
  animation: info-modal-fade 0.18s ease;
}
@keyframes info-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.info-modal {
  position: relative;
  max-width: 440px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 26px 28px 22px;
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 14px;
  background: linear-gradient(180deg, #17112a, #0e0a1c);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.info-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-faint);
  font-size: 13px;
  cursor: pointer;
}
.info-modal__close:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
.info-modal__title {
  margin: 0 0 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  color: var(--gold);
}
.info-modal__body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.info-modal__body p { margin: 0 0 10px; }
.info-modal__body p:last-child { margin-bottom: 0; }
.info-modal__body a { color: var(--gold); }

/* Variante compacta del aviso de ubicación (la explicación larga vive
   ahora en la ventana de información) */
.anchor-info--compact { padding: 12px 16px; }
.anchor-info--compact .anchor-info__title { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   MAPA DEL ALTAR — pantalla completa
   El shell agrupa buscador + mapa + barra de info; al expandir pasa a
   fixed ocupando toda la ventana, con el buscador siempre visible.
   ══════════════════════════════════════════════════════════════════════ */

.map-picker-shell {
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.map-picker-frame {
  position: relative;
}
.map-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 800; /* por encima de los panes de Leaflet (≤700) */
  width: 36px;
  height: 36px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 8px;
  background: rgba(12, 9, 21, 0.88);
  color: var(--gold);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease;
}
.map-fs-btn:hover { background: rgba(212, 175, 55, 0.18); }

.map-picker-shell--full {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: none;
  background: #0c0915;
}
.map-picker-shell--full .map-picker-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.map-picker-shell--full .map-picker {
  flex: 1;
  height: auto;
  min-height: 0;
}
/* En fullscreen el botón se separa de los controles de zoom de Leaflet */
.map-picker-shell--full .map-fs-btn {
  top: 14px;
  right: 14px;
}
/* Evita el scroll del fondo mientras el mapa está expandido */
body.map-fullscreen-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   VELA SOBRE ALTAR (pestaña Altares) — la vela del catálogo posada en
   una peana de piedra con velitas acompañantes, para diferenciar a
   simple vista el flujo "altar" del flujo "vela suelta".
   ══════════════════════════════════════════════════════════════════════ */

.candle-mini--altar {
  width: 140px;            /* la peana es más ancha que la vela */
  align-items: flex-end;
}
.candle-on-altar {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.candle-on-altar__candle {
  position: relative;
  z-index: 2;
  /* la vela apoya su base sobre la plataforma superior de la peana */
  margin-bottom: -38px;
}
.candle-on-altar__base {
  width: 140px;
  height: 46px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   CERA FUNDIDA — charco en formación, churretes y forma final realista
   ══════════════════════════════════════════════════════════════════════ */

/* Charco en la base mientras arde. Crece con --melt-p y se desplaza
   ligeramente con el viento (mismo drift que el humo). */
.melt-pool {
  position: absolute;
  bottom: calc(var(--cw, 120px) * -0.05);
  left: 50%;
  width: calc(var(--cw, 120px) * 1.55);
  transform: translateX(calc(-50% + var(--smoke-drift-x, 0) * var(--cw, 120px) * 0.05));
  color: var(--wax-color);
  pointer-events: none;
  z-index: 0;
}
.melt-pool svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Churretes que caen desde el borde superior de la cera. Nacen donde
   está el nivel actual (--wax-frac) y se alargan con la combustión. */
.melt-drips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.melt-drip {
  position: absolute;
  /* Nace en el borde frontal de la cera (a ras del labio de la circunferencia),
     no en el borde trasero del rectángulo de cera. El desplazamiento extra
     (≈ media altura de la elipse del rim, proporcional al ancho) baja el
     origen del churrete hasta la curva delantera del rim. */
  top: calc((1 - var(--wax-frac, 1)) * 100% + var(--cw, 120px) * 0.045);
  left: var(--drip-x);
  width: calc(var(--cw, 120px) * var(--drip-w, 0.04));
  height: calc(var(--drip-k, 0.5) * var(--melt-p, 0) * 100%);
  max-height: calc(var(--wax-frac, 1) * 100%);
  /* Hilo fino de cera: sombreado lateral para dar volumen cilíndrico y un
     reflejo tenue a un lado, sin el brillo plástico de antes. */
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(255, 255, 255, 0.28) 32%,
      rgba(255, 255, 255, 0.05) 60%,
      rgba(0, 0, 0, 0.22) 100%),
    var(--wax-color);
  /* arriba estrecho (nace del borde), se ensancha muy poco al bajar */
  border-radius: 40% 40% 45% 45% / 14% 14% 8% 8%;
  opacity: clamp(0, var(--melt-p, 0) * 12 - 0.35, 1);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  transition: height 1s linear, top 1s linear;
}
/* Gota de cera acumulada en la punta del churrete: cuelga, más ancha que el
   hilo, con su propio reflejo — el detalle que lo hace parecer cera real. */
.melt-drip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(var(--cw, 120px) * var(--drip-w, 0.04) * var(--drip-b, 2));
  height: calc(var(--cw, 120px) * var(--drip-w, 0.04) * var(--drip-b, 2) * 1.25);
  transform: translate(-50%, -38%);
  background:
    radial-gradient(45% 38% at 36% 30%,
      rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%),
    var(--wax-color);
  /* forma de gota: redonda abajo, ligeramente apuntada arriba */
  border-radius: 52% 52% 56% 56% / 46% 46% 60% 60%;
  box-shadow:
    inset -1px -1.5px 2px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Forma final fundida: ocupa el ancho de la figura, posada en la base */
.wax-shape--melted {
  align-items: flex-end;
}
.wax-shape--melted svg.melt-svg {
  width: 120%;
  max-width: none;
  max-height: 100%;
}