/* ============================================================
   Dr. Roni Duque — Cardiologia & Clínica Médica
   Design system: output/design-system.md
   Autor: Bruno Build (squad criador-de-site)
   Mobile-first. Sem dependências além das fontes.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* cor */
  --navy-900:#0B1730;
  --navy-800:#132445;
  --navy-700:#1E355E;
  --navy-200:#C9D3E4;
  --navy-100:#E4EAF3;
  --accent:#C9314A;
  --accent-600:#A82740;
  --accent-100:#F7E7EA;
  --cream:#FAF7F2;
  --white:#FFFFFF;
  --ink-900:#151A24;
  --ink-700:#3D4657;
  --ink-500:#5C6478;
  --wa:#25D366;

  /* tipografia */
  --font-display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* espaçamento (base 8) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* forma */
  --r-sm:6px; --r:12px; --r-lg:20px; --r-full:999px;
  --container:1160px;
  --pad:20px;

  /* elevação */
  --shadow-sm:0 1px 2px rgba(11,23,48,.05), 0 2px 8px rgba(11,23,48,.04);
  --shadow:0 4px 12px rgba(11,23,48,.06), 0 16px 40px rgba(11,23,48,.07);
  --shadow-lg:0 8px 24px rgba(11,23,48,.10), 0 32px 64px rgba(11,23,48,.10);

  /* movimento */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t:.28s var(--ease);
}

