/* Enhancements. Se carga después de styles.css. */

/* Quita el flash gris al tocar en móvil */
* {
  -webkit-tap-highlight-color: transparent;
}

/* display:contents evita que <picture> rompa el sizing de los logos */
picture {
  display: contents;
}

/* Fondo global: gradiente estático en lugar del canvas animado */
.dynamic-background {
  opacity: 1;
  background:
    radial-gradient(62% 52% at 12% -6%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(55% 45% at 90% 6%, rgba(109, 40, 217, 0.16), transparent 62%),
    radial-gradient(48% 48% at 50% 110%, rgba(139, 92, 246, 0.10), transparent 66%),
    #0a0a0a;
}

/* Rendimiento en mobile: blur más liviano */
@media (max-width: 480px) {
  .navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .navbar .nav-menu {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .hero-background .gradient-orb {
    display: none;
  }
}

/* Nav oculto en el hero, aparece al deslizar (.nav-hidden la gestiona script.js) */
.navbar {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  will-change: transform;
}
.navbar.nav-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .navbar.nav-hidden {
    transform: none;
  }
}

/* Acabado premium del nav cuando aparece (siempre en estado .scrolled) */
.navbar.scrolled {
  background: rgba(13, 11, 20, 0.66);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid transparent;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Línea inferior con gradiente morado y glow sutil */
.navbar.scrolled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(139, 92, 246, 0.55) 30%,
    rgba(167, 139, 250, 0.45) 50%,
    rgba(139, 92, 246, 0.55) 70%,
    transparent);
}
/* Botón CTA del nav: un poco más vivo */
.nav-cta {
  box-shadow: 0 8px 22px -6px rgba(139, 92, 246, 0.55);
}
.nav-cta:hover {
  box-shadow: 0 12px 28px -6px rgba(139, 92, 246, 0.7);
}
/* Subrayado activo/hover de los enlaces un pelín más marcado */
.nav-menu a::after {
  height: 2px;
  bottom: -5px;
  border-radius: 2px;
}

/* Hero en mobile: visual compacto debajo del texto */
@media (max-width: 768px) {
  .hero-visual {
    display: flex !important;
    order: 2;
    height: auto;
    width: 100%;
    margin-top: 4px;
  }
  .visual-container {
    height: auto;
  }
  .hero-image-wrapper {
    max-width: 250px;
    height: auto;
  }
  .hero-image {
    max-height: 420px;
  }
  .hero-text {
    order: 1;
  }
  .hero {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .hero-image-wrapper {
    max-width: 210px;
  }
  .hero-image {
    max-height: 360px;
  }
}

/* Legibilidad en mobile: sube fuentes pequeñas */
@media (max-width: 768px) {
  .card-description {
    font-size: 14px;
    line-height: 1.55;
  }
  .benefit-description,
  .differentiator-description,
  .step-description,
  .transformation-description {
    font-size: 14.5px;
    line-height: 1.6;
  }
  .service-features li,
  .transformation-features li,
  .use-case-content li {
    font-size: 14px;
  }
  .stat-label {
    font-size: 13px;
  }
  .donut-label {
    font-size: 12px;
  }
  .label-before,
  .label-after {
    font-size: 12.5px;
  }
  .footer-contact a,
  .footer-links a {
    font-size: 15px;
  }
}

/* Áreas táctiles >=44px en mobile */
@media (max-width: 768px) {
  .hamburger {
    padding: 10px;
    box-sizing: content-box;
    margin-right: -10px;
  }
  .promo-close {
    width: 40px;
    height: 40px;
  }
  .footer-links a {
    display: inline-block;
    padding: 7px 0;
  }
  .footer-contact li {
    margin-bottom: 4px;
  }
  .faq-question {
    min-height: 56px;
  }
}

/* Feedback táctil de las cards */
.benefit-card,
.service-card,
.use-case-card,
.differentiator-item,
.problem-card,
.solution-card,
.step-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.benefit-card:active,
.service-card:active,
.use-case-card:active,
.problem-card:active,
.solution-card:active {
  transform: scale(0.99);
}

/* Botón primario: anillo de foco */
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.45), 0 12px 32px rgba(139, 92, 246, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card:active,
  .service-card:active,
  .use-case-card:active,
  .problem-card:active,
  .solution-card:active {
    transform: none;
  }
}


/* Librería de efectos. Clases utilitarias con prefijo .fx-* */

/* Tokens de motion locales */
:root {
  --fx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --fx-dur: 0.7s;
  --fx-distance: 24px;
  --fx-blur: 10px;
}

