/* =====================================================================
   Site stylesheet. Tokens in :root come straight from the client's logo (tools/brand_extract.py).
   Reskin = change :root and img/. Outside :root there are no raw brand colors, only var() tokens.
   ===================================================================== */
:root{
  color-scheme: light;
  --azul:#3349BA; --sombra:#2336A4; --profundo:#1B2A8E; --brillo:#4156CB; --noche:#10173F;
  --marfil:#F9EDE6; --oro:#BD872F; --oro-claro:#D29D3E; --tinta:#141C52;

  --bg:#F6F7FC; --surface:#FFFFFF; --ink:#141C52; --muted:#4A5280; --line:#D9DDF0;
  --gold-text:#916210; --tile:#2336A4; --band:#2336A4; --field:#FFFFFF; --footer:#10173F;
  --btn-bg:#3349BA; --btn-ink:#F9EDE6; --btn-fill:#F9EDE6; --btn-fill-ink:#2336A4;
  --skel1:#E6E9F6; --skel2:#F3F5FC; --ring:color-mix(in srgb,var(--azul) 22%,transparent); --danger:#B3261E;
  --theme-color:#3349BA;

  --display:"Marcellus","Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  --text:"Jost","Futura","Century Gothic","Trebuchet MS",system-ui,sans-serif;
  --wrap:76rem; --gutter:clamp(1.25rem,4vw,3rem); --header-h:4.75rem;
  --r-sm:2px; --r-md:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0E1437; --surface:#151D4D; --ink:#F4ECE8; --muted:#B4BAE0; --line:#2A3470;
    --gold-text:#D29D3E; --tile:#1B2A80; --band:#151D4D; --field:#0E1437; --footer:#090E2A;
    --btn-bg:#F9EDE6; --btn-ink:#141C52; --btn-fill:#0E1437; --btn-fill-ink:#F9EDE6;
    --skel1:#1A235A; --skel2:#232E70; --ring:color-mix(in srgb,var(--oro-claro) 28%,transparent); --danger:#FFB4A9; --theme-color:#0E1437;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0E1437; --surface:#151D4D; --ink:#F4ECE8; --muted:#B4BAE0; --line:#2A3470;
  --gold-text:#D29D3E; --tile:#1B2A80; --band:#151D4D; --field:#0E1437; --footer:#090E2A;
  --btn-bg:#F9EDE6; --btn-ink:#141C52; --btn-fill:#0E1437; --btn-fill-ink:#F9EDE6;
  --skel1:#1A235A; --skel2:#232E70; --ring:color-mix(in srgb,var(--oro-claro) 28%,transparent); --danger:#FFB4A9; --theme-color:#0E1437;
}

@view-transition{ navigation:auto }

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.65;overflow-x:hidden}
html.js body{opacity:0;animation:failsafe 0s 2.6s forwards}
html.js.is-ready body{opacity:1;transition:opacity .4s ease;animation:none}
@keyframes failsafe{to{opacity:1}}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--oro-claro);color:var(--tinta)}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--marfil);color:var(--tinta);padding:.6rem 1rem;z-index:120;border-radius:var(--r-sm)}
.skip:focus{top:1rem}
[hidden]{display:none !important}
html[data-lang="en"] [data-lang-block="es"],html[data-lang="es"] [data-lang-block="en"]{display:none}

/* ---------------------------------------------------------------- links */
.link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .25s,text-underline-offset .25s,color .25s}
@media (hover:hover){.link:hover{text-decoration-color:var(--oro-claro);text-underline-offset:.34em;text-decoration-thickness:2px}}
.link:active{color:var(--gold-text)}

/* ---------------------------------------------------------------- buttons
   Hover: a second color wipes in from the left and the text flips.
   Press: the whole button flips to gold. Squared corners, never pills. */
