:root {
  --text: #ffffff;
  --main-bg: #0f0f0f;
  --primary: #990011;
  --secondary: #00218e;
  --transition-speed: 0.3s;
  --title: "Aktiv Grotesk Cd Trial", sans-serif;
  --text-dark: #333333;
  --text-light: #999999;
  --border: #d1d5db;
  --border-focus: #6b7280;
  --background: #ffffff;
  --input-bg: #f9fafb;
  --stat-num-col: clamp(220px, 26vw, 360px);
  --stat-gap: clamp(14px, 1.8vw, 22px);
  /* espacio entre divisor y texto */
  --stat-divider-w: 1px;
  --stat-divider-color: rgba(255, 255, 255, 0.12);
  --z-nav: 1000;
  --z-phone: 40;
  /* la imagen fija SIEMPRE debajo */
  --z-section: 60;
  /* secciones por encima del phone */
  --z-modal: 10000;
  /* ya lo tenés para el modal */
  --nav-h: 80px;
  --navbarH: 80px;
  --railTop: 120px;
  --railBottom: 60px;
  --railX: clamp(96px, 8vw, 240px);
  --contentMax: clamp(1380px, 92vw, 1880px);
  --railGutter: 0px;
  /* espacio a la izquierda del rail */
  --railGap: clamp(40px, 3.2vw, 64px);
  --rightGutter: clamp(24px, 4vw, 96px);
  --rowGap: clamp(16px, 2.2vw, 24px);
  --colGap: 0px;
  --notch-size: 56px;
  /* diámetro del “mordisco” */
  --notch-inset: 7px;
}

body {
  overflow-x: hidden;
}

/* Contenedor central (respeta tu navbar fija) */
/* ===== Servicios: layout con barra de progreso ===== */
.container {
  max-width: var(--contentMax);
  margin: 0 auto;
  padding: calc(var(--navbarH) + 40px) clamp(16px, 4vw, 40px) 80px;
}

.container > .wrapper {
  display: grid;
  grid-template-columns: 56px 1fr;
  /* columna angosta para la barra */
  column-gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
  /* la columna de la barra se estira */
  position: relative;
}

/* Columna de la barra */
.container > .wrapper .progress {
  position: relative;
  pointer-events: none;
  /* no interfiere con clics del contenido */
}

/* La barra vertical en sí */
.container > .wrapper .progress::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  /* ocupa todo el alto del wrapper */
  transform: translateX(-50%);
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.08) inset;
}

/* Ajuste móvil */
@media (max-width: 768px) {
  .container > .wrapper {
    grid-template-columns: 40px 1fr;
    column-gap: 18px;
  }

  .container > .wrapper .progress::before {
    width: 2px;
  }
}

/* ===== Progress column ===== */
.container > .wrapper .progress {
  position: relative;
}

.progress-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border-radius: 3px;
}

.progress-fill {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  height: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border-radius: 3px;
  transition: height 0.35s ease;
}

.progress-dots {
  list-style: none;
  margin: 0;
  padding: 0;
}

.progress-dots li {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  /* círculo blanco */
  border: none;
  /* sin borde */
  box-shadow: none;
  /* sin sombras */
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.6;
  /* un poco tenue cuando no está activo */
}

.progress-dots li.active {
  opacity: 1;
  /* se ilumina al estar activo */
  transform: translate(-50%, -50%) scale(1.1);
  /* leve agrandado */
}

.progress-dots li.completed {
  opacity: 0.9;
}

@media (max-width: 900px) {
  .container > .wrapper {
    grid-template-columns: 24px 1fr;
  }

  .progress-track,
  .progress-fill {
    width: 2px;
  }

  .progress-dots li {
    width: 12px;
    height: 12px;
  }
}

/* ======== SECTION: SERVICES ======== */
.services {
  display: flex;
  flex-direction: column;
  gap: clamp(120px, 10vw, 180px);
  /* separación entre servicios */
}
/* ===== HERO SERVICIOS · CINEMÁTICO ===== */

.heading-services {
  position: relative;
  min-height: calc(100vh - var(--navbarH, 80px));
  padding: calc(var(--navbarH, 80px) + 32px)
    clamp(16px, 6vw, 80px)
    clamp(56px, 12vh, 120px);
  margin-bottom: clamp(80px, 14vh, 160px);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: var(--text);
  overflow: hidden;

  /* Fondo cinematográfico */
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 102, 255, 0.35) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 20, 153, 0.55) 0, transparent 60%),
    linear-gradient(140deg, #020617 0%, #020617 40%, #000000 100%);
}

/* Neblina / glow suave */
.heading-services::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
  filter: blur(30px);
  opacity: 0.8;
  pointer-events: none;
}

/* Vignette para dar profundidad */
.heading-services::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Vignette + fade hacia el fondo general */
  background:
    /* oscurece los bordes, como ya tenías */
    radial-gradient(
      circle at center,
      transparent 0,
      #0f0f0f 62%
    ),
    /* fade vertical hacia abajo */
    linear-gradient(
      to bottom,
      rgba(2, 6, 23, 0) 0%,
      rgba(34, 36, 42, 0.5) 55%,
      var(--main-bg) 100%
    );
}


/* EXPANSIÓN DEL HERO */
.heading-services__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px; /* Antes: 820 */
  width: 100%;
  padding-inline: clamp(20px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vw, 28px);
}

