/* ==========================================================================
   Dra Adriana Delmondes — landing page
   Paleta e métricas extraídas do site original (Elementor kit 6 / post 8).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes auto-hospedadas (mesmos arquivos .woff2 servidos pelo site original,
   subconjunto latino) — sem dependência de CDN externo.
   -------------------------------------------------------------------------- */

@font-face { font-family: "Doppio One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/doppioone-400.woff2") format("woff2"); }

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-600-italic.woff2") format("woff2"); }

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url("../fonts/roboto-var.woff2") format("woff2"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/robotoslab-var.woff2") format("woff2"); }

:root {
  --gold: #937227;
  --salmon: #D7987B;
  --cream: #FDF9EE;
  --ink: #000000;
  --box: #EBEBEB;
  --box-line: #ddd;
  --bubble: #f9fafa;
  --divider: #CECDCD;
  --muted: #7A7A7A;

  --font-head: "Doppio One", sans-serif;
  --font-body: "Poppins", sans-serif;
  --font-cite: "Roboto", sans-serif;
  --font-cite-alt: "Roboto Slab", serif;

  --container: 1140px;
  --gap: 20px;              /* espaçamento padrão entre blocos */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.1px;
  overflow-x: hidden;
}

p, ul, ol, figure, blockquote { margin: 0; padding: 0; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Grid: reproduz o box model do original
   .s        -> seção (10px de padding vertical)
   .container-> coluna de topo, max 1140px, 10px lateral  (mobile: 343px)
   .inner    -> seção interna (10px vertical)
   .row      -> coluna interna, +10px lateral             (mobile: 323px)
   .w        -> widget, 20px de margem inferior
   -------------------------------------------------------------------------- */

.s { padding: 10px 0; position: relative; overflow-x: clip; }
.s--cream { background: var(--cream); }
.s--fade  { background: linear-gradient(119deg, var(--cream) 32%, rgba(242, 41, 91, 0) 63%); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 10px; }
.inner { padding: 0; }
.row { padding: 10px; }
.cols > .col { padding: 10px; }

.w { margin-bottom: var(--gap); }
.w:last-child { margin-bottom: 0; }

.sp { height: var(--d, 0px); }

.t-center { text-align: center; }

/* quebras condicionais: o original usa textos diferentes em desktop e mobile */
.br-m { display: none; }

/* colunas centradas usadas pelo original (largura % + offset à esquerda) */
.col-center-70 { width: 70.142%; margin-left: 14.761%; }
.col-center-74 { width: 73.892%; margin-left: 12.886%; }
.col-center-75 { width: 75.678%; margin-left: 11.994%; }

.cols { display: flex; }
.col { min-width: 0; }
.col--mid { display: flex; flex-direction: column; justify-content: center; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 400; }

/* o tema do original aplica text-wrap:pretty a h1..h6, p, blockquote e figcaption */
h1, h2, h3, p, blockquote, figcaption { text-wrap: pretty; }

.h-hero, .h-sec, .h-cta {
  font-family: var(--font-head);
  font-weight: 600;              /* Doppio One só tem 400 -> bold sintético, igual ao original */
  color: var(--gold);
  line-height: 1;
}

.h-hero { font-size: 82px; line-height: 81px; }
.h-sec  { font-size: 39px; }
.h-cta  { font-size: 64px; line-height: 67px; }

.lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 25px;
  color: var(--ink);
}

.body { font-size: 17px; font-weight: 300; line-height: 25px; color: var(--ink); }
.body p { margin: 0; }
.body p + p { margin-top: 25px; }
.body strong { font-weight: 400; }   /* <b> do original: `bolder` sobre peso 300 resolve para 400 */

.body-em {
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  line-height: 25px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Botão
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  padding: 15px;
  border-radius: 20px;
  transition: background-color .3s, transform .3s;
}
.btn:hover { background: #7c601f; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Imagens
   -------------------------------------------------------------------------- */

.img-logo { width: 34%; margin: 0 auto; }
.img-stars { width: 15%; margin: 0 auto; }
.img-logo-footer { width: 75%; }

.media-shift { margin: 0 21px 0 -21px; text-align: right; }
.img-photo {
  width: 77%;
  margin-left: auto;
  border-radius: 90px 0 90px 0;
}

/* --------------------------------------------------------------------------
   Seção 2 — sobre (2 colunas 50/50 no desktop)
   -------------------------------------------------------------------------- */

.cols--about > .col { width: 50%; }

/* --------------------------------------------------------------------------
   Seção 3 — benefícios (56,161% / 43,796%)
   -------------------------------------------------------------------------- */

.cols--benefits > .col--text  { width: 56.161%; }
.cols--benefits > .col--empty { width: 43.796%; }

/* --------------------------------------------------------------------------
   Lista com ícones
   -------------------------------------------------------------------------- */

.icon-list { list-style: none; }
.icon-list li { display: flex; align-items: center; position: relative; margin: 0; }

.il-icon { display: flex; flex: 0 0 auto; }
.il-icon svg {
  width: var(--icon-size, 14px);
  height: var(--icon-size, 14px);
  margin-right: calc(var(--icon-size, 14px) * .25);
  fill: var(--gold);
}
.il-text { align-self: center; padding-left: 5px; }
.il-text a { text-decoration: none; }
.il-text a:hover { text-decoration: underline; }

.icon-list--boxed {
  background: var(--box);
  padding: 20px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}
.icon-list--boxed li:not(:last-child) { padding-bottom: 8px; }
.icon-list--boxed li:not(:first-child) { margin-top: 8px; }
.icon-list--boxed li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-top: 1px solid var(--box-line);
}

.icon-list--contact {
  --icon-size: 27px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}
.icon-list--addr { font-size: 14px; line-height: 17px; }

/* --------------------------------------------------------------------------
   Carrossel de depoimentos
   -------------------------------------------------------------------------- */

.carousel { position: relative; --slides: 1; --slide-gap: 10px; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  gap: var(--slide-gap);
  transition: transform .5s linear;
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
  min-width: 0;
}
.carousel--testimonials { padding-bottom: 40px; }
.carousel--testimonials .carousel__viewport { width: 95%; margin: 0 auto; }
.carousel--testimonials .carousel__slide { padding: 20px; }
.carousel--gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, #fff, transparent, #fff);
}

