@font-face{font-family:"Inter";src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}

:root{
  /* Color: manual de marca Acapare Films 2026 */
  --verde:#0E3B33;          /* principal: portada y secciones de marca (con textura cuero) */
  --verde-luz:#4A9C80;      /* brillo del cuero */
  --crema:#F5E6D0;          /* letra sobre oscuro: solo detalles */
  --terra:#D9552B;          /* acento: botón, línea de tiempo, FILMS */
  --tinta:#14121F;          /* sala de proyección: fondo de los vídeos */
  --terra-on-dark:#F0835A;  /* apoyo: terracota aclarada para etiquetas pequeñas sobre oscuro */
  --ph:#FFE14D;             /* marcador de dato pendiente (no se publica) */
  --cta:var(--terra);
  --cta-ink:var(--tinta);
  --crema-soft:rgba(245,230,208,.74);
  --line-dark:rgba(245,230,208,.16);
  /* Texturas: grano fino, fibra de terciopelo y poro de cuero (SVG en línea) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --leather:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='turbulence' baseFrequency='.07' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2.4'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  /* Tipografía */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Forma: extremos redondos del trazo del logo */
  --r-xl:32px;--r-lg:22px;--r-md:14px;--r-pill:999px;
  /* Relieve: luz arriba a la izquierda, sombra cálida abajo a la derecha */
  --raise:-6px -6px 16px rgba(255,255,255,.55),10px 12px 26px rgba(110,70,30,.22),inset 0 1px 0 rgba(255,255,255,.7);
  --press:inset 4px 5px 10px rgba(80,30,10,.35),inset -3px -3px 8px rgba(255,255,255,.25);
  /* Movimiento */
  --ease:cubic-bezier(.25,1,.5,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-pop:cubic-bezier(.34,1.4,.64,1);
  --dur:1s;--dist:56px;--t-hover:.45s;
  /* Espacio */
  --gutter:clamp(16px,4.4vw,64px);
  --maxw:1320px;
  --section-y:clamp(72px,10vw,140px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--crema);font-family:var(--font);font-size:clamp(1.0625rem,.98rem + .3vw,1.1875rem);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--terra-on-dark);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.ph{background:var(--ph);color:var(--tinta);font-weight:700;padding:.08em .4em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* Trazos del logo (sprite) */
.lt{fill:none;stroke:currentColor;stroke-width:28;stroke-linecap:round;stroke-linejoin:round}
.lt--bar{stroke-width:20}
.lf{fill:none;stroke:var(--terra);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.iso-o{fill:none;stroke:currentColor;stroke-width:24;stroke-linecap:round}
.iso-l{fill:none;stroke:var(--terra);stroke-width:24;stroke-linecap:round}

/* Etiqueta (ceja) */
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-on-dark);margin:0 0 18px}

/* ===== Texturas ===== */
/* Cuero verde: poro con relieve; la luz sigue al mouse y baja suave con el scroll (--mx, --my, --ty desde JS) */
.leather{position:relative;isolation:isolate;--gx:30vw;--gy:20vh;--glow:rgba(74,156,128,.34);
  background:radial-gradient(120% 80% at 50% 115%,rgba(4,18,15,.65),transparent 62%),var(--verde)}
.leather::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--leather);background-size:300px 300px;mix-blend-mode:soft-light;opacity:.4;border-radius:inherit}
/* Tinta: sala oscura con grano y un resplandor verde que acompaña el scroll */
.ink{position:relative;isolation:isolate;--gx:70vw;--gy:30vh;--glow:rgba(23,84,70,.5);color:var(--crema);background:var(--tinta)}
.ink::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:220px 220px;mix-blend-mode:overlay;opacity:.22}
.press-type{text-shadow:0 1px 0 rgba(255,255,255,.08),0 3px 0 rgba(0,0,0,.35)}

/* ===== Corte de entrada: una línea terracota cruza la pantalla y el plano se abre por ahí (menos de 1 s, no bloquea) ===== */
.preloader{display:none}
.js .preloader{display:block;position:fixed;inset:0;z-index:1500;pointer-events:none;animation:soltar 0s 5s forwards}
@keyframes soltar{to{visibility:hidden}}
.pl__half{position:absolute;left:0;right:0;height:50.5%;background:var(--tinta)}
.pl__half--t{top:0}
.pl__half--b{bottom:0}
.preloader__logo{position:absolute;left:50%;top:50%;width:min(420px,66vw);height:auto;translate:-50% -50%;overflow:visible;color:var(--crema)}
.pl__line{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:var(--terra);transform:scaleX(0);transform-origin:left}