/* Título más ancho */
.heading-title {
  font-family: var(--title);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 1200px; /* Antes: 820px */
}

/* Eyebrow / overline */
.heading-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}


.heading-title span {
  display: block;
}

/* Bajada de línea */
.heading-subtitle {
  max-width: 640px;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
}

/* Path / línea de avance */
.heading-path {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(12px, 2vh, 20px);
}

.heading-path-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
}

.heading-path-line {
  position: relative;
  width: clamp(120px, 26vw, 260px);
  height: 1px;
  overflow: hidden;
}

.heading-path-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 253, 0.1) 0%,
    rgba(59, 130, 246, 0.85) 40%,
    rgba(63, 108, 244, 0.85) 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
}

/* CTA tipo glass / ghost */
.heading-cta {
  margin-top: clamp(18px, 3vh, 28px);
  padding: 12px 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);

  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.06), transparent 55%);
  backdrop-filter: blur(10px);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.heading-cta:hover {
  color: #020617;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.7);
}

/* ===== ANIMACIONES DE ENTRADA (usa tu clase .visible del JS) ===== */

.heading-services {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1);
}

.heading-services.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Path animado cuando el hero entra en viewport */
.heading-services.visible .heading-path-line::before {
  animation: headingPathDraw 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.25s forwards;
}

.heading-services.visible .heading-path-dot {
  animation: headingDotPulse 1.4s ease-out 0.25s forwards;
}

/* Keyframes */
@keyframes headingPathDraw {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes headingDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
    transform: scale(1);
  }
  60% {
    box-shadow: 0 0 0 14px rgba(59, 130, 246, 0);
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    transform: scale(1);
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  .heading-services {
    min-height: auto;
    padding: calc(var(--navbarH, 80px) + 40px) 20px 72px;
  }

  .heading-services__inner {
    align-items: center;
  }

  .heading-title {
    font-size: clamp(30px, 9vw, 40px);
    letter-spacing: 0.06em;
  }

  .heading-subtitle {
    font-size: 0.9rem;
  }

  .heading-path {
    margin-top: 10px;
  }

  .heading-path-line {
    width: 56vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heading-services {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .heading-services.visible .heading-path-line::before,
  .heading-services.visible .heading-path-dot {
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}


.service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80vh;
  gap: clamp(40px, 6vw, 80px);
}

.info-service,
.img-service {
  flex: 1;
  /* 50% del ancho del container */
  max-width: 50%;
}

/* ----- Contenido de texto ----- */
.info-service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.info-service h2 {
  margin-top: 12px;
  letter-spacing: 3px;
}

.info-service h2 {
  font-family: var(--title);
  font-weight: 700;
  font-size: 80px;
  color: var(--text);
  line-height: 1.2;
}

.service-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.6;
  max-width: 470px;
  font-weight: 200;
}

.ideal::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  margin-bottom: 1.1rem;
}

.desc-bold {
  color: var(--background);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 18px);
}

.para {
  font-weight: 700;
  font-size: clamp(22px, 2vw, 25px);
  color: var(--background);
}

.ideal {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  max-width: 450px;
  font-size: clamp(14px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.7);
}

.learn-more {
  margin-top: 30px;
  padding: 12px 50px;
  font-size: 18px;
  border-radius: 22px;
  color: #fff;
  font-weight: 500;
  background: linear-gradient(
    135deg,
    rgb(0, 0, 213) 0%,
    rgba(0, 36, 154, 0.85) 25%,
    rgba(0, 4, 70, 0.55) 55%,
    rgba(0, 0, 0, 1) 100%
  );
  transition: all 0.25s ease;
  width: max-content;
}

.learn-more:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 61, 193, 0.878) 0%,
    rgba(0, 42, 101, 0.85) 25%,
    rgba(9, 0, 91, 0.55) 55%,
    rgb(0, 2, 21) 100%
  );
  background-position: 100% 50%; /* se desplaza el degrade */
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  transform: translateY(-2px);
  cursor: pointer;
}

/* ----- Imagen del servicio ----- */
.img-service {
  display: flex;
  align-items: center;
}

.img-service img {
  width: 100%;
  max-width: 520px;
  object-fit: cover;
}

.img-service {
  position: relative;
}

.service.expanded .img-service {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Responsive coherente */
@media (max-width: 900px) {
  #svc-branding.service.expanded {
    text-align: left;
  }
}

#svc-branding h2{
  font-size: clamp(50px, 6.5vw, 80px);
}

/* ==== BRANDING: imagen y despliegue sin clases nuevas ==== */

/* Estado inicial igual a los demás */
#svc-branding .img-service {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#svc-branding .img-service img {
  width: 100%;
  max-width: 520px;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Estado expandido */
#svc-branding.expanded .info-service {
  display: none;
}

#svc-branding.expanded .img-service {
  flex: 1 1 100%;
  max-width: 100%;
  cursor: default;
}

/* ==== ANIMACIÓN SUAVE DE TRANSICIÓN (derecha ↔ izquierda) ==== */

/* Contenedor general: permite animaciones suaves */
#svc-branding.service {
  position: relative;
  overflow: hidden;
}

.service {
  min-height: 80vh;
  overflow: visible;
}

