/* =========================================================
   Dra. Gabriela Cremoneis — Cirurgia Vascular
   Paleta institucional
   ========================================================= */
:root{
  --cream: #f3ebe1;
  --soft:  #e0cdc9;
  --wine:  #66232c;
  --wine-2: #4d1a21;
  --rose:  #cfadab;
  --rose-2: #b88c89;
  --ink:   #2a1c1e;
  --ink-2: #5a4548;
  --white: #fbf7f2;

  --maxw: 1240px;

  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-script: 'Allura', 'Cormorant Garamond', cursive;

  --shadow-sm: 0 2px 8px rgba(102,35,44,.05), 0 1px 2px rgba(102,35,44,.04);
  --shadow-md: 0 12px 30px -10px rgba(102,35,44,.18), 0 6px 12px -6px rgba(102,35,44,.08);
  --shadow-lg: 0 30px 60px -20px rgba(102,35,44,.22), 0 12px 24px -12px rgba(102,35,44,.1);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.script{
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  font-size: 1.22em;
  letter-spacing: 0.01em;
  color: var(--wine);
  line-height: 0.9;
}
.signature{
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--wine);
}
.signature--md{ font-size:2rem; }
.signature--lg{ font-size:2.6rem; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(243,235,225,.72);
  border-bottom: 1px solid rgba(102,35,44,.08);
  transition: background .3s ease, border-color .3s ease;
}
.nav.is-scrolled{
  background: rgba(243,235,225,.92);
  border-color: rgba(102,35,44,.12);
}
.nav__inner{
  max-width: var(--maxw);
  margin-inline:auto;
  padding: 16px clamp(20px, 4vw, 56px);
  display:flex;
  align-items:center;
  gap: 28px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-right: auto;
}
.brand__mark{
  width: 54px;
  height: 49px;
  border-radius: 14px;
  overflow: hidden;
  display:grid;
  place-items:center;
}
.brand__mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display:block;
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--wine);
  letter-spacing: .01em;
}
.brand__sub{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-2);
  margin-top: 2px;
}
.nav__links{
  display:flex;
  gap: 30px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}
.nav__links a{
  position:relative;
  padding: 6px 0;
  transition: color .25s ease;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: var(--wine);
  transition: width .3s ease;
}
.nav__links a:hover{ color: var(--wine); }
.nav__links a:hover::after{ width:100%; }

.nav__burger{
  display:none;
  width: 38px; height: 38px;
  background:transparent;
  border: 1px solid rgba(102,35,44,.18);
  border-radius: 50%;
  flex-direction:column;
  gap:4px;
  align-items:center;
  justify-content:center;
}
.nav__burger span{
  display:block;
  width: 14px; height: 1px;
  background: var(--wine);
}

