/* ══════════════════════════════════════════════
   ABY — Productora Audiovisual
   Estilos principales
   ══════════════════════════════════════════════ */

/* ── Reset & Variables ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }

:root {
  --black: #050505;
  --off:   #0d0d0d;
  --dark:  #171717;
  --white: #f0ebe5;
  --red:   #c8372d;
  --grey:  #5a5a5a;
  --gl:    #909090;
  --fd: 'Bebas Neue', sans-serif;
  --fs: 'Cormorant Garamond', serif;
  --fb: 'DM Sans', sans-serif;
}

html { scroll-behavior: auto }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--fb);
  font-weight: 300;
  cursor: none;
  overflow-x: hidden;
}

/* ── Texture Overlays ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 300px; opacity: .028; mix-blend-mode: overlay;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.45) 100%);
}

/* Z-index base para todas las secciones */
nav, #hero, .mq-wrap, #about, .stext, #services, #clients, #contact, footer {
  position: relative; z-index: 1;
}

/* ── Cursor ── */
.c-el { position: fixed; pointer-events: none; top: 0; left: 0 }
#c-dot {
  width: 6px; height: 6px; background: rgba(240,235,229,.95);
  border-radius: 50%; z-index: 9999; margin: -3px 0 0 -3px;
}
#c-ring {
  width: 44px; height: 44px; border-radius: 50%; z-index: 9996; margin: -22px 0 0 -22px;
  border: 1px solid rgba(240,235,229,.2); overflow: hidden;
  transition: width .5s cubic-bezier(.25,.46,.45,.94),
              height .5s cubic-bezier(.25,.46,.45,.94),
              margin .5s cubic-bezier(.25,.46,.45,.94),
              border-color .4s;
}
#c-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 28%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.5) 100%);
  opacity: 0; transition: opacity .4s; z-index: 1;
}
#c-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(240,235,229,.05) 0%, transparent 50%);
  opacity: 0; transition: opacity .4s; z-index: 2;
}
.ch #c-ring {
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-color: rgba(240,235,229,.07);
  backdrop-filter: blur(3px) brightness(1.06) saturate(1.18);
  -webkit-backdrop-filter: blur(3px) brightness(1.06) saturate(1.18);
  overflow: visible;
}
.ch #c-ring::after  { opacity: 1 }
.ch #c-ring::before { opacity: 1 }
.ch #c-arc { opacity: 1 !important }

/* ── Intro ── */
#intro {
  position: fixed; inset: 0; z-index: 10000; background: transparent;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
#intro-canvas { position: absolute; inset: 0; background: transparent }
#intro-blur {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  backdrop-filter: blur(12px) brightness(.7);
  -webkit-backdrop-filter: blur(12px) brightness(.7);
  transition: opacity .6s ease; opacity: 0;
}
.i-logo {
  position: relative; z-index: 2;
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(8rem,22vw,20rem);
  letter-spacing: .12em; color: var(--white); line-height: 1;
  filter: blur(20px); opacity: 0; transform: scale(1.06);
  text-shadow: 0 0 80px rgba(5,5,5,.9), 0 0 160px rgba(5,5,5,.7);
}
.i-dot {
  position: relative; z-index: 2; display: inline-block;
  width: clamp(10px,2vw,18px); height: clamp(10px,2vw,18px);
  background: var(--red); border-radius: 50%;
  margin-left: 4px; margin-bottom: .12em; vertical-align: bottom; opacity: 0;
}
.i-slogan {
  position: relative; z-index: 2;
  font-family: 'Bodoni Moda', serif; font-style: italic;
  font-size: clamp(1rem,2.2vw,1.8rem); color: rgba(240,235,229,.45);
  letter-spacing: .1em; margin-top: -4px; opacity: 0; filter: blur(8px);
}
.i-line {
  position: relative; z-index: 2;
  width: 0; height: 1px; background: var(--red); margin-top: 28px;
}

