/* ==========================================================================
   Sanniasi Studio · capa de movimiento
   - Solo anima transform y opacity (rápido, sin saltos de diseño).
   - Todo se desactiva con «reducir movimiento» del sistema (accesibilidad).
   - El estado final de cada elemento es el normal: si el JS o las animaciones fallan, la web se ve igual.
   ========================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Transiciones suaves entre páginas (Chrome / Edge) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: cabecera; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease); }
}

/* ---------- Barra de progreso de lectura ---------- */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; pointer-events: none;
  background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0));
}

/* ---------- Hero: entrada escalonada ---------- */
@keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes palabra { from { opacity: 0; transform: translateY(.55em) rotate(2.5deg); } to { opacity: 1; transform: none; } }
@keyframes marco { from { transform: rotate(-1.2deg) translateY(30px) scale(.965); } to { transform: rotate(-1.2deg); } }
@keyframes aparece { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes brillo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.hero .eyebrow { animation: sube .8s var(--ease) .02s both; }
.hero h1 .w { display: inline-block; animation: palabra .9s var(--ease) both; }
.hero h1 .w1 { animation-delay: .10s; } .hero h1 .w2 { animation-delay: .16s; } .hero h1 .w3 { animation-delay: .22s; }
.hero h1 .w4 { animation-delay: .28s; } .hero h1 .w5 { animation-delay: .34s; } .hero h1 .w6 { animation-delay: .40s; }
.hero h1 .w7 { animation-delay: .46s; } .hero h1 .w8 { animation-delay: .56s; }
.hero h1 .grad-text.w { background-size: 220% 100%; animation: palabra .9s var(--ease) .56s both, brillo 9s ease-in-out 1.5s infinite alternate; }
.hero .lead { animation: sube .8s var(--ease) .62s both; }
.hero .btn-row { animation: sube .8s var(--ease) .76s both; }
.hero-badges li { animation: sube .7s var(--ease) both; }
.hero-badges li:nth-child(1) { animation-delay: .92s; } .hero-badges li:nth-child(2) { animation-delay: 1s; }
.hero-badges li:nth-child(3) { animation-delay: 1.08s; } .hero-badges li:nth-child(4) { animation-delay: 1.16s; }
.hero-media .frame { animation: marco 1.1s var(--ease) .1s both; }   /* la imagen es visible desde el primer instante (no retrasa la carga) */
.float-card { animation: aparece .8s var(--ease) .95s both, flota 7s ease-in-out 1.9s infinite alternate; }

/* ---------- Hero: aurora de fondo ---------- */
.hero > .container { position: relative; z-index: 1; }
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { width: 52vmax; height: 52vmax; left: -16vmax; top: -24vmax; background: radial-gradient(circle, rgba(166, 60, 242, .30), transparent 64%); animation: deriva1 24s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 46vmax; height: 46vmax; right: -14vmax; top: -10vmax; background: radial-gradient(circle, rgba(47, 107, 255, .28), transparent 64%); animation: deriva2 28s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 30vmax; height: 30vmax; left: 38%; bottom: -16vmax; background: radial-gradient(circle, rgba(255, 90, 170, .20), transparent 64%); animation: deriva3 32s ease-in-out infinite alternate; }
:root[data-theme="dark"] .aurora i { opacity: .85; }
@keyframes deriva1 { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.12); } }
@keyframes deriva2 { to { transform: translate3d(-8vmax, 9vmax, 0) scale(.92); } }
@keyframes deriva3 { to { transform: translate3d(-12vmax, -6vmax, 0) scale(1.18); } }
.hero.fuera .aurora i, .hero.fuera .float-card, .marquee.fuera .marquee__pista { animation-play-state: paused; }

/* ---------- Hero: inclinación 3D con el ratón y paralaje al hacer scroll ---------- */
.hero-media { transform-style: preserve-3d; translate: 0 var(--py, 0px); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.hero-media .float-card { translate: 0 0 46px; }

/* ---------- Franja de servicios en movimiento continuo ---------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: 17px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__pista { display: flex; width: max-content; animation: marquesina 46s linear infinite; }
.marquee:hover .marquee__pista { animation-play-state: paused; }
.marquee__pista span {
  display: inline-flex; align-items: center; padding: 0 30px; white-space: nowrap;
  font: 700 1.08rem/1 'Outfit', 'Inter', sans-serif; letter-spacing: -.01em; color: var(--muted);
}
.marquee__pista span::after { content: '✦'; margin-left: 60px; font-size: .8rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes marquesina { to { transform: translateX(-50%); } }

/* ---------- Aparición al hacer scroll: más fluida + línea del «eyebrow» que se dibuja ---------- */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .25s; }
.reveal.is-visible .eyebrow::before { transform: none; }
.work.reveal img { transform: scale(1.12); transition: transform 1.1s var(--ease); }
.work.reveal.is-visible img { transform: scale(1); }
.work.reveal.is-visible:hover img { transform: scale(1.06); }

