/* =========================================================================
   M2A ANESTESIA — Interior pages (Sobre, Especialidades, Como funciona, Blog)
   Loads AFTER styles.css. Reuses the same tokens.
   ========================================================================= */

/* solid header for content pages */
.site-header.solid{
  position:fixed;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line);
}
.site-header.solid .logo-white{ display:none; }
.site-header.solid .logo-color{ display:block; }

/* ---------- page hero (navy band) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%);
  color:var(--ink); padding:clamp(140px,15vw,180px) 0 clamp(48px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:""; position:absolute; right:clamp(-80px,-4vw,-20px); top:50%; transform:translateY(-44%);
  width:min(42vw,460px); aspect-ratio:1232/1898;
  background:url("assets/m2a-symbol.png") right center / contain no-repeat;
  opacity:.05; pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.86rem; color:var(--muted); margin-bottom:1.8rem; flex-wrap:wrap; }
.breadcrumb a,.breadcrumb span{ white-space:nowrap; }
.breadcrumb a{ color:var(--ink-soft); transition:color .2s; }
.breadcrumb a:hover{ color:var(--navy); }
.breadcrumb .sep{ opacity:.5; }
.page-hero .eyebrow{ margin-bottom:1.3rem; }
.page-hero h1{ color:var(--ink); font-size:clamp(2.6rem,5vw,4.4rem); margin-bottom:1.4rem; max-width:18ch; }
.page-hero p{ font-size:clamp(1.1rem,1.45vw,1.35rem); color:var(--ink-soft); line-height:1.55; max-width:60ch; }

/* ---------- generic split (text + media) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.split.media-left .split-media{ order:-1; }
.split-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5; }
.split-media.wide{ aspect-ratio:5/4; }
.split-media img,.split-media image-slot{ width:100%; height:100%; object-fit:cover; display:block; }
.split h2{ margin-bottom:1.1rem; }
.split p + p{ margin-top:1rem; }
.split .lead{ color:var(--ink-soft); }

/* ---------- mission / vision / values (editorial) ---------- */
.mvv{ margin-top:clamp(2.6rem,4vw,3.6rem); }
.mvv-row{ display:grid; grid-template-columns:128px minmax(170px,1fr) 2.1fr; gap:clamp(20px,4vw,60px); align-items:start; padding:clamp(28px,3.4vw,46px) 0; border-top:1px solid var(--line); }
.mvv-row:last-child{ border-bottom:1px solid var(--line); }
.mvv-idx{ font-family:var(--font-display); font-size:clamp(2.3rem,3.8vw,3.4rem); font-weight:700; line-height:.85; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mvv-k{ font-family:var(--font-display); font-size:clamp(1.5rem,2.2vw,2.05rem); color:var(--navy); letter-spacing:-.02em; line-height:1.05; }
.mvv-t{ color:var(--ink-soft); font-size:1.06rem; line-height:1.62; max-width:54ch; }
@media (max-width:760px){ .mvv-row{ grid-template-columns:1fr; gap:8px; padding:26px 0; } .mvv-idx{ font-size:2rem; } }

/* ---------- team profiles ---------- */
.team{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:3rem; }
.profile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.profile .photo{ aspect-ratio:1/1; overflow:hidden; background:var(--bg-tint); position:relative; }
.profile .photo img,.profile .photo image-slot{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.profile .info{ padding:28px 30px 32px; }
.profile .role{ font-size:.76rem; font-weight:680; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px; }
.profile h3{ font-size:1.5rem; margin-bottom:.7rem; }
.profile p{ color:var(--ink-soft); font-size:.98rem; }
.profile .crm{ margin-top:16px; font-size:.85rem; color:var(--muted); }

/* ---------- founders (editorial team) ---------- */
.founders{ display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(34px,5vw,76px); align-items:stretch; margin-top:clamp(2.6rem,4vw,3.6rem); }
.founders-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-height:540px; position:relative; }
.founders-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.founders-media .gen{ position:absolute; left:26px; bottom:24px; right:26px; display:flex; align-items:center; gap:14px; color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.founders-media .gen i{ height:1px; flex:1; background:rgba(255,255,255,.55); }
.founders-list{ display:flex; flex-direction:column; justify-content:center; }
.founder{ padding:clamp(22px,3vw,36px) 0; display:grid; grid-template-columns:88px 1fr; gap:clamp(18px,2vw,28px); align-items:start; }
.founder-head{ width:88px; height:88px; border-radius:50%; overflow:hidden; border:1px solid var(--line); background:var(--bg-tint); }
.founder-head img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.founder + .founder{ border-top:1px solid var(--line); }
.founder .role{ font-size:.76rem; font-weight:680; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:12px; }
.founder h3{ font-size:clamp(1.7rem,2.7vw,2.35rem); letter-spacing:-.025em; margin-bottom:.9rem; }
.founder p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.6; margin-bottom:1.2rem; max-width:48ch; }
.founder .creds{ display:flex; flex-wrap:wrap; align-items:center; }
.founder .creds span{ font-size:.84rem; color:var(--muted); position:relative; padding:2px 15px; }
.founder .creds span:first-child{ padding-left:0; }
.founder .creds span:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:13px; background:var(--line); }
@media (max-width:900px){ .founders{ grid-template-columns:1fr; } .founders-media{ min-height:440px; } }