/* Reveal on scroll. El estado oculto solo aplica bajo html.fx-js */
.fx-js .fx-reveal {
  opacity: 0;
  transform: translateY(var(--fx-distance));
  transition:
    opacity var(--fx-dur) var(--fx-ease-out),
    transform var(--fx-dur) var(--fx-ease-out),
    filter var(--fx-dur) var(--fx-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.fx-js .fx-reveal.fx-blur-in {
  filter: blur(var(--fx-blur));
  transform: translateY(calc(var(--fx-distance) * 0.6));
}

.fx-js .fx-reveal.fx-fade {
  transform: none;
}

.fx-js .fx-reveal.fx-scale-in {
  transform: translateY(var(--fx-distance)) scale(0.96);
}

.fx-js .fx-reveal.fx-slide-left {
  transform: translateX(calc(var(--fx-distance) * -1.4));
}
.fx-js .fx-reveal.fx-slide-right {
  transform: translateX(calc(var(--fx-distance) * 1.4));
}

.fx-js .fx-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Blur-in / fade-up de texto al cargar. Delay por --fx-delay */
.fx-js .fx-text-in {
  animation: fxBlurUp var(--fx-dur) var(--fx-ease-out) both;
  animation-delay: var(--fx-delay, 0ms);
}
.fx-js .fx-text-in.fx-fade-up {
  animation-name: fxFadeUp;
}

@keyframes fxBlurUp {
  from { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes fxFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fondo aurora: capa ::before con radiales morados en movimiento lento */
.aurora-bg {
  position: relative;
  isolation: isolate;
  contain: layout paint;
}
.aurora-bg > *:not(.aurora-bg::before) {
  position: relative;
  z-index: 1;
}
.aurora-bg::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(45% 55% at 80% 70%, rgba(109, 40, 217, 0.20), transparent 72%),
    radial-gradient(35% 45% at 60% 20%, rgba(167, 139, 250, 0.14), transparent 70%);
  filter: blur(28px);
  opacity: 0.85;
  animation: fxAurora 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes fxAurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg);  opacity: 0.7; }
  50%  { transform: translate3d(3%, 2%, 0)   scale(1.12) rotate(4deg);  opacity: 0.95; }
  100% { transform: translate3d(-2%, 3%, 0)  scale(1.06) rotate(-3deg); opacity: 0.75; }
}

/* Barrido de luz al hover/foco (.fx-shine, vía ::after) */
.fx-shine {
  position: relative;
  overflow: hidden;
}
.fx-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 0.7s var(--fx-ease-soft);
}
.fx-shine:hover::after,
.fx-shine:focus-visible::after {
  left: 140%;
}
.fx-shine > * {
  position: relative;
  z-index: 2;
}

/* Borde gradiente animado por giro de cónico vía mask (.fx-gradient-border) */
.fx-gradient-border {
  position: relative;
  z-index: 0;
}
.fx-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--fx-angle, 0deg),
    var(--accent-purple),
    var(--primary-purple),
    var(--dark-purple),
    var(--primary-purple),
    var(--accent-purple)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fxBorderSpin 6s linear infinite;
}

/* Sin soporte de @property, el borde queda estático */
@property --fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes fxBorderSpin {
  to { --fx-angle: 360deg; }
}

/* Lift al hover (.fx-lift), solo en dispositivos con hover real */
.fx-lift {
  transition:
    transform 0.35s var(--fx-ease-out),
    box-shadow 0.35s var(--fx-ease-out);
}
@media (hover: hover) {
  .fx-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(139, 92, 246, 0.25);
  }
}

/* Reduced motion: neutraliza la librería; los reveals saltan a su estado final */
@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-reveal,
  .fx-js .fx-reveal.fx-blur-in,
  .fx-js .fx-reveal.fx-scale-in,
  .fx-js .fx-reveal.fx-slide-left,
  .fx-js .fx-reveal.fx-slide-right,
  .fx-js .fx-reveal.fx-fade {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .fx-js .fx-text-in,
  .fx-js .fx-text-in.fx-fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .aurora-bg::before,
  .fx-gradient-border::before {
    animation: none !important;
  }
  .fx-shine::after {
    display: none !important;
  }
  .fx-lift:hover {
    transform: none !important;
  }
}


/* Hero: entrada del título y subtítulo */

/* Estado oculto bajo html.fx-js; sin JS el hero queda visible */
html.fx-js .hero .hero-title,
html.fx-js .hero .hero-subtitle {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.fx-js .hero .hero-subtitle {
  transition-delay: 0.12s;
}

/* Revelado */
html.fx-js .hero .hero-text.visible .hero-title,
html.fx-js .hero .hero-text.visible .hero-subtitle,
html.fx-ready .hero .hero-title,
html.fx-ready .hero .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: auto;
}