/* ===== ANIMACIÓN DE ENTRADA SUTIL ===== */
@keyframes dotPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Pulse infinito SOLO cuando el servicio está en vista */
.progress-dots li {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: none;
  opacity: 0.9;
}

/* Aro del pulso (invisible por defecto) */
.progress-dots li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

/* Cuando el dot está en viewport: animación infinita */
.progress-dots li.inview::after {
  animation: dotPulseRing 1.6s ease-out infinite;
}

@keyframes dotPulseRing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.35;
  }

  70% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  .progress-dots li.inview::after {
    animation: none !important;
  }
}

/* Aplica solo cuando un dot se vuelve activo */
.progress-dots li.active {
  background: #fff;
  border-color: #fff;
  animation: dotPulse 0.8s ease-out;
}

/* Estado inicial: ligeramente abajo y transparente */
.info-service {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* Al entrar en vista */
.info-service.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de salida (solo para #svc-branding) */
#svc-branding .info-service,
#svc-branding .img-service img {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.7s ease, opacity 0.7s ease;
  will-change: transform, opacity;
}

/* Al hacer clic (con clase .expanding) salen hacia la izquierda */
#svc-branding.expanding .info-service,
#svc-branding.expanding .img-service img {
  opacity: 0;
  transform: translateX(-100vw);
  pointer-events: none;
}

/* estado base visibles */
#svc-branding .info-service,
#svc-branding .img-service img {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.7s ease;
  will-change: transform, opacity;
}

/* durante la salida */
#svc-branding.expanding .info-service,
#svc-branding.expanding .img-service img {
  opacity: 0;
  transform: translateX(-100vw);
  pointer-events: none;
}

/* === BRANDING · REFORMA VISUAL DE IMAGEN === */

/* Aseguramos el layout 50/50 */
#svc-branding.service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 80px);
}

/* Mantener proporciones del texto */
#svc-branding .info-service {
  flex: 1 1 50%;
  max-width: 50%;
}

/* Imagen: debe llenar completamente su mitad */
#svc-branding .img-service {
  flex: 1 1 50%;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* La imagen se comporta como un bloque protagonista */
#svc-branding .img-service img {
  width: 100%;
  height: auto;
  min-height: 70vh;
  /* da presencia vertical */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  transform: scale(1.05);
  transition: transform 0.8s ease, filter 0.8s ease;
  will-change: transform, filter;
}

/* Opcional: recorte más cinematográfico en pantallas grandes */
@media (min-width: 1200px) {
  #svc-branding .img-service img {
    width: 110%;
    transform: translateX(-5%);
  }
}

/* Responsive coherente */
@media (max-width: 900px) {
  #svc-branding.service {
    flex-direction: column;
    gap: 40px;
  }

  #svc-branding .info-service,
  #svc-branding .img-service {
    max-width: 100%;
  }

  #svc-branding .img-service img {
    width: 100%;
    min-height: auto;
    border-radius: 12px;
  }
}

/* === BRANDING · imagen extendida hasta el borde derecho del viewport === */
#svc-branding .img-service {
  flex: 1 1 55%;
  max-width: 55%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: visible;
  /* importante: permite desbordar */
}

/* Imagen: cubre toda su mitad y se extiende hasta el borde derecho */
#svc-branding .img-service img {
  width: 55vw;
  /* se extiende más allá del contenedor */
  max-width: none;
  /* evita que el contenedor limite el ancho */
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 0 0 14px;
  /* borde suave solo en la izquierda */
  transform: translateX(15%);
  /* empuja hacia la derecha */
  box-shadow: none;
  filter: blur(1.8px) brightness(1.02);
}

/* Responsive: se adapta sin overflow */
@media (max-width: 900px) {
}

/* (2) Ocultar las 4 imágenes nuevas por ahora */
#svc-branding .img-service > img {
  display: none !important;
}

/* Imagen animada */
#svc-branding .img-animation.active > img {
  animation: brandingScrollUp 40s linear infinite;
  /* duración ajustable */
}

/* Keyframes del desplazamiento vertical infinito */
@keyframes brandingScrollUp {
  0% {
    transform: translateY(0%);
    transform: translateX(15%);
  }

  100% {
    transform: translateY(70%);
    transform: translateX(20%);
  }
}

/* === BRANDING · OVERLAYS GENERALES (encima del fondo) === */
#svc-branding .img-service {
  position: relative;
}

#svc-branding .img-service > img {
  position: absolute;
  inset: 0;
  /* ocupa el contenedor; ajustamos abajo si querés otra posición */
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* si preferís recortar: cover */
  pointer-events: none;
  /* que no interfiera */
  z-index: 2;
  /* por encima del fondo (.img-animation) */
}

/* IMPORTANTE: antes las ocultábamos todas; ahora habilitamos SOLO la primera */
#svc-branding .img-service > img:first-of-type {
  display: block !important;
  /* anula el "display:none" global */
  opacity: 0;
  /* estado inicial invisible */
  transform: translateY(24vh);
  /* entra desde abajo */
  filter: blur(12px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
}

/* Al disparar la animación */
#svc-branding .img-service.art-103-in > img:first-of-type {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  #svc-branding .img-service > img:first-of-type {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* === BRANDING · Recurso 103 animación completa === */
#svc-branding .img-service {
  position: relative;
}