/* ---------- Solo con ratón (no en pantallas táctiles) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card, .plan, .work { position: relative; }
  .card::after, .plan::after, .work::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 76, 255, .13), transparent 46%);
  }
  .card:hover::after, .plan:hover::after, .work:hover::after { opacity: 1; }
  :root[data-theme="dark"] .card::after, :root[data-theme="dark"] .plan::after, :root[data-theme="dark"] .work::after {
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 130, 255, .20), transparent 46%);
  }
  .hero .btn { translate: var(--bx, 0px) var(--by, 0px); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, translate .25s var(--ease); }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .progreso, .aurora { display: none; }
  .hero-media { transform: none; translate: none; }
  .hero-media .float-card { translate: none; }
  .reveal .eyebrow::before { transform: none; }
  .work.reveal img { transform: none; }
}

/* ==========================================================================
   Capa 2 · más movimiento (imágenes con cortina, paralaje, inclinación 3D, etiquetas flotantes, titulares por palabras)
   Todo es opcional: sin JS o con «reducir movimiento» la página se ve igual, sin estados ocultos.
   ========================================================================== */

/* ---------- Banners con imagen: se ve la foto y se mueve despacio (efecto cine) ---------- */
.page-banner--visual::before {
  background: linear-gradient(100deg, rgba(10, 10, 28, .94) 0%, rgba(10, 10, 28, .72) 40%, rgba(26, 22, 70, .30) 74%, rgba(47, 107, 255, .10) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .page-banner--visual .page-banner__img { transform-origin: 72% 50%; animation: cine 28s ease-in-out infinite alternate; will-change: transform; }
  .page-banner--visual.fuera .page-banner__img { animation-play-state: paused; }
}
@keyframes cine { from { transform: scale(1.02); } to { transform: scale(1.15) translate3d(-1.6%, -1.2%, 0); } }

/* ---------- Imágenes destacadas: cortina al aparecer ---------- */
.visual--wow { position: relative; }
.motion .visual--wow.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.25s var(--ease); }
.motion .visual--wow.reveal:not(.is-visible) { clip-path: inset(14% 10% 14% 10% round 40px); }
.motion .visual--wow.reveal.is-visible { clip-path: inset(-90px); }
.visual--wow img { will-change: transform; }

/* ---------- Paralaje de la imagen al hacer scroll (navegadores con animaciones ligadas al scroll) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .visual--wow img { animation: paralaje linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes paralaje { from { transform: translateY(-5.5%) scale(1.15); } to { transform: translateY(5.5%) scale(1.15); } }

/* ---------- Solo con ratón: inclinación 3D + brillo que sigue al cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .motion .visual--wow.is-visible {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .4s var(--ease), clip-path 1.25s var(--ease), opacity .9s var(--ease), box-shadow .4s ease;
  }
  .motion .visual--wow.is-visible:hover { box-shadow: 0 50px 100px -40px rgba(100, 70, 230, .75), 0 0 0 1px rgba(150, 120, 255, .45); }
  .visual--wow::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .24), transparent 46%);
  }
  .visual--wow:hover::after { opacity: 1; }
  .benefit { position: relative; }
  .benefit::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 130, 255, .22), transparent 48%);
  }
  .benefit:hover::after { opacity: 1; }
}

/* ---------- Titulares que aparecen palabra a palabra ---------- */
.motion .pal { display: inline-block; opacity: 0; transform: translateY(.7em) rotate(2.2deg); transition: opacity .7s var(--ease), transform .85s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 100ms); }
.motion .is-visible .pal { opacity: 1; transform: none; }

