/* =========================================================
   TINOCO · Premium Landing · v2
   Glassmorphism · 3D type · Cinematic depth · Mobile-first
========================================================= */

:root{
  --bg:        #05030c;
  --bg-2:      #0e0626;
  --ink:       #f6f0ff;
  --ink-soft:  #cabddf;
  --ink-dim:   #8d7ba8;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --p-50:  #f1e8ff;
  --p-100: #ddc7ff;
  --p-200: #c4a3ff;
  --p-300: #a487ff;
  --p-400: #7e5cff;
  --p-500: #6437f5;
  --p-600: #4b22c7;
  --p-700: #341a8b;
  --p-800: #1f0f5c;
  --p-900: #100735;

  --accent: #b491ff;
  --accent-2:#e7d8ff;
  --neon:   #a78bff;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius:    20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --shadow-soft: 0 18px 50px -20px rgba(126,92,255,.55), 0 2px 10px -2px rgba(0,0,0,.4);
  --shadow-hard: 0 40px 80px -32px rgba(0,0,0,.85), 0 10px 30px -12px rgba(75,34,199,.35);
  --shadow-glow: 0 0 0 1px rgba(180,145,255,.18), 0 30px 80px -20px rgba(126,92,255,.45);

  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --max: 480px;
  --hh:  142px;  /* nav height — accommodates bigger logo + signature */
}

