/* ===== El Árbol — estilos compartidos =====
   Tipografía: Cinzel (serif de inscripción, tracked, para títulos) + Cormorant
   Garamond itálica (para el texto de lectura) + Jost (sans liviana, solo para
   los nombres que aparecen al costado de cada esfera — necesitan leerse bien
   en tamaño chico, sin la tensión de una serif tracked). */

:root{
  --gold:#cfa94a;
  --gold-soft:#a8863c;
  --ink:#e8e6df;
  --ink-dim:#9a9890;
  --bg:#03040a;
  --font-display:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-title:'Cinzel', 'Times New Roman', Georgia, serif;
  --font-label:'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-logo:'Playfair Display', 'Times New Roman', Georgia, serif;
  --bar-height:58px;
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:.01em;
  overflow-x:hidden;
  padding-top:var(--bar-height);
}

/* el body es una columna flex: el contenido principal crece para llenar
   la pantalla y el pie de página queda pegado al fondo, sin scroll de más
   en las páginas cortas, y de forma natural al final en las páginas largas */
body{
  display:flex;
  flex-direction:column;
}

/* ---------- Barra superior — el logo, siempre presente ---------- */

.site-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--bar-height);
  background:rgba(3,4,10,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(207,169,74,.16);
}

.site-bar-inner{
  text-align:center;
  line-height:1.1;
}

.site-bar-eyebrow{
  display:block;
  font-family:var(--font-title);
  font-weight:500;
  font-size:8.5px;
  letter-spacing:.42em;
  color:var(--ink-dim);
  text-transform:uppercase;
  overflow:hidden;
  opacity:0;
  max-height:0;
  margin-bottom:0;
  transition:opacity .4s ease, max-height .4s ease, margin-bottom .4s ease;
}
.site-bar:hover .site-bar-eyebrow,
.site-bar:focus-within .site-bar-eyebrow{
  opacity:1;
  max-height:20px;
  margin-bottom:4px;
}

.site-bar-title{
  display:block;
  font-family:var(--font-logo);
  font-weight:700;
  font-size:15px;
  letter-spacing:.03em;
  color:#f4f1e8;
}
.site-bar-title em{
  font-style:italic;
  font-weight:400;
  margin:0 .12em;
}

@media (max-width:520px){
  :root{ --bar-height:52px; }
  .site-bar-title{ font-size:12px; }
  .site-bar-eyebrow{ font-size:7.5px; letter-spacing:.32em; }
}

/* ---------- Velo de pausa — cubre el contenido con un desenfoque; el
   mensaje del contador es lo único nítido en pantalla, pero la página
   sigue siendo visible y scrolleable debajo, como a través de un vidrio ---------- */

.pause-veil{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 24px;
  text-align:center;
  background:rgba(250,248,243,.58);
  backdrop-filter:blur(26px) saturate(1.05);
  -webkit-backdrop-filter:blur(26px) saturate(1.05);
  transition:opacity .9s ease;
}

.pause-veil.is-paused{
  opacity:0;
  pointer-events:none;
}

.pause-veil-content{
  max-width:520px;
}

.pause-veil-kicker{
  display:block;
  font-family:var(--font-title);
  font-weight:500;
  font-size:11px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:#8a8578;
  margin-bottom:18px;
}
.pause-veil-kicker em{ font-style:italic; font-weight:400; }

.pause-veil-title{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  color:#221f1c;
  margin:0 0 22px;
  letter-spacing:.01em;
}

.pause-veil-msg{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.05rem;
  color:#4a463d;
  margin:0 0 14px;
}

.pause-veil-timer{
  font-family:var(--font-title);
  font-weight:600;
  font-size:clamp(1.7rem, 5vw, 2.6rem);
  letter-spacing:.05em;
  color:#8a6d1e;
  margin:0 0 16px;
}

.pause-veil-sub{
  font-family:var(--font-label);
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8a8578;
  margin:0;
}

@media (max-width:520px){
  .pause-veil-title{ margin-bottom:16px; }
  .pause-veil-timer{ margin-bottom:12px; }
}

/* ---------- Fondo de espacio exterior ---------- */

.space-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 55% 45% at 22% 18%, rgba(120,60,160,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 30%, rgba(40,90,140,0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 85%, rgba(160,110,30,0.10), transparent 65%),
    radial-gradient(circle at 50% 50%, #0a0c16 0%, #050611 45%, #020208 100%);
  overflow:hidden;
}

.nebula{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.35;
  mix-blend-mode:screen;
  animation:drift 60s ease-in-out infinite alternate;
}
.nebula.n1{ width:520px; height:420px; top:-10%; left:-8%; background:radial-gradient(circle, rgba(130,70,190,.55), transparent 70%); animation-duration:70s; }
.nebula.n2{ width:600px; height:480px; bottom:-15%; right:-10%; background:radial-gradient(circle, rgba(40,120,170,.5), transparent 70%); animation-duration:85s; animation-direction:alternate-reverse; }
.nebula.n3{ width:420px; height:420px; top:35%; right:15%; background:radial-gradient(circle, rgba(200,150,50,.35), transparent 70%); animation-duration:95s; }

@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(30px,-25px) scale(1.08); }
}

