/* ============================================================
  Laura Miranda M Ramalho - site stylesheet
  1 tokens
  2 base 
  3 typography 
  4 layout 
  5 buttons
  6 header 
  7 hero 
  8 services grid 
  9 about 
  10 quote band
  11 doubts cta 
  12 page intro 
  13 service detail 
  14 courses
  15 testimonials 
  16 textos 
  17 contato
  18 footer 
  19 image slots
============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* os que eu pensei */
  --bg1: #f5f3f0; /* page background (cream)            */
  --bg-dark1: #36413e; /* dark sections, primary hover       */
  --surface1: #fdfcfb; /* card surface                       */
  --primary1: #4c372b; /* headings, primary buttons, border */
  --primary-hover1: #36413e; /* hover for primary buttons / links  */
  --primary-soft1: #ece9e4; /* hover bg for outline buttons        */
  --text1: #5d5e60; /* body text                           */
  --muted1: #8d8d92; /* eyebrows, dates, captions           */
  --border1: #d7d6d6; /* dividers, card borders             */

  /* extraí do instagram */
  --bg2: #f5f3f0;        /* white — page background, light text on dark */
  --bg-dark2: #542404;   /* dark brown — quote band, testimonials, footer    */
  --surface2: #eee0d2;   /* warm beige — card surfaces                       */
  --primary2: #542404;   /* dark brown — headings, primary buttons, borders  */
  --primary-hover2: #5f453a; /* medium brown — hover states                  */
  --primary-soft2: #c6b29f;  /* warm beige — outline-button hover bg          */
  --text2: #5f453a;      /* medium brown — body text                         */
  --muted2: #9c7c74;     /* muted rose — eyebrows, captions, borders         */
  --border2: #9c7c74;    /* muted rose — dividers, card borders              */

  /* variação */
  --primary3: #592D26;

  /* oficial */
  --bg: #f5f3f0; 
  --bg-dark: #5f453a; 
  --surface: #fdfcfb; 
  --primary: #542404;
  --primary-hover: #36413e;
  --primary-soft: #ece9e4;   
  --text: #5d5e60;
  --muted: #a3a3aa;
  --border: #d7d6d6;

  /* footer text on dark background */
  --footer-text: #f5f3f0;
  --footer-muted: rgba(245, 243, 240, 0.78); 

  --font-head: "Nunito", sans-serif;
  --font-body: "Mulish", sans-serif;

  --container-wide: 1200px;
  --container-md: 1040px;
  --container-narrow: 820px;
  --container-quote: 760px;
}

/* ---------- 2. Reset & base ---------- */
html {
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--primary);
  color: var(--bg);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 3. Typography helpers ---------- */
.eyebrow {
  margin: 0 0 26px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--center {
  text-align: center;
}

.body-text {
  margin: 0 0 14px;
  font: 400 15px/1.75 var(--font-body);
  color: var(--text);
}
.body-text:last-child {
  margin-bottom: 22px;
} /* mirrors spacing before a button */

.link-underline {
  font: 700 11.5px var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 3px;
  transition: color 0.15s;
}
.link-underline:hover {
  color: var(--primary-hover);
}

.link-mail {
  font: 400 14px var(--font-body);
  color: var(--primary);
  text-decoration: none;
  /* border-bottom: 1px solid var(--border); */
  transition: border-color 0.15s;
}
.link-mail:hover {
  border-bottom: 1px solid var(--primary);
}

/* ---------- 4. Layout: rules ---------- */
.rule {
  width: 56px;
  height: 1px;
  background: var(--primary);
  opacity: 0.35;
  margin: 36px auto;
}
.rule--light {
  width: 40px;
  background: var(--muted);
  opacity: 1;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 999px;
  padding: 16px 30px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.btn--primary {
  background: var(--primary);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--primary-hover);
}
.btn--outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 15px 30px;
}
.btn--outline:hover {
  background: var(--primary-soft);
}
/* size variants */
.btn--xs {
  font-size: 11px;
  padding: 10px 18px;
}
.btn--sm {
  font-size: 11.5px;
  padding: 13px 24px;
}
.btn--md {
  padding: 15px 28px;
}

