/* ============================================================
   CULTIVANA MEDIA — home.css (antes index2.css): SOLO lo de la home.
   Carga DESPUES de style.css y site2.css. Lo que comparten todas las
   paginas nuevas (intro, hero, cursor, iman, cascadas) vive en site2.css.
   ============================================================ */

/* ---------- ajustes que Klark hizo con el editor en index.html,
   ahora escritos a mano para que la home no dependa de theme.json ---------- */
.sec-title--two .ln>i,.ln--two>i{font-family:veneer-two,Impact,sans-serif}
.ln--three>i,.srv__t,.pano__title,.cta__title .outline>i>b{font-family:veneer-three,Impact,sans-serif}
.cta__title .outline>i>b em{font-family:veneer,Impact,sans-serif}
.manifesto__scribble{width:min(56.944vw,820px);margin-top:.35rem}
.work__scribble{width:min(51.528vw,810px);margin-top:.35rem;
  margin-bottom:clamp(1.125rem,calc(0.021042 * (100vw - 360px) + 18px),2.427rem)}
.foot>span:nth-of-type(2){color:#bdd631;padding-block:5px}
.cta2{position:relative}
.cta2::before{content:"";position:absolute;left:0;right:0;z-index:6;pointer-events:none;
  height:clamp(38px,4.6vw,84px);top:calc(2px - clamp(38px,4.6vw,84px));
  background:url("assets/brand/white-div.png") no-repeat center bottom/100% 100%}

/* ============ MANIFIESTO: las palabras se encienden al bajar ============ */
[data-words] .w{opacity:.18;transition:opacity .45s linear}
[data-words] .w.is-on{opacity:1}

/* ============ SHOWREEL: el video crece con el scroll ============ */
.reel{background:var(--cream);color:var(--ink);height:200svh;position:relative}
.reel__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;padding-block:var(--s8)}
.reel__head{width:100%;margin-bottom:var(--s7)}
.reel__head .eyebrow{margin-bottom:0}
.reel__frame{--p:0;position:relative;overflow:hidden;background:#000;
  width:min(calc(58vw + 42vw * var(--p)),calc(78svh * 16 / 9));
  aspect-ratio:16/9;margin-inline:auto;
  border-radius:calc(26px * (1 - var(--p)));
  box-shadow:0 30px 80px -30px rgba(20,20,20,.45);
  will-change:width,border-radius}
/* corte rapido: 3 columnas de fotos del portafolio que cambian a ritmo de edit */
.reel__frame{container-type:inline-size}
.reel__cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.reel__col{position:relative;overflow:hidden;background:#1b1b1b}
.reel__col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:reel-cut 8s steps(1,end) infinite,reel-kb 8s linear infinite}
.reel__col img:nth-child(2){animation-delay:-2.67s,-2.67s}
.reel__col img:nth-child(3){animation-delay:-5.33s,-5.33s}
.reel__col:nth-child(2) img{animation-delay:-.9s,-.9s}
.reel__col:nth-child(2) img:nth-child(2){animation-delay:-3.57s,-3.57s}
.reel__col:nth-child(2) img:nth-child(3){animation-delay:-6.23s,-6.23s}
.reel__col:nth-child(3) img{animation-delay:-1.8s,-1.8s}
.reel__col:nth-child(3) img:nth-child(2){animation-delay:-4.47s,-4.47s}
.reel__col:nth-child(3) img:nth-child(3){animation-delay:-7.13s,-7.13s}
@keyframes reel-cut{0%{opacity:1}33.3%{opacity:0}100%{opacity:0}}
@keyframes reel-kb{0%{transform:scale(1)}100%{transform:scale(1.1)}}
/* la palabra grande: los primeros 4 s solo fotos, luego una palabra cada 2 s (ciclo de 12 s) */
.reel__words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.reel__word{grid-area:1/1;font-family:veneer,Impact,sans-serif;font-size:20cqw;line-height:1;
  color:var(--cream);text-shadow:0 10px 40px rgba(0,0,0,.45);opacity:0}
/* las palabras arrancan cuando el reel entra en pantalla (home.js pone .is-live) */
.reel.is-live .reel__word{animation-name:reel-show;animation-duration:12s;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.reel.is-live .reel__bar{animation:reel-bar 12s linear infinite}
.reel__word:nth-child(1){animation-delay:4s}
.reel__word:nth-child(2){animation-delay:6s}
.reel__word:nth-child(3){animation-delay:8s}
.reel__word:nth-child(4){animation-delay:10s}
@keyframes reel-show{0%{opacity:1}16.67%{opacity:0}100%{opacity:0}}
.reel__word em{font-style:normal;color:var(--ink);background:var(--lime);padding:0 .08em}
.reel__bar{position:absolute;left:0;bottom:0;z-index:3;height:4px;width:0;background:var(--lime)}
@keyframes reel-bar{0%{width:0}100%{width:100%}}
.reel__hud{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);color:rgba(241,239,232,.75);font-size:var(--t-xs);letter-spacing:.14em}
.reel__cap{margin-top:var(--s7);color:rgba(20,20,20,.45);text-align:center;width:100%}
@media (max-width:760px){
  .reel{height:auto}
  .reel__pin{position:static;height:auto;padding-block:var(--s12)}
  .reel__frame{width:calc(100vw - var(--pad) * 2);border-radius:14px}
  .reel__hud span:nth-child(2){display:none}
  .reel__word{font-size:22cqw}
}
/* ============ MARCAS: marquee justo antes de contacto ============ */
.clients2{border-top:1px solid rgba(241,239,232,.1);padding-top:var(--s13)}
.clients2 .marquee{transform:skewX(var(--sk,0deg));transition:transform .25s var(--ease)}
.clients2 .marquee__track img{opacity:.55;filter:none}
.clients2 .marquee__track img:hover{opacity:1}

/* ============ accesibilidad ============ */
@media (prefers-reduced-motion:reduce){
  [data-words] .w{opacity:1}
  .reel{height:auto}
  .reel__pin{position:static;height:auto}
  .reel__frame{width:min(100vw - var(--pad) * 2,1400px);border-radius:0}
  .reel__col img{animation:none;transform:none}
  .reel__col img:first-child{opacity:1}
  .reel__word{animation:none}
  .reel__word:nth-child(1){opacity:1}
  .reel__bar{display:none}
}