/* =========================================================
   itsjcx.com · secciones de la home
   ========================================================= */

/* ---------- HERO (slideshow a pantalla completa) ---------- */
.hero {
  position: relative; height: 100svh; min-height: 620px;
  color: #f2efe8; overflow: hidden; background: #070707;
}
.hero .slides, .hero .slide { position: absolute; inset: 0; }
.hero .slide { opacity: 0; visibility: hidden; }
.hero .slide.is-on { opacity: 1; visibility: visible; }
.hero .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.hero .slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.08) 72%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%);
}
.hero .copy {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(110px, 16vh, 170px);
  z-index: 2;
}
.hero .copy .label { color: rgba(242, 239, 232, .72); display: block; margin-bottom: 22px; }
.hero .titles { position: relative; max-width: calc(100% - 340px); }
.hero .t-mega { font-size: clamp(58px, 9vw, 150px); }
@media (max-width: 980px) { .hero .titles { max-width: none; } }
.hero .title { position: absolute; left: 0; bottom: 0; }
.hero .title.is-on { position: relative; }
.hero .title:not(.is-on):not(.is-leaving) { visibility: hidden; }
.hero .title .light { color: rgba(242, 239, 232, .9); }
.hero .cta { margin-top: 38px; display: flex; align-items: center; gap: 26px; }
.hero .cta .note { font-family: var(--f-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,239,232,.6); }
.hero .count {
  position: absolute; left: var(--pad); bottom: 36px; z-index: 2;
  font-family: var(--f-display); font-size: 12px; letter-spacing: .2em; color: rgba(242,239,232,.55);
  display: flex; align-items: center; gap: 12px;
}
.hero .count b { color: #f2efe8; font-weight: 500; }
.hero .count .bar { width: 64px; height: 1px; background: rgba(242,239,232,.25); position: relative; overflow: hidden; }
.hero .count .bar i { position: absolute; inset: 0; background: #f2efe8; transform-origin: left; transform: scaleX(0); }
.hero .scroll {
  position: absolute; right: calc(var(--pad) - 10px); bottom: 36px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--f-display); font-size: 10px; letter-spacing: .3em; color: rgba(242,239,232,.6);
}
.hero .scroll i { width: 1px; height: 54px; background: rgba(242,239,232,.25); position: relative; overflow: hidden; }
.hero .scroll i::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #f2efe8; animation: drip 2.2s var(--ease-in-out) infinite; }
@keyframes drip { 60%, 100% { top: 100%; } }

/* Widget (lanzamiento / directo) */
.widget {
  position: absolute; right: var(--pad); bottom: clamp(110px, 16vh, 170px); z-index: 2;
  width: 300px; padding: 18px 20px;
  border: 1px solid rgba(242,239,232,.28);
  background: rgba(10,10,10,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.widget:hover { border-color: rgba(242,239,232,.7); background: rgba(10,10,10,.55); }
.widget .cover { width: 64px; height: 64px; }
.widget .w-top { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(242,239,232,.6); }
.widget .w-top .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.widget.is-live .w-top .dot { background: var(--live); animation: livePulse 1.6s infinite; }
.widget .w-name { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1; margin-top: 4px; }
.widget .w-go { font-family: var(--f-display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(242,239,232,.75); margin-top: 6px; display: block; }
@media (max-width: 980px) { .widget { display: none; } }

/* ---------- INTRO ---------- */
.intro { padding-top: clamp(110px, 16vh, 180px); padding-bottom: clamp(90px, 12vh, 140px); }
.intro .t-display .light { color: var(--ink-3); }
.intro .cols { margin-top: clamp(56px, 8vh, 90px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 120px); }
.intro .cols .label { display: block; margin-bottom: 16px; }
@media (max-width: 760px) { .intro .cols { grid-template-columns: 1fr; } }

/* ---------- MUNDOS (rejilla tipo roster) ---------- */
.worlds { padding-bottom: clamp(110px, 15vh, 170px); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 34px; }
.worlds .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px); }
.card { display: block; }
.card .media { aspect-ratio: 1 / 1; }
.card .badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--f-display); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #f2efe8; background: rgba(10,10,10,.55); padding: 7px 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.card:hover .badge { opacity: 1; transform: none; }
.card .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.card .num { font-family: var(--f-display); font-weight: 300; font-size: 15px; color: var(--ink-3); }
.card .tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.card .tags span { font-family: var(--f-body); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.card .soon { font-family: var(--f-display); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-left: 10px; }
@media (max-width: 900px) { .worlds .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .worlds .grid { grid-template-columns: 1fr; } }

/* ---------- MÚSICA (banda oscura, lista numerada) ---------- */
.band { background: var(--band); color: var(--band-ink); }
.band .label { color: var(--band-ink-2); }
.music { padding-top: clamp(100px, 14vh, 160px); padding-bottom: clamp(100px, 14vh, 160px); }
.music .layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: start; margin-top: 30px; }
.release {
  display: grid; grid-template-columns: clamp(64px, 7vw, 110px) 1fr; gap: 24px;
  padding: 34px 0; border-bottom: 1px solid var(--band-line);
}
.release:first-child { padding-top: 10px; }
.release .n { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 5vw, 72px); line-height: .9; color: var(--band-ink-2); }
.release h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; margin: 6px 0 10px; letter-spacing: -.005em; }
.release p { margin: 0; color: var(--band-ink-2); font-size: 14px; max-width: 52ch; }
.release .info { font-family: var(--f-display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.release a.go { display: inline-block; margin-top: 14px; }
.music .player { position: sticky; top: 110px; }
.music .player iframe { width: 100%; height: 452px; border: 0; border-radius: 12px; background: #000; }
.music .player .label { display: block; margin-bottom: 14px; }
@media (max-width: 900px) { .music .layout { grid-template-columns: 1fr; } .music .player { position: static; } }

/* ---------- DIARIO (nombre en marquesina + fotos dispersas) ---------- */
.diary { position: relative; height: clamp(1100px, 170vh, 1700px); overflow: hidden; }
.diary .head { position: absolute; top: 90px; left: var(--pad); right: var(--pad); z-index: 5; display: flex; justify-content: space-between; align-items: baseline; }
.diary .marquee {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  z-index: 2; white-space: nowrap; pointer-events: none;
}
.diary .marquee .track { display: inline-flex; will-change: transform; }
.diary .marquee span {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(150px, 23vw, 380px); line-height: .9; letter-spacing: -.02em;
  padding-right: .18em; color: var(--ink);
}
.diary .ph { position: absolute; will-change: transform; }
.diary .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.diary .ph.front { z-index: 3; }
.diary .ph.back { z-index: 1; }
.diary .ph figcaption {
  position: absolute; left: 0; top: calc(100% + 8px);
  font-family: var(--f-body); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.diary .foot { position: absolute; bottom: 70px; left: var(--pad); right: var(--pad); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
@media (max-width: 760px) {
  .diary { height: auto; padding: 110px 0 90px; }
  .diary .head, .diary .foot { position: static; padding: 0 var(--pad); }
  .diary .marquee { position: relative; top: auto; transform: none; margin: 40px 0; }
  .diary .ph { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin: 0 var(--pad) 44px; aspect-ratio: 4/5; }
  .diary .ph:nth-of-type(even) { margin-left: 30%; aspect-ratio: 1/1; }
  .diary .ph.small { display: none; }
}

/* ---------- LO ÚLTIMO (galería horizontal anclada) ---------- */
.latest { padding-top: clamp(100px, 14vh, 150px); padding-bottom: clamp(60px, 8vh, 90px); overflow: hidden; }
.latest .t-h2 .light { color: var(--ink-3); }
.latest .rail-x { margin-top: 44px; display: flex; gap: clamp(16px, 1.8vw, 26px); padding-left: var(--pad); width: max-content; will-change: transform; }
.vcard { width: clamp(260px, 23vw, 350px); flex: none; display: block; }
.vcard .media { aspect-ratio: 4 / 5.1; }
.vcard .idx {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--f-display); font-size: 11px; letter-spacing: .2em; color: #f2efe8;
}
.vcard .plat {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--f-display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: #f2efe8; border: 1px solid rgba(242,239,232,.5); padding: 4px 8px;
}
.vcard h3 { font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.2; text-transform: uppercase; margin: 16px 0 4px; letter-spacing: .005em; }
.vcard .when { font-size: 12px; color: var(--ink-3); }
.latest .ctrl { margin-top: 44px; display: flex; align-items: center; gap: 30px; }
.latest .progress { flex: 1; height: 1px; background: var(--line); position: relative; }
.latest .progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.08); }
.latest .arrows { display: flex; gap: 8px; }
.latest .arrows button {
  width: 46px; height: 46px; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 16px;
  transition: border-color .3s, background-color .3s, color .3s;
}
.latest .arrows button:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
html.no-pin .latest .viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
html.no-pin .latest .viewport::-webkit-scrollbar { display: none; }
html.no-pin .latest .vcard { scroll-snap-align: start; }
html.no-pin .latest .rail-x { padding-right: var(--pad); }

/* ---------- DIRECTO (bloque a sangre + plataformas) ---------- */
.live { position: relative; color: #f2efe8; overflow: hidden; }
.live .bg { position: absolute; inset: -10% 0; }
.live .bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.55); }
.live .inner { position: relative; z-index: 2; padding-top: clamp(130px, 20vh, 220px); padding-bottom: clamp(70px, 10vh, 110px); text-align: center; }
.live .inner .label { color: rgba(242,239,232,.7); }
.live .play {
  width: 112px; height: 112px; border-radius: 50%; margin: 30px auto 34px;
  border: 1px solid rgba(242,239,232,.6); display: grid; place-items: center; position: relative;
  transition: transform .6s var(--ease), background-color .5s var(--ease);
}
.live .play::before { content: ""; border-left: 14px solid #f2efe8; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 5px; transition: border-color .4s; }
.live .play:hover { transform: scale(1.08); background: #f2efe8; }
.live .play:hover::before { border-left-color: #0b0b0b; }
.live .t-display { max-width: 14ch; margin: 0 auto; }
.live .platforms { margin-top: clamp(70px, 10vh, 110px); text-align: left; border-top: 1px solid rgba(242,239,232,.18); }
.plat-row {
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid rgba(242,239,232,.18);
  transition: padding .5s var(--ease);
}
.plat-row:hover { padding-left: 14px; padding-right: 14px; }
.plat-row .p-name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; }
.plat-row .p-what { font-size: 13px; color: rgba(242,239,232,.66); }
.plat-row .p-go { font-family: var(--f-display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.plat-row.xl .p-name { color: var(--accent); }
@media (max-width: 700px) { .plat-row { grid-template-columns: 1fr auto; } .plat-row .p-what { display: none; } }

/* ---------- ESTUDIO ---------- */
.studio { padding-top: clamp(110px, 15vh, 170px); padding-bottom: clamp(110px, 15vh, 170px); }
.studio .t-display .light { color: var(--ink-3); }
.studio .layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 120px); margin-top: 60px; align-items: start; }
.studio .svc { border-top: 1px solid var(--line); }
.studio .svc div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.studio .svc b { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: .005em; }
.studio .svc span { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.studio .side .lede { margin-bottom: 30px; }
@media (max-width: 860px) { .studio .layout { grid-template-columns: 1fr; } }

/* ---------- FOOTER ---------- */
.footer { background: #070707; color: #f2efe8; padding-top: clamp(80px, 11vh, 120px); padding-bottom: 46px; }
[data-theme="light"] .footer { background: #0b0b0b; }
.footer .top { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 44px; border-bottom: 1px solid rgba(242,239,232,.12); }
.footer .logo { color: #f2efe8; width: 96px; height: 55px; }
.footer .fnav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer .fnav a { font-family: var(--f-display); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(242,239,232,.7); transition: color .3s; }
.footer .fnav a:hover { color: #f2efe8; }
.footer .mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 46px 0; flex-wrap: wrap; }
.footer .mid .label { color: rgba(242,239,232,.5); display: block; margin-bottom: 12px; }
.footer .mail { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: clamp(24px, 3vw, 40px); letter-spacing: .01em; }
.footer .mail:hover { color: var(--accent); }
.footer .social { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer .social a { font-family: var(--f-display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(242,239,232,.6); transition: color .3s; }
.footer .social a:hover { color: #f2efe8; }
.footer .base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--f-display); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(242,239,232,.38); }
.footer .wordmark {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; line-height: .8;
  font-size: clamp(90px, 21vw, 360px); letter-spacing: -.02em; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(242,239,232,.16);
  margin: 10px 0 40px; user-select: none; transition: color .8s var(--ease), -webkit-text-stroke-color .8s;
}
.footer .wordmark:hover { color: #f2efe8; -webkit-text-stroke-color: transparent; }