*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: #FAF9F6;
  color: #1A1A1F;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

footer {
  position: relative;
  z-index: 45;
  isolation: isolate;
}

/* ── Typography tracking ── */
.font-serif { letter-spacing: -0.03em; }
body, .font-sans { letter-spacing: -0.01em; }
.tracking-widest { letter-spacing: 0.12em; }

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Header ── */
header {
  height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
#header {
  z-index: 60 !important;
  transition: background-color 0.3s ease, box-shadow 350ms ease,
              backdrop-filter 350ms ease, transform 380ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#header.scrolled {
  background-color: rgba(250, 249, 246, 0.95) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  box-shadow: 0 1px 0 0 rgba(139,115,85,0.12), 0 4px 24px 0 rgba(26,26,31,0.04) !important;
}
#header.hidden-up {
  transform: translateY(-110%) !important;
}

.nav-link {
  position: relative;
  color: #1A1A1F !important;
  transition: color 220ms ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background-color: #8B7355 !important;
  transition: width 280ms ease;
}
.nav-link:hover { color: #8B7355 !important; }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #8B7355 !important; }
.nav-link.active::after { width: 100% !important; }

/* ── Buttons ── */
.btn-primary,
.btn-gradient,
.btn-secondary,
.btn-home-cinematic {
  background-color: #8B7355;
  color: #ffffff;
  border: 1px solid #8B7355;
  border-radius: 0.5rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  will-change: transform, box-shadow;
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 rgba(139,115,85,0);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease,
    background-color 320ms ease,
    color 320ms ease,
    border-color 320ms ease;
}

.btn-primary:hover,
.btn-gradient:hover,
.btn-secondary:hover,
.btn-home-cinematic:hover,
.btn-primary:focus-visible,
.btn-gradient:focus-visible,
.btn-secondary:focus-visible,
.btn-home-cinematic:focus-visible {
  transform: translateY(-1px) scale(1.035);
  box-shadow: 0 14px 30px rgba(139,115,85,0.22);
  opacity: 1;
}

.btn-mobile-outline {
  background-color: transparent;
  color: #8B7355;
  border-color: #8B7355;
}

.btn-mobile-outline:hover,
.btn-mobile-outline:focus-visible {
  background-color: rgba(139,115,85,0.08);
  color: #8B7355;
  border-color: #8B7355;
}

/* ── Hero animations ── */
.hero-el { opacity: 0; transform: translateY(20px); }
.hero-el.visible { animation: fadeUp 800ms ease-out forwards; }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ── Marquee ── */
.marquee-track {
  display: flex;
  gap: 4rem;
  animation: marquee 22s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Process tabs ── */
#proceso .tab-btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: 'Ovo', Georgia, serif;
  font-size: clamp(1.55rem, 2.8vw, 1.95rem);
  font-weight: 400;
  color: #b3aaa1;
  background: none;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  padding: 1rem 1.25rem;
  text-align: left;
  transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
  line-height: 1.2;
}
#proceso .tab-btn sup {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  color: #b3aaa1;
  letter-spacing: 0.01em;
  transition: color 250ms ease;
  vertical-align: super;
}
#proceso .tab-btn.active {
  color: #1A1A1F;
  background-color: #f7f2ec;
  border: 1px solid #E5DCD0;
}
#proceso .tab-btn.active sup { color: #8B7355; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Tab CTA link */
.tab-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #1A1A1F;
  text-decoration: none;
  transition: color 220ms ease, gap 220ms ease;
}
.tab-cta-link:hover { color: #8B7355; gap: 0.75rem; }
.tab-cta-link svg { flex-shrink: 0; transition: transform 220ms ease; }
.tab-cta-link:hover svg { transform: translateX(3px); }

/* ── Mobile menu ── */
body #mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 61;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
body #mobile-menu.open { opacity: 1; transform: translateX(0); pointer-events: auto; }

.mobile-menu-panel {
  min-height: 100svh;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(250, 249, 246, 0.98) 0%, rgba(248, 244, 238, 0.98) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 4.9rem) 1.75rem calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu-groups {
  display: flex;
  flex-direction: column;
  gap: 1.85rem;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

.mobile-menu-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-menu-label {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #8B7355;
  opacity: 0.9;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mobile-menu-links a {
  width: fit-content;
  font-size: 1.16rem;
  line-height: 1.18;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #1A1A1F;
  text-decoration: none;
}

.mobile-menu-link {
  position: relative;
  padding-bottom: 0.18rem;
}

.mobile-menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #8B7355;
  transition: width 280ms ease;
}

.mobile-menu-link:hover::after,
.mobile-menu-link:focus-visible::after,
.mobile-menu-link.is-active::after {
  width: 100%;
}

.mobile-menu-link.is-active {
  color: #8B7355;
  font-weight: 500;
}

.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto 0;
  padding-top: 0;
}

.mobile-menu-actions a {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 0.9rem;
}

#mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 31, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 59;
}

#mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.hline { transition: transform 280ms ease, opacity 280ms ease, width 280ms ease; }

@media (min-width: 768px) {
  #mobile-menu,
  #mobile-menu-overlay {
    display: none !important;
  }
}

/* ── Footer mobile refinement ── */
@media (max-width: 767px) {
  footer.bg-cream-alt.border-t.border-brown-light {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl {
    width: 100%;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 60px !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:first-child a {
    display: inline-flex !important;
    flex-shrink: 0;
    justify-content: center;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:first-child p {
    width: 100% !important;
    margin-top: 10px !important;
    max-width: none !important;
    text-align: center !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 20px !important;
    margin-bottom: 24px !important;
    align-items: start !important;
    justify-items: start !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:nth-child(2) > div > p:first-child {
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    color: #8B7355 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.45rem !important;
    text-align: left !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:nth-child(2) > div {
    width: 100% !important;
    text-align: left;
    justify-self: stretch;
    padding-left: 24px !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:nth-child(2) > div:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 14px !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.625rem;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:nth-child(2) a {
    display: inline-block;
    font-weight: 400 !important;
    color: rgba(26, 26, 31, 0.62) !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:last-child {
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer.bg-cream-alt.border-t.border-brown-light > .max-w-7xl > div:last-child > div:last-child {
    gap: 12px 16px !important;
    justify-content: center !important;
  }
}

/* ── FAQ Accordion ── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease, padding 300ms ease;
}
.faq-answer.open { max-height: 400px; }
.faq-icon { transition: transform 300ms ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── Case studies scroll ── */
.cases-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.cases-scroll::-webkit-scrollbar { display: none; }
.case-card { scroll-snap-align: start; flex: 0 0 280px; }
@media (min-width: 768px) { .case-card { flex: 0 0 320px; } }

/* ── Comparison cards ── */
.comp-check { color: #8B7355; }
.comp-cross  { color: #C5BDB5; }

/* ── Hero orbs ── */
@keyframes orbPulse {
  from { transform: scale(1);    }
  to   { transform: scale(1.08); }
}
.hero-orb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  animation: orbPulse 7s ease-in-out infinite alternate;
}
.hero-orb-left {
  width: 700px;
  height: 500px;
  left: -140px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: radial-gradient(ellipse at center, rgba(235,91,37,1) 0%, rgba(235,91,37,0.75) 35%, transparent 72%);
  opacity: 0.9;
  animation-name: orbPulseLeft;
}
@keyframes orbPulseLeft {
  from { transform: translateY(-50%) scale(1);    opacity: 0.72; }
  to   { transform: translateY(-50%) scale(1.08); opacity: 0.9; }
}
.hero-orb-right {
  width: 600px;
  height: 450px;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  background: radial-gradient(ellipse at center, rgba(82,124,132,0.95) 0%, rgba(82,124,132,0.72) 35%, transparent 72%);
  opacity: 0.82;
  animation-name: orbPulseRight;
  animation-duration: 8s;
  animation-delay: -3s;
}
@keyframes orbPulseRight {
  from { transform: translateY(-50%) scale(1);    opacity: 0.62; }
  to   { transform: translateY(-50%) scale(1.08); opacity: 0.82; }
}
@media (max-width: 768px) {
  .hero-orb-left  { width: 420px; height: 300px; left: -84px;  }
  .hero-orb-right { width: 360px; height: 270px; right: -72px; }
  @keyframes orbPulseLeft  { from { transform: translateY(-50%) scale(1);    opacity: 0.13; } to { transform: translateY(-50%) scale(1.08); opacity: 0.21; } }
  @keyframes orbPulseRight { from { transform: translateY(-50%) scale(1);    opacity: 0.09; } to { transform: translateY(-50%) scale(1.08); opacity: 0.15; } }
}

/* ── Custom cursor ── */
#kensho-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background-image: url('assets/logo_kensho/Icon Kensho 26.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  transform-origin: center;
  transition: filter 200ms ease, transform 120ms ease;
}

body.audit-modal-native-cursor,
body.audit-modal-native-cursor * {
  cursor: auto !important;
}

body.audit-modal-native-cursor #kensho-cursor {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ── Bottom glass overlay ── */
.bottom-glass {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom,
    rgba(250,249,246,0) 0%,
    rgba(250,249,246,0.1) 20%,
    rgba(250,249,246,0.3) 40%,
    rgba(250,249,246,0.6) 65%,
    rgba(250,249,246,0.9) 85%,
    rgba(250,249,246,1) 100%
  );
  pointer-events: none;
  z-index: 9998;
}