/* ============================================================
   VideoEnCaja v3 — productora moderna · dark-first · asimétrica
   ============================================================ */

:root{
  --orange: #F1660F;
  --orange-hot: #FF7A1A;
  --bg: #0C0A06;
  --panel: #16120B;
  --panel-2: #1D1810;
  --cream: #F4EEE2;
  --cream-dim: rgba(244,238,226,.62);
  --cream-faint: rgba(244,238,226,.38);
  --line: rgba(244,238,226,.14);
  --line-strong: rgba(244,238,226,.28);
  --font-display: "Archivo";
  --font-mono: "IBM Plex Mono", monospace;
  --wdth-display: 125;
  --maxw: 1380px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ max-width: 100%; height: auto; display: block; }
figure{ margin: 0; }
a{ color: inherit; }
::selection{ background: var(--orange); color: #fff; }

/* grano de cine */
.grain{
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ---------- tipografía ---------- */
h1,h2,h3{
  font-family: var(--font-display), sans-serif;
  font-variation-settings: "wdth" var(--wdth-display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -0.025em;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
h2{ font-size: clamp(44px, 5.4vw, 92px); }
h3{ font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.015em; }
p{ margin: 0; text-wrap: pretty; }

.outline{
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream);
}
.outline-orange{
  color: transparent;
  -webkit-text-stroke: 1.5px var(--orange);
}
.accent{ color: var(--orange); }

.mono{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mono-dim{ color: var(--cream-faint); }

.lede{
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--cream-dim);
  line-height: 1.55;
  text-transform: none;
  font-weight: 400;
}

/* ---------- botones ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display), sans-serif;
  font-variation-settings: "wdth" 115;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--orange); color: #fff; }
.btn-primary:hover{ background: var(--orange-hot); }
.btn-ghost{ background: transparent; color: var(--cream); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--cream); }
.btn-sm{ padding: 11px 20px; font-size: 13px; }

/* ---------- header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled{
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
  max-width: none;
  padding: 0 40px;
}
.logo{ display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.logo-mark{ width: 34px; height: 34px; flex: none; }
.logo-word{
  font-family: var(--font-display), sans-serif;
  font-variation-settings: "wdth" 120;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.nav{ display: flex; gap: 30px; }
.nav a{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  transition: color .15s;
  white-space: nowrap;
}
.nav a:hover{ color: var(--orange); }
.header-ctas{ display: flex; gap: 10px; }

/* ---------- hero ---------- */
.hero-cine{
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: end;
  overflow: hidden;
}
.hero-cine-bg{
  position: absolute;
  inset: -6%;
  background-image: url("../assets/hero-bg-spark.png");
  background-size: cover;
  background-position: 72% 40%;
  filter: saturate(1.05) brightness(.8) contrast(1.05);
}
.hero-cine-shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,6,.6) 0%, rgba(12,10,6,.15) 38%, rgba(12,10,6,.94) 88%),
    linear-gradient(94deg, rgba(12,10,6,.7) 0%, rgba(12,10,6,.1) 55%);
}
.hero-cine-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 150px 40px 130px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-cine h1{
  font-size: clamp(58px, 9.2vw, 150px);
  line-height: .92;
}
.hero-cine h1 .hero-line{ display: block; }
.hero-cine h1 .hero-line.indent-1{ margin-left: clamp(30px, 6vw, 110px); }
.hero-cine h1 .hero-line.indent-2{ margin-left: clamp(60px, 12vw, 220px); }