/* ===== Navegación ===== */
.nav{position:absolute;inset:0 0 auto;z-index:20}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px}
.nav__logo{display:block;color:var(--crema)}
.nav__logo svg{height:29px;width:auto}
.nav__links{display:none;gap:32px;list-style:none;margin:0;padding:0;font-size:.95rem;font-weight:500}
.nav__links a{text-decoration:none;opacity:.86;transition:opacity var(--t-hover) var(--ease)}
.nav__links a:hover{opacity:1}
@media (min-width:900px){.nav__links{display:flex}}

/* ===== Botón ===== */
/* Píldora en relieve, como las fichas de formatos: brillo arriba, sombra suave y un círculo con flecha que gira */
.btn{--h:54px;position:relative;display:inline-flex;align-items:center;gap:14px;min-height:var(--h);padding:0 7px 0 24px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font-size:1.03rem;font-weight:700;text-decoration:none;letter-spacing:-.01em;isolation:isolate;
  transition:transform .4s var(--ease-pop),box-shadow var(--t-hover) var(--ease),background var(--t-hover) var(--ease)}
.btn--cta{background:linear-gradient(180deg,#EC6C40 0%,var(--terra) 55%,#BE4520 100%);color:var(--cta-ink);
  box-shadow:inset 0 1px 0 rgba(255,222,200,.55),inset 0 -3px 8px rgba(90,25,5,.3),0 1px 0 rgba(0,0,0,.4),0 16px 32px -14px rgba(217,85,43,.7)}
.btn--cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,222,200,.6),inset 0 -3px 8px rgba(90,25,5,.3),0 1px 0 rgba(0,0,0,.4),0 22px 40px -14px rgba(217,85,43,.85)}
.btn:active{transform:translateY(1px);box-shadow:var(--press)}
.btn__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--tinta);color:var(--crema);transition:transform .5s var(--ease-pop)}
.btn__ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .btn__ico{transform:rotate(-45deg)}
.btn__txt{display:block;overflow:hidden;height:1.3em;line-height:1.3}
.btn__txt span{display:block;transition:transform var(--t-hover) var(--ease)}
.btn__txt span::after{content:attr(data-t);display:block}
.btn:hover .btn__txt span{transform:translateY(-1.3em)}
.btn--ghost{background:linear-gradient(180deg,rgba(245,230,208,.13),rgba(245,230,208,.04));color:var(--crema);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(245,230,208,.14),0 14px 28px -16px rgba(0,0,0,.9)}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(245,230,208,.3),0 18px 32px -16px rgba(0,0,0,.9)}
.btn--ghost .btn__ico{background:rgba(245,230,208,.14)}
.btn--sm{--h:46px;padding:0 5px 0 18px;gap:10px;font-size:.95rem}
.btn--sm .btn__ico{width:36px;height:36px}
@media (max-width:420px){.hero__ctas{gap:10px}.hero__ctas .btn{--h:50px;padding-left:18px;gap:10px;font-size:.98rem}.hero__ctas .btn__ico{width:36px;height:36px}.hero__ctas .btn--ghost{padding-right:18px}.hero__ctas .btn--ghost .btn__ico{display:none}}

/* ===== Portada ===== */
.hero{min-height:100svh;overflow:clip;padding-top:84px;padding-bottom:28px}
.hide-sm{display:none}@media (min-width:600px){.hide-sm{display:inline}}
.hero__title{font-size:clamp(2.75rem,11.4vw,7rem);font-weight:800;line-height:.94;letter-spacing:-.045em;margin:0 0 20px;color:var(--crema)}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero__title .ln__in{display:block}
.hero__mark{position:relative;display:inline-block}
.hero__mark svg{position:absolute;left:0;right:0;bottom:-.06em;width:100%;height:.16em;overflow:visible}
.hero__mark path{fill:none;stroke:var(--terra);stroke-width:14;stroke-linecap:round}
.hero__row{display:flex;flex-direction:column;gap:20px}
.hero__sub{max-width:36ch;margin:0;color:var(--crema-soft)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){
  .hero{padding-top:104px}
  .hero__title{font-size:clamp(4rem,6.6vw,7rem)}
  .hero__title .ln--a,.hero__title .ln--b{display:inline-block;vertical-align:top}
  .hero__row{flex-direction:row;align-items:flex-end;justify-content:space-between}
}
@media (min-width:1100px){
  .hero{display:flex;align-items:center;padding-top:96px}
  .hero__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,4vw,72px);align-items:center}
  .hero__title{font-size:clamp(4rem,5.6vw,6.6rem)}
  .hero__title .ln--a,.hero__title .ln--b{display:block}
  .hero__row{flex-direction:column;align-items:flex-start}
  .hero .hero__stage{--R:clamp(200px,18vw,300px);--w:clamp(64px,5.4vw,90px);margin-top:0}
  .hero .stage3d{width:100%;min-width:0}
}

