/* Tipografías locales de Looplup. */
@font-face {
  font-family: "Montserrat Looplup";
  src: url("../assets/fonts/Montserrat-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Looplup";
  src: url("../assets/fonts/Montserrat-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins Looplup";
  src: url("../assets/fonts/Poppins-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Poppins Looplup";
  src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* 1. Design tokens */
:root {
  --bg: #000;
  --panel: #10201c;
  --line: rgba(217,255,238,.16);
  --text: #f2f7f3;
  --muted: #a9b8b1;
  --acid: #d7ff5f;
  --mint: #d7ff5f;
  --mono: "Poppins Looplup", sans-serif;
  --sans: "Poppins Looplup", sans-serif;
  --heading: "Montserrat Looplup", sans-serif;
  --subtitle: "Montserrat Looplup", sans-serif;
  --radius: 1.5rem;
}

/* 2. Base and accessibility */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* Jerarquía tipográfica: títulos contundentes, subtítulos definidos y texto legible. */
h1,
h2 {
  font-family: var(--heading) !important;
  font-weight: 400 !important;
}

h3,
h4,
h5,
h6 {
  font-family: var(--subtitle) !important;
  font-weight: 600 !important;
}

/* Grid decorativa fija que aporta textura al fondo negro. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background-image: linear-gradient(rgba(215,255,95,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(215,255,95,.02) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(#000,transparent 78%);
  -webkit-mask-image: linear-gradient(#000,transparent 78%);
}

/* Partículas aleatorias, con brillo y movimiento propios. */
#particle-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#particle-field .ambient-particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  will-change: transform;
}

#particle-field .ambient-particle i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--particle-color);
  box-shadow: 0 0 var(--glow-size) var(--particle-color);
  opacity: var(--base-opacity);
  animation: particle-pulse var(--duration) ease-in-out var(--delay) infinite alternate;
}

@keyframes particle-pulse {
  to { opacity: .12; transform: scale(.48); }
}

/* Valores por defecto para enlaces y botones. */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* Texto disponible para lectores de pantalla, pero no visible. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Enlace de accesibilidad para saltar la navegación. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  background: var(--acid);
  color: #0a130e;
  padding: .75rem;
  z-index: 10;
}

.skip-link:focus {
  top: 1rem;
}

/* 3. Layout and navigation */
/* Contenedor horizontal reutilizable para todas las secciones. */
.section-shell {
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
}

/* Barra de navegación superior. */
.site-header {
  position: sticky;
  top: .8rem;
  z-index: 20;
  width: min(57rem, calc(100% - 2rem));
  height: 4.5rem;
  margin: .8rem auto 0;
  padding-inline: 1.2rem .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 150% at 7% 0%, rgba(255, 255, 255, .17), transparent 53%),
    radial-gradient(ellipse 55% 130% at 92% 115%, rgba(166, 255, 203, .13), transparent 60%),
    linear-gradient(116deg, rgba(23, 34, 29, .68), rgba(6, 12, 10, .4) 48%, rgba(27, 47, 37, .56));
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .18);
}

/* Reflejo fluido que da profundidad al cristal sin añadir un borde. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, .16) 46%, transparent 62%),
    radial-gradient(ellipse 34% 160% at 0% 50%, rgba(197, 255, 217, .12), transparent 72%);
  background-size: 185% 100%, 150% 100%;
  background-position: 115% 0, 0 0;
  animation: liquid-glass-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

@keyframes liquid-glass-drift {
  to {
    background-position: -22% 0, 100% 0;
  }
}

/* Agrupa logo y enlaces con un espaciado compacto. */
.nav-center {
  display: flex;
  align-items: center;
  gap: clamp(1.65rem, 3vw, 2.75rem);
}

/* Marca luminy. y construcción de su isotipo. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.42rem;
}

/* Isologo oficial en blanco, integrado directamente sobre el fondo del sitio. */
.brand-logo {
  display: block;
  width: clamp(8.5rem, 12vw, 11.5rem);
  height: auto;
}

/* Enlaces de las secciones principales. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .07em;
}

.site-nav>a:not(.button) {
  color: var(--muted);
  transition: color .2s;
}

.site-nav>a:not(.button):hover {
  color: var(--acid);
}

/* CTA integrado en el conjunto central de navegación. */
.header-cta {
  flex: 0 0 auto;
  padding: .68rem 1rem;
  font-size: .7rem;
  border-radius: 999px;
}

/* Botón de menú: solo se activa en la versión móvil. */
.menu-toggle {
  display: none;
}

/* 4. Buttons */
/* Estilo compartido por todos los botones y sus variantes. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1rem 1.2rem;
  font-size: .76rem;
  font-family: var(--mono);
  letter-spacing: .02em;
  transition: transform .2s,background .2s,color .2s;
}

.button:not(.button-primary) {
  background: rgba(151, 255, 71, .06);
  border-color: rgba(184, 255, 121, .38);
  box-shadow: 0 0 30px rgba(129, 255, 61, .16), inset 0 0 20px rgba(129, 255, 61, .05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.button:hover {
  transform: translateY(-3px);
}

.button:not(.button-primary):hover {
  background: rgba(151, 255, 71, .12);
  border-color: var(--acid);
  box-shadow: 0 0 42px rgba(129, 255, 61, .3), inset 0 0 24px rgba(129, 255, 61, .09);
}

.button span {
  font-size: 1rem;
}

.button-primary {
  background: var(--acid);
  color: #0b130e;
  border-color: var(--acid);
}

.button-small {
  padding: .7rem .95rem;
  font-size: .64rem;
}

/* 5. Hero */
/* Primera pantalla: presenta la propuesta de valor principal. */
.hero {
  min-height: calc(100svh - 7rem);
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  padding-block: 4rem 6rem;
}

/* Puente visual entre el hero y la sección de Estadísticas. */
.hero::after {
  display: none;
}

/* Contenedor del contenido que se muestra por encima de la rejilla. */
.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.hero-brand-glow {
  position: relative;
  isolation: isolate;
  width: 100%;
}

.hero-brand-lockup {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-text-lockup {
  width: fit-content;
  max-width: 100%;
}

.hero-brand-glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(76%, 58rem);
  height: 230%;
  left: 12%;
  top: -55%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(207, 255, 51, .86) 0%, rgba(135, 255, 63, .48) 28%, rgba(67, 255, 121, .2) 53%, transparent 74%);
  filter: blur(70px);
  opacity: 1;
  transform: translateZ(0);
  animation: neon-settle .9s .18s cubic-bezier(.16,1,.3,1) both;
}

/* Reinicia el encendido del halo al volver al inicio desde la marca del menú. */
.hero-brand-glow.is-replaying::before {
  animation: neon-settle .9s cubic-bezier(.16,1,.3,1) both;
}

/* Etiqueta pequeña usada para contextualizar una sección. */
.eyebrow {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .09em;
  color: var(--mint);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.55rem;
}

.eyebrow span {
  width: 1.4rem;
  height: 1px;
  background: var(--acid);
}

/* Reinicio de márgenes y tipografía principal del titular del hero. */
h1,h2,h3,p {
  margin-top: 0;
}

h1 {
  font-size: clamp(5.4rem,15vw,14rem);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.115em;
  margin: 0;
  position: relative;
  width: max-content;
  max-width: 100%;
  text-align: center;
}

/* Las dos líneas que componen marca y eslogan. */
.hero-title-base,.hero-title-overlay {
  display: block;
  white-space: nowrap;
}

.hero-title-base {
  display: inline-flex;
  align-items: flex-end;
  color: var(--text);
  animation: title-base-in .24s cubic-bezier(.16,1,.3,1) both;
}

.hero-title-dot {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin-left: .045em;
  background: var(--acid);
  color: transparent;
  font-size: inherit;
  line-height: 0;
  flex: 0 0 auto;
}

.hero-title-overlay {
  color: var(--text);
  font-size: .16em;
  letter-spacing: -.022em;
  line-height: 1;
  position: relative;
  left: -6%;
  width: 88%;
  margin: .06em auto 0;
  text-align: center;
  animation: title-overlay-in .34s .18s cubic-bezier(.16,1,.3,1) both;
}

h2 em {
  font-weight: 400 !important;
  color: var(--acid);
}

em {
  font-style: normal;
}

/* Texto de apoyo, botones y lista de servicios del hero. */
.hero-description {
  color: var(--text);
  line-height: 1.7;
  max-width: 32rem;
  font-size: 1rem;
  margin-top: 2.3rem;
  animation: content-in .4s .7s ease both;
}

.hero-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.2rem;
  animation: content-in .8s 1.5s ease both;
}

.hero-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: .9rem;
  color: #809089;
  font-family: var(--mono);
  animation: content-in .4s .82s ease both;
}

.process-step {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.process-step strong {
  color: var(--text);
  font: 800 1.5rem/1 var(--sans);
  letter-spacing: -.08em;
}

.process-step span {
  font-size: .59rem;
  letter-spacing: .09em;
}


/* 6. Benefits */
/* Espaciado vertical compartido entre las secciones de contenido. */
.benefits,.portfolio,.services {
  padding-block: 8rem;
}

/* Halo neón de la segunda sección; la intensidad se controla con el scroll. */
.benefits {
  --benefit-glow-strength: .04;
  position: relative;
  isolation: isolate;
}

.benefits::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: none;
}

.benefits > * {
  position: relative;
  z-index: 1;
}

/* Encabezado de la sección de beneficios. */
.section-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
}

.benefits .section-intro {
  grid-template-columns: minmax(0, 1fr);
  max-width: 58rem;
  margin-top: clamp(4rem, 6.5vw, 7.5rem);
}

.benefits-heading {
  max-width: 16ch;
  margin: 0 auto 0 clamp(1.5rem, 9vw, 11rem);
  color: var(--paper);
  font-size: clamp(3.5rem, 6.8vw, 8rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.section-intro .eyebrow {
  margin-top: .6rem;
}

.section-intro h2,.portfolio h2,.services h2,.contact h2 {
  font-size: clamp(2.5rem,5vw,4.9rem);
  line-height: .96;
  letter-spacing: -.075em;
  margin-bottom: 0;
}

/* Pila de tarjetas superpuestas que presenta los tres beneficios. */
.benefit-grid {
  display: flex;
  align-items: stretch;
  margin-top: 4rem;
  isolation: isolate;
}

.benefit-card {
  flex: 0 0 38%;
  min-height: 405px;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(215, 255, 95, .32);
  border-radius: 1.6rem;
  box-shadow: -18px 18px 42px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: flex-basis 1.2s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1), box-shadow 1s ease, border-color 1s ease, opacity .8s ease;
}

.benefit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(215, 255, 95, .12), transparent 38%, rgba(0, 0, 0, .34));
}

.benefit-card>* {
  position: relative;
  z-index: 1;
}

.benefit-card + .benefit-card {
  margin-left: -7%;
}

