/* ===== Tokens ===== */
:root{
  --bg:#09060f; --surface:#120d1b; --surface-2:#1c1428;
  --line:rgba(226,211,255,.1); --text:#f4efff; --muted:#b0a2c5;
  --accent:#a88aff; --accent-2:#d0a6ff; --accent-3:#e1c4ff; --accent-turquoise:#63d8c8; --glow:rgba(168,138,255,.42);
  --radius:18px; --pad:clamp(1.25rem,5vw,4rem); --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font:400 1rem/1.65 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:.9rem var(--pad);background:rgba(9,6,15,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);transition:background .3s}
.header.scrolled{background:rgba(9,6,15,.88)}
.logo{font-weight:700;letter-spacing:-.02em;font-size:1.15rem}
.nav{position:fixed;inset:60px 0 auto 0;display:flex;flex-direction:column;gap:1.2rem;padding:1.5rem var(--pad);
  background:rgba(9,6,15,.96);backdrop-filter:blur(16px);transform:translateY(-130%);transition:transform .35s ease}
.nav.open{transform:none}
.nav a{color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--text)}
.nav-cta{color:var(--text)!important}
.menu-btn{background:none;border:0;width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.menu-btn span{height:2px;background:var(--text);transition:transform .3s}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ===== Botones ===== */
.btn{display:inline-flex;justify-content:center;align-items:center;padding:.9rem 1.7rem;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .25s,box-shadow .25s,background .25s}
.btn-primary{background:var(--text);color:#10091b;box-shadow:0 0 0 0 var(--glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px var(--glow)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100svh;display:grid;gap:2.5rem;align-items:center;padding:7rem var(--pad) 4rem;max-width:var(--max);margin:auto}
.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:-1}
.glow-a{width:420px;height:420px;background:var(--glow);top:10%;right:-10%;opacity:.55}
h1{font-size:clamp(2.2rem,7vw,4.4rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;max-width:16ch}
.lead{color:var(--text);font-size:clamp(1rem,2.2vw,1.2rem);max-width:46ch;margin:1.4rem 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-text{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ===== Secciones ===== */
.section{max-width:var(--max);margin:auto;padding:5rem var(--pad)}
.section-head{margin-bottom:2.5rem;max-width:56ch}
h2{font-size:clamp(1.8rem,4.5vw,2.8rem);letter-spacing:-.03em;line-height:1.1;font-weight:700}
.section-head p{color:var(--muted);margin-top:.9rem}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}

/* ===== Portafolio ===== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;grid-auto-flow:dense}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;cursor:pointer}
.card.tall{aspect-ratio:9/16}
.thumb,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card-info{position:absolute;inset:auto 0 0 0;padding:1.2rem;background:linear-gradient(transparent,rgba(0,0,0,.85));
  opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.card-info span{color:var(--muted);font-size:.85rem}
.card:hover .thumb,.card:hover video{transform:scale(1.05)}
.card:hover .card-info{opacity:1;transform:none}
@media (hover:none){.card-info{opacity:1;transform:none}} /* en táctil el título siempre visible */

/* ===== Proceso ===== */
.process{display:grid;gap:2.5rem}
.process-video{position:relative;width:min(100%,360px);margin:auto;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#09060f;border:1px solid var(--line);box-shadow:0 0 90px -25px var(--glow)}
.process-video video{width:100%;height:100%;object-fit:cover}
.sound-btn{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:rgba(9,6,15,.78);backdrop-filter:blur(10px);color:var(--text);font:500 .85rem 'Inter',sans-serif;cursor:pointer}
.process-text p{color:var(--muted);margin:1rem 0 1.5rem}
.steps{list-style:none;display:grid;gap:1.1rem}
.steps li{padding-left:1.1rem;border-left:2px solid rgba(168,138,255,.48)}
.steps p{margin:.2rem 0 0;font-size:.95rem}

/* ===== Modal ===== */
.modal{margin:auto;padding:0;border:0;background:#09060f;border-radius:18px;overflow:hidden;max-width:min(92vw,420px);max-height:92vh;}
.modal::backdrop{background:rgba(9,6,15,.94)} /* sin blur: el blur sobre video causa tirones */
.modal video{display:block;width:100%;max-height:92vh}
.modal-close{position:absolute;top:.6rem;right:.6rem;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(9,6,15,.78);color:#f4efff;font-size:1.4rem;cursor:pointer}

/* ===== Servicios ===== */
.services{display:grid;gap:1rem}
.service{padding:2rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.service p{color:var(--muted);margin-top:.7rem}

/* ===== Testimonios ===== */
.testimonials{display:grid;gap:1rem}
.testi{padding:2rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.metric{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.metric-label{color:var(--muted);font-size:.9rem;margin:.4rem 0 1.3rem}
blockquote{font-size:1rem;color:var(--text)}
figcaption{color:var(--muted);font-size:.85rem;margin-top:1rem}

/* ===== Contacto ===== */
.contact{position:relative}

/* ===== Footer ===== */
.footer{display:flex;flex-direction:column;gap:1rem;padding:2.5rem var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer a:hover{color:var(--text)}

/* ===== Animación de entrada (Intersection Observer) ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* ===== Tablet / Desktop ===== */
@media (min-width:768px){
  .menu-btn{display:none}
  .nav{position:static;flex-direction:row;align-items:center;gap:2rem;padding:0;background:none;backdrop-filter:none;transform:none}
  .nav-cta{padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;transition:background .25s}
  .nav-cta:hover{background:var(--surface-2)}
  .hero{grid-template-columns:1.2fr .8fr}
  .grid{grid-template-columns:repeat(3,1fr)}
  .process{grid-template-columns:.8fr 1.2fr;align-items:center}
  .services,.testimonials{grid-template-columns:repeat(3,1fr)}
  .footer{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ===== Accesibilidad: reduce movimiento ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ===== Invitación a hacer clic en las tarjetas ===== */
.play-badge{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;
  background:rgba(248,242,255,.94);color:#10091b;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.play-badge::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(226,211,255,.78);opacity:0}
.card:hover .play-badge,.card:focus-visible .play-badge{opacity:1;transform:scale(1)}
.card:hover .play-badge::after{animation:ring 1.6s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.cta-hint{display:block;margin-top:.5rem;font-style:normal;font-size:.85rem;font-weight:600;color:var(--accent)}
.modal-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);pointer-events:none}
.modal-loading[hidden]{display:none}
@media (hover:none){.play-badge{opacity:.9;transform:none;width:48px;height:48px;margin:-24px 0 0 -24px}}

/* ================= Efectos de superficie: fondo, brillos y bordes de luz ================= */
/* Fondo aurora (solo transform: liviano para la GPU) */
body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 20% 25%,rgba(168,138,255,.24),transparent 70%),
             radial-gradient(35% 35% at 80% 20%,rgba(208,166,255,.2),transparent 70%),
             radial-gradient(40% 40% at 60% 85%,rgba(137,92,202,.16),transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(4%,3%,0) rotate(8deg) scale(1.1)}}

/* Barra de progreso */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3))}

/* Titular palabra por palabra */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;transform:translateY(110%);animation:wordUp .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*80ms + 200ms)}
@keyframes wordUp{to{transform:none}}

/* CTA principal con brillo que recorre el botón */
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(120deg,#fffaff,#e9ddff);box-shadow:0 0 30px -6px var(--glow)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(168,138,255,.5),transparent);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{to{left:130%}}

/* Reel con borde de luz giratorio */
.process-video{transition:transform .25s ease-out;will-change:transform}


/* Luz que sigue al cursor */
.service,.testi,.booking-info li,.how li,.faq details,.card,.shot{position:relative;overflow:hidden}
.service::before,.testi::before,.booking-info li::before,.how li::before,.faq details::before,.card::before,.shot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(184,146,255,.4),transparent 72%)}
.service:hover::before,.testi:hover::before,.booking-info li:hover::before,.how li:hover::before,.faq details:hover::before,.faq details:focus-within::before,.card:hover::before,.card:focus-within::before,.shot:hover::before,.shot:focus-visible::before{opacity:1}
.card-info,.play-badge{z-index:2}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  box-shadow:inset 0 0 0 1px rgba(196,160,255,.65),inset 0 -80px 80px -60px rgba(168,138,255,.4)}
.card:hover::after{opacity:1}
h2{background:linear-gradient(180deg,#fffaff,#cbb8e8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Reserva de llamada (Calendly) ===== */
.booking{display:grid;gap:1.25rem;align-items:start}
.booking-side{display:grid;gap:1rem;align-content:start}
.booking-info{list-style:none;display:grid;gap:1rem}
.booking-info li{padding:1.3rem 1.5rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.booking-info p{color:var(--muted);font-size:.92rem}
.booking-frame{width:100%;min-width:0;height:680px;min-height:0;transition:height .35s ease;margin:0;padding:0;overflow:hidden;background:transparent!important;border:0!important;box-shadow:none!important}
#bookingFrame .calendly-inline-widget{width:100%;min-width:320px;height:100%!important;margin:0;padding:0;background:transparent!important;border:0!important;box-shadow:none!important}
#bookingFrame iframe{display:block;width:100%;border:0}
@media (min-width:900px){.booking{grid-template-columns:.7fr 1.3fr;gap:1rem}.contact{padding-top:3rem}.contact .section-head{margin-bottom:0}}


@media (prefers-reduced-motion:reduce){
  .split .w>span{transform:none}
  body::before,.btn-primary::after{animation:none!important}
}

/* ===== Galería de diseño: escenarios uniformes ===== */
.case{color:var(--accent)!important;font-weight:500;font-size:.95rem}
#diseno{position:relative;isolation:isolate}
/* Motivo de fondo de la sección: puntos que se desvanecen + resplandor cálido */
#diseno::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 60%,rgba(168,138,255,.13),transparent 70%),
             radial-gradient(rgba(226,211,255,.1) 1px,transparent 1.5px) 0 0/22px 22px;
  -webkit-mask:radial-gradient(75% 70% at 50% 55%,#000,transparent);mask:radial-gradient(75% 70% at 50% 55%,#000,transparent)}
.showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.shot{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;cursor:zoom-in;
  transition:opacity .8s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
/* Escenario: halo violeta + anillos concéntricos + suelo luminoso */
.stage{aspect-ratio:4/5;
  background:
    radial-gradient(60% 40% at 50% 100%,rgba(168,138,255,.24),transparent 70%),
    radial-gradient(55% 45% at 50% 40%,rgba(137,92,202,.2),transparent 72%),
    linear-gradient(180deg,#1b1226,#0a0710)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 42%,transparent 0 46px,rgba(208,166,255,.14) 47px 48px);
  -webkit-mask:radial-gradient(60% 55% at 50% 42%,#000,transparent);mask:radial-gradient(60% 55% at 50% 42%,#000,transparent)}
.stage img{position:relative;width:100%;height:100%;object-fit:contain;padding:1rem;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.stage:nth-child(3){grid-column:span 2;aspect-ratio:16/10}
.stage:hover img,.stage:focus-visible img{transform:translateY(-10px) scale(1.05)}
.flyers{display:grid;gap:1rem;margin-top:1rem}
.flyer img{display:block;width:100%;height:auto;transition:transform .6s}
.flyer:hover img{transform:scale(1.04)}
@media (min-width:768px){
  .showcase{grid-template-columns:repeat(6,1fr);gap:1.2rem}
  .stage{grid-column:span 2}
  .stage:nth-child(3){grid-column:span 2;aspect-ratio:4/5}
  .stage:nth-child(n+4){grid-column:span 3;aspect-ratio:3/2}
  .flyers{grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}
}
.lightbox{margin:auto;padding:0;border:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
.lightbox::backdrop{background:rgba(0,0,0,.92)}
.lightbox img{display:block;max-width:94vw;max-height:92vh;border-radius:14px;cursor:zoom-out}

/* ===== Pasos (secuencia real, por eso van numerados) ===== */
.how{list-style:none;display:grid;gap:1rem}
.how li{padding:1.8rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.how-n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:1rem;border-radius:50%;font-weight:700;color:#10091b;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.how p{color:var(--muted);margin-top:.6rem}
@media (min-width:768px){.how{grid-template-columns:repeat(3,1fr)}}

/* ===== FAQ ===== */
.faq{max-width:760px;display:grid;gap:.8rem}
.faq details{border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:border-color .3s}
.faq details[open]{border-color:rgba(168,138,255,.52)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.2rem;color:var(--muted);animation:rise .4s ease both}

/* ===== Botón flotante de WhatsApp (fijo en todo el scroll) ===== */
.wa{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:45;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#9c69df;color:#fffaff;box-shadow:0 8px 24px rgba(4,1,8,.5);transition:transform .25s,box-shadow .25s}
.wa:hover,.wa:focus-visible{transform:scale(1.08);box-shadow:0 8px 30px rgba(156,105,223,.52)}
.wa-tip{position:absolute;right:calc(100% + .7rem);padding:.45rem .8rem;border-radius:999px;background:rgba(15,17,23,.92);border:1px solid var(--line);
  color:var(--text);font-size:.82rem;font-weight:500;white-space:nowrap;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .25s}
@media (hover:hover){.wa:hover .wa-tip,.wa:focus-visible .wa-tip{opacity:1;transform:none}}

/* ===== Hero con video de fondo ===== */
.hero{isolation:isolate}
.hero-bg{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;overflow:hidden;background:#09060f}
.hero-bg video{width:100%;height:100%;object-fit:cover;object-position:center}
/* Capa oscura: protege la lectura del titular y funde el video con el resto de la página */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,6,15,.9) 0%,rgba(9,6,15,.7) 50%,rgba(9,6,15,.42) 100%),
             linear-gradient(180deg,rgba(9,6,15,.52) 0%,transparent 25%,transparent 60%,var(--bg) 100%)}
@media (max-width:767px){.hero-bg::after{background:linear-gradient(180deg,rgba(9,6,15,.82),rgba(9,6,15,.74) 60%,var(--bg))}}

/* ===== Trío de trabajos en el hero (reemplaza al video pequeño) ===== */
.hero-stack{position:relative;width:min(100%,320px);aspect-ratio:3/4;margin:auto;animation:rise 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
.stack-card{position:absolute;top:50%;left:50%;width:58%;aspect-ratio:9/16;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(226,211,255,.2);border-radius:18px;background:#100b19;box-shadow:0 24px 60px -12px rgba(4,1,8,.78);
  transform:translate(-50%,-50%) translateX(var(--x)) rotate(var(--r)) scale(var(--s));
  transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.stack-card img{display:block;width:100%;height:100%;object-fit:cover}
.s-left{--x:-48%;--r:-9deg;--s:.88;z-index:1}
.s-right{--x:48%;--r:9deg;--s:.88;z-index:1}
.s-center{--x:0%;--r:0deg;--s:1;z-index:2;border-color:rgba(196,160,255,.58);box-shadow:0 24px 70px -10px rgba(4,1,8,.82),0 0 60px -15px var(--glow)}
.hero-stack:hover .s-left{--x:-62%;--r:-13deg}
.hero-stack:hover .s-right{--x:62%;--r:13deg}
.s-center:hover{--s:1.05}
.stack-card:hover .play-badge,.stack-card:focus-visible .play-badge{opacity:1;transform:scale(1)}
.s-center .play-badge{opacity:.9;transform:scale(1)} /* el del centro siempre invita a tocar */
@media (hover:none){.stack-card .play-badge{width:44px;height:44px;margin:-22px 0 0 -22px}}

/* ================= Acabado editorial: tipografía, numeración y textura ================= */
[hidden]{display:none!important}
html{overflow-x:clip}
/* Palabra de acento en serif cursiva */
em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:0;
  background:linear-gradient(100deg,var(--accent),var(--accent-2) 55%,var(--accent-turquoise));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
h1{font-weight:600;letter-spacing:-.04em}
/* Numeración editorial de secciones */
main{counter-reset:sec}
.section-head{counter-increment:sec}
.section-head::before{content:"0" counter(sec) "  /";display:block;margin-bottom:1rem;color:var(--muted);font-size:.8rem;letter-spacing:.16em;font-variant-numeric:tabular-nums}
/* Grano de película (muy sutil) para dar textura premium */
body::after{content:"";position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Líneas de luz en bordes de tarjetas y separadores */
.service,.testi,.how li,.faq details,.booking-info li{background:linear-gradient(160deg,rgba(226,211,255,.045),var(--surface) 40%)}
.service,.testi,.booking-info li,.how li,.faq details,.card,.shot{transition:opacity .8s ease,transform .3s,border-color .3s,box-shadow .3s}
.service:hover,.testi:hover,.booking-info li:hover,.how li:hover,.faq details:hover,.card:hover,.card:focus-within,.shot:hover,.shot:focus-visible{transform:translateY(-4px);border-color:rgba(226,211,255,.24)}
.section+.section{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(168,138,255,.3),transparent) 1}
.header{border-bottom-color:transparent;box-shadow:0 1px 0 rgba(226,211,255,.08)}
.logo{font-size:1.2rem;letter-spacing:-.03em}
.nav a{position:relative}
@media (min-width:768px){.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
  .nav a:not(.nav-cta):hover::after{transform:scaleX(1)}}

/* ================= Mejoras para celular ================= */
@media (max-width:767px){
  .header{padding:.55rem var(--pad)}
  .menu-btn{width:44px;height:44px}
  .nav{inset:56px 0 auto 0;gap:0;padding:.5rem var(--pad) 1rem}
  .nav a{padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav-cta{border-bottom:0!important}
  .section{padding:3.5rem var(--pad)}
  .section-head{margin-bottom:1.8rem}
  /* Hero: texto primero, trío más compacto, botones a ancho completo */
  .hero{min-height:auto;gap:2.2rem;padding:6.2rem var(--pad) 3rem}
  h1{font-size:clamp(2.1rem,10.5vw,2.8rem);max-width:none}
  .lead{margin:1.1rem 0 1.6rem}
  .hero-actions .btn{flex:1 1 100%}
  .hero-stack{width:min(76%,250px)}
  /* Portafolio: carrusel horizontal con snap (se desliza con el dedo) */
  .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;margin-inline:calc(var(--pad)*-1);padding:0 var(--pad) .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .grid::-webkit-scrollbar{display:none}
  .grid .card{flex:0 0 68%;scroll-snap-align:center}
  .process{gap:2rem}
  .process-video{width:min(86%,300px)}
  .service,.testi,.how li{padding:1.5rem}
  .modal{max-width:94vw;max-height:92dvh}
  .modal video{max-height:92dvh}
  .wa{width:48px;height:48px;right:.8rem}
  .footer{padding-bottom:5rem}
}
@media (max-width:380px){.hero-actions .btn,.btn{padding:.85rem 1.2rem}}

/* ================= Motion graphics: intro, tipografía cinética y cursor ================= */
:root{--t0:0s} /* retraso base de las animaciones del hero */
.intro-on{--t0:1.95s}

/* --- Intro: palabras que suben + 3 cortinas de color que revelan la página --- */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#09060f;overflow:hidden;animation:introGone 0s linear 2.55s forwards}
@keyframes introGone{to{visibility:hidden}}
.intro-words{display:grid;justify-items:center;gap:.1em;animation:fadeUp .4s ease 1.5s forwards}
.iw{display:block;overflow:hidden;padding:.06em .2em .12em;line-height:1}
.iw b{display:block;font-size:clamp(2.6rem,11vw,6.5rem);font-weight:700;letter-spacing:-.045em;transform:translateY(115%);animation:wordUp .75s cubic-bezier(.2,.8,.2,1) forwards}
.iw:nth-child(1) b{animation-delay:.12s}.iw:nth-child(2) b{animation-delay:.38s}.iw:nth-child(3) b{animation-delay:.64s}
@keyframes fadeUp{to{opacity:0;transform:translateY(-14px)}}
.intro-panel{position:absolute;top:0;bottom:0;width:34%;background:#09060f;box-shadow:0 34px 0 var(--accent);animation:panelUp .8s cubic-bezier(.76,0,.24,1) forwards}
.p1{left:0;animation-delay:1.65s}
.p2{left:33%;box-shadow:0 34px 0 var(--accent-2);animation-delay:1.75s}
.p3{left:66%;box-shadow:0 34px 0 var(--accent-3);animation-delay:1.85s}
@keyframes panelUp{to{transform:translateY(calc(-100% - 50px))}}
/* El fondo del intro deja paso a los paneles */
.intro{animation:introBg 0s linear 1.6s forwards,introGone 0s linear 2.7s forwards}
@keyframes introBg{to{background:transparent}}

/* El hero espera a que termine el intro */
.hero-text{animation-delay:var(--t0)}
.hero-stack{animation-delay:calc(var(--t0) + .15s)}
.split .w>span{animation-delay:calc(var(--i)*80ms + var(--t0) + .2s)}
mark{color:inherit;background:linear-gradient(176deg,transparent 65%,rgba(208,166,255,.26) 66%,rgba(208,166,255,.26) 82%,transparent 83%) no-repeat left/0% 100%;animation:markIn .9s cubic-bezier(.2,.7,.2,1) calc(var(--t0) + 1.3s) forwards}
@keyframes markIn{to{background-size:100% 100%}}

/* --- Chips flotantes y órbitas alrededor del trío --- */
.hero-stack{isolation:isolate}
.hero-stack::before,.hero-stack::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.hero-stack::before{inset:-12%;border:1px dashed rgba(168,138,255,.48);animation:spinSlow 40s linear infinite}
.hero-stack::after{inset:-26%;border:1px dotted rgba(208,166,255,.34);animation:spinSlow 70s linear infinite reverse}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.chip{position:absolute;z-index:3;padding:.5rem .95rem;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text);
  background:rgba(18,13,27,.78);border:1px solid rgba(226,211,255,.18);backdrop-filter:blur(8px);animation:floaty 5s ease-in-out infinite}
.c1{top:8%;left:-14%}.c2{top:46%;right:-16%;animation-delay:-1.6s}.c3{bottom:6%;left:-8%;animation-delay:-3.2s}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* --- Titulares: cada palabra sube desde una máscara al entrar en pantalla --- */
h2.split-h{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.split-h .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split-h .w>span{display:inline-block;transform:translateY(115%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms)}
.split-h.in .w>span{transform:none}

/* --- Cursor propio (solo mouse) y botones magnéticos --- */
.cursor{position:fixed;top:0;left:0;z-index:250;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(226,211,255,.62);border-radius:50%;pointer-events:none;display:grid;place-items:center;opacity:0;
  font-size:.72rem;font-weight:700;color:#10091b;transition:opacity .3s,width .3s,height .3s,margin .3s,background .3s,border-color .3s}
.cursor.on{opacity:1}
.cursor.link{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--accent)}
.cursor.view{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--text);border-color:transparent}
.cursor.view::after{content:attr(data-label)}
.btn{transition:transform .25s,box-shadow .25s,background .25s,translate .2s ease-out}
.wa{transition:transform .25s,box-shadow .25s,translate .2s ease-out}

@media (max-width:767px){.c1{left:-6%}.c2{right:-8%}.c3{left:-2%}.chip{font-size:.75rem;padding:.4rem .8rem}}
@media (prefers-reduced-motion:reduce){
  .intro,.chip,.cursor{display:none!important}
  .split-h .w>span{transform:none}
  mark{background-size:100% 100%;animation:none}
  .hero-stack::before,.hero-stack::after{animation:none}
}

/* ===== Insignia y rejilla centrada del portafolio ===== */
.badge{position:absolute;top:.9rem;left:.9rem;z-index:3;padding:.35rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;color:#10091b;background:linear-gradient(120deg,var(--accent),var(--accent-2))}
.card-info span{display:block;line-height:1.4}
@media (min-width:768px){
  .grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}
  .grid .card{flex:0 0 calc((100% - 2.4rem)/3)}
}

/* ================= Ajustes finales: footer, celular y accesibilidad ================= */
/* PC: el botón de WhatsApp (fijo) ya no tapa el Instagram del footer */
@media (min-width:768px){.footer{padding-right:calc(var(--pad) + 4.5rem)}}

@media (max-width:767px){
  /* Menú cerrado fuera del foco del teclado */
  .nav{visibility:hidden;transition:transform .35s ease,visibility 0s .35s}
  .nav.open{visibility:visible;transition:transform .35s ease}
  /* Elementos decorativos que se salían de pantalla */
  .glow-a{width:260px;height:260px;right:-30%}
  .hero-stack::before{inset:-6%}
  .hero-stack::after{inset:-14%}
  body::before{animation:none} /* menos consumo de batería */
}

/* Táctil: el :hover "se queda pegado" al tocar y movía tarjetas de lugar */
@media (hover:none){
  .hero-stack:hover .s-left{--x:-48%;--r:-9deg}
  .hero-stack:hover .s-right{--x:48%;--r:9deg}
  .s-center:hover{--s:1}
  .service:hover,.testi:hover,.booking-info li:hover,.how li:hover,.faq details:hover,.card:hover,.shot:hover{transform:none}
  .card:hover .thumb,.stage:hover img,.flyer:hover img{transform:none}
}