/* ClipBoost Spain: local landing pages (videos-restaurantes-alicante/, videos-gimnasios-alicante/,
   videos-peluquerias-alicante/). Load it last, after site.css, calm.css, business.css and faq.css.
   Tokens and fonts come from site.css, so light and dark follow by themselves. The pages reuse the
   hero, the screening room (samples), the process track and the FAQ of the home page; this file only
   adds what they do not have: the breadcrumb, a smaller headline, the "what to film" list, the compact
   price list, the other-trades cards and the closing link. Every animation stops for people who ask
   for less motion (site.css turns them off). */

/* ---------- Breadcrumb (also drawn as BreadcrumbList in the page's JSON-LD) ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 4px;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.crumbs a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-2);
  text-underline-offset: 3px;
}
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs__sep { color: var(--ink-3); }

/* ---------- Headline: the page's own h1, smaller than the home slogan ----------
   "VÍDEOS PARA" in ink, the trade in tally red, like "TÚ GRABAS. YO EDITO." on the home page. */
.local__title {
  font-size: clamp(2.7rem, 12.6vw, 5.4rem); line-height: .87; margin: 10px 0 18px;
}
.local__title > span { display: block; color: var(--ink); }
.local__title > span::first-line { color: inherit; }
.local__title em { font-style: normal; color: var(--accent); }
.local-hero .hero__lead { max-width: 44ch; }
@media (min-width: 1000px) {
  .local__title { font-size: clamp(3.4rem, 5.5vw, 5.8rem); }
}
.local-hero .eyebrow { margin-top: 0; }

/* ---------- Section lead-ins ---------- */
#que-grabar .sec__head .sub, #precios .sec__head .sub { max-width: 54ch; }

/* ---------- What to film: seven ideas and an open slot, as clips with a running time ---------- */
.lideas {
  list-style: none; margin: 0; padding: 0; counter-reset: lidea; display: grid;
}
.lidea {
  counter-increment: lidea; position: relative; display: grid; align-content: start;
  grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 0 12px; align-items: start;
  padding: 20px 0 22px; border-top: 1px dashed var(--line-strong);
}
.lidea:first-child { border-top: 1.5px solid var(--ink); }
.lidea::before {
  content: counter(lidea, decimal-leading-zero); grid-column: 1; grid-row: 1;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: .8125rem; font-weight: 600;
  color: var(--accent-ink); font-variant-numeric: tabular-nums; padding-top: .55em;
}
.lidea__body { grid-column: 2; min-width: 0; }
.lidea > .biz__dur { grid-column: 3; grid-row: 1; margin-top: .35em; }
.lidea__t {
  margin: 0 0 10px; font-family: var(--f-display); font-stretch: 72%; font-weight: 820; text-transform: uppercase;
  font-size: clamp(1.45rem, 5.4vw, 1.9rem); line-height: 1; letter-spacing: .003em; text-wrap: balance;
}
.lidea__row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 0 10px; align-items: baseline; margin: 0 0 6px; color: var(--ink-2); font-size: .98rem; line-height: 1.45; }
.lidea__k {
  justify-self: start; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 1px;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 600; line-height: 1.45;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.lidea__row--edit .lidea__k { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lidea--open { grid-template-columns: minmax(0, 1fr); align-content: center; background: var(--paper-2); padding: 22px 20px 24px; border-top-color: transparent; }
.sec--tint .lidea--open { background: var(--paper); }
.lidea--open::before { content: none; }
.lidea--open .lidea__body { grid-column: 1; }
.lidea--open .lidea__t { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.lidea--open p { margin: 0 0 14px; color: var(--ink-2); max-width: 40ch; }
.lidea--open .btn { justify-self: start; }
@media (max-width: 420px) {
  .lidea__row { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-bottom: 8px; }
}
@media (min-width: 900px) {
  .lideas { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .lidea:nth-child(2) { border-top: 1.5px solid var(--ink); }
  .lidea--open { margin: 12px 0 0; }
}

/* ---------- Prices: the whole list at a glance, each row jumps to its card on the home page ---------- */
.lprices__wrap { display: grid; gap: 28px; }
.lprices__side .h2 { margin-bottom: 14px; }
.lprices__side .sub { margin: 0 0 14px; }
.lprices { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.lprices a {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  min-height: 52px; padding: 13px 0; border-bottom: 1px dashed var(--line-strong);
  text-decoration: none; color: var(--ink);
}
.lp__no { font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lp__name { font-weight: 650; font-size: 1rem; line-height: 1.3; }
.lp__name small { font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.lp__price {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 1.3rem; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.lp__price small { font-family: var(--f-body); font-stretch: 100%; font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.lprices a:hover .lp__name { color: var(--accent-ink); }
.lprices__note { margin: 20px 0 0; color: var(--ink-2); max-width: 58ch; }
.lprices__note b { color: var(--ink); font-weight: 650; }
.lpromo {
  display: grid; gap: 10px; margin: 28px 0 0; padding: 20px 20px 22px;
  background: var(--ink); color: var(--paper);
}
.lpromo__k { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: .95rem; font-weight: 650; color: var(--offer-hot); }
.lpromo__k::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: .5em;
  background: var(--offer-hot); animation: cb-tally 1.6s steps(1, end) infinite;
}
.lpromo__t {
  margin: 0; font-family: var(--f-display); font-stretch: 68%; font-weight: 840; text-transform: uppercase;
  font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: .95;
}
.lpromo__t b { color: var(--offer-hot); font-weight: 880; }
.lpromo__t .nobr { font-size: 1em; }
.lpromo__s { margin: 0; font-size: .95rem; font-weight: 600; }
.lpromo .btn { justify-self: stretch; margin-top: 6px; min-height: 52px; }
.lprices__pay { margin: 18px 0 0; font-size: .95rem; color: var(--ink-2); max-width: 58ch; }
.llink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 0;
  font-weight: 700; color: var(--accent-ink); text-underline-offset: 3px;
}
.llink .arrow { flex: none; }
@media (min-width: 560px) {
  .lpromo .btn { justify-self: start; }
}
@media (min-width: 1000px) {
  .lprices__wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .lprices__side { position: sticky; top: calc(var(--bar-h) + var(--ruler-h) + 32px); }
}

/* ---------- Contact: other trades as cards beside the WhatsApp button ---------- */
.lother__k { margin: 0 0 14px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.lother__list { display: grid; gap: 12px; }
.lcard {
  display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: stretch;
  color: var(--ink); text-decoration: none; background: var(--paper-2);
  border: 1px solid var(--line); transition: border-color .15s ease;
}
.lcard:hover { border-color: var(--ink); }
.lcard__img { position: relative; display: block; min-height: 104px; overflow: hidden; background: var(--screen); }
.lcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lcard__body { display: grid; align-content: center; gap: 6px; padding: 14px 16px 16px; min-width: 0; }
.lcard__t {
  font-family: var(--f-display); font-stretch: 70%; font-weight: 830; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1; letter-spacing: .003em;
}
.lcard__f { font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); line-height: 1.35; }
.lcard__s { color: var(--accent-ink); font-weight: 650; font-size: .95rem; }
.lcard:hover .lcard__t { color: var(--accent-ink); }
.lother .llink { margin-top: 14px; }

/* The closing links of a section ("Más preguntas ...") */
.faq__list .faq__more { margin: 18px 0 0; }