.benefit-card-interaction {
  z-index: 1;
  background: linear-gradient(145deg, #07110d, #0d251b 72%, #163a27);
  transform: translateY(20px);
}

.benefit-card-content {
  z-index: 3;
  background: linear-gradient(145deg, #102d20, #153d28 66%, #0d2018);
  transform: translateY(-17px);
}

.benefit-card-custom {
  z-index: 2;
  background: linear-gradient(145deg, #0b1c15, #173324 62%, #0d2a1d);
  transform: translateY(20px);
}

.benefit-card:hover {
  z-index: 5;
  border-color: var(--acid);
  box-shadow: 0 0 48px rgba(159, 255, 71, .19), -18px 24px 52px rgba(0, 0, 0, .5);
  transform: translateY(-30px) scale(1.015);
}

@media (min-width:781px) {
  .benefit-grid {
    display: grid;
    grid-template-columns: 1fr 2.25fr 1fr;
    min-height: 470px;
    gap: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.8rem;
    background: #09130e;
    box-shadow: 0 0 42px rgba(126, 255, 65, .08);
    will-change: grid-template-columns;
    /* Grid columns interpolate continuously, avoiding the flex-layout jump. */
    transition: grid-template-columns 1.65s cubic-bezier(.22, .61, .36, 1);
  }

  .benefit-card,
  .benefit-card + .benefit-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 470px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .benefit-card:not(:last-child) {
    border-right: 0;
  }

  .benefit-card-content {
    flex: 2.25 1 0;
  }

  .benefit-card-interaction {
    background: linear-gradient(135deg, #10261b, #07110d 75%);
  }

  .benefit-card-content {
    background: linear-gradient(135deg, #1d5638, #0d2e20 75%);
  }

  .benefit-card-custom {
    background: linear-gradient(135deg, #1a422c, #0b1812 75%);
  }

  .benefit-card:not(.benefit-card-content) .benefit-copy {
    opacity: 0;
  }

  .benefit-copy {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    width: min(42vw, 48rem);
    margin: 0;
    transition: opacity .22s ease;
    transition-delay: 0s;
  }

  .benefit-card h3 {
    position: absolute;
    left: 2rem;
    bottom: 4.45rem;
    width: min(42vw, 48rem);
    margin: 0;
    transform-origin: left bottom;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), filter .45s ease;
  }

  .benefit-grid:has(.benefit-card:nth-child(1):hover) {
    grid-template-columns: 3.6fr .72fr .72fr;
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) {
    grid-template-columns: .72fr 3.6fr .72fr;
  }

  .benefit-grid:has(.benefit-card:nth-child(3):hover) {
    grid-template-columns: .72fr .72fr 3.6fr;
  }

  .benefit-grid:has(.benefit-card:hover) .benefit-copy {
    opacity: 0;
  }

  .benefit-grid:has(.benefit-card:hover) .phone-mockup {
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: none;
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .phone-mockup {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: none;
  }

  .benefit-grid:has(.benefit-card:hover) .benefit-card:hover {
    z-index: 2;
    border-color: var(--acid);
    box-shadow: inset 0 0 70px rgba(174, 255, 76, .1);
    transform: none;
  }

  .benefit-grid:has(.benefit-card:hover) .benefit-card:hover .benefit-copy {
    opacity: 1;
    /* El bloque completo acompaña la apertura sin recortar letras. */
    animation: benefit-copy-reveal 1.15s .16s cubic-bezier(.22, .61, .36, 1) both;
  }

  .benefit-grid:has(.benefit-card:hover) .benefit-card:hover h3 {
    animation: benefit-title-pop .72s .12s cubic-bezier(.16, 1, .3, 1) both;
  }

  .benefit-grid:not(:has(.benefit-card:hover)) .benefit-card-content .benefit-copy {
    opacity: 1;
    transition: none;
  }

  /* La tarjeta central conserva su texto y lo desplaza con la propia pila. */
  .benefit-grid:has(.benefit-card:nth-child(2):hover) .benefit-card-content .benefit-copy {
    opacity: 1;
    animation: none;
    transition-delay: 0s;
  }

  .benefit-card-content .experience-options {
    position: absolute;
    top: 14.8rem;
    left: 3rem;
    z-index: 2;
    display: grid;
    width: min(15.5rem, 29%);
    gap: .55rem;
    opacity: 0;
    transform: translateX(-.8rem);
    pointer-events: none;
    transition: opacity .38s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .benefit-card-content h3 {
    top: 5.35rem;
    bottom: auto;
    left: 3rem;
    width: min(17rem, 31%);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: .96;
    animation: none;
    transform: none;
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .benefit-card-content h3::after {
    content: "";
    position: absolute;
    top: -.62rem;
    right: -.75rem;
    width: 1.05rem;
    height: .9rem;
    border-top: 2px solid var(--acid);
    border-right: 2px solid var(--acid);
    border-radius: 0 .8rem 0 0;
    transform: rotate(26deg);
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .benefit-card-content .benefit-copy {
    top: 10.45rem;
    bottom: auto;
    left: 3rem;
    width: min(18rem, 32%);
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .benefit-card-content .benefit-copy p {
    font-size: clamp(.86rem, 1.1vw, 1.02rem);
    line-height: 1.48;
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .benefit-card-content .experience-options {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: .16s;
  }

  .benefit-grid:has(.benefit-card:nth-child(2):hover) .phone-mockup {
    left: 66%;
    top: 50%;
    width: clamp(10rem, 17vw, 13.5rem);
  }

  .benefit-card.is-closing .benefit-copy {
    opacity: 0;
    animation: benefit-copy-conceal 1.15s cubic-bezier(.22, .61, .36, 1) both;
  }
}

@keyframes benefit-copy-reveal {
  from {
    opacity: 0;
    transform: translateX(-1rem) scale(.94);
  }
  70% { transform: translateX(0) scale(1.035); }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes benefit-title-pop {
  from {
    opacity: .35;
    transform: scale(.82);
    filter: blur(5px);
  }
  72% {
    opacity: 1;
    transform: scale(1.28);
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: scale(1.17);
    filter: blur(0);
  }
}

@keyframes benefit-copy-conceal {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-1rem);
  }
}

.card-number,.service-top {
  font: 500 .65rem var(--mono);
  color: var(--mint);
  letter-spacing: .08em;
}

.benefit-card .card-number,
.benefit-card h3,
.benefit-card p {
  color: var(--text);
}

.benefit-card h3 {
  font-size: 1.35rem;
  letter-spacing: -.055em;
  margin: 0 0 .55rem;
}

.benefit-copy {
  margin-top: auto;
}

/* Fondo a medida de la pila Experiencias; conserva la proporción de la imagen. */
.benefit-card-content {
  background: linear-gradient(145deg, #102d20, #153d28 66%, #0d2018);
}

.benefits .benefit-grid {
  margin-top: 4rem;
}

/* Tarjeta horizontal que alterna las tres áreas principales. */
.feature-carousel {
  position: relative;
  width: 100vw;
  min-height: clamp(44rem, 52vw, 56rem);
  margin-top: 4rem;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.benefits {
  padding-bottom: 4rem;
}

.services {
  padding-top: 4rem;
  position: relative;
  isolation: isolate;
  margin-top: -1px;
}

.services::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2px auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: none;
}

.services > * {
  position: relative;
  z-index: 1;
}

.feature-carousel::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 25%;
  background: transparent;
}

.feature-slide {
  position: absolute;
  z-index: 1;
  inset: 0 25% 0 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.8rem, 4vw, 4rem);
  color: #07120a;
  opacity: 0;
  transform: translateX(5%);
  pointer-events: none;
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.feature-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.feature-index {
  position: absolute;
  top: clamp(1.5rem, 2.5vw, 2.3rem);
  left: clamp(1.8rem, 3.6vw, 3.5rem);
  color: rgba(7, 18, 10, .62);
  font: 600 .72rem var(--mono);
  letter-spacing: .08em;
}

.feature-slide h3 {
  max-width: 10ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(3.2rem, 8vw, 8.2rem);
  line-height: .82;
  letter-spacing: -.09em;
}

/* Vista editorial de resultados: resumen y panel de métricas. */
.feature-results {
  inset: 0;
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: stretch;
  padding: 0;
}

.results-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 0;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 8rem);
  padding-bottom: clamp(2rem, 3vw, 3.8rem);
  background: transparent;
  text-align: left;
}

.result-index {
  position: absolute;
  top: clamp(1.5rem, 2.5vw, 2.3rem);
  left: clamp(1.8rem, 3.6vw, 3.5rem);
  color: rgba(7, 18, 10, .62);
  font: 600 .72rem var(--mono);
  letter-spacing: .08em;
}

.results-copy h3 {
  max-width: none;
  position: relative;
  z-index: 1;
  color: var(--text);
  font-size: clamp(3.8rem, 6vw, 7rem);
  text-shadow: 0 0 2.8rem rgba(190, 255, 70, .16);
}

.results-copy p {
  max-width: 26rem;
  margin: 1.6rem 0 3.5rem;
  color: #07120a;
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.04em;
}

.results-note {
  color: rgba(7, 18, 10, .8);
  font: 600 clamp(.7rem, .9vw, .9rem) var(--mono);
}

.results-panel {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 3vw, 3.8rem);
  padding-left: clamp(4rem, 5.5vw, 7rem);
  overflow: hidden;
  background: transparent;
  color: var(--text);
}

.results-creators>span {
  color: #a4b2aa;
  font: 600 clamp(.6rem, .72vw, .75rem) var(--mono);
  letter-spacing: .03em;
}

/* Estadísticas: la marca se lee primero y el teléfono presenta la propuesta. */
.statistics-slide {
  grid-template-columns: 48% 52%;
}

.statistics-copy,
.featured-copy {
  justify-content: flex-start;
  padding-top: clamp(3.5rem, 6vw, 6.5rem);
}

.statistics-copy h3,
.featured-copy h3 {
  font-size: clamp(4.5rem, 7.8vw, 9.5rem);
}

.featured-copy p {
  margin: .8rem 0 0;
  color: var(--acid);
  font: 700 clamp(.8rem, 1.2vw, 1.1rem) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Diagrama interactivo del proceso creativo dentro de Destacados. */
.workflow-grid {
  position: relative;
  isolation: isolate;
  width: min(100%, 35rem);
  margin-top: auto;
  padding-top: clamp(1rem, 2vw, 2rem);
  transform: translate(var(--workflow-x, 0), var(--workflow-y, 0));
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.workflow-grid::before {
  position: absolute;
  z-index: -1;
  inset: 12% -10% -8%;
  content: "";
  background:
    radial-gradient(ellipse at 50% 80%, rgba(183, 255, 106, .16), transparent 25%),
    radial-gradient(ellipse at 50% 55%, rgba(60, 152, 76, .12), transparent 47%);
  filter: blur(1.6rem);
  opacity: .86;
  pointer-events: none;
}

.workflow-grid svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: visible;
}

.workflow-structure path {
  fill: none;
  stroke: rgba(235, 247, 237, .13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.workflow-light-trail {
  fill: none;
  stroke: rgba(207, 255, 51, .7);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 14 340;
  filter: drop-shadow(0 0 .45rem rgba(207, 255, 51, .9)) drop-shadow(0 0 1.3rem rgba(125, 255, 102, .58));
  animation: workflow-light-trace 5.6s linear infinite;
}

.workflow-glow circle {
  fill: var(--acid);
  stroke: #f7ffef;
  stroke-width: 1.2;
}

.workflow-core {
  fill: #f7ffef;
  stroke: var(--acid);
  stroke-width: 2;
  filter: drop-shadow(0 0 .75rem rgba(207, 255, 51, .95)) drop-shadow(0 0 2rem rgba(110, 255, 96, .72));
  animation: workflow-core-pulse 2.4s ease-in-out infinite;
}

.workflow-labels text {
  fill: #f5f7ee;
  font: 700 13px var(--mono);
  letter-spacing: .08em;
}

.workflow-labels .workflow-number {
  font: 600 27px var(--sans);
  letter-spacing: -.06em;
}

.workflow-labels .workflow-word {
  fill: rgba(245, 247, 238, .72);
  font: 700 11px var(--mono);
  letter-spacing: .1em;
}

@keyframes workflow-light-trace {
  to { stroke-dashoffset: -354; }
}

@keyframes workflow-core-pulse {
  50% { opacity: .55; transform: scale(.72); transform-origin: 280px 272px; }
}

.growth-chart {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1.25;
  margin: auto auto 0;
  overflow: hidden;
}

.chart-bars {
  position: absolute;
  inset: 8% 6% 8%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 3.2%;
  opacity: .6;
}

.chart-bars i {
  width: 6.5%;
  height: var(--bar-height);
  transform-origin: bottom;
  background: linear-gradient(180deg, var(--mint), var(--acid));
  box-shadow: 0 0 1.25rem rgba(215,255,95,.16);
  animation: chart-bar-rise 3.6s ease-in-out infinite alternate;
}

.chart-bars i:nth-child(2n) { animation-delay: -1.4s; }
.chart-bars i:nth-child(3n) { animation-delay: -2.2s; }

.chart-canvas {
  position: absolute;
  inset: 8% 4% 8%;
  width: 92%;
  height: 84%;
}

@keyframes chart-bar-rise { to { transform: scaleY(.72); opacity: .48; } }

/* Destacados: los tres filtros se leen como objetos independientes. */
.featured-slide {
  grid-template-columns: 48% 52%;
}

.featured-panel {
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, .9vw, .9rem);
  align-content: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 2.3vw, 2.75rem) clamp(2rem, 4vw, 4rem) clamp(2.7rem, 3.8vw, 4.25rem);
}

.filter-highlight {
  display: grid;
  grid-template-columns: clamp(4.5rem, 7vw, 6.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(.7rem, 1.25vw, 1.25rem);
  min-height: 0;
  padding: clamp(.7rem, 1.2vw, 1rem);
  border: 1px solid rgba(207, 255, 51, .15);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(18, 54, 33, .84), rgba(4, 16, 10, .94));
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.04);
}

.qr-visual {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: .45rem solid #f5f7ee;
  border-radius: .35rem;
  background-color: #f5f7ee;
  object-fit: cover;
  box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.25);
}

.filter-highlight-copy small {
  color: var(--acid);
  font: 700 .62rem var(--mono);
  letter-spacing: .08em;
}

.filter-highlight h4 {
  margin: .25rem 0 0;
  color: var(--text);
  font-size: clamp(1.25rem, 1.6vw, 1.8rem);
  letter-spacing: -.06em;
}

.filter-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.25rem, .6vw, .55rem);
  margin-top: .55rem;
}

.filter-metrics span {
  color: #a4b2aa;
  font: 600 clamp(.46rem, .52vw, .6rem)/1.2 var(--mono);
}

.filter-metrics b {
  display: block;
  margin-bottom: .1rem;
  color: var(--text);
  font: 700 clamp(.75rem, 1vw, 1.08rem) var(--sans);
  letter-spacing: -.05em;
}

.feature-next {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: auto;
  left: 47%;
  display: grid;
  width: clamp(4.2rem, 7vw, 6rem);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #07120a;
  box-shadow: 0 0 0 1px rgba(207, 255, 51, .24), 0 0 2rem rgba(185, 255, 78, .18);
  color: var(--acid);
  cursor: pointer;
  font: 400 clamp(2rem, 3vw, 3rem) var(--sans);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, box-shadow .25s ease;
}

.feature-next:hover {
  box-shadow: 0 0 0 1px rgba(207, 255, 51, .42), 0 0 2.6rem rgba(185, 255, 78, .28);
  transform: translate(-50%, -50%) scale(1.08);
}

.feature-next:focus-visible {
  outline: 2px solid #07120a;
  outline-offset: .35rem;
}

.experience-options {
  display: none;
}

.experience-option {
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(206, 255, 149, .23);
  border-radius: .75rem;
  background: rgba(2, 9, 5, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #f4f8f5;
  font: 600 .9rem/1.08 var(--sans);
  letter-spacing: -.025em;
  backdrop-filter: blur(.45rem);
  -webkit-backdrop-filter: blur(.45rem);
}

.experience-option b {
  margin-left: auto;
  color: var(--acid);
  font-size: 1.2rem;
  font-weight: 500;
}

.option-icon {
  position: relative;
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: .7rem;
  color: var(--acid);
}

.option-icon-face {
  border: 2px solid currentColor;
  border-radius: 50%;
}

.option-icon-face::before,
.option-icon-face::after {
  content: "";
  position: absolute;
}

.option-icon-face::before {
  top: .48rem;
  left: .37rem;
  width: .22rem;
  height: .22rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: .62rem 0 0 currentColor;
}

.option-icon-face::after {
  left: 50%;
  bottom: .33rem;
  width: .72rem;
  height: .35rem;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 1rem 1rem;
  transform: translateX(-50%);
}

.option-icon-game {
  height: 1.12rem;
  margin-top: .3rem;
  border: 2px solid currentColor;
  border-radius: .45rem;
  transform: rotate(-7deg);
}

.option-icon-game::before,
.option-icon-game::after {
  content: "";
  position: absolute;
}

.option-icon-game::before {
  left: .34rem;
  top: .31rem;
  width: .47rem;
  height: 2px;
  background: currentColor;
  box-shadow: .22rem -.22rem 0 -0.02rem currentColor, .22rem .22rem 0 -0.02rem currentColor;
}

.option-icon-game::after {
  right: .31rem;
  top: .36rem;
  width: .22rem;
  height: .22rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: .32rem -.13rem 0 -0.02rem currentColor;
}

.option-icon-random {
  width: 1.35rem;
  height: 1.35rem;
  margin-left: .15rem;
  border: 2px solid currentColor;
  transform: rotate(30deg);
}

.option-icon-random::before {
  content: "";
  position: absolute;
  inset: .33rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: .55rem 0 0 -0.08rem currentColor, 0 .55rem 0 -0.08rem currentColor;
}

/* Mockup animado visible en el estado inicial de la pila central. */
.phone-mockup {
  position: absolute;
  left: 54.8%;
  top: 47%;
  width: clamp(9.5rem, 18vw, 13rem);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  isolation: isolate;
  transform: translate(-50%, -50%);
  transition: opacity .42s ease;
}

.phone-mockup::before {
  display: none;
}

.phone-mockup::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 58%;
  width: 150%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(184, 255, 97, .3), rgba(61, 219, 91, .13) 42%, transparent 72%);
  filter: blur(1.25rem);
  transform: translate(-50%, -50%);
}

.phone-object {
  position: absolute;
  inset: 0;
  transform: none;
  transition: transform .16s ease;
}

.phone-mockup.is-touching .phone-object {
  transform: scale(.982);
}

.phone-screen {
  position: relative;
  position: absolute;
  z-index: 1;
  top: 5.6%;
  right: 20.1%;
  bottom: 5.2%;
  left: 20.1%;
  overflow: hidden;
  border-radius: clamp(.85rem, 1.8vw, 1.35rem);
  background: #0d1e16;
  cursor: grab;
  touch-action: none;
}

.phone-screen:active {
  cursor: grabbing;
}

.phone-device-frame {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1.35rem 1.3rem rgba(0, 0, 0, .68)) drop-shadow(0 0 1.65rem rgba(169, 255, 75, .28));
  pointer-events: none;
}

.phone-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050706;
}

.phone-video::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 22%, rgba(0, 0, 0, .2) 100%);
}