/* Shine automático del botón primario (.pulse) */
.hero .hero-cta .btn-primary.pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
  animation: codexyHeroShine 4.5s ease-in-out infinite;
}
@keyframes codexyHeroShine {
  0%   { left: -130%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Hero mobile: entrada del visual como fade-up (sin desplazamiento lateral) */
@media (max-width: 768px) {
  .hero .hero-visual.fade-in-right {
    transform: translateY(28px);
  }
  .hero .hero-visual.fade-in-right.visible {
    transform: translateY(0);
  }
  .hero .hero-cta .btn {
    min-height: 52px;
    padding: 15px 24px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hero .hero-cta .btn {
    min-height: 52px;
    padding: 16px 22px;
    font-size: 16px;
    border-radius: 44px;
  }
}

/* Hero ≤360px: títulos a un mínimo cómodo */
@media (max-width: 360px) {
  .hero .hero-title {
    font-size: 27px;
    line-height: 1.22;
  }
  .hero .hero-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* Anti-overflow horizontal del visual */
@media (max-width: 768px) {
  .hero,
  .hero .container,
  .hero-content {
    max-width: 100%;
  }
  .hero .hero-image {
    max-width: 100%;
  }
}

/* Reduced motion: fuerza el hero a estado visible */
@media (prefers-reduced-motion: reduce) {
  html.fx-js .hero .hero-title,
  html.fx-js .hero .hero-subtitle,
  .hero .hero-title,
  .hero .hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero .hero-cta .btn-primary.pulse::after {
    display: none !important;
  }
  .hero .hero-visual .hero-image {
    animation: none !important;
  }
  .hero .hero-visual.fade-in-right,
  .hero .hero-visual.fade-in-right.visible {
    transform: none !important;
  }
}


/* Navbar y menú hamburguesa mobile (<=768px) */

@media (max-width: 768px) {

  /* Hamburger: área táctil >=44x44 sin agrandar los spans */
  .navbar .hamburger {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 11px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-fast);
  }
  .navbar .hamburger:hover {
    background: rgba(139, 92, 246, 0.12);
  }
  .navbar .hamburger:active {
    background: rgba(139, 92, 246, 0.20);
  }
  .navbar .hamburger:focus-visible {
    background: rgba(139, 92, 246, 0.12);
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
  }

  /* Morph de las barras a 'X' al abrir */
  .navbar .hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .navbar .hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }
  .navbar .hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
  .navbar .hamburger span {
    transform-origin: center;
    transition: transform var(--transition-base),
                opacity var(--transition-fast),
                background-color var(--transition-fast);
  }
  .navbar .hamburger.active span {
    background: var(--accent-purple);
  }

  /* Panel mobile: blur + fondo aurora sutil */
  .navbar .nav-menu {
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
      radial-gradient(120% 50% at 0% 100%, rgba(109, 40, 217, 0.12), transparent 55%),
      rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    gap: 8px;
    padding: 28px 22px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .navbar .nav-menu li {
    width: 100%;
  }
  .navbar .nav-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 17px;
    padding: 12px 14px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.10);
    transition: color var(--transition-fast),
                background-color var(--transition-fast),
                transform var(--transition-base),
                opacity var(--transition-base);
  }
  .navbar .nav-menu a:hover,
  .navbar .nav-menu a:focus-visible {
    background: rgba(139, 92, 246, 0.10);
    color: var(--text-primary);
  }
  /* oculta el subrayado ::after del desktop en la lista mobile */
  .navbar .nav-menu a::after {
    display: none;
  }

  /* CTA destacado dentro del panel */
  .navbar .nav-menu a.nav-cta {
    position: relative;
    justify-content: center;
    min-height: 52px;
    margin-top: 18px;
    border-bottom: none;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.28);
  }
  .navbar .nav-menu a.nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 8px 34px rgba(139, 92, 246, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  .navbar .nav-menu.active a.nav-cta::before {
    animation: enhNavCtaGlow 2.6s ease-in-out infinite;
  }
  @keyframes enhNavCtaGlow {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }

  /* Stagger de entrada de los items, disparado con .active */
  .navbar .nav-menu li {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity var(--transition-base), transform var(--transition-base);
  }
  .navbar .nav-menu.active li {
    opacity: 1;
    transform: translateX(0);
  }
  .navbar .nav-menu.active li:nth-child(1) { transition-delay: 0.06s; }
  .navbar .nav-menu.active li:nth-child(2) { transition-delay: 0.11s; }
  .navbar .nav-menu.active li:nth-child(3) { transition-delay: 0.16s; }
  .navbar .nav-menu.active li:nth-child(4) { transition-delay: 0.21s; }
  .navbar .nav-menu.active li:nth-child(5) { transition-delay: 0.26s; }
  .navbar .nav-menu.active li:nth-child(6) { transition-delay: 0.31s; }
  .navbar .nav-menu.active li:nth-child(7) { transition-delay: 0.36s; }
}

/* Reduced motion: sin transforms, glow ni stagger */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .navbar .nav-menu li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .navbar .nav-menu.active li { transition-delay: 0s !important; }
  .navbar .nav-menu a.nav-cta::before {
    animation: none !important;
    opacity: 0 !important;
  }
  .navbar .hamburger span { transition: opacity 0.001ms linear !important; }
}


/* Cards: legibilidad mobile + reveal escalonado + hover/tap */