/* ── Nav ── */
nav {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; justify-content: space-between; align-items: center;
  padding: 34px 60px; transition: padding .4s, background .4s, backdrop-filter .4s;
}
nav.s { padding: 18px 60px; background: rgba(5,5,5,.92); backdrop-filter: blur(28px) }

.logo { text-decoration: none; display: block }
.logo-top { display: flex; align-items: baseline; gap: 4px }
.logo-aby { font-family: var(--fd); font-size: 2.3rem; letter-spacing: .18em; color: var(--white); line-height: 1 }
.logo-d { display: inline-block; width: 9px; height: 9px; background: var(--red); border-radius: 50%; margin-bottom: 4px }
.logo-u { display: block; height: 1.5px; background: var(--red); margin-top: -2px; transform: scaleX(0); transform-origin: left; transition: transform .4s }
.logo:hover .logo-u { transform: scaleX(1) }

.nav-links { display: flex; gap: 48px; list-style: none }
.nav-links a {
  font-size: .67rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--grey); text-decoration: none; transition: color .3s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav-links a:hover { color: var(--white) }
.nav-links a:hover::after { transform: scaleX(1) }

/* Hamburger — solo mobile */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; z-index: 301; position: relative;
}
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: transform .35s cubic-bezier(.25,.46,.45,.94), opacity .35s }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* Mobile menu overlay */
.mob-menu {
  position: fixed; inset: 0; z-index: 299;
  background: rgba(5,5,5,.97); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 36px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mob-menu.open { opacity: 1; pointer-events: all }
.mob-menu a {
  font-family: var(--fd); font-size: clamp(2.8rem,14vw,4.5rem);
  letter-spacing: .1em; color: rgba(240,235,229,.4); text-decoration: none;
  transition: color .3s; line-height: 1;
}
.mob-menu a:active { color: var(--white) }
.mob-menu-loc { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--grey); margin-top: 24px }

/* ── Hero ── */
#hero { height: 100vh; min-height: 600px; overflow: hidden }

.hframe {
  position: absolute; top: 50%; left: 50%; width: 90vw; aspect-ratio: 16/9; max-height: 84vh;
  transform: translate(-50%,-50%); border: 1px solid rgba(240,235,229,.07);
  overflow: hidden; z-index: 1; will-change: transform, opacity;
}
.hframe-bg {
  position: absolute; inset: -20% 0;
  background: radial-gradient(ellipse at 62% 42%, rgba(200,55,45,.09) 0%, transparent 52%),
              radial-gradient(ellipse at 18% 72%, rgba(240,235,229,.025) 0%, transparent 40%),
              linear-gradient(160deg, #1c1c1c 0%, #0d0d0d 100%);
  will-change: transform;
}
.hframe::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(5,5,5,.8) 0%, rgba(5,5,5,.04) 52%, rgba(5,5,5,.22) 100%),
              linear-gradient(to top, rgba(5,5,5,.97) 0%, transparent 48%);
}
.hframe::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Frame corners */
.fc { position: absolute; width: 20px; height: 20px; z-index: 4 }
.fc::before, .fc::after { content: ''; position: absolute; background: rgba(240,235,229,.25) }
.fc::before { width: 100%; height: 1px; top: 0; left: 0 }
.fc::after  { width: 1px; height: 100%; top: 0; left: 0 }
.fc-tl { top: 14px; left: 14px }
.fc-tr { top: 14px; right: 14px; transform: scaleX(-1) }
.fc-bl { bottom: 14px; left: 14px; transform: scaleY(-1) }
.fc-br { bottom: 14px; right: 14px; transform: scale(-1) }

/* Letterbox bars */
.lb { position: absolute; left: 0; right: 0; background: var(--black); z-index: 2; pointer-events: none }
.lb-t { top: 0 }
.lb-b { bottom: 0 }

