/* ── Tokens (Taller industrial — alineados a th-tokens.css) ───────
   Fuentes (Archivo + IBM Plex Mono) ya se cargan globalmente en
   enqueue_scripts(); no se re-importan aquí. */
.thf-exp{
    --bg:#08080a;
    --surface:#0f0f12;
    --surface-2:#16161a;
    --line:#23232a;
    --ink:#f2f2ef;
    --muted:#a5a5a2;
    --muted-2:#8c8c8e;
    --metal:#d2a72c;
    --metal-2:#e7bf4a;
    --metal-ink:#08080a;
    --font-display:'Archivo','Arial Narrow',Impact,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --ease:cubic-bezier(.2,.8,.2,1);
    --z-flag:3; --z-shade:2; --z-id:4;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-display);
    overflow:clip;
}
.thf-exp *,.thf-exp *::before,.thf-exp *::after{box-sizing:border-box}
.thf-exp [class*="thf-exp"]{font-family:var(--font-display) !important}
.thf-exp .thf-exp-kicker,.thf-exp .thf-exp-count,.thf-exp .thf-exp-btn,
.thf-exp .thf-exp-row-meta{font-family:var(--font-mono) !important}
.thf-exp a{color:inherit;text-decoration:none}
.thf-exp img{display:block;max-width:100%}
.thf-exp h1,.thf-exp h2,.thf-exp h3{margin:0;text-wrap:balance}
.thf-exp a:focus-visible,.thf-exp button:focus-visible{outline:2px solid var(--metal);outline-offset:3px;border-radius:4px}

/* ── Intro ─────────────────────────────────────────────────────── */
.thf-exp-intro{
    position:relative;isolation:isolate;overflow:hidden;
    background:var(--bg);
    color:var(--ink);
    padding:clamp(48px,7vw,92px) clamp(22px,5vw,84px) clamp(40px,5vw,72px);
    border-bottom:1px solid var(--line);
}
.thf-exp-intro-inner{max-width:1180px;margin:0 auto;position:relative;z-index:1}

/* Focos que derivan lento + barrido diagonal — mismo mecanismo que la
   portada del home (.thf-h3-portada-luz en home-v3.css), a menor escala. */