.stars{ position:absolute; inset:0; }

.star{
  position:absolute;
  background:#fff;
  border-radius:50%;
  opacity:.35;
  animation:twinkle ease-in-out infinite;
}

.star--soft{
  animation-name:twinkle-soft;
}

@keyframes twinkle{
  0%,100%{ opacity:.18; }
  50%{ opacity:.75; }
}

@keyframes twinkle-soft{
  0%,100%{ opacity:.3; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.4); }
}

/* ---------- Contenedor principal ---------- */

.stage{
  position:relative;
  flex:1 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:2.5vh 20px 3vh;
}

.tree-wrap{
  position:relative;
  width:100%;
  max-width:500px;
}

svg#tree{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}

/* Etiqueta flotante — el nombre de la esfera bajo el cursor aparece
   al lado derecho del gráfico, fina y sutil, como suspendida en el espacio */
.tree-hover-label{
  position:absolute;
  left:100%;
  top:50%;
  margin-left:clamp(18px, 4vw, 40px);
  transform:translateY(-50%);
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:1.1rem;
  letter-spacing:.12em;
  color:var(--gold-soft);
  opacity:0;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .8s ease;
}
.tree-hover-label.is-visible{
  opacity:.62;
  animation:treeLabelFloat 4.5s ease-in-out infinite;
}

@keyframes treeLabelFloat{
  0%,100%{ transform:translateY(-50%); }
  50%{ transform:translateY(calc(-50% - 7px)); }
}

@media (max-width:860px){
  .tree-hover-label{ display:none; }
}

/* flor de la vida de fondo — gira y respira, muy despacio */
.flower-outline{
  fill:none;
  stroke:#1c3a3a;
  stroke-width:1;
  opacity:.4;
}
.flower-line{
  fill:none;
  stroke:#193232;
  stroke-width:.8;
  opacity:.38;
}
.flower-live{
  transform-box:view-box;
  transform-origin:300px 380px;
  animation:flowerSpin 260s linear infinite, flowerBreathe 30s ease-in-out infinite;
}
@keyframes flowerSpin{
  from{ rotate:0deg; }
  to{ rotate:360deg; }
}
@keyframes flowerBreathe{
  0%,100%{ scale:1; }
  50%{ scale:1.018; }
}

/* el árbol entero flota, como un solo cuerpo suspendido */
.tree-live{
  transform-box:view-box;
  transform-origin:300px 400px;
  animation:treeDrift 17s ease-in-out infinite alternate;
}
@keyframes treeDrift{
  0%{ transform:translateY(0) rotate(-0.6deg); }
  100%{ transform:translateY(-7px) rotate(0.6deg); }
}

/* caminos que conectan las esferas */
.path-line{
  stroke:var(--gold-soft);
  stroke-width:1.4;
  opacity:.5;
  fill:none;
}

