/* Bodegón de la portada (ui/bodegon.js): la vela de té y los lentes, dibujados en línea a los pies del título.
   Decorativo y detrás del texto: z-index -1 dentro del contexto de apilamiento que ya crea .hero, así que
   .hero__inner no se posiciona y el offsetParent de las letras (hero-exit.js) no cambia.
   Cada pieza es un SVG estático que se pinta una vez; la llama y los brillos son <svg> aparte que solo cambian
   transform y opacity. Sin filtros, blur ni blend modes: los resplandores son degradados (en el <defs> de index.html). */
.bodegon {
  --brass: color-mix(in oklab, var(--bone) 70%, rgb(var(--ember)) 30%);   /* latón de los lentes y de la cápsula */
  --glass: color-mix(in oklab, var(--cream) 42%, transparent);
  --spark: color-mix(in oklab, var(--cream), rgb(var(--ember)) 40%);       /* el color de la chispa del cursor */
  --k: 1;                     /* grosor del trazo: sube en las piezas pequeñas para no bajar de ~1 px */
  --estudio: -129deg;         /* luz de estudio (LIGHT.key, arriba a la izquierda): hacia ahí miran los brillos en reposo */
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;           /* las piezas pueden sangrar por el borde sin crear scroll horizontal */
  pointer-events: none;
  contain: strict;
}

