/* =========================================================
   DRA. EDUARDA CAMPOS, CIRURGIÃ-DENTISTA
   Design tokens: dourado antigo + marfim + mármore
   ========================================================= */

:root{
  --cream:        #FBF6EC;
  --cream-deep:   #F2E9D8;
  --gold:         #B7924F;
  --gold-light:   #E4CFA0;
  --gold-pale:    #F1E4C6;
  --gold-deep:    #8C6D3F;
  --espresso:     #35291D;
  --espresso-soft:#5C4A38;
  --marble:       #DAD3C4;
  --marble-line:  #C9C0AC;
  --white:        #FFFFFF;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Outfit", ui-sans-serif, system-ui, sans-serif;

  --container: min(1180px, 92vw);
  --pad-section: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 28px;
  --ease: cubic-bezier(.16,.84,.44,1);

  --surface: #FFFFFF;
  --clay-out:    10px 10px 22px rgba(140,109,63,.16), -9px -9px 20px rgba(255,255,255,.9);
  --clay-out-sm:  6px 6px 13px rgba(140,109,63,.15), -6px -6px 12px rgba(255,255,255,.88);
  --clay-out-lg: 22px 22px 46px rgba(140,109,63,.22),-18px -18px 38px rgba(255,255,255,.85);
  --clay-in:     inset 3px 3px 7px rgba(140,109,63,.14), inset -3px -3px 7px rgba(255,255,255,.75);
}

html[data-theme="dark"]{
  --cream:        #221A11;
  --cream-deep:   #2A2116;
  --gold:         #D6B173;
  --gold-light:   #EBD9AE;
  --gold-pale:    #40331F;
  --gold-deep:    #E0BC82;
  --espresso:     #F5EEE1;
  --espresso-soft:#D3C4AC;
  --marble:       #3A3021;
  --marble-line:  #473B28;
  --surface:      #2C2317;

  --clay-out:    10px 10px 22px rgba(0,0,0,.5), -9px -9px 20px rgba(255,255,255,.035);
  --clay-out-sm:  6px 6px 13px rgba(0,0,0,.45), -6px -6px 12px rgba(255,255,255,.03);
  --clay-out-lg: 22px 22px 46px rgba(0,0,0,.55),-18px -18px 38px rgba(255,255,255,.03);
  --clay-in:     inset 3px 3px 7px rgba(0,0,0,.4), inset -3px -3px 7px rgba(255,255,255,.02);
}

*, *::before, *::after{ box-sizing: border-box; }

body, .proc-card, .badge, .dock, .dock-item, .location-card, .result-frame,
.gallery-item, .topnav, .btn, .theme-toggle, .about-photo-frame, .hero-photo-frame,
.location-map{
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
html{ background: var(--cream); }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--espresso);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
svg{ display:block; }

::selection{ background: var(--gold); color: var(--white); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
  border-radius: 4px;
}

.container{ width: var(--container); margin-inline:auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- typographic helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width: 28px; height:1px;
  background: var(--gold-deep);
  display:inline-block;
}
.display{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--espresso);
}
.display em{
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
}
.section-head{
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head p{
  margin-top: 1.1rem;
  font-size: 1.05rem;
  line-height:1.7;
  color: var(--espresso-soft);
}
.section-tag{ text-align:left; }

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.65rem;
  padding: 1.05rem 1.85rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight:600;
  font-size: .95rem;
  letter-spacing:.01em;
  isolation:isolate;
  overflow:hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn-gold{
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
  box-shadow: var(--clay-out-sm), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.14);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: var(--clay-out), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.14); }
.btn-gold svg{ width:18px; height:18px; position:relative; z-index:1; }
.btn-ghost{
  color: var(--espresso);
  background: var(--surface);
  box-shadow: var(--clay-out-sm);
}
.btn-ghost:hover{ box-shadow: var(--clay-out); transform: translateY(-2px); }
.btn-sm{ padding: .75rem 1.3rem; font-size:.85rem; }