/* Legibilidad mobile: sube fuentes pequeñas */
@media (max-width: 480px) {
  .problem-card .card-description,
  .solution-card .card-description {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .use-case-card .label-before,
  .use-case-card .label-after {
    font-size: 13px;
    padding: 4px 11px;
  }

  .use-case-card .problem-section li,
  .use-case-card .solution-section li {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .transformation-block .donut-label {
    font-size: 13px;
    line-height: 1.45;
  }

  .service-card .service-features li {
    font-size: 14px;
    line-height: 1.45;
  }

  .benefit-card .benefit-description {
    font-size: 14px;
    line-height: 1.55;
  }

  .transformation-block .transformation-features li {
    font-size: 14px;
    line-height: 1.5;
  }

  .differentiator-item .differentiator-description {
    font-size: 14.5px;
    line-height: 1.6;
  }
}

/* Espaciado y padding en una sola columna */
@media (max-width: 640px) {
  .benefits-grid { gap: 16px; }
  .services-grid { gap: 18px; }
  .use-cases-grid { gap: 18px; }
  .problems-solutions .cards-container { gap: 14px; }
  .differentiators-content { gap: 18px; }

  .benefit-card { padding: 24px 20px; }
  .service-card { padding: 26px 22px; }
  .use-case-card { padding: 22px 20px; }

  .use-case-card .solution-section { margin-top: 14px; }
}

@media (max-width: 480px) {
  .benefit-card { padding: 22px 18px; }
  .service-card { padding: 22px 18px; }
  .use-case-card { padding: 20px 18px; }
  .problem-card,
  .solution-card { padding: 16px; gap: 12px; }
}

/* Reveal on scroll escalonado (.cdx-reveal -> .cdx-in vía effects.js) */
.cdx-reveal {
  filter: blur(5px);
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--cdx-delay, 0ms);
}

/* will-change solo mientras está oculto */
.cdx-reveal.cdx-armed {
  will-change: opacity, transform, filter;
}

.cdx-reveal.cdx-in {
  filter: blur(0);
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Hover/tap: borde gradiente + leve elevación. .differentiator-item sin borde */
.benefit-card,
.service-card,
.use-case-card,
.differentiator-item,
.problem-card,
.solution-card {
  position: relative;
}

.benefit-card.cdx-edge::after,
.service-card.cdx-edge::after,
.use-case-card.cdx-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
              var(--accent-purple, #a78bfa),
              var(--primary-purple, #8b5cf6) 45%,
              transparent 80%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

/* Solo en dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .benefit-card.cdx-edge:hover::after,
  .service-card.cdx-edge:hover::after,
  .use-case-card.cdx-edge:hover::after {
    opacity: 1;
  }
  .benefit-card.cdx-edge:hover,
  .service-card.cdx-edge:hover,
  .use-case-card.cdx-edge:hover {
    transform: translateY(-5px);
  }
  .differentiator-item.cdx-lift:hover {
    transform: translateY(-4px);
  }
}

/* Tap state en mobile */
.benefit-card.cdx-press::after,
.service-card.cdx-press::after,
.use-case-card.cdx-press::after {
  opacity: 1;
}
.benefit-card.cdx-press,
.service-card.cdx-press,
.use-case-card.cdx-press {
  transform: translateY(-2px) scale(0.995);
  transition: transform 0.18s ease;
}

.differentiator-item.cdx-press,
.problem-card.cdx-press,
.solution-card.cdx-press {
  transform: translateY(-2px);
  transition: transform 0.18s ease;
}

/* Reduced motion: revela al instante, sin blur/escala/elevación */
@media (prefers-reduced-motion: reduce) {
  .cdx-reveal,
  .cdx-reveal.cdx-armed,
  .cdx-reveal.cdx-in {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
    transition: none !important;
  }
  .benefit-card.cdx-edge:hover,
  .service-card.cdx-edge:hover,
  .use-case-card.cdx-edge:hover,
  .differentiator-item.cdx-lift:hover,
  .benefit-card.cdx-press,
  .service-card.cdx-press,
  .use-case-card.cdx-press,
  .differentiator-item.cdx-press,
  .problem-card.cdx-press,
  .solution-card.cdx-press {
    transform: none !important;
  }
}


/* Metodología, donuts y calculator CTA (mobile) */

/* Reveal propio (.fx-reveal -> .is-inview), activado por effects.js en mobile */
.fx-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Tablet / mobile grande (<=768px) */
@media (max-width: 768px) {

  /* Metodología: timeline vertical numerado */
  .methodology-steps {
    gap: 0;
    max-width: 520px;
    position: relative;
  }

  .methodology-steps .step-connector {
    display: none !important;
  }

  /* Riel vertical detrás de los números */
  .methodology-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 28px;
    width: 2px;
    background: linear-gradient(180deg,
                rgba(139, 92, 246, 0.55),
                rgba(109, 40, 217, 0.15));
    z-index: 0;
    pointer-events: none;
  }

  /* Card en fila: número/icono a la izquierda, texto a la derecha */
  .methodology-steps .step-card {
    flex: none;
    width: 100%;
    min-width: 0;
    text-align: left;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "num  title"
      "icon body";
    align-items: start;
    column-gap: 18px;
    row-gap: 6px;
    padding: 14px 0;
    position: relative;
    z-index: 1;
  }

  .methodology-steps .step-number {
    grid-area: num;
    margin: 0;
    width: 56px;
    height: 56px;
    font-size: 22px;
    /* aro que tapa el riel */
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4),
                0 0 0 6px var(--bg-secondary);
  }

  .methodology-steps .step-icon {
    grid-area: icon;
    margin: 4px auto 0;
    width: 56px;
    height: 56px;
  }

  .methodology-steps .step-title {
    grid-area: title;
    align-self: center;
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
  }

  .methodology-steps .step-description {
    grid-area: body;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
  }

  /* en touch, micro-realce del número sin giro */
  .methodology-steps .step-card:hover .step-number {
    transform: scale(1.06);
  }

  /* Donuts */
  .transformation-visual .donut-chart {
    margin-left: auto;
    margin-right: auto;
  }

  .donut-content {
    width: 86%;
    max-width: 220px;
  }

  .donut-label {
    font-size: 13px;
    max-width: 200px;
    line-height: 1.45;
  }

  .donut-sub-text {
    font-size: 14px;
  }

  /* Calculator CTA */
  .calculator-cta-content {
    border-radius: 24px;
  }

  .btn-calculator-cta {
    width: 100%;
    max-width: 420px;
    justify-content: center;
    min-height: 52px;
  }

  .calculator-cta-features {
    align-items: center;
  }

  .cta-feature-item {
    font-size: 14px;
    justify-content: center;
  }
}

/* Mobile (<=480px) */
@media (max-width: 480px) {

  /* Metodología */
  .methodology-steps::before {
    left: 24px;
    top: 24px;
    bottom: 24px;
  }

  .methodology-steps .step-card {
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
    padding: 12px 0;
  }

  .methodology-steps .step-number {
    width: 48px;
    height: 48px;
    font-size: 18px;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4),
                0 0 0 5px var(--bg-secondary);
  }

  .methodology-steps .step-icon {
    width: 48px;
    height: 48px;
  }

  .methodology-steps .step-icon svg {
    width: 28px;
    height: 28px;
  }

  .methodology-steps .step-title {
    font-size: 17.5px;
  }

  .methodology-steps .step-description {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Donuts */
  .donut-content {
    width: 90%;
    max-width: 180px;
  }

  .donut-label {
    font-size: 13px;
    max-width: 170px;
    line-height: 1.4;
  }

  .donut-sub-text {
    font-size: 13px;
  }

  /* Calculator CTA */
  .btn-calculator-cta {
    width: 100%;
    max-width: none;
    padding: 16px 24px;
    min-height: 52px;
  }

  .calculator-cta-features {
    gap: 14px;
  }

  .cta-feature-item {
    font-size: 14px;
  }
}

/* Reduced motion: neutraliza el reveal propio y el micro-motion touch */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  @media (max-width: 768px) {
    .methodology-steps .step-card:hover .step-number {
      transform: none;
    }
  }
}


/* CTA contacto, FAQ, footer, promo y floating CTA */

/* Tokens locales de esta zona */
:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-tap-min: 44px;
  --fx-reveal-dur: 0.7s;
}

