/* ── TV+ landing — Montsec night theme ──────────────────────────────────────
   The dark-sky reserve over Àger earns the dark ground; green does the
   structural work; Adamo pink appears ONLY on the TV+ badge (the footer
   crossover band already carries it via pilot-footer). */

.tv-page {
  --night:    #0B1220;
  --night-2:  #131C2E;
  --night-3:  #1B2740;
  --green:    #006400;
  --green-lit:#a4cf05;
  --adamo:    #F02455;
  --bone:     #F2EFE6;
  --mute:     #8A93A6;
  --line:     rgba(242, 239, 230, .08);

  background: var(--night);
  color: var(--bone);
  font-family: 'Roboto', sans-serif;
}

.tv-page h1, .tv-page h2, .tv-page h3,
.tv-page .big-num, .tv-page .builder-price strong {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: .5px;
}

.tv-section { padding: 4.5rem 1.25rem; }
.tv-inner   { max-width: 880px; margin: 0 auto; }
.tv-inner.wide { max-width: 1180px; }

.tv-section h2 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin: 0 0 .75rem; text-transform: uppercase; }
.tv-lead { color: var(--mute); font-size: 1.08rem; max-width: 60ch; margin: 0 0 2rem; }

/* display rules on .ch-tile etc. would otherwise beat the UA's [hidden] style */
.tv-page [hidden] { display: none !important; }

/* ── Scroll reveal (same mechanic as index.php) ────────────────────────── */
.tv-page [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.tv-page [data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tv-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.tv-page :focus-visible {
  outline: 3px solid var(--green-lit);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Badge — one of exactly two Adamo-pink moments on the page ─────────── */
.tvplus-badge {
  display: inline-block;
  background: var(--adamo);
  color: #fff;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  padding: .3rem .8rem;
  border-radius: .45rem;
  margin-bottom: 1rem;
}
.tvplus-badge.inline { font-size: .8em; padding: .05em .35em; margin: 0 0 0 .1em; vertical-align: .15em; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.tv-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }

.tv-hero-panes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.tv-pane { overflow: hidden; opacity: 0; transform: scale(1.04); animation: paneIn .9s ease forwards; }
.tv-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-pane.p1 { animation-delay: .1s; }
.tv-pane.p2 { animation-delay: .35s; }
.tv-pane.p3 { animation-delay: .6s; }
.tv-pane.p4 { animation-delay: .85s; }
@keyframes paneIn { to { opacity: 1; transform: none; } }

.tv-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--night) 4%, rgba(11,18,32,.86) 30%, rgba(11,18,32,.25) 65%, rgba(11,18,32,.45) 100%);
}

.tv-hero-overlay { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; }
.tv-hero-overlay h1 { font-size: clamp(2.1rem, 6vw, 4rem); margin: 0 0 1rem; text-transform: uppercase; line-height: 1.05; }

.tv-hero-price { font-size: clamp(1.15rem, 3vw, 1.6rem); font-weight: 700; margin: 0 0 .6rem; }
.tv-hero-price .fact { white-space: nowrap; }
.tv-hero-price .big-num { font-size: 1.9em; color: var(--green-lit); vertical-align: -.08em; }
.tv-hero-price .price-unit { font-size: .8em; margin-left: .1em; }
.tv-hero-price .dot { color: var(--mute); margin: 0 .35rem; }
.tv-hero-sub { color: var(--bone); opacity: .85; max-width: 52ch; margin: 0 0 1.5rem; }

.tv-hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.tv-cta {
  display: inline-block;
  background: var(--green-lit);
  color: #10240a;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .85rem 1.7rem;
  border: 0;
  border-radius: .6rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tv-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(164,207,5,.25); }
.tv-cta.ghost { background: transparent; color: var(--bone); border: 2px solid var(--line); }
.tv-cta.ghost:hover { border-color: var(--green-lit); box-shadow: none; }
.tv-cta.small { padding: .5rem 1.1rem; font-size: .95rem; }
.tv-cta.full { width: 100%; text-align: center; margin-top: 1.2rem; }

/* ── Sticky bar ────────────────────────────────────────────────────────── */
.tv-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: rgba(19,28,46,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: .6rem 1rem;
  font-size: .95rem;
  transform: translateY(110%);
  transition: transform .3s ease;
}
.tv-sticky.show { transform: none; }

