/* ===================================================================
   Style — Dr. Mikael • versão organizada
   Mantém a paleta aprovada e corrige conflitos/duplicações
   Estrutura: Tokens • Base • Layout • Componentes • Seções • Responsivo
   =================================================================== */

/* =========================
   TOKENS & RESET ENXUTO
   ========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

:root{
  /* Paleta pastel */
  --brand: #020201;         /* acento/CTAs (preto elegante) */
  --brand-deep: #020201;    /* variação */
  --brand-ink: #f2efe7;     /* texto sobre botões escuros */

  /* Fundo e superfícies claras */
  --bg:    #f2efe7;         /* topo do degradê */
  --bg-2:  #e5dcd1;         /* base do degradê */
  --surface:#f2efe7;        /* cartões/painéis */

  /* Tipografia */
  --text:  #020201;
  --muted: rgba(2,2,1,.65); /* texto secundário usando a mesma cor com opacidade */
  --fs-hero: clamp(1.9rem, 2.6vw + 1rem, 3.2rem);
  --fs-h2: clamp(1.4rem, 1.3vw + 1rem, 2rem);
  --fs-base: 16px;
  --lh: 1.6;

  /* Layout */
  --max: 1120px;
  --pad: min(4vw, 22px);
  --radius:18px;

  /* Strokes/Shadows neutros (a partir do #020201) */
  --stroke: rgba(2,2,1,.12);
  --shadow-lg: 0 14px 34px rgba(2,2,1,.08);
  --shadow-sm: 0 8px 20px rgba(2,2,1,.06);

  /* Header */
  --header-h: 72px;
  --header-h-sm: 58px;

  /* Hero foco */
  --hero-focus-x: 35%;
  --hero-focus-y: 52%;
}

/* No mobile costuma cortar mais – desce um pouco mais o foco */
@media (max-width: 980px){
  :root{ --hero-focus-y: 60%; }
}

/* =========================
   BASE
   ========================= */
body{
  margin:0;
  font: 400 var(--fs-base)/var(--lh) system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
}

img, video{ max-width:100%; height:auto; display:block; border-radius: var(--radius); }
a{ color:inherit; text-decoration:none; }
ul{ padding-left: 1.1rem; }
.hidden{ display:none !important; }