/* ---------- click spark ---------- */
.click-spark{
  position: fixed;
  top:0; left:0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
}

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:10000;
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader img{ width: 96px; opacity:.9; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.7;} 50%{ transform:scale(1.08); opacity:1;} }

/* ---------- top nav ---------- */
.topnav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.4rem clamp(1.5rem, 4vw, 3.5rem);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.topnav.scrolled{
  background: rgba(251,246,236,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: .9rem;
  box-shadow: 0 1px 0 rgba(140,109,63,.12);
}
html[data-theme="dark"] .topnav.scrolled{
  background: rgba(34,26,17,.82);
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.topnav-brand{ display:flex; align-items:center; gap:.85rem; }
.topnav-brand img{ height: 34px; width:auto; }
.topnav-brand-meta{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-deep); font-weight:600;
  border-left: 1px solid var(--marble-line); padding-left:.85rem;
  display:none;
}
@media (min-width:560px){ .topnav-brand-meta{ display:inline-block; } }

.topnav-links{ display:none; align-items:center; gap:2.1rem; }
@media (min-width:980px){ .topnav-links{ display:flex; } }
.topnav-links a{
  font-size:.86rem; font-weight:500; letter-spacing:.01em;
  position:relative; padding-block:.3rem; color: var(--espresso-soft);
}
.topnav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--gold-deep); transition: right .35s var(--ease);
}
.topnav-links a:hover{ color: var(--espresso); }
.topnav-links a:hover::after{ right:0; }

.topnav-actions{ display:flex; align-items:center; gap:.9rem; }
.topnav-cta{ display:none; }
@media (min-width: 760px){ .topnav-cta{ display:inline-flex; } }