.btn{
  --b-bg:var(--btn-bg); --b-ink:var(--btn-ink); --b-fill:var(--btn-fill); --b-fill-ink:var(--btn-fill-ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.1rem;padding:.75rem 1.6rem;border:1px solid var(--b-bg);border-radius:var(--r-sm);
  background-color:var(--b-bg);color:var(--b-ink);font-weight:500;letter-spacing:.01em;line-height:1.2;text-decoration:none;cursor:pointer;
  background-image:linear-gradient(var(--b-fill),var(--b-fill));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .42s var(--ease),color .3s ease,border-color .3s ease,transform .12s ease,box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent;user-select:none}
@media (hover:hover){.btn:hover{background-size:100% 100%;color:var(--b-fill-ink);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--tinta) 55%,transparent)}}
.btn:active{background-image:linear-gradient(var(--oro-claro),var(--oro-claro));background-size:100% 100%;color:var(--tinta);border-color:var(--oro-claro);transform:translateY(1px) scale(.985);box-shadow:none;transition-duration:0s}
.btn-ghost{--b-bg:transparent;--b-ink:var(--ink);--b-fill:var(--ink);--b-fill-ink:var(--bg);border-color:currentColor}
@media (hover:hover){.btn-ghost:hover{border-color:var(--ink)}}
.btn-sm{min-height:2.5rem;padding:.45rem 1.05rem;font-size:.95rem}
.btn-block{width:100%}
.on-blue .btn,.over-hero .btn{--b-bg:var(--marfil);--b-ink:var(--tinta);--b-fill:var(--profundo);--b-fill-ink:var(--marfil);border-color:var(--marfil)}
.on-blue .btn-ghost{--b-bg:transparent;--b-ink:var(--marfil);--b-fill:var(--marfil);--b-fill-ink:var(--tinta);border-color:color-mix(in srgb,var(--marfil) 75%,transparent)}
.btn[disabled],.btn.is-busy{pointer-events:none;opacity:.85}
.btn .spin{display:none;width:1.05rem;height:1.05rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-busy .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.text-btn{background:transparent;border:0;padding:.5rem;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.text-btn:active{color:var(--oro-claro)}

/* ---------------------------------------------------------------- first-visit curtain */
.curtain{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:var(--sombra) url("../img/satin.webp") center/cover;color:var(--marfil);animation:curtainUp .9s cubic-bezier(.7,0,.2,1) 2.8s forwards}
html.show-loader .curtain{display:grid}
html.show-loader.is-loaded .curtain{animation:curtainUp .9s cubic-bezier(.7,0,.2,1) forwards}
.curtain-in{display:grid;justify-items:center;gap:1.4rem}
.curtain-orn{width:min(15rem,56vw);opacity:0;transform:scale(.92);animation:ornIn .9s var(--ease) .1s forwards}
.curtain-name{font-family:var(--display);font-size:clamp(1.1rem,calc(58vw / var(--mark-len,7)),2.6rem);white-space:nowrap;letter-spacing:.7em;margin-right:-.7em;opacity:0;animation:nameIn 1s var(--ease) .25s forwards}
.curtain-line{width:9rem;height:1px;background:var(--oro-claro);transform:scaleX(0);animation:lineIn .9s var(--ease) .5s forwards}
@keyframes curtainUp{to{transform:translateY(-101%);visibility:hidden}}
@keyframes ornIn{to{opacity:1;transform:none}}
@keyframes nameIn{to{opacity:1;letter-spacing:.26em;margin-right:-.26em}}
@keyframes lineIn{to{transform:scaleX(1)}}

/* ---------------------------------------------------------------- reveal system */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
html.js .is-in .wipe,html.js .wipe.is-in{clip-path:inset(0)}
.rule{display:block;width:4.5rem;height:2px;background:var(--oro);transform-origin:left center}
html.js .rule{transform:scaleX(0);transition:transform .9s var(--ease) .2s}
html.js .is-in .rule,html.js .rule.is-in{transform:scaleX(1)}
.center .rule{margin-inline:auto;transform-origin:center}

/* ---------------------------------------------------------------- ribbon */
.ribbon{background:var(--noche);color:var(--marfil);font-size:.85rem;line-height:1.4;text-align:center;padding:.5rem var(--gutter)}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.site-header.over-hero{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;color:var(--marfil)}
.bar{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.wordmark{display:inline-flex;align-items:baseline;gap:.55rem;font-family:var(--display);font-size:1.4rem;letter-spacing:.2em;text-decoration:none;white-space:nowrap}
.wordmark small{font-family:var(--text);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.over-hero .wordmark small{color:#F6D58A}   /* 5.3:1 on the satin: the darker gold read 3.1:1 at this size */
.nav{display:flex;gap:1.6rem;margin-inline-start:auto}
.nav a{position:relative;text-decoration:none;padding:.5rem 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:var(--oro-claro);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:active{color:var(--oro-claro)}
.tools{display:flex;align-items:center;gap:.7rem}

.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid currentColor;border-radius:var(--r-sm);overflow:hidden;isolation:isolate}
.lang-thumb{position:absolute;z-index:-1;inset:0 50% 0 0;background:var(--ink);transition:transform .35s var(--ease)}
.over-hero .lang-thumb,.on-blue .lang-thumb{background:var(--marfil)}
html[data-lang="en"] .lang-thumb{transform:translateX(100%)}
.lang button{background:transparent;border:0;padding:.38rem .7rem;min-width:2.7rem;font-size:.85rem;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--bg)}
.over-hero .lang button[aria-pressed="true"],.on-blue .lang button[aria-pressed="true"]{color:var(--tinta)}
.lang button:active{color:var(--oro-claro)}

.icon-btn{display:grid;place-items:center;width:2.6rem;height:2.35rem;background:transparent;border:1px solid currentColor;border-radius:var(--r-sm);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .12s}
.icon-btn svg{width:1.15rem;height:1.15rem;transition:transform .5s var(--ease)}
@media (hover:hover){.icon-btn:hover{background:var(--ink);color:var(--bg)}.icon-btn:hover svg{transform:rotate(35deg)}
  .over-hero .icon-btn:hover,.on-blue .icon-btn:hover{background:var(--marfil);color:var(--tinta)}}
.icon-btn:active{background:var(--oro-claro);border-color:var(--oro-claro);color:var(--tinta);transform:scale(.94)}
.menu-btn{display:none}
@media (max-width:68rem){
  .nav,.header-cta{display:none}
  .wordmark{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.85rem,3.2vw,1.15rem);letter-spacing:.14em}.wordmark small{display:none}
  .bar{gap:.75rem}
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;margin-inline-start:auto;min-height:2.35rem;padding:.35rem .85rem;background:transparent;border:1px solid currentColor;border-radius:var(--r-sm);cursor:pointer;transition:background-color .25s,color .25s}
  .menu-btn:active{background:var(--oro-claro);border-color:var(--oro-claro);color:var(--tinta)}
  .tools .icon-btn{display:none}
}

/* mobile menu */
dialog{border:0;padding:0;color:inherit;background:transparent;max-width:none;max-height:none}
dialog::backdrop{background:color-mix(in srgb,var(--noche) 72%,transparent)}
.menu{width:100vw;height:100dvh;margin:0;background:var(--sombra) url("../img/satin.webp") center/cover;color:var(--marfil)}
.menu[open]{display:flex;flex-direction:column;animation:menuIn .45s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:var(--header-h);padding-inline:var(--gutter)}
.menu-tools{display:flex;gap:.75rem;align-items:center}
.menu .icon-btn{display:grid}
.menu-links{display:flex;flex-direction:column;padding:1.5rem var(--gutter);margin-block:auto;list-style:none}
.menu-links a{display:block;font-family:var(--display);font-size:clamp(1.9rem,8.5vw,2.6rem);text-decoration:none;padding:.4rem 0;border-bottom:1px solid color-mix(in srgb,var(--marfil) 16%,transparent);opacity:0;transform:translateX(-14px);animation:linkIn .5s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
.menu-links a[aria-current="page"]{color:var(--oro-claro)}
.menu-links a:active{color:var(--oro-claro)}
@keyframes linkIn{to{opacity:1;transform:none}}
.menu-foot{display:grid;gap:.75rem;padding:0 var(--gutter) calc(2rem + env(safe-area-inset-bottom))}

/* ---------------------------------------------------------------- satin surfaces */
.satin{position:relative;isolation:isolate;color:var(--marfil);background:var(--azul) url("../img/satin.webp") center/cover no-repeat;overflow:hidden}
.satin::after{content:"";position:absolute;inset:-20% -60%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,color-mix(in srgb,#fff 15%,transparent) 50%,transparent 58%);transform:translateX(-70%)}
html.is-ready .satin::after{animation:sheen 2.4s cubic-bezier(.3,.1,.2,1) .2s 1 forwards}
@keyframes sheen{to{transform:translateX(70%)}}

/* home hero */
.hero{margin-top:calc(var(--header-h) * -1);text-align:center}
.hero-inner{display:grid;justify-items:center;gap:clamp(1.2rem,2.4vw,1.9rem);padding-block:calc(var(--header-h) + clamp(1.5rem,4vw,3rem)) clamp(5.5rem,9vw,7.5rem)}
.lockup{width:min(17rem,58vw);height:auto}
.hero h1{font-size:clamp(1.9rem,3.7vw,2.9rem);max-width:23ch}
.hero-sub{font-size:1.125rem;color:color-mix(in srgb,var(--marfil) 92%,transparent);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
html.js .hero .lockup,html.js .hero h1,html.js .hero .hero-sub,html.js .hero .actions{opacity:0;transform:translateY(16px)}
html.is-ready .hero .lockup,html.is-ready .hero h1,html.is-ready .hero .hero-sub,html.is-ready .hero .actions{opacity:1;transform:none;transition:opacity .9s ease,transform .9s var(--ease)}
html.is-ready .hero h1{transition-delay:.15s}html.is-ready .hero .hero-sub{transition-delay:.28s}html.is-ready .hero .actions{transition-delay:.4s}
html.show-loader .hero .lockup{transition-delay:1.1s}html.show-loader .hero h1{transition-delay:1.25s}html.show-loader .hero .hero-sub{transition-delay:1.38s}html.show-loader .hero .actions{transition-delay:1.5s}

/* info strip that overlaps the bottom of the hero */
.strip{position:relative;z-index:2;margin-top:clamp(-3.5rem,-5vw,-2.5rem)}
.strip-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 24px 60px -36px color-mix(in srgb,var(--noche) 55%,transparent)}
.strip-cell{display:grid;gap:.15rem;align-content:center;padding:1.15rem clamp(1rem,2.4vw,1.75rem);text-decoration:none;border-inline-start:1px solid var(--line);transition:background-color .3s,color .3s}
.strip-cell:first-child{border-inline-start:0}
.strip-k{font-size:.85rem;color:var(--muted);transition:color .3s}
.strip-v{font-family:var(--display);font-size:1.2rem;line-height:1.25}
a.strip-cell:active{background:var(--oro-claro);color:var(--tinta)}
@media (hover:hover){a.strip-cell:hover{background:var(--azul);color:var(--marfil)}a.strip-cell:hover .strip-k{color:color-mix(in srgb,var(--marfil) 80%,transparent)}}
.status-open{color:var(--gold-text)}
@media (max-width:48rem){.strip-in{grid-template-columns:1fr}.strip-cell{border-inline-start:0;border-top:1px solid var(--line)}.strip-cell:first-child{border-top:0}}

/* interior page hero */
.page-hero{margin-top:calc(var(--header-h) * -1)}
.page-hero-in{display:grid;gap:1rem;padding-block:calc(var(--header-h) + clamp(2.25rem,6vw,4.5rem)) clamp(2.5rem,6vw,4.5rem);max-width:52rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.9rem;color:color-mix(in srgb,var(--marfil) 85%,transparent);list-style:none}
.crumbs li+li::before{content:"/";margin-inline-end:.5rem;opacity:.6}
.crumbs a{text-underline-offset:.2em}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.page-hero p{font-size:1.15rem;color:color-mix(in srgb,var(--marfil) 92%,transparent);max-width:56ch}

/* ---------------------------------------------------------------- sections */
.section{padding-block:clamp(4rem,8vw,7rem)}
.section-tight{padding-block:clamp(3rem,6vw,5rem)}
.surface{background:var(--surface)}
.section-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4.5vw,3.25rem);max-width:48rem}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}
.section-head h2{font-size:clamp(1.85rem,3.5vw,2.75rem)}
.lede{color:var(--muted);max-width:60ch}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:56rem){.split{grid-template-columns:1fr}}
.stick{position:sticky;top:calc(var(--header-h) + 2rem)}
@media (max-width:56rem){.stick{position:static}}
.prose{display:grid;gap:1.1rem;max-width:64ch}
.prose p{color:var(--ink)}

/* ledger: big names, plain words, no icons */
.ledger{border-top:1px solid var(--line);list-style:none}
.ledger-row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.75rem 3rem;padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding .45s var(--ease),background-color .45s}
.ledger-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--oro);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
@media (hover:hover){.ledger-row:hover{padding-inline:1.25rem;background:color-mix(in srgb,var(--azul) 6%,transparent)}.ledger-row:hover::before{transform:scaleY(1)}}
.ledger-row h3{font-size:clamp(1.45rem,2.6vw,2rem)}
.ledger-row p{max-width:58ch}
.ledger-row .link{display:inline-block;margin-top:.8rem}
.ledger.compact .ledger-row h3{font-size:1.3rem}
@media (max-width:46rem){.ledger-row{grid-template-columns:1fr}}