/* base: centrada sobre el fondo */
/* base: anclada arriba a la izquierda del contenedor */
#svc-branding .img-service > img:first-of-type {
  position: absolute;
  /* en lugar de inset + margin auto */
  top: 8%;
  left: 10%;
  width: 40%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  /* sigue entrando desde abajo, como antes */
  transform: translateY(100vh) scale(0.96);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  /* quitamos los margin que “ensuciaban” la posición */
  margin: 0;
}

/* cuando entra en viewport */
#svc-branding .img-service.art-103-in > img:first-of-type {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;

  transform: translate(-60%, -10%);
}

/* === BRANDING · Recurso 104 animación (igual a 103, secuencial) === */

/* Estado base del 104 (2º <img> directo dentro de .img-service) */
#svc-branding .img-service > img:nth-of-type(2) {
  position: absolute;
  top: 28%;
  right: 5%;
  width: 38%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: translateY(100vh) scale(0.96);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  display: block !important;
}

/* 104: entrada */
#svc-branding .img-service.art-104-in > img:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  #svc-branding .img-service > img:nth-of-type(2) {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* === BRANDING · Recurso 105 animación (secuencial) === */
/* 3º <img> directo dentro de .img-service */
#svc-branding .img-service > img:nth-of-type(3) {
  position: absolute;
  top: 38%;
  left: 55%;
  width: 36%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translateY(100vh) scale(0.96);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  display: block !important;
}

/* 105: entrada */
#svc-branding .img-service.art-105-in > img:nth-of-type(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  #svc-branding .img-service > img:nth-of-type(3) {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* === BRANDING · Recurso 106 animación (final de la secuencia) === */
#svc-branding .img-service > img:nth-of-type(4) {
  position: absolute;
  top: -45%;
  right: 6%;
  width: 34%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transform: translateY(100vh) scale(0.96);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  display: block !important;
}

/* Entrada */
#svc-branding .img-service.art-106-in > img:nth-of-type(4) {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
}

/* 5ª imagen (Recurso 105) */
#svc-branding .img-service > img:nth-of-type(5) {
  position: absolute;
  bottom: 25%;
  left: -50%;
  width: 32%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transform: translateY(100vh) scale(1);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  display: block !important;
}

/* 6ª imagen (Recurso 106) */
#svc-branding .img-service > img:nth-of-type(6) {
  position: absolute;
  bottom: 50%;
  right: -60%;
  width: 30%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transform: translateY(100vh) scale(1);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  display: block !important;
}

/* 7ª imagen (Recurso 109) */
#svc-branding .img-service > img:nth-of-type(7) {
  position: absolute;
  top: 30%;
  left: -82%;
  width: 28%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  transform: translateY(100vh) scale(1);
  filter: blur(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
  display: block !important;
  border-radius: 20px !important;
}

/* 107: visible */
#svc-branding .img-service.art-107-in > img:nth-of-type(5) {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 108: visible */
#svc-branding .img-service.art-108-in > img:nth-of-type(6) {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 109: visible */
#svc-branding .img-service.art-109-in > img:nth-of-type(7) {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* === RESET LOOP: evita el salto al reiniciar la secuencia === */
#svc-branding .img-service.reset-loop > img {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(60vh) scale(0.96) !important;
  filter: blur(12px) !important;
}

/* ============================
   SOCIAL MEDIA – layout base
   ============================ */

#svc-social h2 {
  letter-spacing: 0px;
  font-size: clamp(40px, 6.5vw, 73px);
}

#svc-social .service-description {
  max-width: 550px;
}

#svc-social .ideal {
  max-width: 550px;
}

#svc-social .img-service {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

/* Contenedor general donde van los feeds animados */
#svc-social .feeds {
  position: relative;
  width: 500px; /* ancho total del par (ajustable) */
  height: 500px; /* alto fijo para evitar saltos */
  overflow: hidden;
  display: block;
  margin-bottom: 40px;
  right: 10%;
}

/* ============================
   FEED BASE (todos iguales)
   ============================ */

#svc-social .feed {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transform: translateY(80vh); /* arrancan abajo, invisibles */
}

#svc-social .feed:first-child {
  position: relative;
  pointer-events: auto;
}

/* Tamaños consistentes tipo celular */
#svc-social .feed img {
  display: block;
  height: 700px;
  width: auto;
  object-fit: contain;
  border-radius: 22px;
}

/* ANTES más chico */
#svc-social .feed img:first-child {
  height: 420px;
}

/* DESPUÉS más grande */
#svc-social .feed img:last-child {
  height: 500px;
}

@keyframes smmFeedCycle {
  /* Abajo, oculto */
  0%,
  8% {
    opacity: 0;
    transform: translateY(80vh);
  }

  /* Sube y APARECE de golpe */
  9% {
    opacity: 1;
    transform: translateY(0);
  }

  /* Se queda quieto y visible */
  9%,
  38% {
    opacity: 1;
    transform: translateY(0);
  }

  /* Corte: deja de verse y empieza a irse para arriba */
  39% {
    opacity: 0;
    transform: translateY(0);
  }

  /* Ya fuera de escena, siempre oculto */
  40%,
  100% {
    opacity: 0;
    transform: translateY(-80vh);
  }
}