/* ── Devices + checker ─────────────────────────────────────────────────── */
.device-hero {
  display: block;
  max-width: 620px;
  width: 100%;
  margin: 0 auto 2.2rem;
}
.checker-title { font-size: 1.15rem; margin: 0 0 .8rem; }
.checker { background: var(--night-2); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; }
.checker-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.checker-btn {
  background: var(--night-3);
  color: var(--bone);
  border: 2px solid transparent;
  border-radius: .7rem;
  padding: 1rem .8rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  transition: border-color .15s ease, background .15s ease;
}
.checker-btn i { font-size: 1.6rem; color: var(--green-lit); }
.checker-btn:hover { border-color: var(--green-lit); }
.checker-btn[aria-pressed="true"] { border-color: var(--green-lit); background: #22320f; }
.checker-answer { margin-top: 1.2rem; min-height: 3.5rem; font-size: 1.08rem; line-height: 1.55; }
.checker-answer .ok { color: var(--green-lit); }
.checker-answer p { margin: 0; }
.checker-hint { color: var(--mute); }

.device-strip {
  list-style: none; padding: 0; margin: 1.8rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
}
.device-strip li {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 2rem;
  padding: .4rem .9rem;
  font-size: .88rem;
  color: var(--mute);
  display: flex; align-items: center; gap: .45rem;
}
.device-strip i { color: var(--green-lit); }
.device-note { color: var(--mute); font-size: .82rem; margin: .8rem 0 0; }

/* ── Et lliga? No. ─────────────────────────────────────────────────────── */
.lliga { background: var(--night-2); }
.lliga h2 .no { color: var(--green-lit); font-size: 1.4em; }
.lliga-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
.lliga-item {
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: 1.3rem 1.1rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.lliga-item i { font-size: 1.5rem; color: var(--green-lit); }
.lliga-item strong { font-size: 1.02rem; }
.lliga-item span { color: var(--mute); font-size: .9rem; line-height: 1.4; }

/* ── Channel wall ──────────────────────────────────────────────────────── */
.wall-section h2 { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.wall-count { font-size: .55em; color: var(--mute); text-transform: none; letter-spacing: 0; }
.wall-count strong { color: var(--green-lit); font-size: 1.5em; }

.wall-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.wall-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  background: var(--night-2);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: 2rem;
  padding: .42rem 1rem;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--green-lit); }
.chip.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }

.wall-search { position: relative; }
.wall-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--mute); }
.wall-search input {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 2rem;
  color: var(--bone);
  padding: .55rem 1rem .55rem 2.3rem;
  font-size: .95rem;
  font-family: inherit;
  min-width: 220px;
}
.wall-search input::placeholder { color: var(--mute); }

.wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .6rem;
}
.ch-tile {
  position: relative;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: .55rem;
  color: var(--bone);
  font-family: inherit;
  padding: .85rem .8rem .85rem .95rem;
  min-height: 74px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem;
  overflow: hidden;
  transition: background .15s ease, border-color .15s ease;
}
.ch-tile:hover { background: var(--night-3); border-color: var(--green-lit); }
.ch-tile .ch-icon { position: absolute; top: .5rem; right: .6rem; font-size: 1.5rem; opacity: .16; }
/* logos sit on a light chip so dark-ink marks stay visible on the night ground */
.ch-logo-wrap {
  align-self: flex-start;
  background: #f5f4f0;
  border-radius: .4rem;
  padding: .22rem .5rem;
  display: flex; align-items: center; justify-content: center;
  height: 40px; min-width: 56px; max-width: 100%;
}
.ch-logo-wrap.dark { background: var(--night-3); }
.ch-tile .ch-logo { max-height: 30px; max-width: 96px; object-fit: contain; display: block; }
.ch-name { font-weight: 500; font-size: .92rem; line-height: 1.25; }
.ch-hd {
  position: absolute; top: .55rem; left: .95rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .5px;
  color: var(--green-lit); border: 1px solid var(--green-lit);
  border-radius: .25rem; padding: 0 .28rem;
}
.ch-tile.expanded { border-color: var(--green-lit); background: var(--night-3); }

.wall-more {
  display: none;
  width: 100%;
  margin-top: .9rem;
  background: var(--night-2);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: .7rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: .9rem 1.2rem;
  cursor: pointer;
  align-items: center; justify-content: center; gap: .5rem;
}
.wall-more:hover { border-color: var(--green-lit); }
.wall-more:not([hidden]) { display: flex; }

