/* ============================================================
   CULTIVANA MEDIA — site2: lo que comparten TODAS las paginas
   nuevas (la home y las interiores). Carga DESPUES de style.css.
   Solo agrega o ajusta; misma paleta, mismos tipos y assets.
   Lo que es solo de la home vive en home.css.
   ============================================================ */

/* ============ INTRO: cortina con contador ============ */
body.is-intro{overflow:hidden}
.intro{position:fixed;inset:0;z-index:9700;background:var(--ink);color:var(--cream);
  display:flex;align-items:flex-end;padding:var(--pad);
  clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease)}
.intro.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro.is-gone{display:none}
.intro__in{display:flex;flex-direction:column;gap:var(--s3);width:100%;position:relative}
.intro__brand{color:rgba(241,239,232,.55)}
.intro__num{font-family:veneer,Impact,sans-serif;font-size:var(--t-display);line-height:.8;
  letter-spacing:-.01em;display:flex;align-items:flex-start;gap:.06em}
.intro__num b{font-weight:400;font-variant-numeric:tabular-nums;min-width:2.1ch}
.intro__num i{font-style:normal;font-size:.28em;color:var(--lime);margin-top:.12em}
.intro__tag{color:rgba(241,239,232,.4);margin-top:var(--s4)}
.intro__bar{position:absolute;left:0;bottom:0;height:3px;width:var(--w,0%);background:var(--lime);
  transition:width .12s linear}
.intro.is-done .intro__in{transform:translateY(-30px);opacity:0;
  transition:transform .8s var(--ease),opacity .5s var(--ease)}

/* ============ HERO ============ */
.hero2{background:var(--ink)}
.hero2__img{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--s,1.14));
  transition:transform 1.4s var(--ease);will-change:transform;
  filter:saturate(1.02)}
body.is-ready .hero2__img{--s:1.02}
.hero2__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 28%,rgba(0,0,0,.05) 58%,transparent 80%)}
/* etiqueta vertical a la izquierda */
.hero2__side{position:absolute;left:calc(var(--pad) * .55);top:50%;z-index:2;
  transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;
  display:flex;align-items:center;gap:var(--s5);white-space:nowrap;
  color:rgba(241,239,232,.45);font-size:var(--t-2xs);letter-spacing:.24em;
  opacity:0;transition:opacity 1s var(--ease) 1.2s}
.hero2__side i{width:60px;height:1px;background:rgba(241,239,232,.35);display:block}
body.is-ready .hero2__side{opacity:1}
@media (max-width:1100px){.hero2__side{display:none}}

.hero2__kicker{display:flex;align-items:center;gap:var(--s3);color:rgba(241,239,232,.7);
  margin-bottom:var(--s6);font-size:var(--t-xs);
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s}
body.is-ready .hero2__kicker{opacity:1;transform:none}
.hero2__kicker a{color:inherit;display:inline-block;padding-block:5px;transition:color .3s var(--ease)}
.hero2__kicker a:hover{color:var(--lime)}
.hero2__dot{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block;
  flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(188,216,36,.6);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(188,216,36,.55)}70%{box-shadow:0 0 0 12px rgba(188,216,36,0)}100%{box-shadow:0 0 0 0 rgba(188,216,36,0)}}

/* titular: cada linea sube con blur, una detras de otra */
.hero2__title{font-size:clamp(3.6532rem,calc(0.152622 * (100vw - 360px) + 58.4518px),13.0967rem);
  line-height:.8}