/* Hero copy */
.hcopy { position: absolute; z-index: 10; left: 60px; bottom: 12vh; max-width: 680px }
.h-eyebrow {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--red);
  margin-bottom: 16px; display: flex; align-items: center; gap: 14px; opacity: 0;
}
.h-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--red) }
.h-title {
  font-family: var(--fd); font-size: clamp(5.5rem,13vw,11.5rem);
  line-height: .87; letter-spacing: .025em; color: var(--white); opacity: 0;
}
.h-slogan {
  font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem,3.2vw,2.7rem); color: var(--white);
  letter-spacing: .02em; line-height: 1; display: block; margin-top: 6px; opacity: 0;
}
.h-desc {
  margin-top: 24px; font-size: .82rem; letter-spacing: .03em;
  color: var(--gl); line-height: 1.95; max-width: 340px; opacity: 0;
}
.h-actions { margin-top: 40px; display: flex; align-items: center; gap: 32px; opacity: 0 }

.btn-p {
  font-size: .67rem; letter-spacing: .24em; text-transform: uppercase;
  background: var(--white); color: var(--black); padding: 14px 36px;
  text-decoration: none; transition: background .3s, color .3s;
}
.btn-p:hover { background: var(--red); color: var(--white) }

.btn-t {
  font-size: .67rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); text-decoration: none; display: flex; align-items: center; gap: 12px; transition: color .3s;
}
.btn-tl { display: block; width: 32px; height: 1px; background: currentColor; transition: width .3s }
.btn-t:hover { color: var(--white) }
.btn-t:hover .btn-tl { width: 56px }

/* Hero stats */
.hstats {
  position: absolute; z-index: 10; right: 60px; top: 50%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 28px;
  opacity: 0; margin-top: -120px;
}
.hs-i { text-align: right }
.hs-n { font-family: var(--fd); font-size: 2.4rem; color: var(--white); line-height: 1 }
.hs-l { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-top: 4px }
.hs-div { width: 1px; height: 38px; background: rgba(240,235,229,.09) }

/* Hero scroll indicator */
.hscroll {
  position: absolute; z-index: 10; right: 60px; bottom: 11vh;
  display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0;
}
.hscroll-track { width: 1px; height: 64px; background: rgba(240,235,229,.08); position: relative; overflow: hidden }
.hscroll-fill { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--red); animation: fillDrop 2s 2.2s infinite ease-in-out }
.hscroll-lbl { font-size: .55rem; letter-spacing: .26em; text-transform: uppercase; color: var(--grey); writing-mode: vertical-rl }

/* ── Marquee ── */
.mq-wrap {
  border-top: 1px solid rgba(240,235,229,.055); border-bottom: 1px solid rgba(240,235,229,.055);
  padding: 14px 0; overflow: hidden; background: var(--off);
}
.mq-track { display: flex; animation: mq 22s linear infinite; white-space: nowrap }
.mq-i { display: flex; align-items: center; gap: 28px; padding: 0 28px; flex-shrink: 0 }
.mq-i span { font-family: var(--fd); font-size: .78rem; letter-spacing: .28em; color: var(--grey) }
.mq-sep { width: 5px; height: 5px; background: var(--red); transform: rotate(45deg) }

/* ── Section Label ── */
.sec-label {
  display: inline-block; font-family: var(--fb); font-size: .58rem; font-weight: 300;
  letter-spacing: .42em; text-transform: uppercase; color: rgba(240,235,229,.3);
  padding-left: 12px; border-left: 1px solid var(--red); margin-top: 14px;
}

/* ── About ── */
.about-wrap {
  position: relative; overflow: hidden;
}
.about-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(8px) brightness(.15); opacity: .5;
  transform: scale(1.1); /* evita bordes blancos del blur */
}
.about-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 40%, var(--black) 58%),
    linear-gradient(180deg, var(--black) 0%, transparent 15%, transparent 85%, var(--black) 100%);
  z-index: 1;
}
#about {
  position: relative; z-index: 2;
  padding: 160px 60px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 96px; align-items: center; max-width: 1300px; margin: 0 auto;
}
.s-eye {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--red);
  margin-bottom: 24px; display: flex; align-items: center; gap: 14px;
}
.s-eye::before { content: ''; width: 20px; height: 1px; background: var(--red) }