@media (max-width: 900px){
  .nav__inner{
    padding: 12px 16px;
    gap: 14px;
  }
  .brand{ gap: 10px; }
  .brand__mark{
    width: 46px;
    height: 42px;
    border-radius: 12px;
  }
  .brand__name{ font-size: 15px; }
  .brand__sub{
    font-size: 8.5px;
    letter-spacing: .16em;
  }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

@media (max-width: 560px){
  .brand__sub{ display:none; }
  .brand__name{ font-size: 13px; }
  .brand__txt{ gap: 0; }
  .brand__mark{
    width: 42px;
    height: 38px;
  }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--solid{
  background: var(--wine);
  color: var(--cream);
  box-shadow: 0 6px 14px -6px rgba(102,35,44,.55);
}
.btn--solid:hover{
  background: var(--wine-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(102,35,44,.55);
}
.btn--ghost{
  background: transparent;
  color: var(--wine);
  border: 1px solid rgba(102,35,44,.2);
}
.btn--ghost:hover{
  background: rgba(102,35,44,.05);
  border-color: var(--wine);
}
.btn--ghost-light{
  color: var(--cream);
  border-color: rgba(243,235,225,.4);
}
.btn--ghost-light:hover{
  background: rgba(243,235,225,.1);
  border-color: var(--cream);
}
.btn--outline{
  background: transparent;
  color: var(--wine);
  border: 1px solid var(--wine);
}
.btn--outline:hover{
  background: var(--wine);
  color: var(--cream);
}
.btn--lg{ padding: 16px 28px; font-size: 14px; }
.btn--block{ width:100%; justify-content:center; }
.btn--wa{
  background: #128c4f;
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(18,140,79,.55);
}
.btn--wa:hover{ background: #0e7942; box-shadow: 0 12px 26px -8px rgba(18,140,79,.6); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 9vw, 120px) 0 clamp(60px, 8vw, 100px);
  isolation: isolate;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index: -1;
}
.hero__blob{
  position:absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity:.6;
}
.hero__blob--a{
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--rose), transparent 70%);
  top: -120px; right: -120px;
}
.hero__blob--b{
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--soft), transparent 70%);
  bottom: -100px; left: -100px;
  opacity:.5;
}
.hero__grain{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(102,35,44,.02) 0 1px, transparent 1px 4px);
  opacity:.5;
  mix-blend-mode: multiply;
}
.hero__inner{
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: clamp(20px, 4vw, 56px);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(102,35,44,.06);
  border: 1px solid rgba(102,35,44,.12);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 500;
}
.eyebrow__dot{
  width:6px;height:6px;border-radius:50%;
  background: var(--wine);
  box-shadow: 0 0 0 4px rgba(102,35,44,.15);
}
.hero__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 26px 0 22px;
}
.hero__title .script{
  display:inline-block;
  transform: translateY(.05em);
}
.hero__lede{
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-2);
  max-width: 520px;
  margin: 0 0 36px;
  line-height: 1.7;
}
.hero__cta{ display:flex; gap: 12px; flex-wrap:wrap; }
.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 56px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(102,35,44,.12);
  max-width: 540px;
}
.hero__stats > div{ display:flex; flex-direction:column; gap:4px; }
.hero__stats dt{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--wine);
  line-height: 1;
}
.hero__stats dd{
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
  max-width: 140px;
}

/* Portrait */
.hero__visual{
  position:relative;
  display:flex;
  justify-content:center;
}
.portrait{
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
}
.portrait__frame{
  position:relative;
  aspect-ratio: 3 / 4;
  border-radius: 280px 280px 32px 32px;
  overflow:hidden;
  background: var(--soft);
  box-shadow: var(--shadow-lg);
}
.portrait__frame::before{
  content:"";
  position:absolute;
  inset: 14px;
  border: 1px solid rgba(243,235,225,.5);
  border-radius: 270px 270px 22px 22px;
  pointer-events:none;
  z-index: 2;
}
.portrait__placeholder{
  width:100%; height:100%;
}
.portrait__placeholder img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center top;
}
.portrait__sig{
  text-align:center;
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.portrait__role{
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.portrait__chip{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(251,247,242,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(102,35,44,.1);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wine);
  box-shadow: var(--shadow-sm);
  animation: floatY 5s ease-in-out infinite;
}
.portrait__chip--a{ top: 16%; left: -8%; }
.portrait__chip--b{ bottom: 22%; right: -10%; animation-delay: -2.5s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 1px solid rgba(102,35,44,.3);
  border-radius: 14px;
  display:none;
}
@media (min-width: 1000px){
  .hero__scroll{ display:block; }
}
.hero__scroll span{
  position:absolute;
  left:50%;
  top: 8px;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--wine);
  border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform: translate(-50%, 0); opacity:1; }
  100%{ transform: translate(-50%, 18px); opacity:0; }
}

@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ order: -1; }
  .portrait{ max-width: 320px; }
  .hero__stats{ grid-template-columns: 1fr; gap:18px; }
  .hero__stats dt{ font-size:24px; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background: var(--wine);
  color: var(--cream);
  padding: 18px 0;
  overflow:hidden;
  border-top: 1px solid rgba(243,235,225,.1);
  border-bottom: 1px solid rgba(243,235,225,.1);
}
.marquee__track{
  display:flex;
  gap: 36px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .03em;
  animation: marqueeMove 32s linear infinite;
}
.marquee__track .dot{ opacity: .55; }
@keyframes marqueeMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =========================================================
   SECTIONS — general
   ========================================================= */