.hw{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hw>i{display:block;font-style:normal;opacity:0;filter:blur(10px);
  transform:translateY(105%);
  transition:transform 1.15s var(--ease),opacity .9s var(--ease),filter 1s var(--ease);
  transition-delay:calc(.12s + var(--i,0) * .11s)}
body.is-ready .hw>i{opacity:1;filter:blur(0);transform:none}
.hw--u>i{display:inline-block;position:relative;padding-bottom:.1em}
.hero2__uline{position:absolute;left:0;right:0;bottom:-.02em;width:100%;height:.16em;
  overflow:visible;pointer-events:none}
.hero2__uline path{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) 1.25s}
body.is-ready .hero2__uline path{stroke-dashoffset:0}
/* palabra marcada con caja lima (igual que en los titulos de seccion) */
.hero2__title em{font-style:normal;color:#1B1B1B;background:var(--lime);
  display:inline-block;padding:.02em .09em .06em;line-height:.88;text-shadow:none}
/* palabra que cambia sola (solo la home la usa) */
.swap{display:inline-block;vertical-align:top;height:.8em;overflow:hidden;color:var(--lime);
  font-weight:400;position:relative;top:0}
.swap span{display:block;line-height:.8;transform:translateY(calc(var(--k,0) * -100%));
  transition:transform .9s var(--ease)}
.swap.no-anim span{transition:none}

.hero2__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s8);
  flex-wrap:wrap}
.hrev{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(.25s + var(--i,0) * .1s)}
body.is-ready .hrev{opacity:1;transform:none}
.hero2__ctas{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero2__ctas .btn{margin-top:0}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:var(--cream)}
.btn--ghost{background:rgba(241,239,232,.08);color:var(--cream);
  border:1px solid rgba(241,239,232,.38);backdrop-filter:blur(10px)}
.btn--ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hero2__foot [data-clock]{color:var(--cream);font-weight:700}
/* al bajar, el texto del hero se va antes que la foto */
.hero2__inner,.hero2__foot{transform:translateY(calc(var(--hp,0) * -70px));
  opacity:calc(1 - var(--hp,0) * 1.35)}
/* el rasgado crema de la seccion que sigue se monta ENCIMA del final del
   hero, asi que el hero deja ese espacio libre abajo para que el pie no se tape */
.hero2{padding-bottom:clamp(38px,4.6vw,84px)}
.tear--hero{margin-top:calc(-1 * clamp(38px,4.6vw,84px));z-index:5}
@media (max-width:760px){
  .hero2__row{align-items:flex-start}
  .hero2__title{line-height:.84}
}

/* --- hero de pagina interior: mismo hero, titular un poco mas chico porque
   las frases son mas largas (CINCO SERVICIOS. / PARTE DE TU EQUIPO.) --- */
.hero2--page .hero2__title{font-size:clamp(2.7rem,calc(0.108 * (100vw - 360px) + 43px),9.6rem);
  line-height:.84}
.hero2--page .hero2__sub{max-width:46ch}

/* ============ PORTAFOLIO: mas vida en las fotos ============ */
.tile{border-radius:2px}
.tile img{transition:transform 1.3s var(--ease),filter .7s var(--ease),object-position .1s linear}
.bcol .tile:nth-child(odd){--r:-.35deg}
.bcol .tile:nth-child(even){--r:.35deg}
.tile:hover{z-index:2}
.tile figcaption b{font-family:veneer,Impact,sans-serif;font-weight:400;font-size:var(--t-2xl);
  letter-spacing:.01em}
.tile:hover figcaption{transform:translateY(-4px)}
/* las fotos entran en cascada (--d lo pone site2.js y luego lo quita) */
.tile::before{transition-delay:calc(var(--d,0) * 70ms)}
.tile img{transition-delay:calc(var(--d,0) * 70ms),0s,0s}

/* ============ CURSOR: aro con palabra (VER / PLAY / 360°) ============ */
.fcur__label{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  color:var(--ink);font-size:9.5px;letter-spacing:.16em;font-weight:700;
  opacity:0;transition:opacity .25s var(--ease)}
.fcur[data-label]:not([data-label=""]) .fcur__body{width:78px;height:78px;
  background:var(--lime);border-color:var(--lime)}
