/* SimClinic — CSS das páginas de recursos (detalhe por seção).

   FIX(UI-P17): o design system (tokens, reset, barra do topo, botões) saiu
   daqui para `base.css`, que a landing também carrega — era uma cópia, e a
   cópia já tinha começado a divergir. Abaixo fica o que é próprio destas
   páginas: a escala tipográfica de leitura corrida (menor que a da capa), o
   `.brand` como link (na LP é um `<div>`, aqui é um `<a>`) e os blocos de
   mockup e de detalhe. As páginas carregam base.css ANTES deste arquivo. */

/* ---------- escala tipografica das paginas de recursos (leitura) ---------- */
h1,h2,h3 { line-height:1.1; letter-spacing:-0.02em; text-wrap:balance; margin:0; font-weight:800; }
h1 { font-size:clamp(2.1rem,5vw,3.4rem); }
h2 { font-size:clamp(1.7rem,3.4vw,2.5rem); }
h3 { font-size:1.35rem; letter-spacing:-0.02em; }
.nav-links { gap:22px; }
/* aqui a marca e um link para a home; na LP e um <div> e nao precisa disto */
.brand { text-decoration:none; }

/* detail hero */
.dhero { position:relative; overflow:hidden; padding:clamp(40px,6vw,72px) 0 clamp(30px,4vw,44px); }
.dhero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(55% 60% at 88% 6%,rgba(15,169,114,.14),transparent 70%); }
.dhero .wrap { position:relative; z-index:1; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; color:var(--accent-deep); text-decoration:none; margin-bottom:20px; }
.back-link:hover { text-decoration:underline; }
.dhero h1 { margin:14px 0 0; max-width:18ch; }
.dhero .lede { margin-top:18px; font-size:1.18rem; color:var(--ink-soft); max-width:56ch; }
.dhero .lede .serif { font-family:var(--serif); font-style:italic; color:var(--ink); }

/* section base */
section { padding:clamp(30px,4vw,48px) 0; }
.sec-head { max-width:62ch; margin-bottom:34px; }
.sec-head h2 { margin-top:12px; }
.sec-head p { margin-top:14px; color:var(--ink-soft); font-size:1.06rem; }