/* ---------- feature list (two-col checks) ---------- */
.features{ display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; margin-top:2.4rem; }
.feature{ display:flex; gap:14px; align-items:flex-start; }
.feature .check{ flex-shrink:0; width:32px;height:32px;border-radius:9px; background:var(--grad-soft); display:grid; place-items:center; color:var(--accent-deep); margin-top:2px; }
.feature .check svg{ width:18px;height:18px; }
.feature b{ color:var(--navy); font-family:var(--font-display); font-weight:600; display:block; margin-bottom:2px; }
.feature span.txt{ color:var(--muted); font-size:.95rem; }

/* ---------- process timeline (vertical, detailed) ---------- */
.timeline{ margin-top:3rem; max-width:860px; }
.tl-item{ display:grid; grid-template-columns:64px 1fr; gap:28px; padding-bottom:38px; position:relative; }
.tl-item:not(:last-child)::before{ content:""; position:absolute; left:31px; top:62px; bottom:-6px; width:2px; background:var(--line); }
.tl-num{ width:62px;height:62px;border-radius:50%; background:var(--grad); color:var(--navy); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.25rem; z-index:1; }
.tl-body h3{ font-size:1.3rem; margin:10px 0 .6rem; }
.tl-body p{ color:var(--ink-soft); }

/* ---------- specialty detail rows (editorial hairline list) ---------- */
.spec-list{ margin-top:3.2rem; border-top:1px solid var(--line); }
a.spec-row{ color:inherit; text-decoration:none; cursor:pointer; }
.spec-row .go{ width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent-deep);flex-shrink:0;transition:.4s var(--ease); }
.spec-row:hover .go{ background:var(--navy); color:#fff; border-color:transparent; transform:translateX(3px); }
.spec-row .go svg{ width:18px;height:18px; }
.spec-row{ display:grid; grid-template-columns:66px 1fr auto; gap:34px; align-items:center; padding:34px 18px; border-bottom:1px solid var(--line); position:relative; transition:padding .4s var(--ease), background .4s var(--ease); }
.spec-row::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--grad); transform:scaleY(0); transform-origin:center; transition:transform .4s var(--ease); }
.spec-row:hover{ background:linear-gradient(90deg, var(--bg-soft) 0%, transparent 72%); padding-left:30px; }
.spec-row:hover::before{ transform:scaleY(1); }
.spec-row .ic{ width:66px;height:66px;border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--accent-deep); transition:.4s var(--ease); }
.spec-row:hover .ic{ background:var(--grad); color:var(--navy); border-color:transparent; }
.spec-row .ic svg{ width:31px;height:31px; }
.spec-row h3{ font-size:1.55rem; margin-bottom:.35rem; letter-spacing:-.02em; }
.spec-row p{ color:var(--muted); font-size:1rem; max-width:56ch; }
.spec-row .tags{ display:flex; flex-wrap:wrap; gap:8px; max-width:280px; justify-content:flex-end; }
.spec-row .tag{ font-size:.8rem; font-weight:560; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }

/* ---------- FAQ ---------- */
.faq{ max-width:840px; margin:3rem auto 0; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:var(--navy); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ flex-shrink:0; width:28px;height:28px;border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:.3s var(--ease); color:var(--accent-deep); }
.faq summary .plus svg{ width:16px;height:16px; transition:transform .3s var(--ease); }
.faq details[open] summary .plus{ background:var(--grad); border-color:transparent; color:var(--navy); }
.faq details[open] summary .plus svg{ transform:rotate(45deg); }
.faq .ans{ padding:0 4px 26px; color:var(--ink-soft); max-width:70ch; }

