/* ============================================================
   Índice de trabajos (/trabajos/, /en/work/)
   Lista tipográfica + escenario sticky con el color de cada marca.
   Solo se carga en esa página.
   ============================================================ */

.wx-hero { padding-bottom: clamp(36px, 4vw, 64px); }
.wx-hero .h1 { max-width: 13ch; }

.wx { padding-bottom: clamp(72px, 8vw, 128px); }

/* ---------- barra: contador + filtros ---------- */
.wx__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.wx__count {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.wx__count b { font-weight: 600; color: var(--ink); font-size: 13px; letter-spacing: .06em; }
.wx__hint { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); color: var(--mute); }
@media (hover: none), (max-width: 899px) { .wx__hint { display: none; } }
.wx__chips { margin: 0; gap: 6px; }
.wx__chips .chip { padding: 8px 13px; font-size: 13px; display: inline-flex; align-items: baseline; gap: 5px; }
.wx__chips .chip sup { font: 500 9.5px/1 var(--mono); letter-spacing: .04em; opacity: .55; top: 0; }

/* ---------- rejilla ---------- */
.wx__grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(32px, 4.2vw, 76px); align-items: start;
}

/* ---------- lista ---------- */
.wx__list { list-style: none; margin: 0; padding: 0 0 clamp(80px, 30vh, 320px); }
.wx__item { border-bottom: 1px solid var(--line); }
.wx__item[hidden] { display: none; }
.wx__row {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 18px 20px;
  padding: clamp(20px, 2.1vw, 30px) 0; color: var(--ink); text-decoration: none;
  transition: opacity .5s var(--ease);
}
.wx__row:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.wx__n { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--mute); align-self: start; padding-top: .9em; transition: color .4s var(--ease); }
.wx__tile { display: none; }
.wx__main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wx__name {
  margin: 0; display: flex; align-items: center;
  font-family: var(--f); font-variation-settings: "wdth" 104; font-weight: 740;
  font-size: clamp(30px, 3.2vw, 54px); line-height: .98; letter-spacing: -.04em;
}
.wx__nt { display: inline-block; min-width: 0; transition: transform .7s var(--ease-out); padding-bottom: .06em; text-wrap: balance; }
.wx__sw {
  flex: none; display: inline-block; width: 0; height: .56em; margin-right: 0; border-radius: .14em;
  background: var(--bg); box-shadow: inset 0 0 0 1px rgba(21, 19, 29, .14);
  transition: width .6s var(--ease-out), margin .6s var(--ease-out);
}
.wx__meta { font-size: 14px; color: var(--ink-3); line-height: 1.3; }
.wx__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
.wx__tags { font: 500 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.wx__go {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .6s var(--ease-out);
}
.wx__go svg { width: 18px; height: 18px; }

/* estado activo (lo maneja work.js; sin JS no hay atenuado) */
.wx.is-live .wx__row { opacity: .36; }
.wx.is-live .wx__item.is-on .wx__row { opacity: 1; }
.wx__item.is-on .wx__n { color: var(--ember); }
.wx__item.is-on .wx__sw { width: .56em; margin-right: .26em; }
.wx__item.is-on .wx__go { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(45deg); }
.wx__row:hover .wx__go { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- escenario ---------- */
.wx__stagewrap { position: sticky; top: 96px; }
.wx__stage {
  position: relative; height: calc(100vh - 120px); height: calc(100svh - 120px); min-height: 520px; max-height: 860px;
  border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--ink); cursor: pointer;
  box-shadow: 0 40px 80px -40px rgba(21, 19, 29, .45), 0 0 0 1px rgba(21, 19, 29, .06);
}
.wx__scene {
  --sc: #15131D;
  position: absolute; inset: 0; background: var(--bg); color: var(--sc);
  visibility: hidden; z-index: 1;
}
.wx__scene--light { --sc: #fff; }
.wx__scene.is-on { visibility: visible; z-index: 3; }
.wx__scene.is-prev { visibility: visible; z-index: 2; }

/* luz de estudio: viñeta suave sobre el color plano */
.wx__scene::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 38%, rgba(255, 255, 255, .16), transparent 60%),
              linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .14));
}
.wx__scene--dark::before { background: radial-gradient(120% 80% at 50% 38%, rgba(255, 255, 255, .34), transparent 62%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .07)); }