/* Reveal blur-in + fade-up; el estado oculto solo aplica con .fx-armed */
.fx-armed.fx-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  will-change: opacity, transform;
  transition: opacity var(--fx-reveal-dur) var(--fx-ease),
              transform var(--fx-reveal-dur) var(--fx-ease),
              filter var(--fx-reveal-dur) var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-armed.fx-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: auto;
}

/* CTA contacto: borde gradiente animado (mobile) + tap targets */

/* Anti-overflow del embed Cal.com */
.cal-embed-container {
  max-width: 100%;
}
.cal-embed-container #my-cal-inline-30min {
  max-width: 100%;
}

@media (max-width: 768px) {
  .cal-embed-container {
    position: relative;
    isolation: isolate;
  }
  .cal-embed-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(130deg,
                rgba(167, 139, 250, 0.55),
                rgba(139, 92, 246, 0.15) 40%,
                rgba(109, 40, 217, 0.45));
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    animation: fxBorderFlow 8s linear infinite;
    z-index: 0;
  }
}
@keyframes fxBorderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Botón WhatsApp como tap target cómodo en mobile */
@media (max-width: 640px) {
  .whatsapp-contact-section .btn-whatsapp {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
  }
  .whatsapp-contact-text {
    font-size: 16px;
  }
  .cta-benefit-item {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* FAQ: flecha animada + despliegue más fluido */
.faq-icon {
  transition: transform 0.45s var(--fx-ease), color 0.3s ease, filter 0.3s ease;
}
.faq-item.active .faq-icon {
  color: var(--accent-purple);
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55));
}
.faq-answer {
  transition: max-height 0.5s var(--fx-ease), padding 0.35s var(--fx-ease);
}
/* Fade-up interno de la respuesta al abrir */
.faq-answer p {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease 0.05s, transform 0.45s var(--fx-ease) 0.05s;
}
.faq-item.active .faq-answer p {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .faq-question {
    min-height: var(--fx-tap-min);
    gap: 12px;
  }
  .faq-question h3 {
    font-size: 16px;
    line-height: 1.45;
  }
  .faq-answer p {
    font-size: 15px;
    line-height: 1.7;
  }
  /* amplía el max-height del JS para respuestas largas */
  .faq-item.active .faq-answer {
    max-height: 1200px;
  }
}
@media (max-width: 480px) {
  .faq-answer p {
    font-size: 14px;
  }
  .faq-item.active .faq-answer {
    max-height: 1400px;
  }
}