/* Aplicar ciclo infinito a todos los feeds */
#svc-social .img-service.visible .feed {
  animation: smmFeedCycle 12s ease-in-out infinite;
  animation-fill-mode: both;
}

/* Feed 1: sin delay */
#svc-social .img-service.visible .feed:nth-child(1) {
  animation-delay: 0s;
}

/* Feed 2: arranca cuando terminó el tramo visible del 1 (≈ a los 4s) */
#svc-social .img-service.visible .feed:nth-child(2) {
  animation-delay: 4s;
}

/* Feed 3: arranca cuando terminó el tramo visible del 2 (≈ a los 8s) */
#svc-social .img-service.visible .feed:nth-child(3) {
  animation-delay: 8s;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #svc-social .feed {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
  }
}

#svc-paid h2 {
  font-size: clamp(45px, 6.8vw, 75px);

}

#svc-paid .service-description {
  max-width: 500px;
}

#svc-paid .ideal {
  max-width: 550px;
}

#svc-paid .img-animation {
  display: flex;
  flex-direction: column;
  /* apila verticalmente */
  align-items: center;
  justify-content: center;
}

#svc-paid .img-animation img {
  width: 100%;
  /* tamaño base */
  height: auto;
  object-fit: contain;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.paid-logos {
  display: flex;
  align-items: center;
  gap: 15px;
}

.paid-logos i,
.paid-logos svg {
  width: 40px;
  height: 40px;
}

.paid-logos svg {
  fill: white; /* o el color que quieras */
}

.paid-logos i {
  font-size: 40px;
  margin-right: 30px;
}

/* Responsive */
@media (max-width: 900px) {
  #svc-paid .img-animation img {
    width: 90%;
  }
}

/* === PAID MEDIA · Mini imágenes lado a lado === */
.paid-mini-images {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  align-items: center;
}

.paid-mini-images img {
  width: 200px;          /* tamaño pequeño controlado */
  height: auto;
  border-radius: 12px;  /* bordes suaves */
  object-fit: cover;
  filter: brightness(0.95);
  transition: transform 0.25s ease;
}

@media (max-width: 768px) {
  .paid-mini-images{
    flex-direction: column;
    padding: 0;
    margin: 10px;
    justify-content: center;
  }

  .partner img{
    margin-right: 0;
    margin-top: 20px;
  }
}

.paid-mini-images img:hover {
  transform: scale(1.05);
}



/* === AUDIOVISUAL PRODUCTION · Imagen MEGADOMINANTE === */
#svc-audiovisual h2 {
  letter-spacing: 4px;
  font-size: clamp(35px, 7vw, 80px);
}

#svc-audiovisual .service-description {
  max-width: 600px;
}

#svc-audiovisual .ideal {
  max-width: 600px;
}

#svc-audiovisual ~ .img-service {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 100vh;
  overflow: visible;
  transform: translateX(-100px);
}

@media (max-width: 768px) {
  #svc-audiovisual ~ .img-service {
    transform: translateX(0px);
  }
}

#svc-audiovisual ~ .img-service .img-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* La bestia visual */
#svc-audiovisual ~ .img-service .img-animation img {
  width: 170vw;
  /* antes 115vw → ahora abarca más que la pantalla */
  height: auto;
  object-fit: cover;
  object-position: center;
  transform: scale(1.25);
  /* empuje + zoom fuerte */
  filter: brightness(1.05) contrast(1.1) saturate(1.05);
  transition: transform 0.8s ease, filter 0.8s ease;
  will-change: transform, filter;
}

/* Responsive: más controlado en móvil */
@media (max-width: 900px) {
  #svc-audiovisual ~ .img-service {
    min-height: 70vh;
  }

  #svc-audiovisual ~ .img-service .img-animation img {
    width: 110vw;
    transform: translateX(0) scale(1.05);
    border-radius: 8px;
  }
}

/* === AUDIOVISUAL PRODUCTION · Animación de entrada con blur === */
#svc-audiovisual ~ .img-service .img-animation img {
  opacity: 0;
  transform: scale(1.25) translateY(10vh);
  filter: blur(20px) brightness(1.05) contrast(1.1) saturate(1.05);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
}

/* Estado visible (al entrar en viewport) */
#svc-audiovisual.play ~ .img-service .img-animation img {
  opacity: 1;
  transform: scale(1.25) translateY(0);
  filter: blur(0) brightness(1.05) contrast(1.1) saturate(1.05);
}

/* === PAID MEDIA · Animación inicial === */
#svc-paid .img-animation img {
  opacity: 0;
  transform: translateY(0);
  filter: blur(10px);
  transition: transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 1s ease,
    filter 1s ease;
}

/* paid-1: desde arriba */
#svc-paid .img-animation img:first-child {
  transform: translateY(-80vh);
}

/* paid-2: desde abajo */
#svc-paid .img-animation img:last-child {
  transform: translateY(80vh);
}

#svc-paid .img-animation > img.small {
  position: absolute;
  width: 90px; /* Ajustalo como quieras */
  height: auto;
  z-index: 2;
  pointer-events: none; /* opcional: para que no molesten */
}

/* Ejemplos de posiciones */
#svc-paid .img-animation > img.small.decoration-1 {
  top: 13%;
  right: 22%;
}

#svc-paid .img-animation > img.small.decoration-2 {
  bottom: 38%;
  left: 4%;
}