/* rayos de la esfera origen */
.origen-rays{
  transform-origin:300px 141px;
  animation:rotateRays 90s linear infinite;
}
.origen-ray{
  stroke:#fff;
  stroke-width:1;
  opacity:.18;
}
@keyframes rotateRays{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* ---------- Esferas clickeables ---------- */

.sefira-link{
  cursor:pointer;
  outline:none;
}

.sefira-halo{
  fill:var(--c);
  opacity:.28;
  filter:blur(9px);
  transition:opacity .4s ease, r .4s ease;
}

.sefira-core{
  transition:filter .35s ease, transform .3s ease;
  transform-box:fill-box;
  transform-origin:center;
  animation:coreBreathe 6s ease-in-out infinite;
}

/* cada esfera respira a su propio ritmo, desfasada de las demás */
@keyframes coreBreathe{
  0%,100%{ scale:1; }
  50%{ scale:1.045; }
}
.sefirot > a:nth-child(1) .sefira-core{ animation-duration:7.5s;  animation-delay:-1.1s; }
.sefirot > a:nth-child(2) .sefira-core{ animation-duration:6.2s;  animation-delay:-3.4s; }
.sefirot > a:nth-child(3) .sefira-core{ animation-duration:8.1s;  animation-delay:-0.6s; }
.sefirot > a:nth-child(4) .sefira-core{ animation-duration:5.6s;  animation-delay:-2.2s; }
.sefirot > a:nth-child(5) .sefira-core{ animation-duration:7.0s;  animation-delay:-4.1s; }
.sefirot > a:nth-child(6) .sefira-core{ animation-duration:6.8s;  animation-delay:-1.8s; }
.sefirot > a:nth-child(7) .sefira-core{ animation-duration:8.6s;  animation-delay:-3.0s; }
.sefirot > a:nth-child(8) .sefira-core{ animation-duration:5.9s;  animation-delay:-0.2s; }
.sefirot > a:nth-child(9) .sefira-core{ animation-duration:7.3s;  animation-delay:-2.7s; }
.sefirot > a:nth-child(10) .sefira-core{ animation-duration:6.4s; animation-delay:-4.5s; }

.sefira-rim{
  fill:none;
  stroke:rgba(255,255,255,.25);
  stroke-width:1;
  transition:stroke .35s ease;
}

.sefira-link:hover .sefira-core,
.sefira-link:focus-visible .sefira-core{
  filter:
    drop-shadow(0 0 6px var(--c))
    drop-shadow(0 0 16px var(--c))
    drop-shadow(0 0 34px var(--c))
    brightness(1.5);
  transform:scale(1.06);
}
.sefira-link:hover .sefira-halo,
.sefira-link:focus-visible .sefira-halo{
  opacity:.85;
  r:46;
}
.sefira-link:hover .sefira-rim,
.sefira-link:focus-visible .sefira-rim{
  stroke:#fff;
}

/* la esfera origen siempre irradia un poco más */
.origen-link .sefira-halo{ opacity:.55; }

/* ---------- El Vacío — el agujero negro en el centro del árbol ---------- */

/* invisible por diseño: ni forma, ni brillo, ni etiqueta — solo se puede encontrar */
.void-link{ cursor:pointer; outline:none; }

@keyframes voidSpin{
  from{ rotate:0deg; }
  to{ rotate:360deg; }
}

/* ---------- Páginas de sefirá ---------- */

.back-link{
  position:fixed;
  top:calc(var(--bar-height) + 20px);
  left:24px;
  color:var(--gold);
  text-decoration:none;
  font-family:var(--font-title);
  font-weight:500;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid rgba(207,169,74,.4);
  padding:9px 18px;
  border-radius:999px;
  backdrop-filter:blur(6px);
  background:rgba(10,10,18,.35);
  transition:all .3s ease;
  z-index:70;
}
.back-link:hover{
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(207,169,74,.35);
  color:#fff;
}

.sefira-page{
  position:relative;
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 24px;
}

.sefira-card{
  text-align:center;
  max-width:560px;
}

.sefira-page.museum-page{
  min-height:auto;
  display:block;
  padding:14vh 0 0;
}

.hero-sphere-wrap{
  width:180px;
  height:180px;
  margin:0 auto 34px;
}

.hero-sphere-wrap svg{ width:100%; height:100%; overflow:visible; }

.hero-core{
  animation:pulseGlow 4.5s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{ filter:drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 30px var(--c)); }
  50%{ filter:drop-shadow(0 0 22px var(--c)) drop-shadow(0 0 46px var(--c)); }
}

.sefira-card h1{
  font-family:var(--font-title);
  font-weight:500;
  font-size:2.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 14px;
  color:#fff;
}
.sefira-card .art-tagline{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:.03em;
  margin:0 0 30px;
  opacity:.9;
}
.sefira-card p.meaning{
  font-family:var(--font-display);
  font-size:1.4rem;
  line-height:1.65;
  color:#dad7cd;
  font-weight:400;
  text-align:left;
}
.sefira-card p.meaning::first-letter{
  font-size:3.2em;
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  float:left;
  line-height:.78;
  padding:.04em .09em 0 0;
}

.sefira-card .divider{
  width:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  margin:28px auto;
  opacity:.6;
}

.void-hero-ring{
  transform-box:fill-box;
  transform-origin:center;
  animation:voidSpin 20s linear infinite;
}

/* media luna que abraza la esfera oscura de El Reino — gira despacio alrededor */
.hero-core-ring{
  opacity:.75;
  filter:drop-shadow(0 0 4px rgba(238,240,242,.5));
  transform-box:fill-box;
  transform-origin:center;
  animation:crescentGlow 6s ease-in-out infinite, crescentOrbit 46s linear infinite;
}

@keyframes crescentGlow{
  0%,100%{ opacity:.55; }
  50%{ opacity:.9; }
}

@keyframes crescentOrbit{
  from{ transform:rotate(125deg); }
  to{ transform:rotate(485deg); }
}

/* páginas de esfera aún sin contenido — solo la esfera irradiando luz
   y una palabra pequeña, discreta, flotando debajo */
.sefira-soon{
  font-family:var(--font-label);
  font-weight:300;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:.55;
  margin:8px 0 0;
}