.wx__ghost {
  position: absolute; left: -.05em; bottom: -.17em; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--f); font-variation-settings: "wdth" 125; font-weight: 800; letter-spacing: -.05em;
  font-size: clamp(140px, 15vw, 250px); line-height: 1; color: var(--sc); opacity: .07;
}

.wx__brand { position: absolute; top: clamp(24px, 2.4vw, 34px); left: clamp(24px, 2.4vw, 34px); z-index: 4; max-width: 46%; }
.wx__logo { display: block; height: auto; width: auto; max-height: 58px; max-width: 100%; }
.wx__scene[data-slug="arepi"] .wx__logo, .wx__scene[data-slug="manaku"] .wx__logo { max-height: 70px; }
.wx__wordmark { font: 760 26px/1 var(--f); letter-spacing: -.03em; }

.wx__props { position: absolute; inset: 15% 7% 26%; z-index: 2; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.wx__hero {
  position: relative; z-index: 2; width: auto; height: auto;
  max-width: min(80%, var(--mw)); max-height: min(100%, var(--mh));
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .28)) drop-shadow(0 8px 10px rgba(0, 0, 0, .16));
  will-change: transform;
}
.wx__floor {
  position: absolute; left: 22%; right: 22%; bottom: -4%; height: 12%; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .3), transparent); filter: blur(6px);
}
.wx__acc {
  position: absolute; z-index: 3; width: min(23%, var(--mw)); height: auto;
  filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .28)); will-change: transform;
  animation: wx-float 7s ease-in-out infinite;
}
.wx__acc--1 { left: -2%; bottom: -6%; }
.wx__acc--2 { right: -1%; top: -4%; animation-delay: -3.5s; animation-duration: 8s; }
@keyframes wx-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -10px; rotate: 2deg; } }

/* ajustes por marca */
.wx__scene[data-slug="la-marina"] .wx__hero { max-width: min(92%, var(--mw)); }
.wx__scene[data-slug="la-marina"] .wx__acc--1 { width: min(17%, var(--mw)); left: 2%; bottom: -10%; }
.wx__scene[data-slug="la-marina"] .wx__acc--2 { width: min(19%, var(--mw)); right: 0; top: -14%; }
.wx__scene[data-slug="dahab"] .wx__hero, .wx__scene[data-slug="villa-emma"] .wx__hero { max-width: min(88%, var(--mw)); }
.wx__scene[data-slug="villa-emma"] .wx__acc--1 { width: min(16%, var(--mw)); left: 0; bottom: 4%; }
.wx__scene[data-slug="villa-emma"] .wx__acc--2 { width: min(20%, var(--mw)); right: 0; top: -12%; }
.wx__scene[data-slug="dahab"] .wx__acc--1 { width: min(22%, var(--mw)); right: 2%; left: auto; bottom: -10%; }
.wx__scene[data-slug="elemynt"] .wx__acc--1 { width: min(34%, var(--mw)); left: auto; right: 2%; bottom: auto; top: -6%; z-index: 1; }
.wx__scene[data-slug="manaku"] .wx__hero { max-width: min(70%, var(--mw)); }
.wx__scene[data-slug="manaku"] .wx__acc--1 { width: min(17%, var(--mw)); left: 6%; bottom: -4%; }
.wx__scene[data-slug="il-pomodoro"] .wx__acc--1 { width: min(17%, var(--mw)); left: 0; bottom: -2%; }
.wx__scene[data-slug="il-pomodoro"] .wx__acc--2 { width: min(20%, var(--mw)); right: -2%; top: -8%; }
.wx__scene[data-slug="bialetti"] .wx__acc--1 { width: min(25%, var(--mw)); left: 0; bottom: -4%; }
.wx__scene[data-slug="bialetti"] .wx__acc--2 { width: min(20%, var(--mw)); right: 2%; top: -6%; }
.wx__scene[data-slug="puerto-color"] .wx__acc--1 { width: min(19%, var(--mw)); }
.wx__scene[data-slug="arepi"] .wx__acc--1 { width: min(27%, var(--mw)); left: auto; right: -2%; bottom: -8%; }
.wx__scene[data-slug="arepi"] .wx__acc--2 { width: min(13%, var(--mw)); right: auto; left: 2%; top: 4%; }

