/* AC CLINIC - custom styles (complements Tailwind CDN utility classes) */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

[x-cloak] {
  display: none !important;
}

body {
  font-family: 'DM Sans', sans-serif;
  /* AOS's fade-left/fade-right animations translate elements ~100px off to
     the side before they scroll into view. Off-screen (below-the-fold)
     elements sitting in that pre-animation state make the whole document
     wider than the viewport, which otherwise lets the entire page scroll
     horizontally (visible as empty space + a cut-off header on mobile).
     This is the standard fix: never let horizontal scroll happen at the
     page level, regardless of what's temporarily transformed off-screen. */
  overflow-x: hidden;
}

/* Blog post article body spacing */
.prose-post p {
  margin-bottom: 1.25rem;
}
.prose-post h2:first-child {
  margin-top: 0;
}

/* Offset for the fixed header so anchor/deep-links (#slug) land below it */
main, section[id] {
  scroll-margin-top: 96px;
}

/* Nav link underline effect */
.nav-link {
  position: relative;
  color: #44403c; /* stone-700 */
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #B08A3E; /* gold-500 */
  transition: width 0.2s ease;
}
.nav-link:hover {
  color: #96712F; /* gold-600 */
}
.nav-link:hover::after {
  width: 100%;
}
.nav-link-active {
  color: #96712F; /* gold-600 */
  font-weight: 600;
}
.nav-link-active::after {
  width: 100%;
}

/* Header phone link + mobile hamburger button — colours live here (not as
   inline Tailwind utility classes) so the homepage's transparent-over-hero
   header variant below can override them by selector alone, with no JS
   class-swapping needed beyond the single .header-scrolled toggle. */
.header-phone-link {
  color: #7A5A26; /* gold-700, matches every other page's default header */
}
.header-phone-link:hover {
  color: #5F451E; /* gold-800 */
}
.header-hamburger-btn {
  color: #44403c; /* stone-700 */
}
.header-hamburger-btn:hover {
  background-color: #FBF6EC; /* gold-50 */
}

/* Full-viewport homepage hero. min-height (not height) so content is
   never clipped — on very short mobile viewports the section is allowed
   to grow taller than the viewport rather than crushing its content.
   The second declaration (100dvh) overrides the first in browsers that
   support dynamic viewport units, correctly accounting for mobile
   browser chrome (address bar) showing/hiding; the 100vh line is a
   no-op fallback everywhere else. */
#hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ------------------------------------------------------------------ */
/* Homepage-only transparent hero header.                              */
/* Rendered only on index.html (see layout.js header()/generate.js      */
/* transparentHero flag) — sits with no background directly on top of  */
/* the hero photo so the photo fills the very top of the viewport,     */
/* including behind the logo/nav/CTA. assets/js/main.js toggles the    */
/* .header-scrolled class once the visitor scrolls past the hero       */
/* section, switching it back to the same solid look every other page  */
/* has permanently. Every other page is completely unaffected — it     */
/* never gets the .header-hero class at all.                           */
/* ------------------------------------------------------------------ */
.header-hero {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.header-hero .nav-link {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.header-hero .nav-link:hover {
  color: #F5EAD1; /* gold-100 */
}
.header-hero .nav-link-active {
  color: #EAD6A3; /* gold-200 */
}
.header-hero .nav-link-active::after {
  background-color: #EAD6A3;
}
.header-hero .header-phone-link {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.header-hero .header-phone-link:hover {
  color: #F5EAD1;
}
.header-hero .header-hamburger-btn {
  color: #ffffff;
}
.header-hero .header-hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
.header-hero .header-logo-link img {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  transition: filter 0.35s ease;
}

/* Scrolled past the hero: revert to the normal solid-white header, exactly
   like every other page, with a smooth (not abrupt) transition. */
.header-hero.header-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom-color: #F5EAD1; /* gold-100 */
}
.header-hero.header-scrolled .nav-link {
  color: #44403c; /* stone-700 */
  text-shadow: none;
}
.header-hero.header-scrolled .nav-link:hover {
  color: #96712F; /* gold-600 */
}
.header-hero.header-scrolled .nav-link-active {
  color: #96712F;
}
.header-hero.header-scrolled .nav-link-active::after {
  background-color: #B08A3E; /* gold-500 */
}
.header-hero.header-scrolled .header-phone-link {
  color: #7A5A26;
  text-shadow: none;
}
.header-hero.header-scrolled .header-phone-link:hover {
  color: #5F451E;
}
.header-hero.header-scrolled .header-hamburger-btn {
  color: #44403c;
}
.header-hero.header-scrolled .header-hamburger-btn:hover {
  background-color: #FBF6EC;
}
.header-hero.header-scrolled .header-logo-link img {
  filter: none;
}

/* Mobile nav link */
.nav-link-mobile {
  color: #292524;
  font-weight: 500;
  padding: 0.85rem 0;
  border-bottom: 1px solid #EAD6A3;
}
.nav-link-mobile-active {
  color: #96712F;
  font-weight: 700;
}

/* Accordion chevron rotation (FAQ + services "saber mais") */
.chevron-icon {
  transition: transform 0.25s ease;
}
.chevron-rotate {
  transform: rotate(180deg);
}

/* Team initials avatar */
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  background: radial-gradient(circle at 35% 30%, #F5EAD1, #EAD6A3 60%, #DEBE72 100%);
  color: #7A5A26;
}

/* Form fields */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid #E7E5E4; /* stone-200 */
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #1C1917;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #B08A3E;
  box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.18);
}
label.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #292524;
  margin-bottom: 0.35rem;
}

