/* ClipBoost Spain: calm.css, the "less template, same life" layer.
   Load it right after assets/site.css and before the other pieces' stylesheets. It only overrides
   site.css: the same fonts, the same tokens, no script.

   What it does (the reasons are in DESIGN.md):
   - The edit-suite devices stay, but only where they mean something: the hero (timecode, crop marks,
     the rolling dot), the ruler and playhead in the header, the screening room (marker, sprockets,
     crop marks on the players, the film strip), the process track (V1 clip heads) and the
     01:00:00:00 / 01:01:30:00 bookends. Every other section loses its stamped-on marker.
   - Each section gets its own layout and its own spacing instead of label + heading + grid.
   - A few loud moments: "YO EDITO." in tally red, giant 9:16 / 16:9 numerals, the biggest heading
     on the page over the samples, a huge 149 € with a blinking tally light, a full-bleed red
     payment band (optional HTML, see NOTES.md), a clapperboard that claps, a poster-size contact
     heading. Nothing here makes the page greyer or quieter. */

/* ---------- Rhythm: one unit that grows with the screen; sections take different multiples ---------- */
:root { --u: 8px; }
@media (min-width: 768px) { :root { --u: 10px; } }
@media (min-width: 1000px) { :root { --u: 13px; } }

/* --sec-pad stays the top padding (site.css hangs the anchor offset on it); --sec-pad-b is the bottom */
.sec { padding: var(--sec-pad) 0 var(--sec-pad-b, var(--sec-pad)); }
#servicios { --sec-pad: calc(var(--u) * 7);  --sec-pad-b: calc(var(--u) * 9); }
#muestras  { --sec-pad: calc(var(--u) * 10); --sec-pad-b: calc(var(--u) * 11); }
#precios   { --sec-pad: calc(var(--u) * 10); --sec-pad-b: calc(var(--u) * 9); }
#proceso   { --sec-pad: calc(var(--u) * 8);  --sec-pad-b: calc(var(--u) * 9); }
#ideas     { --sec-pad: calc(var(--u) * 8);  --sec-pad-b: calc(var(--u) * 8); }
#sobre-mi  { --sec-pad: calc(var(--u) * 11); --sec-pad-b: calc(var(--u) * 11); }
#contacto  { --sec-pad: calc(var(--u) * 10); --sec-pad-b: calc(var(--u) * 12); }

/* ---------- Timeline markers: only in the two sections that are part of the edit ----------
   The screening room and the process track keep "name ---- timecode". Everywhere else (and in
   sections other pieces add, like #negocios or #preguntas) the heading opens the section alone.
   The 01-07 counters go: with only two markers left they would read 02 and 04. */
.marker { display: none; }
#muestras .marker, #proceso .marker { display: flex; }
.marker__no { display: none; }

/* ---------- Hero: the slogan does what it says ----------
   "TÚ GRABAS." stays ink, "YO EDITO." goes tally red (the light that says the camera is rolling).
   ::first-line keeps it CSS-only and works whether the slogan is an h1 or a p (SEO piece). */
.hero__title > span { display: block; color: var(--accent); }
.hero__title > span::first-line { color: var(--ink); }

/* ---------- Services: the two formats as giant numerals ---------- */
.services { border-top: 0; margin-top: 8px; }
.service::before {
  content: "9:16";
  content: "9:16" / "";                       /* decorative: screen readers skip it where supported */
  display: block; margin: 0 0 16px;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900;
  font-size: clamp(4.6rem, 26vw, 9.5rem); line-height: .78; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  transition: color .2s ease, -webkit-text-stroke-color .2s ease;
}
.service + .service::before { content: "16:9"; content: "16:9" / ""; }
/* Drawn as an outline, like a frame guide; it fills with red when you point at the service */
@supports (-webkit-text-stroke: 1px black) {
  .service::before { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
  .service:hover::before { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
}
/* The stills are just stills now: no viewfinder marks, no small ratio labels (the numeral says it) */
.service .aframe::before, .service .aframe::after { content: none; }
.service .aframe span { display: none; }
@media (min-width: 900px) {
  .service { align-content: start; }   /* the shorter card does not stretch its numeral row */
  .service::before { grid-column: 1 / -1; margin: 0 0 8px; }
}

/* ---------- Samples: the screening room leads ---------- */
#muestras > .wrap { --maxw: 1440px; }               /* the samples get more width than any text section */
#muestras .sec__head { display: block; margin-bottom: calc(var(--u) * 5); }
#muestras .h2 {
  font-stretch: 62%; font-weight: 880; line-height: .88;
  font-size: clamp(3rem, 14vw, 8.75rem); max-width: 13ch; margin: 0 0 22px;
}
#muestras .note { max-width: 60ch; }
.sample--featured .sample__title { font-size: clamp(2.6rem, 11vw, 4.6rem); }
.samples { gap: calc(var(--u) * 8); }
@media (min-width: 1000px) {
  .samples--rest { gap: calc(var(--u) * 6) 48px; }
}

/* ---------- Prices: the offer is the loud moment; the slate stripe goes (About has the slate) ---------- */
.offer__slate { display: none; }
.offer__kicker { display: flex; align-items: flex-start; gap: 10px; }
.offer__kicker::before {                      /* a tally light: on air, and only for the first 3 */
  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;
}
@keyframes cb-tally { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .2; } }
.offer__body { padding: 24px 20px 4px; }
.offer__deal b { font-size: 1.6em; line-height: .8; }
@media (min-width: 760px) {
  .offer__body { padding: 32px 36px; }
  .offer .btn { margin-right: 36px; }
}

/* ---------- Process: three clips on one track (marker and V1 heads stay) ---------- */
@media (min-width: 900px) {
  .track { gap: 3px; }
  .clip { border-color: var(--line-strong); }
}