.wx__cap {
  position: absolute; left: clamp(24px, 2.4vw, 34px); right: 190px; bottom: clamp(24px, 2.4vw, 32px); z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
}
.wx__ix { font: 500 11px/1 var(--mono); letter-spacing: .16em; opacity: .7; }
.wx__teaser { margin: 0; font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.32; font-weight: 600; letter-spacing: -.01em; max-width: 34ch; text-wrap: pretty; }
.wx__svc { margin: 0; font: 500 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .66; }

.wx__cta { position: absolute; right: clamp(22px, 2.2vw, 30px); bottom: clamp(24px, 2.4vw, 32px); z-index: 6; }

/* marcas de registro (look de visor) */
.wx__tick { position: absolute; z-index: 5; width: 14px; height: 14px; pointer-events: none; mix-blend-mode: difference; }
.wx__tick::before, .wx__tick::after { content: ""; position: absolute; background: rgba(255, 255, 255, .6); }
.wx__tick::before { width: 14px; height: 1px; top: 0; }
.wx__tick::after { width: 1px; height: 14px; left: 0; }
.wx__tick--tl { top: 12px; left: 12px; }
.wx__tick--tr { top: 12px; right: 12px; transform: scaleX(-1); }
.wx__tick--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.wx__tick--br { bottom: 12px; right: 12px; transform: scale(-1, -1); }

/* ---------- pantallas medianas ---------- */
@media (max-width: 1180px) and (min-width: 900px) {
  .wx__row { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .wx__cap { right: 26px; bottom: 86px; }
}

/* ---------- móvil: lista compacta con mosaico de color ---------- */
@media (max-width: 899px) {
  .wx__bar { padding: 14px 0; }
  .wx__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; width: calc(100% + var(--gutter) * 2); }
  .wx__chips::-webkit-scrollbar { display: none; }
  .wx__chips .chip { flex: none; }
  .wx__grid { display: block; }
  .wx__stagewrap { display: none; }
  .wx__list { padding-bottom: 0; }
  .wx__row { grid-template-columns: 84px minmax(0, 1fr) 34px; gap: 16px; padding: 14px 0; }
  .wx__n { display: none; }
  .wx__tags { display: none; }
  .wx__tile {
    display: grid; place-items: center; width: 84px; height: 84px; border-radius: 18px; background: var(--bg); overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(21, 19, 29, .06);
  }
  .wx__tile { position: relative; }
  .wx__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
  .wx__main { gap: 6px; }
  .wx__name { font-size: clamp(22px, 6.2vw, 30px); }
  .wx__nt { white-space: normal; }
  .wx__meta { font-size: 13px; }
  .wx__go { width: 34px; height: 34px; }
  .wx.is-live .wx__row { opacity: 1; }
  .wx__item.is-on .wx__go { transform: none; background: transparent; color: var(--ink); border-color: var(--line); }
  .wx__item.is-on .wx__sw { width: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wx__acc { animation: none; }
  .wx__row, .wx__nt, .wx__sw, .wx__go { transition: none; }
}

/* ---------- móvil con JS: la fila activa se tiñe con el color de su marca ---------- */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .wx.is-m .wx__row { isolation: isolate; }
  .wx.is-m .wx__row::before {
    content: ""; position: absolute; z-index: -1; inset: 5px calc(var(--gutter) * -.5); border-radius: 22px;
    background: var(--bg); opacity: .16; transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .7s var(--ease-out);
  }
  .wx.is-m .wx__item.is-on .wx__row::before { transform: scaleX(1); }
  .wx.is-m .wx__tile { box-shadow: inset 0 0 0 1px rgba(21, 19, 29, .06), 0 0 0 rgba(21, 19, 29, 0); transition: box-shadow .6s var(--ease-out); }
  .wx.is-m .wx__item.is-on .wx__tile { box-shadow: inset 0 0 0 1px rgba(21, 19, 29, .06), 0 14px 24px -12px rgba(21, 19, 29, .45); }
  .wx.is-m .wx__nt { transition: transform .7s var(--ease-out); }
  .wx.is-m .wx__item.is-on .wx__nt { transform: translateX(4px); }
  .wx.is-m .wx__item.is-on .wx__go { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(45deg); }
  .wx.is-m .wx__tile img { will-change: transform; }
}