/* =========================================================
   LOADER — premium custom loading screen
========================================================= */
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }
.loader{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(900px 700px at 80% -10%, rgba(126,92,255,.32), transparent 60%),
    radial-gradient(800px 600px at -10% 30%, rgba(75,34,199,.30), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(52,26,139,.45), transparent 60%),
    linear-gradient(180deg, #05030c 0%, #07041a 60%, #05030c 100%);
  display:grid; place-items:center;
  opacity:1; transition:opacity .85s cubic-bezier(.16,1,.3,1), visibility .85s;
}
html:not(.is-loading) .loader{ opacity:0; visibility:hidden; pointer-events:none }

.loader__bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.loader__aurora{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.55; mix-blend-mode:screen;
  animation:loader-drift 12s cubic-bezier(.16,1,.3,1) infinite alternate;
}
.loader__aurora--a{ width:520px; height:520px; left:-160px; top:-120px; background:#5e2bd6 }
.loader__aurora--b{ width:460px; height:460px; right:-140px; bottom:-100px; background:#7e5cff; animation-delay:-6s }
@keyframes loader-drift{
  0%   { transform:translate3d(0,0,0) scale(1) }
  100% { transform:translate3d(60px,-30px,0) scale(1.15) }
}

.loader__grain{
  position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.loader__stage{
  position:relative; z-index:2;
  display:grid; place-items:center; gap:18px;
  padding:24px;
  transform:translateY(0) scale(1);
  transition:transform .85s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1);
}
html:not(.is-loading) .loader__stage{
  transform:translateY(-6px) scale(1.04);
  filter:blur(6px);
}

/* Ring with conic progress */
.loader__ring{
  position:relative; width:140px; height:140px;
  display:grid; place-items:center;
}
.loader__ring-track{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, #7e5cff 0%, #a487ff calc(var(--p,0) * 1%), rgba(255,255,255,.06) calc(var(--p,0) * 1%));
  -webkit-mask:radial-gradient(circle 64px at center, transparent 96%, #000 97%);
          mask:radial-gradient(circle 64px at center, transparent 96%, #000 97%);
  filter:drop-shadow(0 0 12px rgba(126,92,255,.6));
}
.loader__ring-orbit{
  position:absolute; inset:-6px; border-radius:50%;
  animation:loader-spin 3.5s linear infinite;
}
.loader__ring-orbit::before{
  content:""; position:absolute; left:50%; top:-2px; width:6px; height:6px;
  border-radius:50%; transform:translateX(-50%);
  background:#fff;
  box-shadow:0 0 14px 2px rgba(221,199,255,.95), 0 0 28px 6px rgba(126,92,255,.6);
}
@keyframes loader-spin{ to{ transform:rotate(360deg) } }

.loader__ring-inner{
  position:relative; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, rgba(126,92,255,.18), rgba(8,4,15,.5) 70%);
  display:grid; place-items:center;
  box-shadow:inset 0 0 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}
.loader__T{
  height:78px; width:auto; display:block;
  filter:brightness(1.3) drop-shadow(0 4px 16px rgba(180,145,255,.8));
  animation:loader-T-breathe 2.8s ease-in-out infinite;
}
@keyframes loader-T-breathe{
  0%,100% { transform:scale(1) }
  50%     { transform:scale(1.06) }
}

/* Wordmark "Tinoco" */
.loader__word{
  font-family:'Caveat','Brush Script MT',cursive;
  font-weight:700; font-size:46px;
  letter-spacing:.5px;
  background:linear-gradient(95deg, #fff, #d5beff 50%, #a487ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(164,135,255,.4));
  opacity:0; transform:translateY(8px);
  animation:loader-word-in 1s cubic-bezier(.16,1,.3,1) .25s both;
  line-height:1;
  margin-top:4px;
}
@keyframes loader-word-in{
  to{ opacity:1; transform:none }
}

/* Tagline with letter stagger */
.loader__tagline{
  display:flex; gap:1px; font-family:'Space Grotesk','Inter',sans-serif;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(196,163,255,.72);
  margin-top:4px;
}
.loader__tagline span{
  display:inline-block; opacity:0; transform:translateY(6px);
  animation:loader-letter-in .55s cubic-bezier(.16,1,.3,1) forwards;
}
.loader__tagline .sp{ width:.6em; animation:none; opacity:1 }
@keyframes loader-letter-in{
  to{ opacity:1; transform:none }
}

/* Progress bar */
.loader__bar{
  position:relative; width:180px; height:2px; margin-top:14px;
  background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden;
}
.loader__bar span{
  position:absolute; left:0; top:0; right:0; bottom:0;
  transform-origin:left center;
  transform:scaleX(calc(var(--p, 0) / 100));
  background:linear-gradient(90deg, #a487ff, #fff, #7e5cff);
  background-size:200% 100%;
  border-radius:2px;
  box-shadow:0 0 12px rgba(164,135,255,.6);
  animation:loader-bar-shine 1.4s linear infinite;
  will-change:transform;
}
@keyframes loader-bar-shine{
  0%   { background-position:0% 50% }
  100% { background-position:200% 50% }
}

/* Percentage counter */
.loader__pct{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:11px; letter-spacing:.18em; color:rgba(221,199,255,.55);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}

/* Decorative corners */
.loader__corner{
  position:absolute; width:16px; height:16px;
  border:1px solid rgba(180,145,255,.4); opacity:.7;
}
.loader__corner--tl{ top:24px; left:24px; border-right:0; border-bottom:0 }
.loader__corner--tr{ top:24px; right:24px; border-left:0; border-bottom:0 }
.loader__corner--bl{ bottom:24px; left:24px; border-right:0; border-top:0 }
.loader__corner--br{ bottom:24px; right:24px; border-left:0; border-top:0 }

/* Mini brand at top */
.loader__brand{
  position:absolute; top:32px; left:50%; transform:translateX(-50%);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(196,163,255,.6);
}
.loader__brand i{
  display:inline-block; width:18px; height:1px;
  background:linear-gradient(90deg, transparent, var(--p-300, #a487ff));
  vertical-align:middle; margin:0 8px;
}

/* Floating dots around stage */
.loader__dot{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, #fff, rgba(180,145,255,.6) 50%, transparent 70%);
  opacity:0; animation:loader-dot 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes loader-dot{
  0%,100% { opacity:0; transform:translateY(0) }
  50%     { opacity:1; transform:translateY(-30px) }
}

/* Responsive */
@media (max-width: 480px){
  .loader__ring{ width:120px; height:120px }
  .loader__ring-inner{ width:94px; height:94px }
  .loader__ring-track{ -webkit-mask:radial-gradient(circle 56px at center, transparent 96%, #000 97%); mask:radial-gradient(circle 56px at center, transparent 96%, #000 97%) }
  .loader__T{ height:66px }
  .loader__word{ font-size:38px }
  .loader__bar{ width:160px }
}

@media (prefers-reduced-motion:reduce){
  .loader__aurora, .loader__ring-orbit, .loader__T, .loader__bar span{ animation:none !important }
  .loader__tagline span{ opacity:1 !important; transform:none !important }
}

*,*:before,*:after{ box-sizing:border-box }



html,body{ margin:0; padding:0; background:var(--bg); overflow-x:hidden; max-width:100vw }
html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  font-size:15px; line-height:1.55;
  overflow-x:hidden;
  letter-spacing:.005em;
  position:relative;
  min-height:100vh;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
::selection{ background:rgba(164,135,255,.4); color:#fff }

/* ============ GLOBAL AMBIENT BG ============ */
.ambient{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(900px 700px at 8% 8%, rgba(75,34,199,.32), transparent 60%),
    radial-gradient(800px 600px at 100% 30%, rgba(126,92,255,.20), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(52,26,139,.40), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #07041a 60%, var(--bg) 100%);
}
.aurora{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.55; mix-blend-mode:screen;
  animation:drift 22s var(--ease-out) infinite alternate;
}
.aurora--1{ width:520px; height:520px; left:-160px; top:-120px; background:#5e2bd6 }
.aurora--2{ width:460px; height:460px; right:-140px; top:30%; background:#7e5cff; animation-delay:-7s }
.aurora--3{ width:520px; height:520px; left:30%; bottom:-220px; background:#341a8b; animation-delay:-14s }
@keyframes drift{
  0%   { transform:translate3d(0,0,0)   scale(1)   }
  100% { transform:translate3d(40px,-30px,0) scale(1.15) }
}
.stars{
  position:absolute; inset:0; opacity:.45;
  background-image:
    radial-gradient(1px 1px at 20% 18%, #fff7, transparent 60%),
    radial-gradient(1px 1px at 70% 32%, #fff5, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 60%, #ddc7ffaa, transparent 60%),
    radial-gradient(1px 1px at 85% 78%, #fff7, transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 80%, #b491ffaa, transparent 60%),
    radial-gradient(1px 1px at 60% 92%, #fff5, transparent 60%);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{ 50%{ opacity:.2 } }
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 0%, transparent 50%, rgba(0,0,0,.55) 100%);
}

/* ============ SCROLL PROGRESS ============ */
.scroll-prog{
  position:fixed; left:0; right:0; top:0; height:2px; z-index:100;
  background:rgba(255,255,255,.04);
}
.scroll-prog span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#b491ff,#7e5cff,#4b22c7);
  box-shadow:0 0 10px #7e5cff;
  transition:width .12s linear;
}

/* ============ GLASS UTIL ============ */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 40px -20px rgba(0,0,0,.6);
}
.glass-chip{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* ============ BUTTONS ============ */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 20px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:.02em;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  white-space:nowrap;
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%, rgba(126,92,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  opacity:.7;
}
.btn--primary{
  background:linear-gradient(135deg,#8b65ff 0%, #6437f5 50%, #4b22c7 100%);
  color:#fff;
  box-shadow:
    0 16px 40px -12px rgba(126,92,255,.65),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 8px rgba(45,18,110,.5);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 26px 60px -16px rgba(126,92,255,.8), inset 0 1px 0 rgba(255,255,255,.3) }
.btn--primary:active{ transform:translateY(0) scale(.98) }
.btn--ghost{
  background:rgba(255,255,255,.04);
  color:var(--ink);
  border:1px solid var(--line-2);
  backdrop-filter:blur(10px);
}
.btn--ghost:hover{ background:rgba(180,145,255,.1); border-color:rgba(180,145,255,.4) }
.btn--sm{ padding:9px 15px; font-size:13px }
.btn--big{ width:100%; padding:17px 22px; font-size:15px }
.btn__arrow{
  font-style:normal; display:inline-block;
  transition:transform .35s var(--ease-out);
}
.btn:hover .btn__arrow{ transform:translateX(4px) }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--hh); padding:0 16px;
  background:linear-gradient(180deg, rgba(5,3,12,.75), rgba(5,3,12,.4));
  border-radius:0;
  border-top:0; border-left:0; border-right:0;
}
.nav__brand{ display:flex; align-items:center; gap:10px }
.nav__logo-wrap{
  position:relative; display:grid; place-items:center;
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, rgba(126,92,255,.25), rgba(75,34,199,.1));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 16px -8px rgba(126,92,255,.6);
}
.nav__logo{
  height:128px; width:auto; display:block;
  filter:brightness(1.25) drop-shadow(0 4px 28px rgba(180,145,255,.85));
  transition:transform .4s var(--ease-out), filter .4s var(--ease-out);
}
.nav__brand:hover .nav__logo{
  transform:rotate(-6deg) scale(1.08);
  filter:brightness(1.35) drop-shadow(0 6px 34px rgba(180,145,255,1));
}
@media (max-width:480px){
  .nav__logo{ height:100px }
  :root{ --hh:112px }
}
.nav__wordmark{
  /* Horizontal signature image of the artist */
  display:block;
  height:78px; width:auto;
  max-width:260px;
  object-fit:contain;
  filter:brightness(1.55) drop-shadow(0 4px 16px rgba(164,135,255,.65));
  margin-left:4px;
  transition:filter .35s var(--ease-out), transform .35s var(--ease-out);
}
.nav__brand:hover .nav__wordmark{
  filter:brightness(1.65) drop-shadow(0 5px 20px rgba(180,145,255,.9));
  transform:translateX(2px);
}
@media (max-width:480px){
  .nav__wordmark{ height:64px; max-width:195px }
}
.nav__burger{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}
.nav__burger span{
  display:block; width:18px; height:1.5px; background:var(--ink-soft); border-radius:2px;
  transition:transform .4s var(--ease-out), opacity .25s var(--ease-out);
  margin:2.5px 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg) }

.nav__panel{
  position:fixed; left:10px; right:10px; top:calc(var(--hh) + 6px);
  border-radius:22px; padding:14px;
  display:grid; gap:5px;
  /* Strong dark glass with purple tint — fully opaque enough to be legible */
  background:
    linear-gradient(180deg, rgba(28,12,68,.92), rgba(8,4,15,.96)) !important;
  border:1px solid rgba(180,145,255,.22) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(180,145,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease-out), opacity .35s var(--ease-out);
  overflow:hidden;
}
/* Decorative aurora glow inside menu */
.nav__panel::before{
  content:""; position:absolute; inset:-40%; pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%, rgba(126,92,255,.28), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(75,34,199,.25), transparent 55%);
  filter:blur(40px); z-index:-1;
  opacity:.8;
}
.nav__panel.is-open{ transform:none; opacity:1; pointer-events:auto }
.nav__panel a{
  padding:14px 16px; border-radius:14px; font-weight:500;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid transparent;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.nav__panel a::before{
  content:attr(data-i); font-size:10px; letter-spacing:.18em;
  color:var(--p-300); opacity:.7; order:2;
}
.nav__panel a:hover{ background:rgba(180,145,255,.08); border-color:var(--line) }
.nav__panel .nav__cta{
  background:linear-gradient(135deg,#7e5cff,#4b22c7); color:#fff; justify-content:center;
  margin-top:6px; padding:14px;
  box-shadow:var(--shadow-soft);
}
.nav__panel .nav__cta::before{ display:none }

/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  padding:calc(var(--hh) + 18px) 0 26px;
  perspective:1400px;
}
.hero__stage{
  position:relative; max-width:var(--max); margin:0 auto;
  padding:0 18px;
  transform-style:preserve-3d;
}

.hero__bg{ position:absolute; inset:-20px; z-index:0; pointer-events:none }
.orb{
  position:absolute; border-radius:50%; filter:blur(50px); opacity:.55;
  animation:float 14s var(--ease-out) infinite alternate;
}
.orb--a{ width:280px; height:280px; left:-80px; top:60px; background:#4b22c7 }
.orb--b{ width:240px; height:240px; right:-60px; top:280px; background:#7e5cff; animation-delay:-4s }
.orb--c{ width:200px; height:200px; left:30%; bottom:-20px; background:#a487ff; animation-delay:-8s }
.grain{
  position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes float{
  0%{ transform:translate3d(0,0,0) scale(1) }
  100%{ transform:translate3d(20px,-30px,0) scale(1.1) }
}
.glyph{
  position:absolute; font-family:'Cormorant Garamond',serif;
  color:var(--p-200); opacity:.16; font-size:80px;
  animation:spinY 16s linear infinite;
}
.glyph--2{ top:30%; right:6%; font-size:60px; opacity:.12; animation-duration:22s; animation-direction:reverse }
.glyph--3{ bottom:10%; left:8%; font-size:50px; opacity:.18; animation-duration:18s }
.glyph:not(.glyph--2):not(.glyph--3){ top:8%; left:6%; }
@keyframes spinY{ to{ transform:rotateY(360deg) } }

.hero__bigMark{
  position:absolute; right:-12px; top:-30px;
  font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic;
  font-size:180px; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(221,199,255,.32);
  text-stroke:1.5px rgba(221,199,255,.32);
  z-index:3; user-select:none; pointer-events:none;
  filter:drop-shadow(0 8px 28px rgba(126,92,255,.45));
  animation:floatY 6s ease-in-out infinite alternate;
}
@keyframes floatY{ to{ transform:translateY(-6px) rotate(-3deg) } }

.hero__inner{ position:relative; z-index:3 }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  color:var(--ink-soft); font-size:11.5px; letter-spacing:.08em;
  font-weight:500;
}
.hero__eyebrow i{
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle, #fff, #b491ff 60%, transparent);
  box-shadow:0 0 14px #b491ff; display:inline-block;
  animation:pulse 2s var(--ease-out) infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(.6); opacity:.35 }
}

.hero__title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(36px, 10.5vw, 52px);
  line-height:1.02; letter-spacing:-.015em;
  margin:14px 0 10px;
}
.hero__title .line{ display:block; overflow:visible }
.hero__title em{
  font-style:italic; font-weight:600;
  display:inline-block;
  background-image:linear-gradient(180deg, #fff 0%, #ddc7ff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero__title .dot{ color:var(--p-300) }

/* 3D word effect */
.word3d{
  position:relative; display:inline-block;
  background:linear-gradient(180deg, #fff 0%, #c4a3ff 60%, #7e5cff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.15),
    0 6px 24px rgba(126,92,255,.45),
    0 12px 36px rgba(75,34,199,.35);
  filter:drop-shadow(0 6px 20px rgba(126,92,255,.5));
}
.word3d::after{
  content:""; position:absolute; left:6%; right:6%; bottom:-4px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #b491ff, transparent);
  opacity:.7;
}

/* Kinetic title reveal */
.kinetic .line{
  display:block; opacity:0; transform:translateY(24px) rotateX(20deg);
  transform-origin:50% 100%;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.kinetic.is-in .line{ opacity:1; transform:none }
.kinetic.is-in .line:nth-child(2){ transition-delay:.18s }

.hero__sub{
  margin:0 0 4px; color:var(--ink-soft); font-size:14px; max-width:34ch;
  opacity:0; transform:translateY(10px); transition:.7s .3s var(--ease-out);
}
.kinetic.is-in ~ .hero__sub, .hero.is-in .hero__sub{ opacity:1; transform:none }
.hero__inner.is-in .hero__sub{ opacity:1; transform:none }

/* Hero photo */
.hero__photoWrap{
  position:relative; margin:16px 0 18px;
  border-radius:var(--radius-lg);
  overflow:visible; isolation:isolate;
  aspect-ratio: 5/4;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out);
}
.hero__photo{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  border-radius:var(--radius-lg);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-hard);
  background:#160a2e;
  transform:scale(1); transition:transform .8s var(--ease-out), filter .5s var(--ease-out);
  filter:contrast(1.05) saturate(1.08);
}
.hero__photoWrap:hover .hero__photo{ transform:scale(1.02) }
.hero__photo-tag{
  position:absolute; left:14px; top:14px; z-index:4;
  padding:6px 12px; border-radius:999px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); font-weight:500;
}
.hero__photo-grade{
  position:absolute; inset:0; pointer-events:none;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(126,92,255,.22), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(5,3,12,.6) 100%),
    linear-gradient(120deg, rgba(75,34,199,.25) 0%, transparent 45%);
  mix-blend-mode:soft-light;
}
.hero__photo-ring{
  position:absolute; inset:8px; border-radius:calc(var(--radius-lg) - 8px);
  pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 60px rgba(0,0,0,.4);
}

.hero__bottom{ position:relative; z-index:3 }
.hero__cta{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
.hero__cta .btn{ width:100% }

.hero__stats{
  list-style:none; padding:12px; margin:0; border-radius:16px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.hero__stats li{ text-align:center; position:relative }
.hero__stats li + li::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px;
  background:linear-gradient(180deg, transparent, var(--line-2), transparent);
}
.hero__stats b{
  display:flex; align-items:baseline; justify-content:center; gap:1px;
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:26px; color:#fff; line-height:1;
  background:linear-gradient(180deg, #fff, #c4a3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__stats b i{ font-style:normal; color:var(--p-300); font-size:16px; line-height:1; -webkit-text-fill-color:var(--p-300) }
.hero__stats span{ font-size:10.5px; color:var(--ink-dim); letter-spacing:.08em; display:block; margin-top:3px; text-transform:uppercase }

.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:24px;
}
.hero__scroll-pill{
  width:22px; height:34px; border:1px solid rgba(180,145,255,.35);
  border-radius:999px; display:grid; place-items:start center;
  padding-top:6px; background:rgba(180,145,255,.04);
}
.hero__scroll-pill i{
  width:2px; height:7px; background:#fff; border-radius:2px;
  animation:dot 1.6s var(--ease-out) infinite;
}
.hero__scroll small{
  font-size:10px; letter-spacing:.2em; color:var(--ink-dim); text-transform:uppercase;
}
@keyframes dot{
  0%{ transform:translateY(-2px); opacity:0 }
  50%{ opacity:1 }
  100%{ transform:translateY(10px); opacity:0 }
}

/* ============ MARQUEE ============ */
.marquee{
  position:relative; overflow:hidden;
  margin:24px 0 0; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(75,34,199,.10), rgba(31,15,92,.04), rgba(75,34,199,.10));
}
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:50px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent) }
.marquee::after { right:0; background:linear-gradient(270deg, var(--bg), transparent) }
.marquee__track{
  display:flex; gap:28px; white-space:nowrap; align-items:center;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:24px;
  color:#fff; letter-spacing:.02em;
  animation:scroll 26s linear infinite;
}
.marquee__track span{
  background:linear-gradient(180deg,#fff,#d5beff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.marquee__track i{ color:var(--p-300); font-size:14px; font-style:normal; -webkit-text-fill-color:var(--p-300) }
.marquee__track--rev{
  margin-top:4px; font-size:11px; font-style:normal;
  font-family:'Space Grotesk',sans-serif; font-weight:500; letter-spacing:.32em;
  animation:scrollR 32s linear infinite;
}
.marquee__track--rev span{
  background:none; -webkit-background-clip:initial;
  -webkit-text-fill-color:rgba(196,163,255,.55); color:rgba(196,163,255,.55);
}
.marquee__track--rev i{ font-size:10px; color:var(--p-400); -webkit-text-fill-color:var(--p-400) }
@keyframes scroll{ to{ transform:translateX(-50%) } }
@keyframes scrollR{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }

/* ============ SECTION HEADER ============ */
.sec-head{
  padding:38px 18px 14px; max-width:var(--max); margin:0 auto;
}
.sec-head__kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--p-200); margin-bottom:10px; font-family:'Space Grotesk',sans-serif;
}
.sec-head__kicker i{
  width:18px; height:1px; background:linear-gradient(90deg, var(--p-300), transparent);
}
.sec-head__title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(34px, 9vw, 44px);
  line-height:1; margin:0 0 10px; letter-spacing:-.01em;
  color:#fff;
}
.sec-head__sub{ font-size:13px; color:var(--ink-dim); margin:8px 0 0 }

/* ============ SERVICIOS / TABS ============ */
.services{ padding-bottom:8px }
.tabs{
  position:relative;
  display:flex; gap:4px; overflow-x:auto;
  padding:6px; margin:0 18px 18px;
  border-radius:999px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{ display:none }
.tabs__pill{
  position:absolute; height:calc(100% - 12px); top:6px; left:0;
  border-radius:999px;
  background:linear-gradient(135deg,#7e5cff,#4b22c7);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .4s var(--ease-out), width .4s var(--ease-out);
  z-index:0; pointer-events:none;
}
.tab{
  position:relative; z-index:1;
  flex:0 0 auto;
  padding:9px 16px; border-radius:999px;
  color:var(--ink-soft); font-size:13px; font-weight:500; letter-spacing:.01em;
  transition:color .3s var(--ease-out);
}
.tab.is-active{ color:#fff }

.tab-panels{ padding:0 18px; max-width:var(--max); margin:0 auto; position:relative }
.panel{
  display:none; opacity:0; transform:translateY(10px);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(31,15,92,.45), rgba(8,4,15,.55));
  border:1px solid var(--line);
  box-shadow:var(--shadow-hard);
  transform-style:preserve-3d;
}
.panel.is-active{
  display:block; opacity:1; transform:none;
  animation:panelIn .5s var(--ease-out) both;
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(14px) scale(.98) }
  to{ opacity:1; transform:none }
}
.panel__media{
  aspect-ratio: 16/11; position:relative; overflow:hidden;
  background:#160a2e;
}
.panel__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1.2s var(--ease-out);
}
.panel.is-active .panel__media img{ animation:slowZoom 18s var(--ease-out) infinite alternate }
@keyframes slowZoom{ to{ transform:scale(1.12) } }
.panel__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,3,12,.85) 100%);
}
.panel__shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform:translateX(-110%);
  transition:transform 1s var(--ease-out);
}
.panel:hover .panel__shine{ transform:translateX(110%) }

.panel__body{ padding:16px 18px 20px; position:relative }
.panel__no{
  position:absolute; right:18px; top:-18px;
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.18em;
  color:var(--p-200); padding:5px 10px; border-radius:999px;
  background:rgba(0,0,0,.5); border:1px solid var(--line-2);
  backdrop-filter:blur(10px);
}
.panel__body h3{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  margin:0 0 8px; font-size:26px; color:#fff;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.panel__body h3 i{
  font-family:'Caveat',cursive; font-style:italic; font-weight:400;
  font-size:18px; color:var(--p-200);
}
.panel__body p{ margin:0 0 12px; color:var(--ink-soft); font-size:13.5px }
.panel__feat{
  list-style:none; padding:0; margin:0 0 14px;
  display:grid; gap:6px;
}
.panel__feat li{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-soft);
}
.panel__feat li i{
  width:5px; height:5px; border-radius:50%;
  background:linear-gradient(135deg,#b491ff,#7e5cff);
  box-shadow:0 0 8px #7e5cff;
}
.link-arrow{
  font-size:13px; color:var(--p-100); font-weight:600; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid rgba(180,145,255,.3); padding-bottom:2px;
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out), gap .25s var(--ease-out);
}
.link-arrow:hover{ color:#fff; border-color:#fff; gap:10px }

/* ============ GALLERY ============ */
.gallery{ padding-bottom:14px }
.snap{
  display:flex; gap:14px; padding:6px 18px 18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-padding-left:18px;
}
.snap::-webkit-scrollbar{ display:none }
.snap__item{
  flex:0 0 78%; max-width:380px;
  margin:0; scroll-snap-align:start;
  border-radius:var(--radius);
  overflow:hidden; position:relative;
  border:1px solid var(--line);
  background:#160a2e;
  aspect-ratio: 3/4;
  box-shadow:var(--shadow-hard);
  transform-style:preserve-3d;
}
.snap__item img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform 1s var(--ease-out), filter .6s var(--ease-out);
  filter:saturate(1.05);
}
.snap__item:hover img{ transform:scale(1.06); filter:saturate(1.2) contrast(1.05) }
.snap__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 75%, rgba(5,3,12,.35) 100%);
  pointer-events:none;
  opacity:.5;
}
.snap__item figcaption{
  position:absolute; left:14px; bottom:14px; right:14px; z-index:2;
  display:flex; justify-content:space-between; align-items:end;
  font-size:11px; color:var(--ink-soft); letter-spacing:.04em;
}
.snap__item figcaption b{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:20px;
  color:#fff; display:block; line-height:1;
}
.snap__no{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.18em;
  color:var(--p-100); padding:5px 9px; border-radius:999px;
  background:rgba(0,0,0,.55); border:1px solid var(--line-2);
  backdrop-filter:blur(10px);
}
.snap__nav{
  display:flex; justify-content:center; align-items:center; gap:14px;
  padding:0 18px 8px;
}
.snap__arrow{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  color:var(--ink-soft); font-size:20px; line-height:1;
  display:grid; place-items:center;
  transition:all .25s var(--ease-out);
}
.snap__arrow:hover{ background:rgba(126,92,255,.18); color:#fff; border-color:rgba(180,145,255,.4); transform:translateY(-1px) }
.snap__arrow:active{ transform:scale(.94) }
.snap__dots{ display:flex; gap:6px }
.snap__dots i{
  width:6px; height:6px; border-radius:50%; background:rgba(180,145,255,.25);
  transition:all .35s var(--ease-out);
}
.snap__dots i.is-active{
  width:22px; border-radius:6px;
  background:linear-gradient(90deg,#b491ff,#7e5cff);
  box-shadow:0 0 10px rgba(126,92,255,.5);
}

/* ============ MUSEO ============ */
.museo{ padding:8px 18px 14px; max-width:var(--max); margin:0 auto }
.museo__card{
  position:relative; border-radius:var(--radius-lg);
  overflow:hidden; isolation:isolate;
  border:1px solid var(--line-2);
  background:linear-gradient(135deg, #1d0f56, #0e0526);
  box-shadow:var(--shadow-hard), var(--shadow-glow);
  transform-style:preserve-3d;
}
.museo__media{ position:relative; overflow:hidden; isolation:isolate }
.museo__img{
  width:100%; aspect-ratio: 16/10; object-fit:cover;
  filter:saturate(1.1) contrast(1.05);
}
.museo__media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 0%, rgba(126,92,255,.45), transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(8,4,15,.85) 100%);
  pointer-events:none;
}
.museo__shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform:translateX(-110%);
  transition:transform 1.4s var(--ease-out);
}
.museo__card:hover .museo__shine{ transform:translateX(110%) }
.museo__body{ padding:18px 20px 22px; position:relative; z-index:2 }
.badge{
  display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 10px; color:var(--p-100); font-weight:600;
  font-family:'Space Grotesk',sans-serif;
}
.museo__title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:34px; line-height:1; margin:10px 0 8px;
  color:#fff;
}
.museo__title em{ font-style:italic; color:var(--p-100) }
.museo__body p{ margin:0 0 14px; color:var(--ink-soft); font-size:13.5px }

/* ============ MANIFIESTO ============ */
.manifest{ padding-bottom:14px }
.manifest__hero{
  max-width:var(--max); margin:0 auto; padding:0 18px;
  display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:center;
}
.manifest__photo{ position:relative; isolation:isolate }
.manifest__photo img{
  width:104px; height:128px; object-fit:cover; border-radius:18px;
  border:1px solid var(--line-2); box-shadow:var(--shadow-soft);
  transform:rotate(-3deg);
  transition:transform .5s var(--ease-out);
}
.manifest__photo:hover img{ transform:rotate(0deg) scale(1.02) }
.manifest__photo-glow{
  position:absolute; inset:-12px; border-radius:24px;
  background:radial-gradient(circle, rgba(126,92,255,.4), transparent 65%);
  z-index:-1; filter:blur(20px);
}
.manifest__quote{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:17.5px; line-height:1.3; color:var(--ink);
  margin:0;
}
.manifest__sign{
  display:block; margin-top:6px; font-family:'Caveat',cursive;
  color:var(--p-200); font-size:20px;
}

.acc{ padding:18px 18px 6px; max-width:var(--max); margin:0 auto; display:grid; gap:8px }
.acc details{
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  overflow:hidden; transition:border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.acc details[open]{
  border-color:rgba(180,145,255,.35);
  background:linear-gradient(180deg, rgba(180,145,255,.07), rgba(255,255,255,0));
}
.acc summary{
  list-style:none; cursor:pointer;
  padding:14px 16px; font-weight:600; font-size:14.5px;
  display:flex; justify-content:space-between; align-items:center;
  color:#fff;
}
.acc summary::-webkit-details-marker{ display:none }
.acc summary i{
  position:relative; width:22px; height:22px; display:inline-block; flex:0 0 22px;
  border:1px solid var(--line-2); border-radius:50%;
  background:rgba(180,145,255,.06);
  transition:transform .4s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.acc summary i::before, .acc summary i::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--p-100); border-radius:2px;
  transform:translate(-50%,-50%);
}
.acc summary i::before{ width:10px; height:1.5px }
.acc summary i::after { width:1.5px; height:10px; transition:transform .35s var(--ease-out), opacity .25s var(--ease-out) }
.acc details[open] summary i{
  background:linear-gradient(135deg,#7e5cff,#4b22c7);
  border-color:transparent;
}
.acc details[open] summary i::before{ background:#fff }
.acc details[open] summary i::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg) }
.acc p{
  margin:0; padding:0 16px 16px; color:var(--ink-soft);
  font-size:13.5px;
}

/* ============ TESTIMONIOS ============ */
.testi{ padding-bottom:14px }
.testi__track{
  display:flex; gap:12px; padding:6px 18px 18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.testi__track::-webkit-scrollbar{ display:none }
.testi__card{
  flex:0 0 80%; max-width:380px; scroll-snap-align:start;
  padding:18px; border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.testi__quote{
  position:absolute; top:-6px; left:14px;
  font-family:'Cormorant Garamond',serif; color:var(--p-300);
  font-size:60px; line-height:1; opacity:.5;
}
.testi__card p{
  margin:18px 0 14px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:17px; line-height:1.35; color:#fff;
}
.testi__card footer{ display:flex; justify-content:space-between; align-items:end }
.testi__card footer b{ font-size:13px; color:var(--p-100); font-weight:600 }
.testi__card footer span{ font-size:11px; color:var(--ink-dim); letter-spacing:.06em }

/* ============ FORM ============ */
.contact{
  padding-bottom:100px; position:relative;
}
.contact__glow{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:80%; height:300px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(126,92,255,.4), transparent);
  filter:blur(40px); opacity:.7;
}
.form{
  max-width:var(--max); margin:0 auto;
  padding:18px;
  border-radius:24px;
  display:grid; gap:14px;
  position:relative; isolation:isolate;
}
.form::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(180,145,255,.45), rgba(255,255,255,0) 50%, rgba(126,92,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

.field{ position:relative; display:block }
.field input, .field textarea{
  width:100%; padding:20px 14px 10px;
  border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--ink);
  font-family:inherit; font-size:14.5px;
  transition:border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.field textarea{ resize:vertical; min-height:90px }
.field input::placeholder, .field textarea::placeholder{ color:transparent }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--p-400); background:rgba(126,92,255,.10);
  box-shadow:0 0 0 4px rgba(126,92,255,.14);
}
.field__label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:14px; color:#8a78a8;
  pointer-events:none;
  transition:transform .28s var(--ease-out), top .28s var(--ease-out), font-size .28s var(--ease-out), color .28s var(--ease-out), letter-spacing .28s var(--ease-out);
}
.field:has(textarea) .field__label{ top:22px; transform:none }
.field input:focus + .field__label,
.field input:not(:placeholder-shown) + .field__label,
.field textarea:focus + .field__label,
.field textarea:not(:placeholder-shown) + .field__label{
  top:7px; transform:none;
  font-size:10px; color:var(--p-200);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

.chips{
  border:0; padding:6px 0 4px; margin:6px 0 0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.chips legend{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--p-200); padding:0 0 8px; width:100%; font-family:'Space Grotesk',sans-serif;
}
.chips legend small{
  color:var(--ink-dim); text-transform:none; letter-spacing:.02em; font-size:11px;
}
.chips label{ position:relative; cursor:pointer }
.chips input{ position:absolute; opacity:0; pointer-events:none }
.chips span{
  display:inline-block; padding:9px 13px;
  border-radius:999px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  font-size:12.5px; color:var(--ink-soft);
  transition:all .25s var(--ease-out);
  user-select:none;
}
.chips label:active span{ transform:scale(.97) }
.chips input:checked + span{
  background:linear-gradient(135deg, rgba(126,92,255,.45), rgba(75,34,199,.55));
  border-color:var(--p-400); color:#fff;
  box-shadow:0 8px 24px -8px rgba(126,92,255,.6), inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateY(-1px);
}
.chips__hint span{ font-style:italic; color:var(--accent) }

.form__safe{
  text-align:center; font-size:11.5px; color:var(--ink-dim);
  margin:2px 0 0;
}

/* ============ FOOTER ============ */
.footer{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  padding:28px 18px 100px;
  color:var(--ink-dim); text-align:center;
}
.footer__inner{
  position:relative; z-index:2;
  display:grid; gap:8px; justify-items:center; max-width:var(--max); margin:0 auto;
}
.footer__logo{
  height:68px; width:auto; opacity:.95; display:block;
  filter:brightness(1.15) drop-shadow(0 4px 20px rgba(180,145,255,.7));
}
@media (max-width:480px){
  .footer__logo{ height:56px }
}
.footer p{ margin:2px 0; font-size:12px }
.footer__links{ display:flex; gap:18px; font-size:12.5px; margin-top:4px }
.footer__links a{ color:var(--p-100); border-bottom:1px solid transparent; transition:border-color .25s var(--ease-out) }
.footer__links a:hover{ border-color:var(--p-100) }
.footer__sign{
  font-family:'Caveat',cursive; color:var(--p-200); font-size:20px;
}
.footer__big{
  position:absolute; left:0; right:0; bottom:-12px;
  font-family:'Cormorant Garamond',serif; font-weight:600; font-style:italic;
  font-size:clamp(72px, 22vw, 200px); line-height:.85; letter-spacing:-.04em;
  text-align:center; white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(180,145,255,.18);
  pointer-events:none; z-index:1; opacity:.55;
  user-select:none;
}

/* ============ FAB ============ */
.fab{
  position:fixed; right:14px; bottom:14px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, #25D366, #128C7E);
  display:grid; place-items:center;
  color:#fff;
  box-shadow:
    0 14px 36px -10px rgba(37,211,102,.55),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .35s var(--ease-out), opacity .35s ease;
}
.fab:hover{ transform:translateY(-2px) scale(1.04) }
.fab__pulse{
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(37,211,102,.5);
  animation:ring 2.4s ease-out infinite;
}
@keyframes ring{
  0%{ transform:scale(.9); opacity:.9 }
  100%{ transform:scale(1.4); opacity:0 }
}

/* ============ CURSOR (desktop only) ============ */
.cursor{
  position:fixed; left:0; top:0; pointer-events:none; z-index:99;
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle, rgba(180,145,255,.5), transparent 70%);
  mix-blend-mode:screen;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .25s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .cursor.is-on{ transform:translate(-50%,-50%) scale(1) }
}

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none }

/* ============ TILT (cards) ============ */
.tilt{ transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out) }

/* ============ TABLET ============ */
@media (min-width: 720px){
  :root{ --max: 1120px }

  /* HERO ----- */
  .hero{ padding:calc(var(--hh) + 32px) 0 48px }
  .hero__stage{
    display:grid; grid-template-columns:1.1fr 1fr; gap:48px;
    align-items:start; padding:0 32px;
  }
  .hero__inner{ order:1; padding-top:8px }
  .hero__photoWrap{
    order:2; grid-row:span 2; aspect-ratio:4/5;
    margin:0; max-height:560px;
  }
  .hero__bottom{ order:3; grid-column:1; align-self:start; margin-top:8px }
  .hero__title{ font-size:clamp(48px, 6.2vw, 72px); margin-top:18px }
  .hero__bigMark{ font-size:220px; right:-20px; top:-40px }
  .hero__sub{ font-size:16px; max-width:42ch; margin-bottom:0 }
  .hero__cta{ display:flex; gap:12px; margin-bottom:16px }
  .hero__cta .btn{ width:auto }
  .hero__stats{ max-width:480px }
  .hero__stats b{ font-size:32px }

  /* SECTION HEAD ----- */
  .sec-head{ padding:64px 32px 20px; text-align:left }
  .sec-head__title{ font-size:clamp(46px, 5.2vw, 64px) }

  /* TABS / PANELS ----- */
  .tabs{ margin:0 32px 22px; max-width:fit-content }
  .tab-panels{ padding:0 32px; min-height:auto }
  .panel.is-active{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch }
  .panel__media{ aspect-ratio:auto; min-height:380px; max-height:500px; height:100% }
  .panel__media img{ position:absolute; inset:0; width:100%; height:100% }
  .panel__media{ position:relative }
  .panel__body{ padding:32px 36px; align-self:center }
  .panel__body h3{ font-size:clamp(28px, 3vw, 38px) }
  .panel__no{ right:24px; top:-16px }

  /* GALLERY ----- */
  .gallery{ overflow:hidden }
  .snap{
    padding:6px 32px 20px;
    scroll-padding-left:32px;
    max-width:var(--max); margin:0 auto;
  }
  .snap__item{ flex:0 0 320px }
  .snap__nav{ max-width:var(--max); margin:0 auto; padding:0 32px 12px }

  /* MUSEO ----- */
  .museo{ padding:8px 32px 14px }
  .museo__card{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch }
  .museo__media{ height:100%; position:relative; min-height:380px }
  .museo__img{ height:100%; aspect-ratio:auto; position:absolute; inset:0; width:100%; object-fit:cover }
  .museo__body{ padding:36px; align-self:center }
  .museo__title{ font-size:clamp(40px, 4.4vw, 56px) }

  /* MANIFIESTO ----- */
  .manifest__hero{
    grid-template-columns:180px 1fr; padding:0 32px; gap:28px;
    max-width:var(--max); margin:0 auto;
  }
  .manifest__photo img{ width:180px; height:220px }
  .manifest__quote{ font-size:22px }

  .acc{
    padding:24px 32px 8px; grid-template-columns:repeat(3,1fr); gap:14px;
    max-width:var(--max); margin:0 auto;
  }

  /* TESTIMONIOS ----- */
  .testi{ overflow:hidden }
  .testi__track{
    max-width:var(--max); margin:0 auto;
    padding:6px 32px 18px;
  }
  .testi__card{ flex:0 0 340px }

  /* FORM ----- */
  .contact{ padding-bottom:120px }
  .form{ padding:32px; max-width:600px; margin:0 auto }
  .form input, .form textarea{ font-size:15px }

  /* MARQUEE ----- */
  .marquee__track{ font-size:30px; gap:36px }
  .marquee__track--rev{ font-size:12px; letter-spacing:.36em }

  /* FOOTER ----- */
  .footer{ padding:56px 32px 100px }
  .footer__big{ font-size:clamp(80px, 16vw, 200px); bottom:-20px }

  /* FAB ----- */
  .fab{ right:24px; bottom:24px; width:60px; height:60px }
}

/* ============ DESKTOP ============ */
@media (min-width: 1100px){
  .hero__stage{ gap:64px; padding:0 40px }
  .hero__title{ font-size:clamp(60px, 5.6vw, 84px) }
  .hero__bigMark{ font-size:260px; top:-60px; right:-28px }
  .hero__sub{ font-size:17px }
  .hero__stats b{ font-size:36px }

  .sec-head{ padding:88px 40px 24px }
  .sec-head__title{ font-size:clamp(54px, 5.4vw, 72px) }
  .tabs{ margin:0 40px 26px }
  .tab-panels{ padding:0 40px }
  .panel__body{ padding:40px 44px }
  .panel__body h3{ font-size:clamp(32px, 3.2vw, 44px) }
  .snap{ padding:6px 40px 22px; scroll-padding-left:40px }
  .snap__item{ flex:0 0 340px }
  .snap__nav{ padding:0 40px 14px }
  .museo{ padding:8px 40px 14px }
  .museo__body{ padding:44px }
  .manifest__hero{ padding:0 40px; gap:36px; grid-template-columns:220px 1fr }
  .manifest__photo img{ width:220px; height:260px }
  .acc{ padding:28px 40px 8px; gap:18px }
  .testi__track{ padding:6px 40px 22px }
  .testi__card{ flex:0 0 360px }
  .footer{ padding:64px 40px 110px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important }
}

/* =========================================================
   ALIVE · Premium motion & micro-interactions (v3)
========================================================= */

/* ----- Mouse-follow aurora (desktop only) ----- */
.mouse-aurora{
  position:fixed; left:0; top:0; pointer-events:none; z-index:-1;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(164,135,255,.35), rgba(126,92,255,.12) 40%, transparent 70%);
  filter:blur(40px);
  transform:translate(-50%,-50%) translate3d(var(--mx,50vw), var(--my,50vh), 0);
  opacity:0; transition:opacity .8s var(--ease-out);
  mix-blend-mode:screen; will-change:transform;
}
.mouse-aurora.is-on{ opacity:1 }

/* ----- Floating particles ----- */
.particles{
  position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden;
}
.particles span{
  position:absolute; bottom:-20px;
  width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(180,145,255,.6) 50%, transparent 70%);
  opacity:0;
  animation:rise var(--d,18s) linear var(--delay,0s) infinite;
  filter:blur(.3px);
}
.particles span:nth-child(3n){ width:3px; height:3px; background:radial-gradient(circle,#d5beff,transparent 70%) }
.particles span:nth-child(5n){ width:6px; height:6px; opacity:.7 }
@keyframes rise{
  0%   { opacity:0; transform:translate3d(0, 0, 0) scale(.6) }
  10%  { opacity:.9 }
  90%  { opacity:.9 }
  100% { opacity:0; transform:translate3d(var(--xf,40px), -110vh, 0) scale(1.2) }
}

/* ----- v3 shimmer rules removed (replaced by v4 elegance) ----- */

/* ----- Letter reveal for hero title ----- */
.hero__title .letter{
  display:inline-block; opacity:0;
  transform:translateY(28px) rotateX(20deg);
  transform-origin:50% 100%;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:transform, opacity;
}
.hero__title .letter.is-space{ width:.28em }
.kinetic.is-in .letter{ opacity:1; transform:none }

/* ----- Liquid button hover ----- */
.btn--primary{
  background-size:200% 200%;
  background-position:0% 50%;
  transition:background-position .6s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn--primary:hover{ background-position:100% 50% }
.btn--primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform:translateX(-110%);
  transition:transform .9s var(--ease-out);
  pointer-events:none;
}
.btn--primary:hover::after{ transform:translateX(110%) }

/* ----- Card glow ring (tilt cards) ----- */
.tilt{ position:relative }
.tilt::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(180,145,255,.5), rgba(126,92,255,0) 40%, rgba(126,92,255,.4));
  opacity:0; transition:opacity .45s var(--ease-out);
  pointer-events:none; z-index:-1;
  filter:blur(8px);
}
.tilt:hover::before{ opacity:1 }

/* ----- Marquee pause on hover ----- */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused }

/* ----- Sec-head animated underline ----- */
.sec-head__kicker i{
  width:18px; height:1px;
  background:linear-gradient(90deg, var(--p-300), transparent);
  transform-origin:left center; animation:kicker-grow 2.4s var(--ease-out) infinite;
}
@keyframes kicker-grow{
  0%,100%{ transform:scaleX(.6); opacity:.6 }
  50%    { transform:scaleX(1.4); opacity:1 }
}

/* ----- Section enter glow ----- */
.sec-head{ position:relative }
.sec-head::after{
  content:""; position:absolute; left:18px; right:18px; bottom:6px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(180,145,255,.45) 30%, rgba(126,92,255,.7) 50%, rgba(180,145,255,.45) 70%, transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.2s var(--ease-out);
}
.sec-head.is-in::after{ transform:scaleX(1) }

/* ----- Cursor expand states ----- */
.cursor{
  transition:width .35s var(--ease-out), height .35s var(--ease-out), background .35s var(--ease-out);
}
.cursor.is-target{
  width:64px; height:64px;
  background:radial-gradient(circle, rgba(180,145,255,.18), transparent 70%);
  border:1px solid rgba(180,145,255,.5);
}
.cursor.is-magnet{
  width:80px; height:80px;
  background:radial-gradient(circle, rgba(180,145,255,.25), transparent 70%);
}

