/* Rivaltec S.L. — Webflow project styles */

/* ========= Organic blob shapes ========= */
.blob-1 {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: #ffedd5;
  opacity: .55;
  top: -80px;
  left: -140px;
  z-index: 0;
  pointer-events: none;
}
.blob-2 {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  background: #fddcab;
  opacity: .35;
  bottom: -60px;
  right: -100px;
  z-index: 0;
  pointer-events: none;
}
.gradient-orb {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fbb97a 0%, #ffedd5 50%, transparent 72%);
  opacity: .45;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

/* ========= Divider blobs ========= */
.divider-blob {
  position: relative;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
}
.divider-blob svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========= Scroll animation ========= */
.animate-hidden {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.animate-visible {
  opacity: 1;
  transform: scale(1);
}

/* ========= Cookie banner ========= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform 0.35s ease;
}
.cookie-banner.hidden {
  transform: translateY(110%);
}

/* ========= Bottom-sheet mobile menu ========= */
.mobile-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8001;
  border-radius: 1.5rem 1.5rem 0 0;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.mobile-sheet.active {
  transform: translateY(0);
}
.mobile-sheet .sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 9999px;
  margin: 10px auto 0;
}

/* ========= Floating nav ========= */
.floating-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.floating-nav.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
}

/* ========= Accordion ========= */
details summary {
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details[open] .faq-chevron {
  transform: rotate(180deg);
}
.faq-chevron {
  transition: transform 0.25s ease;
}

/* ========= Form focus ========= */
.form-field:focus {
  border-color: #9a3412 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(154,52,18,.12);
}

/* ========= Button micro-interactions ========= */
.btn-primary {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(154,52,18,.2);
}
.btn-secondary {
  transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover {
  transform: scale(1.02);
}

/* ========= Card hover ========= */
.card-pill {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-pill:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* ========= Nav link underline ========= */
.nav-link-custom {
  position: relative;
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #9a3412;
  transition: width 0.25s ease, left 0.25s ease;
}
.nav-link-custom:hover::after {
  width: 100%;
  left: 0;
}

/* ========= Wave footer ========= */
.footer-wave {
  position: relative;
}
.footer-wave svg {
  position: absolute;
  top: -79px;
  left: 0;
  width: 100%;
  height: 80px;
}

/* ========= Responsive ========= */
@media (max-width: 768px) {
  .blob-1 { width: 280px; height: 280px; top: -40px; left: -80px; }
  .blob-2 { width: 200px; height: 200px; }
  .gradient-orb { width: 300px; height: 300px; right: -120px; }
  .floating-nav { top: 8px; left: 8px; right: 8px; transform: none; width: auto; }
}