/* Escenario: la pantalla 16:9 y el carrusel de reels girando a su alrededor */
.hero__stage{--R:clamp(150px,40vw,600px);--w:clamp(56px,13.4vw,112px);position:relative;margin-top:clamp(26px,4vw,44px);perspective:calc(var(--R) * 4);perspective-origin:50% 20%}
.stage3d{position:relative;transform-style:preserve-3d;width:min(100%,1080px,calc((100svh - 300px) * 1.7778));min-width:min(100%,640px);margin-inline:auto}
.screen{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;transform:translateZ(0);cursor:pointer;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(245,230,208,.22)}
.screen video,.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.45));pointer-events:none}
/* Visor de cámara: esquinas, toma y código de tiempo */
.vf{position:absolute;inset:clamp(10px,2.2vw,22px);z-index:2;pointer-events:none;font-size:clamp(.6rem,1.6vw,.78rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--crema)}
.vf i{position:absolute;width:clamp(14px,3vw,30px);height:clamp(14px,3vw,30px);border:0 solid var(--crema)}
.vf i:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-top-left-radius:6px}
.vf i:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-top-right-radius:6px}
.vf i:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px;border-bottom-left-radius:6px}
.vf i:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0;border-bottom-right-radius:6px}
.vf__toma{position:absolute;left:clamp(20px,4vw,44px);top:clamp(2px,.6vw,6px)}
.vf__toma b{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--terra);margin-right:.6em;vertical-align:.05em;animation:rec 1.2s steps(2) infinite}
@keyframes rec{50%{opacity:.2}}
.vf__tc{position:absolute;right:clamp(20px,4vw,44px);top:clamp(2px,.6vw,6px);font-variant-numeric:tabular-nums}
.vf__cli{position:absolute;left:clamp(20px,4vw,44px);bottom:clamp(2px,.6vw,6px)}
.vf__ver{position:absolute;right:clamp(20px,4vw,44px);bottom:clamp(0px,.4vw,4px);display:flex;align-items:center;gap:8px}
.vf__ver span{display:grid;place-items:center;width:clamp(26px,4vw,40px);height:clamp(26px,4vw,40px);border-radius:50%;background:var(--crema);color:var(--tinta)}
.vf__ver svg{width:40%;height:40%;fill:currentColor;margin-left:8%}
.screen__time{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(245,230,208,.18);z-index:3}
.screen__time span{display:block;height:100%;background:var(--terra);transform-origin:left;transform:scaleX(.35)}
.screen__ph{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;font-size:.72rem;white-space:nowrap}

.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
/* El carrusel vive debajo de la pantalla, en su propio espacio 3D: nunca la cruza */
.ringbox{position:relative;height:calc(var(--R) * .45 + var(--w) * 2.15 + 24px);perspective:calc(var(--R) * 4);perspective-origin:50% 0%}
.ringbox .ring{top:calc(var(--R) * .21 + var(--w) * .95 + 14px)}
.ring__tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-12deg) rotateZ(-3deg)}
.ring__spin{position:absolute;inset:0;transform-style:preserve-3d}
.reel{position:absolute;left:calc(var(--w) / -2);top:calc(var(--w) * -0.889);width:var(--w);aspect-ratio:9/16;transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--R));text-decoration:none;color:var(--crema);cursor:pointer}
.reel__in{position:absolute;inset:0;border-radius:calc(var(--w) * .16);overflow:hidden;background:#000;box-shadow:0 12px 24px -14px rgba(0,0,0,.75);
  transition:transform .5s var(--ease-pop),box-shadow .5s var(--ease)}
.reel__in img{width:100%;height:100%;object-fit:cover}
.reel__in::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(245,230,208,.2);background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 40%)}
.reel:hover .reel__in,.reel:focus-visible .reel__in{transform:translateZ(36px) scale(1.14);box-shadow:0 0 0 3px var(--crema),0 30px 50px -18px rgba(0,0,0,.85)}
.reel:focus-visible{outline:none}
.hero .ring__spin{--step:30deg}
.stage__hint{position:relative;display:flex;width:max-content;margin:4px auto 0!important;align-items:center;gap:10px;margin:0;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(20,18,31,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.8rem;font-weight:600;color:var(--crema-soft);white-space:nowrap}
.stage__hint i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--crema);position:relative}
.stage__hint i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--terra);animation:tap 1.6s var(--ease) infinite}
@keyframes tap{0%,100%{scale:.6}50%{scale:1}}