/* ----- Hero photo entrance (clip-path reveal) ----- */
.hero__photoWrap{
  clip-path:inset(0 0 0 0 round var(--radius-lg));
  -webkit-clip-path:inset(0 0 0 0 round var(--radius-lg));
}
.hero__photoWrap.reveal{
  clip-path:inset(0 100% 0 0 round var(--radius-lg));
  -webkit-clip-path:inset(0 100% 0 0 round var(--radius-lg));
  transition:clip-path 1.4s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero__photoWrap.is-in{
  clip-path:inset(0 0 0 0 round var(--radius-lg));
  -webkit-clip-path:inset(0 0 0 0 round var(--radius-lg));
}

/* ----- Stat counters ----- */
.hero__stats li{ opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.hero__stats.is-in li{ opacity:1; transform:none }
.hero__stats.is-in li:nth-child(1){ transition-delay:.2s }
.hero__stats.is-in li:nth-child(2){ transition-delay:.35s }
.hero__stats.is-in li:nth-child(3){ transition-delay:.5s }

/* ----- Stagger chips reveal ----- */
.chips label{ opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out) }
.chips.is-in label{ opacity:1; transform:none }
.chips.is-in label:nth-child(2){ transition-delay:.06s }
.chips.is-in label:nth-child(3){ transition-delay:.12s }
.chips.is-in label:nth-child(4){ transition-delay:.18s }
.chips.is-in label:nth-child(5){ transition-delay:.24s }
.chips.is-in label:nth-child(6){ transition-delay:.3s }
.chips.is-in label:nth-child(7){ transition-delay:.36s }
.chips.is-in label:nth-child(8){ transition-delay:.42s }

/* ----- Snap items stagger reveal ----- */
.snap__item.reveal{ transition-delay:0s }
.snap.is-in .snap__item:nth-child(2){ transition-delay:.08s }
.snap.is-in .snap__item:nth-child(3){ transition-delay:.16s }
.snap.is-in .snap__item:nth-child(4){ transition-delay:.24s }
.snap.is-in .snap__item:nth-child(5){ transition-delay:.32s }
.snap.is-in .snap__item:nth-child(6){ transition-delay:.4s }

/* ----- Image hover lift + saturation pulse ----- */
.panel__media, .snap__item, .museo__media, .testi__card{ transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out) }
.snap__item:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -20px rgba(126,92,255,.45), 0 12px 30px -16px rgba(0,0,0,.6) }

