/* ═══════════════════════════════════════════════════════════════════════
   INDUBAI v3 — CAPA PREMIUM (compartida por index + sub-páginas)
   Piezas de la librería, re-tinteadas al oro INDUBAI:
   · Liquid glass  — anillo cónico dorado + especular + spotlight al cursor
                     (capas inyectadas, sin tocar ::before/::after existentes)
   · Refracción líquida (solo Chromium, feDisplacementMap en backdrop-filter)
   · Preloader de dos cortinas con contador (CLAIR / LUMEA)
   · Polvo de oro, barra de progreso, grano, shimmer metálico, beam en CTAs
   ═══════════════════════════════════════════════════════════════════════ */
@property --lg-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --pm-gold:#D4A437;--pm-gold-b:#F2D55E;--pm-hi:#FFF1C9;
  --pm-ring-a:rgba(255,226,150,.9);--pm-ring-b:rgba(212,164,55,.18);
  --pm-spec:rgba(255,255,255,.075);--pm-spot:rgba(255,214,120,.16);
  --pm-ease:cubic-bezier(.2,0,0,1);
}
html[data-theme="light"]{
  --pm-ring-a:rgba(156,122,34,.75);--pm-ring-b:rgba(156,122,34,.12);
  --pm-spec:rgba(255,255,255,.55);--pm-spot:rgba(176,131,28,.10);
}

/* ── LIQUID GLASS ─────────────────────────────────────────────────────── */
.lg{position:relative;isolation:isolate}
.lg-ring,.lg-spec,.lg-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.lg-ring{z-index:4;padding:1px;
  background:conic-gradient(from var(--lg-a),
    transparent 0deg,var(--pm-ring-a) 38deg,var(--pm-ring-b) 96deg,transparent 160deg,
    transparent 190deg,var(--pm-ring-a) 232deg,var(--pm-ring-b) 290deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;transition:opacity .6s var(--pm-ease)}
.lg-spec{z-index:3;
  background:linear-gradient(180deg,var(--pm-spec),transparent 34%),
             linear-gradient(115deg,transparent 40%,rgba(255,240,200,.05) 50%,transparent 60%);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.14),inset 0 -1px 0 rgba(0,0,0,.25)}
.lg-spot{z-index:3;opacity:0;transition:opacity .45s var(--pm-ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--pm-spot),transparent 46%)}
@media (hover:hover){
  .lg:hover .lg-ring{opacity:1;animation:lgSpin 6s linear infinite}
  .lg:hover .lg-spot{opacity:1}
}
@keyframes lgSpin{to{--lg-a:360deg}}
html[data-theme="light"] .lg-spec{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(20,30,50,.06)}

/* paneles grandes de vidrio real (blur detrás) */
.lg-glass{
  background:linear-gradient(160deg,rgba(14,17,24,.58),rgba(6,8,12,.42))!important;
  -webkit-backdrop-filter:blur(16px) saturate(165%);backdrop-filter:blur(16px) saturate(165%);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(212,164,55,.14)}