/* folded wall: a taste of the density, then the button */
.wall-grid.limited { max-height: 620px; overflow: hidden; position: relative; }
.wall-grid.limited::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(to bottom, transparent, var(--night));
  pointer-events: none;
}

/* wall assembles once on scroll */
.wall-animate .ch-tile { opacity: 0; transform: translateY(10px); }
.wall-animate .ch-tile.in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }

.ch-detail {
  grid-column: 1 / -1;
  background: var(--night-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-lit);
  border-radius: .55rem;
  padding: 1rem 1.2rem;
  font-size: .98rem;
  line-height: 1.5;
}
.ch-detail .d-genre { color: var(--mute); font-size: .85rem; display: block; margin-top: .25rem; }
.wall-empty { grid-column: 1 / -1; color: var(--mute); padding: 1.5rem 0; }

/* ── Genre tiles ───────────────────────────────────────────────────────── */
.genre-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.genre-tile {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: 1.5rem 1.3rem;
}
.genre-tile i { font-size: 1.8rem; color: var(--green-lit); }
.genre-tile h3 { font-size: 1.25rem; margin: .7rem 0 .5rem; text-transform: uppercase; }
.genre-tile p { color: var(--mute); font-size: .92rem; line-height: 1.5; margin: 0; }
.genre-tile.camp { background: linear-gradient(145deg, #14290f, var(--night-2) 70%); border-color: var(--green); }
.genre-tile.camp i { font-size: 2.2rem; }

/* ── Highlight rail ────────────────────────────────────────────────────── */
.rail { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .8rem; scroll-snap-type: x mandatory; }

/* in-keeping scrollbar + grab-to-drag on pointer devices */
.rail { scrollbar-width: thin; scrollbar-color: var(--green) var(--night-2); }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: var(--night-2); border-radius: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; }
.rail::-webkit-scrollbar-thumb:hover { background: var(--green-lit); }
@media (hover: hover) and (pointer: fine) {
  .rail { cursor: grab; }
  .rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}
.rail-card {
  flex: 0 0 200px;
  aspect-ratio: 2 / 3;
  scroll-snap-align: start;
  background: linear-gradient(to top, var(--night-3), var(--night-2));
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: 1.1rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem;
}
.rail-card .rail-logo {
  position: absolute;
  top: .9rem; left: .9rem; right: .9rem;
  display: flex; align-items: center; justify-content: center;
  background: #f5f4f0;
  border-radius: .5rem;
  padding: .5rem;
  height: 64px;
}
.rail-card .rail-logo img { max-height: 46px; max-width: 100%; object-fit: contain; }
.rail-card { position: relative; }
.rail-card .rail-kicker { color: var(--green-lit); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.rail-card h3 { font-size: 1.35rem; margin: 0; text-transform: uppercase; line-height: 1.1; }
.rail-card p { color: var(--mute); font-size: .85rem; margin: 0; }
.rail-card.accent-camp    { border-top: 4px solid var(--green-lit); }
.rail-card.accent-esports { border-top: 4px solid #3d7dd6; }
.rail-card.accent-cinema  { border-top: 4px solid #d6a23d; }

/* feature cards: TV+ capabilities sitting between the channel cards */
.rail-card.feature { border-top: 4px solid var(--green-lit); background: linear-gradient(to top, #16240f, var(--night-2) 70%); }
.rail-card.feature .rail-ico { position: absolute; top: 1.4rem; left: 1.1rem; font-size: 2.6rem; color: var(--green-lit); }
.rail-card.more { text-decoration: none; color: inherit; }
.rail-card.more:hover { border-color: var(--green-lit); }

/* ── Full list ─────────────────────────────────────────────────────────── */
.list-toggle {
  background: var(--night-2);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: .7rem;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  padding: .95rem 1.4rem;
  cursor: pointer;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.list-toggle:hover { border-color: var(--green-lit); }
.list-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.full-list { margin-top: 1.4rem; }
.list-search { margin-bottom: 1.2rem; }
.list-search input { width: 100%; border-radius: .6rem; }
.list-group { margin-bottom: 1.4rem; }
.list-group h3 { font-size: 1.05rem; text-transform: uppercase; color: var(--green-lit); margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.list-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.list-group li {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: .4rem;
  padding: .3rem .65rem;
  font-size: .88rem;
}
.list-group li small { color: var(--green-lit); font-size: .72em; margin-left: .3em; }
.list-legal { color: var(--mute); font-size: .8rem; margin-top: 1rem; }

/* ── Four screens ──────────────────────────────────────────────────────── */
.screens { background: var(--night-2); text-align: center; }
.screens .tv-lead { margin-left: auto; margin-right: auto; }
.big-num.huge { font-size: clamp(4rem, 12vw, 7rem); color: var(--green-lit); line-height: 1; display: inline-block; vertical-align: -.12em; margin-right: .1em; }
.screens-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 720px; margin: 2rem auto 0; }
.screen-demo {
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: 1.3rem .8rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--mute); font-size: .85rem;
}
.screen-demo i { font-size: 2rem; color: var(--green-lit); }

/* ── How it works ──────────────────────────────────────────────────────── */
.how-steps { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; counter-reset: none; }
.how-steps li { display: flex; gap: 1rem; align-items: flex-start; background: var(--night-2); border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem 1.2rem; }
.step-n {
  flex: 0 0 auto;
  width: 2.2rem; height: 2.2rem;
  background: var(--green);
  color: #fff;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.how-steps strong { display: block; font-size: 1.05rem; }
.how-steps li span:not(.step-n), .how-steps div span { color: var(--mute); font-size: .92rem; line-height: 1.45; }
.how-extras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.how-extra { background: var(--night-2); border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.how-extra i { font-size: 1.4rem; color: var(--green-lit); }
.how-extra span { color: var(--mute); font-size: .9rem; line-height: 1.45; }

/* ── Builder / contractar ──────────────────────────────────────────────── */
.contractar { background: var(--night-2); }
.tv-builder { max-width: 640px; margin: 0 auto; }
.builder-toggle { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.2rem; }
.btoggle {
  background: var(--night);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: 2rem;
  font-family: inherit;
  font-size: .95rem;
  padding: .55rem 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; gap: .45rem;
}
.btoggle .pill { background: var(--green-lit); color: #10240a; font-size: .62rem; font-weight: 700; border-radius: 1rem; padding: .1rem .45rem; }
.btoggle.active { background: var(--green); border-color: var(--green); font-weight: 700; }

.builder-card { background: var(--night); border: 1px solid var(--line); border-radius: 1rem; padding: 1.6rem; }
.builder-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.builder-name { font-family: 'Anton', sans-serif; font-size: 1.5rem; text-transform: uppercase; }
.builder-tag { color: var(--mute); font-size: .88rem; margin-top: .25rem; }
.builder-price { white-space: nowrap; }
.builder-price span { font-size: 1.1rem; vertical-align: .9em; }
.builder-price strong { font-size: 3rem; color: var(--green-lit); }
.builder-price small { color: var(--mute); }

.builder-feats { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .95rem; }
.builder-feats i { color: var(--green-lit); margin-right: .5rem; }
.builder-feats .hl { font-weight: 700; }

.builder-addons { display: flex; flex-direction: column; gap: .6rem; }
.b-addon {
  display: flex; align-items: center; gap: .9rem;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .7rem .9rem;
  font-size: .92rem;
  color: var(--bone);
  font-family: inherit;
  text-align: left;
}
.b-addon small { display: block; color: var(--mute); font-size: .8rem; }
.b-addon.clickable { cursor: pointer; }
.b-addon.clickable:hover { border-color: var(--green-lit); }
.b-check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border: 2px solid var(--mute); border-radius: .3rem; position: relative; }
.b-addon[aria-pressed="true"] { border-color: var(--green-lit); }
.b-addon[aria-pressed="true"] .b-check { background: var(--green-lit); border-color: var(--green-lit); }
.b-addon[aria-pressed="true"] .b-check::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #10240a; font-weight: 700; font-size: .85rem; }
.b-price-tag { margin-left: auto; font-weight: 700; color: var(--green-lit); }

.lines-stepper { display: flex; align-items: center; gap: .1rem; }
.lines-stepper button {
  width: 1.9rem; height: 1.9rem;
  background: var(--night-3);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: .4rem;
  font-size: 1.1rem;
  cursor: pointer;
}
.lines-stepper button:hover { border-color: var(--green-lit); }
.lines-stepper span { min-width: 1.8rem; text-align: center; font-weight: 700; }

.builder-note { color: var(--mute); font-size: .82rem; text-align: center; margin: .8rem 0 0; }
.builder-aside { margin-top: 1.4rem; text-align: center; font-size: .95rem; color: var(--mute); }
.builder-aside a { color: var(--green-lit); }
.builder-phone { margin-top: .5rem; }
.builder-phone a { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.builder-phone span { display: block; font-size: .82rem; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .6rem; }
.faq-list details { background: var(--night-2); border: 1px solid var(--line); border-radius: .7rem; padding: 0 1.2rem; }
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 1rem 0;
  list-style: none;
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 0; color: var(--green-lit); font-size: 1.3rem; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { color: var(--mute); line-height: 1.55; margin: 0 0 1.1rem; }

/* ── CTA band (variant B): catch the desire the wall just built ────────── */
.cta-band {
  background:
    linear-gradient(rgba(11, 18, 32, .78), rgba(11, 18, 32, .86)),
    url('../assets/img/gente/IMG_2202w.jpg') center 30% / cover no-repeat;
  text-align: center;
}
.cta-band .band-kicker, .cta-band .band-line { text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.cta-band .band-kicker { color: var(--mute); font-size: 1.05rem; margin: 0 0 .4rem; }
.cta-band .band-line { font-size: clamp(1.15rem, 3vw, 1.6rem); font-weight: 700; margin: 0 0 1.4rem; }
.cta-band .band-line .big-num { font-size: 1.9em; color: var(--green-lit); vertical-align: -.08em; }
.cta-band .band-line .price-unit { font-size: .8em; margin-left: .1em; }

/* ── Legal ─────────────────────────────────────────────────────────────── */
.tv-legal {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  color: var(--mute);
  font-size: .8rem;
  text-align: center;
}

/* trust strip from pilot-footer sits on light ground — keep it readable */
.tv-page .trust-strip { background: var(--night-2); border-top: 1px solid var(--line); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tv-hero-panes { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .lliga-grid, .how-extras { grid-template-columns: 1fr 1fr; }
  .genre-tiles { grid-template-columns: 1fr 1fr; }
  .screens-row { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile hero: panes 2×2 behind the overlay, same treatment as desktop.
   (The stacked text-below variant lived here until 2026-07-26 — restore from
   git/backup if the overlay reads badly on small screens.) */
@media (max-width: 700px) {
  .tv-hero { min-height: 96svh; }
  /* scrim balance: headline legible over the top panes, but the bottom row
     stays visible — the four-people-four-screens image IS the message */
  .tv-hero::after {
    /* fully opaque at the very base so the hero bleeds into the next section */
    background: linear-gradient(to top, var(--night) 0%, rgba(11,18,32,.86) 12%, rgba(11,18,32,.68) 32%, rgba(11,18,32,.52) 62%, rgba(11,18,32,.58) 100%);
  }
  /* on touch there's no hover state — ghost buttons wear it by default */
  .tv-cta.ghost { border-color: var(--green-lit); }
  .tv-hero-overlay { padding-bottom: 2.2rem; }
  .tv-hero-overlay h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .tv-hero-overlay h1,
  .tv-hero-price,
  .tv-hero-sub { text-shadow: 0 2px 12px rgba(0,0,0,.65), 0 0 30px rgba(0,0,0,.4); }
}

@media (max-width: 560px) {
  .tv-section { padding: 3rem 1rem; }
  .checker-options { grid-template-columns: 1fr; }
  .lliga-grid, .how-extras, .genre-tiles { grid-template-columns: 1fr; }
  .wall-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .wall-grid.limited { max-height: 500px; }
  .wall-controls { flex-direction: column; align-items: stretch; }
  .wall-search input { width: 100%; }
  .builder-head { flex-direction: column; }
  /* size cards so the next one always peeks — the cue that the rail scrolls */
  .rail-card { flex-basis: clamp(150px, 40vw, 172px); }
  .rail-card.feature .rail-ico { font-size: 1.9rem; top: 1rem; left: .9rem; }
  .tv-sticky { font-size: .85rem; gap: .45rem; padding: .5rem .5rem; white-space: nowrap; }
  .tv-sticky .tv-cta.small { padding: .45rem .7rem; font-size: .82rem; }
  .sticky-extra { display: none; }
}

/* ── Reduced motion: everything renders instantly and complete ─────────── */
@media (prefers-reduced-motion: reduce) {
  .tv-pane { animation: none; opacity: 1; transform: none; }
  .wall-animate .ch-tile { opacity: 1; transform: none; transition: none; }
  .tv-cta, .tv-sticky { transition: none; }
}