/* ============================================================================
   MOBILE IMPROVEMENTS — Clínica Longevidade e Saúde
   Loaded after site.css + pages.css. All rules wrapped in media queries.
   Focuses on: touch targets, hero, header, paddings, typography, cards.
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   Safety: avoid horizontal scroll on iOS Safari from rogue full-bleed bits
   ────────────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; }

/* ──────────────────────────────────────────────────────────────────────────
   Menu drawer — fundo vinho (cor da clínica)
   ────────────────────────────────────────────────────────────────────────── */
.menu-drawer__panel {
  background: var(--vinho-profundo, #503B3B);
}
/* Logo clara para o fundo escuro */
.menu-drawer__head img {
  filter: brightness(0) invert(1);
  opacity: .88;
}
/* Itens de navegação no fundo escuro */
.menu-drawer__nav button {
  color: rgba(255,251,244,.82);
  border-bottom-color: rgba(255,251,244,.12);
}
.menu-drawer__nav button:hover,
.menu-drawer__nav button:active { color: var(--rosa-tempo); }
/* Botão "← Fechar" no fundo escuro */
.menu-drawer__close {
  color: rgba(255,251,244,.9);
  border-color: rgba(255,251,244,.22);
  background: rgba(255,251,244,.07);
}
.menu-drawer__close:hover,
.menu-drawer__close:active {
  background: var(--rosa-tempo);
  border-color: var(--rosa-tempo);
  color: #fff;
}
/* Botões de ação no rodapé do drawer */
.menu-drawer__foot .btn--outline {
  color: var(--marfim-sereno);
  border-color: rgba(255,251,244,.3);
}
.menu-drawer__foot .btn--outline:hover {
  background: rgba(255,251,244,.1);
  border-color: rgba(255,251,244,.5);
  color: var(--marfim-sereno);
}

/* ──────────────────────────────────────────────────────────────────────────
   iOS / Mobile — responsividade e safe areas
   ────────────────────────────────────────────────────────────────────────── */
/* Scroll suave (momentum) nos drawers no iOS Safari */
.sv-drawer__panel,
.art-drawer__panel,
.menu-drawer__panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Impede que drawers causem overflow horizontal */
.sv-drawer__panel,
.art-drawer__panel { max-width: 100vw; }

/* iOS safe area — botão WhatsApp não desaparece atrás do home indicator */
@supports (bottom: env(safe-area-inset-bottom)) {
  .wa-float {
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
  }
  /* Rodapé do drawer de tratamento acima do home indicator */
  .sv-drawer__foot {
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
  }
  /* Menu drawer não fica atrás da área segura inferior */
  .menu-drawer__panel {
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Footer — swipe hint (oculto em desktop, visível em mobile)
   ────────────────────────────────────────────────────────────────────────── */
.ftr__swipe-hint { display: none; }
.ftr__swipe-wrap { position: relative; }

@keyframes hint-slide {
  0%, 100% { opacity: .38; transform: translateX(0); }
  50%       { opacity: .75; transform: translateX(5px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Diferenciais — blocos com fundo escuro para o texto ressaltar
   ────────────────────────────────────────────────────────────────────────── */
.diff {
  background: rgba(30, 12, 12, 0.52);
  border: 1px solid rgba(255, 251, 244, 0.14);
}

/* ──────────────────────────────────────────────────────────────────────────
   Botão "← Fechar" no menu drawer (todas as telas)
   ────────────────────────────────────────────────────────────────────────── */
.menu-drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 12px;
  background: transparent;
  border: 1.5px solid var(--border, #e8e0d8);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--vinho-profundo, #3a2020);
  line-height: 1;
  transition: background .18s, color .18s, border-color .18s;
}
.menu-drawer__close:hover {
  background: var(--rosa-tempo, #b97f80);
  color: #fff;
  border-color: var(--rosa-tempo, #b97f80);
}
.menu-drawer__close .icon {
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Breadcrumb "← Início" back button (inner pages)
   ────────────────────────────────────────────────────────────────────────── */
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(255,251,244,.85);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  transition: color .18s;
}
.crumb-back:hover { color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   MENU button — pill destacado com cor primária (todas as telas mobile)
   ────────────────────────────────────────────────────────────────────────── */
.hdr__menu {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--rosa-tempo, #b97f80);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  height: auto;
  width: auto;
  min-width: 0;
  box-shadow: 0 2px 10px rgba(185, 127, 128, .35);
  transition: background .18s, box-shadow .18s;
  /* Fixo no canto superior direito */
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 55;
}
/* iOS — respeita notch e dynamic island */
@supports (top: env(safe-area-inset-top)) {
  .hdr__menu {
    top: max(14px, calc(env(safe-area-inset-top) + 8px));
    right: max(14px, calc(env(safe-area-inset-right) + 14px));
  }
}
.hdr__menu:hover,
.hdr__menu:active {
  background: var(--vinho-profundo, #3a2020);
  box-shadow: 0 2px 12px rgba(58, 32, 32, .25);
}
.hdr__menu .icon { color: #fff; flex-shrink: 0; }
.hdr__menu-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────────
   Botão "← Voltar" nos drawers de tratamento e artigo (todas as telas)
   ────────────────────────────────────────────────────────────────────────── */
.sv-drawer__back,
.art-drawer__back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px 9px 12px;
  background: #fff;
  border: 1.5px solid var(--border, #e8e0d8);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--vinho-profundo, #3a2020);
  transition: background .18s, color .18s, border-color .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sv-drawer__back:hover,
.art-drawer__back:hover {
  background: var(--rosa-tempo, #b97f80);
  color: #fff;
  border-color: var(--rosa-tempo, #b97f80);
}
/* art-drawer é fixed porque o painel é fixed */
.art-drawer__back { position: fixed; top: 24px; left: max(20px, calc(50vw - 410px + 20px)); }

/* ============================================================================
   TABLET / LARGE PHONE  ≤ 880px
   ============================================================================ */
@media (max-width: 880px) {
  /* Section paddings — tighter rhythm */
  .section { padding: 72px 22px; }
  .section__head { margin-bottom: 40px; }
  .section__head h2 { font-size: clamp(28px, 6.4vw, 40px); }
  .section__head p { font-size: 16px; }

  /* Hero — keep the explicit <br/> line breaks so "A" starts line 2 */

  /* Reduce vertical eyebrow gap */
  .eyebrow { font-size: 11px; }
}

/* ============================================================================
   PHONE  ≤ 640px — the heavy lifting
   ============================================================================ */
@media (max-width: 640px) {

  /* ── Announcement bar ─────────────────────────────────────────────────── */
  .bar__inner {
    padding: 9px 16px;
    font-size: 10.5px;
    gap: 12px;
  }
  .bar__pill { padding: 3px 10px; }

  /* ── Header ───────────────────────────────────────────────────────────── */
  .hdr__inner,
  .hdr--expanded .hdr__inner,
  .hdr--compact .hdr__inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .hdr--expanded .hdr__inner { padding: 16px 16px; }
  .hdr__logo img,
  .hdr--compact .hdr__logo img,
  .hdr--expanded .hdr__logo img { height: 50px; }
  .hdr__cta { gap: 8px; }
  .hdr__cta .btn--primary { display: none; }
  .hdr__menu { padding: 9px 14px 9px 11px; gap: 5px; top: 10px; right: 10px; }

  /* Mobile menu drawer — bigger touch targets, full-bleed */
  .menu-drawer__panel { padding: 20px 22px 24px; }
  .menu-drawer__head { margin-bottom: 18px; }
  .menu-drawer__nav button {
    font-size: 19px;
    padding: 16px 0;
  }
  .menu-drawer__foot .btn { justify-content: center; }

  /* ── Sections ─────────────────────────────────────────────────────────── */
  .section { padding: 56px 18px; }
  .section__head { margin-bottom: 32px; }
  .section__head h2 { font-size: clamp(26px, 7vw, 34px); letter-spacing: .015em; }
  .section__head p { font-size: 15.5px; line-height: 1.55; margin-top: 14px; }
  .divider-dot::before,
  .divider-dot::after { width: 32px; }

  /* ── Hero ─────────────────────────────────────────────────────────────── */
  .hero {
    padding: 28px 18px 56px;
    gap: 36px;
  }
  .hero__copy .eyebrow {
    font-size: 10.5px;
    letter-spacing: .16em;
    flex-wrap: wrap;
    line-height: 1.5;
  }
  .hero__copy .eyebrow::before { width: 28px; }
  .hero__title {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.04;
    letter-spacing: 0;
    margin: 18px 0 20px;
  }
  .hero__title small {
    font-size: .48em;
    letter-spacing: .14em;
    margin-top: 10px;
  }
  .hero__lead {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .hero__meta {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-top: 36px;
    padding-top: 24px;
  }
  .hero__meta div:last-child { grid-column: auto; }
  .hero__meta strong { font-size: 26px; }
  .hero__meta span { font-size: 10px; letter-spacing: .12em; line-height: 1.35; }

  .hero__media {
    max-width: 340px;
    aspect-ratio: 4/5;
  }
  .hero__symbol {
    width: 56px;
    height: 56px;
    left: -4px;
    bottom: 18px;
  }
  .hero__symbol img { width: 32px; height: 32px; }
  .hero__badge {
    right: 0;
    top: 16px;
    padding: 8px 14px;
    font-size: 11px;
  }
  .hero__pattern--tl {
    top: -8px;
    left: -8px;
    width: 110px;
    height: 110px;
  }

  /* Centered/editorial layout fixes on mobile */
  .hero[data-layout="centered"] {
    padding-top: 32px;
    padding-bottom: 56px;
  }
  .hero[data-layout="editorial"] .hero__title {
    font-size: clamp(40px, 11vw, 56px);
  }

  /* ── Marquee ──────────────────────────────────────────────────────────── */
  .marquee { padding: 22px 0; }
  .marquee__track { gap: 40px; animation-duration: 28s; }
  .marquee__item { font-size: 12px; letter-spacing: .14em; }

  /* ── Intro block ──────────────────────────────────────────────────────── */
  .intro { gap: 28px; }
  .intro__media { aspect-ratio: 4/4.4; max-width: 420px; margin: 0 auto; }
  .intro__copy h2 {
    font-size: clamp(26px, 7vw, 34px);
    margin: 14px 0 18px;
  }
  .intro__copy p { font-size: 15.5px; line-height: 1.62; }
  .intro__pillars {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
    margin-top: 26px;
  }
  .intro__pillar { gap: 10px; }
  .intro__pillar-icon { width: 38px; height: 38px; font-size: 18px; }
  .intro__pillar h4 { font-size: 13px; margin-bottom: 4px; }
  .intro__pillar p { font-size: 12.5px; line-height: 1.45; }

  /* ── Método VIDA — already collapses to horizontal at 520, refine ─────── */
  .metodo-grid { gap: 12px; }
  .metodo-card {
    padding: 18px 18px;
    gap: 16px;
  }
  .metodo-card__letter {
    font-size: 48px;
    width: 40px;
  }
  .metodo-card__title { font-size: 14px; letter-spacing: .03em; }
  .metodo-card__body { font-size: 13px; line-height: 1.5; }

  /* ── Services ─────────────────────────────────────────────────────────── */
  .services-grid { gap: 14px; }
  .service {
    padding: 28px 24px 26px;
    gap: 14px;
  }
  .service__num { font-size: 12px; }
  .service__icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .service__title { font-size: 19px; }
  .service__body { font-size: 14.5px; line-height: 1.55; }
  .service__list { gap: 6px; }
  .service__list li { font-size: 13px; padding-left: 18px; }
  .service__list li::before { width: 6px; height: 6px; top: 7px; }
  .service__more { font-size: 10.5px; letter-spacing: .16em; }
  .service__badge { top: 18px; right: 18px; font-size: 9.5px; padding: 5px 10px; }

  /* Featured service card cleanup */
  .service--featured { padding: 28px 24px; }
  .service--featured .service__title { font-size: 22px; }
  .service--featured .service__list { grid-template-columns: 1fr; }

  /* ── Diferenciais (vinho block) ────────────────────────────────────────── */
  .diffs { gap: 14px; }
  .diff { padding: 26px 22px; }
  .diff__icon { width: 44px; height: 44px; font-size: 20px; margin-bottom: 16px; }
  .diff h4 { font-size: 15px; }
  .diff p { font-size: 13.5px; line-height: 1.55; }

  /* ── Doctor block ─────────────────────────────────────────────────────── */
  .doc {
    padding: 32px 22px;
    gap: 28px;
  }
  .doc::before {
    width: 320px;
    height: 320px;
    right: -30%;
    top: -20%;
  }
  .doc__copy h2 {
    font-size: clamp(26px, 7vw, 36px);
    margin: 14px 0 18px;
  }
  .doc__copy p { font-size: 15.5px; line-height: 1.62; }
  .doc__credits {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 24px 0;
  }
  .doc__credit { padding: 12px 0; }
  .doc__credit strong { font-size: 10px; letter-spacing: .16em; }
  .doc__credit span { font-size: 13px; }
  .doc__sign { margin-top: 24px; padding-top: 18px; }
  .doc__sign .signature { font-size: 30px; }

  /* ── Testimonials ─────────────────────────────────────────────────────── */
  .testimonial-stage { padding: 64px 18px; }
  .testimonials {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 16px;
  }
  .tstm { padding: 28px 24px; gap: 16px; }
  .tstm blockquote { font-size: 17px; line-height: 1.5; }
  .tstm__avatar { width: 42px; height: 42px; font-size: 16px; }
  .tstm figcaption strong { font-size: 13.5px; }
  .tstm figcaption span { font-size: 11.5px; }

  /* ── FAQ ──────────────────────────────────────────────────────────────── */
  .faq__btn {
    padding: 22px 0;
    font-size: 15.5px;
    letter-spacing: .015em;
    gap: 16px;
  }
  .faq__icon { width: 32px; height: 32px; font-size: 14px; }
  .faq__panel-inner {
    font-size: 14.5px;
    line-height: 1.6;
    padding-bottom: 22px;
  }

  /* ── CTA ──────────────────────────────────────────────────────────────── */
  .cta { padding: 44px 22px; }
  .cta h2 {
    font-size: clamp(26px, 7vw, 36px);
    margin: 14px auto 18px;
  }
  .cta p { font-size: 15.5px; line-height: 1.55; margin-bottom: 26px; }
  .cta__ctas { flex-direction: column; gap: 10px; align-items: stretch; }
  .cta__ctas .btn { justify-content: center; }
  .cta::before { width: 200px; height: 200px; }
  .cta::after { width: 220px; height: 220px; }

  /* ── Newsletter ───────────────────────────────────────────────────────── */
  .news {
    padding: 32px 22px;
    gap: 20px;
  }
  .news h3 { font-size: 22px; }
  .news p { font-size: 14px; line-height: 1.55; }
  .news form { flex-direction: column; gap: 10px; align-items: stretch; }
  .news input { width: 100%; padding: 14px 20px; }
  .news .btn { justify-content: center; }

  /* ── Footer ───────────────────────────────────────────────────────────── */
  .ftr { padding: 56px 20px 24px; }
  .ftr__inner { gap: 36px; }
  .ftr__brand img { width: 130px; }
  .ftr__brand p { font-size: 13.5px; margin: 18px 0; }

  /* Colunas do footer: grade 2×2 — todos os tópicos visíveis na tela */
  .ftr__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    overflow-x: visible;
    margin: 0;
    padding: 0;
    scroll-snap-type: none;
  }
  .ftr__cols > div {
    flex: unset;
    padding-right: 0;
    scroll-snap-align: unset;
  }
  .ftr__cols h5 { margin-bottom: 12px; font-size: 12px; }
  .ftr__cols ul { gap: 8px; }
  .ftr__cols a,
  .ftr__cols button {
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* Sem gradiente nem indicador de deslize */
  .ftr__swipe-wrap::after { display: none; }
  .ftr__swipe-hint { display: none !important; }
  .ftr__legal {
    margin-top: 36px;
    padding-top: 18px;
    font-size: 11px;
    text-align: center;
    justify-content: center;
  }
  .ftr__legal span { flex: 1 1 100%; }

  /* ── WhatsApp float — smaller, doesn't overlap CTAs ───────────────────── */
  .wa-float {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }
  .wa-float svg { width: 28px; height: 28px; }

  /* ── Banners (inner pages) ────────────────────────────────────────────── */
  .banner { padding: 44px 18px 36px; }
  .banner h1 {
    font-size: clamp(28px, 8vw, 40px);
    margin-bottom: 10px;
  }
  .banner p { font-size: 15px; line-height: 1.55; }
  .banner__crumbs { font-size: 10px; margin-bottom: 14px; }
  .banner::after {
    width: 280px;
    height: 280px;
    top: -28%;
    right: -28%;
  }

  /* ── About page cards ─────────────────────────────────────────────────── */
  .about-grid { gap: 14px; margin-top: 32px; }
  .about-card { padding: 28px 22px; gap: 10px; }
  .about-card h3 { font-size: 18px; }
  .about-card p { font-size: 14px; line-height: 1.55; }
  .about-card__num { font-size: 12px; }

  /* Gallery — tidy on phone */
  .gallery { gap: 10px; }

  /* ── Team page ────────────────────────────────────────────────────────── */
  .team-card { gap: 0; }
  .team-card__copy { padding: 28px 22px 28px; gap: 12px; }
  .team-card__copy h3 { font-size: 24px; }
  .team-card__copy p { font-size: 14.5px; line-height: 1.6; }
  .team-card__creds { gap: 10px; }
  .team-card__cred { padding: 10px 0; font-size: 12.5px; }

  .team-grid { gap: 14px; margin-top: 32px; }
  .team-mini__copy { padding: 18px 20px 20px; gap: 6px; }
  .team-mini__copy h4 { font-size: 18px; }
  .team-mini__copy p { font-size: 13px; line-height: 1.55; }

  /* ── Blog ─────────────────────────────────────────────────────────────── */
  .blog-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 24px;
  }
  .blog-search { max-width: none; padding: 11px 18px; }
  .blog-search input { font-size: 14px; }
  .blog-cats {
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 -18px;
    padding: 2px 18px;
    scrollbar-width: none;
  }
  .blog-cats::-webkit-scrollbar { display: none; }
  .blog-cats button { white-space: nowrap; padding: 8px 14px; font-size: 10.5px; }

  .blog-grid { gap: 18px; }
  .blog-card__body { padding: 22px 22px 26px; gap: 10px; }
  .blog-card h3 { font-size: 17.5px; line-height: 1.3; }
  .blog-card p { font-size: 13.5px; line-height: 1.55; }
  .blog-card__meta { font-size: 10.5px; gap: 12px; }

  /* ── Contact page ─────────────────────────────────────────────────────── */
  .contact-grid { gap: 24px; }
  .contact-card { padding: 20px 18px; gap: 12px; }
  .contact-card__icon { width: 40px; height: 40px; font-size: 18px; flex-shrink: 0; }
  .contact-card p,
  .contact-card a {
    font-size: 14.5px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .contact-card small { font-size: 12px; }
  /* Action buttons (WhatsApp + Agendar) — stacked full-width */
  .contact-info > div:last-child {
    flex-direction: column !important;
  }
  .contact-info > div:last-child .btn {
    width: 100%;
    justify-content: center;
  }
  /* Form submit button — full width on mobile */
  .contact-grid .book__form > div:last-child {
    justify-content: stretch !important;
  }
  .contact-grid .book__form > div:last-child .btn {
    width: 100%;
    justify-content: center;
  }
  .map { margin-top: 28px; height: 260px; }
  .map__cta { left: 12px; bottom: 12px; padding: 9px 13px; font-size: 10.5px; }

  /* ── Resultados (vídeo depoimentos) ──────────────────────────────────── */
  .video-grid { gap: 16px; }
  .video-card__body { padding: 16px 18px 18px; gap: 4px; }
  .video-card__name { font-size: 15px; }
  .video-card__tag  { font-size: 9.5px; }
  .video-card__quote { font-size: 13px; }
  /* Garante proporção 16:9 e vídeo inline no iOS (sem fullscreen forçado) */
  .video-card__player video {
    -webkit-playsinline: 1;
    object-fit: cover;
  }
  /* Placeholder "em breve" — padding reduzido */
  .video-grid + div,
  .section .video-grid ~ div { padding: 48px 20px !important; }

  /* ── Agendamento ──────────────────────────────────────────────────────── */
  .book { padding: 28px 18px; gap: 24px; }
  .book::before { width: 280px; height: 280px; }
  .book__copy h2 {
    font-size: clamp(26px, 7vw, 36px);
    margin: 10px 0 14px;
  }
  .book__copy p { font-size: 15.5px; line-height: 1.6; }
  .book__perks { margin-top: 24px; gap: 12px; }
  .book__perk { padding-top: 12px; gap: 12px; }
  .book__perk-icon { width: 32px; height: 32px; font-size: 13px; }
  .book__perk h4 { font-size: 13.5px; }
  .book__perk p { font-size: 13.5px; line-height: 1.5; }
  .book__form { padding: 24px 20px; gap: 16px; }
  .book__form-head { padding-bottom: 16px; }
  .book__form-head h3 { font-size: 18px; }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px; /* avoids iOS zoom on focus */
    padding: 13px 14px;
  }
  .field > label { font-size: 10.5px; }
  .chip { padding: 9px 14px; font-size: 12px; }

  /* ── Buttons — ensure tap targets are roomy enough ────────────────────── */
  .btn--sm { padding: 12px 18px; font-size: 11px; }
  .btn--md { padding: 14px 22px; font-size: 12px; }
  .btn--lg { padding: 16px 26px; font-size: 12.5px; }
  /* Back buttons in drawers — keep label visible but compact */
  .sv-drawer__back,
  .art-drawer__back {
    top: 12px;
    padding: 8px 14px 8px 10px;
    font-size: 11.5px;
    letter-spacing: .02em;
  }
  /* sv-drawer back fica fixo no topo mesmo ao rolar o conteúdo */
  .sv-drawer__back {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 90;
  }
  .art-drawer__back { left: 12px; }
  .sv-drawer__foot { flex-wrap: wrap; gap: 10px; }
  .sv-drawer__foot-back {
    width: 100%;
    justify-content: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    margin: 0 0 4px;
  }

  /* ── Banner headlines — evita corte em telas estreitas ────────────────── */
  .banner h1 { font-size: clamp(26px, 8vw, 38px); letter-spacing: .01em; }
  .banner p  { font-size: 14.5px; }

  /* ── Seção Filosofia (Equipe) — padding interno reduzido ──────────────── */
  .team-grid ~ div { padding: 36px 22px !important; margin-top: 40px !important; }

  /* ── Drawer de tratamento — head com espaço para o botão fixo ─────────── */
  .sv-drawer__head { padding-top: 60px; }

  /* ── Seção do banner — garante que texto não seja cortado ─────────────── */
  .banner__inner { padding-right: 0; overflow: visible; }
  .sv-drawer__body { word-break: break-word; }
  .art-drawer__body { word-break: break-word; }
}

/* Very small phones */
@media (max-width: 380px) {
  .bar__inner { padding: 8px 14px; font-size: 10px; }
  .section { padding: 48px 14px; }
  .hero { padding: 24px 14px 48px; }
  .hero__title { font-size: 30px; }
  .hero__meta { gap: 10px; padding-top: 20px; }
  .hero__meta strong { font-size: 22px; }
  .hero__meta span { font-size: 9.5px; }
  .ftr__cols { gap: 22px 12px; }
  .video-grid { gap: 14px; }
  .video-card__body { padding: 14px 16px 16px; }
  .intro__pillars { grid-template-columns: 1fr; }
  .doc__credits { grid-template-columns: 1fr; }
  /* Headline ainda menor em telas muito estreitas */
  .banner h1 { font-size: 24px; }
  /* Drawer — padding reduzido em telas muito pequenas */
  .sv-drawer__head { padding: 56px 18px 24px; }
  .sv-drawer__body { padding: 28px 18px 40px; }
  .art-drawer__head { padding: 52px 18px 20px; }
  .art-drawer__body { padding: 24px 18px 40px; }
  /* Menu drawer mais compacto */
  .menu-drawer__panel { padding: 18px 18px 24px; }
  .menu-drawer__nav button { font-size: 20px; padding: 14px 0; }
}

/* ============================================================================
   LANDSCAPE PHONE — keep hero from being too tall
   ============================================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 24px; padding-bottom: 36px; }
  .hero__media { max-width: 240px; }
  .hero__title { font-size: 32px; }
}

/* ============================================================================
   TOUCH DEVICES — disable hover lifts that feel laggy on touch
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .service:hover,
  .metodo-card:hover,
  .diff:hover,
  .tstm:hover,
  .blog-card:hover,
  .video-card:hover,
  .btn--primary:hover,
  .btn--vinho:hover,
  .btn--gold:hover,
  .btn--marfim:hover {
    transform: none;
  }
  /* But keep the active/press feedback */
  .btn:active { transform: scale(0.97); }
}