/* Footer: espaciado, legibilidad y tap targets >=40px en mobile */
@media (max-width: 768px) {
  .footer-content {
    gap: 36px;
  }
  .footer-links li {
    margin-bottom: 4px;
  }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 2px;
    font-size: 15px;
    line-height: 1.4;
  }
  .footer-contact li {
    min-height: 40px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  .footer-contact a {
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
  }
  .footer-legal-links {
    gap: 8px 14px;
    row-gap: 4px;
  }
  .footer-legal-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 6px 2px;
    font-size: 14px;
  }
  .footer-bottom {
    gap: 14px;
    padding-top: 26px;
    line-height: 1.6;
  }
  .footer-description {
    font-size: 15px;
    line-height: 1.75;
  }
}

/* Promo banner: tap target del cierre en mobile */
@media (max-width: 768px) {
  .promo-close {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 480px) {
  .promo-close {
    top: 10px;
    right: 10px;
  }
}

/* Floating CTA: transición del show/hide + tap target en <=480px */
.floating-cta {
  transition: opacity 0.35s var(--fx-ease);
}
@media (max-width: 480px) {
  .floating-cta-button {
    width: 56px;
    height: 56px;
    padding: 0;
  }
  .floating-cta-button svg {
    width: 24px;
    height: 24px;
  }
}

/* Reduced motion: neutraliza el movimiento de esta zona */
@media (prefers-reduced-motion: reduce) {
  .fx-armed.fx-reveal,
  .fx-armed.fx-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .cal-embed-container::after {
    animation: none !important;
  }
  .faq-answer p {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .floating-cta {
    transition: none !important;
  }
}

/* Mobile: ajuste de donuts y timeline */
@media (max-width: 768px) {
  .methodology-steps .step-icon {
    display: none;
  }

  /* Donut más grande para que el contenido quepa dentro del aro */
  .transformation-visual .donut-chart {
    width: 300px;
    height: 300px;
    max-width: 100%;
  }
  .transformation-block .donut-content {
    width: 66%;
    max-width: 200px;
  }
  .transformation-block .donut-main-text {
    font-size: 44px;
  }
  .transformation-block .donut-sub-text {
    font-size: 13.5px;
    letter-spacing: 0.2px;
  }
  .transformation-block .donut-label {
    font-size: 12.5px;
    max-width: 180px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .transformation-visual .donut-chart {
    width: 280px;
    height: 280px;
  }
  .transformation-block .donut-content {
    width: 66%;
    max-width: 185px;
  }
  .transformation-block .donut-main-text { font-size: 40px; }
  .transformation-block .donut-sub-text { font-size: 13px; }
  .transformation-block .donut-label { font-size: 12px; max-width: 168px; }
}

@media (max-width: 360px) {
  .transformation-visual .donut-chart {
    width: 256px;
    height: 256px;
  }
}

/* Casos de uso: cartas apiladas (sticky stack) en mobile */
@media (max-width: 768px) {
  .use-cases-grid {
    display: block;
  }
  .use-cases-grid .use-case-card {
    position: sticky;
    margin: 0 0 26px;
    background: rgba(18, 18, 22, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.5),
                0 10px 30px rgba(0, 0, 0, 0.35);
  }
  .use-cases-grid .use-case-card:nth-child(1) { top: 82px; }
  .use-cases-grid .use-case-card:nth-child(2) { top: 92px; }
  .use-cases-grid .use-case-card:nth-child(3) { top: 102px; }
  .use-cases-grid .use-case-card:nth-child(4) { top: 112px; }
  .use-cases-grid .use-case-card:last-child { margin-bottom: 0; }
}

/* Reduced motion: sin apilado */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .use-cases-grid .use-case-card {
    position: static;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

/* Desktop (>=1024px): contenedor más ancho para las grillas */
@media (min-width: 1024px) {
  .container {
    max-width: 1360px;
  }

  /* Beneficios: 6 tarjetas en 3 columnas */
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .use-cases-grid {
    gap: 36px;
  }
  .marketing-services .services-grid {
    gap: 32px;
  }
}

/* Divisores difuminados entre secciones */
.marketing-services,
.differentiators {
  position: relative;
}
.marketing-services::after,
.differentiators::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 1000px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.5) 50%, transparent 100%);
  box-shadow: 0 0 7px rgba(139, 92, 246, 0.28);
  pointer-events: none;
  z-index: 1;
}

/* Footer */
.footer {
  position: relative;
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(139, 92, 246, 0.09), transparent 60%),
    var(--bg-primary);
  padding: 72px 0 32px;
  border-top: none;
}
/* Línea difuminada superior del footer */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 1200px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.45), transparent);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.25);
  pointer-events: none;
}

/* Logo */
.footer-logo .logo-image {
  margin-top: 0;
  height: auto;
  width: 168px;
  max-width: 168px;
}

.footer-content {
  gap: 40px 48px;
  margin-bottom: 44px;
}

.footer-description {
  max-width: 320px;
}

/* Títulos de columna estilo eyebrow */
.footer-title {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
  padding-bottom: 12px;
}
.footer-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-purple), var(--accent-purple));
}