/* Acessibilidade */
:focus-visible{ outline: 0; box-shadow: 0 0 0 3px rgba(27,110,146,.35); border-radius: 12px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =========================
   LAYOUT
   ========================= */
.container{ width:min(var(--max), 92%); margin-inline:auto; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section{ padding: 72px 0; }
.section-head h2{ font-size: var(--fs-h2); margin: .1rem 0 .35rem; }
.section-head p{ color: var(--muted); margin: 0 0 8px; }

/* Evita que títulos com ID fiquem escondidos pelo header fixo */
.hero, .section, [id]{ scroll-margin-top: calc(var(--header-h-sm) + 14px); }

/* =========================
   HEADER (fixo, compacto e sem “barrão”)
   ========================= */
/* HEADER pastel translúcido */
.site-header{
  position: sticky; top:0; z-index: 50;
  height: var(--header-h);
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(242,239,231,.78);          /* #f2efe7 com alpha */
  border-bottom: 1px solid rgba(2,2,1,.06);
}
.site-header .container{ height: 100%; padding-block: 0; }

/* Marca + logo */
.site-header .brand{
  position: relative; display:block; width: clamp(240px, 22vw, 380px); height:100%; padding:0;
}
.brand-logo{
  position:absolute; left:0; bottom: clamp(-38px, -5vw, -56px);
  height: clamp(110px, 14vw, 160px); width:auto; object-fit:contain;
  border-radius:0; box-shadow:none; margin:0; transform:none;
}
body.is-scrolled .site-header{
  height: var(--header-h-sm);
  background: rgba(10,36,50,.85);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

body.is-scrolled .brand-logo{ bottom:-10px; height: clamp(80px, 10vw, 112px); }

/* Navegação */
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ color: var(--text); opacity:.9; }
.nav a.btn{ opacity:1; }
.nav-toggle{
  display:none; appearance:none;
  border:1px solid var(--stroke);
  background: rgba(2,2,1,.06);
  color: var(--text);
  border-radius:12px; padding:.55rem .7rem;
}
/* =========================
   HERO (grade + recorte controlado)
   ========================= */
.hero{ display:grid; grid-template-columns: 1.15fr .95fr; align-items:center; gap:28px; padding: 64px 0 56px; }
.hero-copy h1{ font-size: var(--fs-hero); line-height: 1.12; margin:.25rem 0 .6rem; }
.hero-copy .sub{ color: var(--muted); font-size:1.05rem; margin: 0 0 1rem; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin:.8rem 0 1rem; }
.hero-media{ position:relative; overflow:hidden; border-radius: var(--radius); }
.hero-media img,
.hero-media video{
  width:100%;
  height: clamp(360px, 52vh, 560px);
  object-fit: cover;
  object-position: var(--hero-focus-x) var(--hero-focus-y);
}

/* =========================
   COMPONENTES
   ========================= */
.btn{ border:1px solid var(--stroke); background:transparent; box-shadow:var(--shadow-sm); }
.btn.primary{ background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.primary:hover{ filter: brightness(1.02); }
.btn.ghost{ background: rgba(2,2,1,.06); border-color: rgba(2,2,1,.14); color: var(--text); }
.btn.block{ display:block; width:100%; text-align:center; }

/* === TRUST (selos do herói) — versão clean e profissional === */
/* Substituir QUALQUER coisa anterior de .trust por este bloco */
.trust{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop: 3 colunas */
  gap: 12px;
  padding: 0;
  margin: 16px 0 0; /* espaço após os CTAs */
  list-style: none; /* remove marcadores nativos */
}

.trust li{
  padding: .72rem .95rem;
  border: 1px solid rgba(2, 2, 1, .12);
  border-radius: 14px;
  background: rgba(2, 2, 1, .04);          /* chip clarinho (combina com os pastéis) */
  box-shadow: 0 6px 18px rgba(2, 2, 1, .06);
  color: #020201;
  font-size: .96rem;
  line-height: 1.35;
}

/* Garantia: remove QUALQUER bolinha/ícone anterior */
.trust li::before{ content: none !important; }
.trust li::marker{ content: ""; } /* Safari */

@media (max-width: 980px){
  .trust{ grid-template-columns: 1fr 1fr; }  /* tablet: 2 colunas */
}
@media (max-width: 560px){
  .trust{ grid-template-columns: 1fr; }      /* mobile: 1 coluna */
}

.gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:18px; }
.gallery figure{ margin:0; background:#0e4a65; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.gallery img{ aspect-ratio: 4/3; object-fit: cover; }
.gallery figcaption{ padding:.6rem .8rem; color:var(--muted); font-size:.92rem; border-top:1px solid rgba(255,255,255,.08) }

.about{ display:grid; grid-template-columns: 1.15fr .85fr; align-items:start; gap:26px; }

.list-check{ padding-left:0; list-style:none; }
.list-check li{ position:relative; padding-left:26px; margin:.35rem 0; }
.list-check li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--brand); font-weight:800; }

.testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.testimonials cite{ display:block; margin-top:.5rem; color:var(--muted); font-style:normal }

.faq summary{ cursor:pointer; font-weight:700; }
.faq p{ margin:.6rem 0 0; color:var(--muted) }

.cta-final{ text-align:center; }
.cta-final p{ color:var(--muted); }

.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:26px 0 40px; background:#0c0d10; }
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.site-footer .foot-nav{ display:flex; gap:16px; }

/* =========================
   SEPARADORES DE SEÇÃO (full-bleed)
   ========================= */
#resultados, #como-funciona{ position: relative; isolation:isolate; }
#resultados::before, #como-funciona::before{ content:none; }
/* faixa suave abaixo do herói (resultados) */
#resultados::before{ content:none; }
/* faixa distinta para "Como funciona" (corrige percepção de “fora da seção”) */
#como-funciona::before{ background: linear-gradient(180deg, rgba(27,110,146,.10), rgba(27,110,146,.06)); border-block: 1px solid rgba(255,255,255,.08); }
/* divisor discreto antes do título */
#como-funciona .section-head{ position:relative; padding-top:18px; }
/* removido divisor da seção para degradê único */
/* respiro e leitura dos cards */
#como-funciona .steps{ max-width: 980px; margin-inline:auto; }
#como-funciona .steps li{ padding:16px 18px; background:#0f2a3a; border-color: rgba(255,255,255,.10); box-shadow: var(--shadow-sm); }
#resultados{ padding-bottom: 88px; }

/* =========================
   STEPS NUMERADOS
   ========================= */
.steps{ display:grid; gap:10px; counter-reset: step; margin-top:10px; }
.steps li{ list-style:none; padding:14px 14px; border:1px solid var(--stroke); border-radius:14px; background:#121316; box-shadow: var(--shadow-sm); }
.steps li::before{ counter-increment: step; content: counter(step) "."; color: var(--brand); font-weight:800; margin-right:.4rem; }

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width: 1200px){ .site-header .nav a{ font-size: .95rem; } }

@media (max-width: 980px){
  :root{ --header-h: 60px; --header-h-sm: 54px; }

  .hero{ grid-template-columns: 1fr; padding-bottom: 40px; }
  .hero-media img, .hero-media video{ height: clamp(240px, 44vh, 420px); }

  /* menu popover */
  .nav-toggle{ display:block; }
  .nav{
    position: absolute; right: var(--pad);
    top: calc(var(--header-h) + 8px);
    background: rgba(242,239,231,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:10px; flex-direction:column; gap:10px;
    width: min(240px, 70vw);
    transform: scale(.98); opacity:0; pointer-events:none; transition: .18s ease;
  }
  body.is-scrolled .nav{ top: calc(var(--header-h-sm) + 8px); }
  .nav.open{ transform: scale(1); opacity:1; pointer-events:auto; }

  /* logo volta para dentro da barra */
  .site-header{ height: var(--header-h); }
  .site-header .brand{ width:auto; }
  .brand-logo{ position: static; height: 46px; margin: 0; }

  .about{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .testimonials{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr; }
  .testimonials{ grid-template-columns: 1fr; }
}

/* ===== Footer elegante + crédito GD.Online ===== */
.site-footer{
  border-top: 1px solid var(--stroke);
  padding: 14px 0;
  margin-top: 40px;
}
.site-footer .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer p{ 
  margin: 0; 
  color: var(--muted);
}

/* Navegação do rodapé mantém visual discreto */
.site-footer .foot-nav{
  display: flex; 
  gap: 14px;
}
.site-footer .foot-nav a{
  color: var(--muted);
  opacity: .85;
  text-decoration: none;
}
.site-footer .foot-nav a:hover{ opacity: 1; }

/* Badge GD.Online: discreto, limpo, com foco no hover */
.gd-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--muted);
  opacity: .82;
  transition: opacity .2s ease, filter .2s ease;
}
.gd-badge img{
  height: 24px;                /* compacto para não chamar mais atenção que o conteúdo */
  width: auto;
  filter: grayscale(100%) contrast(1.05) brightness(1.05);
}
.gd-badge:hover{ opacity: 1; }
.gd-badge:hover img{ filter: none; }  /* ganha cor no hover, elegante */

/* Ajustes mobile */
@media (max-width: 640px){
  .site-footer .container{ justify-content: center; gap: 10px; }
  .gd-badge img{ height: 20px; }
}
/* ===== Harmonização do topo no mobile (logo + menu) ===== */
@media (max-width: 980px){
  :root{
    /* header um pouco mais alto para acomodar o logo maior */
    --header-h: 68px;
    --header-h-sm: 62px;
  }

  /* logo maior e alinhado sem sair da barra */
  .brand-logo{
    height: clamp(56px, 9vw, 72px);
    margin: 0;
  }

  /* botão do menu com ícone maior e área de toque confortável */
  .nav-toggle{
    font-size: 1.6rem;      /* aumenta o “☰” */
    line-height: 1;
    padding: .65rem .8rem;  /* cresce sem exagerar */
    min-width: 44px;        /* acessibilidade */
    min-height: 44px;       /* acessibilidade */
    border-radius: 14px;
  }

  /* leve respiro nas laterais do topo */
  .site-header .container{ padding-inline: var(--pad); }
}

/* ajuste fino p/ telas muito estreitas */
@media (max-width: 360px){
  .brand-logo{ height: 52px; }
  .nav-toggle{ font-size: 1.4rem; }
}

@media (hover:hover){
  .lightbox-close:hover, .lightbox-nav:hover{
    background: rgba(255,255,255,.2);
  }
}
/* ===== Swiper: Galeria "Resultados reais" ===== */
:root{
  --gal-h: 320px;
}
@media (min-width:768px){ :root{ --gal-h: 380px; } }
@media (min-width:1100px){ :root{ --gal-h: 420px; } }

#galeriaSwiper{
  padding: 12px 0 28px;
}
#galeriaSwiper .swiper-slide{
  height: var(--gal-h);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background: #111;
  display: flex; align-items: center; justify-content: center;
}
#galeriaSwiper .swiper-slide img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  cursor: zoom-in;
}

