/* Estilos propios del sitio estático (lo que antes hacía React/framer-motion). */

html { scroll-behavior: smooth; }

/* Animación de entrada al hacer scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Línea animada bajo el hero */
.scroll-line { transform-origin: top; animation: scroll-line 1.8s ease-in-out infinite; }
@keyframes scroll-line {
  0%   { transform: scaleY(0); opacity: 1; }
  70%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-line { animation: none; }
}

/* Menú móvil */
.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .75rem 1rem 1.25rem;
  border-top: 1px solid hsl(var(--border) / .4);
  background: hsl(var(--background));
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: .75rem .5rem;
  font-weight: 500;
  color: hsl(var(--foreground) / .85);
  border-radius: .375rem;
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: hsl(var(--primary)); }
.mobile-menu .mobile-menu__cta {
  margin-top: .5rem;
  text-align: center;
  font-weight: 700;
  color: #000;
  background: hsl(var(--primary));
}
.mobile-menu .mobile-menu__cta:hover { color: #000; background: hsl(var(--primary) / .9); }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* Galería: tarjetas filtradas */
article[data-cat].is-hidden { display: none; }

/* Hero de páginas secundarias */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--primary) / .08) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / .08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent);
}

/* Contacto */
.contact-list { display: grid; gap: 1.25rem; }
.contact-list li { display: flex; flex-direction: column; gap: .15rem; }
.contact-list__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.contact-list a { color: hsl(var(--foreground)); font-size: 1.125rem; }
.contact-list a:hover { color: hsl(var(--primary)); }

.quote-form { display: grid; gap: 1rem; }
.quote-form label {
  display: grid;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--foreground) / .9);
}
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  font-weight: 400;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: .375rem;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 1px;
  border-color: transparent;
}
.quote-form [aria-invalid="true"] { border-color: #e5484d; }
.quote-form__error { color: #ff6b6b; font-size: .875rem; }

/* Páginas legales */
.legal { max-width: 48rem; color: hsl(var(--muted-foreground)); line-height: 1.75; }
.legal h2 {
  margin: 2rem 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}