@media (min-width:900px){ :root{ --pad:40px; } }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:clamp(1rem,.98rem + .18vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; line-height:1.15; text-wrap:balance; font-weight:600; }
p{ margin:0 0 var(--s2); }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--navy-700);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.dark :focus-visible{ outline-color:#8FB0E8; }

::selection{ background:var(--accent); color:#fff; }

/* ---------- 3. LAYOUT ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{ padding-block:clamp(56px,9vw,110px); }
.section--tight{ padding-block:clamp(40px,6vw,72px); }
.dark{ background:var(--navy-900); color:rgba(255,255,255,.85); }
.dark h2,.dark h3,.dark strong{ color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-900); color:#fff;
  padding:14px 20px; border-radius:0 0 var(--r) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- 4. TIPOGRAFIA ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  margin:0 0 var(--s2);
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:currentColor; flex:none;
}
.dark .eyebrow{ color:#E9A2AE; }

h1,.h1{
  font-family:var(--font-display);
  font-size:clamp(2.35rem,1.4rem + 4.2vw,4.35rem);
  font-weight:500; letter-spacing:-.02em; line-height:1.05;
  color:var(--navy-900);
}
h2,.h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,1.25rem + 2.6vw,2.9rem);
  font-weight:500; letter-spacing:-.015em; line-height:1.12;
  color:var(--navy-900);
}
h3,.h3{
  font-size:clamp(1.05rem,1rem + .3vw,1.22rem);
  font-weight:600; letter-spacing:-.005em; color:var(--navy-900);
}
.lead{
  font-size:clamp(1.05rem,1rem + .5vw,1.22rem);
  line-height:1.65; color:var(--ink-700); max-width:62ch;
}
.muted{ color:var(--ink-500); }
.dark .lead,.dark .muted{ color:rgba(255,255,255,.72); }
.accent{ color:var(--accent); }
.dark .accent{ color:#E9A2AE; }

/* ênfase sublinhada à mão */
.mark{
  position:relative; white-space:nowrap; color:var(--navy-900);
}
.mark::after{
  content:''; position:absolute; left:-2px; right:-2px; bottom:.03em;
  height:.38em; background:var(--accent-100); border-radius:2px; z-index:-1;
}
.dark .mark{ color:#fff; }
.dark .mark::after{ background:rgba(201,49,74,.42); }

/* ---------- 5. BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-full);
  font-weight:600; font-size:.95rem; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn svg{ width:17px; height:17px; flex:none; }

.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(201,49,74,.24); }
.btn--primary:hover{ background:var(--accent-600); transform:translateY(-2px); box-shadow:0 10px 26px rgba(201,49,74,.3); }

.btn--ghost{ border-color:var(--navy-200); color:var(--navy-900); background:transparent; }
.btn--ghost:hover{ border-color:var(--navy-700); background:var(--white); transform:translateY(-2px); }

.dark .btn--ghost{ border-color:rgba(255,255,255,.28); color:#fff; }
.dark .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.btn--wa{ background:var(--wa); color:#08351a; box-shadow:0 6px 18px rgba(37,211,102,.25); }
.btn--wa:hover{ background:#1eb857; transform:translateY(-2px); }

.btn--sm{ padding:11px 20px; font-size:.86rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.9rem; color:var(--accent);
  text-decoration:none; transition:gap var(--t);
}
.link-arrow:hover{ gap:13px; text-decoration:underline; text-underline-offset:4px; }
.dark .link-arrow{ color:#E9A2AE; }

/* ---------- 6. TOPBAR ---------- */
.topbar{
  background:var(--navy-900); color:rgba(255,255,255,.8);
  font-size:.76rem; letter-spacing:.02em;
}
.topbar .container{
  display:flex; align-items:center; justify-content:center;
  gap:10px var(--s3); min-height:38px; flex-wrap:wrap; text-align:center;
  padding-block:7px;
}
.topbar__item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar__item svg{ width:13px; height:13px; color:#E9A2AE; flex:none; }
.topbar a{ text-decoration:none; }
.topbar a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.topbar__sep{ display:none; }
@media (min-width:640px){ .topbar__sep{ display:inline; opacity:.3; } }

/* No celular a barra fica em 1 linha: só a nota e o Instagram.
   ATENÇÃO: este bloco precisa vir DEPOIS de `.topbar__item{display:inline-flex}`.
   Media query não aumenta especificidade — as duas regras empatam em (0,1,0) e
   quem estiver por último no arquivo vence. */
@media (max-width:639px){
  .topbar{ font-size:.72rem; }
  .topbar .container{ justify-content:space-between; gap:8px; padding-block:6px; }
  .topbar__item--crm,.topbar__item--tel{ display:none; }
}

/* Instagram no canto superior direito */
.topbar__social{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 12px; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-full);
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.topbar__social svg{ width:14px; height:14px; flex:none; }
.topbar__social:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff; text-decoration:none !important; }
@media (min-width:1024px){
  .topbar .container{ justify-content:flex-start; }
  .topbar__social{ margin-left:auto; }
}

/* ---------- 7. HEADER ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,242,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.header.is-stuck{ border-bottom-color:var(--navy-100); box-shadow:var(--shadow-sm); }
.header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); min-height:70px;
}
@media (min-width:900px){ .header .container{ min-height:78px; } }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand__mark{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:var(--navy-900); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.02rem; font-weight:600; letter-spacing:-.02em;
}
.brand__mark svg{ width:20px; height:20px; color:#E9A2AE; }
.brand__name{ font-family:var(--font-display); font-size:1.06rem; font-weight:600; color:var(--navy-900); line-height:1.15; letter-spacing:-.01em; }
.brand__role{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-500); }

/* 7 itens não cabem em 1024px (o conteúdo do header chegava a 1110px e o
   "Cardio Esporte" quebrava em duas linhas). Breakpoint subido para 1120px
   e gap reduzido — abaixo disso o menu hambúrguer dá conta, já que ele
   lista todas as seções. */
.nav{ display:none; }
@media (min-width:1120px){
  .nav{ display:flex; align-items:center; gap:22px; }
}
.nav a{
  position:relative; text-decoration:none; font-size:.86rem; font-weight:500;
  color:var(--ink-700); padding-block:6px; white-space:nowrap;
  transition:color var(--t);
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--accent); transition:right var(--t);
}
.nav a:hover{ color:var(--navy-900); }
.nav a:hover::after{ right:0; }

.header__cta{ display:none; }
@media (min-width:640px){ .header__cta{ display:inline-flex; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px; border:1px solid var(--navy-200);
  border-radius:var(--r-sm); background:transparent; cursor:pointer;
}
.burger span{ display:block; height:1.5px; background:var(--navy-900); transition:transform var(--t), opacity var(--t); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (min-width:1120px){ .burger{ display:none; } }

/* especificidade elevada: .mobile-nav também usa .container, e
   `.header .container{display:flex}` venceria um `.mobile-nav{display:none}` simples */
.header .mobile-nav{
  display:none; border-top:1px solid var(--navy-100);
  background:var(--cream); padding-block:var(--s2) var(--s4);
}
.header .mobile-nav.is-open{ display:block; }
@media (min-width:1120px){ .header .mobile-nav{ display:none !important; } }
.mobile-nav a{
  display:block; text-decoration:none; font-size:1rem; font-weight:500;
  color:var(--navy-900); padding:13px 2px; border-bottom:1px solid var(--navy-100);
}
.mobile-nav .btn{ width:100%; margin-top:var(--s3); }

/* ---------- 8. HERO ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(44px,7vw,86px) clamp(52px,8vw,96px); }
.hero::before{
  content:''; position:absolute; inset:-20% -30% auto auto;
  width:min(760px,90vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 60% 40%, rgba(201,49,74,.09), transparent 62%);
  pointer-events:none;
}
.hero__grid{ display:grid; gap:clamp(36px,5vw,64px); position:relative; }
@media (min-width:960px){
  .hero__grid{ grid-template-columns:1.06fr .94fr; align-items:center; }
}
.hero h1{ margin-bottom:var(--s3); }

/* palavra rotativa */
.rotator{
  display:inline-grid; vertical-align:bottom;
  color:var(--accent); font-style:italic;
}
.rotator__item{
  grid-area:1/1; opacity:0; transform:translateY(.32em);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.rotator__item.is-active{ opacity:1; transform:none; }

.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-top:var(--s4);
}
.hero__badges{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px solid var(--navy-100);
}
.badge{ display:flex; flex-direction:column; gap:1px; }
.badge__value{ font-family:var(--font-display); font-size:1.24rem; font-weight:600; color:var(--navy-900); line-height:1.1; }
.badge__label{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500); }
.stars{ color:var(--accent); letter-spacing:.06em; }

/* foto do hero */
.hero__figure{ position:relative; }
.photo{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--navy-100),#EDE6DC);
  box-shadow:var(--shadow-lg);
}
.photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.photo--portrait{ aspect-ratio:4/5; }
.photo--wide{ aspect-ratio:3/2; }
/* placeholder enquanto a foto não chega */
.photo__slot{
  position:absolute; inset:0; display:grid; place-content:center; gap:8px;
  text-align:center; padding:var(--s3);
  color:var(--navy-700); background:repeating-linear-gradient(
    45deg, transparent 0 12px, rgba(30,53,94,.045) 12px 24px);
}
.photo__slot svg{ width:34px; height:34px; margin-inline:auto; opacity:.5; }
.photo__slot strong{ font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.photo__slot code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem;
  background:rgba(11,23,48,.07); padding:3px 8px; border-radius:var(--r-sm);
}
.photo:has(img) .photo__slot{ display:none; }

.map{ background:var(--navy-100); }
.map iframe{ width:100%; height:100%; border:0; display:block; }

.hero__card{
  position:absolute; left:-6px; bottom:-22px; z-index:2;
  background:var(--white); border:1px solid var(--navy-100);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:14px 18px; max-width:250px;
}
@media (min-width:960px){ .hero__card{ left:-34px; } }
.hero__card p{ font-size:.8rem; line-height:1.5; color:var(--ink-700); }
.hero__card strong{ display:block; color:var(--navy-900); font-size:.86rem; margin-bottom:2px; }

/* ---------- 9. FAIXA DE HOSPITAIS ---------- */
.strip{ border-block:1px solid var(--navy-100); background:var(--white); }
.strip__grid{ display:grid; gap:var(--s4); }
@media (min-width:900px){ .strip__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s6); align-items:start; } }
.hosp-list{ display:flex; flex-wrap:wrap; gap:10px; }
.hosp{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border:1px solid var(--navy-100); border-radius:var(--r-full);
  font-size:.84rem; font-weight:500; color:var(--navy-800); background:var(--cream);
}
.hosp--now{ border-color:var(--navy-200); background:var(--white); box-shadow:var(--shadow-sm); }
.hosp--now::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
}
.strip__label{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-500); margin-bottom:12px; }