/* Setas e bolinhas com leve destaque */
#galeriaSwiper .swiper-button-prev,
#galeriaSwiper .swiper-button-next{
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(2,2,1,.08);
  box-shadow: 0 8px 24px rgba(2,2,1,.10);
}
#galeriaSwiper .swiper-button-prev::after,
#galeriaSwiper .swiper-button-next::after{
  font-size: 18px; color:#020201;
}
#galeriaSwiper .swiper-pagination-bullet{
  width: 8px; height: 8px; opacity: .4;
}
#galeriaSwiper .swiper-pagination-bullet-active{
  opacity: 1;
}

/* ===== LIGHTBOX ===== */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  display: grid; place-items: center;
  z-index: 9999; padding: 24px;
}
.lightbox[hidden]{ display: none; }
.lightbox img{
  max-width: 100%; max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 15px 60px rgba(0,0,0,.5);
}
.lightbox-close{
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.12); color:#fff; font-size:1.8rem; cursor:pointer;
}
.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.12); color:#fff; font-size:2rem; cursor:pointer;
}
.lightbox-nav.prev{ left: 12px; }
.lightbox-nav.next{ right: 12px; }
@media (hover:hover){
  .lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,.2); }
}
/* ===== Botão flutuante WhatsApp ===== */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1100; /* abaixo do lightbox (9999), acima do restante */
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  border: 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border-color: rgba(2,2,1,.12);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 34px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.28) inset;
  outline: none;
}
.whatsapp-float svg{ fill: currentColor; }
@media (max-width: 560px){
  .whatsapp-float{ width: 54px; height: 54px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ transition: none; }
}
.about-card .addr a{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-card .map-links{
  margin-left: 6px;
  font-size: .95rem;
  opacity: .9;
}
.about-card .map-links a:hover{ opacity: 1; }
/* ===== Versão compacta do bloco de Informações ===== */
/* Centraliza o card e define largura confortável */
.info-card{
  margin: 0 auto 22px;                  /* centraliza horizontal */
  width: min(720px, calc(100% - 48px)); /* menor que a tela, com respiro nas laterais */
}

/* Remove bullets de qualquer lista dentro do card (cross-browser) */
.info-card ul{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.info-card li::marker{ content: ""; }    /* Firefox/WebKit */
.info-card li::before{ content: none !important; } /* caso haja bullets via ::before */

/* Deixa o CTA alinhado e na mesma linguagem visual */
.info-cta{
  display: inline-flex;
  margin: 10px auto 0;   /* centraliza o botão dentro do card */
}

/* Mobile ainda mais denso */
@media (max-width: 780px){
  .info-card{ padding: 12px; gap: 10px; max-width: 96%; }
  .info-title{ margin-bottom: 6px; }
  .info-item{ grid-template-columns: 1fr; padding: 8px; }
  .info-cta{ width: 100%; padding: .9rem 1rem; }
}
/* Foto na seção "Quem é o Dr. Mikael?" */
/* ===== Ajuste de tamanho/respiração da foto no #sobre ===== */
.about{
  /* deixa o texto respirar e limita a coluna da foto */
  grid-template-columns: 1fr min(32vw, 360px);
  column-gap: clamp(16px, 4vw, 40px);
  align-items: start;
}

.about-media{
  width: clamp(240px, 30vw, 360px);  /* menor no desktop */
  max-width: 100%;
  justify-self: end;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-media img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%; /* foco no rosto; ajuste fino se quiser */
}

/* tablet e abaixo: mantém fluido e embaixo do texto */
@media (max-width: 980px){
  .about{ grid-template-columns: 1fr; }
  .about-media{ width: min(92%, 520px); justify-self: center; margin-top: 10px; }
  .about-media img{ aspect-ratio: 16 / 10; object-position: 50% 36%; }
}
/* ================================
   OVERRIDE — PALETA PASTEL
   Cores: #e5dcd1, #f2efe7, #020201
   (cole este bloco no FINAL do style.css)
   ================================ */

/* 1) Tokens da paleta */
:root{
  --brand: #020201;          /* acento/CTA */
  --brand-deep: #020201;
  --brand-ink: #f2efe7;      /* texto sobre botão escuro */

  --bg:   #f2efe7;           /* topo do degradê */
  --bg-2: #e5dcd1;           /* base do degradê */
  --surface: #f2efe7;        /* cartões/painéis */

  --text: #020201;
  --muted: rgba(2,2,1,.65);

  --stroke: rgba(2,2,1,.12);
  --shadow-lg: 0 14px 34px rgba(2,2,1,.08);
  --shadow-sm: 0 8px 20px rgba(2,2,1,.06);
}

/* 2) Fundo geral em degradê pastel */
body{
  color: var(--text) !important;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) fixed !important;
}

/* 3) Header claro e elegante */
.site-header{
  background: rgba(242,239,231,.78) !important;        /* #f2efe7 */
  border-bottom: 1px solid var(--stroke) !important;
}
body.is-scrolled .site-header{
  background: rgba(229,220,209,.88) !important;        /* #e5dcd1 */
  box-shadow: 0 6px 20px rgba(2,2,1,.10) !important;
}
.nav a{ color: var(--text) !important; }
.nav-toggle{
  border:1px solid var(--stroke) !important;
  background: rgba(2,2,1,.06) !important;
  color: var(--text) !important;
}

/* Se o logo for claro, reforça leitura sobre header claro */
.brand-logo{
  filter: drop-shadow(0 1px 0 rgba(2,2,1,.25)) drop-shadow(0 0 1px rgba(2,2,1,.2));
}

/* 4) Botões no novo esquema */
.btn{ border:1px solid var(--stroke) !important; background:transparent !important; box-shadow:var(--shadow-sm) !important; }
.btn.primary{ background: var(--brand) !important; color: var(--brand-ink) !important; border-color: transparent !important; }
.btn.ghost{ background: rgba(2,2,1,.06) !important; border-color: rgba(2,2,1,.14) !important; color: var(--text) !important; }

/* 5) Cartões/FAQ/steps claros */
.about-card,
.steps li,
.faq details,
.testimonials blockquote,
.gallery .slide{
  background: rgba(242,239,231,.94) !important; /* #f2efe7 */
  border: 1px solid var(--stroke) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text) !important;
}
.faq p,
.section-head p,
.testimonials cite{ color: var(--muted) !important; }