/* el nombre del arte, oculto, aparece encima de "Pronto" solo al
   pasar el mouse sobre la esfera — fino, elegante, sutil */
.hero-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:.06em;
  color:var(--gold-soft);
  opacity:0;
  margin:0 0 6px;
  transform:translateY(5px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.hero-sphere-wrap:hover + .hero-name{
  opacity:.9;
  transform:translateY(0);
}

@media (max-width:520px){
  .sefira-card h1{ font-size:1.9rem; letter-spacing:.06em; }
  .sefira-card p.meaning{ font-size:1.2rem; }
  .hero-sphere-wrap{ width:140px; height:140px; }
}

/* ================================================================
   Museo — "Natural Selection" (exposición dentro de la esfera Pintura)
   ================================================================ */

.expo{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:4vh 24px 14vh;
}

.expo-hero{
  text-align:center;
  max-width:640px;
  margin:0 auto 10vh;
}
.expo-kicker{
  display:block;
  font-family:var(--font-title);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:.85;
  margin-bottom:18px;
}
.expo-title{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:3.4rem;
  color:#fff;
  margin:0 0 12px;
  letter-spacing:.01em;
}
.expo-sub{
  font-family:var(--font-display);
  font-style:italic;
  color:#cfcdc6;
  font-size:1.2rem;
  margin:0 0 34px;
}
.expo-statement{
  font-family:var(--font-display);
  font-size:1.3rem;
  line-height:1.6;
  color:#dad7cd;
  font-style:italic;
  text-align:center;
  max-width:640px;
  margin:0 auto 12vh;
  padding:0 10px;
}
.expo-statement::before{
  content:'\201C';
  color:var(--gold);
  font-size:1.4em;
  margin-right:.05em;
}
.expo-statement::after{
  content:'\201D';
  color:var(--gold);
  font-size:1.4em;
  margin-left:.05em;
}

.expo-section{
  margin:0 0 12vh;
  scroll-margin-top:calc(var(--bar-height) + 30px);
}
.expo-section-head{
  text-align:center;
  margin-bottom:6vh;
}
.expo-section-head h2{
  font-family:var(--font-title);
  font-weight:500;
  font-size:1.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 10px;
}
.expo-section-head p{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-dim);
  font-size:1.05rem;
  margin:0;
  max-width:520px;
  margin:0 auto;
}
.expo-section-head p + p{
  margin-top:10px;
}

/* carta firmada del artista, para quien compra la obra */
.expo-letter{
  max-width:620px;
  margin:0 auto;
  text-align:center;
  padding:52px 40px;
  border:1px solid rgba(207,169,74,.22);
  border-radius:4px;
  background:rgba(255,255,255,.02);
}
.expo-letter-kicker{
  font-family:var(--font-title);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:.85;
  margin:0 0 22px;
}
.expo-letter-title{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:1.6rem;
  color:#fff;
  margin:0 0 30px;
  letter-spacing:.01em;
}
.expo-letter-body{
  font-family:var(--font-display);
  font-size:1.1rem;
  line-height:1.85;
  color:#dad7cd;
  font-style:italic;
}
.expo-letter-body p{
  margin:0 0 22px;
}
.expo-letter-body p:last-child{
  margin-bottom:0;
}
.expo-letter-sign{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:1.25rem;
  color:var(--gold);
  margin:30px 0 0;
  line-height:1.5;
}