.theme-toggle{
  position:relative;
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); color: var(--gold-deep);
  box-shadow: var(--clay-out-sm);
}
.theme-toggle:hover{ box-shadow: var(--clay-out); }
.theme-toggle svg{
  position:absolute; width:19px; height:19px;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.theme-toggle .icon-moon{ opacity:0; transform: rotate(-50deg) scale(.5); }
html[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform: rotate(50deg) scale(.5); }
html[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform: rotate(0deg) scale(1); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top: 5rem;
  isolation: isolate;
}
.hero-canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}
.hero-bg-static{
  position:absolute; inset:0; z-index:0;
  transition: opacity .6s ease;
  background:
    radial-gradient(ellipse 62% 55% at 12% 15%, var(--gold-pale) 0%, transparent 62%),
    radial-gradient(ellipse 55% 48% at 92% 88%, var(--gold-light) 0%, transparent 58%),
    var(--cream);
}
.hero-grain{
  position:absolute; inset:0; z-index:1;
  opacity:.05; mix-blend-mode:multiply; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-inner{
  position:relative; z-index:2;
  width: var(--container); margin-inline:auto;
  display:grid;
  grid-template-columns: 1fr;
  align-items:center;
  gap: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 900px){
  .hero-inner{ grid-template-columns: 1.05fr .95fr; gap: 2rem; }
}
.hero-text{ position:relative; z-index:3; }
.hero-eyebrow{ margin-bottom: 1.6rem; }
.hero-title{
  font-size: clamp(3.1rem, 8vw, 6.4rem);
  overflow:hidden;
}
.hero-title .line{ overflow:hidden; }
.hero-title .line span{ display:block; }
.hero-tagline{
  margin-top: 1.7rem;
  max-width: 30rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height:1.65;
  color: var(--espresso-soft);
}
.hero-actions{
  margin-top: 2.4rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem;
}
.hero-cro{
  font-size:.82rem; letter-spacing:.05em; color: var(--espresso-soft);
}
.hero-photo-wrap{
  position:relative;
  z-index:2;
  justify-self:center;
  width: min(400px, 76vw);
}
.hero-photo-frame{
  position:relative;
  width:100%;
  filter: drop-shadow(0 30px 46px rgba(53,41,29,.28));
}
.hero-photo-fallback{
  position:relative; z-index:1;
  width:100%; height:100%; display:block;
  object-fit:contain;
}
#heroPhotoFrame canvas{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  display:block;
}
.hero-photo-source-b{ display:none; }
.hero-photo-hint{
  position:absolute; z-index:3; bottom: 4%; left:50%; transform:translateX(-50%);
  font-family: var(--font-body);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(53,41,29,.55);
  padding:.55rem 1.1rem; border-radius:999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:1; transition:opacity .4s;
  pointer-events:none;
  display:flex; align-items:center; gap:.5rem;
  white-space:nowrap;
}
.hero-photo-hint svg{ width:13px; height:13px; }
.hero-photo-frame.revealing .hero-photo-hint{ opacity:0; }
.hero-photo-hint .txt-touch{ display:inline; }
.hero-photo-hint .txt-mouse{ display:none; }
@media (hover:hover) and (pointer:fine){
  .hero-photo-hint .txt-touch{ display:none; }
  .hero-photo-hint .txt-mouse{ display:inline; }
}
.scroll-hint{
  position:absolute; bottom: clamp(1.4rem,3vw,2.4rem); left:50%; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep);
}
.scroll-hint .stick{ width:1px; height:34px; background: linear-gradient(var(--gold-deep), transparent); animation: sticky 2s ease-in-out infinite; }
@keyframes sticky{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* =========================================================
   SECTION WRAPPER + DIVIDERS
   ========================================================= */
section{ position:relative; }
.section-pad{ padding-block: var(--pad-section); }
.flow-divider{
  display:block; width:100%; height: clamp(60px,10vw,120px);
  margin-top: calc(var(--pad-section) * -1 + 1px);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{ background: var(--cream); }
.about-grid{
  display:grid; grid-template-columns: 1fr; gap: 3.5rem; align-items:center;
}
@media (min-width: 900px){ .about-grid{ grid-template-columns: .85fr 1.15fr; gap: 5rem; } }
.about-photo{ position:relative; justify-self:center; width:min(360px,80vw); }
.about-photo-frame{
  position:relative; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 4/5; box-shadow: var(--clay-out-lg);
}
.about-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.about-photo-frame::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(228,207,160,.18), transparent 40%);
}
.about-photo-back{
  position:absolute; z-index:-1; inset: 18px -18px -18px 18px;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--marble) 0 2px, var(--cream-deep) 2px 40px);
  opacity:.65;
}
.about-copy h2{ font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom:1.4rem; }
.about-copy p{ font-size:1.04rem; line-height:1.8; color: var(--espresso-soft); }
.about-copy p + p{ margin-top:1rem; }
.badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.2rem; }
.badge{
  padding:.6rem 1.15rem; border-radius:999px;
  background: var(--surface);
  box-shadow: var(--clay-out-sm);
  font-size:.82rem; letter-spacing:.02em; color: var(--espresso-soft);
  display:inline-flex; align-items:center; gap:.5rem;
}
.badge svg{ width:14px; height:14px; color: var(--gold-deep); }

/* =========================================================
   PROCEDURES
   ========================================================= */
.procedures{ background: var(--cream-deep); }
.proc-head{ width: var(--container); margin-inline:auto; padding-top: var(--pad-section); }
.proc-pin{ position:relative; }
.proc-track{
  display:flex; gap: clamp(1.2rem,2.5vw,2.2rem);
  padding-bottom: var(--pad-section);
}
.proc-card{
  flex: 0 0 auto;
  width: min(320px, 78vw);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2.4rem 2rem;
  box-shadow: var(--clay-out);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .5s ease;
}
.proc-card:hover{ transform: translateY(-8px); box-shadow: var(--clay-out-lg); }
.proc-icon{
  width:52px; height:52px; border-radius:16px;
  background: linear-gradient(145deg, var(--gold-pale), var(--gold-light));
  box-shadow: inset 2px 2px 5px rgba(140,109,63,.18), inset -2px -2px 5px rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.6rem;
}
.proc-icon svg{ width:24px; height:24px; color: var(--gold-deep); }
.proc-card h3{ font-family: var(--font-display); font-size:1.28rem; font-weight:600; margin-bottom:.7rem; }
.proc-card p{ font-size:.94rem; line-height:1.65; color: var(--espresso-soft); }