/* ----- Glow pulse on FAB ----- */
.fab{ animation:fab-bob 4s ease-in-out infinite }
@keyframes fab-bob{ 50%{ transform:translateY(-3px) } }

/* ----- Smooth section enter padding glow ----- */
section{ position:relative }
section::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:120px; height:1px;
  background:linear-gradient(90deg, transparent, var(--p-300), transparent);
  opacity:0; transition:opacity 1s var(--ease-out), width 1s var(--ease-out);
}
section.is-near::before{ opacity:.5; width:240px }

/* ----- Hero CTA buttons stagger ----- */
.hero__cta .btn{ opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.hero__bottom.is-in .hero__cta .btn:nth-child(1){ opacity:1; transform:none; transition-delay:.1s }
.hero__bottom.is-in .hero__cta .btn:nth-child(2){ opacity:1; transform:none; transition-delay:.2s }

/* ----- Acc details stagger ----- */
.acc details{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out) }
.acc.is-in details{ opacity:1; transform:none }
.acc.is-in details:nth-child(2){ transition-delay:.08s }
.acc.is-in details:nth-child(3){ transition-delay:.16s }

/* ----- Testimonial stagger ----- */
.testi__track .testi__card.reveal{ transition-delay:0s }
.testi__track.is-in .testi__card:nth-child(2){ transition-delay:.1s }
.testi__track.is-in .testi__card:nth-child(3){ transition-delay:.2s }
.testi__track.is-in .testi__card:nth-child(4){ transition-delay:.3s }

/* ----- Nav scroll state ----- */
.nav.is-scrolled{
  background:linear-gradient(180deg, rgba(5,3,12,.92), rgba(5,3,12,.65));
  box-shadow:0 10px 28px -16px rgba(0,0,0,.7);
}

/* ----- Eyebrow tag hover (glass chip in hero) ----- */
.hero__eyebrow{
  animation:eyebrow-float 5s ease-in-out infinite;
}
@keyframes eyebrow-float{
  50%{ transform:translateY(-3px) }
}

/* ----- Image grain in motion ----- */
.grain{ animation:grain-shift 9s steps(8) infinite }
@keyframes grain-shift{
  0%   { transform:translate(0,0) }
  20%  { transform:translate(-8%,3%) }
  40%  { transform:translate(6%,-3%) }
  60%  { transform:translate(-3%,7%) }
  80%  { transform:translate(4%,-2%) }
  100% { transform:translate(0,0) }
}

/* ----- Hover scale subtle on link arrows ----- */
.link-arrow{ display:inline-flex; align-items:center; gap:6px; transition:color .25s var(--ease-out), gap .35s var(--ease-out), border-color .25s var(--ease-out), letter-spacing .25s var(--ease-out) }
.link-arrow:hover{ letter-spacing:.04em }

/* ----- Tag pulse + chip glow on check ----- */
.chips input:checked + span{ animation:chip-pop .35s var(--ease-out) }
@keyframes chip-pop{
  0%  { transform:scale(.94) }
  60% { transform:scale(1.06) }
  100%{ transform:translateY(-1px) }
}

/* ----- Hero title kinetic line replace (use letter) ----- */
.kinetic .line{ display:block; opacity:1; transform:none } /* override prior line-based fade since we now do letter */

/* ----- Acordion summary hover ----- */
.acc summary{ transition:padding-left .35s var(--ease-out), background .3s var(--ease-out) }
.acc details:hover summary{ padding-left:18px; background:rgba(180,145,255,.04) }

/* ----- Panel media hover gradient shift ----- */
.panel__media::after{ transition:opacity .5s var(--ease-out) }
.panel:hover .panel__media::after{ opacity:.7 }

/* ----- Smooth focus on form inputs ----- */
.field input, .field textarea{ transition:border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .4s var(--ease-out) }

/* ----- Number counter element ----- */
[data-count]{ display:inline-block; min-width:.6em; text-align:right }

/* ----- Reduce particles on small screens ----- */
@media (max-width: 720px){
  .mouse-aurora{ display:none }
  .particles span:nth-child(n+9){ display:none }
}

/* ----- Hide cursor blob on touch / coarse ----- */
@media (hover:none), (pointer:coarse){
  .cursor{ display:none !important }
}

/* =========================================================
   ALIVE · v4 — BIGGER motion, idle continuous animations
========================================================= */

/* ----- Stronger reveal entrance ----- */
.reveal{ opacity:0; transform:translateY(36px) }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform 1s var(--ease-out) }

.snap__item.reveal{ transform:translateY(40px) scale(.92) }
.snap__item.reveal.is-in{ transform:none }

.panel.reveal{ transform:translateY(30px) scale(.96) }

.museo__card.reveal{ transform:translateY(40px) scale(.95); filter:blur(8px) }
.museo__card.reveal.is-in{ transform:none; filter:none }

.testi__card.reveal{ transform:translateY(24px) rotate(-1deg) }
.testi__card.reveal.is-in{ transform:none }

.acc details.reveal{ transform:translateX(-12px) }
.acc details.reveal.is-in{ transform:none }

/* ----- Hero photo idle Ken Burns (always on) ----- */
.hero__photo{
  animation:ken-burns 22s ease-in-out infinite alternate;
}
@keyframes ken-burns{
  0%   { transform:scale(1.04) translate(0,0) }
  100% { transform:scale(1.14) translate(-3%, -2%) }
}

/* ----- Stats numbers: static elegance (no nervous pulsing) ----- */
.hero__stats li:nth-child(3) b{ font-size:32px }

/* ----- Sec-head title: clean white with subtle texture ----- */
.sec-head__title{
  color:#fff;
  background:none;
  -webkit-background-clip:initial; background-clip:initial;
  text-shadow:0 2px 28px rgba(126,92,255,.18);
}

/* ----- Word3d: elegant sweep with proper background-clip ----- */
.word3d{
  position:relative; display:inline-block;
  background-image:linear-gradient(95deg, #ddc7ff 0%, #a487ff 45%, #c4a3ff 100%) !important;
  background-size:220% 100% !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  filter:none !important;
  animation:word-sweep 7s ease-in-out infinite;
}
@keyframes word-sweep{
  0%,100% { background-position:0% 50% }
  50%     { background-position:100% 50% }
}
/* Subtle decorative underline */
.word3d::after{
  content:""; position:absolute; left:6%; right:6%; bottom:-2px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(180,145,255,.55), transparent);
  opacity:.7;
}

/* ----- Aurora orbs MORE drift ----- */
.aurora{ animation-duration:14s }
.aurora--1{ animation-delay:0s }
.aurora--2{ animation-delay:-4s }
.aurora--3{ animation-delay:-9s }
@keyframes drift{
  0%   { transform:translate3d(0,0,0)   scale(1)   }
  50%  { transform:translate3d(60px,-40px,0) scale(1.2) }
  100% { transform:translate3d(-30px,40px,0) scale(.95) }
}

/* ----- Cards lift more on hover ----- */
.panel:hover, .museo__card:hover{ transform:translateY(-6px) }
.snap__item:hover{ transform:translateY(-8px) scale(1.02) }
.testi__card:hover{ transform:translateY(-4px) }
.panel, .museo__card{ transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out) }

/* ----- Tabs pill: stable elegant shadow ----- */

/* ----- Tab text subtle bounce on switch ----- */
.tab.is-active{ animation:tab-bounce .5s var(--ease-out) }
@keyframes tab-bounce{
  0%   { transform:scale(.94) }
  50%  { transform:scale(1.06) }
  100% { transform:scale(1) }
}

/* ----- FAB more alive ----- */
.fab{ animation:fab-bob 3s ease-in-out infinite, fab-glow 2.4s ease-in-out infinite }
@keyframes fab-glow{
  0%,100% { box-shadow:0 14px 36px -10px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.2) }
  50%     { box-shadow:0 18px 50px -8px rgba(37,211,102,.85), 0 0 0 6px rgba(37,211,102,.12), inset 0 1px 0 rgba(255,255,255,.25) }
}

/* ----- Bigger letter entrance ----- */
.hero__title .letter{
  transform:translateY(60px) rotateX(60deg) scale(.85);
}
.kinetic.is-in .letter{ transform:none }

/* ----- Glyphs more visible & spinning ----- */
.glyph{
  opacity:.22;
  animation:spinY 12s linear infinite, glyph-float 4s ease-in-out infinite;
}
.glyph--2{ animation:spinY 14s linear infinite reverse, glyph-float 5s ease-in-out infinite }
.glyph--3{ animation:spinY 10s linear infinite, glyph-float 6s ease-in-out infinite }
@keyframes glyph-float{
  0%,100% { translate:0 0 }
  50%     { translate:0 -10px }
}

/* ----- Buttons more pronounced hover ----- */
.btn{ transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-position .6s var(--ease-out) }
.btn--primary:hover{ transform:translateY(-3px) scale(1.04) }
.btn--ghost:hover{ transform:translateY(-2px); background:rgba(180,145,255,.14); border-color:rgba(180,145,255,.55) }

/* ----- Chips MORE motion ----- */
.chips{ position:relative }
.chips label{
  transform:translateY(14px) scale(.9);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.chips.is-in label{ opacity:1; transform:none }
.chips input:checked + span{ transform:translateY(-2px) scale(1.04) }
.chips input + span{ transition:all .3s var(--ease-out), transform .3s var(--ease-out) }
.chips label:hover span{ transform:translateY(-1px); border-color:rgba(180,145,255,.45); background:rgba(180,145,255,.08) }

/* ----- Acordion stronger entrance ----- */
.acc details{ transform:translateX(-18px); opacity:0 }
.acc.is-in details{ opacity:1; transform:none }

/* ----- Hero CTA buttons enter from below ----- */
.hero__cta .btn{ transform:translateY(20px) scale(.92) }
.hero__bottom.is-in .hero__cta .btn{ transform:none }

/* ----- Hero stats more dramatic enter ----- */
.hero__stats li{ transform:translateY(20px) scale(.85); filter:blur(4px) }
.hero__stats.is-in li{ transform:none; filter:none }

/* ----- Marquee: clean, no glow pulse ----- */

/* ----- Panel media more dramatic slow zoom ----- */
.panel.is-active .panel__media img{
  animation:slow-zoom 15s ease-in-out infinite alternate;
}
@keyframes slow-zoom{
  0%   { transform:scale(1.04) rotate(0deg) }
  100% { transform:scale(1.15) rotate(-1deg) }
}

/* ----- Cursor stronger states ----- */
.cursor{ background:radial-gradient(circle, rgba(180,145,255,.5), rgba(126,92,255,.15) 50%, transparent 75%) }

/* ----- Hero eyebrow: gentle float only ----- */
.hero__eyebrow{ animation:eyebrow-float 6s ease-in-out infinite }

/* ----- Sec-head kicker: clean, no shimmer ----- */

/* ----- Manifest quote: static ----- */

/* ----- Snap items hover image zoom stronger ----- */
.snap__item:hover img{ transform:scale(1.12); filter:saturate(1.25) contrast(1.08) }

/* ----- Form fields subtle glow on focus ----- */
.field input:focus, .field textarea:focus{
  box-shadow:0 0 0 4px rgba(126,92,255,.18), 0 12px 30px -10px rgba(126,92,255,.4);
}

/* ----- Nav brand subtle hover only ----- */
.nav__brand{ transition:transform .35s var(--ease-out) }
.nav__brand:hover{ transform:scale(1.03) }

/* ----- bigMark: refined floating, no aggressive pulse ----- */
.hero__bigMark{
  animation:bigmark-float 8s ease-in-out infinite alternate;
}
@keyframes bigmark-float{
  0%   { transform:translateY(0) rotate(0deg) }
  100% { transform:translateY(-10px) rotate(-3deg) }
}

/* ----- Footer big text: static elegance ----- */
.footer__big{ opacity:.5 }

/* ----- Snap container animation reveal ----- */
.snap.reveal{ opacity:1; transform:none } /* container always visible */

/* ----- Always-visible failsafes (no JS / observer fail) ----- */
@media (prefers-reduced-motion:reduce){
  .reveal, .chips label, .hero__stats li, .acc details, .hero__cta .btn,
  .hero__title .letter, .kinetic .line, .snap__item.reveal,
  .panel.reveal, .museo__card.reveal{
    opacity:1 !important; transform:none !important; filter:none !important;
    clip-path:none !important; -webkit-clip-path:none !important;
  }
}

/* =========================================================
   PREMIUM v5 — Cinematic depth, light, restraint
========================================================= */

/* ----- Section dividers: organic gradient curves ----- */
.section-divider{
  position:relative; height:80px; margin:0; pointer-events:none;
  overflow:hidden;
}
.section-divider::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78%; max-width:560px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(180,145,255,.45) 30%, rgba(126,92,255,.75) 50%, rgba(180,145,255,.45) 70%, transparent);
  filter:blur(.3px);
}
/* Use the official T mark in the center of dividers — strategic branding */
.section-divider__t{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle, rgba(8,4,15,1) 0%, rgba(8,4,15,1) 55%, transparent 100%);
  display:grid; place-items:center;
  z-index:1;
}
.section-divider__t img{
  width:18px; height:auto;
  filter:drop-shadow(0 0 8px rgba(180,145,255,.5));
  opacity:.85;
  animation:divider-float 4s ease-in-out infinite alternate;
}
@keyframes divider-float{
  0%   { transform:translateY(-1px) }
  100% { transform:translateY(1px) }
}