/* ---------- 10. GRIDS GENÉRICOS ---------- */
.grid{ display:grid; gap:var(--s3); }
@media (min-width:640px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:640px){ .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }

.section__head{ max-width:66ch; margin-bottom:clamp(32px,4.5vw,56px); }
.section__head h2{ margin-bottom:var(--s2); }
.section__head--split{ max-width:none; display:grid; gap:var(--s3); }
@media (min-width:960px){
  .section__head--split{ grid-template-columns:1.1fr .9fr; align-items:end; gap:var(--s6); }
}

/* ---------- 11. CARDS ---------- */
.card{
  background:var(--white); border:1px solid var(--navy-100);
  border-radius:var(--r-lg); padding:var(--s4);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--navy-200); }
.card__num{
  font-family:var(--font-display); font-size:.86rem; font-weight:600;
  color:var(--accent); letter-spacing:.06em; display:block; margin-bottom:var(--s2);
}
.card h3{ margin-bottom:10px; }
.card p{ font-size:.94rem; color:var(--ink-700); line-height:1.65; }
.card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--navy-100);
  font-size:.76rem; color:var(--ink-500);
}
.tag{
  display:inline-block; padding:4px 11px; border-radius:var(--r-full);
  background:var(--navy-100); color:var(--navy-700);
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
}
.card__foot{ margin-top:auto; padding-top:var(--s3); }
.card--service{ display:flex; flex-direction:column; }