.phone-clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}

.phone-clip.is-active {
  opacity: 1;
}

.phone-swipe-hint {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 7%;
  left: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-height: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 1rem;
  background: rgba(4, 10, 6, .38);
  color: rgba(255, 255, 255, .88);
  font: 600 clamp(.34rem, .7vw, .48rem) var(--sans);
  backdrop-filter: blur(.3rem);
  -webkit-backdrop-filter: blur(.3rem);
  transition: opacity .35s ease, transform .35s ease;
}

.phone-swipe-hint span {
  color: var(--acid);
  font-size: 1.05em;
}

.phone-screen.has-swiped .phone-swipe-hint {
  opacity: 0;
  transform: translateY(.35rem);
}

.wink-mockup {
  position: absolute;
  left: 50%;
  top: 43%;
  width: clamp(8.5rem, 13vw, 12rem);
  aspect-ratio: 1.22;
  transform: translate(-50%, -50%);
  transition: opacity .32s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.wink-eye,
.wink-smile {
  position: absolute;
  display: block;
  background: var(--text);
  box-shadow: 0 0 16px rgba(255, 255, 255, .16);
}

.wink-eye-left {
  left: 25%;
  top: 39%;
  width: 1.5rem;
  height: 2rem;
  border-radius: 50%;
  animation: wink-loop 2.4s ease-in-out infinite;
}

.wink-eye-right {
  right: 25%;
  top: 39%;
  width: 1.5rem;
  height: 2rem;
  background: var(--text);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 255, 255, .16);
}

.wink-eye-right::before {
  content: "";
  position: absolute;
  width: 2.6rem;
  height: 1.15rem;
  left: -.55rem;
  top: -1.35rem;
  border-top: .48rem solid var(--text);
  border-radius: 50%;
  transform: rotate(24deg);
}

.wink-smile {
  left: 50%;
  bottom: 16%;
  width: 4.9rem;
  height: 1.55rem;
  border-radius: 0 0 4rem 4rem;
  transform: translateX(-50%) rotate(-2deg);
}

@keyframes wink-loop {
  0%, 64%, 100% { transform: scaleY(1); }
  72%, 81% { transform: scaleY(.12); }
  88% { transform: scaleY(1); }
}

@media (min-width:781px) {
  .benefit-copy {
    margin: 0;
  }
}