.a-h {
  font-family: var(--fd); font-size: clamp(3.6rem,6.5vw,7rem); font-weight: 400;
  line-height: .95; letter-spacing: .02em; text-transform: uppercase;
  color: var(--white); margin-bottom: 24px;
}
.a-h em {
  font-family: 'Bodoni Moda', serif; font-style: italic; font-size: .88em;
  text-transform: none; letter-spacing: -.01em; color: var(--white); display: block; line-height: 1.05;
}
.a-line2 { display: block; position: relative; height: 1em; line-height: 1; margin-top: -.18em }
.a-flash {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .65em;
  text-transform: none; letter-spacing: -.01em; color: var(--red);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; white-space: nowrap;
}
.a-vos { position: absolute; left: 2.55em; top: 0; z-index: 2; color: var(--white); white-space: nowrap; mix-blend-mode: difference }
.a-sub {
  font-family: var(--fs); font-size: clamp(1.1rem,1.6vw,1.4rem); font-weight: 300;
  font-style: italic; color: rgba(255,255,255,0.38); margin-bottom: 32px; letter-spacing: .01em;
}
.a-p { font-size: .86rem; line-height: 2.1; color: var(--gl); margin-bottom: 18px }

@keyframes wave { 0%,100% { transform: rotate(0deg) } 25% { transform: rotate(20deg) } 75% { transform: rotate(-10deg) } }
.a-wave { display: inline-block; animation: wave 1.4s ease-in-out infinite; transform-origin: 70% 80%; font-style: normal }

.a-stats {
  margin-top: 50px; display: flex; gap: 50px; padding-top: 34px;
  border-top: 1px solid rgba(240,235,229,.07);
}
.sv-n { font-family: var(--fd); font-size: 3rem; color: var(--white); line-height: 1 }
.sv-n sup { font-size: .52em; color: var(--red); vertical-align: super }
.sv-l { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-top: 8px }

.a-vis { position: relative; display: flex; flex-direction: column; gap: 10px }
.av-bts  { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block }
.av-bts2 { width: 100%; aspect-ratio: 4/3;  object-fit: cover; display: block }

/* ── Scroll Text ── */
.stext { overflow: hidden; padding: 52px 0; border-top: 1px solid rgba(240,235,229,.05) }
.stt { display: flex; white-space: nowrap }
.stt-b { margin-top: 10px }
.stt-i { font-family: var(--fd); font-size: clamp(4rem,8vw,7rem); padding: 0 36px; flex-shrink: 0; line-height: 1 }
.stt-i.o { -webkit-text-stroke: 1px rgba(240,235,229,.1); color: transparent }
.stt-i.f { color: rgba(240,235,229,.05) }

/* ── Services ── */
#services { padding: 0 }
#svc-pin { position: relative; height: 500vh }
#svc-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #080808 }

/* BG video */
#svc-bg-vid {
  position: absolute; inset: -10%; width: 120%; height: 120%;
  object-fit: cover; filter: blur(40px) brightness(.3) saturate(1.3);
  z-index: 0; opacity: 0; transition: opacity 1.2s ease;
}
#svc-bg-vid.loaded { opacity: 1 }

/* Snap flash — pulso visual al cambiar de panel */
@keyframes svc-flash-in {
  0%   { opacity: 1 }
  30%  { opacity: .6 }
  100% { opacity: 1 }
}
#svc-sticky.svc-flash {
  animation: svc-flash-in .5s ease-out;
}
/* Salto rápido — efecto más dramático */
@keyframes svc-fast-shift {
  0%   { transform: scale(1) }
  30%  { transform: scale(.985) }
  100% { transform: scale(1) }
}
#svc-sticky.svc-fast > .svc-vp.active {
  animation: svc-fast-shift .5s cubic-bezier(.25,.46,.45,.94);
}

/* Video panels */
.svc-vp {
  position: absolute; inset: 0; opacity: 0; z-index: 1;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 16px 32px 16px 30%; pointer-events: none;
  transform: scale(1.04); filter: blur(6px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1),
              transform .9s cubic-bezier(.25,.46,.45,.94),
              filter .7s cubic-bezier(.4,0,.2,1);
}
.svc-vp.active { opacity: 1; pointer-events: auto; transform: scale(1); filter: blur(0px) }