.dark .card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
.dark .card:hover{ border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07); }
.dark .card p{ color:rgba(255,255,255,.75); }
.dark .card__meta{ border-top-color:rgba(255,255,255,.1); color:rgba(255,255,255,.6); }
.dark .card__num{ color:#E9A2AE; }
.dark .tag{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- 12. SOBRE ---------- */
.about__grid{ display:grid; gap:clamp(36px,5vw,68px); }
@media (min-width:960px){ .about__grid{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.quote{
  border-left:2px solid var(--accent); padding-left:var(--s3);
  margin:0 0 var(--s4);
  font-family:var(--font-display); font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  font-style:italic; font-weight:400; line-height:1.45; color:var(--navy-900);
}
.quote cite{
  display:block; margin-top:14px; font-family:var(--font-body); font-style:normal;
  font-size:.8rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500);
}
.dark .quote{ color:#fff; border-left-color:#E9A2AE; }
.dark .quote cite{ color:rgba(255,255,255,.6); }

.creds{ display:grid; gap:2px; margin-top:var(--s4); border-top:1px solid var(--navy-100); }
.creds li{
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 2px; border-bottom:1px solid var(--navy-100);
  font-size:.92rem; color:var(--ink-700);
}
.creds li::before{
  content:''; flex:none; width:7px; height:7px; margin-top:.55em;
  border-radius:50%; border:1.5px solid var(--accent);
}
.creds strong{ color:var(--navy-900); font-weight:600; }

/* ---------- 12b. CARDIOLOGIA DO ESPORTE (seção de destaque) ---------- */
.esporte{ position:relative; overflow:hidden; }
.esporte::before{
  content:''; position:absolute; inset:-30% auto auto -25%;
  width:min(780px,95vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,49,74,.20), transparent 62%);
  pointer-events:none;
}
.esporte .container{ position:relative; }

.esporte__grid{ display:grid; gap:clamp(36px,5vw,60px); }
@media (min-width:960px){
  .esporte__grid{ grid-template-columns:1.12fr .88fr; align-items:start; }
}
.esporte__aside{ display:grid; gap:var(--s4); }
.esporte__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }

.esporte__facts-title{
  margin-top:clamp(48px,6vw,80px); margin-bottom:var(--s3);
  font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.esporte__facts{ display:grid; gap:var(--s2); }
@media (min-width:768px){ .esporte__facts{ grid-template-columns:repeat(3,1fr); gap:var(--s3); } }
.esporte__facts li{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-lg); padding:var(--s3) var(--s4) var(--s4);
  display:flex; flex-direction:column;
}
.fact__value{
  font-family:var(--font-display); font-size:clamp(1.7rem,1.3rem + 1.5vw,2.2rem);
  font-weight:600; line-height:1.1; color:#E9A2AE; margin-bottom:10px;
}
.esporte__facts p{ font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.78); }
.fact__src{
  margin-top:auto; padding-top:var(--s3);
  font-size:.72rem; line-height:1.5; color:rgba(255,255,255,.5);
}
.esporte__disclaimer{
  margin-top:var(--s3); font-size:.78rem; line-height:1.6;
  color:rgba(255,255,255,.5); max-width:78ch;
}

/* ---------- 12c. ESPIRITUALIDADE NA MEDICINA + LIVRO ---------- */
.espir__grid{ display:grid; gap:clamp(32px,4.5vw,56px); }
@media (min-width:960px){
  .espir__grid{ grid-template-columns:1.1fr .9fr; align-items:start; }
}

.book{
  background:var(--navy-900); color:rgba(255,255,255,.82);
  border-radius:var(--r-lg); padding:var(--s4);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.book::before{
  content:''; position:absolute; inset:0 auto 0 0; width:5px;
  background:linear-gradient(180deg,var(--accent),#E9A2AE);
}
.book__label{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#E9A2AE; margin-bottom:var(--s2);
}
.book__title{
  font-family:var(--font-display); font-size:clamp(1.3rem,1.1rem + .9vw,1.65rem);
  font-weight:500; line-height:1.22; color:#fff; letter-spacing:-.01em;
}
.book__sub{
  font-size:.9rem; font-style:italic; color:rgba(255,255,255,.62);
  margin-top:8px; padding-bottom:var(--s3);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.book__meta{ display:grid; gap:12px; margin-block:var(--s3); }
.book__meta li{ font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.8); }
.book__meta span{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:2px;
}
.book__note{
  font-size:.8rem; line-height:1.6; color:rgba(255,255,255,.6);
  padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.14);
}
.book__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s3); }
.book__actions .btn--ghost{ border-color:rgba(255,255,255,.28); color:#fff; }
.book__actions .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ---------- 13. CHIPS DE CONDIÇÕES ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-block; padding:10px 18px;
  border:1px solid var(--navy-200); border-radius:var(--r-full);
  background:var(--white); font-size:.88rem; font-weight:500; color:var(--navy-800);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.chip:hover{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); transform:translateY(-2px); }