.hero-meta-top{
  position: absolute;
  z-index: 3;
  top: 100px; right: 40px;
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}
.rec-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.rec-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #E5483C;
  box-shadow: 0 0 12px rgba(229,72,60,.9);
}
.hero-sub-row{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: end;
  margin-top: 44px;
}
.sub-claim{
  font-variation-settings: "wdth" 115;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.hero-support{
  color: var(--cream-dim);
  font-size: 16px;
  max-width: 52ch;
  margin-top: 12px;
}
.hero-ctas{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.hero-scrubber{
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  padding: 0 40px 24px;
  display: grid;
  gap: 12px;
}
.scrub-track{ height: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.scrub-fill{ height: 100%; width: 0%; background: var(--orange); }
.scrub-meta{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

@media (prefers-reduced-motion: no-preference){
  .rec-dot{ animation: rec-blink 1.3s steps(2,end) infinite; }
  @keyframes rec-blink{ 50%{ opacity: .15; } }
  .hero-cine-bg{ animation: kenburns 26s ease-in-out infinite alternate; }
  @keyframes kenburns{
    from{ transform: scale(1) translateY(0); }
    to{ transform: scale(1.12) translateY(-2.2%); }
  }
  html.js-anim .hero-line{ opacity: 0; transform: translateY(40px); animation: line-up .9s cubic-bezier(.2,.7,.2,1) forwards; }
  html.js-anim .hero-line:nth-child(2){ animation-delay: .13s; }
  html.js-anim .hero-line:nth-child(3){ animation-delay: .26s; }
  html.js-anim .hero-fade{ opacity: 0; animation: fade-in .8s ease .55s forwards; }
  @keyframes line-up{ to{ opacity: 1; transform: none; } }
  @keyframes fade-in{ to{ opacity: 1; } }

  html.js-anim .reveal{ opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  html.js-anim .reveal.in{ opacity: 1; transform: none; }
}

/* ---------- marquee ---------- */
.marquee{
  background: var(--orange);
  color: #FFF7EF;
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
  transform: rotate(-1.2deg) scale(1.02);
  margin-block: -8px 0;
  position: relative;
  z-index: 5;
}
.marquee-inner{ display: inline-flex; will-change: transform; }
.marquee span{
  font-family: var(--font-display), sans-serif;
  font-variation-settings: "wdth" 120;
  font-weight: 760;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 28px;
  border-right: 1.5px solid rgba(255,255,255,.4);
}
@media (prefers-reduced-motion: no-preference){
  .marquee-inner{ animation: marquee 26s linear infinite; }
  @keyframes marquee{ to{ transform: translateX(-50%); } }
}

/* ---------- secciones numeradas ---------- */
.sec{ position: relative; padding: 130px 0; }
.sec-head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 70px;
}
.sec-num{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--orange);
  padding-top: 14px;
  border-top: 2px solid var(--orange);
  white-space: nowrap;
}
.sec-head h2{ max-width: 14ch; }
.sec-head .lede{ max-width: 58ch; margin-top: 18px; }
.sec-head.push h2{ margin-left: clamp(0px, 8vw, 150px); max-width: 16ch; }

/* ---------- la cuenta ---------- */
.cuenta-stage{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}
.cuenta-block{ display: grid; gap: 14px; }
.cuenta-block.trad{ grid-column: 1 / 7; }
.cuenta-block.ia{
  grid-column: 6 / 13;
  grid-row: 1;
  margin-top: clamp(120px, 16vw, 230px);
  z-index: 2;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 48px);
}
.cuenta-block.trad{ grid-row: 1; }
.cuenta-label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.cuenta-block.ia .cuenta-label{ color: var(--orange); }
.cuenta-figure{
  font-family: var(--font-display), sans-serif;
  font-variation-settings: "wdth" 122;
  font-weight: 800;
  font-size: clamp(64px, 8.5vw, 140px);
  line-height: .95;
  letter-spacing: -0.03em;
}
.cuenta-figure.tachado{
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream-faint);
  position: relative;
  width: fit-content;
}
.cuenta-figure.tachado::after{
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 50%;
  height: 5px;
  background: var(--orange);
  transform: rotate(-3deg);
}
.cuenta-figure.viva{ color: var(--orange); }
.cuenta-list{ margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 46ch; }
.cuenta-list li{ display: flex; gap: 11px; font-size: 15px; color: var(--cream-dim); align-items: baseline; }
.cuenta-list li::before{ font-family: var(--font-mono); font-size: 12px; flex: none; }
.cuenta-block.trad .cuenta-list li::before{ content: "−"; color: var(--cream-faint); }
.cuenta-block.ia .cuenta-list li::before{ content: "✓"; color: var(--orange); }
.cuenta-pero{
  margin-top: 60px;
  margin-left: clamp(0px, 20vw, 380px);
  border-left: 4px solid var(--orange);
  padding: 8px 0 8px 30px;
  max-width: 62ch;
}
.cuenta-pero b{
  font-variation-settings: "wdth" 115;
  font-weight: 760;
  font-size: clamp(20px, 2vw, 27px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.15;
}
.cuenta-pero p{ color: var(--cream-dim); font-size: 16px; margin-top: 12px; }

/* ---------- oficio / costuras ---------- */
.oficio{ background: var(--panel); border-block: 1px solid var(--line); }
.costuras{ display: grid; border-top: 1px solid var(--line); }
.costura{
  display: grid;
  grid-template-columns: 90px minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.costura .num{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--orange);
  letter-spacing: .12em;
}
.costura h3{ text-transform: uppercase; }
.costura p{ color: var(--cream-dim); font-size: 16px; }

/* ---------- filtro ---------- */
.filtro-stage{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.filtro-col{ padding: clamp(28px, 3vw, 46px); display: grid; gap: 20px; align-content: start; }
.filtro-col.no{
  grid-column: 1 / 7;
  border: 1.5px dashed var(--line-strong);
  transform: rotate(-.6deg);
}
.filtro-col.si{
  grid-column: 7 / 13;
  background: var(--orange);
  color: #FFF7EF;
  transform: rotate(.6deg) translateY(34px);
  box-shadow: 0 40px 80px -30px rgba(241,102,15,.45);
}
.filtro-col h3{ font-size: clamp(22px, 2.2vw, 32px); max-width: 14ch; }
.filtro-col ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.filtro-col li{ display: flex; gap: 12px; font-size: 15.5px; align-items: baseline; }
.filtro-col.no li{ color: var(--cream-dim); }
.filtro-col li::before{ font-family: var(--font-mono); font-size: 13px; flex: none; }
.filtro-col.no li::before{ content: "×"; color: var(--cream-faint); }
.filtro-col.si li::before{ content: "✓"; color: #FFF7EF; }
.filtro-col .punch{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  padding-top: 18px;
  border-top: 1px solid;
}
.filtro-col.no .punch{ border-color: var(--line); color: var(--cream-faint); }
.filtro-col.si .punch{ border-color: rgba(255,255,255,.4); }

/* ---------- jingle ---------- */
.jingle{ background: var(--panel); border-block: 1px solid var(--line); overflow: hidden; }
.jingle-grid{
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 70px;
  align-items: center;
}
.jingle-points{ margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.jingle-points li{ display: flex; gap: 13px; font-size: 16px; color: var(--cream-dim); align-items: baseline; }
.jingle-points li::before{ content: "♪"; font-family: var(--font-mono); color: var(--orange); flex: none; }
.waveform{
  display: flex;
  align-items: center;
  gap: 6px;
  height: 230px;
  justify-content: center;
}
.waveform i{
  display: block;
  width: 8px;
  background: var(--orange);
  height: calc(16px + var(--h) * 170px);
  opacity: calc(.4 + var(--h) * .6);
}
@media (prefers-reduced-motion: no-preference){
  .waveform i{
    animation: wave 1.6s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -.13s);
  }
  @keyframes wave{ from{ transform: scaleY(.5); } to{ transform: scaleY(1.15); } }
}
.jingle-caption{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: 20px;
}

/* ---------- niveles ---------- */
.niveles{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.nivel{
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 32px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.nivel:nth-child(1){ grid-column: 1 / 5; }
.nivel:nth-child(2){ grid-column: 5 / 9; margin-top: 44px; border-color: var(--orange); }
.nivel:nth-child(3){ grid-column: 9 / 13; margin-top: 88px; }
.nivel .num{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .15em; color: var(--orange); }
.nivel p{ font-size: 15px; color: var(--cream-dim); }
.nivel-tags{ display: flex; flex-wrap: wrap; gap: 7px; }
.nivel-tags span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  color: var(--cream-dim);
}
.nivel-ia{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--cream-faint);
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}

/* ---------- precios ---------- */
.precios-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.pack{
  position: relative;
  padding: 36px 30px;
  display: grid;
  gap: 18px;
  align-content: start;
  grid-template-rows: auto auto 1fr auto auto auto;
  border-right: 1px solid var(--line);
  transition: background .2s ease;
}
.pack:last-child{ border-right: none; }
.pack:hover{ background: var(--panel); }
.pack.featured{
  background: var(--panel);
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  z-index: 2;
}
.pack-flag{
  position: absolute;
  top: 0; right: 0;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px;
}
.pack-head{ display: grid; gap: 8px; }
.pack-head h3{ font-size: 21px; }
.pack-head .uso{ font-size: 13.5px; color: var(--cream-dim); line-height: 1.5; text-transform: none; font-weight: 400; }
.pack-price{ display: grid; gap: 2px; }
.pack-price .desde{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.pack-price .precio{
  font-family: var(--font-display), sans-serif;
  font-variation-settings: "wdth" 120;
  font-weight: 800;
  font-size: clamp(38px, 3.4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pack.featured .pack-price .precio{ color: var(--orange); }
.pack-price .iva{ font-size: 11.5px; color: var(--cream-faint); font-family: var(--font-mono); }
.pack ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; align-self: start; }
.pack li{ display: flex; gap: 9px; font-size: 13.5px; color: var(--cream-dim); align-items: baseline; }
.pack li::before{ content: "✓"; font-family: var(--font-mono); font-size: 11px; color: var(--orange); flex: none; }
.pack-up{ border-top: 1px dashed var(--line); padding-top: 14px; display: grid; gap: 8px; }
.pack-up .up-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}
.pack-up .chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.pack-up .chips span{
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid color-mix(in oklab, var(--orange) 55%, transparent);
  color: var(--orange);
}
.pack-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-faint);
  letter-spacing: .04em;
}

/* extras */
.extras-strip{
  margin-top: 70px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px;
  border-top: 2px solid var(--orange);
  padding-top: 40px;
}
.extras-strip h3{ font-size: clamp(24px, 2.4vw, 36px); max-width: 13ch; }
.extras-strip .mono-dim{ margin-top: 14px; display: block; }
.extras-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.extra-row{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  font-size: 14.5px;
}
.extra-row span{ color: var(--cream-dim); }
.extra-row b{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.bridges{ margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bridge-card{
  border: 1.5px dashed var(--line-strong);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
}
.bridge-card b{ font-size: 15.5px; font-weight: 720; text-transform: uppercase; font-variation-settings: "wdth" 115; }
.bridge-card span{ font-size: 13px; color: var(--cream-dim); grid-column: 1; }
.bridge-card .bridge-price{
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--orange);
  white-space: nowrap;
}
.precios-foot{
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--cream-faint);
}
.precios-foot a{ color: var(--orange); }

/* ---------- proceso ---------- */
.proceso-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 36px;
  counter-reset: paso;
}
.paso{
  display: grid;
  gap: 12px;
  align-content: start;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.paso::before{
  counter-increment: paso;
  content: "0" counter(paso);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--orange);
  letter-spacing: .1em;
}
.paso:nth-child(2){ margin-top: 36px; }
.paso:nth-child(3){ margin-top: 72px; }
.paso:nth-child(4){ margin-top: 108px; }
.paso h3{ font-size: 19px; }
.paso p{ font-size: 14.5px; color: var(--cream-dim); }
.proceso-nota{
  margin-top: 64px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream);
  border: 1px solid var(--line-strong);
  padding: 14px 26px;
  width: fit-content;
  margin-inline: auto;
}

/* ---------- casos ---------- */
.caso-feature{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
  text-decoration: none;
  align-items: end;
}
.caso-feature img, .caso-feature .caso-feature-video-container{
  grid-column: 1 / 9;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
  object-position: 38% 32%;
  filter: saturate(1.05);
}
.caso-feature-copy{
  grid-column: 7 / 13;
  grid-row: 1;
  z-index: 2;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  padding: clamp(24px, 2.6vw, 42px);
  display: grid;
  gap: 12px;
  transform: translateY(56px);
}
.caso-feature-copy h3{ font-size: clamp(26px, 2.6vw, 40px); }
.caso-feature-copy p{ font-size: 15px; color: var(--cream-dim); }
.caso-link{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 8px;
}
.casos-row{
  margin-top: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.casos-row.casos-row-3{
  grid-template-columns: repeat(3, 1fr);
}
.casos-row.casos-row-4{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .casos-row.casos-row-4{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .casos-row.casos-row-4{
    grid-template-columns: 1fr;
  }
}

/* Split grid layout for 3 cases (2 horizontal, 1 vertical) */
.casos-split-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 840px) {
  .casos-split-grid {
    grid-template-columns: 1fr;
  }
}
.casos-left-col {
  display: grid;
  gap: 32px;
}
.caso-thumb.vertical {
  aspect-ratio: 9 / 16 !important;
}
.caso-card{ text-decoration: none; display: grid; gap: 0; }
.caso-thumb{
  aspect-ratio: 16 / 8.4;
  position: relative;
  background: repeating-linear-gradient(-45deg, #1A150D 0 14px, #20190F 14px 28px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.caso-card:hover .caso-thumb{ border-color: var(--orange); }
.caso-thumb .ph-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-faint);
  border: 1px dashed var(--line-strong);
  padding: 8px 14px;
  text-align: center;
  line-height: 1.7;
}
.play-badge{
  position: absolute;
  right: 16px; bottom: 16px;
  width: 44px; height: 44px;
  background: var(--orange);
  display: grid;
  place-items: center;
}
.play-badge::after{
  content: "";
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.caso-card-copy{ padding: 18px 0 0; display: grid; gap: 6px; }
.caso-card-copy .meta{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.caso-card-copy h3{ font-size: 19px; }
.caso-card-copy p{ font-size: 14px; color: var(--cream-dim); }

/* ---------- IA sí/no ---------- */
.ia-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ia-col{ padding: clamp(26px, 2.6vw, 40px); display: grid; gap: 18px; align-content: start; }
.ia-col.si{ background: var(--panel); border: 1px solid var(--line); }
.ia-col.no{ border: 1.5px dashed var(--line-strong); }
.ia-col ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.ia-col li{ display: flex; gap: 11px; font-size: 15px; color: var(--cream-dim); align-items: baseline; }
.ia-col li::before{ font-family: var(--font-mono); font-size: 12.5px; flex: none; }
.ia-col.si li::before{ content: "✓"; color: var(--orange); }
.ia-col.no li::before{ content: "×"; color: var(--cream-faint); }
.regla{
  margin-top: 28px;
  border-left: 4px solid var(--orange);
  padding: 6px 0 6px 30px;
}
.regla p{
  font-variation-settings: "wdth" 115;
  font-weight: 740;
  font-size: clamp(19px, 1.9vw, 26px);
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 38ch;
}

/* ---------- formulario ---------- */
.contacto{ background: var(--panel); border-top: 1px solid var(--line); }
.form-grid{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 70px;
  align-items: start;
}
.trust{ padding: 0; margin: 24px 0 0; list-style: none; display: grid; gap: 12px; }
.trust li{ display: flex; gap: 11px; font-size: 15px; color: var(--cream-dim); align-items: baseline; }
.trust li::before{ content: "✓"; font-family: var(--font-mono); color: var(--orange); font-size: 12px; }

form.proyecto{
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field{ display: grid; gap: 8px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.field input, .field select, .field textarea{
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--cream);
  width: 100%;
  border-radius: 0;
  transition: border-color .15s;
}
.field textarea{ resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--orange);
}
.field select option{ background: var(--panel); }
.form-foot{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.form-foot small{ color: var(--cream-faint); font-size: 12px; max-width: 40ch; }
.form-ok{ grid-column: 1 / -1; text-align: center; padding: 44px 20px; display: grid; gap: 12px; justify-items: center; }
.form-ok h3{ font-size: 26px; }
.form-ok p{ color: var(--cream-dim); }

/* ---------- CTA final + footer ---------- */
.cta-final{
  padding: 150px 0 130px;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta-final h2{ font-size: clamp(52px, 7vw, 120px); max-width: 12ch; }
.cta-final .sub{ color: var(--cream-dim); font-size: 17px; margin-top: 22px; max-width: 44ch; }
.cta-final .hero-ctas{ margin-top: 36px; justify-content: flex-start; }

.site-footer{ border-top: 1px solid var(--line); padding: 32px 0; }
.site-footer .wrap{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-footer nav{ display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; }
.site-footer a{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-decoration: none;
}
.site-footer a:hover{ color: var(--orange); }
.site-footer .legal{
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cream-faint);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
}

/* ---------- claqueta de apertura ---------- */
.clap-overlay{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: none;
  place-items: center;
  pointer-events: none;
}
html.js-anim .clap-overlay{
  display: grid;
  animation: clap-out .4s ease 1.05s forwards;
}
.clapper{ width: min(460px, 82vw); filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.clap-stick{
  height: 52px;
  background: repeating-linear-gradient(115deg, #F4EEE2 0 30px, #14100A 30px 60px);
  border: 1px solid #2A241A;
  border-bottom: none;
  transform-origin: 4% 92%;
}
html.js-anim .clap-stick{
  transform: rotate(-24deg);
  animation: clap-snap .16s cubic-bezier(.7,0,1,1) .42s forwards;
}
.clap-body{
  background: #14100A;
  border: 1px solid #2A241A;
  padding: 24px 28px 26px;
  display: grid;
  gap: 12px;
}
.clap-row{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 11px;
}
.clap-row:last-child{ border-bottom: none; padding-bottom: 0; }
.clap-row b{ color: var(--cream); font-weight: 600; }
.clap-row .accent{ color: var(--orange); }
@keyframes clap-snap{ to{ transform: rotate(0deg); } }
@keyframes clap-out{ to{ opacity: 0; visibility: hidden; } }

/* ---------- letterbox del hero ---------- */
.letterbox{
  position: absolute;
  left: 0; right: 0;
  height: 56px;
  background: #000;
  z-index: 2;
  pointer-events: none;
}
.letterbox.top{ top: 0; }
.letterbox.bottom{ bottom: 0; }
html.js-anim .letterbox{
  height: 0;
  animation: lb-in 1.2s cubic-bezier(.2,.7,.2,1) 1.25s forwards;
}
@keyframes lb-in{ to{ height: 56px; } }
@media (max-width: 840px){
  .letterbox{ height: 34px; }
  @keyframes lb-in{ to{ height: 34px; } }
}

/* ---------- timeline dock (mesa de edición) ---------- */
.tl-dock{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 10px 20px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.tl-dock.show{ transform: none; }
.tl-tc{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
  min-width: 100px;
}
.tl-scene{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-align: right;
  min-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-track{
  position: relative;
  display: flex;
  gap: 3px;
  height: 34px;
  align-items: stretch;
}
.tl-clip{
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  cursor: pointer;
  min-width: 14px;
  transition: background .15s ease, border-color .15s ease;
  overflow: hidden;
}
.tl-clip::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: color-mix(in oklab, var(--orange) 26%, transparent);
}
.tl-clip.active{ border-color: var(--orange); }
.tl-clip:hover{ background: var(--panel); border-color: var(--orange); }
.tl-clip .tl-label{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg);
  border: 1px solid var(--orange);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.tl-clip:hover .tl-label{ opacity: 1; transform: translateX(-50%) translateY(0); }
.tl-playhead{
  position: absolute;
  top: -7px; bottom: -3px;
  left: 0%;
  width: 2px;
  background: var(--orange);
  pointer-events: none;
  z-index: 2;
}
.tl-playhead::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: var(--orange) transparent transparent transparent;
}
.site-footer{ padding-bottom: 92px; }
@media (max-width: 840px){
  .tl-scene{ display: none; }
  .tl-dock{ grid-template-columns: auto 1fr; padding: 8px 14px 10px; gap: 12px; }
  .tl-track{ height: 26px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav{ display: none; }
  .precios-grid{ grid-template-columns: 1fr 1fr; }
  .pack{ border-bottom: 1px solid var(--line); }
  .pack:nth-child(2n){ border-right: none; }
  .extras-grid{ grid-template-columns: 1fr; }
  .extras-strip{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 840px){
  .wrap{ padding: 0 22px; }
  .site-header .wrap{ padding: 0 22px; }
  .sec{ padding: 84px 0; }
  .hero-cine-content{ padding: 130px 22px 110px; }
  .hero-meta-top{ right: 22px; top: 92px; }
  .hero-scrubber{ padding: 0 22px 18px; }
  .hero-sub-row{ grid-template-columns: 1fr; gap: 24px; }
  .hero-ctas{ justify-content: flex-start; }
  .sec-head{ grid-template-columns: 1fr; gap: 16px; }
  .sec-head.push h2{ margin-left: 0; }
  .cuenta-stage{ grid-template-columns: 1fr; gap: 28px; }
  .cuenta-block.trad, .cuenta-block.ia{ grid-column: 1; grid-row: auto; margin-top: 0; }
  .cuenta-pero{ margin-left: 0; }
  .costura{ grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .filtro-stage{ grid-template-columns: 1fr; }
  .filtro-col.no, .filtro-col.si{ grid-column: 1; transform: none; }
  .jingle-grid{ grid-template-columns: 1fr; gap: 40px; }
  .waveform{ height: 140px; }
  .waveform i{ height: calc(12px + var(--h) * 100px); }
  .niveles{ grid-template-columns: 1fr; }
  .nivel:nth-child(1), .nivel:nth-child(2), .nivel:nth-child(3){ grid-column: 1; margin-top: 0; }
  .precios-grid{ grid-template-columns: 1fr; }
  .pack{ border-right: none; }
  .bridges{ grid-template-columns: 1fr; }
  .proceso-grid{ grid-template-columns: 1fr; }
  .paso:nth-child(2), .paso:nth-child(3), .paso:nth-child(4){ margin-top: 0; }
  .caso-feature{ display: grid; grid-template-columns: 1fr; }
  .caso-feature img, .caso-feature .caso-feature-video-container{ grid-column: 1; }
  .caso-feature-copy{ grid-column: 1; grid-row: auto; transform: none; margin-top: -2px; }
  .casos-row{ margin-top: 48px; grid-template-columns: 1fr; }
  .ia-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; gap: 40px; }
  form.proyecto{ grid-template-columns: 1fr; padding: 26px 20px; }
  .header-ctas .btn-ghost{ display: none; }
  .marquee{ transform: rotate(-1.2deg) scale(1.05); }
}