/* 6) Footer discreto pastel */
.site-footer{
  background: transparent !important;
  border-top: 1px solid var(--stroke) !important;
  color: var(--muted) !important;
}
.site-footer a{ color: var(--text) !important; }

/* 7) Divisor sutil entre seções */
.section{ position: relative; }
.section:not(:first-of-type)::before{
  content:"";
  position:absolute; top:0; left:50%; transform: translateX(-50%);
  width:100%; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(2,2,1,.18) 18%, rgba(2,2,1,.28) 50%, rgba(2,2,1,.18) 82%, transparent 100%);
  opacity:.55; pointer-events:none;
}

/* 8) Ajustes de galeria/lightbox para claro */
.gallery .slide img{ background: transparent !important; }
.lightbox{ background: rgba(0,0,0,.88) !important; } /* mantém contraste no overlay */

/* 9) WhatsApp flutuante mantém contraste */
.whatsapp-float{
  background: var(--brand) !important;
  color: var(--brand-ink) !important;
  border-color: rgba(2,2,1,.12) !important;
}
/* === CTAs do herói: base consistente e na paleta pastel === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem;
  border:1px solid var(--stroke);
  border-radius:14px;
  font-weight:600; letter-spacing:.1px;
  background:transparent;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); filter:brightness(.98); }

/* variações */
.btn.primary{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.btn.ghost{ background:rgba(2,2,1,.06); color:var(--text); border-color:rgba(2,2,1,.14); }

/* Opcional: versão verde WhatsApp (troque no HTML a classe 'primary' por 'whatsapp' se quiser) */
.btn.whatsapp{ background:#25d366; color:#fff; border-color:#25d366; }

/* === Menu no mobile: remover o fundo azul e manter o pastel === */
@media (max-width:980px){
  .nav{
    background: rgba(242,239,231,.98) !important;  /* pastel */
    border: 1px solid var(--stroke) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .nav a{ color: var(--text) !important; }
}
/* === CTAs do herói — visual consistente com a paleta pastel === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem;
  border:1px solid var(--stroke);
  border-radius:14px;
  font-weight:600; letter-spacing:.1px;
  background:transparent;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); filter:brightness(.98); }

/* variações (mantém seu esquema de tokens) */
.btn.primary{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.btn.ghost{ background:rgba(2,2,1,.06); color:var(--text); border-color:rgba(2,2,1,.14); }

/* Opcional: versão “verde WhatsApp” */
.btn.whatsapp{ background:#25d366; color:#fff; border-color:#25d366; }
/* ===== Botão flutuante Instagram (dock com WhatsApp) ===== */
.instagram-float{
  position: fixed;
  right: 18px;
  /* empilha acima do WhatsApp com um espacinho de 8px */
  bottom: calc(18px + env(safe-area-inset-bottom) + 66px);
  z-index: 1100;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 999px;

  /* linguagem pastel do site */
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.instagram-float:hover,
.instagram-float:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  outline: none;
}
.instagram-float svg{ display:block; }

@media (max-width: 560px){
  .instagram-float{
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom) + 62px);
    width: 50px; height: 50px;
  }
}
@media (prefers-reduced-motion: reduce){
  .instagram-float{ transition: none; }
}
/* ================================
   SEÇÕES TEMÁTICAS (full-bleed fluido)
   Alterna o fundo entre var(--bg) e var(--bg-2)
   sem virar “bloco chapado”. Conteúdo segue na .container.
   ================================ */

.section{ position: relative; z-index: 0; }

/* full-bleed: pinta a largura toda, mantendo o conteúdo contido */
.section::after{
  content:"";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--sec-bg, transparent);
}

/* “fluidez” suave com leves manchas (bem discretas) */
.section{
  --blob:
    radial-gradient(1200px 800px at 70% -10%, rgba(2,2,1,.03), transparent 55%),
    radial-gradient(900px 600px at 0% 100%,  rgba(2,2,1,.02), transparent 50%);
}

/* Temas: só usam as DUAS cores já aprovadas */
.theme-a{ --sec-bg: linear-gradient(180deg, var(--bg)   0%, var(--bg)   100%), var(--blob); }
.theme-b{ --sec-bg: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-2) 100%), var(--blob); }
/* mixa as duas para um respiro diferente */
.theme-c{ --sec-bg: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%), var(--blob); }
/* repete para manter ritmo visual */
.theme-d{ --sec-bg: linear-gradient(180deg, var(--bg)   0%, var(--bg)   100%), var(--blob); }
.theme-e{ --sec-bg: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-2) 100%), var(--blob); }