body.gallery-light .expo-letter{
  background:#fff;
  border-color:rgba(207,169,74,.3);
}
body.gallery-light .expo-letter-title{ color:#221f1c; }
body.gallery-light .expo-letter-body{ color:#3d3934; }

@media (max-width:640px){
  .expo-letter{ padding:38px 24px; }
  .expo-letter-title{ font-size:1.35rem; }
  .expo-letter-body{ font-size:1rem; }
}

/* título de introducción, grande y centrado, antes de la selección de mármoles */
.expo-lede-title{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:2.6rem;
  text-align:center;
  color:#fff;
  margin:0 0 10vh;
  letter-spacing:.01em;
}
body.gallery-light .expo-lede-title{ color:#221f1c; }

@media (max-width:640px){
  .expo-lede-title{ font-size:1.9rem; }
}

/* pieza destacada */
.expo-featured{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:center;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(207,169,74,.14);
  border-radius:4px;
  padding:36px;
}
.expo-featured-media{
  position:relative;
}
.expo-featured-media img{
  width:100%;
  display:block;
  border-radius:2px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  cursor:zoom-in;
  transition:transform .5s ease, box-shadow .5s ease;
}
.expo-featured-media img:hover{
  transform:translateY(-3px);
  box-shadow:0 40px 90px rgba(0,0,0,.65);
}
.expo-featured-tag{
  position:absolute;
  top:14px;
  left:14px;
  font-family:var(--font-title);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0a0a0a;
  background:var(--gold);
  padding:6px 12px;
  border-radius:999px;
}
.expo-featured-info h3{
  font-family:var(--font-title);
  font-weight:500;
  font-size:1.9rem;
  letter-spacing:.04em;
  color:#fff;
  margin:0 0 6px;
}
.expo-featured-info .expo-piece-tag{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.05rem;
  margin:0 0 26px;
}
.expo-spec-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 0 28px;
  padding:22px 0;
  border-top:1px solid rgba(207,169,74,.18);
  border-bottom:1px solid rgba(207,169,74,.18);
}
.expo-spec-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-family:var(--font-label);
  font-size:.86rem;
}
.expo-spec-row dt{
  color:var(--ink-dim);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.72rem;
}
.expo-spec-row dd{
  margin:0;
  color:#f1ede2;
  text-align:right;
}
.expo-price-note{
  font-family:var(--font-display);
  font-style:italic;
  color:#cfcdc6;
  font-size:.98rem;
  line-height:1.5;
}
.expo-price-note strong{
  color:var(--gold);
  font-style:normal;
  font-family:var(--font-title);
  letter-spacing:.02em;
}
.expo-inline-link{
  color:var(--gold);
  font-style:normal;
  font-family:var(--font-title);
  letter-spacing:.02em;
  text-decoration:none;
  border-bottom:1px solid rgba(207,169,74,.4);
  cursor:pointer;
  transition:color .25s ease, border-color .25s ease;
}
.expo-inline-link:hover{
  color:#fff;
  border-color:var(--gold);
}
body.gallery-light .expo-inline-link:hover{ color:#221f1c; }

/* proceso y cotización */
.expo-process-list{
  list-style:none;
  margin:0 0 40px;
  padding:0;
  counter-reset:step;
}
.expo-process-list li{
  counter-increment:step;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.expo-process-list li:first-child{ border-top:1px solid rgba(255,255,255,.06); }
.expo-process-list li::before{
  content:counter(step);
  font-family:var(--font-title);
  font-size:1.1rem;
  color:var(--gold);
  opacity:.75;
}
.expo-step-title{
  display:block;
  font-family:var(--font-label);
  font-size:.95rem;
  letter-spacing:.03em;
  color:#f1ede2;
  margin-bottom:3px;
}
.expo-step-desc{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-dim);
  font-size:1rem;
}

/* tabla de proceso y cotización */
.expo-table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 6px;
}
.expo-table thead th{
  text-align:left;
  font-family:var(--font-title);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  padding:0 0 14px;
  border-bottom:1px solid rgba(207,169,74,.35);
}
.expo-table thead th.expo-table-num{ width:64px; }
.expo-table tbody td{
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  vertical-align:top;
}
.expo-table tbody td.expo-table-num{
  font-family:var(--font-title);
  font-size:1rem;
  color:var(--gold);
  opacity:.8;
  padding-right:18px;
}
.expo-table-title{
  display:block;
  font-family:var(--font-label);
  font-size:.95rem;
  letter-spacing:.03em;
  color:#f1ede2;
  margin-bottom:4px;
}
.expo-table-desc{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-dim);
  font-size:1rem;
  line-height:1.55;
}
.expo-table tfoot td{
  padding:10px 0;
  border:none;
}
.expo-table-sub-label{
  text-align:right;
  padding-right:18px !important;
  font-family:var(--font-label);
  font-size:.82rem;
  letter-spacing:.05em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.expo-table-sub-value{
  text-align:right;
  font-family:var(--font-label);
  font-size:.95rem;
  color:#f1ede2;
}
.expo-table-total-row td{
  padding-top:16px !important;
  border-top:1px solid rgba(207,169,74,.3) !important;
}
.expo-table-total-row .expo-table-sub-label{
  font-family:var(--font-title);
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--gold);
}
.expo-table-total-row .expo-table-sub-value{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:1.5rem;
  color:#fff;
}
.expo-table-fine{
  text-align:right;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-dim);
  font-size:.88rem;
  margin:0 0 40px;
}

.expo-total{
  text-align:center;
  padding:28px;
  border:1px solid rgba(207,169,74,.3);
  border-radius:4px;
  background:rgba(207,169,74,.05);
}
.expo-total .expo-total-label{
  display:block;
  font-family:var(--font-title);
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:10px;
}
.expo-total .expo-total-value{
  display:block;
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:2.4rem;
  color:#fff;
}
.expo-total .expo-total-fine{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-dim);
  font-size:.9rem;
  margin-top:8px;
}