/* ---------- blog index ---------- */
.blog-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2.4rem; }
.blog-filters .chip{ font-size:.9rem; font-weight:560; padding:.55em 1.1em; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; transition:.25s; }
.blog-filters .chip:hover{ border-color:var(--navy); }
.blog-filters .chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.blog-feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; margin-top:3rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.blog-feature .ph,.blog-feature img{ width:100%; height:100%; min-height:340px; object-fit:cover; }
.blog-feature .bf-body{ padding:clamp(28px,3vw,52px); }
.blog-feature .cat{ font-size:.74rem; font-weight:680; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); }
.blog-feature h2{ font-size:clamp(1.6rem,2.4vw,2.3rem); margin:14px 0 1rem; }
.blog-feature p{ color:var(--ink-soft); margin-bottom:1.6rem; }
.blog-index-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:2.6rem; }

/* ---------- reading progress ---------- */
.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad); z-index:90; transition:width .12s linear; }

/* ---------- article (single post) ---------- */
.article-layout{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:clamp(40px,5vw,76px); align-items:start; max-width:1060px; margin-inline:auto; }
.toc{ position:sticky; top:118px; }
.toc .toc-label{ font-size:.74rem; font-weight:680; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:1px; border-left:1px solid var(--line); }
.toc li a{ display:block; padding:9px 0 9px 18px; margin-left:-1px; border-left:2px solid transparent; font-size:.92rem; color:var(--muted); transition:color .25s, border-color .25s; line-height:1.35; }
.toc li a:hover{ color:var(--navy); }
.toc li a.active{ color:var(--navy); font-weight:600; border-left-color:var(--accent-deep); }
.toc .toc-cta{ margin-top:26px; }
.article{ max-width:740px; margin:0; }
.article .meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--muted); font-size:.9rem; margin-bottom:1.4rem; }
.article .meta .cat{ color:var(--accent-deep); font-weight:680; letter-spacing:.1em; text-transform:uppercase; font-size:.76rem; }
.article-cover{ border-radius:var(--radius-lg); overflow:hidden; margin:2.4rem 0; aspect-ratio:16/9; box-shadow:var(--shadow); }
.article-cover .ph,.article-cover img{ width:100%; height:100%; object-fit:cover; }
.prose{ font-size:1.12rem; line-height:1.72; color:var(--ink-soft); }
.prose > * + *{ margin-top:1.4rem; }
.prose h2{ font-size:1.7rem; margin-top:2.6rem; margin-bottom:.2rem; scroll-margin-top:110px; }
.prose h3{ font-size:1.3rem; margin-top:2rem; }
.prose ul{ padding-left:1.2rem; display:grid; gap:.6rem; }
.prose li::marker{ color:var(--accent-deep); }
.prose strong{ color:var(--navy); }
.prose blockquote{ border-left:3px solid; border-image:var(--grad) 1; padding:.4rem 0 .4rem 1.4rem; font-family:var(--font-display); font-size:1.35rem; color:var(--navy); font-weight:500; line-height:1.35; }
.prose .callout{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; }
.prose .callout p{ margin:0; }
.article-share{ display:flex; align-items:center; gap:14px; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); font-size:.92rem; color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .split{ grid-template-columns:1fr; }
  .split-media{ order:-1; max-width:520px; aspect-ratio:5/4; }
  .mvv{ grid-template-columns:1fr; }
  .team{ grid-template-columns:1fr; }
  .features{ grid-template-columns:1fr; }
  .blog-feature{ grid-template-columns:1fr; }
  .blog-feature .ph,.blog-feature img{ min-height:240px; }
  .blog-index-grid{ grid-template-columns:1fr 1fr; }
  .article-layout{ grid-template-columns:1fr; }
  .toc{ display:none; }
@media (max-width:620px){
  .spec-row{ grid-template-columns:auto 1fr; }
  .spec-row .tags{ display:none; }
  .blog-index-grid{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:48px 1fr; gap:18px; }
  .tl-num{ width:48px;height:48px;font-size:1.05rem; }
  .tl-item:not(:last-child)::before{ left:23px; top:50px; }
}