/* Separador de seção existente continua Ok (usa ::before).
   Mantivemos o fundo em ::after para não conflitar. */
/* ===== HERO — versão elegante e moderna ===== */
.hero.hero--elegante{
  align-items: stretch;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.6vw, 32px);
  padding-top: clamp(42px, 5vw, 72px);
  padding-bottom: clamp(42px, 4vw, 64px);
}

/* Foto com profundidade sutil */
.hero--elegante .hero-media{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.hero--elegante .hero-media::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 35% 30%, rgba(2,2,1,.05), transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(2,2,1,.10) 100%);
  pointer-events:none;
}
.hero--elegante .hero-media::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(2,2,1,.08);
  pointer-events:none;
}

/* Cartão de vidro para o texto */
.hero--elegante .hero-copy{
  background: rgba(242,239,231,.72);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(120%) blur(6px);
}
.hero--elegante .hero-copy h1{
  letter-spacing: -.02em;
  margin-top: .15rem;
}
.hero--elegante .sub{ color: var(--muted); }

/* CTAs em cápsula (mais contemporâneo) */
.hero--elegante .hero-ctas{ gap: 10px; }
.hero--elegante .btn{
  border-radius: 999px;
  padding: .82rem 1.1rem;
}
.hero--elegante .btn.ghost{
  background: rgba(2,2,1,.04);
}

/* Selos já estão limpos; só aproxima um pouco */
.hero--elegante .trust{ margin-top: 14px; }

/* Responsivo */
@media (max-width: 980px){
  .hero.hero--elegante{ grid-template-columns: 1fr; }
  .hero--elegante .hero-copy{ background: rgba(242,239,231,.86); }
}
/* === COMO FUNCIONA — Cards em colunas, modernos e na paleta pastel === */
#como-funciona .steps--grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 18px);
  counter-reset: step; /* (mantemos, caso queira usar contador automático depois) */
  margin-top: 14px;
}

#como-funciona .steps--grid .step{
  position: relative;
  padding: clamp(16px, 2vw, 22px);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

/* número grande / marca d’água */
#como-funciona .steps--grid .step .n{
  position: absolute;
  top: 10px; left: 12px;
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 48px);
  letter-spacing: -.02em;
  color: rgba(2,2,1,.12); /* #020201 com baixa opacidade */
  line-height: 1;
  pointer-events: none;
}

/* títulos e textos */
#como-funciona .steps--grid .step-title{
  margin: 0 0 6px 0;
  font-size: clamp(1.05rem, 1.1vw + .6rem, 1.25rem);
  letter-spacing: -.01em;
}
#como-funciona .steps--grid .step-desc{
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}

/* foco/hover com leve “elevação” */
#como-funciona .steps--grid .step:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2,2,1,.08);
  border-color: rgba(2,2,1,.18);
}

/* destaque de um card (opcional) */
#como-funciona .steps--grid .step.is-highlight{
  border-color: rgba(2,2,1,.26);
  box-shadow: 0 14px 34px rgba(2,2,1,.10);
}

/* Remove numeração anterior da versão antiga */
#como-funciona .steps--grid .step::before{ content: none !important; }

/* responsivo */
@media (max-width: 980px){
  #como-funciona .steps--grid{
    grid-template-columns: 1fr; /* empilha */
  }
  #como-funciona .steps--grid .step .n{
    font-size: 36px;
  }
}
/* === DEPOIMENTOS (carrossel pastel) === */
.depo-swiper{ padding: 6px 0 28px; }

#depoSwiper .swiper-slide{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Texto do depoimento */
.depo-body{
  padding: clamp(16px, 2.2vw, 22px);
  color: var(--text);
  font-size: .98rem;
  line-height: 1.6;
}

/* Barra inferior com nome do paciente */
.depo-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(2,2,1,.06);                 /* sutil, dentro da sua paleta */
  border-top: 1px solid var(--stroke);
}
.depo-label{ color: var(--muted); }
.depo-label strong{ color: var(--text); }

/* Selo redondo à direita (o “G” do exemplo) */
.depo-badge{
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text);
  display: grid; place-items: center;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(2,2,1,.06) inset;
}

/* Setas e bolinhas em linguagem pastel */
#depoSwiper .swiper-button-prev,
#depoSwiper .swiper-button-next{
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(2,2,1,.08);
  box-shadow: 0 8px 24px rgba(2,2,1,.10);
}
#depoSwiper .swiper-button-prev::after,
#depoSwiper .swiper-button-next::after{
  font-size: 18px; color: #020201;
}
#depoSwiper .swiper-pagination-bullet{
  width: 8px; height: 8px; opacity: .4; background: #020201;
}
#depoSwiper .swiper-pagination-bullet-active{ opacity: 1; }

/* Responsivo: 1 card no mobile, 2 no tablet, 3 no desktop */
@media (min-width: 768px){
  #depoSwiper .swiper-container{ padding-bottom: 24px; }
}
/* ===== BIO (Quem é o Dr. Mikael?) — painel elegante ===== */
.about{
  /* mantém duas colunas, com foto mais contida */
  grid-template-columns: 1.2fr min(34vw, 380px);
  column-gap: clamp(18px, 4vw, 40px);
  align-items: start;
}