/* ---------- 6. Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--surface);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
}
.brand__name {
  font: 500 19px var(--font-head);
  color: var(--primary);
  letter-spacing: 0.02em;
}
.brand__role {
  font: 400 10px var(--font-body);
  color: var(--text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* Hamburger toggle - hidden on desktop, shown in the mobile media query. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle--open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle--open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle--open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav__link {
  cursor: pointer;
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding: 4px 1px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.nav__link:hover { color: var(--primary); }
.nav__link.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ---------- 7. Hero (Início) ---------- */
.hero {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 104px 24px 88px;
  text-align: center;
  animation: fadeUp 0.6s ease both;
}
.hero__title {
  margin: 0;
  font: 300 clamp(38px, 5.8vw, 68px)/1.04 var(--font-head);
  color: var(--primary);
  letter-spacing: 0.01em;
}
.hero__subtitle {
  margin: 22px 0 0;
  font: 400 14px var(--font-body);
  letter-spacing: 0.1em;
  color: var(--text);
  font-weight: 600;
}
.hero__quote {
  max-width: 560px;
  margin: 0 auto;
  font: 400 italic 22px/1.55 var(--font-head);
  color: var(--text);
}
.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 44px;
}

/* ---------- 8. Services grid (Início cards) ---------- */
.services-grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px 96px;
}
.services-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}
.service-card {
  cursor: pointer;
  padding: 34px 26px 40px 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.service-card:hover {
  border-top: 2px solid var(--primary);
}
.service-card__num {
  margin: 0 0 18px;
  font: 400 13px var(--font-body);
  color: var(--muted);
}
.service-card__title {
  margin: 0 0 10px;
  font: 500 26px var(--font-head);
  color: var(--primary);
}
.service-card__desc {
  margin: 0 0 18px;
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--text);
}
.service-card__link {
  font: 700 11px var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- 9. About (Início) ---------- */
.about {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 24px 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
  align-items: center;
}
.about__photo {
  display: flex;
  justify-content: center;
}
.about__title {
  margin: 0 0 22px;
  font: 400 40px/1.15 var(--font-head);
  color: var(--primary);
}

/* ---------- 10. Quote band ---------- */
.quote-band {
  background: var(--bg-dark);
}
.quote-band__inner {
  max-width: var(--container-quote);
  margin: 0 auto;
  padding: 96px 24px;
  text-align: center;
}
.quote-band__text {
  margin: 0;
  font: 300 italic clamp(26px, 3.4vw, 38px)/1.45 var(--font-head);
  color: var(--bg);
}
.quote-band__caption {
  margin: 0;
  font: 400 12px var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 11. Doubts CTA ---------- */
.doubts-cta {
  max-width: var(--container-quote);
  margin: 0 auto;
  padding: 96px 24px 110px;
  text-align: center;
}
.doubts-cta__title {
  margin: 0 0 16px;
  font: 400 38px var(--font-head);
  color: var(--primary);
}
.doubts-cta__desc {
  margin: 0 0 34px;
  font: 400 15px/1.7 var(--font-body);
  color: var(--text);
}

/* ---------- 12. Page intro (Serviços / Textos / Contato) ---------- */
.page-intro {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 88px 24px 64px;
  text-align: center;
  animation: fadeUp 0.5s ease both;
}
.page-intro__title {
  margin: 0 0 18px;
  font: 300 clamp(38px, 5vw, 58px)/1.1 var(--font-head);
  color: var(--primary);
}
.page-intro__desc {
  margin: 0;
  font: 400 15px/1.7 var(--font-body);
  color: var(--text);
}
.page-intro--contato {
  padding: 88px 24px 56px;
}
.page-intro--textos {
  padding: 88px 24px 48px;
}

/* ---------- 13. Service detail (each Serviços section) ---------- */
.service-detail {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 24px 84px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: start;
  border-top: 1px solid var(--border);
  scroll-margin-top: 88px; /* offsets the sticky header on anchor jumps */
}
.courses {
  scroll-margin-top: 88px;
}
.service-detail__text {
  padding-top: 56px;
}
.service-detail__photo {
  padding-top: 56px;
  display: flex;
  justify-content: center;
}
.service-detail__title {
  margin: 0 0 20px;
  font: 400 36px var(--font-head);
  color: var(--primary);
}
.service-detail__title--tight {
  font: 400 36px/1.2 var(--font-head);
}
.service-num {
  margin: 0 0 12px;
  font: 400 13px var(--font-body);
  color: var(--muted);
  font-weight: bold;
}

/* ---------- 14. Courses ---------- */
.courses {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 24px 40px;
  border-top: 1px solid var(--border);
}
.courses__inner {
  padding-top: 56px;
  max-width: 680px;
}
.courses__title {
  margin: 0 0 20px;
  font: 400 36px var(--font-head);
  color: var(--primary);
}
.courses__label {
  margin: 0 0 10px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.courses__label--gap {
  margin-bottom: 12px;
}
.courses__name {
  margin: 0 0 12px;
  font: 500 24px var(--font-head);
  color: var(--primary);
}
.courses__list {
  max-width: 680px;
  border-top: 1px solid var(--border);
}
.course {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.course__summary {
  cursor: pointer;
  font: 500 20px var(--font-head);
  color: var(--primary);
  padding: 14px 0;
  list-style-position: inside;
}
.course__body {
  margin: 0 0 18px;
  font: 400 14.5px/1.7 var(--font-body);
  color: var(--text);
}
.courses__cta {
  max-width: 680px;
  margin-top: 30px;
  padding-bottom: 40px;
}

/* ---------- 15. Testimonials ---------- */
.depoimentos {
  background: var(--bg-dark);
}
.depoimentos__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 88px 24px;
}
.depoimentos__heading {
  margin: 0 0 44px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
}
.testimonial {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.testimonial__quote {
  margin: 0;
  font: 300 italic 19px/1.6 var(--font-head);
  color: var(--bg);
}
.testimonial__author {
  font: 600 11px var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 16. Textos (filters & posts grid) ---------- */
.textos-filters {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.filter-chip {
  cursor: pointer;
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 9px 18px;
  border-radius: 999px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.filter-chip:hover { border: 1px solid var(--primary); }
.filter-chip.is-active {
  color: var(--bg);
  background: var(--primary);
  border: 1px solid var(--primary);
}
.post-card.is-dimmed { display: none; }

.textos-grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 32px 24px 110px;
}
.textos-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.post-card:hover {
  border: 1px solid var(--muted);
}
.post-card__bar {
  height: 6px;
  background: var(--primary);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 26px;
  flex: 1;
}
.post-card__cat {
  font: 600 10.5px var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.post-card__title {
  margin: 0;
  font: 500 24px/1.25 var(--font-head);
  color: var(--primary);
}
.post-card__excerpt {
  margin: 0;
  font: 400 14px/1.65 var(--font-body);
  color: var(--text);
  flex: 1;
}
.post-card__meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.post-card__meta span {
  font: 400 12px var(--font-body);
  color: var(--text);
}
.textos-empty {
  margin: 0;
  text-align: center;
  font: 400 italic 22px var(--font-head);
  color: var(--muted);
  padding: 48px 0;
}

/* ---------- 17. Contato ---------- */
.contato-cards {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 24px 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.contato-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 36px 32px;
}
.contato-card__title {
  margin: 0;
  font: 500 26px var(--font-head);
  color: var(--primary);
}
.contato-card__desc {
  margin: 0;
  font: 400 14px/1.65 var(--font-body);
  color: var(--text);
  flex: 1;
}

.contato-info {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 24px 110px;
  text-align: center;
}
.contato-info__row {
  display: flex;
  gap: 12px 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.contato-info__row span {
  font: 400 14px var(--font-body);
  color: var(--text);
}
.contato-info__socials {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 26px;
}
.contato-info__socials a {
  font: 700 11px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.contato-info__socials a:hover {
  color: var(--primary);
}

/* ---------- 18. Footer ---------- */
.footer {
  background: var(--bg-dark);
}
.footer__cols {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 64px 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 44px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col--brand {
  gap: 10px;
}
.footer__name {
  font: 400 22px var(--font-head);
  color: var(--bg);
}
.footer__role {
  font: 400 12px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-muted);
}
.footer__contact {
  font: 400 13.5px/1.7 var(--font-body);
  color: var(--footer-muted);
  margin-top: 8px;
}
.footer__heading {
  font: 600 11px var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--footer-text);
}
.footer__link {
  cursor: pointer;
  font: 400 14px var(--font-body);
  color: var(--footer-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer__link:hover {
  color: var(--footer-text);
}
/* Newsletter form (rodapé) — sobre fundo escuro */
.footer__ns-lead {
  font: 400 13.5px/1.7 var(--font-body);
  color: var(--footer-muted);
  margin: 0;
  max-width: 36ch;
}
.footer__ns-lead em {
  font-style: italic;
}
.footer__ns-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.footer__ns-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer__ns-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245, 243, 240, 0.28);
  background: rgba(245, 243, 240, 0.06);
  color: var(--footer-text);
  font: 400 14px var(--font-body);
  transition: border-color 0.15s, background 0.15s;
}
.footer__ns-input::placeholder {
  color: rgba(245, 243, 240, 0.5);
}
.footer__ns-input:focus {
  outline: none;
  border-color: var(--footer-text);
  background: rgba(245, 243, 240, 0.12);
}
.btn--ns {
  font-size: 11px;
  padding: 13px 24px;
  flex: 0 0 auto;
  border: 0;
}
.btn--on-dark {
  background: var(--footer-text);
  color: var(--bg-dark);
}
.btn--on-dark:hover {
  background: var(--footer-muted);
}
.btn--on-dark:disabled {
  opacity: 0.6;
  cursor: default;
}
.footer__ns-msg {
  font: 400 13px/1.6 var(--font-body);
  color: var(--footer-muted);
  margin: 0;
}
.footer__ns-msg--ok {
  color: #bfe3c0;
}
.footer__ns-msg--err {
  color: #f0c3bd;
}

.footer__bottom {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 44px 24px 28px;
}
.footer__bottom-inner {
  border-top: 1px solid rgba(215, 214, 214, 0.18);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__copy {
  font: 400 12px var(--font-body);
  color: var(--footer-muted);
}
.footer__socials {
  display: flex;
  gap: 22px;
}
.footer__socials a {
  font: 600 11px var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.15s;
}
.footer__socials a:hover {
  color: var(--footer-muted);
}

/* ---------- 19. Image slots ---------- */
.slot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 round 300px 300px 300px 300px);
  background: var(--border);
}
#foto-laura       { width: 340px; height: 430px; }
#foto-consultorio { width: 320px; height: 380px; }
#foto-supervisao  { width: 320px; height: 380px; }
#logo-lacunas     { width: 320px; height: 380px; }

/* ---------- 20. Article pages (Textos) ---------- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.article__header {
  margin-bottom: 40px;
}
.article__eyebrow {
  margin: 0 0 18px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.article__eyebrow a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.article__eyebrow a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.article__title {
  margin: 0 0 16px;
  font: 400 clamp(28px, 4.5vw, 42px)/1.15 var(--font-head);
  color: var(--primary);
  letter-spacing: 0.01em;
}
.article__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font: 400 13px var(--font-body);
  color: var(--text);
}
.article__meta span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--border);
}
.article__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.article__body .body-text {
  margin: 0;
}
.article__quote {
  margin: 4px 0;
  padding: 22px 26px;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  font: 400 italic 16px/1.7 var(--font-head);
  color: var(--text);
  border-radius: 0 4px 4px 0;
}
.article__img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 4px;
  align-self: center;
}
.article__cta {
  margin-top: 8px;
}
.article__references {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.article__references-title {
  margin: 0 0 14px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.article__references p {
  margin: 0 0 8px;
  font: 400 13px/1.7 var(--font-body);
  color: var(--text);
}
.article__footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* ---------- 21. Mobile responsive ---------- */
/* Breakpoint ~800px: tablet and below. Header collapses into a hamburger
   dropdown; large vertical paddings and grid gaps shrink; card paddings
   tighten. Above 800px everything stays as authored. */
@media (max-width: 800px) {
  /* Header → hamburger menu */
  .site-header__inner {
    height: 60px;
    padding: 0 18px;
    flex-wrap: nowrap;
  }
  .brand__name { font-size: 16px; }
  .brand__role { font-size: 9px; letter-spacing: 0.18em; }

  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 18px 18px;
    box-shadow: 0 10px 24px rgba(76, 55, 43, 0.08);
    /* Hidden by default - revealed when .nav--open */
    display: none;
  }
  .nav--open { display: flex; }
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav__link:last-of-type { border-bottom: 0; }
  .nav .btn--xs {
    align-self: flex-start;
    margin-top: 12px;
    padding: 12px 20px;
  }

  /* Hero */
  .hero { padding: 64px 18px 56px; }
  .hero__actions { gap: 10px; margin-top: 32px; }
  .hero__actions .btn { flex: 1; min-width: 0; }

  /* Services grid */
  .services-grid { padding: 0 18px 56px; }
  .service-card { padding: 26px 0 28px; }

  /* About */
  .about { padding: 0 18px 64px; gap: 36px; }
  .about__title { font-size: 30px; }

  /* Quote band */
  .quote-band__inner { padding: 64px 18px; }

  /* Doubts CTA */
  .doubts-cta { padding: 64px 18px 72px; }

  /* Page intros */
  .page-intro { padding: 56px 18px 40px; }
  .page-intro--contato { padding: 56px 18px 36px; }
  .page-intro--textos { padding: 56px 18px 32px; }

  /* Service detail */
  .service-detail { padding: 0 18px 56px; gap: 36px; }
  .service-detail__text,
  .service-detail__photo { padding-top: 40px; }
  .service-detail__title,
  .service-detail__title--tight { font-size: 28px; }

  /* Courses */
  .courses { padding: 0 18px 32px; }
  .courses__inner { padding-top: 40px; }
  .courses__title { font-size: 28px; }
  .courses__name { font-size: 21px; }

  /* Testimonials */
  .depoimentos__inner { padding: 56px 18px; }
  .depoimentos__heading { margin-bottom: 28px; }
  .depoimentos__grid { gap: 28px; }

  /* Textos */
  .textos-filters { padding: 0 18px 18px; gap: 8px; }
  .filter-chip { padding: 8px 14px; font-size: 11px; }
  .textos-grid { padding: 24px 18px 72px; }
  .textos-grid__list { gap: 20px; }
  .post-card__body { padding: 20px 20px 20px; gap: 12px; }
  .post-card__title { font-size: 21px; }
  .doubts-cta__title { font-size: 30px; }

  /* Contato */
  .contato-cards { padding: 0 18px 48px; gap: 16px; }
  .contato-card { padding: 24px 22px; }
  .contato-card__title { font-size: 22px; }
  .contato-info { padding: 0 18px 72px; }
  .contato-info__row { flex-direction: column; gap: 10px; }

  /* Footer */
  .footer__cols { padding: 44px 18px 0; gap: 32px; }
  .footer__bottom { padding: 32px 18px 24px; }
  .footer__bottom-inner { justify-content: center; text-align: center; }

  /* Image slots - shrink to fit narrow screens without horizontal scroll */
  #foto-laura       { width: 100%; max-width: 340px; height: auto; aspect-ratio: 340 / 430; }
  #foto-consultorio { width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 380; }
  #foto-supervisao  { width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 380; }
  #logo-lacunas     { width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 380; }

  /* Body text slightly tighter */
  .body-text { font-size: 14.5px; line-height: 1.7; }
}

/* Extra-tight adjustments for very small phones (≤380px) so the hero and
   buttons never feel cramped. */
@media (max-width: 380px) {
  .hero { padding: 48px 16px 48px; }
  .hero__actions .btn { font-size: 10.5px; padding: 13px 18px; }
  .brand__name { font-size: 15px; }
  .filter-chip { padding: 7px 12px; font-size: 10.5px; }
}

/* ---------- 21. Print ---------- */
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  *,
  *::before,
  *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    transition-duration: 0s !important;
  }
}