.section{
  padding: clamp(80px, 10vw, 140px) 0;
  position:relative;
}
.section__head{
  text-align:left;
  max-width: 760px;
  margin: 0 auto 56px;
}
.kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--wine);
  font-weight: 500;
  margin-bottom: 18px;
}
.kicker--light{ color: var(--rose); }
.section__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.section__title--center{ text-align:center; }
.section__title--light{ color: var(--cream); }
.lede{
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-2);
  margin: 0;
  max-width: 620px;
}
.lede--center{ margin-inline:auto; text-align:center; }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre{
  background: linear-gradient(180deg, var(--cream), #f7f0e6);
}
.sobre__grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items:center;
}
.sobre__visual{ position:relative; }

/* 4 fotos deitadas empilhadas ------------ */
.sobre__gallery{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.sobre__shot{
  position:relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow:hidden;
  background: var(--soft);
  box-shadow: var(--shadow-md);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.sobre__shot--3{ aspect-ratio: 4 / 3; }
.sobre__shot::after{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(243,235,225,.4);
  border-radius: inherit;
  pointer-events:none;
}
.sobre__shot:hover{
  transform: translateX(6px);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

/* Chips flutuantes sobre as fotos -------- */
.sobre__chip{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(251,247,242,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(102,35,44,.1);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--wine);
  box-shadow: var(--shadow-md);
  z-index: 3;
  animation: floatY 5s ease-in-out infinite;
}
.sobre__chip--a{ top: 12%; left: -22px; }
.sobre__chip--b{ top: 62%; right: -22px; animation-delay: -2.5s; }

.sobre__copy p{ color: var(--ink-2); }
/* Timeline animada ----------------------- */
.timeline{
  position:relative;
  list-style:none;
  margin: 44px 0 40px;
  padding: 0 0 0 36px;
}
.tl__line{
  position:absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: rgba(102,35,44,.14);
  overflow:hidden;
  border-radius: 2px;
}
.tl__line__fill{
  position:absolute;
  top:0; left:0; right:0;
  height: 0%;
  background: linear-gradient(180deg, var(--wine), var(--rose-2));
  transition: height 1.6s cubic-bezier(.2,.7,.2,1);
}
.timeline.in .tl__line__fill{ height: 100%; }

.tl__item{
  position:relative;
  padding: 0 0 28px 0;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.tl__item:last-of-type{ padding-bottom: 4px; }
.timeline.in .tl__item{
  opacity: 1;
  transform: translateX(0);
}
.timeline.in .tl__item:nth-child(1){ transition-delay: .35s; }
.timeline.in .tl__item:nth-child(2){ transition-delay: .75s; }
.timeline.in .tl__item:nth-child(3){ transition-delay: 1.15s; }
.timeline.in .tl__item:nth-child(4){ transition-delay: 1.55s; }

.tl__dot{
  position:absolute;
  left: -35px;
  top: 6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid rgba(102,35,44,.25);
  z-index: 2;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.tl__dot::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--wine);
  transform: scale(0);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.timeline.in .tl__item:nth-child(1) .tl__dot{ transition-delay: .55s; }
.timeline.in .tl__item:nth-child(2) .tl__dot{ transition-delay: .95s; }
.timeline.in .tl__item:nth-child(3) .tl__dot{ transition-delay: 1.35s; }
.timeline.in .tl__item:nth-child(4) .tl__dot{ transition-delay: 1.75s; }
.timeline.in .tl__item:nth-child(1) .tl__dot::after{ transition-delay: .55s; }
.timeline.in .tl__item:nth-child(2) .tl__dot::after{ transition-delay: .95s; }
.timeline.in .tl__item:nth-child(3) .tl__dot::after{ transition-delay: 1.35s; }
.timeline.in .tl__item:nth-child(4) .tl__dot::after{ transition-delay: 1.75s; }
.timeline.in .tl__item .tl__dot{
  border-color: var(--wine);
  box-shadow: 0 0 0 4px rgba(102,35,44,.08);
}
.timeline.in .tl__item .tl__dot::after{ transform: scale(1); }

.tl__item:hover .tl__dot{
  box-shadow: 0 0 0 6px rgba(102,35,44,.12);
}

.tl__body{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.tl__year{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--wine);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.tl__txt{
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  max-width: 480px;
}

@media (max-width: 900px){
  .sobre__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .sobre__chip--a{ left: 12px; top: 8%; }
  .sobre__chip--b{ right: 12px; top: auto; bottom: 8%; }
}

/* =========================================================
   ESPECIALIDADES
   ========================================================= */
.especialidades{
  background: var(--white);
}
.cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.card{
  position:relative;
  background: var(--cream);
  border: 1px solid rgba(102,35,44,.07);
  border-radius: var(--r-lg);
  padding: 36px 32px 32px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 100% 0%, rgba(207,173,171,.45), transparent 55%);
  opacity:0;
  transition: opacity .4s ease;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(102,35,44,.2);
}
.card:hover::before{ opacity:1; }
.card__icon{
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: rgba(102,35,44,.08);
  color: var(--wine);
  display:grid;
  place-items:center;
  margin-bottom: 22px;
  transition: background .3s ease, transform .3s ease;
}
.card__icon svg{ width: 28px; height: 28px; }
.card:hover .card__icon{ background: var(--wine); color: var(--cream); transform: rotate(-4deg); }
.card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.2;
}
.card p{
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.card__more{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wine);
  font-weight: 500;
  transition: gap .25s ease;
}
.card--feature{
  background: var(--wine);
  border-color: var(--wine);
}
.card--feature::before{
  background: radial-gradient(circle at 100% 0%, rgba(243,235,225,.18), transparent 55%);
  opacity:1;
}
.card--feature h3{ color: var(--cream); }
.card--feature p{ color: rgba(243,235,225,.75); }
.card--feature .card__icon{ background: rgba(243,235,225,.12); color: var(--cream); }
.card--feature:hover .card__icon{ background: var(--cream); color: var(--wine); }
.card--feature .card__more{ color: var(--rose); }

@media (max-width: 620px){
  .cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   DIFERENCIAIS
   ========================================================= */
.diferenciais{
  background: var(--wine);
  color: var(--cream);
  position:relative;
  overflow:hidden;
}
.diferenciais::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 10%, rgba(207,173,171,.18), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(207,173,171,.12), transparent 55%);
  pointer-events:none;
}
.dif__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(243,235,225,.12);
  border: 1px solid rgba(243,235,225,.12);
  border-radius: var(--r-lg);
  overflow:hidden;
  position:relative;
}
.dif{
  background: var(--wine);
  padding: 44px 36px;
  transition: background .3s ease;
}
.dif:hover{
  background: var(--wine-2);
}
.dif:last-child:nth-child(odd){
  grid-column: 1 / -1;
  text-align: center;
}
.dif__num{
  display:block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--rose);
  letter-spacing: .1em;
  margin-bottom: 28px;
}
.dif h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 14px;
  color: var(--cream);
  line-height: 1.2;
}
.dif p{
  color: rgba(243,235,225,.7);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 620px){
  .dif__grid{ grid-template-columns: 1fr; }
  .dif:last-child:nth-child(odd){ grid-column: 1; text-align: left; }
}