.bodegon__pieza { position: absolute; }
.bodegon svg {
  position: absolute;
  display: block;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bodegon__base,
.bodegon__llama { inset: 0; width: 100%; height: 100%; }
.bodegon__llama { transform-origin: 50% 50%; }          /* la mecha está en el centro del viewBox */

/* Brillos de los lentes: dibujados mirando a 0°; un solo rotate() los orienta hacia la luz */
.bodegon__brillo {
  left: var(--x);
  top: var(--y);
  width: 46%;                                           /* 92 de los 200 del viewBox de los lentes */
  aspect-ratio: 1;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  transform: rotate(var(--estudio));
  opacity: 0.55;
}
.bodegon__brillo[data-brillo="izq"] { --x: 26.25%; --y: 63.47%; }   /* centros de los cristales, ya girados −24° */
.bodegon__brillo[data-brillo="der"] { --x: 73.75%; --y: 36.53%; }

/* ---------- Colocación: escritorio y portátil (en las esquinas bajas, como en la portada) ---------- */
.bodegon__vela {
  --d: clamp(84px, min(9vw, 19svh), 172px);
  width: var(--d);
  aspect-ratio: 1;
  left: calc(13vw - var(--d) / 2);
  top: calc(78svh - var(--d) / 2);
}
.bodegon__lentes {
  --w: clamp(150px, min(15vw, 32svh), 290px);
  width: var(--w);
  aspect-ratio: 200 / 157;
  left: calc(85vw - var(--w) / 2);
  top: calc(71svh - var(--w) * 0.3925);
}

/* Vertical (móvil, tableta): en la franja libre bajo el botón; los lentes sangran por la derecha */
@media (orientation: portrait) and (max-width: 1024px) {
  .bodegon { --k: 1.25; }
  .bodegon__vela { --d: clamp(64px, min(24vw, 13.5svh), 150px); left: calc(16vw - var(--d) / 2); top: auto; bottom: 5svh; }
  .bodegon__lentes { --w: clamp(112px, min(42vw, 21svh), 270px); left: calc(84vw - var(--w) / 2); top: auto; bottom: 2.5svh; }
}
/* Vertical bajo (320×568): el botón cae en el pliegue; pasan a la banda entre la cabecera y el título */
@media (orientation: portrait) and (max-height: 600px) {
  .bodegon { --k: 1.6; }
  .bodegon__vela { --d: 64px; top: calc(var(--nav-h) + 30px); bottom: auto; }
  .bodegon__lentes { --w: 104px; top: calc(var(--nav-h) + 26px); bottom: auto; }
}
/* Horizontal bajo (móvil girado): a los flancos del título */
@media (orientation: landscape) and (max-height: 500px) {
  .bodegon { --k: 1.6; }
  .bodegon__vela { --d: min(9vw, 20svh); left: calc(7vw - var(--d) / 2); top: calc(72svh - var(--d) / 2); }
  .bodegon__lentes { --w: min(15vw, 30svh); left: calc(92vw - var(--w) / 2); top: calc(34svh - var(--w) * 0.3925); }
}

/* ---------- Vela de té, vista desde arriba (viewBox centrado en la mecha) ---------- */
.vela__sombra { opacity: 0.9; }                         /* asienta el vaso en la tela */
.vela__vaso { stroke: var(--glass); stroke-width: calc(1.1px * var(--k)); }
.vela__vaso--fondo { stroke-width: calc(0.6px * var(--k)); opacity: 0.6; }   /* el canto de abajo, descentrado: paralaje cenital */
.vela__reflejo { stroke: var(--cream); stroke-width: calc(2.2px * var(--k)); opacity: 0.8; }
.vela__reflejo--tenue { stroke-width: calc(1.4px * var(--k)); opacity: 0.35; }
.vela__capsula { stroke: var(--brass); stroke-width: calc(1px * var(--k)); opacity: 0.75; }
.vela__rizo { stroke: var(--brass); stroke-width: 2.4px; stroke-dasharray: 0.8 2.2; opacity: 0.5; }   /* borde rizado del aluminio */
.vela__cera { opacity: 0.8; }
.vela__charco { stroke: var(--cream); stroke-width: calc(0.7px * var(--k)); opacity: 0.3; }
.vela__mecha { stroke: var(--ink-dark); stroke-width: 1.6px; }

.llama__halo { opacity: 0.5; }
.llama__brasa { fill: rgb(var(--ember)); opacity: 0.6; }
.llama__aura { opacity: 0.75; }
.llama__nucleo { fill: var(--spark); }

/* ---------- Lentes de alambre (girados como en la portada) ---------- */
.lentes__sombra { stroke: var(--ink-dark); stroke-width: calc(3.4px * var(--k)); opacity: 0.3; }
.lentes__patilla { stroke: var(--brass); stroke-width: calc(1.2px * var(--k)); opacity: 0.55; }
.lentes__cristal {
  fill: color-mix(in oklab, var(--cream) 5%, transparent);
  stroke: var(--glass);
  stroke-width: calc(0.6px * var(--k));
  opacity: 0.8;
}
.lentes__aro { stroke: var(--brass); stroke-width: calc(1.7px * var(--k)); }
.lentes__puente { stroke: var(--brass); stroke-width: calc(1.5px * var(--k)); }
.lentes__plaqueta { stroke: var(--brass); stroke-width: calc(0.9px * var(--k)); opacity: 0.6; }

.brillo__aro { stroke: var(--cream); stroke-width: calc(1.4px * var(--k)); opacity: 0.9; }
.brillo__cristal,
.brillo__punto { stroke: color-mix(in oklab, var(--cream), rgb(var(--ember)) 25%); stroke-width: calc(2.2px * var(--k)); opacity: 0.85; }
.brillo__punto { stroke-width: calc(1.6px * var(--k)); opacity: 0.55; }

/* Paradas de los degradados (<defs> de index.html) */
.bod-sombra-0 { stop-color: var(--ink-dark); stop-opacity: 0.55; }
.bod-sombra-1 { stop-color: var(--ink-dark); stop-opacity: 0; }
.bod-cera-0 { stop-color: var(--cream); stop-opacity: 0.95; }
.bod-cera-1 { stop-color: var(--cream); stop-opacity: 0.78; }
.bod-cera-2 { stop-color: var(--bone); stop-opacity: 0.5; }
.bod-cera-3 { stop-color: var(--mute); stop-opacity: 0.35; }
.bod-halo-0 { stop-color: rgb(var(--ember)); stop-opacity: 0.7; }
.bod-halo-1 { stop-color: rgb(var(--ember)); stop-opacity: 0.25; }
.bod-halo-2 { stop-color: rgb(var(--ember)); stop-opacity: 0; }
.bod-aura-0 { stop-color: var(--cream); stop-opacity: 1; }
.bod-aura-1 { stop-color: color-mix(in oklab, var(--cream), rgb(var(--ember)) 40%); stop-opacity: 0.75; }
.bod-aura-2 { stop-color: rgb(var(--ember)); stop-opacity: 0; }

/* ---------- Estados previos a la intro (solo con JS): hasta el título no se ve nada ----------
   Sin JS (o si el arranque falla y index.html vuelve a .no-js), lo de arriba ya es el estado final. */
.js .bodegon__pieza { opacity: 0; }
.js .bodegon__llama { opacity: 0; transform: scale(0.2); }
.js .bodegon__brillo { opacity: 0; }
.js .lentes__aro { stroke-dasharray: 1 1; stroke-dashoffset: 1; }   /* pathLength="1": se trazan una vez en la intro */

/* Capa propia solo mientras algo se mueve: ui/bodegon.js quita la clase 1 s después */
.bodegon.is-vivo :is(.bodegon__llama, .bodegon__brillo),
.bodegon.is-mueve .bodegon__pieza { will-change: transform, opacity; }