.bio-card{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: var(--shadow-sm);
}

.bio-title{
  margin: 0 0 8px 0;
  font-size: var(--fs-h2);
  letter-spacing: -.01em;
}

.bio-lead{ margin: 0 0 10px; color: var(--muted); }

.bio-points{
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 8px;
}
.bio-points li{
  display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 10px;
}
.bio-points .ico{
  width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(2,2,1,.06);
  position: relative; top: 2px;
}
.bio-points .ico::after{
  content: "✓";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: var(--text);
}

/* Foto mais vertical, com foco no rosto e sombra suave */
.about-media{
  width: clamp(260px, 32vw, 380px);
  max-width: 100%;
  justify-self: end;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-media img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%; /* ajuste fino do foco */
}

/* Mobile: empilha e centraliza a foto */
@media (max-width: 980px){
  .about{ grid-template-columns: 1fr; }
  .about-media{ width: min(92%, 520px); justify-self: center; margin-top: 12px; }
  .bio-card{ padding: 16px; }
}
/* ===== SOBRE — overrides de tamanho e moldura da foto ===== */

/* Foto ainda menor no desktop e respiro entre colunas */
.about{
  grid-template-columns: 1fr min(28vw, 300px); /* antes era até 360px */
  column-gap: clamp(18px, 4vw, 40px);
}

/* Contêiner da imagem */
.about-media{
  width: clamp(200px, 26vw, 300px);  /* encolhe mais no desktop */
  max-width: 100%;
  justify-self: end;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(2,2,1,.10);
}

/* Moldura pastel (borda “macia”) */
.about-media.is-framed{
  --moldura: 10px;
  padding: var(--moldura);                           /* cria a borda */
  background: linear-gradient(135deg, #e5dcd1, #f2efe7);
  border-radius: calc(20px + var(--moldura));
  outline: 1px solid rgba(2,2,1,.08);                /* filete sutil */
}

/* Acabamento da imagem dentro da moldura */
.about-media.is-framed img{
  border-radius: 16px;
  border: 1px solid rgba(2,2,1,.08);
  box-shadow: inset 0 2px 10px rgba(2,2,1,.04);
}

/* Proporção e foco do retrato */
.about-media img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;       /* retrato vertical elegante */
  object-fit: cover;
  object-position: 50% 34%;  /* foco no rosto */
}