@keyframes paidFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

#svc-paid .img-animation > img.small {
  animation: paidFloat 4s ease-in-out infinite;
}

/* Estado final (al activar animación) */
#svc-paid.play .img-animation img {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger: primero sube paid-2, luego baja paid-1 */
#svc-paid.play .img-animation img:first-child {
  transition-delay: 0.2s;
}

#svc-paid.play .img-animation img:last-child {
  transition-delay: 0s;
}

/* === SITIO WEB · Imagen protagonista === */
#svc-sitio h2 {
  letter-spacing: 4px;
  font-size: clamp(55px, 7vw, 80px);
}

#svc-sitio .ideal {
  max-width: 500px;
}

.service #svc-sitio-cont {
  gap: 0;
}
.service #svc-sitio-cont {
  gap: 0;
}
.services .service#svc-sitio-cont {
  gap: 0 !important;
}

#svc-sitio ~ .img-service {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 90vh;
  overflow: visible;
  transform: translateX(-100px);
}

@media (max-width: 768px) {
  #svc-sitio ~ .img-service {
    transform: translateX(0px);
  }
}

#svc-sitio ~ .img-service .img-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Imagen con presencia fuerte pero más “limpia” que audiovisual */
#svc-sitio ~ .img-service .img-animation img {
  width: 130vw;
  /* grande pero un poco más controlado */
  height: auto;
  object-fit: cover;
  object-position: center;
  transform: translateX(0%) scale(1.3);
  filter: brightness(1.05) contrast(1.08) saturate(1.05);
  transition: transform 0.8s ease, filter 0.8s ease;
  will-change: transform, filter;
  border-radius: 0;
}

/* Hover sutil: apenas vida */
#svc-sitio ~ .img-service .img-animation img:hover {
  transform: translateX(-10%) scale(1.22);
  filter: brightness(1.1) contrast(1.1) saturate(1.08);
}

/* Responsive */
@media (max-width: 900px) {
  #svc-sitio ~ .img-service {
    min-height: 70vh;
  }

  #svc-sitio ~ .img-service .img-animation img {
    width: 100%;
    transform: none;
    border-radius: 8px;
  }
}

/* === SITIO WEB · Animación desde la izquierda con blur === */
#svc-sitio ~ .img-service .img-animation img {
  opacity: 0;
  transform: translateX(-60vw) scale(1.3);
  filter: blur(16px) brightness(1.05) contrast(1.08) saturate(1.05);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 1.2s ease;
}

/* Estado visible (al entrar en viewport) */
#svc-sitio.play ~ .img-service .img-animation img {
  opacity: 1;
  transform: translateX(0) scale(1.3);
  filter: blur(0) brightness(1.05) contrast(1.08) saturate(1.05);
}

/* === CONTENT CREATOR · layout 3 videos tipo celular === */

#svc-content-creator h2 {
  font-size: clamp(55px, 7vw, 80px);
}

#svc-content-creator .service-description {
  max-width: 450px;
}

#svc-content-creator .ideal {
  max-width: 500px;
}

.service #svc-content-creator {
  gap: 0;
}

.services .service#svc-content-creator-cont {
  gap: 0 !important;
}

#svc-content-creator ~ .img-service {
  position: relative;
  transform: translateX(-5vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Marco negro con las 3 columnas */
#svc-content-creator ~ .img-service .img-animation {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 26px;
  max-width: 960px; /* antes 720px — ahora sí entran bien */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Cada video ocupa una “columna” vertical */
#svc-content-creator ~ .img-service .img-animation video {
  flex: 1;
  aspect-ratio: 9 / 16; /* alto tipo story/reel */
  border-radius: 22px;
  overflow: hidden;
  object-fit: cover;
  height: auto;
}

/* --- Animación de entrada (ya usás la clase .play en JS) --- */

/* Estado inicial: se corre un poco a la derecha y es opaco */
#svc-content-creator ~ .img-service .img-animation {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.22, 0.8, 0.2, 1);
}

/* Cuando el observer agrega .play al #svc-content-creator */
#svc-content-creator.play ~ .img-service .img-animation {
  opacity: 1;
  transform: translateX(0);
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  #svc-content-creator ~ .img-service .img-animation {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Contenedor general */
.graphic-grid {
  position: relative;
  width: 100%;
  max-width: 650px; /* Ajustá para agrandar/reducir todo el bloque */
  margin: 0 auto;
  aspect-ratio: 1 / 1; /* Cuadrado. Cambiar si querés otra relación */
}

/* Todas las imágenes */
.graphic-grid .g-el {
  position: absolute;
  width: 28%; /* todas mismo tamaño (ajustable) */
  height: auto;
  object-fit: contain;
  pointer-events: none; /* las hace no clickeables (si querés, remover) */
}

/* === POSICIÓN LIBRE POR CADA ELEMENTO === */
/* Ajustá libremente top / left / transform para acomodarlas como quieras */

/* BOTELLA */
.graphic-grid .el1 {
  top: 2%;
  right: 70%;
  transform: rotate(-8deg);
  width: 40%;
}

/* TARJETA */
.graphic-grid .el2 {
  top: 65%;
  right: 15%;
  width: 50%;
  z-index: 999;
}

/* BOLSA */
.graphic-grid .el3 {
  top: 30%;
  right: 60%;
  width: 60%;
}