/* ---------- 14. LISTA DE CHECKS ---------- */
.checks{ display:grid; gap:14px; margin-block:var(--s3) var(--s4); }
.checks li{ display:flex; gap:13px; align-items:flex-start; font-size:.96rem; }
.checks svg{ width:19px; height:19px; flex:none; margin-top:.22em; color:var(--accent); }
.dark .checks svg{ color:#E9A2AE; }

/* ---------- 15. AVALIAÇÕES ---------- */
.rating{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
  padding:var(--s3) var(--s4); border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--navy-100); box-shadow:var(--shadow-sm);
  margin-bottom:var(--s4);
}
.rating__score{ font-family:var(--font-display); font-size:2.6rem; font-weight:600; color:var(--navy-900); line-height:1; }
.testimonial{
  background:var(--white); border:1px solid var(--navy-100);
  border-radius:var(--r-lg); padding:var(--s4); position:relative;
  display:flex; flex-direction:column;  /* assinatura ancorada na base do card */
}
.testimonial::before{
  content:'\201C'; position:absolute; top:6px; right:20px;
  font-family:var(--font-display); font-size:5rem; line-height:1;
  color:var(--accent-100); pointer-events:none;
}
.testimonial .stars{ display:block; font-size:.9rem; letter-spacing:.1em; margin-bottom:12px; }
.testimonial p{ font-size:.98rem; color:var(--ink-700); position:relative; }
.testimonial footer{
  display:flex; flex-wrap:wrap; gap:6px var(--s2); align-items:baseline;
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--navy-100);
  font-size:.8rem; color:var(--ink-500);
}
.testimonial p{ margin-bottom:var(--s3); }
.testimonial cite{ font-style:normal; font-weight:600; color:var(--navy-900); }