/* condiciones y pago */
.expo-terms{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
}
.expo-terms-list{
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-display);
  font-size:1.08rem;
  color:#dad7cd;
  line-height:1.6;
}
.expo-terms-list li{
  padding-left:22px;
  position:relative;
  margin-bottom:16px;
}
.expo-terms-list li::before{
  content:'—';
  position:absolute;
  left:0;
  color:var(--gold-soft);
}
.expo-payment{
  border:1px solid rgba(207,169,74,.22);
  border-radius:4px;
  padding:28px 30px;
  align-self:start;
}
.expo-payment-label{
  display:block;
  font-family:var(--font-title);
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.expo-payment dl{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.expo-payment dt{
  font-family:var(--font-label);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0;
}
.expo-payment dd{
  margin:0 0 2px;
  font-family:var(--font-label);
  font-size:1rem;
  color:#f1ede2;
  letter-spacing:.02em;
}
.expo-payment-note{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.02rem;
  line-height:1.6;
  color:#dad7cd;
  margin:0;
}

/* galería de variantes */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:28px 22px;
}
.gallery-card{
  display:block;
}
.gallery-card-media{
  overflow:hidden;
  border-radius:2px;
  background:#0a0a0a;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.gallery-card img{
  width:100%;
  display:block;
  cursor:zoom-in;
  transition:transform .6s ease, filter .5s ease;
}
.gallery-card:hover img{
  transform:scale(1.045);
}
.gallery-card-label{
  display:block;
  text-align:center;
  font-family:var(--font-label);
  font-size:.82rem;
  color:#e8e6df;
  margin-top:12px;
  letter-spacing:.02em;
}
.gallery-card-sub{
  display:block;
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink-dim);
  font-size:.85rem;
  margin-top:2px;
}

/* ================================================================
   Botón flotante de WhatsApp — contacto con un asesor de Mossaicco
   ================================================================ */

.whatsapp-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#25D366;
  width:34px;
  height:34px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  text-decoration:none;
  transition:box-shadow .3s ease, transform .3s ease;
}
.whatsapp-fab:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  transform:translateY(-1px);
}
.whatsapp-fab-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.whatsapp-fab-icon svg{ width:17px; height:17px; }
.whatsapp-fab-label{ display:none; }

/* ================================================================
   Pie de página — presente al final de cada página
   ================================================================ */

.site-footer{
  position:relative;
  z-index:2;
  text-align:center;
  padding:36px 20px 28px;
  font-family:var(--font-logo);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:.3;
}

.expo-whatsapp-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding:13px 24px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  font-family:var(--font-label);
  font-size:.9rem;
  letter-spacing:.03em;
  box-shadow:0 12px 26px rgba(37,211,102,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.expo-whatsapp-cta svg{ width:19px; height:19px; flex:0 0 auto; }
.expo-whatsapp-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(37,211,102,.38);
}

/* ================================================================
   Video principal — lo primero que se ve al entrar a El Árbol
   ================================================================ */

.hero-video{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  margin-top:calc(var(--bar-height) * -1);
}

.hero-video-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* oculta el botón nativo de "play" que Safari/WebKit muestra sobre el
   video de fondo cuando el autoplay queda a la espera de una interacción —
   el video sigue disparándose igual con el primer clic/scroll (forcePlay en script.js) */
.hero-video-el::-webkit-media-controls,
.hero-video-el::-webkit-media-controls-start-playback-button,
.hero-video-el::-webkit-media-controls-play-button,
.hero-video-el::-webkit-media-controls-overlay-play-button,
.hero-video-el::-webkit-media-controls-panel,
.hero-video-el::-webkit-media-controls-container{
  display:none !important;
  opacity:0 !important;
  -webkit-appearance:none;
  pointer-events:none;
}
.hero-video-el{
  -webkit-user-select:none;
  user-select:none;
}

/* "escudo" invisible sobre el video: intercepta el mouse antes de que
   llegue al <video>, así Safari nunca detecta el hover sobre él y no
   puede mostrar su botón nativo de play encima */
.hero-video-shield{
  position:absolute;
  inset:0;
  z-index:1;
  background:transparent;
  cursor:default;
}

.hero-video::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,4,10,.35) 0%, rgba(3,4,10,.15) 30%, rgba(3,4,10,.4) 70%, rgba(3,4,10,.85) 100%);
  pointer-events:none;
}

.hero-video-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  width:90%;
  max-width:820px;
}