/* TARJETA CON CUERDA */
.graphic-grid .el4 {
  top: 0%;
  right: 25%;
  width: 60%;
  z-index: 1;
}

/* CAJITAS */
.graphic-grid .el5 {
  bottom: -15%;
  left: 10%;
  transform: rotate(-2deg);
  width: 65%;
}

/* REMERAS */
.graphic-grid .el6 {
  bottom: -20%;
  right: 5%;
  width: 80%;
}

/* TAZAS */
.graphic-grid .el7 {
  top: 10%;
  left: 40%;
  width: 70%;
  z-index: 2;
}

/* CAFÉ */
.graphic-grid .el8 {
  top: 15%;
  right: 65%;
  width: 60%;
}

@keyframes coffeeFloat {
  0% {
    transform: translateY(0) scale(1) rotate(var(--g-rot));
  }
  40% {
    transform: translateY(-45px) scale(1.03) rotate(calc(var(--g-rot) - 2deg));
  }
  70% {
    transform: translateY(25px) scale(0.97) rotate(calc(var(--g-rot) + 1deg));
  }
  100% {
    transform: translateY(0) scale(1) rotate(var(--g-rot));
  }
}

@keyframes coffeeCircle {
  0% {
    transform: translate(0, 0) rotate(var(--g-rot));
  }
  25% {
    transform: translate(25px, -25px) rotate(calc(var(--g-rot) + 2deg));
  }
  50% {
    transform: translate(0, -50px) rotate(var(--g-rot));
  }
  75% {
    transform: translate(-25px, -25px) rotate(calc(var(--g-rot) - 2deg));
  }
  100% {
    transform: translate(0, 0) rotate(var(--g-rot));
  }
}

#svc-graphic-design h2 {
  font-size: clamp(55px, 7vw, 80px);
}

#svc-graphic-design .service-description {
  max-width: 400px;
}

#svc-graphic-design .ideal {
  max-width: 400px;
}

/* ESTADO INICIAL: todos fuera de vista + opacos */
#svc-graphic-design ~ .img-service .graphic-grid .g-el {
  opacity: 0;
  transition: none; /* que no interfiera con otras transiciones */
}

/* --- GRUPO 1: BOTELLA + TARJETA CON CUERDA (desde ARRIBA) --- */
#svc-graphic-design ~ .img-service .graphic-grid .el1,
#svc-graphic-design ~ .img-service .graphic-grid .el4 {
  transform: translateY(-120%) rotate(var(--g-rot, 0deg));
}

/* --- GRUPO 2: TARJETA, CAJITAS, TAZAS (desde DERECHA) --- */
#svc-graphic-design ~ .img-service .graphic-grid .el2,
#svc-graphic-design ~ .img-service .graphic-grid .el5,
#svc-graphic-design ~ .img-service .graphic-grid .el7 {
  transform: translateX(120%) rotate(var(--g-rot, 0deg));
}

/* --- GRUPO 3: BOLSA, REMERAS, CAFÉ (desde ABAJO) --- */
#svc-graphic-design ~ .img-service .graphic-grid .el3,
#svc-graphic-design ~ .img-service .graphic-grid .el6,
#svc-graphic-design ~ .img-service .graphic-grid .el8 {
  transform: translateY(120%) rotate(var(--g-rot, 0deg));
}

/* ROTACIONES FINALES */
#svc-graphic-design ~ .img-service .graphic-grid .el1 {
  --g-rot: -8deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el2 {
  --g-rot: 6deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el3 {
  --g-rot: -4deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el4 {
  --g-rot: 5deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el5 {
  --g-rot: -2deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el6 {
  --g-rot: 3deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el7 {
  --g-rot: -5deg;
}
#svc-graphic-design ~ .img-service .graphic-grid .el8 {
  --g-rot: 4deg;
}

/* ==== CUANDO LA SECCIÓN ENTRA EN VIEWPORT (JS agrega .play al #svc-graphic-design) ==== */

/* Desde ARRIBA */
#svc-graphic-design.play ~ .img-service .graphic-grid .el1 {
  animation: g-from-top 0.85s cubic-bezier(0.22, 0.8, 0.2, 1) 0s forwards;
}

#svc-graphic-design.play ~ .img-service .graphic-grid .el4 {
  animation: g-from-top 0.9s cubic-bezier(0.22, 0.8, 0.2, 1) 0.12s forwards;
}

/* Desde DERECHA */
#svc-graphic-design.play ~ .img-service .graphic-grid .el2 {
  animation:
    /* 1) Animación de entrada (desde la derecha) */ g-from-right
      0.85s cubic-bezier(0.22, 0.8, 0.2, 1) 0.15s forwards,
    /* 2) Movimiento circular infinito */ coffeeCircle 12s linear 1.2s infinite;
}

#svc-graphic-design.play ~ .img-service .graphic-grid .el5 {
  animation: g-from-right 0.9s cubic-bezier(0.22, 0.8, 0.2, 1) 0.27s forwards;
}

#svc-graphic-design.play ~ .img-service .graphic-grid .el7 {
  animation: g-from-right 0.95s cubic-bezier(0.22, 0.8, 0.2, 1) 0.4s forwards;
}

