/* ==========================================================================
   Atmosfera — que cada seccion tenga presencia
   El problema de la version anterior: todas las secciones claras eran el
   mismo blanco plano, asi que el scroll era monotono. Aqui el recorrido
   alterna densidades (claro → papel → oscuro → claro) y cada bloque tiene
   su propio fondo, no un color liso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Proceso: papel con rejilla tenue, como un plano de trabajo
   -------------------------------------------------------------------------- */

.proceso {
  position: relative;
  background:
    linear-gradient(180deg, #fff 0%, #f7f7fd 100%);
  overflow: clip;
}

.proceso::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(66, 60, 212, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 60, 212, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 78%);
  pointer-events: none;
}
.proceso > * { position: relative; z-index: 1; }

/* Las tarjetas del proceso, con un halo que sigue al raton */
/* El fondo y el borde viven ahora en `.proceso__cuerpo` (recorrido.css):
   el item es solo la reja que coloca numero, texto y mini-pantalla. */
.proceso__cuerpo {
  position: relative;
  overflow: hidden;
}

.proceso__cuerpo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    22rem 22rem at var(--raton-x, 50%) var(--raton-y, 0%),
    rgba(66, 60, 212, .1),
    transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}

.proceso__item:hover .proceso__cuerpo::after { opacity: 1; }

/* El numero crece un punto al pasar: confirma que la tarjeta responde */
.proceso__numero { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.proceso__item:hover .proceso__numero { transform: scale(1.12) rotate(-6deg); }

/* --------------------------------------------------------------------------
   Muestras de producto: fondo con luz lateral que acompaña a cada bloque
   -------------------------------------------------------------------------- */

.muestras { position: relative; overflow: clip; }

.muestras::before {
  content: '';
  position: absolute;
  inset: 10% -25% 20% auto;
  width: 70%;
  background: radial-gradient(45% 40% at 70% 30%, rgba(66, 60, 212, .13), transparent 70%);
  pointer-events: none;
}

/* La pastilla que rotula cada bloque, con el punto vivo */
.muestra__rotulo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violeta);
  /* Un latido lento: marca que el producto esta vivo sin robar atencion */
  animation: latido 2.6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

/* --------------------------------------------------------------------------
   Capacidades: cada tarjeta con borde que capta la luz al pasar
   -------------------------------------------------------------------------- */

.capacidades {
  position: relative;
  background: linear-gradient(180deg, #f7f7fd 0%, #fff 55%, #f9f9fe 100%);
}

.tarjeta {
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.2, .8, .2, 1),
    box-shadow .45s,
    border-color .45s;
}

/* Barra superior que se pinta al pasar: un detalle pequeño que da vida sin
   mover la tarjeta entera. */
.tarjeta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violeta), #6f4ae8, var(--verde));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.tarjeta:hover {
  transform: translateY(-7px);
  border-color: #cfccf3;
  box-shadow: 0 30px 55px -32px rgba(37, 31, 107, .55);
}
.tarjeta:hover::before { transform: scaleX(1); }

.tarjeta__icono { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tarjeta:hover .tarjeta__icono { transform: scale(1.1) rotate(-5deg); }

/* --------------------------------------------------------------------------
   Precios: caja con luz propia
   -------------------------------------------------------------------------- */

.precios { position: relative; overflow: clip; }
.precios::before {
  content: '';
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 70%;
  background: radial-gradient(40% 60% at 50% 100%, rgba(1, 236, 167, .12), transparent 70%);
  pointer-events: none;
}

.precios__caja { position: relative; overflow: hidden; }
.precios__caja::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% auto;
  width: 60%; height: 120%;
  background: radial-gradient(50% 50% at 70% 40%, rgba(66, 60, 212, .09), transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Alta: el degradado se mueve despacio, como una luz que gira
   -------------------------------------------------------------------------- */

@property --angulo {
  syntax: '<angle>';
  initial-value: 125deg;
  inherits: false;
}

.alta__reja {
  position: relative;
  background: linear-gradient(var(--angulo), var(--violeta-tinta) 0%, var(--violeta) 55%, #5b4ae8 100%);
  animation: girar-luz 18s ease-in-out infinite alternate;
  overflow: hidden;
}

@keyframes girar-luz {
  from { --angulo: 118deg; }
  to   { --angulo: 152deg; }
}

/* Trama de puntos tambien aqui, para que el bloque no sea un plano liso */
.alta__reja::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent 70%);
  pointer-events: none;
}
.alta__reja > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .alta__reja { animation: none; }
  .muestra__rotulo::before { animation: none; }
}


/* ==========================================================================
   Un respiro en turquesa a mitad de pagina
   Catorce secciones en el mismo lavanda se hacen monotonas. Este bloque usa
   el segundo color de la marca (#01eca7) muy rebajado, y funde por arriba y
   por abajo para que no se lea como una franja pegada.
   ========================================================================== */

#capacidades {
  position: relative;
  isolation: isolate;
}

#capacidades::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* La diagonal: turquesa arriba-izquierda, violeta abajo-derecha. Es el
       espejo del hero, que va del violeta al malva. */
    linear-gradient(145deg,
      rgba(1, 236, 167, .13) 0%,
      rgba(1, 236, 167, .05) 32%,
      transparent 58%,
      rgba(66, 60, 212, .07) 100%);
  /* Funde arriba y abajo: una franja de color con bordes rectos parte la
     pagina en dos en vez de darle ritmo. */
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}