html.lg-liquid .lg-glass{backdrop-filter:url(#pm-liquid) blur(14px) saturate(170%)}
html[data-theme="light"] .lg-glass{
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(246,248,251,.55))!important;
  box-shadow:0 24px 60px rgba(20,40,80,.12),0 0 0 1px rgba(156,122,34,.16)}

/* ── TILT 3D ──────────────────────────────────────────────────────────── */
.pm-tilt{transform-style:preserve-3d;will-change:transform}
.pm-tilting{transition:transform .18s ease-out!important}

/* ── CTA DORADO CON BEAM (haz que recorre el borde) ───────────────────── */
.pm-beam{position:relative;isolation:isolate}
.pm-beam::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;padding:1.5px;
  background:conic-gradient(from var(--beam),transparent 0 70%,#fff6d6 80%,#F2D55E 86%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:beamSpin 3.2s linear infinite}
@keyframes beamSpin{to{--beam:360deg}}
.pm-sheen{position:relative;overflow:hidden}
.pm-sheen>.pm-sheen-bar{position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
  animation:pmSheen 4.2s var(--pm-ease) infinite}
@keyframes pmSheen{0%,58%{left:-60%}100%{left:130%}}

/* ── TÍTULOS: shimmer metálico en el acento ───────────────────────────── */
.h-main em,.h-sec em{
  background:linear-gradient(100deg,#8B6914 0%,#D4A437 22%,#FFF1C9 38%,#F2D55E 50%,#D4A437 66%,#8B6914 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:pmShimmer 6s ease-in-out infinite;text-shadow:none!important;
  filter:drop-shadow(0 0 22px rgba(212,164,55,.28))}
@keyframes pmShimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
html[data-theme="light"] .h-main em,html[data-theme="light"] .h-sec em{
  background-image:linear-gradient(100deg,#6E520F 0%,#9C7A22 30%,#C9A13A 50%,#9C7A22 70%,#6E520F 100%);
  filter:none}
/* entrada de títulos: barrido con desenfoque (no parte el texto: sobrevive al i18n) */
.h-main.rv,.h-sec.rv{filter:blur(10px);clip-path:inset(0 100% 0 0);
  transition:opacity .9s var(--pm-ease),transform 1s var(--pm-ease),filter 1.1s var(--pm-ease),clip-path 1.2s var(--pm-ease)!important}
.h-main.rv.vis,.h-sec.rv.vis{filter:blur(0);clip-path:inset(0 -10% -20% -10%)}

/* ── POLVO DE ORO + PROGRESO + GRANO ──────────────────────────────────── */
#pm-dust{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}
html[data-theme="light"] #pm-dust{opacity:.55}
#pm-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:10001;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#8B6914,#D4A437 30%,#FFF1C9 60%,#F2D55E 80%,#D4A437);
  box-shadow:0 0 12px rgba(242,213,94,.6)}
#pm-grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:pmGrain 1.2s steps(6) infinite}
@keyframes pmGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
html[data-theme="light"] #pm-grain{opacity:.025}

/* ── PRELOADER: dos cortinas + contador ───────────────────────────────── */
#pm-pre{position:fixed;inset:0;z-index:10000;pointer-events:auto}
#pm-pre .pp-half{position:absolute;left:0;right:0;height:50.5%;background:#030507;
  transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
#pm-pre .pp-top{top:0}
#pm-pre .pp-bot{bottom:0}
#pm-pre .pp-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .5s ease,transform .9s cubic-bezier(.76,0,.24,1)}
#pm-pre .pp-mark{width:76px;filter:drop-shadow(0 0 26px rgba(242,213,94,.45));animation:ppFloat 2.4s ease-in-out infinite}
#pm-pre .pp-word{font-family:'Manrope','Inter',sans-serif;font-weight:800;letter-spacing:.42em;font-size:13px;text-indent:.42em;
  background:linear-gradient(100deg,#8B6914,#D4A437,#FFF1C9,#F2D55E,#D4A437,#8B6914);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:pmShimmer 2.6s ease-in-out infinite}
#pm-pre .pp-count{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:#A6822A}
#pm-pre .pp-bar{width:180px;height:1px;background:rgba(212,164,55,.18);overflow:hidden}
#pm-pre .pp-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#8B6914,#F2D55E,#FFF1C9)}
#pm-pre.out .pp-top{transform:translateY(-101%)}
#pm-pre.out .pp-bot{transform:translateY(101%)}
#pm-pre.out .pp-core{opacity:0;transform:scale(.96)}
#pm-pre.gone{display:none}
@keyframes ppFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
html[data-theme="light"] #pm-pre .pp-half{background:#FFFFFF}

/* ── HERO 3D (index) ──────────────────────────────────────────────────── */
.hero{position:relative}
.hero-gl{position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);z-index:0;pointer-events:none;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 100%);
  opacity:0;transition:opacity 1.6s var(--pm-ease)}
html[data-gl="ready"] .hero-gl{opacity:1}
.hero .hero-inner{position:relative;z-index:1}
html[data-gl="ready"] .hero-vis{margin-top:clamp(150px,15vw,210px)}
@media (max-width:900px){ html[data-gl="ready"] .hero-vis{margin-top:40vw} }

/* moneda 3D (token) */
.pm-coin-stage{position:relative;width:min(420px,78vw);aspect-ratio:1;margin:28px auto 0;cursor:grab}
.pm-coin-stage canvas{width:100%;height:100%;display:block}
.pm-coin-stage::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:10%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(242,213,94,.32),transparent 70%);filter:blur(8px);z-index:-1}

/* tarjetas físicas: brillo holográfico al inclinar (tarjetas.html) */
.pm-holo{position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:5;mix-blend-mode:overlay;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,240,200,.55) 45%,rgba(160,220,255,.25) 52%,transparent 64%);
  background-size:250% 250%;background-position:var(--hx,50%) var(--hy,50%);transition:opacity .4s}
.sc-visual:hover .pm-holo{opacity:1}

@media (prefers-reduced-motion:reduce){
  .lg-ring,.pm-beam::after,.h-main em,.h-sec em,#pm-grain,.pm-sheen-bar{animation:none!important}
  .h-main.rv,.h-sec.rv{filter:none;clip-path:none}
}
.pm-coin-fallback{position:absolute;inset:10%;width:80%;height:80%;object-fit:cover;border-radius:50%;transition:opacity .6s}
.pm-coin-ready .pm-coin-fallback{opacity:0;pointer-events:none}
.pm-coin-stage canvas{position:relative;z-index:1}
/* el padding de .hero pisaba el lateral de .wrap: el texto quedaba pegado al borde en móvil */
header.hero.wrap{padding-left:6vw;padding-right:6vw}