/* Progress bar */
#svc-progress {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 30vh; background: rgba(240,235,229,.06);
  z-index: 2; border-radius: 1px; overflow: hidden;
}
#svc-progress-fill { width: 100%; height: 0%; background: var(--red); border-radius: 1px; transition: height .15s linear }

/* Video wrappers */
.svc-vid-wrap {
  position: relative; flex: none; height: 69svh; aspect-ratio: 9/16;
  border-radius: 16px; overflow: hidden;
  transform: translateY(30px); opacity: 0;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94), opacity .7s ease;
}
.svc-vp.active .svc-vid-wrap { transform: translateY(0); opacity: 1 }
.svc-vp.active .svc-vid-wrap:nth-child(1) { transition-delay: 0s }
.svc-vp.active .svc-vid-wrap:nth-child(2) { transition-delay: .12s }
.svc-vp.active .svc-vid-wrap:nth-child(3) { transition-delay: .24s }

.svc-vid-wrap video { width: 100%; height: 100%; object-fit: cover; display: block }

/* Video hover label */
.svc-vid-label {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px 16px;
  background: linear-gradient(to top, rgba(5,5,5,.85) 0%, rgba(5,5,5,.15) 40%, transparent 100%);
  opacity: 0; transition: opacity .4s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.svc-vid-wrap:hover .svc-vid-label { opacity: 1 }
.svc-vid-name {
  font-family: var(--fs); font-size: 1rem; font-weight: 300;
  color: var(--white); letter-spacing: .02em;
  transform: translateY(8px); transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.svc-vid-wrap:hover .svc-vid-name { transform: translateY(0) }

/* YouTube slider */
#svc-yt { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative }
.yt-slider { width: 100%; position: relative }
.yt-slide { display: none; width: 100% }
.yt-slide.active { display: block }
.yt-slide iframe { width: 100%; aspect-ratio: 16/9; max-height: 65svh; border-radius: 16px; border: none; display: block }
.yt-nav { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px }
.yt-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(240,235,229,.25); cursor: pointer; transition: background .3s, transform .3s }
.yt-dot.active { background: var(--white); transform: scale(1.3) }
.yt-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(8,8,8,.7); border: 1px solid rgba(240,235,229,.2);
  color: var(--white); width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: background .2s; z-index: 15; backdrop-filter: blur(4px);
}
.yt-arr:hover { background: rgba(200,50,50,.8) }
.yt-prev { left: 10px }
.yt-next { right: 10px }

/* Services text overlay */
#svc-left {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 44%; padding: 0 6% 0 8%;
}
#svc-txts { position: relative; min-height: 260px }
.svc-txt {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; transform: translateY(30px) scale(.97);
  filter: blur(4px);
  transition: opacity .45s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.25,.46,.45,.94),
              filter .45s ease;
  pointer-events: none;
}
.svc-txt.active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); pointer-events: auto }
#svc-dots-left { display: flex; gap: 10px; align-items: center; margin-top: 44px }
.svc-dot { width: 20px; height: 1px; background: rgba(240,235,229,.2); transition: all .5s ease; cursor: pointer }
.svc-dot.active { width: 44px; background: var(--red) }
.svc-counter { font-family: var(--fd); font-size: .9rem; letter-spacing: .2em; color: var(--grey); margin-top: 14px }
.svc-counter span { color: var(--white) }
.svc-sent { position: absolute; left: 0; right: 0; height: 100vh; pointer-events: none; visibility: hidden }
.svc-tag { font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--red); margin-bottom: 16px }
.svc-line { width: 0; height: 1px; background: var(--red); margin-bottom: 28px; transition: width .9s cubic-bezier(.25,.46,.45,.94) }
.svc-txt.active .svc-line { width: 60px }
.svc-name {
  font-family: var(--fd); font-size: clamp(3rem,5.5vw,5.5rem); font-weight: 400;
  letter-spacing: .02em; text-transform: uppercase; color: var(--white);
  margin-bottom: 18px; line-height: .9;
}
.svc-name em {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .72em;
  text-transform: none; letter-spacing: -.01em; color: var(--red);
  display: block; line-height: 1.15; margin-top: .08em;
}
.svc-desc { font-size: .88rem; line-height: 2; color: var(--gl); max-width: 420px }