/* Desde ABAJO */
#svc-graphic-design.play ~ .img-service .graphic-grid .el3 {
  animation: g-from-bottom 0.85s cubic-bezier(0.22, 0.8, 0.2, 1) 0.2s forwards;
}

#svc-graphic-design.play ~ .img-service .graphic-grid .el7 {
  animation:
    /* 1) entrada desde la derecha */ g-from-right 0.95s
      cubic-bezier(0.22, 0.8, 0.2, 1) 0.4s forwards,
    /* 2) círculo constante */ coffeeCircle 12s linear 1.8s infinite;
  /* 1.8s ≈ 0.4s delay + 0.95s duración + un pequeño colchón */
}

#svc-graphic-design.play ~ .img-service .graphic-grid .el8 {
  animation:
    /* 1) animación de entrada desde abajo */ g-from-bottom 0.95s
      cubic-bezier(0.22, 0.8, 0.2, 1) 0.5s forwards,
    /* 2) loop suave después de la entrada */ coffeeFloat 8s ease-in-out 1.6s
      infinite;
  /* 1.6s ≈ 0.5s delay + 0.95s duration + pequeño colchón */
}

/* KEYFRAMES IGUALES A LOS QUE YA TENÍAS */
@keyframes g-from-top {
  0% {
    opacity: 0;
    transform: translateY(-120%) rotate(var(--g-rot, 0deg));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--g-rot, 0deg));
  }
}

@keyframes g-from-right {
  0% {
    opacity: 0;
    transform: translateX(120%) rotate(var(--g-rot, 0deg));
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(var(--g-rot, 0deg));
  }
}

@keyframes g-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(120%) rotate(var(--g-rot, 0deg));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--g-rot, 0deg));
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #svc-graphic-design ~ .img-service .graphic-grid .g-el {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(var(--g-rot, 0deg)) !important;
    animation: none !important;
  }
}

/* --- Fade-in para imágenes mobile --- */
.img-mobile {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.img-mobile.visible {
  opacity: 1;
  transform: translateY(0);
}

.plan-contact a {
  color: var(--background);
}

#black {
  color: var(--main-bg);
}

.img-mobile {
  display: none;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 900px) {
  .container {
    padding: 0;
    padding-top: 100px;
  }

  .service {
    flex-direction: column;
    text-align: center;
    gap: 1;
  }

  .info-service,
  .img-service {
    max-width: 100%;
  }

  .info-service {
    align-items: center;
  }

  #svc-branding .info-service {
    flex: none;
    max-width: 100%;
    margin-bottom: 70px;
  }

  .info-service p {
    max-width: 90%;
  }

  .learn-more {
    align-self: center;
  }

  #svc-branding .img-service {
    max-width: 100%;
    width: 100%;
    height: auto;
    overflow: hidden;
    justify-content: center;
  }

  #svc-branding .img-service img {
    width: 100%;
    height: 50%;
    transform: none;
    border-radius: 10px;
  }

  #svc-branding .img-service > img:nth-of-type(1) {
    margin-left: 0;
  }

  #svc-branding .img-animation.active > img:first-child {
    animation: brandingScrollUpMobile 40s linear infinite !important;
  }

  #svc-content-creator ~ .img-service .img-animation {
    display: none;
  }

  #svc-graphic-design ~ .img-service .img-animation {
    display: none;
  }

  #svc-social .img-service .img-animation {
    display: none;
  }

  #svc-social {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  #svc-sitio ~ .img-service .img-animation img {
    width: 80%;
    transform: none;
    border-radius: 8px;
  }

  #svc-graphic-design ~ .img-service {
    height: auto;
  }

  .img-mobile {
    display: block;
  }
}

@keyframes brandingScrollUpMobile {
  0% {
    transform: translateY(0%) translateX(0%);
  }

  100% {
    transform: translateY(10%) translateX(0%);
  }
}

@media (max-width: 600px) {
  .services {
    gap: 90px;
  }

  .container > .wrapper {
    grid-template-columns: 1fr !important; /* sin columna angosta */
    column-gap: 0 !important; /* sin separación lateral extra */
  }

  /* Oculta TODO el bloque de progreso (track, fill y dots) */
  .container > .wrapper .progress {
    display: none !important;
  }
}

/* ==== MICRO CTA FINAL ==== */

.micro-cta {
  width: 100%;
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.micro-cta-content {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.micro-cta h2 {
  font-family: var(--title);
  font-size: clamp(40px, 5vw, 70px);
  color: var(--text);
  letter-spacing: 2px;
  font-weight: 300;
}

.bold{
  font-weight: 700;
}

.micro-cta p {
  font-size: clamp(16px, 1.1vw, 18px);
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  line-height: 1.6;
}

/* El botón reutiliza exactamente .learn-more */
.micro-cta-btn {
  margin-top: 16px;
}


.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 64px;

  background: #25d366;
  color: #ffffff;

  /* 🔹 En vez de 50% para círculo, usamos px para esquinas redondeadas */
  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;        /* tamaño del ícono */
  z-index: 999;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;

  /* 🔥 ANIMACIÓN PULSE */
  animation: pulse 1.6s infinite ease-in-out;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@media (max-width: 769px) {
  .whatsapp-float {
    width: 56px;
    height: 56px;
    font-size: 26px;
    bottom: 16px;
    right: 16px;
  }
}