/* Links: micro-desplazamiento al hover */
.footer-links a {
  display: inline-block;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-links a:hover {
  transform: translateX(4px);
}

/* Contacto: iconos en chips circulares */
.footer-contact li {
  margin-bottom: 14px;
}
.footer-contact svg {
  width: 18px;
  height: 18px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.18);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.footer-contact li:hover svg {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
}

/* Columna CTA */
.footer-cta-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 260px;
}
.footer-cta-btn {
  width: 100%;
  max-width: 260px;
  justify-content: center;
}

/* Barra inferior: en fila en desktop */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 26px;
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
  }
}

/* CTA calculadora: fondo en movimiento + carta con borde animado */
.calculator-cta-section {
  position: relative;
}
/* Glow edge-lit con pulso suave */
.calculator-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: radial-gradient(ellipse 94% 90% at 50% 48%,
              transparent 30%,
              rgba(124, 58, 237, 0.10) 58%,
              rgba(139, 92, 246, 0.45) 100%);
  z-index: 0;
  pointer-events: none;
  animation: ctaStageGlow 5s ease-in-out infinite;
}
@keyframes ctaStageGlow {
  0%, 100% {
    box-shadow:
      inset 0 0 150px 6px rgba(124, 58, 237, 0.42),
      inset 0 0 55px 0 rgba(167, 139, 250, 0.30);
  }
  50% {
    box-shadow:
      inset 0 0 210px 16px rgba(124, 58, 237, 0.62),
      inset 0 0 80px 0 rgba(167, 139, 250, 0.46);
  }
}
/* Piso 3D: grilla en perspectiva */
.calculator-cta-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 240%;
  height: 72%;
  transform: translateX(-50%) perspective(330px) rotateX(64deg);
  transform-origin: bottom center;
  background:
    linear-gradient(rgba(139, 92, 246, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.34) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 52%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 52%, #000 100%);
  z-index: 0;
  pointer-events: none;
}

/* Carta: borde gradiente animado + glow que respira */
.calculator-cta-content {
  border-color: transparent;
  animation: ctaBreathe 6s ease-in-out infinite;
}
.calculator-cta-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--cta-angle, 0deg),
              #a78bfa, #f1e9ff, #8b5cf6, #6d28d9, #8b5cf6, #e9d5ff, #a78bfa);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.95))
          drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
  animation: ctaBorderSpin 4s linear infinite;
  pointer-events: none;
}

/* Segundo anillo difuso girando al revés */
.calculator-cta-content::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  padding: 6px;
  background: conic-gradient(from var(--cta-angle2, 0deg),
              transparent, rgba(167, 139, 250, 0.9), transparent 40%,
              rgba(139, 92, 246, 0.8), transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(7px);
  opacity: 0.9;
  animation: ctaBorderSpinRev 6s linear infinite;
  pointer-events: none;
}
@property --cta-angle2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ctaBorderSpinRev { to { --cta-angle2: -360deg; } }
/* Sin soporte de @property, el borde queda fijo */
@property --cta-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ctaBorderSpin { to { --cta-angle: 360deg; } }
@keyframes ctaBreathe {
  0%, 100% { box-shadow: 0 16px 60px rgba(139, 92, 246, 0.24); }
  50%      { box-shadow: 0 26px 96px rgba(139, 92, 246, 0.52); }
}
.calculator-cta-content > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .calculator-cta-section::before,
  .calculator-cta-section::after,
  .calculator-cta-content,
  .calculator-cta-content::before,
  .calculator-cta-content::after,
  .calculator-cta-icon {
    animation: none !important;
  }
  .calculator-cta-content::after {
    opacity: 0;
  }
  .calculator-cta-content {
    border-color: rgba(139, 92, 246, 0.2);
  }
}