.hero-video-kicker{
  font-family:var(--font-title);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.hero-video-kicker em{
  font-style:italic;
  font-weight:400;
  text-transform:lowercase;
}

.hero-video-title{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:3.2rem;
  line-height:1.15;
  color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}

/* pequeño botón de play debajo del título — abre el comercial completo, con sonido.
   Círculo fijo y pequeño; "Full commercial" aparece debajo, solo al pasar el mouse. */
.hero-play-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;
  cursor:pointer;
  padding:0;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.hero-play-btn:hover{
  border-color:var(--gold);
  background:rgba(207,169,74,.18);
  box-shadow:0 0 22px rgba(207,169,74,.4);
  transform:scale(1.06);
}
.hero-play-icon{
  font-size:.72rem;
  padding-left:2px;
}

.hero-video-scroll{
  position:absolute;
  left:50%;
  bottom:5%;
  transform:translateX(-50%);
  z-index:2;
  color:var(--gold);
  font-size:1.3rem;
  opacity:.8;
  animation:heroScrollBounce 2.4s ease-in-out infinite;
}

@keyframes heroScrollBounce{
  0%,100%{ transform:translate(-50%,0); opacity:.5; }
  50%{ transform:translate(-50%,10px); opacity:1; }
}

@media (max-width:640px){
  .hero-video-title{ font-size:2rem; }
  .hero-video-kicker{ font-size:.62rem; letter-spacing:.26em; }
}

/* botón "Full video" debajo del video principal, y el lightbox de video que abre */
.full-video-trigger-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  padding:34px 20px;
  background:var(--bg);
}
.full-video-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-title);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid rgba(207,169,74,.45);
  border-radius:999px;
  padding:12px 26px;
  cursor:pointer;
  transition:all .3s ease;
}
.full-video-btn-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--gold);
  color:#0a0a0a;
  font-size:.6rem;
  padding-left:2px;
}
.full-video-btn:hover{
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(207,169,74,.3);
  color:#fff;
}

.video-lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(2,2,6,.94);
  backdrop-filter:blur(6px);
  padding:5vh 4vw;
}
.video-lightbox.is-open{ display:flex; }
.video-lightbox-inner{
  position:relative;
  width:100%;
  max-width:1100px;
}
.video-lightbox-inner video{
  width:100%;
  max-height:86vh;
  display:block;
  border-radius:2px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.video-lightbox-close{
  position:absolute;
  top:-46px;
  right:0;
  background:none;
  border:none;
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
.video-lightbox-close:hover{ opacity:1; color:var(--gold); }

/* ================================================================
   Galería de fotos de la página principal (bodega, cantera, cielo)
   ================================================================ */

.home-gallery{
  position:relative;
  display:flex;
  flex-direction:column;
}

.home-gallery-panel{
  position:relative;
  display:block;
  width:100%;
  height:88vh;
  overflow:hidden;
  text-decoration:none;
}
.home-gallery-panel + .home-gallery-panel{
  border-top:1px solid rgba(207,169,74,.16);
}

.home-gallery-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.001);
  transition:transform 1.6s cubic-bezier(.19,1,.22,1);
}
.home-gallery-panel:hover img{
  transform:scale(1.05);
}

.home-gallery-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,4,10,0) 45%, rgba(3,4,10,.8) 100%);
  pointer-events:none;
}