/* ----- Card spotlight: soft light follows mouse ----- */
.spot{ position:relative; isolation:isolate; overflow:hidden }
.spot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(180,145,255,.18), transparent 60%);
  opacity:0; transition:opacity .4s var(--ease-out);
  mix-blend-mode:screen;
  z-index:2;
}
.spot:hover::after{ opacity:1 }

/* ----- Refined image hover: gentle grade ----- */
.panel__media img, .museo__img, .snap__item img{
  transition:transform 1s var(--ease-out), filter .6s var(--ease-out);
}
.panel:hover .panel__media img,
.museo__card:hover .museo__img,
.snap__item:hover img{
  transform:scale(1.06); filter:saturate(1.18) contrast(1.06) brightness(1.04);
}

/* Per-element image saturation defaults */
.panel__media img, .museo__img, .snap__item img{
  filter:saturate(1.05);
}

/* ----- Soft vignette inside media containers ----- */
.panel__media::before, .museo__media::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  box-shadow:inset 0 0 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  border-radius:inherit;
}

/* ----- Hero title: clean elegant letter entrance ----- */
.hero__title .letter{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s var(--ease-out), transform .9s var(--ease-out);
  will-change:opacity, transform;
}
.kinetic.is-in .letter{ opacity:1; transform:none }
/* hard failsafe: 3.4s after first paint, letters MUST be visible */
.hero__title .letter{
  animation:hero-letter-fallback 0s linear 3.4s forwards;
}
@keyframes hero-letter-fallback{
  to { opacity:1; transform:none }
}

/* ----- Hero subline gradient text ----- */
.hero__sub{
  background:linear-gradient(90deg, var(--ink-soft), var(--ink) 50%, var(--ink-soft));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sub-shimmer 8s ease-in-out infinite;
}
@keyframes sub-shimmer{
  0%,100% { background-position:0% 50% }
  50%     { background-position:100% 50% }
}

/* ----- Card lift: more cinematic shadow ----- */
.panel, .museo__card, .testi__card, .snap__item{
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.panel:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 80px -30px rgba(126,92,255,.55), 0 18px 40px -16px rgba(0,0,0,.6);
}
.museo__card:hover{
  transform:translateY(-6px);
  box-shadow:0 50px 100px -36px rgba(126,92,255,.6), 0 24px 50px -20px rgba(0,0,0,.7);
}

/* ----- Tab pill: cleaner shadow, no pulse ----- */
.tabs__pill{
  box-shadow:0 14px 32px -14px rgba(126,92,255,.55), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ----- Tab text subtle scale on activate ----- */
.tab{ transition:color .3s var(--ease-out), transform .35s var(--ease-out) }
.tab.is-active{ transform:scale(1) }
.tab:not(.is-active):hover{ color:#fff }

/* ----- Better cursor blob: tighter glow ----- */
.cursor{
  background:radial-gradient(circle, rgba(180,145,255,.45), rgba(126,92,255,.12) 45%, transparent 70%);
  border:1px solid rgba(255,255,255,.04);
}

/* ----- Light beams across hero (very subtle) ----- */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(180,145,255,.05) 50%, transparent 60%),
    linear-gradient(120deg, transparent 70%, rgba(126,92,255,.05) 80%, transparent 90%);
  background-size:200% 200%;
  animation:beams 14s ease-in-out infinite;
}
@keyframes beams{
  0%,100% { background-position:0% 0% }
  50%     { background-position:100% 100% }
}

/* ----- Form: more refined glass ----- */
.form{
  background:linear-gradient(180deg, rgba(31,15,92,.25), rgba(8,4,15,.45));
  box-shadow:0 30px 80px -24px rgba(75,34,199,.4), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ----- Floating photo glow accent ----- */
.hero__photoWrap::before{
  content:""; position:absolute; inset:-12px; border-radius:calc(var(--radius-lg) + 12px);
  background:radial-gradient(circle at 30% 0%, rgba(180,145,255,.25), transparent 55%);
  z-index:-1; filter:blur(20px); pointer-events:none;
}

/* ----- Service icons inside features ----- */
.panel__feat li i{
  background:radial-gradient(circle, #d5beff, #7e5cff 70%);
  box-shadow:0 0 12px rgba(126,92,255,.7);
}

/* ----- Manifest photo decorative ring ----- */
.manifest__photo{ position:relative }
.manifest__photo::before{
  content:""; position:absolute; inset:-8px; border-radius:24px;
  background:conic-gradient(from 0deg, transparent, rgba(180,145,255,.35), transparent 40%, transparent 60%, rgba(126,92,255,.3), transparent);
  animation:ring-rotate 12s linear infinite;
  z-index:-1; filter:blur(4px);
}
@keyframes ring-rotate{ to{ transform:rotate(360deg) } }

/* ----- Footer big text: subtle stroke ----- */
.footer__big{
  -webkit-text-stroke-color:rgba(180,145,255,.16);
}

/* ----- Smoother glass nav with scrolled state ----- */
.nav{
  transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.nav.is-scrolled{
  background:linear-gradient(180deg, rgba(5,3,12,.94), rgba(5,3,12,.78));
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8);
  border-bottom-color:rgba(180,145,255,.12);
}

/* ----- Improved chips reveal: stagger nicer ----- */
.chips input + span{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.10);
}
.chips label:hover input + span{
  background:rgba(180,145,255,.10);
  border-color:rgba(180,145,255,.35);
  color:#fff;
}

/* ----- Acc with subtle highlight ----- */
.acc details summary{ position:relative }
.acc details summary::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--p-300), transparent);
  opacity:0; transition:opacity .35s var(--ease-out);
}
.acc details[open] summary::before{ opacity:1 }

/* ----- Hero title smooth scale on idle ----- */
.hero__title{
  transition:filter .8s var(--ease-out);
}

/* ----- Hero photo gradient overlay refined ----- */
.hero__photo-grade{
  background:
    radial-gradient(140% 70% at 25% 0%, rgba(126,92,255,.18), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(5,3,12,.55) 100%),
    linear-gradient(120deg, rgba(75,34,199,.18) 0%, transparent 45%);
}

/* ----- Acordion summary > i refined ----- */
.acc details[open] summary i{
  background:linear-gradient(135deg,#a487ff,#4b22c7);
  border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(126,92,255,.7);
}

/* ----- Glassy chip on chips__hint ----- */
.chips__hint span{
  background:linear-gradient(135deg, rgba(180,145,255,.1), rgba(126,92,255,.05));
  border-color:rgba(180,145,255,.25);
  color:#e4d5ff;
}

/* ----- Snap arrows clean ----- */
.snap__arrow{
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.snap__arrow:hover{ transform:translateY(-2px) scale(1.08) }

/* ----- Sec head: refined underline glow appearance ----- */
.sec-head{ position:relative }
.sec-head__title{ position:relative; display:inline-block }
.sec-head__title::after{
  content:""; position:absolute; left:0; right:-20%; bottom:-6px;
  height:1px;
  background:linear-gradient(90deg, rgba(180,145,255,.5), transparent);
  opacity:0; transition:opacity 1s var(--ease-out) .4s;
}
.sec-head.is-in .sec-head__title::after{ opacity:1 }

/* ----- Manifest quote refined ----- */
.manifest__quote{ position:relative; padding-left:18px }
.manifest__quote::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--p-300), transparent);
  border-radius:2px;
}

/* ----- Disable tilt::before color on certain elements that don't need it ----- */
.hero__photoWrap::before, .tilt.no-glow::before{ background:radial-gradient(circle at 30% 0%, rgba(180,145,255,.25), transparent 55%) !important }

/* ----- Re-tighten responsiveness on small screens ----- */
@media (max-width: 720px){
  .section-divider{ height:60px }
  .footer__big{ font-size:clamp(64px, 20vw, 140px) }
}

/* =========================================================
   v6 — Unique identity per section + gallery polish
========================================================= */