/* ===== Secciones ===== */
.blk{padding-block:var(--section-y);overflow:clip}
.blk--verde{color:var(--crema)}
.blk__sub{display:block}
.blk__title{font-size:clamp(2rem,6.6vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.blk__lead{max-width:46ch;margin:0 0 40px;opacity:.86}

/* Formatos: fichas en relieve que se hunden al tocarlas y abren su forma de trabajar */
.fmt-wrap{margin-top:clamp(80px,11vw,150px)}
.fmt__tabs{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 18px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fmt__tabs::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:48px;padding:0 20px;border:0;border-radius:var(--r-pill);cursor:pointer;font-weight:700;font-size:.98rem;letter-spacing:-.01em;color:var(--crema);
  background:linear-gradient(180deg,#1B4E44,#0B2A24);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(245,230,208,.08),0 12px 24px -12px rgba(0,0,0,.9);transition:transform .35s var(--ease-pop),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-selected="true"]{background:linear-gradient(180deg,#EC6C40,#BE4520);color:var(--tinta);box-shadow:var(--press),0 0 0 1px rgba(0,0,0,.3);transform:translateY(2px)}
.fmt__stage{perspective:1400px;margin-top:12px}
.fmt__panel{display:grid;gap:clamp(20px,4vw,48px);align-items:center;border-radius:var(--r-xl);padding:clamp(14px,2.4vw,26px);background:linear-gradient(180deg,rgba(245,230,208,.07),rgba(245,230,208,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(245,230,208,.08),0 40px 80px -40px #000}
.js .fmt__panel:not(.is-on){display:none}
.no-js .fmt__panel+.fmt__panel{margin-top:16px}
@media (min-width:760px){.fmt__panel{grid-template-columns:minmax(220px,.62fr) 1fr}}
.fmt__media{position:relative;aspect-ratio:9/16;max-height:min(70svh,560px);border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 30px 50px -26px #000;transform-style:preserve-3d}
.fmt__media img,.fmt__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:759px){.fmt__media{aspect-ratio:5/4;max-height:none}}
.fmt__body h3{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 10px}
.fmt__body>p{margin:0 0 22px;max-width:44ch;color:var(--crema-soft)}
.steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;padding:14px 16px;border-radius:var(--r-md);background:rgba(245,230,208,.05);box-shadow:inset 0 0 0 1px rgba(245,230,208,.1)}
.steps li::before{counter-increment:s;content:"0" counter(s);grid-row:span 2;font-weight:800;font-size:.8rem;letter-spacing:.1em;color:var(--terra-on-dark)}
.steps b{font-size:1.05rem}
.steps span{font-size:.95rem}
.fmt__line{height:6px;border-radius:6px;background:var(--terra);transform-origin:left;margin:0 0 22px;width:96px}

/* Clientes: logos en fichas oscuras en relieve; se levantan y brillan al apuntarlas */
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;perspective:1000px}
@media (min-width:760px){.logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.logos .logo{aspect-ratio:2/1}}
.logo{--lx:50%;--ly:0%;position:relative;display:grid;place-items:center;aspect-ratio:3/2;padding:18px;border-radius:var(--r-lg);text-align:center;
  background:radial-gradient(80% 90% at var(--lx) var(--ly),rgba(245,230,208,.1),transparent 70%),linear-gradient(180deg,#1A4A41,#0C2B25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(245,230,208,.08),0 24px 40px -24px #000;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.logo__name{font-size:clamp(1rem,2.4vw,1.45rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--crema);opacity:.62;transition:opacity .4s var(--ease)}
.logo__ph{position:absolute;top:12px;right:12px;font-size:.6rem;letter-spacing:.06em}
.logo:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(245,230,208,.22),0 34px 50px -24px #000}
.logo:hover .logo__name{opacity:1}

/* Tarjetas de vídeo */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;perspective:1200px}
@media (min-width:760px){.cards{grid-template-columns:repeat(4,1fr);gap:18px}}
.vcard{position:relative;margin:0;transform-style:preserve-3d;transition:transform .6s var(--ease),filter .6s var(--ease),opacity .6s var(--ease)}
.vcard__media{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:#000;transform-style:preserve-3d;cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.vcard__media img,.vcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard__media video{opacity:0;transition:opacity .4s var(--ease)}
.vcard.is-playing .vcard__media video{opacity:1}
.vcard__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(245,230,208,.14);background:linear-gradient(180deg,transparent 55%,rgba(20,18,31,.75));pointer-events:none}
.vcard__time{position:absolute;left:14px;right:14px;bottom:14px;height:5px;border-radius:5px;background:rgba(245,230,208,.25);overflow:hidden;z-index:2}
.vcard__time span{display:block;height:100%;background:var(--terra);transform-origin:left;transform:scaleX(0)}
.vcard__cap{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:.95rem}
.vcard__cap b{font-weight:700;letter-spacing:-.01em}
.vcard__cap small{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-on-dark)}
@media (min-width:760px){.vcard__cap{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px}}
.vcard__play{position:absolute;left:50%;top:50%;width:64px;height:64px;translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 3px var(--crema);display:grid;place-items:center;z-index:3;color:var(--crema);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s,scale .4s var(--ease-pop)}
.vcard.is-playing .vcard__play{opacity:0;scale:.6}
.cards.has-hover .vcard:not(.is-hover){filter:brightness(.5) saturate(.6);transform:translateZ(-60px) scale(.97)}
@media (hover:hover) and (pointer:fine){.cards--fine .vcard__play{opacity:0}}

/* Cursor lente: aparece sobre todo lo que se puede ver */
.lens-cursor{position:fixed;left:0;top:0;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;pointer-events:none;z-index:1200;
  box-shadow:inset 0 0 0 3px var(--crema);display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--crema);
  opacity:0;scale:.4;transition:opacity .3s var(--ease),scale .45s var(--ease-pop);mix-blend-mode:difference}
.lens-cursor::after{content:"";position:absolute;right:16px;top:50%;width:4px;height:18px;margin-top:-9px;border-radius:4px;background:var(--terra)}
.lens-cursor.is-on{opacity:1;scale:1}

/* Redes: carrusel 3D con las visualizaciones de cada reel */
.redes__stage{--R:clamp(190px,50vw,560px);--w:clamp(100px,25vw,160px);position:relative;height:clamp(340px,74vw,640px);perspective:calc(var(--R) * 4.2);perspective-origin:50% 10%}
.redes__stage .ring{top:50%}
.redes__stage .ring__tilt{transform:rotateX(-8deg)}
.redes__stage .ring__spin{--step:40deg}
.reel__views{position:absolute;left:8%;right:8%;bottom:8%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:clamp(.56rem,1.4vw,.72rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.reel__views .ph{letter-spacing:.02em;font-size:1.1em}
.redes .reel__in::after{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 35%,transparent 55%,rgba(20,18,31,.8))}

/* Reproductor: se abre como un iris desde donde tocaste */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--tinta);color:var(--crema);overflow:auto;overscroll-behavior:contain}
.lb::backdrop{background:transparent}
.lb::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--grain);background-size:220px;mix-blend-mode:overlay;opacity:.25}
.lb__in{min-height:100%;display:grid;gap:22px;align-content:center;justify-items:center;padding:76px var(--gutter) 28px}
@media (min-width:900px){.lb__in{grid-template-columns:auto minmax(260px,360px);gap:56px;justify-content:center;align-items:center}}
.lb__media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(245,230,208,.2),0 60px 120px -40px rgba(0,0,0,.9)}
.lb__media video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.lb[data-ratio="v"] .lb__media{height:min(58svh,820px);aspect-ratio:9/16;max-width:calc(100vw - 32px)}
.lb[data-ratio="h"] .lb__media{width:min(100vw - 32px,980px);aspect-ratio:16/9}
@media (min-width:900px){.lb[data-ratio="h"] .lb__media{width:min(62vw,980px)}.lb[data-ratio="v"] .lb__media{height:min(80svh,820px)}}
.lb__info{width:100%;max-width:420px}
.lb__info h2{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 10px}
.lb__info p{margin:0 0 20px;color:var(--crema-soft);font-size:.95rem}
.lb__nav{display:flex;gap:10px;margin-bottom:16px}
.lb__btn{min-height:48px;min-width:48px;padding:0 18px;border-radius:var(--r-pill);border:2px solid rgba(245,230,208,.4);background:transparent;cursor:pointer;font-weight:700;font-size:.92rem}
.lb__btn:hover{border-color:var(--crema)}
.lb__close{position:fixed;top:16px;right:16px;z-index:2;width:52px;height:52px;padding:0;border-radius:50%;border:0;background:var(--crema);color:var(--tinta);cursor:pointer;display:grid;place-items:center}
.lb__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.lb__count{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-on-dark)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ===== Portada: línea de confianza ===== */
.hero__trust{margin:0;font-size:.88rem;color:var(--crema-soft)}
.hero__trust b{color:var(--crema);font-weight:700}

