/* ==========================================================
   SmartVolt · estilos compartidos (fuera de Tailwind)
   ========================================================== */

/* Rejilla sutil de fondo que se desvanece hacia los bordes */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000, transparent);
          mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000, transparent);
}

/* Entrada al cargar (hero y cabeceras) */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-rise { opacity: 0; animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }

/* Onda de tensión que se dibuja */
@keyframes draw {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
.animate-draw { stroke-dasharray: 600; animation: draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Aparición al hacer scroll (solo si hay JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Preguntas frecuentes */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

/* Filtro de proyectos */
.project-card.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .animate-rise, .animate-draw { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}