/* ---------- Destello en los botones ---------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
}
.btn--ghost::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::before { animation: destello .85s ease; }
}
@keyframes destello { to { transform: translateX(130%); } }

/* ---------- Presentación «todo en un equipo» (portada) ---------- */
.showcase { overflow: hidden; }
.showcase__stage { position: relative; max-width: 1040px; margin: 14px auto 0; }
.showcase__img { box-shadow: 0 44px 90px -44px rgba(70, 50, 190, .7), 0 0 0 1px var(--line); border-radius: 28px; }
.showcase__img img { width: 100%; height: auto; aspect-ratio: 1400 / 764; object-fit: cover; }
.showcase__chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px; border-radius: 999px; white-space: nowrap;
  font: 600 .95rem/1 'Inter', system-ui, sans-serif; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 44px -20px rgba(30, 20, 90, .6);
  transition: color .2s ease, box-shadow .2s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .showcase__chip { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(14px) saturate(1.5); }
}
.showcase__chip b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .72rem; letter-spacing: .02em; }
.showcase__chip:hover { color: var(--brand); text-decoration: none; box-shadow: 0 26px 50px -20px rgba(100, 70, 230, .75); }
.showcase__chip--1 { left: -2.5%; top: 11%; }
.showcase__chip--2 { right: -2.5%; top: 25%; }
.showcase__chip--3 { left: 3%; bottom: 11%; }
.showcase__chip--4 { right: 2%; bottom: 7%; }
@media (prefers-reduced-motion: no-preference) {
  .showcase__chip { animation: flota 5.5s ease-in-out infinite alternate; }
  .showcase__chip--2 { animation-duration: 6.8s; animation-delay: -1.5s; }
  .showcase__chip--3 { animation-duration: 6.2s; animation-delay: -3s; }
  .showcase__chip--4 { animation-duration: 7.4s; animation-delay: -4.2s; }
  .showcase.fuera .showcase__chip { animation-play-state: paused; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .showcase__chip--1 { animation: flota 5.5s ease-in-out infinite alternate, deriva-a linear both; animation-timeline: auto, view(); }
    .motion .showcase__chip--2 { animation: flota 6.8s ease-in-out -1.5s infinite alternate, deriva-b linear both; animation-timeline: auto, view(); }
    .motion .showcase__chip--3 { animation: flota 6.2s ease-in-out -3s infinite alternate, deriva-b linear both; animation-timeline: auto, view(); }
    .motion .showcase__chip--4 { animation: flota 7.4s ease-in-out -4.2s infinite alternate, deriva-a linear both; animation-timeline: auto, view(); }
  }
}
@keyframes deriva-a { from { translate: 0 70px; } to { translate: 0 -70px; } }
@keyframes deriva-b { from { translate: 0 -50px; } to { translate: 0 50px; } }
@media (max-width: 760px) {
  .showcase__stage { display: flex; flex-wrap: wrap; gap: 10px; }
  .showcase__img { width: 100%; }
  .showcase__chip { position: static; animation: none !important; translate: none; }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .pal { opacity: 1; transform: none; transition: none; }
  .visual--wow { clip-path: none; }
  .btn::before { display: none; }
}

/* ---------- Oferta: halo giratorio, latido y dígitos que se animan ---------- */
@media (prefers-reduced-motion: no-preference) {
  .oferta::before {
    content: ''; position: absolute; inset: -45%; z-index: -1; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 52%, rgba(255, 120, 220, .30) 68%, rgba(110, 150, 255, .42) 84%, transparent 100%);
    animation: giro 16s linear infinite;
  }
  .oferta.fuera::before { animation-play-state: paused; }
  .oferta__etiqueta i, .oferta-chip i { animation: latido 1.8s ease-out infinite; }
  .oferta__cuenta b.tic { animation: tic .5s var(--ease); }
  .oferta__precio strong { animation: brillo 6s ease-in-out infinite alternate; }
  .oferta-chip { background-size: 200% 100%; animation: brillo 5s ease-in-out infinite alternate; }
}
@keyframes giro { to { transform: rotate(1turn); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 77, .8); } 70%, 100% { box-shadow: 0 0 0 11px rgba(255, 210, 77, 0); } }
@keyframes tic { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }

/* El anuncio de la ficha se enseña entero: sin paralaje (recortaría el teléfono y la web de abajo) */
.project__ad .visual--wow img { animation: none !important; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .oferta-barra { animation: brillo 8s ease-in-out infinite alternate; }
  .oferta-barra__enlace i { animation: latido 1.8s ease-out infinite; }
}