/* the case */
.tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem)}
@media (max-width:64rem){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:60rem){.tray{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:44rem){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.piece{display:grid;gap:.7rem;align-content:start;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.tray .piece.is-featured{grid-column:span 2;grid-row:span 2}
.piece-art{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--tile);color:var(--oro-claro);border-radius:var(--r-sm);overflow:hidden}
.piece-art svg{width:60%;height:auto;transition:transform .7s var(--ease)}
.piece-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.piece-art::after{content:"";position:absolute;inset:.7rem;border:1px solid var(--oro-claro);opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .45s var(--ease);pointer-events:none}
.piece-ask{position:absolute;left:0;right:0;bottom:0;padding:.6rem .9rem;background:var(--marfil);color:var(--tinta);font-size:.9rem;font-weight:500;text-align:center;transform:translateY(101%);transition:transform .4s var(--ease)}
@media (hover:hover){
  .piece:hover .piece-art svg{transform:scale(1.07)}.piece:hover .piece-art img{transform:scale(1.05)}
  .piece:hover .piece-art::after{opacity:.9;transform:none}
  .piece:hover .piece-ask{transform:none}
  .piece:hover .piece-name{text-decoration-color:var(--oro-claro)}
}
.piece:focus-visible .piece-art::after{opacity:.9;transform:none}
.piece:active .piece-art{filter:brightness(1.12)}
.piece:active .piece-name{color:var(--gold-text)}
.piece-name{font-family:var(--display);font-size:1.18rem;line-height:1.25;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .3s,color .2s}
.tray .is-featured .piece-name{font-size:clamp(1.4rem,2.3vw,1.85rem)}
.piece-meta{color:var(--muted);font-size:.95rem}
.badge{position:absolute;top:.6rem;left:.6rem;z-index:1;padding:.15rem .5rem;background:color-mix(in srgb,var(--noche) 72%,transparent);color:var(--marfil);font-size:.75rem;border-radius:var(--r-sm)}
.case-foot{margin-top:clamp(2rem,4vw,3rem)}

/* skeletons */
.skel{background:linear-gradient(100deg,var(--skel1) 40%,var(--skel2) 50%,var(--skel1) 60%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-sm)}
.skel-art{aspect-ratio:1}.skel-line{height:1rem;margin-top:.7rem;width:80%}.skel-line.short{width:45%}
@keyframes shimmer{to{background-position:-200% 0}}

/* filters */
.filters{display:grid;gap:1rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.35rem .95rem;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .12s}
.chip small{color:var(--muted);font-size:.8rem;transition:color .25s}
@media (hover:hover){.chip:hover{border-color:var(--ink)}}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"] small{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.chip:active{background:var(--oro-claro);border-color:var(--oro-claro);color:var(--tinta);transform:scale(.97)}
.filter-row{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:end;justify-content:space-between}
.filter-selects{display:flex;flex-wrap:wrap;gap:1rem}
.mini{display:grid;gap:.25rem;font-size:.9rem}
.mini select{min-height:2.5rem;padding:.3rem .7rem;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm)}
.count{color:var(--muted);font-size:.95rem}
.empty{display:grid;gap:.9rem;justify-items:start;padding:clamp(2rem,5vw,3.5rem);border:1px dashed var(--line);border-radius:var(--r-md)}
.empty h2,.empty h3{font-size:1.6rem}

/* karat guide */
.karat{display:grid;gap:1.5rem}
.karat-tabs{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;width:min(100%,26rem)}
.karat-tabs button{background:transparent;border:0;border-inline-start:1px solid var(--line);padding:.7rem .5rem;font-family:var(--display);font-size:1.15rem;cursor:pointer;transition:background-color .3s,color .3s}
.karat-tabs button:first-child{border-inline-start:0}
@media (hover:hover){.karat-tabs button:hover{background:color-mix(in srgb,var(--azul) 10%,transparent)}}
.karat-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.karat-tabs button:active{background:var(--oro-claro);color:var(--tinta)}
.karat-panel{display:grid;gap:1rem}
.karat-num{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.karat-pct{font-family:var(--display);font-size:clamp(2.6rem,6vw,4rem);line-height:1;color:var(--gold-text);font-variant-numeric:tabular-nums}
.karat-bar{height:.7rem;background:var(--line);border-radius:var(--r-sm);overflow:hidden}
.karat-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--oro),var(--oro-claro));transition:width .9s var(--ease)}
.note{display:grid;gap:.6rem;padding:clamp(1.25rem,3vw,2rem);background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--oro);border-radius:var(--r-md)}
.surface .note{background:var(--bg)}
.note h3{font-size:1.4rem}