@media (min-width: 900px){
  .proc-pin{ height:100vh; display:flex; align-items:center; overflow:hidden; }
  .proc-track{ padding-left: max(4vw, calc((100vw - var(--container))/2)); padding-bottom:0; }
}
@media (max-width: 899px){
  .proc-track{
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-inline: 1.4rem; margin-inline: -1.4rem;
    scrollbar-width:none;
  }
  .proc-track::-webkit-scrollbar{ display:none; }
  .proc-card{ scroll-snap-align:start; }
}
.drag-hint{
  display:flex; align-items:center; gap:.6rem;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-deep);
  margin-top:1.2rem;
}
@media (min-width:900px){ .drag-hint{ display:none; } }

/* =========================================================
   BEFORE & AFTER
   ========================================================= */
.results{ background: var(--cream); }
.results-grid{
  display:grid; grid-template-columns: 1fr; gap: 2.4rem;
}
@media (min-width: 760px){ .results-grid{ grid-template-columns: repeat(3,1fr); gap: 2rem; } }
.result-card{
  position:relative;
}
.result-card:nth-child(2){ transform: translateY(0); }
@media (min-width: 760px){
  .result-card:nth-child(2){ transform: translateY(2.8rem); }
}
.result-frame{
  position:relative; border-radius: 26px; overflow:hidden;
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--clay-out);
}
.result-frame img{ border-radius: 11px; width:100%; }
.result-caption{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1rem; padding-inline:.3rem;
}
.result-caption span{ font-size:.85rem; letter-spacing:.03em; color: var(--espresso-soft); }
.result-caption .tag{
  font-family: var(--font-display); font-style:italic; color: var(--gold-deep); font-size:.95rem;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ background: var(--cream-deep); }
.testimonial-grid{
  column-count: 1; column-gap: 1.3rem;
}
@media (min-width: 640px){ .testimonial-grid{ column-count: 2; } }
@media (min-width: 1020px){ .testimonial-grid{ column-count: 3; } }
.testimonial-card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1.3rem;
  border-radius: 22px;
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--clay-out);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .5s ease;
}
.testimonial-card:hover{ transform: translateY(-5px); box-shadow: var(--clay-out-lg); }
.testimonial-card img{ display:block; width:100%; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  position:relative;
  padding-block: clamp(3.5rem,7vw,5.5rem);
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 45%, var(--gold-light));
  overflow:hidden;
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.06; mix-blend-mode:overlay;
}
.cta-band-inner{ position:relative; width: var(--container); margin-inline:auto; }
.cta-band h2{
  font-family: var(--font-display); font-weight:600; font-style:italic;
  color: var(--white); font-size: clamp(1.9rem, 4vw, 3rem); line-height:1.15;
  margin-bottom: 1.9rem;
}
.cta-band .btn-ghost{ background: var(--white); color: var(--gold-deep); border-color: transparent; }
.cta-band .btn-ghost:hover{ background: var(--espresso); color: var(--white); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ background: var(--cream-deep); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
}
@media (min-width: 720px){
  .gallery-grid{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 14vw);
    gap: 1.1rem;
    grid-template-areas:
      "a a b b"
      "a a c d";
  }
  .gallery-grid > *:nth-child(1){ grid-area: a; }
  .gallery-grid > *:nth-child(2){ grid-area: b; }
  .gallery-grid > *:nth-child(3){ grid-area: c; }
  .gallery-grid > *:nth-child(4){ grid-area: d; }
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:22px;
  aspect-ratio: 1/1;
  box-shadow: var(--clay-out-sm);
}
@media (min-width: 720px){ .gallery-item{ aspect-ratio:auto; height:100%; } }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
}
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(140,109,63,.08), transparent 45%);
  pointer-events:none;
}