/* ---------- Per-section accent colors (each kicker has own tint) ---------- */
#servicios .sec-head__kicker{ color:#c4a3ff }
#galeria   .sec-head__kicker{ color:#ddc7ff }
#museo     .sec-head__kicker{ color:#b491ff }
#manifiesto .sec-head__kicker{ color:#a487ff }
.testi    .sec-head__kicker{ color:#d5beff }
#contacto  .sec-head__kicker{ color:#fff }

#servicios .sec-head__kicker i{ background:linear-gradient(90deg, #c4a3ff, transparent) }
#galeria   .sec-head__kicker i{ background:linear-gradient(90deg, #ddc7ff, transparent) }
#museo     .sec-head__kicker i{ background:linear-gradient(90deg, #b491ff, transparent) }
#manifiesto .sec-head__kicker i{ background:linear-gradient(90deg, #a487ff, transparent) }
.testi    .sec-head__kicker i{ background:linear-gradient(90deg, #d5beff, transparent) }

/* ---------- Big section numbers (decorative outline) — VISIBLE ---------- */
.sec-head{ position:relative; overflow:visible }
.sec-head__bignum{
  position:absolute; right:18px; top:-18px;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
  font-size:140px; line-height:.9;
  color:transparent;
  -webkit-text-stroke:2px rgba(180,145,255,.35);
  pointer-events:none; user-select:none;
  opacity:.85;
  letter-spacing:-.04em;
  z-index:0;
}
.sec-head__title, .sec-head__kicker, .sec-head__sub{ position:relative; z-index:1 }
@media (min-width: 720px){
  .sec-head__bignum{ font-size:220px; right:42px; top:-30px }
}

/* ---------- Services: layered tab indicator + grid pattern bg ---------- */
.services{
  position:relative; isolation:isolate;
}
.services::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(180,145,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,145,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 50% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 30%, #000, transparent 80%);
  opacity:.7;
}

/* ---------- Gallery: cinematic filmstrip frame + caption ---------- */
.gallery{
  position:relative; isolation:isolate;
}
.gallery::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(800px 400px at 50% 50%, rgba(126,92,255,.10), transparent 60%);
}
/* sprocket-like dots above & below the snap */
.gallery .snap{ position:relative }
.gallery .snap::before, .gallery .snap::after{
  content:""; position:absolute; left:18px; right:18px; height:1px;
  background:repeating-linear-gradient(90deg, rgba(180,145,255,.22) 0 6px, transparent 6px 22px);
  pointer-events:none;
}
.gallery .snap::before{ top:-2px }
.gallery .snap::after{ bottom:-2px }

/* Snap arrows refined + click pulse */
.snap__arrow{
  position:relative;
  width:42px; height:42px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(180,145,255,.04));
  border:1px solid rgba(180,145,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:#ddc7ff; font-size:22px; font-weight:300; line-height:1;
}
.snap__arrow:hover{
  background:linear-gradient(135deg, rgba(126,92,255,.25), rgba(75,34,199,.15));
  border-color:rgba(180,145,255,.55);
  color:#fff; transform:translateY(-1px);
  box-shadow:0 8px 24px -10px rgba(126,92,255,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.snap__arrow:active{ transform:translateY(0) scale(.92) }
.snap__arrow.is-pressed{
  animation:arrow-press .45s cubic-bezier(.16,1,.3,1);
}
@keyframes arrow-press{
  0%   { transform:scale(.88) }
  60%  { transform:scale(1.08) }
  100% { transform:scale(1) }
}

/* ---------- Museo: spotlight ambient ---------- */
#museo{ position:relative; isolation:isolate }
#museo::before{
  content:""; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  width:60%; height:200px; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(126,92,255,.22), transparent);
  filter:blur(40px);
}

/* ---------- Manifest: typed lines feel ---------- */
.manifest{ position:relative; isolation:isolate }
.manifest::before{
  content:""; position:absolute; left:0; right:0; top:0; height:120px; z-index:-1;
  background:
    linear-gradient(180deg, rgba(126,92,255,.08), transparent),
    repeating-linear-gradient(180deg, rgba(180,145,255,.04) 0 1px, transparent 1px 28px);
  pointer-events:none;
  mask-image:linear-gradient(180deg, #000, transparent);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent);
}

/* ---------- Testi: quote-mark bg ornaments ---------- */
.testi{ position:relative; isolation:isolate }
.testi::before{
  content:"“"; position:absolute; left:8px; top:-30px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:240px; line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(180,145,255,.14);
  pointer-events:none; z-index:-1;
}

/* ---------- Contact: starfield bg ---------- */
.contact{ position:relative; isolation:isolate }
.contact::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 22% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(180,145,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 64%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 88% 80%, rgba(180,145,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 88%, rgba(255,255,255,.4), transparent 60%);
  opacity:.7;
  animation:starfield-twinkle 6s ease-in-out infinite;
}
@keyframes starfield-twinkle{ 50%{ opacity:.35 } }

/* ---------- Hero ornament (decorative line + glyph + tag) ---------- */
.hero__ornament{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 6px;
}
.hero__ornament-line{
  display:inline-block; width:36px; height:1px;
  background:linear-gradient(90deg, transparent, #b491ff, transparent);
}
.hero__ornament-mark{
  font-family:'Cormorant Garamond',serif;
  color:#b491ff; font-size:14px;
  filter:drop-shadow(0 0 8px rgba(180,145,255,.6));
  animation:ornament-spin 12s linear infinite;
  display:inline-block;
}
@keyframes ornament-spin{ to{ transform:rotate(360deg) } }
.hero__ornament-text{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(196,163,255,.7);
}

/* ---------- Hero title hierarchy refinement ---------- */
.hero__title{ position:relative }
.hero__title em{
  font-style:italic;
  font-weight:600;
}
.hero__title .line{
  display:block; position:relative;
}
/* tighter line spacing for cinematic feel */
.hero__title .line + .line{ margin-top:-4px }

/* Decorative accent line by hero title */
.hero__title::before{
  content:""; position:absolute; left:0; top:-14px;
  width:32px; height:1px;
  background:linear-gradient(90deg, #b491ff, transparent);
  opacity:.6;
}

/* ---------- Hero photo gets a faint corner mark ---------- */
.hero__photoWrap::after{
  content:"✦"; position:absolute; bottom:14px; right:14px;
  font-family:'Cormorant Garamond',serif;
  color:rgba(255,255,255,.5); font-size:14px; z-index:3;
  text-shadow:0 2px 12px rgba(126,92,255,.6);
  pointer-events:none;
}

/* ---------- Snap items: each gets a slightly distinct hover lift speed ---------- */
.snap__item{ transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s cubic-bezier(.2,.8,.2,1) }
.snap__item:nth-child(2n){ transition-duration:.65s }
.snap__item:nth-child(3n){ transition-duration:.5s }

/* ---------- Acordeón refined per-item left accent color ---------- */
.acc details:nth-child(1) summary::before{ background:linear-gradient(180deg, transparent, #c4a3ff, transparent) }
.acc details:nth-child(2) summary::before{ background:linear-gradient(180deg, transparent, #a487ff, transparent) }
.acc details:nth-child(3) summary::before{ background:linear-gradient(180deg, transparent, #7e5cff, transparent) }

/* ---------- Nav links — extra polish on hover ---------- */
.nav__panel a{
  position:relative;
  color:rgba(246,240,255,.92);
}
.nav__panel a:hover{
  background:rgba(180,145,255,.12);
  border-color:rgba(180,145,255,.25);
  color:#fff;
  transform:translateX(2px);
}
.nav__panel a{ transition:background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out) }
.nav__panel a::before{
  color:rgba(180,145,255,.85);
  font-weight:600;
}

/* ---------- Hero title: ensure container has enough room ---------- */
.hero__inner{ overflow:visible }
.hero__title{ overflow:visible }

/* ---------- Reduced-motion safety: letters always visible ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__title .letter{ opacity:1 !important; transform:none !important; animation:none !important }
}

/* =========================================================
   v7 — Carlos Tinoco palette refinement (60p / 20y / 10b / 10g)
========================================================= */
:root{
  --gold:    #f7c948;
  --gold-2:  #ffd66b;
  --blue:    #3a4fff;
  --blue-2:  #6c7dff;
  --gold-glow: rgba(247,201,72,.45);
  --blue-glow: rgba(58,79,255,.45);
}

/* Strategic gold accents (20%) */
.hero__eyebrow i{
  background:radial-gradient(circle, #fff, var(--gold-2) 60%, transparent);
  box-shadow:0 0 16px var(--gold-glow);
}
.hero__ornament-mark{
  color:var(--gold-2);
  filter:drop-shadow(0 0 10px var(--gold-glow));
}
.hero__photoWrap::after{ /* ✦ on photo */
  color:var(--gold-2);
  text-shadow:0 2px 14px var(--gold-glow);
}
.panel__no{
  color:var(--gold-2);
  border-color:rgba(247,201,72,.35);
  background:rgba(8,4,15,.6);
}
.snap__no{
  color:var(--gold-2);
  border-color:rgba(247,201,72,.35);
}
.badge{ color:var(--gold-2) }

/* Strategic blue accents (10%) */
.fab__pulse{ border-color:rgba(58,79,255,.5) }
.snap__dots i.is-active{
  background:linear-gradient(90deg, var(--gold-2), var(--p-300));
  box-shadow:0 0 10px var(--gold-glow);
}
.contact__glow{
  background:radial-gradient(closest-side, rgba(126,92,255,.4), rgba(58,79,255,.15) 60%, transparent);
}

/* Panel feature dots — alternate purple / gold for visual rhythm */
.panel__feat li:nth-child(odd) i{
  background:radial-gradient(circle, var(--gold-2), #d49616 70%);
  box-shadow:0 0 8px var(--gold-glow);
}
.panel__feat li:nth-child(even) i{
  background:radial-gradient(circle, var(--blue-2), var(--blue) 70%);
  box-shadow:0 0 8px var(--blue-glow);
}

/* Acordeón open icon — gold accent for visual variation */
.acc details:nth-child(2)[open] summary i{
  background:linear-gradient(135deg,var(--gold-2),#d49616);
}
.acc details:nth-child(3)[open] summary i{
  background:linear-gradient(135deg,var(--blue-2),var(--blue));
}

/* Form chip — selected gets purple but with gold check ▸ */
.chips input:checked + span::before{
  content:"✓ "; color:var(--gold-2); margin-right:2px;
}
.chips__hint span{ color:var(--gold-2); border-color:rgba(247,201,72,.4) }

/* Big section numbers — alternate purple/gold */
#galeria .sec-head__bignum{ -webkit-text-stroke-color:rgba(247,201,72,.32) }
#manifiesto .sec-head__bignum{ -webkit-text-stroke-color:rgba(58,79,255,.28) }

/* Footer signature accent */
.footer__sign{
  background:linear-gradient(95deg, var(--p-200), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}

/* Hero stats — middle stat (500+) in gold */
.hero__stats li:nth-child(2) b{
  background:linear-gradient(180deg, #fff, var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__stats li:nth-child(2) b i{ color:var(--gold-2); -webkit-text-fill-color:var(--gold-2) }

/* Manifest bio block */
.manifest__bio{
  max-width:var(--max); margin:18px auto 0;
  padding:0 18px;
  display:grid; gap:12px;
  color:var(--ink-soft); font-size:14px; line-height:1.65;
}
.manifest__bio p{ margin:0 }
.manifest__bio b{ color:var(--gold-2); font-weight:700; letter-spacing:.02em }
.manifest__bio em{ font-style:italic; color:var(--p-100); font-weight:500 }

@media (min-width: 720px){
  .manifest__bio{ padding:0 32px; max-width:780px; font-size:15.5px; gap:14px }
}

/* Dimensión Tinoco badge styling — make it pop more */
.museo__title em{
  background:linear-gradient(180deg, var(--gold-2), #d49616);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:600;
}

/* Tag chip in hero photo (@tinocoartist) */
.hero__photo-tag{
  border-color:rgba(247,201,72,.3);
}

/* Marquee divider color — gold */
.marquee__track i{
  color:var(--gold-2);
  -webkit-text-fill-color:var(--gold-2);
}

/* Sec-head kicker accent line — pull in gold tone */
#servicios .sec-head__kicker i,
#galeria .sec-head__kicker i{
  background:linear-gradient(90deg, var(--gold-2), transparent);
}

/* Decorative artist mug photo treatment */
.manifest__photo img{
  filter:contrast(1.05) saturate(1.05);
}
.manifest__photo::after{
  content:""; position:absolute; left:-6px; bottom:-6px; right:30%;
  height:2px;
  background:linear-gradient(90deg, var(--gold-2), transparent);
  border-radius:2px;
}

/* Btn primary — subtle gold edge */
.btn--primary::before{
  background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(247,201,72,.25) 40%, rgba(126,92,255,.4));
}

/* =========================================================
   v8 — EDITORIAL (video showcase)
========================================================= */
.editorial{
  position:relative;
  padding:18px 18px 24px;
  max-width:var(--max); margin:0 auto;
  isolation:isolate;
}
.editorial__frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:9/13;
  /* Branded poster gradient — shows while video loads or if it fails */
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(126,92,255,.45), transparent 55%),
    radial-gradient(100% 70% at 80% 90%, rgba(75,34,199,.35), transparent 60%),
    radial-gradient(60% 40% at 50% 50%, rgba(247,201,72,.08), transparent),
    linear-gradient(160deg, #1a0f3a 0%, #0a0518 60%, #1d0f56 100%);
  border:1px solid rgba(180,145,255,.22);
  box-shadow:
    0 50px 90px -30px rgba(0,0,0,.75),
    0 20px 60px -24px rgba(126,92,255,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  isolation:isolate;
}
/* Loading shimmer — fades when video starts */
.editorial__frame::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, transparent 30%, rgba(180,145,255,.12) 50%, transparent 70%);
  background-size:200% 100%;
  animation:editorial-shimmer 3.5s linear infinite;
  pointer-events:none;
  opacity:1; transition:opacity .8s var(--ease-out);
}
.editorial__frame.is-playing::before{ opacity:0 }
@keyframes editorial-shimmer{
  0%   { background-position:200% 0 }
  100% { background-position:-200% 0 }
}
/* If video fails, hide it (poster remains visible) */
.editorial__frame.is-error .editorial__video,
.editorial__frame.is-error .editorial__mute{ display:none }

.editorial__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
  filter:saturate(1.05) contrast(1.05);
}
/* Overlay: purple wash + bottom darken — keeps text legible & matches brand */
.editorial__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,4,15,.35) 0%, transparent 25%, transparent 55%, rgba(8,4,15,.92) 100%),
    linear-gradient(135deg, rgba(75,34,199,.32) 0%, transparent 50%, rgba(126,92,255,.18) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(247,201,72,.10), transparent 50%);
  mix-blend-mode:normal;
}
.editorial__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain-shift 9s steps(8) infinite;
}

/* Corners: cinematic frame brackets */
.editorial__corner{
  position:absolute; width:24px; height:24px; z-index:4;
  border:1.5px solid rgba(247,201,72,.55);
  pointer-events:none;
}
.editorial__corner--tl{ top:18px; left:18px; border-right:0; border-bottom:0 }
.editorial__corner--tr{ top:18px; right:18px; border-left:0; border-bottom:0 }
.editorial__corner--bl{ bottom:18px; left:18px; border-right:0; border-top:0 }
.editorial__corner--br{ bottom:18px; right:18px; border-left:0; border-top:0 }

/* Floating T mark — bottom right */
.editorial__mark{
  position:absolute; right:24px; top:30px; z-index:4;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
  font-size:64px; line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(247,201,72,.5);
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 4px 16px rgba(247,201,72,.35));
}

/* Mute / unmute toggle */
.editorial__mute{
  position:absolute; right:20px; bottom:20px; z-index:5;
  width:42px; height:42px; border-radius:50%;
  background:rgba(8,4,15,.6);
  border:1px solid rgba(180,145,255,.32);
  color:#ddc7ff;
  backdrop-filter:blur(10px);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.editorial__mute:hover{
  background:rgba(126,92,255,.25);
  border-color:rgba(180,145,255,.6);
  color:#fff;
  transform:scale(1.06);
}
.editorial__mute:active{ transform:scale(.94) }

/* Content overlay */
.editorial__content{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:24px 22px 70px;
  display:grid; gap:8px;
}
.editorial__kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase;
  color:#ffe5a8;
}
.editorial__kicker i{
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff, var(--gold-2) 60%, transparent);
  box-shadow:0 0 12px var(--gold-glow);
  animation:pulse 2s var(--ease-out) infinite;
}
.editorial__title{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(34px, 9.5vw, 52px);
  line-height:1.02; letter-spacing:-.01em;
  margin:6px 0 4px; color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.7);
}
.editorial__title em{
  font-style:italic;
  background:linear-gradient(180deg, #ffe5a8, var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.editorial__sub{
  margin:0; color:rgba(246,240,255,.88);
  font-size:13.5px; line-height:1.55; max-width:42ch;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.editorial__meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:8px;
}
.editorial__tag{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  color:var(--gold-2);
  border-color:rgba(247,201,72,.32);
}
.editorial__link{
  color:#fff; font-size:13px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:2px;
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.editorial__link:hover{ color:var(--gold-2); border-color:var(--gold-2) }

/* Reveal on scroll */
.editorial.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out) }
.editorial.reveal.is-in{ opacity:1; transform:none }

@media (min-width:720px){
  .editorial{ padding:32px; }
  .editorial__frame{ aspect-ratio:16/9; max-height:78vh }
  .editorial__corner{ width:32px; height:32px; top:28px !important; bottom:28px; left:28px; right:28px }
  .editorial__corner--tl{ bottom:auto; right:auto }
  .editorial__corner--tr{ bottom:auto; left:auto }
  .editorial__corner--bl{ top:auto; right:auto }
  .editorial__corner--br{ top:auto; left:auto }
  .editorial__content{ padding:48px 56px 64px; max-width:62%; bottom:0 }
  .editorial__title{ font-size:clamp(48px, 5.5vw, 80px) }
  .editorial__sub{ font-size:15px }
  .editorial__mark{ font-size:96px; right:48px; top:48px }
  .editorial__mute{ right:32px; bottom:32px; width:48px; height:48px }
}

@media (min-width:1100px){
  .editorial{ padding:40px }
  .editorial__content{ padding:60px 72px 72px; max-width:56% }
}

/* =========================================================
   v9 — Performance optimizations
========================================================= */

/* Skip rendering of off-screen sections (browser pauses layout/paint) */
#manifiesto, .testi, #contacto, .footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 800px;
}

/* Hint browser to use GPU for cards (smooth scroll) */
.snap__item, .panel, .museo__card, .testi__card{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Smooth image rendering */
img{ image-rendering:auto }

/* Reduce paint cost of fixed effects on mobile */
@media (max-width: 720px){
  .mouse-aurora, .cursor{ display:none !important }
  .particles span:nth-child(n+6){ display:none } /* only 5 particles on mobile */
  .ambient .aurora{ animation-duration:30s } /* slower = less repaint */
  .stars{ display:none } /* heavy multi-radial gradient, drop on mobile */
}

/* Avoid layout thrashing on parallax */
.hero__photoWrap, .hero__bigMark{
  will-change:transform;
}

/* On slow connections, simplify */
@media (prefers-reduced-data:reduce){
  .editorial__video{ display:none }
  .editorial__frame{ aspect-ratio:5/4 }
}

/* =========================================================
   v10 — Biografía section + brand polish
========================================================= */
.bio{
  position:relative; isolation:isolate;
  padding-bottom:14px;
}
.bio::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(600px 400px at 50% 0%, rgba(126,92,255,.10), transparent 60%),
    radial-gradient(400px 300px at 100% 50%, rgba(247,201,72,.06), transparent 70%);
}
.bio__article{
  max-width:760px; margin:0 auto; padding:8px 18px 14px;
  display:grid; gap:18px;
  font-size:14.5px; line-height:1.72;
  color:var(--ink-soft);
  position:relative;
}
.bio__article::before{
  content:""; position:absolute; left:14px; top:6px; bottom:50px; width:2px;
  background:linear-gradient(180deg, transparent, rgba(180,145,255,.45) 20%, rgba(247,201,72,.3) 80%, transparent);
  border-radius:2px;
}
.bio__article p{ margin:0; padding-left:14px }
.bio__article b{ color:var(--gold-2); font-weight:700; letter-spacing:.01em }
.bio__article em{ font-style:italic; color:var(--p-100); font-weight:500 }
.bio__lead{
  font-size:16px; color:var(--ink);
}
.bio__lead::first-letter{
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-weight:600;
  font-size:54px; line-height:.85;
  float:left; margin:4px 12px 0 0;
  background:linear-gradient(180deg, #fff, var(--p-200));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.bio__close{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:18px; line-height:1.5;
  color:#fff;
  border-top:1px solid var(--line);
  padding-top:18px !important;
  margin-top:6px;
}
.bio__signature{
  display:flex; justify-content:flex-end;
  padding:0 14px 0 0;
  margin-top:-6px;
}
.bio__signature img{
  height:80px; width:auto;
  filter:brightness(1.4) drop-shadow(0 4px 16px rgba(164,135,255,.55));
  opacity:.92;
  transform:rotate(-2deg);
}

@media (min-width:720px){
  .bio__article{ padding:8px 32px 14px; font-size:16px; gap:20px }
  .bio__article p{ padding-left:24px }
  .bio__article::before{ left:24px }
  .bio__lead{ font-size:18px }
  .bio__lead::first-letter{ font-size:68px }
  .bio__close{ font-size:22px }
  .bio__signature img{ height:120px }
}

@media (min-width:1100px){
  .bio__article{ padding:14px 40px 18px }
  .bio__article p{ padding-left:32px }
  .bio__article::before{ left:32px }
}

/* Brand area in nav — more breathing room for bigger logo */
.nav{ padding:8px 14px }
.nav__brand{ gap:12px }

/* Add content-visibility to bio for perf */
#biografia{ content-visibility:auto; contain-intrinsic-size:auto 800px }

/* ====== Bio hero (photo + quote — merged from former Manifiesto) ====== */
.bio__hero{
  max-width:760px; margin:0 auto;
  padding:6px 18px 20px;
  display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:center;
}
.bio__photo{ position:relative; isolation:isolate }
.bio__photo img{
  width:104px; height:128px; object-fit:cover; border-radius:18px;
  border:1px solid var(--line-2);
  transform:rotate(-3deg);
  transition:transform .5s var(--ease-out);
  filter:contrast(1.05) saturate(1.05);
  box-shadow:0 18px 50px -20px rgba(126,92,255,.55), 0 2px 10px -2px rgba(0,0,0,.4);
}
.bio__photo:hover img{ transform:rotate(0deg) scale(1.02) }
.bio__photo-glow{
  position:absolute; inset:-12px; border-radius:24px;
  background:radial-gradient(circle, rgba(126,92,255,.4), transparent 65%);
  z-index:-1; filter:blur(20px);
}
.bio__photo::before{
  content:""; position:absolute; inset:-6px; border-radius:22px;
  background:conic-gradient(from 0deg, transparent, rgba(180,145,255,.32), transparent 40%, transparent 60%, rgba(247,201,72,.22), transparent);
  animation:bio-ring-rotate 14s linear infinite;
  z-index:-1; filter:blur(3px);
}
@keyframes bio-ring-rotate{ to{ transform:rotate(360deg) } }
.bio__quote{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:18px; line-height:1.3; color:var(--ink);
  margin:0; position:relative; padding-left:16px;
}
.bio__quote::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--p-300), var(--gold-2));
  border-radius:2px;
}
.bio__quote-sign{
  display:block; margin-top:8px; font-family:'Caveat',cursive;
  color:var(--p-200); font-size:20px;
}

@media (min-width:720px){
  .bio__hero{
    grid-template-columns:200px 1fr; padding:8px 32px 28px; gap:32px;
    max-width:780px;
  }
  .bio__photo img{ width:200px; height:240px }
  .bio__quote{ font-size:22px }
}

@media (min-width:1100px){
  .bio__hero{ padding:14px 40px 32px; gap:40px; grid-template-columns:220px 1fr }
  .bio__photo img{ width:220px; height:260px }
  .bio__quote{ font-size:24px }
}

/* =========================================================
   v11 — Instagram CTA card in Galería
========================================================= */
.ig-card{
  position:relative; isolation:isolate;
  display:block;
  max-width:520px;
  margin:24px 18px 18px;
  padding:22px 22px 20px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(31,15,92,.55), rgba(8,4,15,.7));
  border:1px solid rgba(180,145,255,.22);
  box-shadow:
    0 30px 80px -24px rgba(126,92,255,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--ink);
  text-decoration:none;
  overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
@media (min-width:720px){ .ig-card{ margin:28px auto 22px; max-width:540px } }
@media (min-width:1100px){ .ig-card{ margin:32px auto 26px } }

/* Animated multi-color gradient border ring (Instagram-inspired but brand-friendly) */
.ig-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, #a487ff 0%, #f7c948 35%, #ff5a7e 60%, #7e5cff 90%);
  background-size:200% 200%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  animation:ig-border-shift 8s ease-in-out infinite;
  opacity:.85;
}
@keyframes ig-border-shift{
  0%,100% { background-position:0% 50% }
  50%     { background-position:100% 50% }
}

/* Internal soft glow */
.ig-card__glow{
  position:absolute; inset:-30%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(closest-side, rgba(247,201,72,.18), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(126,92,255,.30), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(255,90,126,.18), transparent 55%);
  filter:blur(30px);
}

/* Grain */
.ig-card__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Header row: avatar + handle + verified */
.ig-card__head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:10px;
  position:relative; z-index:1;
}
.ig-card__avatar{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #a487ff, #7e5cff 50%, #4b22c7);
  color:#fff;
  box-shadow:
    0 0 0 2px rgba(180,145,255,.35),
    0 0 0 4px rgba(8,4,15,.85),
    0 0 0 5px rgba(247,201,72,.45),
    0 6px 18px -4px rgba(126,92,255,.6);
  position:relative;
  flex-shrink:0;
}
.ig-card__avatar svg{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) }