/* =========================================================
   LOCAIS DE ATENDIMENTO
   ========================================================= */
.locais-sec{
  background: var(--white);
}
.section__head--center{
  text-align: center;
  margin: 0 auto 56px;
}
.locais{
  display:grid;
  grid-template-columns: 320px 1fr;
  border: 1px solid rgba(102,35,44,.12);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.locais__tabs{
  display:flex;
  flex-direction:column;
  border-right: 1px solid rgba(102,35,44,.12);
  background: var(--cream);
}
.loc-tab{
  position: relative;
  text-align:left;
  padding: 28px 26px;
  border: 0;
  background: transparent;
  border-bottom: 1px solid rgba(102,35,44,.1);
  display:flex;
  flex-direction:column;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .35s ease, padding .35s ease;
  overflow: hidden;
}
.loc-tab:last-child{ border-bottom: 0; }
.loc-tab::before{
  content:"";
  position:absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rose);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.loc-tab:hover{ background: rgba(102,35,44,.04); padding-left: 30px; }
.loc-tab.is-active{ background: var(--wine); padding-left: 26px; }
.loc-tab.is-active::before{ transform: scaleY(1); }
.loc-tab.is-active .loc-tab__num{ color: var(--rose); }
.loc-tab.is-active .loc-tab__name{ color: var(--cream); }
.loc-tab.is-active .loc-tab__sub{ color: rgba(243,235,225,.7); }
.loc-tab__num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  color: var(--wine);
  letter-spacing: .04em;
  transition: color .3s ease;
}
.loc-tab__name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.005em;
  transition: color .3s ease;
}
.loc-tab__sub{
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .3s ease;
}