/* Site notice banner (cookie consent).
   Deliberately named "site-notice", not "cookie-*" - many ad-blocker
   filter lists hide elements matching common cookie-banner id/class
   patterns, which would silently stop this banner ever showing for a
   large share of visitors. */
#site-notice {
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

/* While the notice banner is showing, push the page's bottom padding down
   so the fixed banner never overlaps/covers footer links (e.g. Política de
   Privacidade) when the visitor scrolls to the end of the page. */
body.has-site-notice {
  padding-bottom: 92px;
}
@media (max-width: 640px) {
  body.has-site-notice {
    padding-bottom: 140px;
  }
}

/* Floating WhatsApp action button (site-wide, bottom-right).
   Positioning/colour intentionally live here (not as an inline style on
   the element) so the body.has-site-notice override below can win on
   specificity and actually lift the button above the notice banner. */
#whatsapp-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  background-color: #25D366;
  transition: bottom 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* When the notice banner is open, lift the button above it so the two
   fixed elements never visually collide. */
body.has-site-notice #whatsapp-fab {
  bottom: 92px;
}
@media (max-width: 640px) {
  body.has-site-notice #whatsapp-fab {
    bottom: 140px;
  }
}

/* Soft pulsing ring behind the WhatsApp FAB — the standard "chat bubble"
   attention cue. The ring is a ::before pseudo-element the same size/colour
   as the button itself (so it's invisible at rest, exactly hidden behind
   the button), that scales up and fades out on a slow loop. It sits behind
   the button's own icon/background via z-index: -1 within #whatsapp-fab's
   own stacking context (established by position + the button's own
   z-index), so the icon itself stays perfectly still — only the ring
   underneath moves. */
#whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: #25D366;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #whatsapp-fab::before {
    animation: whatsappPulse 2.6s ease-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  #whatsapp-fab::before {
    animation: none;
  }
}
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Hero "scroll" indicator dot — subtle, tasteful drift-and-fade, not a
   distracting bounce/pulse. */
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { opacity: 0.4; }
  100% { transform: translateY(12px); opacity: 0; }
}
.scroll-dot {
  animation: scrollDot 1.8s ease-in-out infinite;
}

/* ============================================================
   "Pigmento" pop-up — the alternate art-directed "Sobre Nós" concept,
   shown as a full-screen modal on top of the regular Sobre Nós page
   rather than replacing it. Every rule is scoped under #pigmento-modal
   so none of it can ever leak onto the rest of the site — this is a
   near-verbatim port of the original standalone v2 page's CSS, with:
     - body-level rules moved onto #pigmento-modal (that element is now
       the "page" for this content, since it's a div, not <body>)
     - position:sticky children now stick relative to #pigmento-modal
       itself, which is the actual scrolling container (overflow-y:auto)
     - unused rules from the original file (.area/.floors/.floor/.bar/
       .layer.light) dropped since nothing in the ported content uses them
   ============================================================ */