/* ---------- Payment band (optional fragment statement.html): full-bleed tally red ----------
   Two terms, each with its own big line: a single or promo video is paid once the client approves it,
   a monthly plan at the start of each month. Stacked on phones, side by side from 760 px. */
.statement {
  position: relative; overflow: hidden;
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 9);
  background: var(--accent); color: var(--on-accent);
}
.statement ::selection { background: var(--on-accent); color: var(--accent); }
.statement__label {
  margin: 0 0 calc(var(--u) * 3); font-family: var(--f-mono); font-stretch: 87.5%; line-height: 1.3;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.statement__terms { display: grid; gap: calc(var(--u) * 5); }
.statement__term {
  padding-top: 14px;
  border-top: 1.5px solid currentColor;
  border-top-color: color-mix(in srgb, var(--on-accent) 70%, transparent);
}
.statement__tag {
  margin: 0 0 14px; font-family: var(--f-mono); font-stretch: 87.5%; line-height: 1.3;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.statement__title {
  margin: 0 0 18px; text-wrap: balance;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 12vw, 4rem); line-height: .9; letter-spacing: -.006em;
}
.statement__title > span > span { display: block; }
.statement__text { margin: 0; max-width: 46ch; font-size: 1.125rem; font-weight: 560; line-height: 1.45; }
/* The way to pay: an inverted button (paper on red; ink on red in the dark theme) for a client whose
   video is approved or whose month is starting. It opens WhatsApp asking for the details, which
   never go on the page. */
.statement__pay {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: calc(var(--u) * 5); padding-top: 22px;
  border-top: 1.5px dashed currentColor;
  border-top-color: color-mix(in srgb, var(--on-accent) 55%, transparent);
}
.statement__how { flex: 1 1 100%; }
.statement__ask {
  margin: 0; font-family: var(--f-mono); font-stretch: 87.5%;
  font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.statement__btn { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }
.statement__btn:hover { background: transparent; color: var(--on-accent); }
.statement :focus-visible { outline-color: var(--on-accent); }
@media (max-width: 599px) {
  .statement__btn { width: 100%; }
}
/* 320 px phones: "the month starts." stays on one line */
@media (max-width: 359px) {
  .statement__title { font-size: 2.35rem; }
}
@media (min-width: 760px) {
  .statement__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .statement__title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
}
@media (min-width: 1000px) {
  .statement__terms { column-gap: 56px; }
  .statement__pay { flex-wrap: nowrap; }
  .statement__how { flex: 1 1 auto; }
}

/* ---------- Ideas: heading beside the lists, ideas as clip tags in a bin ---------- */
#ideas .h2 {
  text-transform: none; font-stretch: 80%; font-weight: 800;
  font-size: clamp(2.1rem, 8.4vw, 3.6rem); line-height: 1; letter-spacing: -.016em; max-width: 13ch;
}
.shots { border-top: 0; gap: 28px; }
.shotlist { padding: 0; border-bottom: 0; }
.shotlist__title {
  margin: 0 0 12px; font-family: var(--f-display); font-stretch: 72%; font-weight: 820;
  text-transform: uppercase; font-size: 1.35rem; line-height: 1; letter-spacing: .005em;
}
.shotlist ol { display: flex; flex-wrap: wrap; gap: 8px; }
.shotlist li {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%;
  padding: 7px 12px 8px; border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: .95rem; line-height: 1.3; background: var(--paper);
}
.shotlist li::before {
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: .75rem; font-weight: 500;
  color: var(--ink-3); padding-top: 0;
}
@media (min-width: 640px) { .shots { column-gap: 40px; row-gap: 32px; } }
@media (min-width: 1000px) {
  #ideas > .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  #ideas .sec__head { display: block; position: sticky; top: calc(var(--bar-h) + var(--ruler-h) + 32px); margin: 0; }
  #ideas .sec__head .h2 { margin-bottom: 16px; }
  #ideas .shots { grid-template-columns: 1fr 1fr; }
}

/* ---------- About: the slate is a real object on the desk ---------- */
.slate { transform: rotate(-1.5deg); overflow: visible; box-shadow: 0 0 0 1px var(--line), 0 26px 40px -30px rgba(0, 0, 0, .55); }
.slate__sticks { border-radius: 3px 3px 0 0; }
/* Where the browser can tie an animation to scrolling, the clapper claps shut as it comes into view */
@supports (animation-timeline: view()) {
  .slate__sticks::before {
    transform-origin: 4px 100%;
    animation: cb-clap linear both; animation-timeline: view(); animation-range: entry 60% cover 38%;
  }
  @keyframes cb-clap { 0% { transform: rotate(-11deg); } 70% { transform: rotate(-11deg); } 100% { transform: none; } }
}
/* 320-359 px: a smaller "L" so "ClipBoost Spain" fits on the board */
@media (max-width: 359px) {
  .slate__board { gap: 14px; padding: 16px; }
  .slate__mono { font-size: 4.75rem; padding-right: 14px; }
  .slate__fields > div { grid-template-columns: 5.4em minmax(0, 1fr); }
}
@media (min-width: 900px) { .about__grid { gap: 88px; } }

/* ---------- Contact: a poster-size question to end on ---------- */
#contacto .h2 {
  font-stretch: 68%; font-weight: 860; text-transform: none;
  font-size: clamp(2.9rem, 13.5vw, 5.8rem); line-height: .9; letter-spacing: -.012em; max-width: 14ch;
}
.form { border-top: 3px solid var(--ink); }

/* ---------- Small phones (320-359 px): keep every row inside the screen ---------- */
@media (max-width: 359px) {
  .offer__body { padding: 20px 16px 4px; }
  .offer .btn { margin: 16px; }
}