/* ── Clients ── */
#clients { padding: 60px 60px 50px; background: var(--off); text-align: center }
.cl-eye { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--grey); margin-bottom: 36px }
.cl-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 52px; max-width: 960px; margin: 0 auto }
.cl-n {
  font-family: var(--fd); font-size: 1.05rem; letter-spacing: .18em;
  color: rgba(240,235,229,.18); transition: color .4s; cursor: default;
}
.cl-n:hover { color: var(--white) }

/* ── Contact ── */
#contact { padding: 80px 0 160px; text-align: center; position: relative }
#ct-torch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .7 }
#ct-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
  transition: background .15s ease;
}
.ct-center { padding: 60px 60px 0; position: relative; z-index: 3 }
.ct-eye {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--red);
  margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 16px;
}
.ct-eye::before, .ct-eye::after { content: ''; width: 26px; height: 1px; background: var(--red) }
.ct-title {
  font-family: var(--fs); font-size: clamp(2.8rem,5.5vw,5rem); font-weight: 300;
  line-height: 1.4; color: var(--white); margin-bottom: 48px;
}
.ct-title em { font-style: italic }

/* Rotating phrase */
#ct-phrase-wrap { display: inline-block; vertical-align: bottom; max-width: 42vw; overflow: hidden }
.ct-hl {
  font-family: 'Bodoni Moda', serif; font-style: italic; color: var(--red);
  display: inline-block;
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
}
.ct-hl.fade { opacity: 0; transform: translateY(-60%); filter: blur(6px) }

.ct-link {
  font-family: var(--fd); font-size: clamp(1.3rem,3.2vw,2.6rem);
  letter-spacing: .12em; color: var(--white); text-decoration: none;
  border-bottom: 1px solid rgba(240,235,229,.18); padding-bottom: 10px;
  transition: color .3s, border-color .3s; position: relative; z-index: 1;
}
.ct-link:hover { color: var(--red); border-color: var(--red) }
.ct-loc { margin-top: 48px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey) }

/* ── Footer ── */
footer {
  padding: 40px 60px; border-top: 1px solid rgba(240,235,229,.05);
  display: flex; justify-content: space-between; align-items: center;
}
.fl-l { display: flex; align-items: baseline; gap: 4px }
.fl-lt { font-family: var(--fd); font-size: 1.4rem; letter-spacing: .18em }
.fl-ld { width: 7px; height: 7px; background: var(--red); border-radius: 50%; margin-bottom: 3px }
.fl-copy { font-size: .65rem; letter-spacing: .08em; color: rgba(240,235,229,.2) }
.fl-ig a {
  font-size: .63rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); text-decoration: none; transition: color .3s;
}
.fl-ig a:hover { color: var(--white) }

/* ── Keyframes ── */
@keyframes mq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes fillDrop { 0% { top: -100% } 50% { top: 0% } 100% { top: 100% } }