.tm { margin: 0; text-align: center; }
.tm__content {
  background: var(--bubble);
  padding: 20px;
  position: relative;
}
.tm__content::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--bubble);
  transform: translateX(-50%) scaleX(.75) rotate(45deg);
}
.tm__text {
  font-family: var(--font-body);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}
.tm__footer { display: flex; align-items: center; justify-content: center; margin-top: 25px; }
.tm__cite { display: flex; flex-direction: column; font-size: 14px; font-style: normal; line-height: 1.5; }
.tm__name { font-family: var(--font-cite); font-weight: 700; color: var(--muted); }
.tm__title { font-family: var(--font-cite-alt); font-weight: 400; color: var(--gold); }

.carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.carousel__dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: .2;
  cursor: pointer;
  transition: opacity .2s;
}
.carousel__dots button[aria-selected="true"] { opacity: 1; }
.carousel__dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--box-line); }
.ac__item { border-bottom: 1px solid var(--box-line); }
.ac__heading { margin: 0; font-size: inherit; font-weight: inherit; }
.ac__title {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 12px 15px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: color .3s;
}
.ac__title:hover { color: var(--gold); }
.ac__title[aria-expanded="true"] { color: var(--gold); }
.ac__icon { display: flex; flex: 0 0 auto; }
.ac__icon svg { width: .8em; height: .8em; fill: currentColor; }
.ac__title[aria-expanded="true"] .ac__plus,
.ac__title[aria-expanded="false"] .ac__minus { display: none; }
.ac__label { flex: 1; }

.ac__panel {
  overflow: hidden;
  height: 0;
  transition: height .3s ease;
}
.ac__body { padding: 0 15px 15px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ink); }
.ac__body p { margin: 0; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */


.cols--footer > .col--f-logo { width: 33.333%; }
.cols--footer > .col--f-mail { width: 34.94%; }
.cols--footer > .col--f-addr { width: 31.364%; }

.map { border-radius: 20px; overflow: hidden; line-height: 0; }
.map iframe { width: 100%; height: 235px; border: 0; display: block; }

.f-end { }

.f-social { display: flex; gap: 5px; }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  transition: background-color .3s;
}
.social svg { width: 18px; height: 18px; fill: #fff; }
.social:hover { background: #7c601f; }
.social:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.f-divider { margin: 13px 0 -2px; padding: 2px 0; }
.f-divider span { display: block; border-top: 1px solid var(--divider); }

.copyright { font-size: 13px; font-weight: 300; line-height: 1; color: var(--ink); }

@media (min-width: 768px) {
  .f-end {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "divider divider" "copy social";
    align-items: center;
  }
  .f-divider { grid-area: divider; }
  .f-copy    { grid-area: copy; padding: 10px; }
  .f-social  { grid-area: social; justify-content: flex-end; padding: 10px; }
}

/* --------------------------------------------------------------------------
   Animações de entrada (equivalentes aos fadeIn* do Elementor)
   -------------------------------------------------------------------------- */

.reveal-up, .reveal-left, .reveal-right, .reveal-in {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.is-visible { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-in { opacity: 1; transform: none; transition: none; }
  .carousel__track { transition: none; }
}

/* ==========================================================================
   MOBILE  (≤767px) — valores do original, idênticos ao print
   ========================================================================== */

@media (max-width: 767px) {
  .sp { height: var(--m, var(--d, 0px)); }
  .sp--desktop-only, .br-d { display: none; }
  .br-m { display: inline; }
  /* com o espaçador de desktop oculto, a galeria passa a ser o último bloco */
  .carousel--gallery.w { margin-bottom: 0; }

  .col-center-70,
  .col-center-74,
  .col-center-75 { width: 100%; margin-left: 0; }

  .cols { flex-direction: column; }
  .cols--about > .col,
  .cols--benefits > .col--text,
  .cols--footer > .col { width: 100%; }
  .cols--benefits > .col--empty { display: none; }
  .col--mid { display: block; }

  .h-hero { font-size: 32px; line-height: 1.1em; }
  .h-sec  { font-size: 35px; }
  .h-sec--sm { font-size: 30px; }
  .h-cta  { font-size: 35px; line-height: 1.2em; }

  .lead--cta { font-size: 15px; font-weight: 400; }

  .img-logo { width: 47%; }
  .img-stars { width: 35%; }

  .icon-list--contact { font-size: 13px; }
  .icon-list--addr { font-size: 14px; }   /* o original reduz para 13px só o e-mail */

  /* elementor-mobile-align-justify: o CTA de "Benefícios" ocupa a largura toda */
  .cols--benefits .btn { display: block; width: 100%; text-align: center; }

  .ac__title { font-size: 14px; }
  .ac__body { font-size: 15px; }

  .carousel--gallery { --slides: 1; }

  /* rodapé: logo centrado, sociais acima do divisor, copyright centrado */
  .cols--footer > .col--f-logo { text-align: center; }
  .img-logo-footer { margin: 0 auto; }
  .f-end { display: flex; flex-direction: column; }  /* impede colapso de margens */
  .f-social { justify-content: center; margin: 20px 0; }
  .f-copy { text-align: center; padding: 10px; }
  .copyright { font-size: 13px; }
}