/* Base animations */

@keyframes fadeInUp {

  from {

      opacity: 0;

      transform: translateY(20px);

  }

  to {

      opacity: 1;

      transform: translateY(0);

  }

}



/* Component animations */

.feature-item,

.ventaja-item,

.ventaja-principal,

.testimonio-item {

  opacity: 0;

  transform: translateY(20px);

  transition: all 0.5s ease-out;

}



.feature-item.feature-visible,

.ventaja-item.ventaja-visible,

.ventaja-principal.ventaja-visible,

.testimonio-item.testimonio-visible {

  opacity: 1;

  transform: translateY(0);

}



/* Play button styles */

.play-button {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 80px;

  height: 80px;

  background-color: rgba(233, 30, 99, 0.9);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  box-shadow: 0 10px 25px rgba(233, 30, 99, 0.4);

  animation: pulse-attention 2s infinite;

}



/* Efecto de pulsación para llamar la atención */

@keyframes pulse-attention {

  0% {

      box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7);

      transform: translate(-50%, -50%) scale(1);

  }

  70% {

      box-shadow: 0 0 0 15px rgba(233, 30, 99, 0);

      transform: translate(-50%, -50%) scale(1.05);

  }

  100% {

      box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);

      transform: translate(-50%, -50%) scale(1);

  }

}



.play-button:hover {

  background-color: rgba(233, 30, 99, 1);

  transform: translate(-50%, -50%) scale(1.1);

  box-shadow: 0 15px 30px rgba(233, 30, 99, 0.6);

}



/* Efecto al hacer clic */

.play-button:active {

  transform: translate(-50%, -50%) scale(0.95);

  box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4);

  transition: all 0.1s ease;

}



.play-icon {

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 15px 0 15px 25px;

  border-color: transparent transparent transparent white;

  margin-left: 5px;

  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));

}



/* Añadir texto "Ver video" debajo del botón */

.play-button::after {

  content: "Ver video";

  position: absolute;

  bottom: -30px;

  left: 50%;

  transform: translateX(-50%);

  color: white;

  font-weight: bold;

  background: rgba(0, 0, 0, 0.6);

  padding: 4px 12px;

  border-radius: 20px;

  font-size: 14px;

  white-space: nowrap;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.play-button:hover::after {

  opacity: 1;

}



/* Hero blob */

.hero-blob {

  position: absolute;

  width: 24rem;

  height: 24rem;

  background-color: rgba(17, 179, 162, 0.08);

  border-radius: 50%;

  filter: blur(80px);

  z-index: -10;

  transform: translate3d(0, 0, 0);

  pointer-events: none;

  contain: strict;

}



/* Focus styles */

a:focus-visible,

button:focus-visible {

  outline: none;

  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);

  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

  --tw-ring-opacity: 0.5;

  --tw-ring-color: rgb(17 179 162 / var(--tw-ring-opacity));

  --tw-ring-offset-width: 2px;

}



/* Responsive styles */

@media (max-width: 768px) {

  html {

      font-size: 17px;

  }

  

  .hero-blob {

      width: 16rem;

      height: 16rem;

  }

  

  .play-button {

      width: 55px;

      height: 55px;

  }

  

  .play-icon {

      border-width: 10px 0 10px 16px;

  }

  

  /* Más espacio entre ítems en móvil */

  .feature-item {

      margin-bottom: 1.5rem;

      padding-bottom: 1.5rem;

  }

  

  /* Ajustar tamaño del ícono para móvil */

  .feature-item .w-14.h-14 {

      width: 3rem;

      height: 3rem;

  }

  

  /* Mejorar animación en móvil */

  .feature-item.initial {

      opacity: 0;

      transform: translateY(15px);  /* Movimiento más sutil en móvil */

  }

  

  /* Ajustar velocidad de transición para móvil */

  .feature-item {

      transition: opacity 0.8s ease-out, transform 0.8s ease-out;

  }

}



/* Mejorar comportamiento touch en móviles */

@media (hover: none) {

  .feature-item:active {

      transform: translateY(-2px);

      transition: transform 0.2s ease;

  }

}



/* Animaciones generales */

.initial {

  opacity: 0;

  transform: translateY(20px);

  visibility: hidden;

  will-change: opacity, transform;

  min-height: 0;

  content-visibility: auto;

}



/* Animaciones para features */

.feature-visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}



/* Animaciones para testimonios */

.testimonio-visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}



/* Animaciones para ventajas */

.ventaja-visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}



/* Animaciones para los pasos del proceso */

.process-step {

  transition: opacity 1.2s ease-out, transform 1.2s ease-out;

}



.process-step.step-visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}



/* Efecto de entrada para los círculos de los pasos */

.process-step [class*="rounded-full"] {

  transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transform: scale(0.8);

}



.process-step.step-visible [class*="rounded-full"] {

  transform: scale(1);

}



/* Añadir un pequeño rebote al final de la animación */

@keyframes slight-bounce {

  0%, 100% { transform: translateY(0); }

  40% { transform: translateY(-8px); }

  70% { transform: translateY(-4px); }

  85% { transform: translateY(-2px); }

}



.process-step.step-visible {

  animation: slight-bounce 2s ease-in-out 1.2s;

}



/* Efecto de onda al hacer clic */

.ripple-effect {

  position: absolute;

  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.7);

  transform: scale(0);

  animation: ripple 0.6s linear;

  pointer-events: none;

}



@keyframes ripple {

  to {

      transform: scale(2);

      opacity: 0;

  }

}



/* Prevenir CLS creando placeholders */

.feature-item, .testimonio-item, .ventaja-item, .process-step {

  min-height: 100px;

  position: relative;

  visibility: visible !important;

  transition: opacity 1s ease, transform 1s ease;

  transform: translateY(0);

}



/* Transiciones y animaciones para logos de partners */

.partner-logo-container {

  transition: all 0.3s ease;

}



.partner-logo-container:hover {

  transform: translateY(-2px);

  background-color: rgba(255, 255, 255, 0.9);

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

}



.partner-logo {

  opacity: 0.9;

  transition: opacity 0.3s ease;

}



.partner-logo-container:hover .partner-logo {

  opacity: 1;

}