.ig-card__id{ flex:1; min-width:0; display:grid; gap:2px }
.ig-card__handle{
  font-family:'Caveat',cursive; font-weight:700; font-size:26px;
  background:linear-gradient(95deg, #fff 0%, #ddc7ff 50%, var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  line-height:1;
  letter-spacing:.5px;
}
.ig-card__role{
  font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-soft);
}
.ig-card__verified{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold-2), #d49616);
  color:#08040f; font-size:13px; font-weight:800;
  box-shadow:0 0 0 2px rgba(247,201,72,.18);
  flex-shrink:0;
}

/* Lead text */
.ig-card__lead{
  margin:6px 0 18px;
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);
  position:relative; z-index:1;
}

/* Mini preview grid (visual decoration — fake feed) */
.ig-card__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin-bottom:16px;
  position:relative; z-index:1;
}
.ig-card__tile{
  aspect-ratio:1/1;
  border-radius:8px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(180,145,255,.15);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ig-card__tile::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay; opacity:.5;
}
.ig-card__tile--1{ background:linear-gradient(135deg, #4b22c7, #a487ff) }
.ig-card__tile--2{ background:linear-gradient(135deg, #7e5cff, #ff5a7e) }
.ig-card__tile--3{ background:linear-gradient(135deg, #341a8b, #f7c948 90%) }
.ig-card__tile--4{ background:linear-gradient(135deg, #100735, #a487ff) }

/* CTA row */
.ig-card__cta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative; z-index:1;
}
.ig-card__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px;
  background:linear-gradient(135deg, #7e5cff 0%, #4b22c7 100%);
  color:#fff; font-weight:600; font-size:13px;
  box-shadow:
    0 12px 28px -10px rgba(126,92,255,.55),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ig-card__stat{
  font-size:12px; color:var(--gold-2); font-weight:600;
  letter-spacing:.04em;
}

/* Hover effects */
.ig-card:hover{
  transform:translateY(-6px);
  border-color:rgba(247,201,72,.4);
  box-shadow:
    0 50px 100px -30px rgba(126,92,255,.6),
    0 24px 50px -20px rgba(247,201,72,.18),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.ig-card:hover::before{
  animation-duration:3s; opacity:1;
}
.ig-card:hover .ig-card__tile{
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
}
.ig-card:hover .ig-card__tile--1{ transform:translateY(-3px) }
.ig-card:hover .ig-card__tile--2{ transform:translateY(-3px); transition-delay:.05s }
.ig-card:hover .ig-card__tile--3{ transform:translateY(-3px); transition-delay:.10s }
.ig-card:hover .ig-card__tile--4{ transform:translateY(-3px); transition-delay:.15s }
.ig-card:hover .ig-card__btn{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 16px 36px -10px rgba(126,92,255,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.ig-card:active{ transform:translateY(-2px) }

/* Subtle pulse on avatar */
.ig-card__avatar{ animation:ig-avatar-pulse 3.5s ease-in-out infinite }
@keyframes ig-avatar-pulse{
  0%,100% { box-shadow:0 0 0 2px rgba(180,145,255,.35), 0 0 0 4px rgba(8,4,15,.85), 0 0 0 5px rgba(247,201,72,.45), 0 6px 18px -4px rgba(126,92,255,.6) }
  50%     { box-shadow:0 0 0 2px rgba(180,145,255,.5),  0 0 0 4px rgba(8,4,15,.85), 0 0 0 6px rgba(247,201,72,.6),  0 8px 22px -4px rgba(126,92,255,.8) }
}