/* numbered steps: only used for real sequences */
.band{background:var(--band);color:var(--marfil)}
.band .lede{color:color-mix(in srgb,var(--marfil) 86%,transparent)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);counter-reset:step}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{counter-increment:step;display:grid;gap:.6rem;align-content:start;border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);padding-top:1.1rem}
.steps li::before{content:counter(step);font-family:var(--display);font-size:2.5rem;line-height:1;color:var(--oro-claro)}
.steps.on-light li::before{color:var(--gold-text)}
.steps h3{font-size:1.3rem}
.steps p{font-size:1rem;opacity:.88}
@media (max-width:60rem){.steps,.steps.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:34rem){.steps,.steps.three{grid-template-columns:1fr}}

/* custom examples */
.makes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);list-style:none}
.make{display:grid;gap:.7rem;align-content:start}
.make h3{font-size:1.25rem}
.make p{color:var(--muted);font-size:1rem}
@media (max-width:60rem){.makes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* values and care lists */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);list-style:none}
.values li{display:grid;gap:.6rem;align-content:start;padding-top:1.1rem;border-top:2px solid var(--oro)}
.values h3{font-size:1.35rem}
.values p{color:var(--muted)}
@media (max-width:52rem){.values{grid-template-columns:1fr}}
.ticks{list-style:none;display:grid;gap:.9rem}
.ticks li{display:grid;grid-template-columns:1.4rem 1fr;gap:.75rem;align-items:start}
.ticks li::before{content:"";width:.6rem;height:.6rem;margin-top:.55rem;background:var(--oro);transform:rotate(45deg)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(1.15rem,2vw,1.35rem);transition:color .25s,padding .35s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.85rem;height:.85rem;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.faq summary:hover{color:var(--gold-text);padding-inline-start:.5rem}}
.faq summary:active{color:var(--gold-text)}
.faq-a{padding:0 0 1.4rem;max-width:64ch;color:var(--muted)}
.faq details[open] .faq-a{animation:faqIn .45s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* closing call to action on satin */
.cta{text-align:center}
.cta-in{display:grid;justify-items:center;gap:1.4rem;padding-block:clamp(4rem,8vw,6.5rem)}
.cta-orn{width:min(16rem,52vw)}
.cta h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.cta p{max-width:52ch;color:color-mix(in srgb,var(--marfil) 92%,transparent)}

/* visit */
.visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:56rem){.visit-grid{grid-template-columns:1fr}}
.facts{display:grid;gap:1.75rem}
.fact{display:grid;gap:.35rem}
.fact h3{font-family:var(--text);font-weight:600;font-size:1rem}
.map-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{text-align:start;font-weight:400;padding:.4rem 0;border-bottom:1px solid var(--line)}
.hours td{text-align:end;font-variant-numeric:tabular-nums}
.hours tr.today th,.hours tr.today td{font-weight:600}
.hours tr.today th::after{content:"";display:inline-block;width:.45rem;height:.45rem;margin-inline-start:.5rem;background:var(--oro);transform:rotate(45deg) translateY(-2px)}
.status{font-weight:500}