/* feature detail blocks (texto + exemplo + visual, alternando) */
.fb { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:40px 0; border-top:1px solid var(--line); }
.fb:first-of-type { border-top:none; }
.fb-idx { font-family:var(--serif); font-style:italic; color:var(--accent-deep); font-size:1.05rem; }
.fb-text h3 { margin:8px 0 12px; }
.fb-text > p { color:var(--ink-soft); font-size:1.02rem; }
.fb ul { margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.fb li { position:relative; padding-left:24px; font-size:.96rem; color:var(--ink-soft); }
.fb li::before { content:""; position:absolute; left:2px; top:.5em; width:12px; height:12px; border-radius:50%; background:var(--mint); border:2px solid var(--accent); }
.example { margin-top:18px; background:var(--mint); border:1px solid var(--mint-2); border-left:3px solid var(--accent); border-radius:10px; padding:13px 15px; font-size:.95rem; color:var(--ink-soft); }
.example b { color:var(--accent-deep); }
@media (max-width:820px){ .fb { grid-template-columns:1fr; gap:24px; padding:32px 0; } .fb-visual { order:2; } .fb:nth-child(even) .fb-visual { order:2; } }
@media (min-width:821px){ .fb:nth-child(even) .fb-visual { order:-1; } }

/* closing CTA */
.cta { text-align:center; }
.cta h2 { max-width:22ch; margin:0 auto; }
.cta p { margin:16px auto 0; max-width:52ch; color:var(--ink-soft); font-size:1.08rem; }
.cta-row { margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.more-links { margin-top:40px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.more-links a { font-size:.9rem; font-weight:600; color:var(--accent-deep); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:var(--card); }
.more-links a:hover { border-color:var(--accent); }

footer { border-top:1px solid var(--line); padding:30px 0 44px; color:var(--muted); font-size:.85rem; }
.foot-in { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }

/* ---------- mockups (iguais aos da landing) ---------- */
.phone { position:relative; background:var(--card); border:1px solid var(--line); border-radius:26px; padding:18px 16px 20px; box-shadow:0 30px 60px -30px rgba(16,48,42,.45),0 2px 0 rgba(255,255,255,.6) inset; }
.phone-top { display:flex; align-items:center; gap:10px; padding:4px 6px 14px; border-bottom:1px solid var(--line); }
.avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); display:grid; place-items:center; color:#fff; font-weight:800; }
.phone-top .who { font-weight:700; font-size:.95rem; }
.phone-top .stat { font-size:.74rem; color:var(--accent-deep); font-weight:600; }
.chat { display:flex; flex-direction:column; gap:9px; padding:16px 4px 4px; }
.bubble { max-width:82%; padding:9px 13px; border-radius:16px; font-size:.9rem; line-height:1.42; }
.bubble.in { align-self:flex-start; background:var(--mint); color:var(--ink); border-bottom-left-radius:5px; }
.bubble.out { align-self:flex-end; background:var(--ink); color:#eafff5; border-bottom-right-radius:5px; }
.bubble .t { display:block; font-size:.66rem; opacity:.6; margin-top:4px; text-align:right; }
.badge-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; padding:0 4px; }
.chip { font-size:.72rem; font-weight:600; color:var(--accent-deep); background:var(--mint); border:1px solid var(--mint-2); padding:4px 9px; border-radius:999px; }

.browser { --abg:#F7FAF8; --acard:#FFFFFF; --abord:#E5EBE7; --atext:#14322B; --amut:#5E706A; --adim:#8A9994; --aem:#0FA972; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--abg); box-shadow:0 26px 54px -30px rgba(16,48,42,.28); margin:0; }
.bbar { display:flex; align-items:center; gap:10px; padding:9px 13px; background:#EEF3F0; border-bottom:1px solid var(--abord); }
.bdots { display:flex; gap:6px; }
.bdots i { width:10px; height:10px; border-radius:50%; display:block; }
.bdots i:nth-child(1){ background:#f56565; } .bdots i:nth-child(2){ background:#f5b544; } .bdots i:nth-child(3){ background:#2fb85f; }
.burl { margin:0 auto; font-size:.7rem; color:var(--adim); background:var(--abg); border:1px solid var(--abord); border-radius:6px; padding:3px 12px; letter-spacing:.02em; }
.bbody { padding:16px; color:var(--atext); font-size:.82rem; }
.browser .dim { color:var(--adim); }
.ag-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.ag-legend { display:flex; gap:12px; font-size:.7rem; color:var(--amut); }
.ag-legend span { display:inline-flex; align-items:center; gap:5px; }
.ag-legend i { width:9px; height:9px; border-radius:3px; display:block; }
.d-part,.ev.part::before{ background:var(--aem); } .d-conv,.ev.conv::before{ background:#5b9bff; } .d-tele,.ev.tele::before{ background:#a889ff; }
.ag-grid { display:grid; grid-template-columns:38px repeat(4,1fr); gap:6px; }
.ag-col { display:grid; grid-template-rows:20px repeat(4,34px); gap:6px; }
.ag-time span { font-size:.66rem; color:var(--adim); display:flex; align-items:center; }
.ag-day { font-size:.72rem; font-weight:700; color:var(--amut); text-align:center; }
.ag-col:not(.ag-time) > span:not(.ag-day) { background:#F1F5F2; border:1px solid #E5EBE7; border-radius:7px; }
.ev { position:relative; display:flex; align-items:center; padding:0 8px 0 16px; border-radius:7px; font-size:.66rem; font-style:normal; color:var(--atext); background:#E6F4EE; border:1px solid #C9E6D8; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ev::before { content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:5px; height:60%; border-radius:3px; }
.ev.conv{ background:#E9F0FB; border-color:#CFE0F5; } .ev.tele{ background:#F1ECFB; border-color:#DED1F3; }
.db-hi { font-size:1.05rem; font-weight:700; margin:0; }
.db-date { margin:1px 0 14px; font-size:.72rem; text-transform:capitalize; }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.kpi { background:var(--acard); border:1px solid var(--abord); border-radius:11px; padding:11px 12px; display:flex; flex-direction:column; gap:2px; }
.klabel { font-size:.68rem; color:var(--amut); } .kval { font-size:1.35rem; font-weight:800; } .khint { font-size:.62rem; color:var(--adim); }
.db-list { background:var(--acard); border:1px solid var(--abord); border-radius:11px; overflow:hidden; }
.db-listhead { font-size:.7rem; color:var(--amut); padding:9px 12px; border-bottom:1px solid var(--abord); }
.db-row { display:flex; align-items:center; gap:9px; padding:9px 12px; border-bottom:1px solid #EEF2F0; }
.db-row:last-child { border-bottom:0; }
.av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; font-weight:700; color:#04120c; flex:none; }
.av1{ background:#7fe6bf; } .av2{ background:#8fc0ff; } .av3{ background:#c6acff; }
.db-info { display:flex; flex-direction:column; flex:1; min-width:0; } .db-info b{ font-size:.76rem; } .db-info small{ font-size:.62rem; }
.pill { font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.pill.green{ background:rgba(18,185,129,.16); color:#0A7A54; } .pill.amber{ background:rgba(214,158,46,.18); color:#8a6516; }
.pill.blue{ background:rgba(91,155,255,.16); color:#2f62b8; } .pill.purple{ background:rgba(168,137,255,.2); color:#6b45c6; }
.scr-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; font-size:.86rem; }
.tr-card { background:var(--acard); border:1px solid var(--abord); border-radius:11px; padding:12px; }
.tr-q { font-size:.72rem; } .tr-a { font-size:.72rem; color:#2C4740; margin:4px 0 10px; }
.tr-lesson { font-size:.72rem; background:#F1F5F2; border:1px solid var(--abord); border-radius:8px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.chart { display:flex; align-items:flex-end; gap:6px; height:74px; margin-top:12px; }
.chart span { flex:1; background:linear-gradient(180deg,#3fce9e,var(--aem)); border-radius:4px 4px 0 0; }
.chart-x { display:flex; gap:6px; margin-top:5px; }
.chart-x span { flex:1; text-align:center; font-size:.56rem; color:var(--adim); }
.tele-rec { display:inline-flex; align-items:center; gap:6px; font-size:.6rem; background:#FBEAEA; border:1px solid #F3D2D2; padding:2px 9px; border-radius:999px; color:#c0433f; margin-bottom:8px; }
.tele-rec i { width:7px; height:7px; border-radius:50%; background:#e5484d; display:block; animation:pulse 1.4s infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }
.tele-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tvid { position:relative; height:104px; border-radius:11px; overflow:hidden; border:1px solid var(--abord); display:flex; align-items:center; justify-content:center; }
.tvid-doc { background:linear-gradient(135deg,#3f7461,#4a6088); } .tvid-pat { background:linear-gradient(135deg,#4a6088,#6b5a86); }
.tav { width:44px; height:44px; animation:breathe 3.6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
.tlabel { position:absolute; left:7px; bottom:6px; font-size:.6rem; color:#fff; background:rgba(0,0,0,.4); padding:2px 7px; border-radius:5px; }
.twave { position:absolute; right:7px; bottom:8px; display:flex; align-items:flex-end; gap:2px; height:15px; }
.twave i { width:3px; height:5px; border-radius:2px; background:rgba(255,255,255,.85); animation:wave 1s ease-in-out infinite; }
.twave i:nth-child(2){ animation-delay:.12s;} .twave i:nth-child(3){ animation-delay:.24s;} .twave i:nth-child(4){ animation-delay:.36s;} .twave i:nth-child(5){ animation-delay:.48s;}
.tvid-pat .twave i { animation-duration:1.3s; }
@keyframes wave{ 0%,100%{ height:4px;} 50%{ height:15px;} }
.soap { margin-top:12px; }
.soap-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:.8rem; }
.soap-f { background:var(--acard); border:1px solid var(--abord); border-radius:9px; padding:8px 10px; margin-bottom:8px; }
.soap-f span { font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--adim); } .soap-f p { margin:3px 0 0; font-size:.74rem; color:#2C4740; }
.caret { display:inline-block; width:2px; height:.85em; background:var(--aem); margin-left:2px; vertical-align:-1px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .tele-rec i,.caret,.tav,.twave i{ animation:none; } html{ scroll-behavior:auto; } }