.home-gallery-overlay{
  position:absolute;
  left:6%;
  bottom:9%;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.home-gallery-kicker{
  font-family:var(--font-title);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.home-gallery-kicker em{
  font-style:italic;
  font-weight:400;
  text-transform:lowercase;
}

.home-gallery-title{
  font-family:var(--font-logo);
  font-style:italic;
  font-weight:700;
  font-size:2.4rem;
  color:#fff;
  letter-spacing:.01em;
}

@media (max-width:720px){
  .home-gallery-panel{ height:62vh; }
  .home-gallery-title{ font-size:1.7rem; }
  .home-gallery-kicker{ font-size:.6rem; letter-spacing:.26em; }
}

/* variantes de estas mismas fotos usadas dentro de pintura.html (apertura, medio, cierre) */
.expo-open-panel,
.expo-mid-panel,
.expo-close-panel{
  height:74vh;
}
.museum-page--mid{
  padding-top:8vh;
}
@media (max-width:720px){
  .expo-open-panel,
  .expo-mid-panel,
  .expo-close-panel{
    height:52vh;
  }
}

/* divisor entre categorías temáticas de la exposición */
/* transición entre "Otras selecciones" y "Anclaje & instalación" —
   en vez de una línea divisoria, un cambio de tono suave, de borde a borde */
.expo-tone-band{
  position:relative;
  width:100vw;
  left:50%;
  margin-left:-50vw;
  margin-top:6vh;
  margin-bottom:0;
  padding:14vh 24px 13vh;
  background:linear-gradient(180deg,
    rgba(250,248,243,0) 0%,
    #f0ebe1 14%,
    #f0ebe1 86%,
    rgba(250,248,243,0) 100%);
}
.expo-tone-band .expo-anchor{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* anclaje e instalación */
.expo-anchor{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.expo-anchor-media{
  position:relative;
  margin-bottom:28px;
}
.expo-anchor-img{
  width:100%;
  display:block;
  cursor:zoom-in;
}
.expo-anchor-caption{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-title);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#221f1c;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.expo-anchor-text{
  font-family:var(--font-display);
  font-size:1.12rem;
  line-height:1.6;
  color:#dad7cd;
  text-align:left;
}
.expo-anchor-note{
  font-family:var(--font-display);
  font-style:italic;
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-dim);
  text-align:left;
  margin:26px 0 0;
  padding-top:22px;
  border-top:1px solid rgba(207,169,74,.18);
}

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(2,2,6,.92);
  backdrop-filter:blur(6px);
  cursor:zoom-out;
  padding:5vh 5vw;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:100%;
  max-height:90vh;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  border-radius:2px;
  cursor:zoom-in;
  touch-action:none;
  transition:transform .35s ease;
  will-change:transform;
}
.lightbox img.is-zoomed{
  cursor:grab;
}
.lightbox img.is-dragging{
  cursor:grabbing;
  transition:none;
}

@media (max-width:820px){
  .expo-featured{ grid-template-columns:1fr; }
  .expo-terms{ grid-template-columns:1fr; }
  .expo-title{ font-size:2.4rem; }
}

/* ================================================================
   Galería blanca — tema claro para la página del museo (Pintura)
   ================================================================ */

body.gallery-light{
  background:#faf8f3;
  color:#2a2724;
  --ink:#2a2724;
  --ink-dim:#6b6558;
}

body.gallery-light .space-bg{ display:none; }

body.gallery-light .site-bar{
  background:rgba(250,248,243,.78);
  border-bottom:1px solid rgba(0,0,0,.08);
}
body.gallery-light .site-bar-title{ color:#221f1c; }
body.gallery-light .site-bar-eyebrow{ color:#8a8578; }

body.gallery-light .back-link{
  background:rgba(255,255,255,.6);
  border-color:rgba(0,0,0,.14);
  color:var(--gold-soft);
}
body.gallery-light .back-link:hover{
  color:#221f1c;
  border-color:var(--gold);
}

body.gallery-light .sefira-card h1{ color:#221f1c; }
body.gallery-light .sefira-card p.meaning{ color:#3d3934; }

body.gallery-light .expo-title{ color:#221f1c; }
body.gallery-light .expo-sub{ color:#5c574f; }
body.gallery-light .expo-statement{ color:#3d3934; }
body.gallery-light .expo-section-head h2{ color:#221f1c; }

body.gallery-light .expo-featured{
  background:#fff;
  border-color:rgba(207,169,74,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.06);
}
body.gallery-light .expo-featured-info h3{ color:#221f1c; }
body.gallery-light .expo-spec-list{
  border-top-color:rgba(0,0,0,.1);
  border-bottom-color:rgba(0,0,0,.1);
}
body.gallery-light .expo-spec-row dd{ color:#221f1c; }
body.gallery-light .expo-price-note{ color:#5c574f; }

body.gallery-light .expo-process-list li{ border-bottom-color:rgba(0,0,0,.09); }
body.gallery-light .expo-process-list li:first-child{ border-top-color:rgba(0,0,0,.09); }
body.gallery-light .expo-step-title{ color:#221f1c; }

body.gallery-light .expo-table thead th{ border-bottom-color:rgba(207,169,74,.4); }
body.gallery-light .expo-table tbody td{ border-bottom-color:rgba(0,0,0,.08); }
body.gallery-light .expo-table-title{ color:#221f1c; }
body.gallery-light .expo-table-desc{ color:#6b6558; }
body.gallery-light .expo-table-sub-value{ color:#221f1c; }
body.gallery-light .expo-table-total-row td{ border-top-color:rgba(207,169,74,.4) !important; }
body.gallery-light .expo-table-total-row .expo-table-sub-value{ color:#221f1c; }

body.gallery-light .expo-total{
  background:rgba(207,169,74,.08);
  border-color:rgba(207,169,74,.35);
}
body.gallery-light .expo-total-value{ color:#221f1c; }

body.gallery-light .expo-terms-list{ color:#3d3934; }

body.gallery-light .expo-payment{
  background:#fff;
  border-color:rgba(207,169,74,.3);
}
body.gallery-light .expo-payment dd{ color:#221f1c; }
body.gallery-light .expo-payment-note{ color:#3d3934; }

body.gallery-light .gallery-card-media{
  background:#efece3;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
body.gallery-light .gallery-card-label{ color:#221f1c; }
body.gallery-light .gallery-card-sub{ color:#6b6558; }

body.gallery-light .expo-featured-media img{
  box-shadow:0 24px 60px rgba(0,0,0,.14);
}

body.gallery-light .expo-anchor-text{ color:#3d3934; }
body.gallery-light .expo-anchor-note{ color:#6b6558; border-top-color:rgba(0,0,0,.1); }