.benefit-card p {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* 7. Portfolio */
/* Sección de proyectos: cabecera, tarjetas y nota informativa. */
.portfolio-heading {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: end;
}

.portfolio-heading>p {
  max-width: 20rem;
  line-height: 1.65;
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}

/* Pila vertical de proyectos seleccionables. */
.project-stack {
  margin-top: 4rem;
  display: grid;
  gap: .6rem;
}

/* Tarjeta individual de proyecto y su estado activo. */
.project-card {
  min-height: 126px;
  width: 100%;
  background: #0e1d18;
  border: 1px solid var(--line);
  color: var(--text);
  display: grid;
  grid-template-columns: 150px 110px 1fr 45px;
  align-items: center;
  text-align: left;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  transition: background .35s,transform .35s,border .35s;
}

.project-card:hover,.project-card.is-active {
  background: linear-gradient(105deg,#1b352a,#123127);
  border-color: rgba(215,255,95,.55);
  transform: translateX(.6rem);
}

.project-index {
  font: 500 .61rem var(--mono);
  letter-spacing: .08em;
  color: var(--mint);
}

.project-copy {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.project-copy strong {
  font-size: 1.35rem;
  letter-spacing: -.045em;
}

.project-copy small {
  font-size: .78rem;
  color: var(--muted);
}

.project-arrow {
  font-size: 1.4rem;
  color: var(--acid);
  justify-self: end;
}

/* Ilustraciones CSS asociadas a cada tarjeta de proyecto. */
.project-art {
  width: 72px;
  height: 72px;
  position: relative;
  display: block;
}

.art-circles i {
  position: absolute;
  border: 1px solid var(--acid);
  border-radius: 50%;
}

.art-circles i:nth-child(1) {
  inset: 0;
}

.art-circles i:nth-child(2) {
  inset: 15px;
}

.art-circles i:nth-child(3) {
  width: 10px;
  height: 10px;
  background: var(--acid);
  left: 31px;
  top: 31px;
}

.art-grid {
  background: linear-gradient(90deg,var(--acid) 1px,transparent 1px),linear-gradient(var(--acid) 1px,transparent 1px);
  background-size: 18px 18px;
}

.art-grid i {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--acid);
}

.art-grid i:nth-child(1) {
  left: 18px;
  top: 18px;
}

.art-grid i:nth-child(2) {
  right: 0;
  bottom: 0;
  background: var(--mint);
}

.art-bars {
  display: flex;
  align-items: end;
  gap: 6px;
  border-bottom: 1px solid var(--acid);
}

.art-bars i {
  width: 11px;
  background: var(--acid);
}

.art-bars i:nth-child(1) {
  height: 24px;
}

.art-bars i:nth-child(2) {
  height: 52px;
  background: var(--mint);
}

.art-bars i:nth-child(3) {
  height: 34px;
}

.art-bars i:nth-child(4) {
  height: 66px;
  background: #fff;
}

.portfolio-note {
  font: 500 .62rem var(--mono);
  letter-spacing: .06em;
  color: #6e7f76;
  margin: 1.2rem 0 0;
}

/* 8. Services */
/* Sección de planes: permite comparar los tres niveles de servicio. */
.services-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
}

/* Grilla en escritorio y carrusel horizontal en pantallas móviles. */
.service-scroller {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  margin-top: 4rem;
}

/* Tarjeta base de cada nivel de servicio. */
.service-card {
  padding: 1.35rem;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #0c1915;
}

.service-top {
  display: flex;
  justify-content: space-between;
}

.service-shape {
  height: 140px;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.service-card h3 {
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.07em;
  margin-bottom: 1rem;
}

.service-card>p {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.65;
}

.service-card ul {
  padding: 0;
  margin: auto 0 1.5rem;
  list-style: none;
  border-top: 1px solid var(--line);
}

.service-card li {
  font-size: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  color: #d5e3dc;
}

.service-card li::before {
  content: "+";
  color: var(--acid);
  margin-right: .5rem;
}

.service-status {
  font: 500 .6rem var(--mono);
  letter-spacing: .05em;
  color: var(--mint);
}

/* Variaciones de color para Visual, Interactivo y Game. */
.service-visual {
  background: linear-gradient(150deg,#121d19,#15332a);
}

.service-interactive {
  background: linear-gradient(150deg,#10221b,#22442d);
}

.service-game {
  background: linear-gradient(150deg,#16261c,#393f20);
}

/* Formas decorativas de las tarjetas de servicio. */
.shape-visual {
  border-radius: 50%;
  border: 1px solid var(--acid);
  width: 140px;
  margin-inline: auto;
}

.shape-visual i {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acid);
}

.shape-visual i:nth-child(1) {
  left: 20px;
  top: 24px;
}

.shape-visual i:nth-child(2) {
  right: 25px;
  bottom: 31px;
}

.shape-visual i:nth-child(3) {
  left: 62px;
  top: 61px;
  background: var(--mint);
  box-shadow: 0 0 20px var(--acid);
}

.shape-interactive {
  background: linear-gradient(90deg,transparent 49%,var(--acid) 50%,transparent 51%),linear-gradient(transparent 49%,var(--acid) 50%,transparent 51%);
  background-size: 48px 48px;
}

.shape-interactive i {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid var(--acid);
}

.shape-interactive i:nth-child(1) {
  left: 17%;
  top: 18%;
}

.shape-interactive i:nth-child(2) {
  left: 55%;
  top: 35%;
  background: var(--acid);
}

.shape-interactive i:nth-child(3) {
  right: 12%;
  bottom: 18%;
}

.shape-interactive i:nth-child(4) {
  left: 30%;
  bottom: 5%;
  background: var(--mint);
}

.shape-game {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
}

.shape-game i {
  height: 28px;
  width: 28px;
  border: 1px solid var(--acid);
  transform: rotate(45deg);
}

.shape-game i:nth-child(2),.shape-game i:nth-child(4) {
  background: var(--acid);
  height: 15px;
  width: 15px;
}

.shape-game i:nth-child(3) {
  background: var(--mint);
}

/* Tarjetas de planes: versión compacta inspirada en una vitrina de productos. */
.service-scroller {
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 5.5rem;
}

.service-card {
  --glow-x: 50%;
  --glow-y: 36%;
  min-height: 0;
  margin-top: 2.5rem;
  padding: 3.6rem 1.25rem 1rem;
  border: 0;
  border-radius: 1.45rem;
  overflow: visible;
  position: relative;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.service-card:hover {
  transform: translateY(-.55rem);
  box-shadow: 0 26px 54px rgba(0, 0, 0, .42), 0 0 30px rgba(159, 255, 71, .11);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 11rem at var(--glow-x) var(--glow-y), rgba(215, 255, 95, .27), rgba(92, 255, 131, .1) 34%, transparent 70%);
  filter: blur(18px);
  transition: background .18s ease-out;
  pointer-events: none;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-top {
  font: 500 .61rem var(--mono);
  letter-spacing: .09em;
  color: var(--mint);
}

.service-top span:last-child {
  color: var(--acid);
}

.service-shape {
  position: absolute;
  z-index: 2;
  top: -5.75rem;
  left: 50%;
  width: 9rem;
  height: 9rem;
  margin: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  overflow: visible;
}

.service-shape.shape-visual,
.service-shape.shape-interactive,
.service-shape.shape-game {
  width: 9rem;
  border: 0;
  background: none;
}

.service-shape.shape-visual::before,
.service-shape.shape-visual::after {
  display: none;
}

.service-shape.shape-visual img {
  display: block;
  width: 7.75rem;
  height: 9rem;
  object-fit: contain;
  transform: rotate(-3deg);
  filter: brightness(0) saturate(100%) invert(87%) sepia(79%) saturate(1225%) hue-rotate(33deg) brightness(104%) contrast(106%);
}

.service-shape.shape-interactive::before,
.service-shape.shape-interactive::after {
  display: none;
}

.service-shape.shape-interactive img {
  display: block;
  width: 8.25rem;
  height: 9rem;
  object-fit: contain;
  transform: rotate(-8deg);
  clip-path: inset(0 0 12% 0);
  filter: grayscale(1) sepia(1) saturate(4.5) hue-rotate(35deg) brightness(1.28);
}

.service-shape.shape-game::before,
.service-shape.shape-game::after {
  display: none;
}

.service-shape.shape-game img {
  display: block;
  width: 10.5rem;
  height: 6.5rem;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(87%) sepia(79%) saturate(1225%) hue-rotate(33deg) brightness(104%) contrast(106%);
}

.service-shape i {
  display: none;
}

.service-shape::before,
.service-shape::after {
  content: "";
  grid-area: 1 / 1;
  display: block;
}

.service-shape::before {
  width: 5.4rem;
  height: 6.7rem;
  border-radius: 42% 42% 34% 34%;
  background: linear-gradient(140deg, #effff4, #d7ff5f 45%, #d7ff5f);
  box-shadow: inset -.55rem -.45rem .8rem rgba(9, 50, 28, .28), 0 1rem 1.5rem rgba(0, 0, 0, .3), 0 0 25px rgba(159, 255, 71, .3);
}

.service-shape::after {
  width: 2.55rem;
  height: 2.55rem;
  margin-left: 5rem;
  border: .7rem solid #d7ff5f;
  border-left: 0;
  border-radius: 0 50% 50% 0;
}

.service-interactive .service-shape::before {
  width: 6.3rem;
  height: 6.3rem;
  border-radius: 1.2rem;
  transform: rotate(18deg);
  background: linear-gradient(145deg, #d7ff5f, #d7ff5f 45%, #d7ff5f);
}

.service-interactive .service-shape::after {
  width: 1.5rem;
  height: 1.5rem;
  margin: -4.3rem 0 0 5rem;
  border: 0;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 20px var(--acid);
}

.service-game .service-shape::before {
  width: 6.7rem;
  height: 6.7rem;
  border-radius: 50%;
  background: conic-gradient(from 30deg, #d7ff5f, #d7ff5f, #d7ff5f, #d7ff5f);
}

.service-game .service-shape::after {
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  border: 0;
  border-radius: .35rem;
  background: #10261b;
  box-shadow: 0 0 0 .35rem rgba(255, 255, 255, .45);
}

.service-card h3 {
  font-size: 2.45rem;
  margin: 0 0 .65rem;
}

.service-card .service-promise {
  max-width: 17ch;
  margin: 0 0 1.1rem;
  color: #fff;
  font: 600 1.2rem/1.08 var(--sans);
  letter-spacing: -.045em;
}

.service-card ul {
  margin: 0 0 1.25rem;
  border-top: 0;
}

.service-card li {
  font-size: .96rem;
  padding: .34rem 0;
  border-bottom: 0;
  color: rgba(244, 248, 245, .82);
}

.service-footer {
  margin-top: auto;
  padding-top: .65rem;
  border-top: 1px solid rgba(215, 255, 95, .22);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.service-price {
  font: 700 2.35rem var(--sans);
  letter-spacing: -.06em;
  color: var(--acid);
  text-align: center;
}

.service-select {
  border: 0;
  border-radius: .65rem;
  background: rgba(4, 20, 13, .48);
  color: var(--text);
  padding: .75rem 1rem;
  font: 600 1.15rem var(--sans);
  letter-spacing: -.05em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.service-select:hover {
  background: var(--acid);
  color: #09130e;
  transform: translateY(-2px);
}

/* 9. Contact and footer */
/* Llamado a la acción final y brillo decorativo de fondo. */
.contact {
  margin-top: 2rem;
  margin-bottom: 4rem;
  padding: 6.5rem max(2rem,7vw);
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
}

.contact>*:not(.contact-glow) {
  position: relative;
}

.contact-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  right: -200px;
  top: -340px;
  background: radial-gradient(circle,var(--acid),transparent 68%);
  opacity: .17;
}

.contact h2 {
  max-width: 800px;
}

.contact>p:not(.eyebrow) {
  max-width: 34rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 1.5rem 0 2rem;
}

.button-contact {
  min-width: 190px;
}

.contact small {
  display: block;
  color: #90a39a;
  font: 400 .58rem var(--mono);
  letter-spacing: .04em;
  margin-top: 1.2rem;
}

/* Pie de página con marca, descripción y copyright. */
.site-footer {
  padding-block: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .68rem;
  color: #91a097;
}

.site-footer p {
  margin: 0;
}

.site-footer p:last-child {
  font-family: var(--mono);
  font-size: .55rem;
}

.footer-copyright {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.footer-copyright-logo {
  display: block;
  width: 4.2rem;
  height: auto;
}

/* 10. Motion */
/* Animación que revela las secciones al entrar en pantalla. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease,transform .7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Secuencia de entrada del titular y del contenido del hero. */
@keyframes title-base-in {
  from {
    opacity: 0;
    filter: blur(13px);
    transform: translateY(42px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

}

@keyframes neon-settle {
  from {
    opacity: 1;
    filter: blur(92px);
    transform: scale(1.14);
  }

  to {
    opacity: .78;
    filter: blur(70px);
    transform: scale(1);
  }
}

@keyframes title-overlay-in {
  from {
    opacity: 0;
    filter: blur(28px);
    transform: translateY(90px) scale(1.03);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

}

@keyframes content-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

/* 11. Responsive */
/* Ajustes para navegación móvil y pantallas de hasta 780px. */
@media (max-width:780px) {
  .section-shell {
    width: min(100% - 2rem,1180px);
  }

  .site-header {
    top: .6rem;
    width: calc(100% - 1rem);
    height: 4.15rem;
    margin-top: .6rem;
    padding-inline: 1rem .6rem;
    justify-content: space-between;
  }

  .brand {
    font-size: 1.25rem;
  }

  .nav-center { gap: 0; }

  .menu-toggle {
    border: 0;
    background: none;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-content: center;
    gap: 5px;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--text);
    transition: transform .2s;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(3px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-3px) rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    left: 0;
    border: 1px solid rgba(215, 255, 95, .26);
    border-radius: 1.35rem;
    background: rgba(3, 7, 5, .96);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .28);
    padding: 1.1rem 1.25rem;
    display: none;
    align-items: stretch;
    gap: 1.1rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .hero {
    padding-block: 3rem;
    min-height: calc(100svh - 5.5rem);
  }

  .hero-description {
    margin-top: 1.8rem;
  }

  .hero-proof {
    margin-top: 2.4rem;
  }

  .section-intro,.portfolio-heading,.services-heading {
    display: block;
  }

  .section-intro .eyebrow {
    margin-bottom: 1.2rem;
  }

  .benefits,.portfolio,.services {
    padding-block: 5rem;
  }

  .benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .benefit-card {
    min-width: 0;
    min-height: 250px;
    margin: 0 !important;
    transform: none;
  }

  .benefit-card:hover {
    transform: translateY(-6px) scale(1);
  }

  .feature-carousel {
    min-height: clamp(30rem, 110vw, 40rem);
    margin-top: 2.5rem;
    border-radius: 0;
  }

  .feature-slide {
    padding: 1.8rem;
  }

  .feature-slide h3 {
    font-size: clamp(3.4rem, 15vw, 5.8rem);
  }

  .feature-results {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .results-copy {
    min-height: 22rem;
    padding: 1.8rem;
  }

  .results-copy p {
    margin: 1rem 0 1.8rem;
  }

  .results-panel {
    padding: 1.25rem;
  }

  .portfolio-heading>p {
    margin-top: 1.4rem;
  }

  .project-stack {
    margin-top: 2.5rem;
  }

  .project-card {
    grid-template-columns: 1fr 55px;
    padding: 1.15rem;
    min-height: 146px;
  }

  .project-index {
    grid-column: 1;
  }

  .project-art {
    display: none;
  }

  .project-copy {
    grid-column: 1;
    grid-row: 2;
    margin-top: .8rem;
  }

  .project-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .project-card:hover,.project-card.is-active {
    transform: none;
  }

  .service-scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin-right: -1rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
  }

  .service-card {
    min-width: 82%;
    scroll-snap-align: start;
    min-height: 520px;
  }

  .contact {
    margin-inline: 0;
    width: 100%;
    padding: 4.5rem 1.3rem;
    margin-bottom: 2.5rem;
  }

  .site-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    padding-top: 1.5rem;
  }

  h1 {
    font-size: clamp(4.7rem,19vw,7.4rem);
  }

  .hero-title-overlay {
    font-size: .145em;
    letter-spacing: -.02em;
  }

  .portfolio h2,.services h2,.contact h2,.section-intro h2 {
    font-size: clamp(2.55rem,12vw,4rem);
  }

}

@media (max-width:780px) {
  .feature-carousel {
    min-height: 46rem;
  }

  .statistics-slide,
  .featured-slide {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .statistics-copy,
  .featured-copy {
    min-height: 25rem;
    padding: 2rem 1.5rem 0;
  }

  .statistics-copy h3,
  .featured-copy h3 {
    font-size: clamp(3.5rem, 16vw, 5.8rem);
  }

  .workflow-grid {
    width: min(100%, 28rem);
    margin-top: 2rem;
  }

  .growth-chart { width: min(21rem, 86vw); }

  .statistics-slide .results-panel {
    padding: 1.25rem;
  }

  .featured-panel {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .filter-highlight {
    grid-template-columns: 6.4rem 1fr;
    align-items: center;
    min-height: 0;
  }

  .qr-visual { width: 100%; }

  .feature-next { left: 47%; }
}

/* Reduce o elimina movimiento si el usuario así lo prefiere. */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,.hero-copy-centered,.hero-brand-glow::before,.hero-brand-glow.is-replaying::before,#particle-field .ambient-particle i,.chart-bars i,.workflow-light-trail,.workflow-core,.site-header::before {
    transition: none;
    animation: none;
  }

  .button {
    transition: none;
  }

}

/* 12. Dirección visual: hero editorial oscuro y limpio. */
body {
  background: #141414;
  font-family: var(--sans);
}

.section-shell {
  width: min(1240px, calc(100% - 3rem));
}

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5.5rem;
  margin: 0;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: linear-gradient(to bottom, rgba(8, 8, 8, .78), transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header::before { display: none; }
.site-header > * { z-index: auto; }
.brand { font-size: 1.22rem; letter-spacing: -.075em; }
.nav-center { gap: clamp(2rem, 4.2vw, 4.5rem); }
.site-nav { gap: clamp(1.25rem, 2vw, 2.25rem); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; }
.header-cta { border: 0; border-radius: .55rem; background: rgba(255, 255, 255, .1); padding: .8rem 1.05rem; text-transform: uppercase; letter-spacing: .1em; }
.header-cta:hover { background: rgba(255, 255, 255, .18); }

main .hero.section-shell {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 8rem clamp(1.5rem, 7vw, 8rem) clamp(2.5rem, 6vw, 5.25rem);
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(circle at 79% 34%, rgba(143, 255, 74, .2), transparent 23%),
    radial-gradient(ellipse 68% 80% at 80% 42%, rgba(37, 78, 50, .35), transparent 57%),
    linear-gradient(115deg, #080908 0%, #0d110e 48%, #111a13 100%);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(214, 255, 191, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 255, 191, .1) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}

.hero-copy-centered { align-items: flex-start; text-align: left; width: 100%; max-width: none; }
.hero-brand-lockup { justify-content: flex-start; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.hero-brand-glow { width: 100%; }
.hero-brand-glow::before { width: 31rem; height: 17rem; left: 12rem; top: -4rem; opacity: .45; filter: blur(90px); }
h1 { width: auto; text-align: left; font-size: clamp(4.6rem, 10vw, 9.5rem); line-height: .86; letter-spacing: -.09em; }
.hero-title-overlay { left: 0; width: auto; margin: .78em 0 0; text-align: left; font-size: .14em; letter-spacing: .015em; color: rgba(246, 250, 245, .82); }
.hero-title-base { font-size: clamp(4.2rem, 8vw, 8rem); }
.hero-description { max-width: 38rem; margin-top: 1.7rem; color: rgba(245, 249, 244, .72); font: 300 clamp(.95rem, 1.45vw, 1.18rem)/1.6 var(--sans); }
.hero-actions { justify-content: flex-start; margin-top: 1.6rem; }
.hero-actions .button { min-width: 9.5rem; border-radius: .25rem; padding: .9rem 1.2rem; font: 600 .72rem var(--sans); text-transform: uppercase; letter-spacing: .09em; }
.button-hero-secondary { background: #f4f6f1; color: #0a0c0a; border-color: #f4f6f1; }
.button-hero-secondary:hover { background: #dfe5dc; }
.hero-proof { justify-content: flex-start; margin-top: 1.25rem; font: 300 .68rem var(--sans); color: rgba(237, 245, 236, .5); }

/* Entrada más directa y sin cuadrícula en el primer viewport. */
.hero::before { display: none; }
.hero-title-base { animation-duration: .12s; }
.hero-title-overlay { animation-duration: .16s; animation-delay: .06s; }
.hero-description { animation: content-in .18s .1s ease both; }
.hero-actions { animation: content-in .2s .16s ease both; }

.benefits,.services { padding-block: clamp(5rem, 10vw, 9rem); }
.benefits { background: #171817; }
.benefits-heading { margin: 0 0 3.5rem; max-width: 13ch; font-size: clamp(3.1rem, 7vw, 6.8rem); color: #f4f6f1; }
.feature-carousel { border: 1px solid rgba(255, 255, 255, .09); border-radius: .75rem; background: #101110; box-shadow: none; }
.services { background: #101110; }
.services-heading h2,.contact h2 { color: #f4f6f1; font-size: clamp(3rem, 6vw, 5.9rem); }
.service-scroller { gap: .8rem; margin-top: 4rem; }
.service-card,.service-visual,.service-interactive,.service-game { min-height: 32rem; margin-top: 0; border: 1px solid rgba(255, 255, 255, .09); border-radius: .7rem; background: #191b19; box-shadow: none; }
.service-card::before { opacity: .45; }
.service-card:hover { transform: translateY(-.25rem); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25); }
.service-card .service-promise { font-family: var(--sans); }
.service-select { border-radius: .25rem; background: #d7ff5f; color: #0b100b; }
.contact { margin: 0 auto 2rem; padding: clamp(4rem, 8vw, 7rem); border: 1px solid rgba(255, 255, 255, .1); border-radius: .8rem; background: #191b19; }
.contact-glow { opacity: .1; }
.site-footer { padding-block: 2rem 3rem; color: rgba(244, 246, 241, .55); }

@media (max-width:780px) {
  .section-shell { width: min(100% - 2rem, 1240px); }
  .site-header { height: 4.75rem; width: 100%; margin: 0; padding-inline: 1rem; background: rgba(8, 8, 8, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .site-nav { top: 4.4rem; left: 1rem; right: 1rem; border-radius: .6rem; background: #151715; }
  main .hero.section-shell { padding: 8rem 1.25rem 2.5rem; }
  .hero-title-overlay { font-size: .17em; }
  .hero-description { max-width: 30rem; }
  .hero-brand-lockup { gap: .75rem; }
  .benefits-heading { margin-bottom: 2.5rem; }
  .service-scroller { gap: 1.25rem; }
}

/* Navegación tipo píldora con cristal líquido. */
.site-header {
  top: 1rem;
  left: 50%;
  width: min(72rem, calc(100% - 2rem));
  height: 4.55rem;
  margin: 0;
  padding-inline: 1.35rem .75rem;
  transform: translateX(-50%);
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  background:
    radial-gradient(ellipse 62% 150% at 8% -40%, rgba(255, 255, 255, .19), transparent 58%),
    radial-gradient(ellipse 52% 140% at 92% 135%, rgba(166, 255, 203, .14), transparent 63%),
    linear-gradient(116deg, rgba(28, 40, 34, .74), rgba(7, 13, 10, .46) 48%, rgba(31, 54, 42, .62));
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .2);
}

.site-header::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 23%, rgba(255, 255, 255, .16) 47%, transparent 64%),
    radial-gradient(ellipse 26% 180% at 4% 50%, rgba(202, 255, 221, .12), transparent 72%);
  background-size: 190% 100%, 150% 100%;
  background-position: 110% 0, 0 0;
  animation: liquid-glass-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.site-header > * { position: relative; z-index: 1; }
.site-header .brand { left: 1.35rem; }
.site-header .header-cta { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .11); }

@media (max-width:780px) {
  .site-header {
    top: .65rem;
    width: calc(100% - 1rem);
    height: 4.15rem;
    padding-inline: 1rem .6rem;
  }

  .site-header .brand { left: auto; }
  .site-nav { top: calc(100% + .65rem); }
}

/* Botones con resplandor radial adaptado a la paleta Kreathora. */
@property --kreathora-glow-x { syntax: '<percentage>'; initial-value: 42%; inherits: false; }
@property --kreathora-glow-y { syntax: '<percentage>'; initial-value: 145%; inherits: false; }

.button,
.service-select,
.feature-next {
  --kreathora-glow-x: 42%;
  --kreathora-glow-y: 145%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(226, 255, 213, .3);
  border-radius: .7rem;
  background: radial-gradient(140% 185% at var(--kreathora-glow-x) var(--kreathora-glow-y), #081c12 0%, #16432c 38%, #5b8a48 61%, #d7ff5f 79%, #0b100b 100%);
  background-size: 175% 175%;
  background-position: 52% 86%;
  color: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .28), 0 .45rem 1.2rem rgba(0, 0, 0, .22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .76);
  transition: --kreathora-glow-x .65s, --kreathora-glow-y .65s, background-position .65s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.button::before,
.service-select::before,
.feature-next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .2) 49%, transparent 66%);
  background-size: 220% 100%;
  background-position: 110% 0;
  transition: background-position .7s ease;
}

.button:hover:not(:disabled),
.service-select:hover,
.feature-next:hover {
  --kreathora-glow-x: 2%;
  --kreathora-glow-y: 115%;
  background-position: 0% 65%;
  border-color: rgba(236, 255, 218, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 .7rem 1.7rem rgba(215, 255, 95, .19);
  transform: translateY(-2px);
}

.button:hover:not(:disabled)::before,
.service-select:hover::before,
.feature-next:hover::before { background-position: -115% 0; }

.button:active:not(:disabled),
.service-select:active,
.feature-next:active { transform: translateY(0) scale(.97); }

.site-header .header-cta,
.hero-actions .button,
.button-hero-secondary { background: radial-gradient(140% 185% at var(--kreathora-glow-x) var(--kreathora-glow-y), #081c12 0%, #16432c 38%, #5b8a48 61%, #d7ff5f 79%, #0b100b 100%); color: rgba(255, 255, 255, .96); }

/* El avance del carrusel es un control compacto, no un CTA de contenido. */
.feature-next {
  position: absolute;
  z-index: 5;
  top: 1.35rem;
  right: 1.35rem;
  left: auto;
  width: 2.8rem;
  min-width: 0;
  height: 2.8rem;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 255, 213, .27);
  border-radius: 50%;
  background: rgba(15, 35, 24, .84);
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25);
  font: 400 1.45rem/1 var(--sans);
  transform: none;
}

.feature-next::before { display: none; }
.feature-next:hover { transform: scale(1.08); background: #d7ff5f; border-color: #d7ff5f; color: #0a100a; box-shadow: 0 .55rem 1.35rem rgba(215, 255, 95, .2); }
.feature-next:active { transform: scale(.96); }

@media (prefers-reduced-motion:reduce) {
  .button,
  .service-select,
  .feature-next { transition: none; }
}

/* Planes: acabado neumórfico oscuro inspirado en la referencia proporcionada. */
.service-scroller {
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

.service-card,
.service-visual,
.service-interactive,
.service-game {
  margin-top: 0;
  min-height: 32rem;
  padding: 3.6rem 1.5rem 1.35rem;
  border: 0;
  border-radius: 1.875rem;
  background: #212121;
  box-shadow: 15px 15px 30px rgb(12 12 12), -15px -15px 30px rgb(48 48 48);
}

.service-card::before {
  opacity: 0.18;
  filter: blur(22px);
}

.service-card:hover {
  transform: translateY(-0.35rem);
  box-shadow: 19px 19px 38px rgb(10 10 10), -13px -13px 28px rgb(54 54 54);
}

.service-footer {
  border-top-color: rgb(255 255 255 / 9%);
}

.service-price {
  color: #d7ff5f;
}

@media (max-width: 780px) {
  .service-card,
  .service-visual,
  .service-interactive,
  .service-game {
    border-radius: 1.5rem;
  }
}

/* Métrica principal sin tarjeta: cifra y subtítulo directamente sobre el fondo. */
.views-stat-card {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.views-stat-card .text {
  color: var(--acid);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-family: var(--heading);
  font-size: clamp(2.6rem, 4.5vw, 4.75rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.06em;
}

.views-stat-card .views-label {
  margin-top: .45rem;
  font-family: var(--heading);
  font-size: clamp(.9rem, 1.25vw, 1.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
}

/* Botón de filtro: barrido diagonal compacto en la paleta Looplup. */
.filter-trial-button {
  min-width: 0;
  min-height: 0;
  padding: .48rem .82rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--acid);
  color: #f8fbf4;
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .05rem;
  box-shadow: none;
  transition: color .4s, transform .2s ease;
}

.filter-trial-button::before {
  z-index: 0;
  opacity: 1;
  width: 120%;
  height: 100%;
  left: -10%;
  background: #071009;
  transform: skewX(30deg);
  transition: transform .4s cubic-bezier(.3, 1, .8, 1);
}

.filter-trial-button:hover,
.filter-trial-button:focus-visible {
  color: #091109;
  transform: none;
}

.filter-trial-button:hover::before,
.filter-trial-button:focus-visible::before {
  transform: translate3d(100%, 0, 0) skewX(30deg);
}

.filter-button-edge { display: none; }

.filter-trial-button {
  min-width: 5.85rem;
  min-height: 3rem;
  padding: .48rem .65rem;
}

.filter-button-text {
  color: #f8fbf4;
  font-size: .58rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  transition: color .4s;
}

.filter-trial-button:hover .filter-button-text,
.filter-trial-button:focus-visible .filter-button-text {
  color: #091109;
}

@media (max-width: 780px) {
  .views-stat-card {
    align-items: center;
    padding-block: 1rem;
  }
}

/* Descripción principal: Poppins Light con una escala más contenida. */
.hero-description {
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.1vw, .95rem);
  font-weight: 300;
  line-height: 1.65;
}

/* Ritmo tipográfico unificado para títulos y subtítulos. */
:root {
  --title-tracking: -.055em;
  --subtitle-tracking: -.035em;
  --label-tracking: .075em;
}

h1,
h2 {
  letter-spacing: var(--title-tracking) !important;
}

h3,
h4,
h5,
h6 {
  letter-spacing: var(--subtitle-tracking) !important;
}

.hero-title-overlay,
.eyebrow,
.views-stat-card .views-label {
  letter-spacing: var(--label-tracking) !important;
}

/* Acceso directo a cada filtro, en sustitución de sus códigos QR. */
.filter-trial-button {
  --filter-button-glow: rgba(215, 255, 95, .95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  width: max-content;
  min-width: 6.15rem;
  min-height: 2rem;
  padding: .5rem .65rem;
  overflow: hidden;
  border: 0;
  border-radius: .4rem;
  background: #0b120d;
  color: var(--text);
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 1.2rem rgba(215, 255, 95, .05), 0 .55rem 1.25rem rgba(0, 0, 0, .25);
  transition: transform .2s ease, color .2s ease;
}

.filter-button-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.filter-trial-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(7, 15, 10, .82) 52%),
    radial-gradient(ellipse 100% 100%, rgba(215, 255, 95, .42), transparent);
  background-size: 3px 3px, auto;
  transition: opacity .3s;
}

.filter-button-text { position: relative; z-index: 1; }

.filter-button-edge {
  --edge-size: 2px;
  --edge-offset: -14px;
  --edge-stop: calc(var(--edge-offset) * -1);
  --edge-end: calc(100% + var(--edge-offset));
  --edge-gradient: transparent, rgba(215, 255, 95, .25) var(--edge-stop), rgba(215, 255, 95, .72) var(--edge-stop), var(--filter-button-glow), rgba(215, 255, 95, .72) var(--edge-end), rgba(215, 255, 95, .25) var(--edge-end), transparent;
  pointer-events: none;
  position: absolute;
}

.filter-button-edge::before,
.filter-button-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(4px) url(#filter-button-glow);
}

.filter-button-edge::after { filter: blur(10px) url(#filter-button-glow); opacity: 0; transition: opacity .3s; }
.edge-left { left: -2px; top: var(--edge-offset); bottom: var(--edge-offset); width: var(--edge-size); background: linear-gradient(var(--edge-gradient)); }
.edge-right { right: -2px; top: var(--edge-offset); bottom: var(--edge-offset); width: var(--edge-size); background: linear-gradient(var(--edge-gradient)); }
.edge-top { top: -2px; left: var(--edge-offset); right: var(--edge-offset); height: var(--edge-size); background: linear-gradient(90deg, var(--edge-gradient)); }
.edge-bottom { bottom: -2px; left: var(--edge-offset); right: var(--edge-offset); height: var(--edge-size); background: linear-gradient(90deg, var(--edge-gradient)); }

.filter-trial-button:hover,
.filter-trial-button:focus-visible {
  color: var(--acid);
  transform: translateY(-2px);
}

.filter-trial-button:hover::before,
.filter-trial-button:focus-visible::before { opacity: .42; }
.filter-trial-button:hover .filter-button-edge::after,
.filter-trial-button:focus-visible .filter-button-edge::after { opacity: 1; }

.effect-gallery-card > .filter-trial-button,
.filter-highlight > .filter-trial-button,
.featured-effect-card > .filter-trial-button {
  justify-self: center;
  align-self: center;
}

/* Fondo continuo: las secciones comparten una misma superficie sin cortes. */
body,
main,
.hero,
.portfolio,
.benefits,
.services {
  background-color: #141414;
}

.feature-carousel {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Desvanecido entre el hero y la sección siguiente para evitar una línea de corte. */
main .hero.section-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(7rem, 15vw, 13rem);
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(20 20 20 / 0%), #141414 92%);
}

main .hero.section-shell .hero-copy {
  z-index: 1;
}

main .hero.section-shell {
  background:
    linear-gradient(to bottom, rgb(20 20 20 / 0%) 72%, #141414 100%),
    radial-gradient(circle at 79% 34%, rgb(143 255 74 / 20%), transparent 23%),
    radial-gradient(ellipse 68% 80% at 80% 42%, rgb(37 78 50 / 35%), transparent 57%),
    linear-gradient(115deg, #080908 0%, #0d110e 48%, #111a13 100%);
}

@media (min-width: 781px) {
  .site-header {
    width: min(66rem, calc(100% - 2rem));
    height: 4.15rem;
    padding-inline: 1rem .6rem;
  }

  .site-header .brand {
    left: .35rem;
  }

  .nav-center {
    gap: clamp(1rem, 2vw, 1.8rem);
  }

  .site-nav {
    gap: clamp(.85rem, 1.5vw, 1.35rem);
  }

  .site-header .header-cta {
    padding: .68rem .9rem;
  }
}

/* Misma caja visual para los tres iconos de planes. */
.service-shape.shape-visual img,
.service-shape.shape-interactive img,
.service-shape.shape-game img {
  width: 8.25rem;
  height: 9rem;
}

/* El titular queda por encima de los elementos flotantes de cada plan. */
@media (min-width: 781px) {
  .services-heading {
    position: relative;
    top: -3.5rem;
  }

  .service-scroller {
    margin-top: 6.5rem;
  }
}

/* Estadísticas y resultados: dos pilas de métricas con profundidad 3D. */
.benefits-heading {
  max-width: 12ch;
  margin-left: 0;
  text-wrap: balance;
}

.statistics-slide {
  grid-template-columns: 1fr;
}

.statistics-slide .statistics-copy,
.featured-slide,
.feature-next {
  display: none;
}

.statistics-slide .results-panel {
  grid-column: 1;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(2rem, 5vw, 5rem);
  justify-content: center;
  overflow: visible;
}

.stats-piles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4.5rem);
  width: min(100%, 62rem);
  margin-inline: auto;
}

.cards {
  position: relative;
  min-height: clamp(18rem, 27vw, 24rem);
  perspective: 500px;
}

.stats-pile .card {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 2px solid rgb(202 255 77 / 34%);
  border-radius: 1.2rem;
  background: linear-gradient(145deg, #1c3024, #121d18 70%, #0d1511);
  box-shadow: 15px 15px 30px rgb(8 10 9 / 72%), -15px -15px 30px rgb(53 75 59 / 34%);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s ease, box-shadow .5s ease;
}

.stats-pile .card:first-child {
  transform: translate(-.8rem, .65rem) rotate(-4deg) scale(.96);
  opacity: .74;
}

.stats-pile .card:last-child {
  z-index: 1;
  transform: translate(.8rem, -.35rem) rotate(3deg);
}

.stats-pile:hover .card:first-child {
  transform: translate(-1.4rem, .95rem) rotateX(10deg) rotateY(-13deg) translateZ(8px) scale(.96);
}

.stats-pile:hover .card:last-child {
  transform: translate(1.35rem, -.7rem) rotateX(18deg) rotateY(18deg) translateZ(10px);
  box-shadow: 20px 20px 38px rgb(7 10 8 / 76%), -12px -12px 30px rgb(64 89 68 / 38%);
}

.stats-pile .card strong {
  color: #f4f6f1;
  font: 700 clamp(1.8rem, 4vw, 3.6rem)/.95 var(--sans);
  letter-spacing: -.075em;
  transform: translateZ(24px);
}

.stats-pile .card_title {
  position: static;
  margin-top: .8rem;
  color: #d7ff5f;
  font: 700 clamp(.85rem, 1.2vw, 1.15rem)/1.1 var(--sans);
  letter-spacing: .02em;
  text-shadow: none;
  transform: translateZ(34px);
}

.stats-pile .card_kicker {
  position: absolute;
  top: 1.15rem;
  left: 1.25rem;
  color: rgb(219 238 222 / 58%);
  font: 600 .62rem/1 var(--mono);
  letter-spacing: .13em;
  transform: translateZ(26px);
}

@media (max-width: 780px) {
  .benefits-heading {
    max-width: 10ch;
    margin-left: 0;
  }

  .stats-piles {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cards {
    min-height: 17rem;
  }
}

/* Tarjetas individuales de métricas con el efecto 3D solicitado. */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.8vw, 1.5rem);
  min-height: 0;
  perspective: 500px;
}

.stats-cards .card {
  position: relative;
  inset: auto;
  width: auto;
  height: 250px;
  margin: 0;
  padding: 1.4rem;
  display: block;
  border: 2px solid #555;
  border-radius: 4px;
  background: #16161d;
  box-shadow: 15px 15px 30px rgb(8 10 9 / 55%);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s, border-color .5s ease, box-shadow .5s ease;
}

.stats-cards .card:hover {
  border-color: #d7ff5f;
  transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
  box-shadow: 20px 20px 38px rgb(8 10 9 / 64%), 0 0 1.5rem rgb(202 255 77 / 16%);
}

.stats-cards .card strong {
  position: absolute;
  left: 1.4rem;
  bottom: 3.6rem;
  color: #f4f6f1;
  font: 700 clamp(1.5rem, 2.4vw, 2.45rem)/.95 var(--sans);
  letter-spacing: -.075em;
  transform: translateZ(24px);
}

.stats-cards .card_title {
  position: absolute;
  top: 50%;
  right: 20px;
  margin: 0;
  color: #fff;
  font: 700 clamp(.95rem, 1.35vw, 1.5rem)/1.05 monospace;
  letter-spacing: -.03em;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  transform: translateY(-50%);
  transition: transform .5s ease;
}

.stats-cards .card:hover .card_title {
  transform: translateZ(50px);
}

.stats-cards .card_kicker {
  position: absolute;
  top: 1.25rem;
  left: 1.4rem;
  color: #d7ff5f;
  font: 600 .62rem/1 var(--mono);
  letter-spacing: .13em;
  transform: translateZ(22px);
}

@media (max-width: 900px) {
  .stats-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Las cuatro métricas se presentan como una única pila superpuesta. */
.stats-cards {
  position: relative;
  display: block;
  width: min(100%, 28rem);
  min-height: 21rem;
  margin-inline: auto;
}

.stats-cards .card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(12.5rem, 72vw);
  height: 15.5rem;
  margin: 0;
  transform-origin: center;
}

.stats-cards .card:nth-child(1) {
  z-index: 1;
  transform: translate(-50%, -50%) rotate(-9deg) translate(-1.25rem, .65rem);
}

.stats-cards .card:nth-child(2) {
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-3deg) translate(-.45rem, .15rem);
}

.stats-cards .card:nth-child(3) {
  z-index: 3;
  transform: translate(-50%, -50%) rotate(4deg) translate(.45rem, -.15rem);
}

.stats-cards .card:nth-child(4) {
  z-index: 4;
  transform: translate(-50%, -50%) rotate(10deg) translate(1.25rem, -.55rem);
}

.stats-cards .card:nth-child(1):hover {
  transform: translate(-50%, -50%) rotate(-9deg) translate(-1.25rem, .65rem) translateZ(16px);
}

.stats-cards .card:nth-child(2):hover {
  transform: translate(-50%, -50%) rotate(-3deg) translate(-.45rem, .15rem) translateZ(16px);
}

.stats-cards .card:nth-child(3):hover {
  transform: translate(-50%, -50%) rotate(4deg) translate(.45rem, -.15rem) translateZ(16px);
}

.stats-cards .card:nth-child(4):hover {
  transform: translate(-50%, -50%) rotate(10deg) translate(1.25rem, -.55rem) translateZ(16px);
}

@media (max-width: 780px) {
  .stats-cards {
    min-height: 20rem;
  }
}

/* Una sola tarjeta para todas las métricas, siguiendo el estilo 3D de referencia. */
.stats-cards {
  width: 200px;
  min-height: 250px;
  height: 250px;
  margin-inline: auto;
  perspective: 500px;
}

.stats-cards .card {
  position: relative;
  inset: auto;
  width: 200px;
  height: 250px;
  box-sizing: border-box;
  padding: 1.1rem;
  display: block;
  border: 2px solid #555;
  border-radius: 4px;
  background: #16161d;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}

.stats-cards .card:hover {
  border-color: #d7ff5f;
  transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
  box-shadow: 0 0 1.5rem rgb(202 255 77 / 16%);
}

.stats-cards .card_kicker {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #d7ff5f;
  font: 600 .52rem/1 var(--mono);
  letter-spacing: .11em;
  transform: translateZ(24px);
}

.stats-cards .card_title {
  top: 50%;
  right: 1rem;
  color: #fff;
  font: 700 1.5rem monospace;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  transform: translateY(-50%);
}

.stats-cards .card:hover .card_title {
  transform: translateY(-50%) translateZ(50px);
}

.card_metrics {
  position: absolute;
  right: 1rem;
  bottom: 1.15rem;
  left: 1rem;
  display: grid;
  gap: .45rem;
  transform: translateZ(18px);
}

.card_metrics span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .45rem;
  color: rgb(244 246 241 / 64%);
  font: 500 .52rem/1 var(--mono);
  letter-spacing: .02em;
}

.card_metrics b {
  color: #f4f6f1;
  font: 700 .82rem/1 var(--sans);
  letter-spacing: -.06em;
}

/* Reserva limpia para el contenido futuro de Estadísticas y resultados. */
.stats-placeholder {
  width: 100%;
  min-height: clamp(18rem, 30vw, 26rem);
  display: grid;
  place-items: center;
}

/* Tarjeta de Views con borde radial y punto luminoso en movimiento. */
.views-stat-card {
  width: min(300px, 100%);
  height: 250px;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 1px;
  position: relative;
  background: radial-gradient(circle 230px at 0% 0%, #d7ff5f, #0c0d0d);
}

.views-stat-card .dot {
  width: 5px;
  aspect-ratio: 1;
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 2;
  border-radius: 100px;
  background-color: #d7ff5f;
  box-shadow: 0 0 10px #d7ff5f;
  animation: moveDot 6s linear infinite;
}

@keyframes moveDot {
  0%, 100% { top: 10%; right: 10%; }
  25% { top: 10%; right: calc(100% - 35px); }
  50% { top: calc(100% - 30px); right: calc(100% - 35px); }
  75% { top: calc(100% - 30px); right: 10%; }
}

.views-stat-card .views-card {
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  border: solid 1px #202222;
  border-radius: 9px;
  color: #fff;
  background: radial-gradient(circle 280px at 0% 0%, #263f2d, #0c0d0d);
}

.views-stat-card .ray {
  width: 220px;
  height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100px;
  background-color: #d7ff5f;
  opacity: .3;
  box-shadow: 0 0 50px #d7ff5f;
  filter: blur(10px);
  transform: rotate(40deg);
  transform-origin: 10%;
}

.views-stat-card .text {
  color: transparent;
  font-size: clamp(2.15rem, 3vw, 3rem);
  font-weight: bolder;
  background: linear-gradient(45deg, #526f43 4%, #f4f6f1, #d7ff5f);
  background-clip: text;
  -webkit-background-clip: text;
}

.views-stat-card .views-label {
  color: #d7ff5f;
  font: 700 1.1rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.views-stat-card .line {
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: #2c2c2c;
}

.views-stat-card .topl {
  top: 10%;
  background: linear-gradient(90deg, #d7ff5f 30%, #1d2d1f 70%);
}

.views-stat-card .bottoml { bottom: 10%; }

.views-stat-card .leftl,
.views-stat-card .rightl {
  width: 1px;
  height: 100%;
}

.views-stat-card .leftl {
  left: 10%;
  background: linear-gradient(180deg, #a8d97d 30%, #222424 70%);
}

.views-stat-card .rightl { right: 10%; }

.stats-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}

/* Recuadro informativo inspirado en la referencia, llevado a la paleta Kreathora. */
.result-card {
  --border-radius: .75rem;
  --primary-color: #d7ff5f;
  --secondary-color: #c7d3c8;
  width: 210px;
  min-height: 190px;
  box-sizing: border-box;
  padding: 1rem;
  position: relative;
  cursor: default;
  border: 1px solid rgb(202 255 77 / 28%);
  border-radius: var(--border-radius);
  background: linear-gradient(145deg, #1d3023, #0d1611);
  box-shadow: 0 8px 16px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 8%);
  color: var(--secondary-color);
  transition: transform .25s ease, border-color .25s ease;
}

.result-card > * + * {
  margin-top: 1.1em;
}

.result-card .card__title {
  padding: 0;
  margin-top: 0;
  color: #f4f6f1;
  font: 700 1.3rem/1.1 var(--sans);
  letter-spacing: -.05em;
  transition: color .2s ease, text-decoration .2s ease;
}

.result-card .card__content {
  color: var(--secondary-color);
  font: 400 .78rem/1.5 var(--sans);
}

.result-card .result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .7rem;
  margin-top: .8rem;
}

.result-card .result-metrics span {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  color: rgb(199 211 200 / 68%);
  font: 600 .48rem/1.1 var(--mono);
  letter-spacing: .02em;
}

.result-card .result-metrics b {
  color: #d7ff5f;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: -.05em;
}

.result-card .card__date {
  color: rgb(199 211 200 / 64%);
  font: 600 .58rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-card .card__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  border-top-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  background: var(--primary-color);
  transition: background .2s ease;
}

.result-card .card__arrow svg {
  transition: transform .2s ease;
}

.result-card:hover {
  transform: translateY(-.25rem);
  border-color: var(--primary-color);
}

.result-card:hover .card__title {
  color: var(--primary-color);
  text-decoration: underline;
}

.result-card:hover .card__arrow {
  background: #111;
}

.result-card:hover .card__arrow svg {
  transform: translateX(3px);
}

/* Lista de métricas complementarias alineada junto a Views. */
.engagement-list {
  width: min(100%, 17rem);
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  list-style: none;
}

.engagement-list li {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #d7ff5f;
  font: 600 .95rem/1.15 var(--sans);
}

.engagement-list li::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  background: #d7ff5f;
  color: #0b130e;
  box-shadow: 0 0 .9rem rgba(175, 250, 1, 0.16);
}

.engagement-list span {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.engagement-list b {
  color: #ffffff;
  font: 700 1.05rem/1 var(--sans);
  letter-spacing: -.05em;
}

/* Contexto de las métricas principales, alineado al lado de Visualizaciones. */
.stats-impact {
  width: min(100%, 25rem);
  box-sizing: border-box;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid rgb(244 246 241 / 12%);
}

.stats-impact-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.stats-impact-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgb(202 255 77 / 30%);
  border-radius: 50%;
  color: #d7ff5f;
  background: rgb(202 255 77 / 5%);
}

.stats-impact-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.stats-impact h3 {
  margin: 0;
  color: #d7ff5f;
  font: 700 .86rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stats-impact > p {
  max-width: 25rem;
  margin: 1rem 0 1.3rem;
  color: #e0e7e0;
  font: 500 clamp(.82rem, 1.1vw, 1rem)/1.35 var(--sans);
}

.stats-impact .engagement-list {
  width: 100%;
  gap: .8rem;
}

@media (max-width: 780px) {
  .stats-impact {
    padding-left: 0;
    border-left: 0;
  }
}

/* El apartado vuelve a utilizar el fondo uniforme de la página. */
.stats-aurora {
  display: none;
}

/* Sección más compacta para mostrar la métrica sin tanto espacio vacío. */
.benefits {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.feature-carousel {
  min-height: 34rem;
  margin-top: 2rem;
}

/* Rayos aurora animados detrás de Estadísticas y resultados. */
.stats-aurora,
.stats-aurora-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stats-aurora {
  z-index: 0;
  overflow: hidden;
  opacity: .62;
  background-image:
    repeating-linear-gradient(100deg, rgb(202 255 77 / 24%) 0%, rgb(202 255 77 / 24%) 7%, transparent 10%, transparent 12%, rgb(202 255 77 / 24%) 16%),
    repeating-linear-gradient(100deg, #244f35 10%, #d7ff5f 15%, #244f35 20%, #d7ff5f 25%, #244f35 30%);
  background-size: 300% 200%;
  background-position: 50% 50%;
  filter: blur(10px) saturate(165%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 30%, transparent 75%);
}

.stats-aurora-overlay {
  background-image:
    repeating-linear-gradient(100deg, rgb(202 255 77 / 18%) 0%, rgb(202 255 77 / 18%) 7%, transparent 10%, transparent 12%, rgb(202 255 77 / 18%) 16%),
    repeating-linear-gradient(100deg, #5e9e63 10%, #d7ff5f 15%, #5e9e63 20%, #d7ff5f 25%, #5e9e63 30%);
  background-size: 200% 100%;
  mix-blend-mode: screen;
  animation: stats-aurora-shift 12s ease-in-out infinite alternate;
}

@keyframes stats-aurora-shift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Ajuste de integración: brillo localizado y transiciones suaves. */
.stats-aurora {
  opacity: .2;
  background-size: 240% 170%;
  filter: blur(18px) saturate(135%);
  mix-blend-mode: screen;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 82%, transparent 100%);
}

.stats-aurora-overlay {
  opacity: .34;
  filter: blur(3px);
}

.stats-placeholder {
  min-height: 15rem;
}

@media (max-width: 780px) {
  .benefits {
    padding-block: 3.25rem;
  }

  .feature-carousel {
    min-height: 31rem;
  }

  .views-stat-card {
    width: min(300px, 100%);
  }

  .stats-placeholder {
    flex-direction: column;
  }
}

/* La métrica principal se ancla al lado izquierdo del apartado. */
@media (min-width: 781px) {
  .benefits {
    display: block;
  }

  .benefits-heading {
    margin: 0 0 2rem;
  }

  .benefits .feature-carousel {
    width: 100%;
    min-height: 26rem;
    margin: 0;
  }

  .benefits .stats-placeholder {
    justify-content: flex-start;
  }
}

/* En móvil el contenido participa del scroll principal: sin carruseles ni cajas internas. */
@media (max-width: 780px) {
  #particle-field {
    display: none;
  }

  .site-header {
    overflow: visible;
  }

  .site-header,
  .featured-effect-card,
  .effect-gallery-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .reveal {
    transition-duration: .24s;
  }

  .hero-title-base,
  .hero-title-overlay {
    animation-duration: .1s !important;
  }

  [data-scroll-title] {
    filter: none;
    transform: translateY(1rem);
  }

  [data-scroll-title].is-scroll-revealed {
    animation: mobile-title-rise .26s ease-out both;
  }

  [data-stats-cascade] .stats-placeholder > *,
  [data-stats-cascade] .effects-gallery > * {
    filter: none;
    transform: translate3d(1.25rem, 0, 0);
  }

  [data-stats-cascade].is-cascade-visible .stats-placeholder > *,
  [data-stats-cascade].is-cascade-visible .effects-gallery > * {
    animation: mobile-stats-arrival .34s ease-out both;
  }

  [data-stats-cascade].is-cascade-visible .stats-placeholder > :nth-child(1) { animation-delay: 0s; }
  [data-stats-cascade].is-cascade-visible .stats-placeholder > :nth-child(2) { animation-delay: .06s; }
  [data-stats-cascade].is-cascade-visible .stats-placeholder > :nth-child(3) { animation-delay: .12s; }
  [data-stats-cascade].is-cascade-visible .effects-gallery > :nth-child(1) { animation-delay: .16s; }
  [data-stats-cascade].is-cascade-visible .effects-gallery > :nth-child(2) { animation-delay: .22s; }
  [data-stats-cascade].is-cascade-visible .effects-gallery > :nth-child(3) { animation-delay: .28s; }

  .benefits .feature-carousel {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .benefits .statistics-slide {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    padding: 1.25rem 0;
    overflow: visible !important;
  }

  .benefits .statistics-slide .results-panel {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0 1rem;
    overflow: visible;
  }

  .benefits .stats-placeholder {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .views-stat-card,
  .stats-impact,
  .featured-effect-card,
  .effects-gallery {
    width: 100%;
  }

  .featured-effect-card {
    grid-template-columns: minmax(5.75rem, 7rem) minmax(0, 1fr);
  }

  .effects-gallery {
    margin-top: 1.25rem;
  }

  .services .service-scroller {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    scroll-snap-type: none;
    gap: 2rem;
    margin: 3rem 0 0;
    padding: 4.5rem 0 0;
  }

  .services .service-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    scroll-snap-align: none;
  }

  .services .service-shape {
    top: -5.25rem;
  }
}

@keyframes mobile-title-rise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mobile-stats-arrival {
  from { opacity: 0; transform: translate3d(1.25rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Resultados se apilan desde la derecha: llegada horizontal, blur y asentamiento. */
[data-stats-cascade] .stats-placeholder > *,
[data-stats-cascade] .effects-gallery > * {
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(4.5rem, -1.1rem, 0) rotate(1.8deg);
  transform-origin: right center;
  will-change: transform, filter, opacity;
}

[data-stats-cascade].is-cascade-visible .stats-placeholder > *,
[data-stats-cascade].is-cascade-visible .effects-gallery > * {
  animation: stats-stack-arrival .68s cubic-bezier(.2, .82, .25, 1) both;
}

[data-stats-cascade].is-cascade-visible .stats-placeholder > :nth-child(3) { animation-delay: 0s; }
[data-stats-cascade].is-cascade-visible .stats-placeholder > :nth-child(2) { animation-delay: .14s; }
[data-stats-cascade].is-cascade-visible .stats-placeholder > :nth-child(1) { animation-delay: .28s; }
[data-stats-cascade].is-cascade-visible .effects-gallery > :nth-child(3) { animation-delay: .42s; }
[data-stats-cascade].is-cascade-visible .effects-gallery > :nth-child(2) { animation-delay: .56s; }
[data-stats-cascade].is-cascade-visible .effects-gallery > :nth-child(1) { animation-delay: .7s; }

@keyframes stats-stack-arrival {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(4.5rem, -1.1rem, 0) rotate(1.8deg);
  }
  72% {
    opacity: 1;
    filter: blur(1px);
    transform: translate3d(-.3rem, .12rem, 0) rotate(-.25deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-stats-cascade] .stats-placeholder > *,
  [data-stats-cascade] .effects-gallery > * {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}

/* Los grandes titulares ascienden nítidos al entrar durante el scroll descendente. */
[data-scroll-title] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(2.25rem);
  will-change: transform, filter, opacity;
}

[data-scroll-title].is-scroll-revealed {
  animation: title-rise-in .72s cubic-bezier(.22, .7, .2, 1) both;
}

@keyframes title-rise-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(2.25rem);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-title],
  [data-scroll-title].is-scroll-revealed {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}

/* Estadísticas queda integrada directamente sobre el fondo de la página,
   sin una caja exterior alrededor del título ni de las métricas. */
.benefits .feature-carousel,
.benefits .feature-results,
.benefits .statistics-slide,
.benefits .statistics-slide .results-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

/* Entrada editorial recuperada antes del bloque de resultados. */
.benefits-pretitle {
  max-width: 100%;
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  color: #f4f6f1;
  font-family: var(--heading);
  font-size: clamp(3.2rem, 5.5vw, 6.25rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: var(--title-tracking);
  white-space: normal;
  text-wrap: balance;
}

@media (max-width: 780px) {
  .benefits-pretitle {
    max-width: 100%;
    font-size: clamp(2.8rem, 13vw, 4.2rem);
    white-space: normal;
    text-wrap: balance;
  }
}

/* Caso destacado: QR y acceso directo al filtro, alineado a la derecha de las métricas. */
.featured-effect-card {
  width: min(100%, 25rem);
  min-height: 15rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 1.15rem;
  background:
    radial-gradient(ellipse 62% 150% at 8% -40%, rgb(255 255 255 / 16%), transparent 58%),
    radial-gradient(ellipse 52% 140% at 92% 135%, rgb(166 255 203 / 13%), transparent 63%),
    linear-gradient(116deg, rgb(28 40 34 / 74%), rgb(7 13 10 / 46%) 48%, rgb(31 54 42 / 62%));
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 18%), inset 0 1px rgb(255 255 255 / 15%), inset 0 -1px rgb(0 0 0 / 20%);
}

.featured-effect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 23%, rgb(255 255 255 / 16%) 47%, transparent 64%),
    radial-gradient(ellipse 26% 180% at 4% 50%, rgb(202 255 221 / 12%), transparent 72%);
  background-size: 190% 100%, 150% 100%;
  background-position: 110% 0, 0 0;
  animation: liquid-glass-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.featured-effect-card > * {
  position: relative;
  z-index: 1;
}

.featured-effect-card > img {
  width: 7.2rem;
  aspect-ratio: 1;
  object-fit: cover;
  padding: .4rem;
  box-sizing: border-box;
  border-radius: .75rem;
  background: #f4f6f1;
}

.featured-effect-copy small {
  display: block;
  margin-bottom: .45rem;
  color: #d7ff5f;
  font: 700 .62rem/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.featured-effect-copy h4 {
  margin: 0;
  color: #f4f6f1;
  font: 700 clamp(1.2rem, 1.6vw, 1.55rem)/1 var(--sans);
  letter-spacing: -.06em;
}

.featured-effect-copy p {
  margin: .55rem 0 .9rem;
  color: #c7d3c8;
  font: 400 .76rem/1.35 var(--sans);
}

.featured-effect-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .85rem;
  margin: 0 0 .9rem;
}

.featured-effect-metrics span {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  color: rgb(199 211 200 / 70%);
  font: 600 .52rem/1.1 var(--mono);
  letter-spacing: .02em;
}

.featured-effect-metrics b {
  color: #d7ff5f;
  font: 700 .83rem/1 var(--sans);
  letter-spacing: -.04em;
}

.featured-effect-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 .8rem;
  border: 1px solid rgb(202 255 77 / 55%);
  border-radius: .5rem;
  color: #11180e;
  background: #d7ff5f;
  font: 700 .63rem/1 var(--mono);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background-color .2s ease;
}

.featured-effect-copy a:hover {
  background: #d7ff5f;
  transform: translateY(-2px);
}

@media (max-width: 780px) {
  .featured-effect-card {
    width: min(100%, 25rem);
  }
}

/* Galería de filtros recuperada: cada efecto conserva su QR y resultados. */
.effects-gallery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.effect-gallery-card {
  min-height: 10.5rem;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  align-items: center;
  gap: .95rem;
  padding: 1rem;
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 62% 150% at 8% -40%, rgb(255 255 255 / 15%), transparent 58%),
    radial-gradient(ellipse 52% 140% at 92% 135%, rgb(166 255 203 / 11%), transparent 63%),
    linear-gradient(116deg, rgb(28 40 34 / 72%), rgb(7 13 10 / 48%) 48%, rgb(31 54 42 / 60%));
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  box-shadow: 0 .8rem 2rem rgb(0 0 0 / 17%), inset 0 1px rgb(255 255 255 / 13%), inset 0 -1px rgb(0 0 0 / 20%);
}

.effect-gallery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, transparent 23%, rgb(255 255 255 / 13%) 47%, transparent 64%);
  background-size: 190% 100%;
  background-position: 110% 0;
  animation: liquid-glass-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.effect-gallery-card > * {
  position: relative;
  z-index: 1;
}

.effect-gallery-card > img {
  width: 5.6rem;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: .3rem;
  object-fit: cover;
  border-radius: .65rem;
  background: #f4f6f1;
}

.effect-gallery-copy small {
  display: block;
  margin-bottom: .35rem;
  color: #d7ff5f;
  font: 700 .53rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.effect-gallery-copy h4 {
  margin: 0 0 .7rem;
  color: #f4f6f1;
  font: 700 clamp(1rem, 1.35vw, 1.3rem)/.98 var(--sans);
  letter-spacing: -.06em;
}

.effect-gallery-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem .55rem;
}

.effect-gallery-metrics span {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  color: rgb(199 211 200 / 68%);
  font: 600 .46rem/1.1 var(--mono);
}

.effect-gallery-metrics b {
  color: #d7ff5f;
  font: 700 .72rem/1 var(--sans);
  letter-spacing: -.04em;
}

@media (min-width: 781px) {
  .benefits .feature-carousel {
    min-height: 48rem;
  }
}

@media (max-width: 780px) {
  .effects-gallery {
    grid-template-columns: 1fr;
    width: min(100%, 25rem);
  }

  .effect-gallery-card {
    min-height: 9.5rem;
  }

  .benefits .feature-carousel {
    min-height: 66rem;
  }
}

/* Densidad más contenida en el bloque de resultados. */
.statistics-slide .results-panel {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.effects-gallery {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.effect-gallery-card {
  min-height: 9rem;
  padding: .85rem;
}

@media (min-width: 781px) {
  .benefits .feature-carousel {
    min-height: 38rem;
  }
}

@media (max-width: 780px) {
  .benefits .feature-carousel {
    min-height: 54rem;
  }
}

/* El cierre de resultados conecta de forma más directa con Servicios. */
@media (min-width: 781px) {
  .benefits {
    padding-bottom: 5rem;
  }

  .benefits .feature-carousel {
    min-height: 31rem;
  }

  .services {
    padding-top: 7.5rem;
  }
}

/* La composición original se mantiene: Views, métricas y filtro en una misma fila.
   El texto de contexto se integra dentro de la columna central sin desplazar las tarjetas. */
@media (min-width: 781px) {
  .benefits .statistics-slide {
    inset: 0;
  }

  .benefits .stats-placeholder {
    display: grid;
    grid-template-columns: minmax(17rem, 19rem) minmax(20rem, 1fr) minmax(22rem, 25rem);
    align-items: center;
    justify-content: stretch;
    gap: clamp(1.5rem, 4vw, 4.5rem);
    flex-wrap: nowrap;
  }

  .benefits .feature-carousel {
    min-height: 48rem;
  }
}

@media (max-width: 780px) {
  .statistics-slide {
    overflow-x: hidden;
  }

  .benefits .feature-carousel {
    min-height: 66rem;
  }
}

/* Alternativa visual estable para navegadores sin soporte de cristal esmerilado. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .featured-effect-card,
  .effect-gallery-card {
    background-color: #132019;
  }

  .button:not(.button-primary) {
    background-color: #112218;
  }
}

/* Ritmo vertical: resultados y Servicios conservan la misma cercanía que Planes y Agenda. */
@media (min-width: 781px) {
  .benefits {
    padding-bottom: 3rem;
  }

  .benefits .feature-carousel {
    min-height: 34rem;
  }

  .benefits .statistics-slide .results-panel {
    justify-content: flex-end;
  }

  .services {
    padding-top: 5.25rem;
  }
}

/* Prioridad final para Safari/iOS: navegación funcional y scroll sin contenedores internos. */
@media (max-width: 780px) {
  .site-header {
    overflow: visible;
    isolation: isolate;
  }

  .site-nav {
    z-index: 3;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-height: calc(100dvh - 6.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav.is-open {
    display: flex;
  }

  .benefits .feature-carousel {
    min-height: 0;
    height: auto;
  }

  [data-scroll-title],
  [data-stats-cascade] .stats-placeholder > *,
  [data-stats-cascade] .effects-gallery > * {
    filter: none;
    will-change: auto;
  }

  [data-scroll-title] {
    opacity: 0;
    transform: translateY(1rem);
  }

  [data-stats-cascade] .stats-placeholder > *,
  [data-stats-cascade] .effects-gallery > * {
    opacity: 0;
    transform: translate3d(1.25rem, 0, 0);
  }

  [data-scroll-title].is-scroll-revealed {
    animation: mobile-title-rise .26s ease-out both;
  }

  [data-stats-cascade].is-cascade-visible .stats-placeholder > *,
  [data-stats-cascade].is-cascade-visible .effects-gallery > * {
    animation: mobile-stats-arrival .34s ease-out both;
  }
}

/* Simplificación final del bloque de visualizaciones. */
.views-stat-card {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.views-stat-card .text {
  color: #f4f6f1;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-family: var(--heading);
  font-size: clamp(2.6rem, 4.5vw, 4.75rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.06em;
}

.views-stat-card .views-label {
  margin-top: .45rem;
  font-family: var(--heading);
  font-size: clamp(.9rem, 1.25vw, 1.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
}

@media (max-width: 780px) {
  .views-stat-card {
    align-items: center;
    padding-block: 1rem;
  }
}

/* Variante final de los accesos a TikTok: barrido diagonal compacto. */
.filter-trial-button {
  min-width: 0;
  min-height: 0;
  padding: .48rem .82rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #071009;
  color: #f8fbf4;
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .05rem;
  box-shadow: none;
  transition: color .4s, transform .2s ease;
}

.filter-trial-button::before {
  z-index: 0;
  opacity: 1;
  width: 140%;
  height: 100%;
  left: -20%;
  background: var(--acid);
  transform: translate3d(-110%, 0, 0) skewX(-18deg);
  transition: transform .42s cubic-bezier(.3, 1, .8, 1);
}

.filter-trial-button:hover,
.filter-trial-button:focus-visible {
  color: #091109;
  transform: none;
}

.filter-trial-button:hover::before,
.filter-trial-button:focus-visible::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) skewX(-18deg);
}

.filter-button-edge { display: none; }

/* Texto del acceso en dos líneas, con contraste garantizado. */
.filter-trial-button {
  min-width: 5.85rem;
  min-height: 3rem;
  padding: .48rem .65rem;
}

.filter-button-text {
  color: #f8fbf4;
  font-size: .58rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  transition: color .4s;
}

.filter-trial-button:hover .filter-button-text,
.filter-trial-button:focus-visible .filter-button-text {
  color: #091109;
}

/* Hero limpio: sin halo de luz ni degradado verde detrás del objeto. */
main .hero.section-shell {
  background: #090b09;
}

.hero-brand-glow::before {
  display: none;
}

/* El mensaje de valor ocupa el primer impacto del hero. */
.hero-text-lockup {
  width: min(100%, 62rem);
}

.hero-statement {
  max-width: 16ch;
  margin: 0;
  color: var(--text);
  font-family: var(--heading);
  font-size: clamp(3rem, 5.35vw, 6.35rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: var(--title-tracking);
  text-wrap: balance;
  animation: content-in .34s ease both;
}

.hero-brand-lockup {
  align-items: flex-end;
}

@media (max-width: 780px) {
  .hero-brand-lockup {
    align-items: center;
  }

  .hero-statement {
    max-width: 13ch;
    font-size: clamp(2.35rem, 10.5vw, 3.6rem);
  }
}

/* Fondo estrellado continuo, inspirado en la referencia y adaptado a Looplup. */
body {
  background: radial-gradient(ellipse at bottom, #17261b 0%, #070907 82%);
}

body::before {
  z-index: 0;
  opacity: .72;
  background-image:
    radial-gradient(circle at 18px 24px, rgba(242, 247, 243, .78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 84px 58px, rgba(215, 255, 95, .58) 0 1px, transparent 1.8px),
    radial-gradient(circle at 143px 106px, rgba(183, 255, 225, .5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 52px 141px, rgba(242, 247, 243, .42) 0 1px, transparent 1.7px);
  background-size: 197px 173px, 281px 251px, 347px 311px, 419px 379px;
  background-repeat: repeat;
  mask-image: none;
  -webkit-mask-image: none;
  animation: looplup-star-drift 110s linear infinite;
}

main,
.hero,
.portfolio,
.benefits,
.services,
main .hero.section-shell {
  background-color: transparent !important;
}

@keyframes looplup-star-drift {
  to {
    background-position: 0 -173px, 0 -251px, 0 -311px, 0 -379px;
  }
}

@media (max-width: 780px), (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

/* Los dos CTA del hero comparten exactamente el mismo estado interactivo. */
.hero-actions .button,
.hero-actions .button.button-primary,
.hero-actions .button.button-hero-secondary {
  --kreathora-glow-x: 42%;
  --kreathora-glow-y: 145%;
  background: radial-gradient(140% 185% at var(--kreathora-glow-x) var(--kreathora-glow-y), #081c12 0%, #16432c 38%, #5b8a48 61%, #d7ff5f 79%, #0b100b 100%) !important;
  background-size: 175% 175% !important;
  background-position: 52% 86% !important;
  color: rgba(255, 255, 255, .96) !important;
}

.hero-actions .button:hover,
.hero-actions .button:focus-visible {
  --kreathora-glow-x: 2%;
  --kreathora-glow-y: 115%;
  background-position: 0% 65% !important;
  border-color: rgba(236, 255, 218, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 .7rem 1.7rem rgba(215, 255, 95, .19);
  transform: translateY(-2px);
}

/* Evita el destello blanco del rebote al llegar al inicio de la página. */
html,
body {
  background-color: #070907;
  overscroll-behavior-y: auto;
}

/* Hero centrado: mensaje y CTA como foco principal. */
main .hero.section-shell {
  align-items: center;
}

.hero-copy-centered,
.hero-brand-lockup,
.hero-actions,
.hero-proof {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-text-lockup {
  width: min(100%, 50rem);
}

.hero-statement {
  max-width: 18ch;
  font-size: clamp(2.4rem, 4.15vw, 4.8rem);
  text-align: center;
}

.hero-actions {
  margin-top: 1.7rem;
}

.hero-proof {
  justify-content: center;
}

@media (max-width: 780px) {
  .hero-statement {
    max-width: 16ch;
    font-size: clamp(2.1rem, 9vw, 3rem);
  }

}

/* Hero editorial: etiqueta, mensaje claro y un CTA directo. */
.hero-copy-centered {
  gap: 0;
}

.hero-text-lockup {
  width: min(100%, 52rem);
}

.hero-statement {
  max-width: 15ch;
  margin-inline: auto;
  font-size: clamp(3rem, 5vw, 5.7rem);
  line-height: .92;
}

.hero-statement em {
  color: var(--acid);
}

.hero-description {
  max-width: 54ch;
  margin: 1.5rem auto 0;
  color: rgba(242, 247, 243, .72);
  font-family: var(--sans);
  font-size: clamp(.82rem, 1.1vw, .98rem);
  font-weight: 300;
  line-height: 1.55;
  text-align: center;
}

.hero-actions .button {
  min-width: 10.5rem;
  border-radius: 999px;
}

/* Cuadro de ping-pong: rebota horizontalmente dentro del primer viewport. */
.hero {
  overflow: hidden;
}

.hero-pong {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: clamp(2.2rem, 3.8vw, 3.8rem);
  aspect-ratio: 1;
  border: 1px solid rgba(247, 255, 239, .42);
  border-radius: .45rem;
  background: var(--acid);
  box-shadow: inset 0 1px rgba(255, 255, 255, .62), 0 0 1.1rem rgba(215, 255, 95, .72);
  filter: blur(.18px) drop-shadow(0 0 1.8rem rgba(215, 255, 95, .95));
  opacity: 1;
  pointer-events: none;
  will-change: transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pong {
    left: calc(50% - 1.4rem);
    transform: none !important;
  }
}

@media (max-width: 780px) {
  .hero-statement {
    max-width: 14ch;
    font-size: clamp(2.45rem, 10vw, 3.35rem);
  }

  .hero-description {
    max-width: 34ch;
    margin-top: 1.25rem;
  }

  .hero-pong {
    /* La posición la controla main.js desde la esquina del hero. */
    top: 0;
    left: 0;
    width: 2.3rem;
    opacity: .9;
    will-change: auto;
  }
}

/* Tarjetas de filtros 9:16 con apertura 3D desde el borde inferior. */
.filter-card,
.featured-effect-card,
.effect-gallery-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 13.5rem);
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: .85rem;
  background: #101712;
  box-shadow: 0 0 0 1px rgba(215, 255, 95, .3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  perspective: 1000px;
  perspective-origin: center bottom;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.175, .885, .32, 1.275), box-shadow .6s cubic-bezier(.175, .885, .32, 1.275);
}

.filter-card::before,
.featured-effect-card::before,
.effect-gallery-card::before {
  display: none;
}

.filter-card:hover,
.filter-card:focus-within {
  transform: scale(1.045) !important;
  box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .36), 0 0 0 1px rgba(215, 255, 95, .52);
}

.filter-card__front {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(215, 255, 95, .12), transparent 32%),
    linear-gradient(145deg, #152219, #09100c);
}

.filter-card__front p {
  max-width: 10ch;
  margin: 0;
  color: var(--text);
  font: 400 clamp(1.15rem, 1.8vw, 1.45rem)/1.02 var(--subtitle);
  letter-spacing: var(--subtitle-tracking);
}

.filter-card__front span {
  color: rgba(242, 247, 243, .55);
  font: 400 .55rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.filter-card .filter-card__title,
.filter-card .featured-effect-copy h4,
.filter-card .effect-gallery-copy h4 {
  margin: 0 0 .7rem;
  color: var(--text);
  font: 400 clamp(1.1rem, 1.5vw, 1.4rem)/1.05 var(--subtitle);
  letter-spacing: var(--subtitle-tracking) !important;
}

.filter-card .featured-effect-copy p {
  margin: 0 0 1rem;
  color: rgba(242, 247, 243, .68);
  font: 300 .72rem/1.42 var(--sans);
}

.filter-card .featured-effect-metrics,
.filter-card .effect-gallery-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem .55rem;
  width: 100%;
  margin: 0;
}

.filter-card .featured-effect-metrics span,
.filter-card .effect-gallery-metrics span {
  display: flex;
  flex-direction: column;
  gap: .16rem;
  min-width: 0;
  color: rgba(199, 211, 200, .7);
  font: 400 .47rem/1.15 var(--mono);
}

.filter-card .featured-effect-metrics b,
.filter-card .effect-gallery-metrics b {
  color: var(--acid);
  font: 400 .76rem/1 var(--subtitle);
  letter-spacing: -.03em;
}

.filter-card .filter-trial-button {
  align-self: center;
  margin-top: auto;
}

.effects-gallery {
  grid-template-columns: repeat(3, minmax(0, 13.5rem));
  justify-content: center;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2rem);
}

@media (min-width: 781px) {
  .benefits .feature-carousel {
    min-height: 59rem;
  }
}

@media (max-width: 780px), (hover: none) {
  .filter-card,
  .featured-effect-card,
  .effect-gallery-card {
    width: min(100%, 18rem);
    transform: none !important;
  }

  .filter-card__front {
    display: none;
  }

  .effects-gallery {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-card__front {
    display: none;
  }

}

/* Distribución equilibrada: resumen centrado y cuatro tarjetas en una misma fila. */
@media (min-width: 781px) {
  .benefits .statistics-slide .results-panel {
    justify-content: center;
  }

  .benefits .stats-placeholder {
    grid-template-columns: minmax(17rem, 21rem) minmax(22rem, 28rem);
    justify-content: center;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    width: 100%;
    max-width: 58rem;
    margin-inline: auto;
  }

  .benefits .views-stat-card {
    justify-self: end;
  }

  .benefits .stats-impact {
    justify-self: start;
    width: 100%;
    max-width: 28rem;
  }

  .effects-gallery {
    grid-template-columns: repeat(4, minmax(0, 13.5rem));
    width: 100%;
    max-width: 62rem;
    margin: clamp(2.5rem, 4vw, 3.75rem) auto 0;
  }

  .benefits .feature-carousel {
    min-height: 52rem;
  }
}

@media (min-width: 781px) and (max-width: 1040px) {
  .effects-gallery {
    grid-template-columns: repeat(2, minmax(0, 13.5rem));
  }

  .benefits .feature-carousel {
    min-height: 78rem;
  }
}

/* Variante final: tarjeta reversible con borde luminoso animado. */
.filter-card,
.featured-effect-card,
.effect-gallery-card {
  width: min(100%, 13.5rem);
  height: auto;
  min-height: 0;
  aspect-ratio: 190 / 254;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  box-shadow: none;
  perspective: 1000px;
  transform: none !important;
}

.filter-card:hover,
.filter-card:focus-within {
  transform: none !important;
  box-shadow: none;
}

.filter-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: .45rem;
  box-shadow: 0 0 .75rem .08rem rgba(0, 0, 0, .76);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 300ms ease;
}

/* El giro al pasar el cursor solo existe donde realmente hay cursor.
   Así evitamos que :hover quede fijado después de un toque en móvil. */
@media (hover: hover) and (pointer: fine) {
  .filter-card:hover .filter-card__inner,
  .filter-card:focus-within .filter-card__inner {
    transform: rotateY(180deg);
  }
}

.filter-card.is-flipped .filter-card__inner {
  transform: rotateY(180deg);
}

.filter-card__back,
.filter-card > .filter-card__inner > .filter-card__front {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .45rem;
  color: var(--text);
  background: #111713;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.filter-card__back {
  transform: rotateY(0deg) translateZ(.1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
}

.filter-card__back::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 76%;
  height: 160%;
  background: linear-gradient(90deg, transparent, var(--acid), #d7ff5f, var(--acid), transparent);
  animation: filter-card-border-rotation 5s linear infinite;
}

.filter-card__back::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: calc(.45rem - 2px);
  background:
    radial-gradient(circle at 50% 43%, rgba(215, 255, 95, .12), transparent 30%),
    #111713;
}

.filter-card__back > * {
  position: relative;
  z-index: 2;
}

.filter-card__back svg {
  width: 3.15rem;
  fill: var(--acid);
  filter: drop-shadow(0 0 .7rem rgba(215, 255, 95, .3));
}

.filter-card__back p {
  max-width: 10ch;
  margin: 0;
  color: var(--text);
  font: 400 clamp(1.05rem, 1.5vw, 1.3rem)/1.05 var(--subtitle);
  letter-spacing: var(--subtitle-tracking);
}

.filter-card__back span {
  color: rgba(242, 247, 243, .55);
  font: 400 .52rem/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Vista previa en video del filtro Pégale al topo. */
.filter-card__back--video::before {
  display: none;
}

.filter-card__back--video::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(4, 9, 6, .08) 28%, rgba(4, 9, 6, .76) 100%);
}

.filter-card__back--video .filter-preview-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.filter-card__back--video .filter-preview-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding: 1.15rem;
}

.filter-card__back--video .filter-preview-copy p {
  text-shadow: 0 .12rem .7rem rgba(0, 0, 0, .8);
}

.filter-card > .filter-card__inner > .filter-card__front {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.15rem;
  transform: rotateY(180deg) translateZ(.1px);
  transform-origin: center;
  background: #151b17;
}

.filter-card__front::before,
.filter-card__front::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
  animation: filter-card-floating 2.6s ease-in-out infinite;
}

.filter-card__front::before {
  top: 8%;
  left: -12%;
  width: 6rem;
  height: 6rem;
  background: rgba(215, 255, 95, .2);
}

.filter-card__front::after {
  right: -24%;
  bottom: -8%;
  width: 8rem;
  height: 8rem;
  background: rgba(50, 134, 82, .27);
  animation-delay: -.8s;
}

.filter-card__front > * {
  position: relative;
  z-index: 1;
}

.filter-card .featured-effect-copy p {
  max-width: 100%;
}

.filter-card .featured-effect-metrics,
.filter-card .effect-gallery-metrics {
  gap: .65rem .45rem;
}

.filter-card .filter-trial-button {
  margin-top: auto;
}

@keyframes filter-card-border-rotation {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@keyframes filter-card-floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.65rem); }
}

@media (min-width: 1041px) {
  .benefits .feature-carousel {
    min-height: 42rem;
  }
}

@media (min-width: 781px) and (max-width: 1040px) {
  .benefits .feature-carousel {
    min-height: 61rem;
  }
}

@media (max-width: 780px), (hover: none) {
  .filter-card,
  .featured-effect-card,
  .effect-gallery-card {
    width: min(100%, 18rem);
    cursor: pointer;
    touch-action: manipulation;
  }

}

@media (prefers-reduced-motion: reduce) {
  .filter-card__inner {
    transition: none;
  }

  .filter-card__back::before,
  .filter-card__front::before,
  .filter-card__front::after {
    animation: none;
  }
}

/* La tarjeta destacada usa exactamente el mismo botón que las demás. */
.filter-card .featured-effect-copy .filter-trial-button {
  min-width: 5.85rem;
  min-height: 3rem;
  padding: .48rem .65rem;
  border: 0;
  border-radius: 999px;
  background: #071009;
  color: #f8fbf4;
  font: 400 .5rem/1 var(--mono);
  letter-spacing: .05rem;
  box-shadow: none;
  transition: color .4s, transform .2s ease;
}

.filter-card .featured-effect-copy .filter-trial-button:hover,
.filter-card .featured-effect-copy .filter-trial-button:focus-visible {
  background: #071009;
  color: #091109;
  transform: none;
}

/* Compatibilidad móvil: Safari iOS, Chrome, Firefox y Arc. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 780px) {
  html {
    scroll-padding-top: calc(5.5rem + env(safe-area-inset-top));
  }

  body {
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
  }

  .site-header {
    top: 0;
    width: 100%;
    height: calc(4.5rem + env(safe-area-inset-top));
    margin: 0;
    padding: env(safe-area-inset-top) 1rem 0;
    border-radius: 0;
  }

  .menu-toggle,
  .site-nav a,
  .button,
  .filter-trial-button {
    min-height: 44px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .site-nav {
    right: max(.75rem, env(safe-area-inset-right));
    left: max(.75rem, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 6.25rem - env(safe-area-inset-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    padding: .7rem .8rem;
  }

  .hero,
  main .hero.section-shell {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: calc(6.5rem + env(safe-area-inset-top));
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }

  /* En móvil el contenido sigue el scroll principal, evitando secciones cortadas. */
  .benefits .feature-carousel {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .benefits .statistics-slide {
    position: relative;
    inset: auto;
    height: auto;
    overflow: visible !important;
  }

  .benefits .results-panel,
  .benefits .statistics-copy {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .services .service-card:hover,
  .button:hover {
    transform: none;
  }

  .contact {
    padding-right: max(1.3rem, env(safe-area-inset-right));
    padding-left: max(1.3rem, env(safe-area-inset-left));
    padding-bottom: max(4.5rem, calc(2.5rem + env(safe-area-inset-bottom)));
  }

  .site-footer {
    padding-bottom: max(3rem, calc(1.5rem + env(safe-area-inset-bottom)));
  }

  .service-card.reveal {
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  }

  .service-card.reveal:nth-child(2) {
    transition-delay: .08s;
  }

  .service-card.reveal:nth-child(3) {
    transition-delay: .16s;
  }
}

/* El fondo se prolonga bajo la barra del navegador en iOS y Android. */
html,
body {
  min-height: 100%;
  background-color: #070907;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}