/* ══════════════════════════════════════════════
   MOBILE — max-width: 768px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Cursor — oculto en mobile */
  body { cursor: auto; overflow-x: hidden }
  #c-dot, #c-ring { display: none }

  /* ── Nav ── */
  nav { padding: 20px 24px }
  nav.s { padding: 14px 24px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,5,5,.97) }
  .nav-links { display: none }
  .nav-burger { display: flex }

  /* ── Intro ── */
  .i-logo { font-size: clamp(5rem,24vw,8rem) }
  .i-slogan { font-size: clamp(.9rem,4vw,1.3rem) }

  /* ── Hero ── */
  #hero { height: 100svh; overflow: hidden }
  .hframe {
    width: 100%; height: 100%; max-height: none;
    border: none; top: 50%; left: 50%; transform: translate(-50%,-50%);
  }
  .lb, .fc { display: none }
  .hframe::before {
    background:
      linear-gradient(to top, rgba(5,5,5,.97) 0%, rgba(5,5,5,.4) 42%, transparent 68%),
      linear-gradient(to right, rgba(5,5,5,.55) 0%, transparent 55%);
  }
  .hcopy { left: 24px; right: 24px; bottom: 10svh; max-width: 100% }
  .h-eyebrow { font-size: .54rem; letter-spacing: .24em; margin-bottom: 12px }
  .h-title { font-size: clamp(4.2rem,19vw,6.5rem); line-height: .88 }
  .h-slogan { font-size: clamp(1.1rem,5vw,1.6rem) }
  .h-desc { font-size: .8rem; max-width: 100%; line-height: 1.95; margin-top: 16px }
  .h-actions { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px }
  .btn-p { padding: 14px 30px; font-size: .62rem; letter-spacing: .2em }
  .btn-t { font-size: .62rem }
  .hstats, .hscroll { display: none }

  /* ── Marquee ── */
  .mq-i span { font-size: .7rem; letter-spacing: .2em }

  /* ── About ── */
  #about {
    grid-template-columns: 1fr; padding: 80px 24px 64px;
    gap: 40px; max-width: none;
  }
  .s-eye { font-size: .55rem; margin-bottom: 16px }
  .a-h { font-size: clamp(1.9rem,7.5vw,2.8rem); margin-bottom: 20px; line-height: 1.18 }
  .a-p { font-size: .82rem; line-height: 2; margin-bottom: 14px }
  .a-stats {
    margin-top: 36px; padding-top: 24px;
    flex-direction: row; justify-content: space-between; flex-wrap: nowrap; gap: 0;
  }
  .sv-n { font-size: 2.2rem; line-height: 1 }
  .sv-l { font-size: .52rem; letter-spacing: .15em; margin-top: 6px }

  /* About videos — stack vertical, sin recorte */
  .a-vis {
    display: flex; flex-direction: column; gap: 10px;
  }
  .av-bts  { width: 100%; aspect-ratio: 16/9; object-fit: contain; border-radius: 6px }
  .av-bts2 { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 6px }

  /* ── Scroll Text ── */
  .stext { padding: 32px 0 }
  .stt-i { font-size: clamp(2.8rem,11vw,4.5rem); padding: 0 18px }

  /* ── Services — layout mobile completo ── */
  #svc-pin { height: auto !important }
  #svc-sticky {
    position: relative !important; height: auto !important;
    overflow: visible; background: transparent;
  }

  /* Ocultar elementos de desktop */
  #svc-bg-vid { display: none }
  .svc-sent { display: none }
  #svc-progress { display: none }
  #svc-dots-left { display: none }
  .svc-counter { display: none }

  /* Texto de servicios — centrado en mobile */
  #svc-left {
    position: relative !important; transform: none !important; top: auto;
    width: 100%; padding: 48px 24px 24px; background: none;
    text-align: center;
  }
  .s-eye { display: inline-flex; align-items: center; gap: 10px }
  #svc-txts { min-height: auto; position: relative; overflow: hidden }
  .svc-txt {
    position: relative !important; top: auto !important; left: auto !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
    pointer-events: auto !important;
    display: none; /* ocultar todos por defecto */
  }
  .svc-txt.active { display: block }
  .svc-tag { font-size: .54rem; letter-spacing: .24em }
  .svc-line { width: 28px !important; margin: 0 auto 16px }
  .svc-name { font-size: clamp(2rem,7vw,2.8rem); margin-bottom: 14px; line-height: 1 }
  .svc-desc { font-size: .83rem; line-height: 2; max-width: 100%; margin: 0 auto }

  /* Animación de entrada del texto al cambiar panel */
  @keyframes svcTextIn {
    from { opacity: 0; transform: translateY(16px) }
    to   { opacity: 1; transform: translateY(0) }
  }
  .svc-txt.active { animation: svcTextIn .45s ease-out }

  /* Paneles de video — cada uno es una fila horizontal scrollable */
  .svc-vp {
    position: relative !important; inset: auto !important;
    opacity: 1 !important; pointer-events: auto !important;
    transform: none !important; filter: none !important;
    display: none; /* ocultar paneles inactivos */
    flex-direction: row; flex-wrap: nowrap;
    gap: 12px; padding: 0 24px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: auto; min-height: auto;
  }
  .svc-vp.active { display: flex }

  /* Ocultar scrollbar pero mantener funcionalidad */
  .svc-vp::-webkit-scrollbar { display: none }
  .svc-vp { scrollbar-width: none }

  /* Videos 9:16 completos, sin recorte */
  .svc-vid-wrap {
    flex: none;
    width: 60vw;
    height: auto;
    aspect-ratio: 9/16;
    border-radius: 12px;
    scroll-snap-align: center;
    transform: none !important; opacity: 1 !important;
    transition: none !important;
  }
  .svc-vid-wrap video {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* Mostrar TODOS los videos, no solo el primero */
  .svc-vid-wrap:not(:first-child) { display: block }

  /* Label siempre visible en mobile (no hay hover) */
  .svc-vid-label { opacity: 1 }
  .svc-vid-name { transform: translateY(0) }

  /* YouTube — adaptar al mobile */
  #svc-yt { padding: 0 24px; width: 100% }
  .yt-slide iframe { width: 100%; aspect-ratio: 16/9; max-height: none; border-radius: 12px }
  .yt-arr { display: none }

  /* Navegación entre servicios — flechas + dots mobile */
  .svc-mob-nav {
    display: flex; justify-content: center; align-items: center; gap: 16px;
    padding: 24px 24px 8px;
  }
  .svc-mob-arrow {
    background: none; border: 1px solid rgba(240,235,229,.2);
    color: var(--white); width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; cursor: pointer; transition: all .3s ease;
    flex-shrink: 0; padding: 0;
  }
  .svc-mob-arrow:active { background: var(--red); border-color: var(--red); transform: scale(.92) }
  .svc-mob-arrow.disabled { opacity: .2; pointer-events: none }
  .svc-mob-dots {
    display: flex; align-items: center; gap: 6px;
  }
  .svc-mob-dot {
    width: 28px; height: 2px; border-radius: 1px;
    background: rgba(240,235,229,.15); border: none;
    cursor: pointer; transition: all .3s ease; padding: 0;
  }
  .svc-mob-dot.active { width: 48px; background: var(--red) }

  /* ── Clients ── */
  #clients { padding: 56px 24px 48px }
  .cl-eye { font-size: .56rem; margin-bottom: 28px }
  .cl-row { gap: 8px 24px }
  .cl-n { font-size: .84rem; padding: 6px 2px; letter-spacing: .15em }

  /* ── Contact ── */
  #ct-torch, #ct-vignette { display: none !important }
  #contact {
    padding: 72px 0 88px;
    background: linear-gradient(160deg, var(--off) 0%, var(--black) 58%);
    position: relative;
  }
  #contact::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 2px; background: var(--red);
  }
  .ct-center { padding: 56px 24px 0; position: relative; z-index: 3 }
  .ct-eye { font-size: .55rem; letter-spacing: .24em; margin-bottom: 18px }
  .ct-eye::before, .ct-eye::after { width: 16px }
  .ct-title { font-size: clamp(2rem,7.8vw,3rem); line-height: 1.38; margin-bottom: 40px }
  #ct-phrase-wrap { max-width: 64vw }
  .ct-link {
    font-size: clamp(.9rem,4.5vw,1.4rem); letter-spacing: .05em;
    border-bottom-color: rgba(240,235,229,.22); display: inline-block; padding-bottom: 10px;
  }
  .ct-loc { font-size: .57rem; margin-top: 32px; letter-spacing: .14em }

  /* ── Footer ── */
  footer { flex-direction: column; gap: 12px; text-align: center; padding: 28px 24px }
  .fl-copy { font-size: .57rem }
}