.thf-exp-intro-glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.thf-exp-luz{
    position:absolute;top:50%;left:50%;
    width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;
    border-radius:50%;will-change:transform;
}
.thf-exp-luz--a{
    background:radial-gradient(circle at center, rgba(210,167,44,.14) 0%, rgba(210,167,44,.05) 34%, transparent 62%);
    animation:thf-exp-deriva-a 23s cubic-bezier(.45,0,.55,1) infinite;
}
.thf-exp-luz--b{
    background:radial-gradient(circle at center, rgba(210,225,255,.07) 0%, rgba(210,225,255,.025) 30%, transparent 58%);
    animation:thf-exp-deriva-b 31s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes thf-exp-deriva-a{
    0%,100%{transform:translate3d(18%,-22%,0) scale(1)}
    50%{transform:translate3d(-14%,10%,0) scale(1.18)}
}
@keyframes thf-exp-deriva-b{
    0%,100%{transform:translate3d(-24%,16%,0) scale(1.1)}
    50%{transform:translate3d(20%,-12%,0) scale(.92)}
}
.thf-exp-brillo{
    position:absolute;top:-60%;left:-35%;width:45%;height:220%;
    background:linear-gradient(100deg,
        transparent 0%, rgba(255,255,255,.045) 45%, rgba(255,255,255,.075) 50%,
        rgba(255,255,255,.045) 55%, transparent 100%);
    filter:blur(26px);
    animation:thf-exp-barre 19s cubic-bezier(.5,0,.5,1) infinite;
    will-change:transform;
}
@keyframes thf-exp-barre{
    0%{transform:translateX(0) rotate(8deg)}
    100%{transform:translateX(340%) rotate(8deg)}
}

.thf-exp-kicker{
    display:flex;align-items:center;gap:9px;margin:0 0 18px;
    color:var(--muted);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.thf-exp-kicker span{color:var(--metal);font-size:1.05rem}
.thf-exp-title{
    font-family:var(--font-display);
    font-weight:600;font-size:clamp(3rem,7vw,5.25rem);line-height:1.02;
    letter-spacing:-.03em;color:var(--ink);
}
.thf-exp-lead{max-width:46ch;margin:22px 0 0;color:var(--muted);font-size:1rem;line-height:1.55}
.thf-exp-count{margin:26px 0 0;color:var(--muted-2);font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.thf-exp-count strong{color:var(--metal-2);font-size:1.05rem;font-weight:600}

/* ── Botones ───────────────────────────────────────────────────── */
.thf-exp-btn{
    min-height:44px;display:inline-flex;align-items:center;gap:10px;
    padding:12px 22px;border-radius:999px;
    font-size:.75rem;font-weight:600;letter-spacing:.02em;
    transition:transform .2s var(--ease),background .2s ease,color .2s ease,border-color .2s ease;
}
.thf-exp-btn:hover{transform:translateY(-2px)}
.thf-exp-btn--acid{background:var(--metal);color:var(--metal-ink)}
.thf-exp-btn--acid:hover{background:var(--metal-2)}
.thf-exp-btn--line{border:1px solid var(--line);color:var(--ink)}
.thf-exp-btn--line:hover{border-color:var(--muted-2);background:var(--surface)}

/* ── Lista de tiendas ── calcada de .thf-h3-store en home-v3.css:
   fila con 3 fotos apiladas, nombre grande, piezas + rango de precio,
   flecha. Mismo componente que ya usa el home, solo que aquí es la
   pantalla completa en vez de un rail de 6. */
.thf-exp-stores{
    max-width:1180px;margin:0 auto;
    padding:clamp(32px,4vw,56px) clamp(20px,5vw,84px) clamp(64px,7vw,100px);
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(30rem,100%),1fr));
    gap:0 48px;
    border-top:1px solid var(--line);
    list-style:none;
}

.thf-exp-row{
    display:flex;align-items:center;gap:20px;
    padding-block:20px;
    border-bottom:1px solid var(--line);
    color:var(--ink);
    transition:border-color .25s var(--ease);
}
.thf-exp-row:hover,
.thf-exp-row:focus-visible{border-bottom-color:rgba(210,167,44,.45)}

.thf-exp-row-shots{flex-shrink:0;display:flex}
.thf-exp-row-shots img{
    width:56px;height:70px;border-radius:12px;object-fit:cover;
    background:var(--surface-2);border:1px solid var(--line);
    transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.thf-exp-row-shots img + img{margin-left:-26px}
.thf-exp-row:hover .thf-exp-row-shots img,
.thf-exp-row:focus-visible .thf-exp-row-shots img{box-shadow:0 8px 24px rgba(0,0,0,.4)}
.thf-exp-row:hover .thf-exp-row-shots img:nth-child(2),
.thf-exp-row:focus-visible .thf-exp-row-shots img:nth-child(2){transform:translateX(14px)}
.thf-exp-row:hover .thf-exp-row-shots img:nth-child(3),
.thf-exp-row:focus-visible .thf-exp-row-shots img:nth-child(3){transform:translateX(28px)}

.thf-exp-row-body{flex:1;min-width:0}
.thf-exp-row-name{
    display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:700;
    letter-spacing:-.01em;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .2s var(--ease);
}
.thf-exp-row:hover .thf-exp-row-name,
.thf-exp-row:focus-visible .thf-exp-row-name{color:var(--metal-2)}
.thf-exp-row-meta{display:block;margin-top:3px;font-size:.75rem;color:var(--muted-2)}
.thf-exp-row-meta b{font-weight:600;color:var(--muted)}

.thf-exp-row-go{
    flex-shrink:0;color:var(--muted-2);
    transition:transform .2s var(--ease),color .2s var(--ease);
}
.thf-exp-row:hover .thf-exp-row-go,
.thf-exp-row:focus-visible .thf-exp-row-go{transform:translateX(6px);color:var(--metal)}

/* ── Outro ─────────────────────────────────────────────────────── */
.thf-exp-outro{
    position:relative;isolation:isolate;overflow:hidden;
    background:var(--bg);
    color:var(--ink);text-align:center;
    padding:clamp(64px,8vw,108px) 22px;
    border-top:1px solid var(--line);
}
.thf-exp-luz--outro{
    top:0;width:52vmax;height:52vmax;margin:-38vmax 0 0 -26vmax;
    opacity:.8;
}
.thf-exp-outro > :not(.thf-exp-luz){position:relative;z-index:1}
.thf-exp-outro-kicker{
    display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
    color:var(--muted);font-family:var(--font-mono);font-size:.7rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
}
.thf-exp-outro-kicker span{color:var(--metal);font-size:1.05rem}
.thf-exp-outro h2{
    font-family:var(--font-display);font-weight:600;color:var(--ink);
    font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.03em;
}
.thf-exp-outro p{margin:14px auto 30px;color:var(--muted);font-size:1rem;max-width:40ch}

/* ── Empty ─────────────────────────────────────────────────────── */
.thf-exp-empty{
    background:var(--bg);color:var(--ink);text-align:center;
    padding:clamp(70px,12vw,140px) 24px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
}
.thf-exp-empty-mark{
    width:84px;height:84px;border:3px solid var(--metal);border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
    font-family:var(--font-display);font-weight:600;font-size:1.8rem;color:var(--metal);
}
.thf-exp-empty h2{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.02em}
.thf-exp-empty p{margin:8px 0 22px;color:var(--muted);max-width:42ch}

/* ── Reveal ── mismo gesto que .thf-h3-stores > li en el home: la fila
   sube y se "descubre" con un clip-path, en cascada por --i. */
.thf-exp [data-store]{opacity:1}
.thf-exp.js-reveal [data-store]{
    opacity:0;transform:translateY(24px);clip-path:inset(0 0 35% 0);
    transition:opacity .5s var(--ease),transform .5s var(--ease),clip-path .5s var(--ease);
    transition-delay:calc(var(--i, 0) * 75ms);
}
.thf-exp.js-reveal [data-store].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
    .thf-exp *{transition-duration:.001ms!important;animation-duration:.001ms!important}
    .thf-exp.js-reveal [data-store]{opacity:1!important;transform:none!important;clip-path:none!important}
    .thf-exp-luz,.thf-exp-brillo{animation:none!important}
}