/* ============================================================
   CGC Suelos Técnicos — styles.css
   Complementa Tailwind CDN con estilos custom
   ============================================================ */

/* — Smooth scroll — */
html { scroll-behavior: smooth; }

/* — Navbar — */
#navbar {
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#navbar.scrolled .nav-link { color: #64748b; }
#navbar.scrolled .nav-link:hover { color: #1d4ed8; }
#navbar.scrolled .nav-logo-text { color: #0f172a; }
#navbar.scrolled #mobile-menu-btn { color: #0f172a; }

/* — Gradient text (Madrid) — */
.gradient-text {
  background: linear-gradient(to right, #1d4ed8, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* — Pulse animation — */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* Stop after 3 cycles (6s) — decorative only */
.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 3; }

/* — Service card — */
.service-card { transition: all 0.3s ease; }
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
  border-color: rgba(29,78,216,0.2);
}
.service-card .card-img { transition: transform 0.35s ease-out; }
.service-card:hover .card-img { transform: scale(1.05); }
.service-card .card-overlay {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.2);
  transition: background 0.3s ease; z-index: 1;
}
.service-card:hover .card-overlay { background: transparent; }

/* — FAQ accordion — */
details summary::-webkit-details-marker { display: none; }
details summary { cursor: pointer; }
.faq-chevron { transition: transform 0.25s ease; }
details[open] .faq-chevron { transform: rotate(90deg); }
/* Animate content on open */
details[open] summary ~ * {
  animation: faqReveal 0.3s ease-out;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Value proposition image — */
.img-offset { position: relative; display: inline-block; width: 100%; }
.img-offset::before {
  content: '';
  position: absolute; inset: 0;
  background: #1d4ed8;
  transform: translate(16px, 16px);
  border-radius: 1.5rem; z-index: 0;
}
.img-offset img { position: relative; z-index: 1; }

/* — CTA button hover — */
.btn-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn-hover:hover { transform: translateY(-2px); }

/* — Prose (legal pages) — */
.prose h3 {
  font-size: 1.125rem; font-weight: 700;
  color: #0f172a; margin-top: 2rem; margin-bottom: 0.75rem;
}
.prose p { color: #475569; line-height: 1.75; margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ul li { color: #475569; margin-bottom: 0.5rem; line-height: 1.75; }
.prose strong { color: #0f172a; font-weight: 600; }

/* — Form fields — */
.form-input {
  width: 100%; padding: 0.625rem 0.875rem;
  border: 1px solid #e2e8f0; border-radius: 0.5rem;
  font-size: 0.875rem; background: #fff; color: #0f172a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none; border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.15);
}
.form-input.error { border-color: #ef4444; }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
.form-error { font-size: 0.75rem; color: #ef4444; margin-top: 0.25rem; display: none; }
.form-error.visible { display: block; }

/* — Values card — */
.value-card { transition: box-shadow 0.25s ease; }
.value-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* — Mobile menu fade — */
#mobile-menu { animation: fadeDown 0.2s ease; }
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* — Scroll reveal for feature list items — */
.feature-item { transition: color 0.2s ease; }

/* — Focus rings — */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 3px;
  border-radius: 4px;
}

/* — Stats section number glow — */
.stat-number {
  text-shadow: 0 0 40px rgba(96, 165, 250, 0.3);
}

/* — Process step circle — */
.process-step {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(29, 78, 216, 0.35);
}

/* — Reduced motion: disable all transitions and animations — */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}