/* Mobile: centraliza e dá mais largura visual sem ficar gigante */
@media (max-width: 980px){
  .about{ grid-template-columns: 1fr; }
  .about-media{ width: min(86%, 440px); justify-self: center; margin-top: 12px; }
  .about-media img{ aspect-ratio: 16 / 10; object-position: 50% 36%; }
}
/* SOBRE — centralização vertical e espaçamento entre colunas */
.about{
  align-items: center;                     /* texto alinha ao meio da foto */
  gap: clamp(22px, 3.6vw, 40px);           /* mais respiro entre texto e foto */
}
.about > :first-child{ align-self: center; } /* garante o centro mesmo com títulos maiores */
/* SOBRE — respiro maior no topo e embaixo, sem afetar as outras seções */
#sobre{
  padding-block: clamp(88px, 9vw, 132px);
}
.depo-card{background:#fff;border-radius:14px;padding:18px 18px 14px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.theme-d .depo-card{background:#f8f7f4}
.depo-text{font-size:1rem;line-height:1.6;margin:0 0 .75rem}
.depo-author{font-weight:600;opacity:.85}
.depo-city{font-weight:400;opacity:.7}
/* Render sob demanda das seções abaixo da borda */
.section { content-visibility: auto; contain-intrinsic-size: 800px; }
/* Galeria e Depoimentos devem carregar assets antes da entrada no viewport */
#resultados, #depoimentos { content-visibility: visible; contain-intrinsic-size: auto; }

/* === FAQ — cartão pastel elegante ===================================== */
#faq .section-head { margin-bottom: 8px; }

.faq{
  max-width: 880px;                /* estreita um pouco p/ leitura confortável */
  margin: 10px auto 0;
  display: grid;
  gap: 10px;                       /* espaço entre os itens */
}

.faq details{
  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;                /* arredondado real */
  transition: border-color .2s, box-shadow .2s, transform .12s;
}

/* realce sutil quando aberto/hover */
.faq details[open]{ 
  border-color: rgba(2,2,1,.18);
  box-shadow: 0 14px 32px rgba(2,2,1,.08);
}
.faq details:hover{ transform: translateY(-1px); }

.faq summary{
  list-style: none;                /* some o marcador nativo */
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  outline: none;
}
.faq summary::-webkit-details-marker{ display:none; }  /* Safari/Chrome */

/* chevron minimalista (vira para a direita quando abre) */
.faq summary::after{
  content: "›";
  margin-left: auto;               /* empurra p/ direita */
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(2,2,1,.04);
  font-size: 14px; line-height: 1;
  transition: transform .2s ease, background .2s ease;
}
.faq details[open] summary::after{ transform: rotate(90deg); }

/* resposta com respiro e cor de texto secundária da paleta */
.faq .answer,
.faq p{
  padding: 0 18px 16px 18px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
/* leve faixa de separação do título para o texto */
.faq details[open] .answer{ 
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
}

/* acessibilidade no teclado */
.faq summary:focus-visible{
  box-shadow: 0 0 0 3px rgba(2,2,1,.14) inset;
  border-radius: 12px;
}

/* mobile: mantém tudo limpo e com boa área de toque */
@media (max-width: 560px){
  .faq summary{ padding: 14px 16px; }
  .faq .answer, .faq p{ padding: 0 16px 14px; }
}
/* ===== FIX: Footer mobile (wrap + respiro + badge em linha própria) ===== */

/* Permite a quebra de linha dentro do nav do rodapé e adiciona espaçamento */
.site-footer .foot-nav{
  display: flex;
  flex-wrap: wrap;           /* <- fundamental pro mobile */
  column-gap: 14px;
  row-gap: 8px;
}
.site-footer .foot-nav > *{ flex: 0 0 auto; }

/* Fallback para navegadores sem suporte a gap em flex (só por garantia) */
@supports not (gap: 1rem){
  .site-footer .foot-nav > *{ margin-right: 14px; }
  .site-footer .foot-nav > *:last-child{ margin-right: 0; }
}

/* Layout compacto e sem “invasão” no telefone */
@media (max-width: 480px){
  .site-footer .container{
    flex-direction: column;   /* empilha o texto e o nav */
    align-items: center;
    gap: 10px;
  }
  .site-footer p{ margin: 0; }

  /* Badge GD.Online numa linha própria e centralizado */
  .site-footer .gd-badge{
    width: 100%;
    justify-content: center;
    order: -1;               /* sobe o badge para a primeira linha (opcional) */
    margin-bottom: 2px;
  }
  .gd-badge img{ height: 18px; } /* reduz levemente para caber melhor */
}
/* --- Performance: só calcula/renderiza quando entrar em viewport --- */
.section, .site-footer { 
  content-visibility: auto; 
  contain-intrinsic-size: 800px 1000px; /* reserva espaço p/ evitar CLS */
}
#depoimentos { contain-intrinsic-size: 720px 720px; }
#faq         { contain-intrinsic-size: 640px 640px; }
#agendar     { contain-intrinsic-size: 560px 560px; }

/* Menos custo em sombras pesadas nas listas e cards (ajuste sutil) */
.trust li, .steps li, .bio-card, .depo-swiper .swiper-slide {
  box-shadow: 0 8px 20px rgba(2,2,1,.05);
}
/* === BIO: autoridade e textura (quem é o Dr.) === */
.bio-kicker{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cred-belt{
  list-style: none;
  padding: 0; margin: 8px 0 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.cred-belt li{
  display: flex; align-items: center; gap: 8px;
  padding: .6rem .75rem;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(2,2,1,.04);
  font-weight: 600;
}
.cred-belt li::before{
  content: "✓";
  font-weight: 800;
  color: var(--brand);
}

/* chips de prova */
.stat-chips{
  list-style: none; padding: 0; margin: 14px 0 8px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.stat-chips li{
  padding: .42rem .66rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(2,2,1,.04);
  font-size: .9rem;
}

/* micro-CTA */
.micro-cta{
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  line-height: 1.2;
}
.micro-cta:hover{ opacity: .9; }

/* assinatura */
.bio-sign{
  margin-top: 8px; display: flex; gap: 8px; align-items: baseline;
  color: var(--muted);
}
.bio-sign strong{ color: var(--text); }

/* responsivo da faixa de credenciais */
@media (max-width: 980px){
  .cred-belt{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .cred-belt{ grid-template-columns: 1fr; }
}

/* === SOBRE — foto um pouco menor + fade nas bordas ================== */
.about{
  /* reduz a coluna da imagem e dá um respiro saudável do texto */
  grid-template-columns: 1fr min(36vw, 480px);
  column-gap: clamp(24px, 4.5vw, 60px);
  align-items: center;
}

.about-media{
  width: clamp(280px, 34vw, 480px);   /* ↓ menor que a versão anterior */
  max-width: 100%;
  justify-self: end;
  transform: translateX(6px);         /* descola do bloco de texto */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(2,2,1,.12);
}

/* moldura clean permanece */
.about-media.is-framed{
  --moldura: 10px;
  padding: var(--moldura);
  background: linear-gradient(135deg, #e5dcd1, #f2efe7);
  border-radius: calc(24px + var(--moldura));
  outline: 1px solid rgba(2,2,1,.10);
}

/* fade nas bordas da foto + foco no rosto */
.about-media img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 52% 36%;
  border-radius: 16px;

  /* FADE sutil e moderno (funciona no Safari/Chrome/Firefox) */
  -webkit-mask-image: radial-gradient(125% 115% at 56% 50%, #000 74%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(125% 115% at 56% 50%, #000 74%, rgba(0,0,0,0) 100%);
  transition: transform .45s ease;
}

/* micro-hover leve no desktop */
@media (hover:hover){
  .about-media:hover img{ transform: scale(1.02); }
}

/* mobile: volta pro fluxo e centraliza */
@media (max-width: 980px){
  .about{ grid-template-columns: 1fr; }
  .about-media{
    width: min(92%, 520px);
    transform: none;
    margin-top: 12px;
  }
}
/* ===== Destaques de mídia (sutil e consistente) ===== */
.press-chip{
  display:flex; align-items:center; gap:8px;
  font-size:.95rem; margin:.2rem 0 .9rem;
  opacity:.95;
}
.press-chip .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(2,2,1,.06);
}

/* Card de mídia com vídeo responsivo */
.press-card{
  display:grid; gap:10px;
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  background: rgba(2,2,1,.03);
  box-shadow: var(--shadow-sm);
  max-width: 880px;
  margin-inline: auto;
}
.press-card figcaption{
  color: var(--muted);
  font-size:.95rem;
}

/* Vídeo 16:9, com cantos arredondados */
.video-wrap{
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background:#000;   /* fundo seguro enquanto carrega */
}
.video-wrap video{
  width:100%; height:100%; display:block;
}
/* --- Micro-destaque (Na mídia) --- */
.press-chip{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin: .35rem 0 .65rem;
  color: var(--muted);
}
.press-chip .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(2,2,1,.06);
}
.press-text{ font-size:.95rem; }
.press-handle{
  font-size:.9rem; line-height:1;
  padding:.22rem .52rem;
  border:1px solid var(--stroke);
  border-radius:999px;
  text-decoration:none;
  color:inherit;
}
.press-chip + .trust{ margin-top: 12px; } /* respiro */
@media (max-width: 720px){
  .press-text{ font-size:.9rem; }
  .press-handle{ font-size:.88rem; }
}
/* ===== Mapa (embed) + ações (Waze / Google Maps) ===== */
.map-embed{
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(2,2,1,.03);
  box-shadow: var(--shadow-sm);
  margin: 10px 0 6px;
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

.map-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin-top: 6px;
}
.map-actions .map-btn{
  border-radius: 999px;
  padding: .75rem 1rem;
  font-weight: 600;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.map-actions .map-btn:hover{ transform: translateY(-1px); }

/* combinação com a paleta pastel */
.map-actions .map-btn.gmaps{
  background: rgba(2,2,1,.06) !important;
  color: var(--text) !important;
  border-color: rgba(2,2,1,.14) !important;
}
.map-actions .map-btn.waze{
  background: rgba(2,2,1,.06) !important;
  color: var(--text) !important;
  border-color: rgba(2,2,1,.14) !important;
}


@media (max-width:560px){
  .map-actions .map-btn{ width:100%; }
}
/* === Sessão "Informações" — mobile refinado (mapa + ações) === */
.info-card{
  padding: clamp(14px, 2vw, 18px);
  margin: 0 auto 22px;
  width: min(720px, calc(100% - 48px));
}

/* Lista alinhada em grade: rótulo + valor */
.info-title{ margin: 0 0 10px; }
.info-list{ display: grid; gap: 8px; margin: 0 0 10px; }
.info-item{
  display: grid;
  grid-template-columns: 128px 1fr;
  align-items: start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(2,2,1,.06);
}
.info-item:last-child{ border-bottom: 0; }
.info-label{ color: var(--muted); font-weight: 600; }
.info-value a{ text-decoration: underline; text-underline-offset: 2px; }

/* Mapa responsivo 16:9 com cantos arredondados */
.map-embed{ margin-top: 10px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.map-embed iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  border: 0;
  display: block;
}

/* Botões lado a lado (ou empilhados no mobile) com contraste garantido */
.map-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 0;
}
.map-actions .map-btn{
  display: flex; align-items: center; justify-content: center;
  padding: .9rem 1rem;
  border-radius: 14px;
  font-weight: 600;
  /* sobrescreve .btn (que é transparente) */
  background: rgba(2,2,1,.06) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important; /* evita sumir texto no iOS */
}

/* Mobile: empilha e dá mais respiro */
@media (max-width: 560px){
  .info-item{ grid-template-columns: 1fr; }
  .map-actions{ grid-template-columns: 1fr; }
  .info-cta{ width: 100%; margin-top: 14px; }
}
/* Corrige alinhamento do <ol> (remove recuo e marcadores) */
#como-funciona .steps {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
/* Centralização perfeita no mobile (1 coluna) */
@media (max-width: 980px){
  #como-funciona .steps--grid{
    grid-template-columns: 1fr;          /* 1 coluna */
    max-width: 640px;                     /* miolo confortável */
    margin-inline: auto;                  /* centraliza */
    padding-inline: 8px;                  /* respiro nas laterais */
    justify-items: stretch;               /* card ocupa a coluna toda */
  }
  #como-funciona .steps--grid .step{
    width: 100%;                          /* garante 100% da coluna */
  }
}
/* FIX — centralizar a foto do #sobre no mobile */
@media (max-width: 980px){
  #sobre.about{
    grid-template-columns: 1fr !important;       /* força 1 coluna no mobile */
  }
  #sobre .about-media{
    grid-column: 1 / -1;                          /* ocupa a largura toda da grid */
    justify-self: center !important;              /* centraliza o bloco */
    margin-inline: auto;                           /* garante centrado */
  }
}
/* ===== NEW DAY — cabeçalho e galeria refinados ===== */
.nd-head{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 8px 0 16px;
}

.nd-logo{
  height: clamp(68px, 9vw, 96px);
  width: auto;
  border-radius: 0;           /* logo não precisa de arredondamento */
  box-shadow: none;
}

.nd-head .btn{
  justify-self: start;
  border-radius: 999px;        /* cápsula, como o resto do site */
  padding: .78rem 1.05rem;
}

@media (max-width: 820px){
  .nd-head{
    grid-template-columns: 1fr;  /* empilha */
    justify-items: center;
    row-gap: 10px;
  }
  .nd-head .btn{ justify-self: center; }
}

/* Galeria com cards consistentes (sem “uma embaixo da outra” no mobile) */
.nd-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 colunas já no mobile */
}