.locais__panel{ position: relative; }
.loc-view{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  height: 100%;
  min-height: 480px;
}
.loc-map{
  position: relative;
  background: var(--soft);
  overflow: hidden;
  border-right: 1px solid rgba(102,35,44,.1);
}
.loc-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.5) contrast(.95) brightness(.96) saturate(.9);
  transition: filter .6s ease, opacity .4s ease;
}
.loc-map.is-loading iframe{ opacity: .4; }
.loc-map__pin{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  pointer-events:none;
  filter: drop-shadow(0 4px 10px rgba(102,35,44,.4));
}
.loc-map__pulse{
  position:absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(102,35,44,.5);
  transform: translate(-50%, -50%);
  animation: locPulse 2.2s ease-out infinite;
}
@keyframes locPulse{
  0%{ box-shadow: 0 0 0 0 rgba(102,35,44,.55); opacity: 1; }
  100%{ box-shadow: 0 0 0 26px rgba(102,35,44,0); opacity: 0; }
}

.loc-info{
  padding: 34px 32px;
  background: var(--white);
  display:flex;
  flex-direction:column;
  gap: 18px;
  transition: opacity .35s ease, transform .35s ease;
}
.loc-info.is-switching{ opacity: 0; transform: translateY(6px); }
.loc-info__pill{
  display:inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  background: rgba(102,35,44,.08);
  border: 1px solid rgba(102,35,44,.18);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 500;
}
.loc-info__name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.loc-info__desc{
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.loc-info__dl{
  margin: 4px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(102,35,44,.12);
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.loc-info__dl > div{ display:flex; flex-direction:column; gap: 2px; }
.loc-info__dl dt{
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.loc-info__dl dd{
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.loc-info__cta{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 6px; }

@media (max-width: 1000px){
  .locais{ grid-template-columns: 1fr; }
  .locais__tabs{
    flex-direction: column;
    border-right: 0;
    border-bottom: 1px solid rgba(102,35,44,.12);
    overflow: visible;
  }
  .loc-tab{
    min-width: 0;
    width: 100%;
    border-bottom: 1px solid rgba(102,35,44,.1);
    border-right: 0;
  }
  .loc-tab::before{
    width: 3px;
    height: 100%;
    top: 0;
    bottom: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  .loc-tab.is-active::before{ transform: scaleY(1); }
  .loc-view{ grid-template-columns: 1fr; }
  .loc-map{ min-height: 320px; border-right: 0; border-bottom: 1px solid rgba(102,35,44,.1); }
}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depoimentos{
  background: linear-gradient(180deg, #f7f0e6, var(--cream));
}
.testis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi{
  background: var(--white);
  border: 1px solid rgba(102,35,44,.08);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  position:relative;
  transition: transform .35s ease, box-shadow .35s ease;
  display:flex;
  flex-direction:column;
}
.testi:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.testi__stars{
  display:flex;
  gap: 3px;
  color: var(--wine);
  margin-bottom: 22px;
}
.testi__stars svg{ width: 12px; height: 12px; }
.testi__quote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 28px;
  flex: 1;
}
.testi__who{
  display:flex;
  align-items:center;
  gap: 14px;
  border:0;
}
.testi__avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--wine);
  display:grid;
  place-items:center;
  font-family: var(--font-display);
  font-style:italic;
  font-weight: 500;
  font-size: 18px;
}
.testi__who strong{
  display:block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.testi__who span{
  font-size: 12px;
  color: var(--ink-2);
}

@media (max-width: 900px){
  .testis{ grid-template-columns: 1fr; }
}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background: var(--wine);
  color: var(--cream);
  position:relative;
  overflow:hidden;
}
.cta::before, .cta::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  opacity:.35;
  pointer-events:none;
}
.cta::before{
  width: 480px; height: 480px;
  background: var(--rose);
  top: -160px; right: -120px;
}
.cta::after{
  width: 360px; height: 360px;
  background: var(--rose-2);
  bottom: -120px; left: -80px;
  opacity:.25;
}
.cta__inner{
  display:grid;
  grid-template-columns: 1fr;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  gap: 0;
  align-items:center;
  justify-items:center;
  position:relative;
  z-index: 2;
}
.cta__copy{ width: 100%; }
.cta__lede{ margin-left:auto; margin-right:auto; }
.cta__actions{ justify-content:center; }
.cta__info{ justify-content:center; }
.cta__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 22px;
  color: var(--cream);
  letter-spacing: -.01em;
}
.cta__title .script{ color: var(--rose); }
.cta__lede{
  color: rgba(243,235,225,.75);
  margin: 0 0 36px;
  max-width: 540px;
  font-size: 16px;
}
.cta__actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-bottom: 36px; }
.cta__info{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  gap: 26px;
  flex-wrap:wrap;
  font-size: 13px;
  color: rgba(243,235,225,.75);
}
.cta__info li{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
/* Mapa no CTA --------------- */
.cta__map{
  background: rgba(243,235,225,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(243,235,225,.15);
  border-radius: var(--r-lg);
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.cta__map__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 4px 8px 0;
}
.cta__pill{
  display:inline-flex;
  padding: 6px 12px;
  background: rgba(243,235,225,.12);
  border: 1px solid rgba(243,235,225,.2);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
}
.cta__map__addr{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(243,235,225,.85);
  text-align: right;
}
.cta__map__frame{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow:hidden;
  border: 1px solid rgba(243,235,225,.12);
  background: #1d0e10;
}
.cta__map__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border: 0;
  filter: grayscale(.55) contrast(.95) brightness(.92) saturate(.85);
  transition: filter .5s ease;
}
.cta__map:hover .cta__map__frame iframe{
  filter: grayscale(.2) contrast(1) brightness(1) saturate(1);
}
.cta__map__pin{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  pointer-events:none;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.cta__map__pulse{
  position:absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(102,35,44,.45);
  transform: translate(-50%, -50%);
  animation: mapPulse 2.2s ease-out infinite;
}
@keyframes mapPulse{
  0%{ box-shadow: 0 0 0 0 rgba(102,35,44,.55); opacity: 1; }
  100%{ box-shadow: 0 0 0 24px rgba(102,35,44,0); opacity: 0; }
}
.cta__map__cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--wine);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: transform .25s ease, background .25s ease;
}
.cta__map__cta:hover{
  background: #fff;
  transform: translateY(-1px);
}