/* ===== Portafolio: etiquetas de corte para filtrar ===== */
.filters{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 22px;margin:0 -2px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-pill);cursor:pointer;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--crema);
  background:linear-gradient(180deg,rgba(245,230,208,.1),rgba(245,230,208,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(245,230,208,.12);
  transition:transform .35s var(--ease-pop),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.filter:hover{transform:translateY(-2px)}
.filter[aria-pressed="true"]{background:linear-gradient(180deg,#EC6C40,#BE4520);color:var(--tinta);box-shadow:var(--press)}
.vcard.is-out{display:none}

/* ===== Concepto: arrastra la línea de tiempo y se encienden los tres momentos ===== */
.concept{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.concept{grid-template-columns:1fr 1fr}}
.concept__art{position:relative;aspect-ratio:1;max-width:min(440px,72vw);width:100%;margin-inline:auto;display:grid;place-items:center}
.concept__lens{position:absolute;inset:12%;border-radius:50%;box-shadow:inset 0 0 0 clamp(12px,3vw,22px) var(--crema),0 40px 80px -30px #000;
  background:radial-gradient(circle at 35% 30%,rgba(245,230,208,.14),transparent 55%),#0a221e;transition:transform .8s var(--ease-pop),opacity .6s var(--ease)}
.concept__vf{position:absolute;inset:4%;opacity:0;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.concept__vf i{position:absolute;width:18%;height:18%;border:0 solid var(--crema)}
.concept__vf i:nth-child(1){left:0;top:0;border-width:4px 0 0 4px;border-top-left-radius:10px}
.concept__vf i:nth-child(2){right:0;top:0;border-width:4px 4px 0 0;border-top-right-radius:10px}
.concept__vf i:nth-child(3){left:0;bottom:0;border-width:0 0 4px 4px;border-bottom-left-radius:10px}
.concept__vf i:nth-child(4){right:0;bottom:0;border-width:0 4px 4px 0;border-bottom-right-radius:10px}
.concept__rec{position:absolute;top:8%;left:50%;translate:-50% 0;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.concept__rec::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--terra);margin-right:.6em;animation:rec 1.2s steps(2) infinite}
.concept__cut{position:absolute;left:8%;right:8%;top:50%;height:clamp(12px,3vw,20px);margin-top:calc(clamp(12px,3vw,20px) / -2);border-radius:20px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.concept[data-step="1"] .concept__lens{transform:scale(.82)}
.concept[data-step="1"] .concept__vf{opacity:1;transform:scale(1)}
.concept[data-step="2"] .concept__lens{transform:scale(.7)}
.concept[data-step="2"] .concept__vf{opacity:.35;transform:scale(.94)}
.concept[data-step="2"] .concept__cut{transform:scaleX(1)}
.concept__steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.concept__step{padding:16px 18px;border-radius:var(--r-md);background:rgba(245,230,208,.04);box-shadow:inset 0 0 0 1px rgba(245,230,208,.08);opacity:.45;transition:opacity .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.concept__step b{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.3rem,3.4vw,1.8rem);letter-spacing:-.03em}
.concept__step b small{font-size:.75rem;letter-spacing:.14em;color:var(--terra-on-dark)}
.concept__step p{margin:4px 0 0;font-size:.98rem;color:var(--crema-soft)}
.concept__step.is-on{opacity:1;background:rgba(245,230,208,.08);box-shadow:inset 0 0 0 1px rgba(240,131,90,.5)}
.no-js .concept__step{opacity:1}
/* La línea de tiempo es un control deslizante real: funciona con dedo, mouse y teclado */
.scrub{display:block}
.scrub__lab{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-soft);margin-bottom:12px}
.scrub input{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:grab;margin:0;--p:0%}
.scrub input:active{cursor:grabbing}
.scrub input::-webkit-slider-runnable-track{height:12px;border-radius:12px;background:linear-gradient(90deg,var(--terra) var(--p),rgba(245,230,208,.16) var(--p))}
.scrub input::-moz-range-track{height:12px;border-radius:12px;background:linear-gradient(90deg,var(--terra) var(--p),rgba(245,230,208,.16) var(--p))}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;margin-top:-14px;border-radius:50%;background:var(--tinta);box-shadow:inset 0 0 0 6px var(--crema),0 8px 20px -6px #000}
.scrub input::-moz-range-thumb{width:40px;height:40px;border:0;border-radius:50%;background:var(--tinta);box-shadow:inset 0 0 0 6px var(--crema),0 8px 20px -6px #000}

/* ===== Cifras: editables en index.html ===== */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr);gap:16px}}
.stat{padding:clamp(18px,3vw,30px);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(245,230,208,.08),rgba(245,230,208,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(245,230,208,.08),0 30px 60px -30px #000}
.stat__n{display:block;font-size:clamp(2.4rem,8vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.stat__n .ph{font-size:.42em;letter-spacing:0;vertical-align:middle}
.stat__l{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-on-dark)}
.stats__src{margin:18px 0 0;font-size:.85rem;color:var(--crema-soft)}

/* ===== Contacto ===== */
.contact{text-align:left}
.contact__title{font-size:clamp(2.8rem,11vw,8rem);font-weight:800;line-height:.92;letter-spacing:-.05em;margin:0 0 24px}
.contact__title .hero__mark svg{bottom:-.04em}
.contact__lead{max-width:40ch;margin:0 0 32px;color:var(--crema-soft)}
.contact__note{margin:16px 0 0;font-size:.88rem;color:var(--crema-soft)}

/* ===== Pie de página ===== */
.foot{background:var(--tinta);border-top:1px solid var(--line-dark);padding-block:clamp(48px,7vw,90px) calc(40px + env(safe-area-inset-bottom))}
.foot__in{display:grid;gap:28px}
@media (min-width:900px){.foot__in{grid-template-columns:1.4fr 1fr 1fr;align-items:end}}
.foot__logo{width:min(340px,80%);color:var(--crema);overflow:visible}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
.foot a{text-decoration:none;opacity:.8}
.foot a:hover{opacity:1}
.foot small{display:block;color:var(--crema-soft);font-size:.82rem}

/* ===== Barra fija del celular: aparece al dejar la portada y se esconde en contacto ===== */
.bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:900;display:flex;justify-content:center;transform:translateY(160%);transition:transform .5s var(--ease)}
.bar .btn{width:100%;justify-content:space-between;box-shadow:inset 0 1px 0 rgba(255,222,200,.55),0 18px 40px -10px rgba(0,0,0,.9)}
.bar.is-on{transform:none}
@media (min-width:900px){.bar{display:none}}

/* Formatos: modelos de trabajo, créditos y nota de ejemplo (cajas translúcidas, sin amarillo) */
.fmt__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px!important}
.fmt__tags span{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill);color:var(--terra-on-dark);box-shadow:inset 0 0 0 1px rgba(240,131,90,.45);background:rgba(217,85,43,.08)}
.credits{margin:0 0 18px;padding:16px 18px;border-radius:var(--r-md);background:linear-gradient(180deg,rgba(217,85,43,.12),rgba(217,85,43,.04));box-shadow:inset 0 0 0 1px rgba(240,131,90,.28)}
.credits__t{margin:0 0 10px;font-weight:800;font-size:.95rem}
.credits__t small{font-weight:500;color:var(--crema-soft)}
.credits ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:600px){.credits ul{grid-template-columns:1fr 1fr}}
.credits li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:rgba(20,18,31,.35)}
.credits li b{font-size:.95rem}
.credits li span{font-size:.85rem;color:var(--terra-on-dark);font-weight:700}
.fmt__note{margin:0 0 18px!important;padding:12px 14px;border-left:3px solid var(--terra);border-radius:0 10px 10px 0;background:rgba(245,230,208,.05);font-size:.92rem;color:var(--crema-soft)}
.steps span{color:var(--crema-soft)}
@media (min-width:760px){.fmt__panel{align-items:start}.fmt__media{position:sticky;top:24px}}
@media (max-width:599px){.steps li{padding:12px 14px}.steps{gap:8px}}
/* Pasos compactos: dos columnas de fichas pequeñas, número y título en una línea */
.fmt__body .steps{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.fmt__body .steps li{display:block;padding:12px 14px}
.fmt__body .steps li::before{display:inline;margin-right:8px;font-size:.72rem}
.fmt__body .steps b{font-size:.98rem}
.fmt__body .steps span{display:block;margin-top:2px;font-size:.86rem;line-height:1.4}
.fmt__body .steps li:last-child:nth-child(odd){grid-column:1/-1}
.fmt__body>p{margin-bottom:16px}
/* Portafolio: los primeros 8 de entrada, el resto con «Ver más» */
.js .cards:not(.show-all) .vcard.is-more{display:none}
.cards__more{margin:28px 0 0;text-align:center}
.reel__views b{font-size:1.25em;letter-spacing:-.01em;color:var(--crema)}

/* Logos de clientes en crema, a un tamaño visual parecido */
.logo img{max-width:min(70%,190px);max-height:clamp(34px,8vw,64px);width:auto;height:auto;opacity:.85;transition:opacity .4s var(--ease)}
.logo:hover img{opacity:1}
.logo--havaianas img{max-width:min(70%,210px)}
.logo--novo-mundo img,.logo--ballantines img{max-height:clamp(46px,11vw,88px)}
.logo--la-prensa img{max-height:clamp(46px,11vw,88px)}
/* Redes: las portadas son capturas con sus cifras (proporción 2:3) */
.redes .reel--cover{aspect-ratio:2/3;top:calc(var(--w) * -0.75)}
.redes .reel--cover .reel__in img{object-position:center bottom}

/* Carruseles: se agarran y giran; flechas grandes para quien prefiera tocar */
[data-hero-area],[data-redes]{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
[data-hero-area].is-dragging,[data-redes].is-dragging{cursor:grabbing}
[data-hero-area] img,[data-redes] img{-webkit-user-drag:none}
.ring-ctl{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:6px auto 0}
.redes .ring-ctl{margin:0 auto 26px}
.ring-ctl__btn{display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--crema);
  background:linear-gradient(180deg,rgba(245,230,208,.14),rgba(245,230,208,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(245,230,208,.16),0 10px 22px -12px #000;transition:transform .35s var(--ease-pop),background .3s var(--ease)}
.ring-ctl__btn:hover{transform:scale(1.08);background:var(--terra);color:var(--tinta)}
.ring-ctl__btn:active{transform:scale(.94)}
.ring-ctl__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ring-ctl__lab{padding:8px 14px;border-radius:999px;background:rgba(20,18,31,.78);font-size:.78rem;font-weight:600;color:var(--crema-soft);white-space:nowrap}
@media (max-width:380px){.ring-ctl__lab{font-size:.7rem;padding:7px 10px}}
/* Las tres portadas con más vistas, un poco más grandes y con borde naranja */
.redes .reel--top .reel__in{transform:scale(1.14);box-shadow:0 0 0 2px var(--terra),0 24px 48px -16px rgba(0,0,0,.85)}
.redes .reel--top:hover .reel__in{transform:translateZ(36px) scale(1.22)}
.lb__media iframe{display:block;width:100%;height:100%;border:0;background:#000}

/* Formatos: modelos de trabajo como botones; cada uno abre su información */
.fmt__lead{margin:0 0 14px!important;font-weight:600;color:var(--crema)!important}
.fmt__models{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.fmt__model{min-height:40px;padding:0 14px;border:0;border-radius:var(--r-pill);font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-on-dark);
  background:rgba(217,85,43,.08);box-shadow:inset 0 0 0 1px rgba(240,131,90,.45);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .35s var(--ease-pop)}
button.fmt__model:hover{transform:translateY(-1px)}
.fmt__model[aria-pressed="true"]{background:linear-gradient(180deg,#EC6C40,#BE4520);color:var(--tinta);box-shadow:var(--press)}
.fmt__model.is-solo{display:inline-flex;align-items:center;cursor:default}
.js .fmt__pane:not(.is-on){display:none}
.fmt__pane>p:first-child{margin:0 0 14px;color:var(--crema-soft);max-width:46ch}

/* Contacto: correo e Instagram como segundas opciones */
.contact__alt{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.contact__alt a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border-radius:var(--r-pill);text-decoration:none;font-weight:600;font-size:.95rem;color:var(--crema);
  background:linear-gradient(180deg,rgba(245,230,208,.1),rgba(245,230,208,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(245,230,208,.14);transition:box-shadow .3s var(--ease),transform .35s var(--ease-pop)}
.contact__alt a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(245,230,208,.32)}
.contact__alt svg{width:20px;height:20px;fill:none;stroke:var(--terra-on-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact__alt svg .dot{fill:var(--terra-on-dark);stroke:none}

/* Foco de luz del fondo: capa aparte que solo se traslada (no repinta la sección al moverse) */
.leather::after,.ink::after{content:"";position:absolute;left:0;top:0;z-index:-1;width:min(1200px,130vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent);transform:translate3d(calc(var(--gx) - 50%),calc(var(--gy) - 50%),0);will-change:transform}
.pal__c.leather::after,.pal__c.ink::after{display:none}
.logo--novo-mundo img{max-height:clamp(54px,13vw,96px)}