/* Conexión hero -> CTA calculadora: el hero se desvanece en su borde inferior */
.hero-background {
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.calculator-cta-section {
  background: radial-gradient(120% 115% at 50% 45%, #05030c 0%, #0a0620 58%, #190b34 100%);
  isolation: isolate;
}

/* Casos de uso: cartas apiladas (sticky stack) en mobile */
@media (max-width: 768px) {
  .use-cases-grid {
    display: block;
  }
  .use-cases-grid .use-case-card {
    position: sticky;
    margin: 0 0 22px;
    background: rgba(19, 19, 24, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.35);
  }
  .use-cases-grid .use-case-card:nth-child(1) { top: 80px; }
  .use-cases-grid .use-case-card:nth-child(2) { top: 90px; }
  .use-cases-grid .use-case-card:nth-child(3) { top: 100px; }
  .use-cases-grid .use-case-card:nth-child(4) { top: 110px; }
  .use-cases-grid .use-case-card:last-child {
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .use-cases-grid .use-case-card {
    position: static;
  }
}


/* Efectos de interacción */

/* Spotlight: glow que sigue el cursor (solo desktop) */
@media (hover: hover) and (pointer: fine) {
  .fx-card {
    background-image: radial-gradient(220px circle at var(--mx, -300px) var(--my, -300px),
                      rgba(167, 139, 250, 0.16), transparent 65%);
    background-repeat: no-repeat;
  }
}

/* Chispas al hacer click */
.fx-spark {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #d6c8ff, #8b5cf6);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);
  pointer-events: none;
  z-index: 99999;
  animation: fxSpark 0.55s ease-out forwards;
}
@keyframes fxSpark {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.3); }
}

/* Split text del hero: cada palabra entra animada */
.hero-title.fx-split {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.hero-title.fx-split .fx-word {
  display: inline-block;
  animation: fxWordIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Texto con gradiente: se anima como una unidad (inline, solo opacidad) para
   no romper el background-clip del gradiente al partirlo en palabras */
.hero-title.fx-split .gradient-text.fx-word {
  display: inline;
  filter: none;
  animation-name: fxWordFade;
}
@keyframes fxWordIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fxWordFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Haces de luz barriendo el fondo del hero */
.hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 32%, rgba(139, 92, 246, 0.10) 44%, transparent 52%),
    linear-gradient(115deg, transparent 58%, rgba(167, 139, 250, 0.07) 68%, transparent 76%);
  background-size: 250% 250%;
  animation: heroBeams 16s linear infinite;
}
@keyframes heroBeams {
  0%   { background-position: 0% 0%; }
  100% { background-position: 250% 250%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title.fx-split .fx-word {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .hero-background::after { animation: none !important; }
  .fx-card { transform: none !important; }
}

/* Mobile: hero sin blur-in, solo fade de opacidad */
@media (max-width: 768px) {
  html.fx-js .hero .hero-title,
  html.fx-js .hero .hero-subtitle,
  .hero-title.fx-split,
  .hero-title.fx-split .fx-word,
  .hero-title.fx-split .gradient-text.fx-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
}


/* Disco de marca: texto en círculo que gira + logo central + glow */
.codexy-orbit {
  position: relative;
  width: clamp(250px, 72vw, 330px);
  height: clamp(250px, 72vw, 330px);
  margin: 4px auto 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(42, 30, 74, 0.6), rgba(11, 8, 20, 0.9));
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 70px rgba(139, 92, 246, 0.35),
              inset 0 0 46px rgba(139, 92, 246, 0.18);
  animation: orbitFloat 6s ease-in-out infinite;
  isolation: isolate;
}
@keyframes orbitFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Anillo de texto que gira */
.codexy-orbit__ring {
  position: absolute;
  inset: 0;
  animation: orbitSpin 26s linear infinite;
}
.codexy-orbit__ring svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.orbit-word {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: url(#orbitGrad);
}

/* Centro: logo + wordmark */
.codexy-orbit__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.codexy-orbit__center img {
  width: 58px;
  height: auto;
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(139, 92, 246, 0.55));
}
.codexy-orbit__center .orbit-brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #fff;
  opacity: 0.92;
}

@media (max-width: 480px) {
  .orbit-word { font-size: 12px; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .codexy-orbit,
  .codexy-orbit__ring { animation: none !important; }
}


/* Rayos de luz en el hero */

/* Desactiva la animación de fondo anterior */
.hero-background .gradient-orb { display: none !important; }
.hero-background::after { display: none !important; }

/* Contenedor de los rayos. El haz lo dibuja lightrays.js; aquí el halo de origen */
.hero-lightrays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-lightrays canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Halo de origen: bloom suave bajo el nacimiento de los rayos */
.hero-lightrays::before {
  content: "";
  position: absolute;
  top: -16%;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.30), transparent 62%);
  animation: heroRaysPulse 7s ease-in-out infinite;
}
@keyframes heroRaysPulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* Menos espacio arriba en mobile */
@media (max-width: 768px) {
  .hero { padding-top: 60px; }
}
@media (max-width: 480px) {
  .hero { padding-top: 52px; }
}
/* Desktop: el nav ya no ocupa el tope (oculto en el hero), así que
   recuperamos ese espacio para que todo el contenido —incluido el
   indicador de scroll— entre en pantalla en laptops bajas (768px de alto). */
@media (min-width: 769px) {
  .hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lightrays::before { animation: none !important; }
}

/* Hero visual: mockup en desktop, disco de marca en mobile */

/* Desktop: mockup visible, disco oculto */
.codexy-orbit--hero { display: none; }
.hero-visual .hero-mockup { display: block; }

/* Mobile: disco visible, mockup oculto */
@media (max-width: 768px) {
  .hero-visual .hero-mockup { display: none; }

  .codexy-orbit--hero {
    display: block;
    width: clamp(250px, 78vw, 360px);
    height: clamp(250px, 78vw, 360px);
    max-width: 100%;
    margin: 0 auto;
  }
  .hero-image-wrapper:has(.codexy-orbit--hero) {
    max-width: 380px;
    height: auto;
  }
}

/* Fuerza visible el hero-visual y le da una entrada propia.
   styles.css define .fade-in-right dos veces y dejaba el visual en opacity:0. */
.hero .hero-visual {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* Desktop: desliza desde la derecha */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-visual {
    animation: heroVisualIn 0.8s ease-out both !important;
  }
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Mobile: el disco entra con fade-up + leve scale */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero .hero-visual {
    animation: orbitHeroIn 0.75s ease-out both !important;
  }
}
@keyframes orbitHeroIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}