/* ---------- 16. FAQ ---------- */
.faq{ max-width:840px; }
.faq details{
  border-bottom:1px solid var(--navy-100);
  transition:background var(--t);
}
.faq details[open]{ background:var(--white); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s2) var(--s3) 0; cursor:pointer; list-style:none;
  font-weight:600; font-size:1rem; color:var(--navy-900); line-height:1.45;
}
.faq details[open] summary{ padding-inline:var(--s2); color:var(--accent); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex:none; width:19px; height:19px; margin-top:.15em;
  background:currentColor; transition:transform var(--t);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq__answer{ padding:0 var(--s2) var(--s4); font-size:.96rem; color:var(--ink-700); max-width:72ch; }

/* ---------- 17. CONTATO ---------- */
.contact__grid{ display:grid; gap:var(--s4); }
@media (min-width:960px){ .contact__grid{ grid-template-columns:1fr 1fr; gap:var(--s6); } }
.address{ font-style:normal; font-size:1.02rem; line-height:1.75; color:var(--ink-700); }
.address strong{ display:block; color:var(--navy-900); font-size:1.1rem; margin-bottom:6px; }
.amenities{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s3); }
.amenity{
  display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-500);
  border:1px solid var(--navy-100); border-radius:var(--r-full); padding:7px 14px; background:var(--white);
}
.amenity svg{ width:14px; height:14px; color:var(--accent); flex:none; }

.book-card{
  display:block; text-decoration:none;
  background:var(--white); border:1px solid var(--navy-100); border-radius:var(--r-lg);
  padding:var(--s4); transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.book-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--navy-200); }
.book-card__top{ display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.book-card__icon{
  width:42px; height:42px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; background:var(--navy-100); color:var(--navy-700);
}
.book-card__icon svg{ width:21px; height:21px; }
.book-card--wa .book-card__icon{ background:rgba(37,211,102,.14); color:#0d8a3d; }
.book-card p{ font-size:.92rem; color:var(--ink-700); }
.book-card__note{ display:block; margin-top:12px; font-size:.78rem; color:var(--ink-500); }

/* ---------- 18. CTA FINAL ---------- */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta::before{
  content:''; position:absolute; inset:auto 50% -60% auto; transform:translateX(50%);
  width:min(900px,120vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,49,74,.24), transparent 60%);
}
.cta .container{ position:relative; }
.cta h2{ max-width:19ch; margin-inline:auto; }
.cta .lead{ margin-inline:auto; margin-top:var(--s3); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-top:var(--s4); }
.cta__trust{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:center;
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem; color:rgba(255,255,255,.65);
}

/* ---------- 19. RODAPÉ ---------- */
.footer{ background:var(--navy-800); color:rgba(255,255,255,.72); font-size:.9rem; }
.footer a{ text-decoration:none; color:inherit; transition:color var(--t); }
.footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer__grid{ display:grid; gap:var(--s4); padding-block:clamp(48px,6vw,80px) var(--s5); }
@media (min-width:768px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; gap:var(--s6); } }
.footer h3{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:var(--s2); font-weight:600; }
.footer__links li{ padding-block:5px; }
.footer .brand__name,.footer .brand__mark{ color:#fff; }
.footer .brand__mark{ background:rgba(255,255,255,.1); }
.footer .brand__role{ color:rgba(255,255,255,.5); }
.footer__rqe{ font-size:.8rem; color:rgba(255,255,255,.55); margin-top:var(--s2); line-height:1.7; }

.socials{ display:flex; gap:10px; margin-top:var(--s3); }
.socials a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); transition:background var(--t), border-color var(--t), transform var(--t);
}
.socials a:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; }