@media (max-width: 900px){
  .cta__inner{ grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: #1d0e10;
  color: rgba(243,235,225,.7);
  padding: 80px 0 0;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(243,235,225,.08);
}
.footer__brand p{
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.footer__crm{
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--rose);
  margin-top: 24px;
}
.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.footer__cols h4{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--cream);
  margin: 0 0 18px;
}
.footer__cols ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.footer__cols a{ transition: color .25s ease; }
.footer__cols a:hover{ color: var(--rose); }
.footer__social li a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.footer__base{
  display:flex;
  justify-content:space-between;
  padding: 28px 0;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(243,235,225,.4);
  flex-wrap:wrap;
  gap: 12px;
}
@media (max-width: 900px){
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   WhatsApp floating
   ========================================================= */
.wa-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #128c4f;
  color: #fff;
  display:grid;
  place-items:center;
  z-index: 80;
  box-shadow: 0 12px 28px -8px rgba(18,140,79,.6), 0 0 0 0 rgba(18,140,79,.5);
  animation: waPulse 2.2s ease-in-out infinite;
  transition: transform .25s ease;
}
.wa-float:hover{ transform: scale(1.08); }
@keyframes waPulse{
  0%{ box-shadow: 0 12px 28px -8px rgba(18,140,79,.6), 0 0 0 0 rgba(18,140,79,.45); }
  100%{ box-shadow: 0 12px 28px -8px rgba(18,140,79,.6), 0 0 0 22px rgba(18,140,79,0); }
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1{ transition-delay: .1s; }
.reveal--delay-2{ transition-delay: .2s; }
.reveal--delay-3{ transition-delay: .3s; }
.reveal--delay-4{ transition-delay: .4s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