.fcur[data-label]:not([data-label=""]) .fcur__label{opacity:1}
.fcur[data-label]:not([data-label=""])[data-pressed="true"] .fcur__body{width:66px;height:66px}
/* sobre algo lima, el punto se pone ink para que se vea */
.fcur[data-ink="true"] .fcur__body{background:var(--ink);border-color:var(--ink)}
.fcur[data-ink="true"][data-interactive="true"] .fcur__body{background:transparent}
.fcur[data-ink="true"][data-pressed="true"] .fcur__body{background:var(--ink)}
.fcur[data-ink="true"][data-label]:not([data-label=""]) .fcur__body{background:var(--ink);border-color:var(--ink)}
.fcur[data-ink="true"][data-label]:not([data-label=""]) .fcur__label{color:var(--lime)}

/* ============ tarjetas con leve 3D ============ */
[data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),border-color .4s var(--ease);transform-style:preserve-3d}

/* ============ botones iman + pastilla de contacto ============ */
[data-magnet]{will-change:transform}
.pill{transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),
  transform .6s var(--ease)}
.pill i{transition:transform .5s var(--ease)}
.pill:hover i{transform:translate(4px,-4px)}

/* ============ nav: raya que se dibuja desde el centro ============ */
.nav__links a::after{left:50%;transform:translateX(-50%)}

/* ============ entradas en cascada ============
   site2.js pone --d (0,1,2…) a los hijos de una rejilla y lo quita cuando ya
   entraron, para que el retraso no se le pegue tambien al hover. */
.reveal{transition-delay:calc(var(--d,0) * 70ms)}
/* listas de un bloque de servicio: renglon por renglon */
.svc__list.reveal li{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms)}
.svc__list.reveal.is-in li{opacity:1;transform:none}
/* formulario de contacto: campo por campo */
.cf.reveal .cf__f{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms)}
.cf.reveal.is-in .cf__f{opacity:1;transform:none}
/* reservar: las tarjetas de servicio, una detras de otra */
.bk__step.reveal .bk__s{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .5s var(--ease),
    background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms)}
.bk__step.reveal.is-in .bk__s{opacity:1;transform:none}
.bk__step.reveal.is-in .bk__s:hover,.bk__step.reveal.is-in .bk__s[aria-checked="true"]{transform:translateY(-3px)}

/* ============ figuras que se mueven un poco dentro del marco ============ */
[data-plx] img{transition:object-position .1s linear}
.svc__fig[data-plx] img{transition:transform 1.3s var(--ease),filter .8s var(--ease),object-position .1s linear}
.abt__fig[data-plx] img,.p360__fig[data-plx] img{transition:transform .9s var(--ease),filter .6s var(--ease),object-position .1s linear}

/* ============ preguntas: se abren suave y el + gira ============ */
.qa>summary::after{transition:transform .45s var(--ease),color .3s var(--ease)}
.qa[open]>summary::after{content:"+";transform:rotate(45deg)}
.qa__b{overflow:hidden}
.qa.is-anim .qa__b{will-change:height}

/* ============ formulario: la etiqueta se enciende al escribir ============ */
.cf__f label{transition:color .3s var(--ease)}
.cf__f:focus-within label{color:var(--lime-ink)}

/* ============ pasos: el numero se enciende al entrar ============ */
.step b{opacity:.55;transition:transform .4s var(--ease),opacity .6s var(--ease)}
.step.is-in b{opacity:1}

/* ============ accesibilidad ============ */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  body.is-intro{overflow:auto}
  .hw>i,.hrev,.hero2__kicker,.hero2__side{opacity:1;filter:none;transform:none}
  .hero2__img{--s:1}
  .hero2__uline path{stroke-dashoffset:0}
  .swap span{transition:none}
  .hero2__inner,.hero2__foot{transform:none;opacity:1}
  .svc__list.reveal li,.cf.reveal .cf__f,.bk__step.reveal .bk__s{opacity:1;transform:none}
  .step b{opacity:1}
  [data-tilt]{transform:none}
}