.emergency{
  display:flex; gap:13px; align-items:flex-start;
  border:1px solid rgba(233,162,174,.32); background:rgba(201,49,74,.13);
  border-radius:var(--r); padding:16px 18px; margin-bottom:var(--s4);
  font-size:.85rem; line-height:1.6; color:rgba(255,255,255,.86);
}
.emergency svg{ width:19px; height:19px; flex:none; margin-top:.2em; color:#E9A2AE; }
.emergency strong{ color:#fff; }

.footer__legal{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:var(--s4);
  font-size:.78rem; color:rgba(255,255,255,.55); line-height:1.65;
}
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);
  justify-content:space-between; align-items:center; margin-top:var(--s3);
}
.footer__bottom ul{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* ---------- 20. WHATSAPP FLUTUANTE ---------- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px; border-radius:var(--r-full);
  background:var(--wa); color:#08351a; font-weight:600; font-size:.88rem;
  text-decoration:none; box-shadow:0 8px 26px rgba(37,211,102,.4);
  transform:translateY(90px); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease), opacity .4s var(--ease), background var(--t);
}
.wa-float.is-visible{ transform:none; opacity:1; pointer-events:auto; }
.wa-float:hover{ background:#1eb857; }
.wa-float svg{ width:20px; height:20px; flex:none; }
.wa-float span{ display:none; }
@media (min-width:480px){ .wa-float span{ display:inline; } }
@media (min-width:900px){ .wa-float{ right:26px; bottom:26px; } }

/* ---------- 21. REVELAÇÃO AO ROLAR ---------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in:nth-child(2){ transition-delay:.06s; }
.reveal.is-in:nth-child(3){ transition-delay:.12s; }
.reveal.is-in:nth-child(4){ transition-delay:.18s; }

/* ---------- 21b. COMPONENTES DA ROTA /cardiodoesporte ---------- */

/* migalhas de pão */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.78rem; color:var(--ink-500); margin-bottom:var(--s3);
}
.crumbs a{ color:var(--ink-500); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current]{ color:var(--navy-900); font-weight:500; }

/* caixa de destaque */
.callout{
  background:var(--white); border:1px solid var(--navy-100);
  border-left:3px solid var(--accent); border-radius:var(--r);
  padding:var(--s3) var(--s4); margin-bottom:var(--s3);
}
.callout h3{ margin-bottom:10px; }
.callout p{ font-size:.94rem; color:var(--ink-700); line-height:1.65; }
.callout--warn{ border-left-color:var(--navy-700); background:var(--navy-100); }
.callout--dark{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
  border-left-color:#E9A2AE;
}
.callout--dark h3{ color:#fff; }
.callout--dark p{ color:rgba(255,255,255,.78); }

/* lista de evidências */
.ev-list{ display:grid; gap:var(--s2); }
.ev-list li{
  background:var(--white); border:1px solid var(--navy-100); border-radius:var(--r);
  padding:var(--s3); font-size:.93rem; line-height:1.65; color:var(--ink-700);
}
.ev-list strong{ color:var(--navy-900); }
.ev-src{
  display:block; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--navy-100);
  font-size:.74rem; line-height:1.5; color:var(--ink-500);
}

/* cartões de mito */
.myth{
  background:var(--cream); border:1px solid var(--navy-100);
  border-radius:var(--r-lg); padding:var(--s4);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.myth:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--navy-200); }
.myth__label{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:12px;
}
.myth__claim{
  font-family:var(--font-display); font-size:clamp(1.1rem,1rem + .5vw,1.3rem);
  font-style:italic; font-weight:400; line-height:1.4; color:var(--navy-900);
  margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--navy-200);
}
.myth__answer{ font-size:.94rem; color:var(--ink-700); line-height:1.65; }

/* passos numerados */
.steps{ display:grid; gap:var(--s3); counter-reset:step; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(4,1fr); gap:var(--s2); } }
.steps li{
  background:var(--white); border:1px solid var(--navy-100);
  border-radius:var(--r-lg); padding:var(--s4);
  display:flex; flex-direction:column;
}
.steps__num{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; margin-bottom:var(--s2);
  background:var(--navy-900); color:#fff;
  font-family:var(--font-display); font-size:1rem; font-weight:600;
}
.steps h3{ margin-bottom:10px; }
.steps p{ font-size:.92rem; color:var(--ink-700); line-height:1.65; }

/* ---------- 22. PÁGINAS DE TEXTO ---------- */
.prose{ max-width:72ch; }
.prose h2{ font-size:clamp(1.4rem,1.2rem + 1vw,1.8rem); margin-block:var(--s5) var(--s2); }
.prose h2:first-child{ margin-top:0; }
.prose ul{ list-style:disc; padding-left:1.3em; margin-bottom:var(--s2); }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--accent); }

/* ---------- 23. ACESSIBILIDADE / MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .rotator__item{ opacity:0; transform:none; }
  .rotator__item.is-active{ opacity:1; }
  .wa-float{ transform:none; opacity:1; pointer-events:auto; }
}

/* ---------- 24. IMPRESSÃO ---------- */
@media print{
  .header,.topbar,.wa-float,.burger,.mobile-nav,.hero__figure,.cta{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding-block:18pt; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}