/* forms */
.form{display:grid;gap:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2.25rem)}
.surface .form{background:var(--bg)}
.form-head{display:grid;gap:.4rem}
.form-head h2,.form-head h3{font-size:1.6rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:500;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;min-height:3.1rem;padding:.7rem .85rem;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:6.5rem;resize:vertical}
@media (hover:hover){.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--ring)}
:root[data-theme="dark"] .field input:focus,:root[data-theme="dark"] .field select:focus,:root[data-theme="dark"] .field textarea:focus{border-color:var(--oro-claro)}
.field.bad input,.field.bad textarea{border-color:var(--danger)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:36rem){.two{grid-template-columns:1fr}}
.hint{color:var(--muted);font-size:.9rem}
.err{color:var(--danger);font-size:.92rem;min-height:1.3em}
.hp{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}
.done{display:grid;gap:.8rem;justify-items:start;padding:.5rem 0}
.done h3{font-size:1.6rem}
.check{width:3.4rem;height:3.4rem;color:var(--gold-text)}
.check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .7s var(--ease) forwards}
.check path{stroke-dasharray:36;stroke-dashoffset:36;animation:draw .45s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.demo-note{padding:.8rem 1rem;border:1px dashed var(--line);border-radius:var(--r-sm);font-size:.92rem;color:var(--muted)}

/* wayfinding map (visit page) */
.wayfind{display:grid;gap:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2.25rem)}
.surface .wayfind{background:var(--bg)}
.map-art{background:var(--tile);color:var(--oro-claro);border-radius:var(--r-sm);padding:clamp(.75rem,2vw,1.25rem)}
.map-art svg{width:100%;height:auto;overflow:visible}
.map-art text{font-family:var(--text);font-size:13px;fill:currentColor;letter-spacing:.02em}
.map-art .map-display{font-family:var(--display);font-size:20px}
.map-art .map-big{font-family:var(--display);font-size:44px}
.map-art .map-unit{fill:var(--oro-claro);stroke:var(--oro-claro)}
.map-art .map-unit-text{font-family:var(--display);font-size:15px;fill:var(--tinta);font-weight:600}
.map-art .map-num circle{fill:var(--marfil);stroke:var(--marfil)}
.map-art .map-num text{font-family:var(--display);font-size:13px;fill:var(--tinta)}
.map-art .map-pulse{fill:none;stroke:var(--oro-claro);transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.wayfind-steps,.wayfind-steps.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.wayfind-steps li{padding-top:.75rem}
.wayfind-steps li::before{font-size:1.6rem}
.wayfind-steps p{opacity:1;color:var(--ink)}
@media (max-width:34rem){.wayfind-steps,.wayfind-steps.three{grid-template-columns:1fr 1fr}}

/* piece page */
.piece-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:56rem){.piece-layout{grid-template-columns:1fr}}
.gallery{display:grid;gap:.75rem}
.gallery .piece-art{aspect-ratio:1}
.gallery .piece-art svg{width:56%}
.thumbs{display:flex;gap:.6rem;flex-wrap:wrap}
.thumbs button{width:4.5rem;height:4.5rem;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--tile)}
.thumbs button[aria-pressed="true"]{border-color:var(--oro);box-shadow:0 0 0 2px var(--oro)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.piece-info{display:grid;gap:1.4rem}
.piece-info h1{font-size:clamp(2rem,4vw,2.9rem)}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:start;padding:.55rem 0;border-bottom:1px solid var(--line);font-weight:400}
.spec th{color:var(--muted);width:40%}
.row-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.tag{display:inline-block;padding:.15rem .55rem;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.8rem;color:var(--muted)}