@media (min-width: 980px){
  .nd-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } /* 4 colunas no desktop */
}

.nd-grid figure{
  margin: 0;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;      /* todos os cards iguais */
}

.nd-grid img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* preenche sem deformar */
  object-position: center;
}
/* === NEW DAY — refinamentos só no DESKTOP === */
/* Base (mantém o mobile como está) */
.nd-head{
  display: grid;                 /* garante grid em todos os breakpoints */
  grid-template-columns: 1fr;    /* mobile: empilha */
  justify-items: center;
  row-gap: 10px;
}

/* Desktop: logo + botão lado a lado, com respiro */
@media (min-width: 980px){
  .nd-head{
    grid-template-columns: auto 1fr; /* logo / botão */
    align-items: center;
    justify-items: start;
    column-gap: 18px;
    margin-top: 6px;
  }

  /* “plaquinha” no logo: tira a sensação de jogado */
  .nd-logo{
    height: 84px;                /* ajuste fino de proporção */
    width: auto;
    padding: 10px 14px;          /* respiro interno */
    background: var(--surface);  /* na sua paleta pastel */
    border: 1px solid var(--stroke);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    object-fit: contain;
  }

  /* botão fica alinhado e com espaço */
  .nd-head .btn{
    justify-self: start;
    margin-left: 4px;            /* tira a “colagem” no logo */
  }
}

/* (opcional) micro-respiro antes da galeria */
#nd-galeria{ margin-top: 10px; }