/* =========================================================
   CLICK ODONTO — tokens e classes replicando o design
   desenvolvido no Base44 (clickpreview-2.base44.app).
   As classes utilitárias (Tailwind) ficam no HTML; aqui só
   os tokens de marca e os componentes que não são Tailwind.
   ========================================================= */

:root{
  --burgundy: #720917;
  --burgundy-dark: #5c0712;
  --burgundy-soft: #9b2b36;
  --ink: #1a1a1a;
  --warm-mist: #f8f6f4;

  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Cormorant Garamond", ui-serif, Georgia, serif;
}

*{ scroll-behavior: smooth; }

html{ scroll-padding-top: 88px; }

body{
  margin: 0;
  background-color: #fff;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.0625rem;
  line-height: 1.65;
}

img{ max-width: 100%; }

.font-heading{ font-family: var(--font-heading); }

.heading-display{
  font-family: var(--font-heading);
  letter-spacing: -.015em;
  font-weight: 600;
  line-height: 1.05;
}

.eyebrow{
  font-family: var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-size: .75rem;
  font-weight: 500;
}

.bg-warm-mist{ background-color: var(--warm-mist); }

.vellum-card{
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffffb8;
  border: 1px solid #72091714;
}

.magnetic-btn{
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.magnetic-btn:hover{ transform: translateY(-2px); }

/* Reveal-on-scroll (IntersectionObserver toggles .is-visible) */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* FAQ accordion panel animation (grid-rows trick) */
.faq-panel{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s ease, opacity .3s ease;
}
.faq-panel > div{ overflow: hidden; }
.faq-item.is-open .faq-panel{ grid-template-rows: 1fr; opacity: 1; }

/* Mobile nav panel */
#mobile-nav{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

/* Logo image sizing (object-fit contain inside fixed height) */
.brand-logo{ height: 34px; width: auto; display: block; }
.brand-logo-footer{ height: 30px; width: auto; display: block; }

@media (min-width: 1024px){
  .brand-logo{ height: 38px; }
}