/* legal */
.legal-doc{max-width:46rem}
.legal-doc h2{font-size:1.55rem;margin-top:2.6rem;margin-bottom:.8rem}
.legal-doc h3{font-family:var(--text);font-weight:600;font-size:1.05rem;margin-top:1.4rem;margin-bottom:.4rem}
.legal-doc p,.legal-doc li{color:var(--ink);margin-bottom:.9rem}
.legal-doc ul{padding-inline-start:1.25rem;margin-bottom:1rem}
.legal-doc .meta{color:var(--muted);font-size:.95rem}
.legal-toc{list-style:none;display:grid;gap:.35rem;padding:1.25rem 1.5rem;margin:1.5rem 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.legal-toc li{margin:0}

/* footer */
.site-footer{background:var(--footer);color:var(--marfil);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.foot-top{display:grid;justify-items:center;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem);text-align:center}
.foot-lockup{width:min(12rem,46vw)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
@media (max-width:56rem){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:32rem){.foot-grid{grid-template-columns:1fr}}
.foot-col{display:grid;gap:.7rem;align-content:start}
.foot-col h2{font-family:var(--text);font-weight:600;font-size:.95rem;color:var(--oro-claro)}
.foot-list{list-style:none;display:grid;gap:.45rem}
.site-footer a{text-decoration:none;background:linear-gradient(var(--oro-claro),var(--oro-claro)) left bottom/0% 1px no-repeat;transition:background-size .35s var(--ease),color .25s;padding-bottom:1px}
@media (hover:hover){.site-footer a:hover{background-size:100% 1px}}
.site-footer a:active{color:var(--oro-claro)}
.foot-legal{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.25rem;border-top:1px solid color-mix(in srgb,var(--marfil) 18%,transparent);font-size:.875rem;color:color-mix(in srgb,var(--marfil) 78%,transparent)}

/* mobile action bar */
.actionbar{display:none}
@media (max-width:48rem){
  .actionbar{position:fixed;inset-inline:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 30px -22px color-mix(in srgb,var(--noche) 60%,transparent)}
  .actionbar a{display:grid;justify-items:center;gap:.15rem;padding:.55rem .25rem .5rem;text-decoration:none;font-size:.82rem;font-weight:500;border-inline-start:1px solid var(--line);transition:background-color .15s,color .15s}
  .actionbar a:first-child{border-inline-start:0}
  .actionbar a:active{background:var(--oro-claro);color:var(--tinta)}
  .actionbar svg{width:1.25rem;height:1.25rem}
  .actionbar .primary{background:var(--azul);color:var(--marfil)}
  body{padding-bottom:calc(3.7rem + env(safe-area-inset-bottom))}
}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom));z-index:150;transform:translate(-50%,1.5rem);opacity:0;padding:.7rem 1.1rem;background:var(--ink);color:var(--bg);border-radius:var(--r-sm);font-size:.95rem;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* 404 */
.nf{display:grid;justify-items:center;gap:1.4rem;text-align:center;padding-block:calc(var(--header-h) + clamp(3rem,10vw,7rem)) clamp(4rem,10vw,8rem)}
.nf h1{font-size:clamp(2.2rem,5vw,3.5rem)}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;transition-delay:0s !important}
  html.js .reveal,html.js .wipe,html.js .rule,html.js .hero .lockup,html.js .hero h1,html.js .hero .hero-sub,html.js .hero .actions{opacity:1;transform:none;clip-path:none}
  .satin::after{display:none}
  .curtain{display:none !important}
  .map-pulse{display:none}
}
@media print{.site-header,.actionbar,.ribbon,.curtain,.site-footer{display:none}body{opacity:1 !important}}
.about-mark{width:min(20rem,70%);height:auto}