/* =========================================================
   LOCATION
   ========================================================= */
.location{ background: var(--cream); }
.location-grid{
  display:grid; grid-template-columns: 1fr; gap:2rem;
}
@media (min-width: 820px){ .location-grid{ grid-template-columns:1fr 1fr; } }
.location-card{
  background: var(--surface);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--clay-out);
}
.location-map{ width:100%; height: 220px; border:0; filter: sepia(8%) saturate(85%); display:block; background: var(--cream-deep); }
html[data-theme="dark"] .location-map{ filter: sepia(15%) saturate(80%) brightness(.82) contrast(1.05); }
.location-body{ padding: 1.9rem 2rem 2.2rem; }
.location-city{ font-family: var(--font-display); font-size:1.5rem; font-weight:600; margin-bottom:.5rem; }
.location-addr{ font-size:.96rem; color: var(--espresso-soft); line-height:1.6; }
.location-meta{
  margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem;
  font-size:.82rem; color: var(--gold-deep); letter-spacing:.02em;
}
.location-meta li{ display:flex; align-items:center; gap:.4rem; }
.location-meta svg{ width:14px; height:14px; }
.location-actions{ margin-top:1.5rem; display:flex; gap:.8rem; flex-wrap:wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: #35291D;
  color: #FBF6EC;
  padding-block: 5rem 8rem;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(183,146,79,.18), transparent 70%);
  pointer-events:none;
}
.footer-inner{ position:relative; text-align:center; }
.footer-logo{ width: 168px; margin-inline:auto; opacity:.95; filter: brightness(0) invert(1); }
.footer-tag{
  font-family: var(--font-display); font-style:italic; font-size:1.3rem;
  margin-top:1.6rem; color: var(--gold-light);
}
.footer-meta{
  margin-top: 2.2rem; display:flex; flex-wrap:wrap; justify-content:center; gap: .6rem 1.6rem;
  font-size:.85rem; color: rgba(251,246,236,.65);
}
.footer-rule{ width: 60px; height:1px; background: rgba(251,246,236,.2); margin: 2.2rem auto; }
.footer-copy{ font-size:.78rem; color: rgba(251,246,236,.45); }

/* =========================================================
   DOCK
   ========================================================= */
.dock-wrap{
  position: fixed; left:50%; bottom: clamp(1rem, 3vw, 1.8rem);
  transform: translateX(-50%);
  z-index: 600;
}
.dock{
  display:flex; align-items:flex-end; gap:.5rem;
  padding: .6rem .7rem;
  border-radius: 999px;
  background: rgba(251,246,236,.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--clay-out);
}
html[data-theme="dark"] .dock{ background: rgba(34,26,17,.7); }
.dock-item{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface);
  color: var(--gold-deep);
  position:relative;
  flex-shrink:0;
  transform-origin: bottom center;
  box-shadow: var(--clay-out-sm);
}
.dock-item svg{ width:19px; height:19px; }
.dock-item .dock-tip{
  position:absolute; bottom: calc(100% + 12px); left:50%; transform: translateX(-50%);
  background: var(--espresso); color: var(--cream);
  font-size:.72rem; padding:.35rem .7rem; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s;
}
.dock-item:hover .dock-tip{ opacity:1; }
.dock-item.whatsapp{ background: linear-gradient(145deg, var(--gold-light), var(--gold)); color:var(--white); }

/* =========================================================
   REVEAL UTILITIES (JS-driven via GSAP, base state here)
   ========================================================= */
[data-reveal]{ will-change: transform, opacity; }

/* =========================================================
   RESPONSIVE TYPE SCALE FOR SECTION HEADS
   ========================================================= */
.section-head h2{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); }

@media (max-width: 480px){
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .footer-meta{ flex-direction:column; gap:.5rem; }
}