#pigmento-modal {
  --ink: #141416;
  --deep: #1A1A1D;
  --coal: #232327;
  --bone: #F7F4EF;
  --gold: #C9A961;
  --gold-d: #B08D4F;
  --blue-d: #2C5F8A;
  --display: "Cormorant Garamond", Georgia, serif;
  --body-font: "Karla", system-ui, sans-serif;

  background: var(--ink);
  color: var(--bone);
  font-family: var(--body-font);
  font-weight: 300;
  line-height: 1.7;
  font-size: clamp(15px, 1.02vw, 17px);
  -webkit-font-smoothing: antialiased;
}
#pigmento-modal * {
  box-sizing: border-box;
}
#pigmento-modal .grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#pigmento-modal h1,
#pigmento-modal h2,
#pigmento-modal h3 {
  font-family: var(--display);
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.02em;
}
#pigmento-modal h1 {
  font-size: clamp(3.6rem, 11.5vw, 13rem);
  line-height: 0.86;
}
#pigmento-modal h2 {
  font-size: clamp(2.2rem, 4.9vw, 4.6rem);
  line-height: 0.98;
}
#pigmento-modal h3 {
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 1.05;
}
#pigmento-modal em {
  font-style: italic;
  color: var(--gold);
}
#pigmento-modal p {
  max-width: 46ch;
  margin: 1.2em 0 0;
}
#pigmento-modal .lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  color: #E8E2D8;
}
#pigmento-modal .murmur {
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1.8rem;
}
#pigmento-modal .wrap {
  padding: 0 clamp(1.5rem, 6vw, 7rem);
}
#pigmento-modal .pig {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
#pigmento-modal .pig img {
  display: block;
  width: 100%;
  height: auto;
}
#pigmento-modal .enter {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  top: 0;
  overflow: hidden;
  padding-block: 14vh 10vh;
  background: var(--ink);
}
#pigmento-modal .enter h1 {
  position: relative;
  z-index: 3;
  text-shadow: 0 4px 60px rgba(20, 20, 22, 0.9);
}
#pigmento-modal .enter .sub {
  position: relative;
  z-index: 3;
  margin-top: 2.4rem;
  max-width: 38ch;
}
#pigmento-modal .enter .pig {
  bottom: -4%;
  left: -6%;
  width: min(115%, 1700px);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}
#pigmento-modal .scrolldown {
  position: absolute;
  bottom: 3.5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
}
#pigmento-modal .layer {
  position: sticky;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}
#pigmento-modal .hold {
  height: 175vh;
  position: relative;
}
#pigmento-modal .layer.deep {
  background: var(--deep);
}
#pigmento-modal .layer.coal {
  background: var(--coal);
}
#pigmento-modal .manifesto {
  position: relative;
  z-index: 3;
  max-width: min(38ch, 52vw);
}
#pigmento-modal .layer .pig.ondas {
  right: -10%;
  top: -12%;
  width: min(52%, 760px);
  opacity: 0.95;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.5));
}
#pigmento-modal .author {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  position: relative;
  z-index: 3;
}
#pigmento-modal .layer .pig.face {
  left: 52%;
  top: -6%;
  width: min(44%, 620px);
  opacity: 0.97;
  filter: drop-shadow(0 30px 90px rgba(0, 0, 0, 0.55));
}
#pigmento-modal .close {
  position: relative;
  z-index: 20;
  padding-block: clamp(9rem, 18vh, 16rem) 9rem;
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.55);
}
/* .lead's default colour (#E8E2D8, near-white) is meant for the dark
   .layer sections (manifesto/autor) — inside .close, which has a light
   "bone" background, that same near-white text was almost invisible.
   Override it back to a legible dark tone here, same value the original
   page used for its (unused-elsewhere) ".layer.light .lead" rule. */
#pigmento-modal .close .lead {
  color: #3A3A3E;
}
#pigmento-modal .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 3rem;
  padding: 1.15rem 2.4rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.4s, transform 0.4s;
}
#pigmento-modal .cta:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
}
#pigmento-modal .pending {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 0.45 (the original's value) was legible on the dark layers this was
     designed alongside, but too faint against .close's light background —
     bumped for readability. */
  opacity: 0.7;
  margin-top: 5rem;
}
#pigmento-modal.js .rv {
  opacity: 0;
  transform: translateY(30px);
}
#pigmento-modal .rv {
  transition: opacity 1.15s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pigmento-modal .rv.in {
  opacity: 1;
  transform: none;
}
/* Close (X) button, always reachable regardless of scroll position within
   the modal — sits above .grain (z-index 200). */
#pigmento-modal-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 300;
}
@media (min-width: 900px) {
  #pigmento-modal .author {
    grid-template-columns: minmax(0, 46%) 1fr;
  }
}
@media (max-width: 899px) {
  #pigmento-modal .layer .pig.ondas {
    right: -22%;
    top: auto;
    bottom: -4%;
    width: 78%;
    opacity: 0.55;
  }
  #pigmento-modal .layer .pig.face {
    left: auto;
    right: -18%;
    top: auto;
    bottom: -6%;
    width: 66%;
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pigmento-modal * {
    transition: none !important;
    animation: none !important;
  }
  #pigmento-modal.js .rv {
    opacity: 1 !important;
    transform: none !important;
  }
  #pigmento-modal .pig {
    transform: none !important;
  }
}

/* Decorative blurred blob shapes (no images used) */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Utility: line-clamp fallback */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

::selection {
  background-color: #EAD6A3;
  color: #473317;
}