/* Estilos para la animación interactiva por scroll */
.scroll-reveal {
  opacity: 0;
  transform: translateY(3rem) scale(0.95);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.scroll-reveal.reveal-left {
  transform: translateX(-3rem) scale(0.95);
}

.scroll-reveal.reveal-right {
  transform: translateX(3rem) scale(0.95);
}

.scroll-reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

#calculadora { background-image: url("../img/inicio/calculadora-roi.webp"); background-attachment: fixed; }

/* Animaciones de entrada inmediata para el Hero */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Animación de zoom lento y paneo sutil para la imagen de cabecera */
@keyframes subtleZoom {
  0% {
    transform: scale(1.03);
  }
  50% {
    transform: scale(1.08) translate(-0.5%, 0.5%);
  }
  100% {
    transform: scale(1.03);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 1200ms ease-out forwards;
}

.animate-subtle-zoom {
  animation: subtleZoom 25s ease-in-out infinite;
  will-change: transform;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Transición suave para el contenido del acordeón de FAQs */
.faq-content {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Mockup PDF Hover Effect */
.pdf-mockup-stack:hover .pdf-page-2 {
    transform: translate(-15px, -15px) rotate(-4deg);
}
.pdf-mockup-stack:hover .pdf-page-3 {
    transform: translate(-30px, -30px) rotate(-8deg);
}

.faq-content p, .texto p { padding:6px 0; }

.texto ul { list-style: none; padding-left: 39px; /* Deja espacio para los nuevos triángulos */ }
.texto ul li::before {
  content: ""; /* Obligatorio para que aparezca el pseudo-elemento */
  display: inline-block;
  
  /* Creamos el triángulo usando bordes transparentes y uno coloreado */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #007bff; /* Modifica este color hexadecimal por el azul que prefieras */
  
  /* Ajustes de espacio y alineación */
  margin-right: 10px;
  vertical-align: middle;
}

.texto h1, .texto h2 { font-weight: 800; font-size: 1.5rem; line-height:2rem; margin: 1.5rem 0; }
.texto h3 { font-weight:700; font-size:1.2rem; line-height:1.75rem; margin:1.2rem 0; }
.texto ol { list-style: decimal; padding-left: 39px; }
.texto li {padding:6px 0; }