/* ============================================================================
   TodoCann — skin visual próprio (carregado só quando BRAND=todocann).
   Layer moderno sobre o viora.css: paleta esmeralda, header escuro, hero com
   gradient-mesh + grão, cards premium e micro-interações. Não afeta o Viora.
   ============================================================================ */
:root {
  --tc-ink: #08201A;
  --tc-deep: #062018;
  --tc-deep2: #0A3527;
  --tc-emerald: #0F8F5F;
  --tc-emerald-d: #0B6B48;
  --tc-mint: #2FE6A0;
  --tc-mint-2: #57F0B4;
  --tc-mint-soft: #A9EED0;
  --tc-cream: #F2FBF6;
  --tc-line: #E1EFE8;
  --tc-text: #2C3B34;
  --tc-muted: #5E7268;
  --tc-radius: 20px;
  --tc-shadow: 0 22px 60px -24px rgba(6,40,28,.5);
  --tc-font-d: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --tc-font-b: "Figtree", system-ui, sans-serif;
}

/* Tipografia global da marca */
body { font-family: var(--tc-font-b); background: var(--tc-cream); color: var(--tc-text); }
h1, h2, h3, .tc-sechead h2, .brand { font-family: var(--tc-font-d); letter-spacing: -.02em; }

/* ---- Header escuro (o logo é branco) --------------------------------------- */
.site-header {
  background: rgba(7, 28, 22, .72);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .brand, .site-header .brand:hover { color: #fff; }
.site-header .brand img { height: 34px; }
.nav-links a { color: rgba(255,255,255,.80); font-weight: 500; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.10); }
.nav-auth { border-left-color: rgba(255,255,255,.14); }
.nav-entrar, .nav-entrar:hover { color: #fff; }
.nav-toggle { color: #fff; }
@media (max-width: 900px){
  /* o skin re-aplica backdrop-filter no header; remove no mobile para não
     prender o menu fixed ao header (ver viora.css) */
  .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav { background: var(--tc-deep); border-color: rgba(255,255,255,.1);}
  .nav-links a{ color:#fff; border-color:rgba(255,255,255,.08);}
}

/* Botões da marca */
.tc-btn { display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 22px; border-radius:999px; font-family:var(--tc-font-b); font-weight:700;
  font-size:.96rem; border:1.5px solid transparent; cursor:pointer; line-height:1;
  transition:transform .14s ease, box-shadow .25s ease, background .25s; text-decoration:none; }
.tc-btn .material-symbols-rounded{ font-size:20px; }
.tc-btn--lg{ padding:16px 28px; font-size:1.02rem; }
.tc-btn--primary{ background:linear-gradient(120deg,var(--tc-emerald),var(--tc-mint)); color:#04140E;
  box-shadow:0 12px 30px -8px rgba(47,230,160,.55); }
.tc-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(47,230,160,.65); color:#04140E; }
.tc-btn--glass{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.tc-btn--glass:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); color:#fff; }

/* Eyebrow / cabeçalhos de seção */
.tc-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--tc-font-b);
  font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tc-mint-2); }
.tc-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--tc-mint);
  box-shadow:0 0 0 4px rgba(47,230,160,.18); }
.tc-eyebrow--dark{ color:var(--tc-emerald); }
.tc-eyebrow--dark .dot{ background:var(--tc-emerald); box-shadow:0 0 0 4px rgba(15,143,95,.14); }
.tc-sechead{ max-width:760px; margin:0 auto 44px; text-align:center; }
.tc-sechead h2{ font-size:clamp(1.9rem,4.2vw,3rem); color:var(--tc-ink); line-height:1.06; margin:14px 0 0; }
.tc-sechead h2 em{ font-style:normal; color:var(--tc-emerald); }
.tc-sechead--light h2{ color:#fff; } .tc-sechead--light h2 em{ color:var(--tc-mint); }
.tc-sechead--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; text-align:left; max-width:none; }
.tc-sechead--split h2{ margin-top:12px; }
.tc-subtle{ color:var(--tc-muted); margin:14px 0 0; font-size:1.02rem; }
.tc-link{ display:inline-flex; align-items:center; gap:6px; color:var(--tc-emerald); font-weight:700; white-space:nowrap; }
.tc-link .material-symbols-rounded{ transition:transform .2s; } .tc-link:hover .material-symbols-rounded{ transform:translateX(4px); }

/* ============================ HERO ========================================= */
.tc-hero{ position:relative; overflow:hidden; background:var(--tc-deep);
  color:#EAF7F0; padding:132px 0 96px; margin-top:-1px; }
.tc-hero__mesh{ position:absolute; inset:-20% -10% auto; height:120%; pointer-events:none;
  background:
    radial-gradient(48% 55% at 78% 18%, rgba(47,230,160,.34), transparent 62%),
    radial-gradient(42% 50% at 12% 8%, rgba(15,143,95,.42), transparent 60%),
    radial-gradient(60% 70% at 60% 108%, rgba(10,53,39,.9), transparent 70%); }
.tc-hero__grain{ position:absolute; inset:0; opacity:.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.tc-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }
.tc-hero__copy h1{ font-size:clamp(2.4rem,5.4vw,4.05rem); line-height:1.02; color:#fff; margin:22px 0 0; }
.tc-hero__copy h1 em{ font-style:normal; background:linear-gradient(100deg,var(--tc-mint),var(--tc-mint-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tc-lead{ color:rgba(233,247,240,.82); font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.6; max-width:34em; margin:20px 0 0; }
.tc-hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin:30px 0 0; }
.tc-hero__trust{ list-style:none; display:flex; flex-wrap:wrap; gap:20px; padding:26px 0 0; margin:26px 0 0;
  border-top:1px solid rgba(255,255,255,.1); }
.tc-hero__trust li{ display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:rgba(233,247,240,.9); }
.tc-hero__trust .material-symbols-rounded{ font-size:20px; color:var(--tc-mint); }

/* Palco / spotlight do produto */
.tc-hero__stage{ position:relative; display:grid; place-items:center; min-height:360px; }
.tc-spot{ position:relative; width:min(100%,420px); aspect-ratio:1/1; display:grid; place-items:center; }
.tc-spot__halo{ position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(47,230,160,.55), rgba(15,143,95,.12) 55%, transparent 70%);
  filter:blur(6px); animation:tcPulse 6s ease-in-out infinite; }
.tc-spot img{ position:relative; z-index:1; max-height:82%; max-width:74%; object-fit:contain;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)); animation:tcFloat 7s ease-in-out infinite; }
.tc-spot__chip{ position:absolute; z-index:2; background:rgba(255,255,255,.94); color:var(--tc-ink);
  font-size:.8rem; font-weight:600; padding:8px 13px; border-radius:999px; box-shadow:var(--tc-shadow);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tc-spot__chip b{ color:var(--tc-emerald); }
.tc-spot__chip--a{ top:14%; left:-6%; animation:tcFloat 6s ease-in-out infinite; }
.tc-spot__chip--b{ bottom:22%; right:-8%; animation:tcFloat 6.6s ease-in-out .6s infinite; }
.tc-spot__card{ position:absolute; z-index:2; bottom:2%; left:8%; display:flex; align-items:center; gap:11px;
  background:rgba(9,40,30,.86); border:1px solid rgba(47,230,160,.32); color:#fff; padding:12px 15px;
  border-radius:15px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tc-spot__card .material-symbols-rounded{ color:var(--tc-mint); font-size:26px; }
.tc-spot__card small{ display:block; color:rgba(255,255,255,.7); font-size:.76rem; }

/* ======================= FAIXA DE CONFIANÇA =============================== */
.tc-strip{ background:var(--tc-ink); color:#CFE9DD; }
.tc-strip__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 26px; padding:20px 0; }
.tc-strip__row span{ display:inline-flex; align-items:center; gap:9px; font-size:.86rem; font-weight:600; }
.tc-strip__row .material-symbols-rounded{ font-size:19px; color:var(--tc-mint); }

/* ============================ SEÇÕES ====================================== */
.tc-sec{ padding:92px 0; position:relative; }
.tc-sec--tint{ background:linear-gradient(180deg,#EAF7F0,#F2FBF6); border-block:1px solid var(--tc-line); }
.tc-sec--dark{ background:var(--tc-deep); color:#DDF0E7; overflow:hidden; }
.tc-sec__mesh{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 88% 0%, rgba(47,230,160,.16), transparent 65%),
             radial-gradient(46% 60% at 8% 100%, rgba(15,143,95,.24), transparent 62%); }
.tc-sec--dark .container{ position:relative; z-index:1; }

/* Passos */
.tc-steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
.tc-step{ position:relative; background:#fff; border:1px solid var(--tc-line); border-radius:var(--tc-radius);
  padding:26px 22px 24px; box-shadow:0 1px 0 rgba(6,40,28,.03); transition:transform .22s ease, box-shadow .22s ease; }
.tc-step:hover{ transform:translateY(-5px); box-shadow:var(--tc-shadow); border-color:#CFE7DA; }
.tc-step__n{ font-family:var(--tc-font-d); font-weight:700; font-size:1.5rem;
  background:linear-gradient(120deg,var(--tc-emerald),var(--tc-mint)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tc-step h3{ font-size:1.12rem; color:var(--tc-ink); margin:8px 0 6px; }
.tc-step p{ color:var(--tc-muted); font-size:.94rem; line-height:1.55; margin:0; }
.tc-step::after{ content:""; position:absolute; top:38px; right:-13px; width:26px; height:2px; background:var(--tc-line); }
.tc-step:last-child::after{ display:none; }

/* Produtos */
.tc-prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tc-prod{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--tc-line);
  border-radius:var(--tc-radius); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s; }
.tc-prod:hover{ transform:translateY(-6px); box-shadow:var(--tc-shadow); border-color:#CFE7DA; }
.tc-prod__img{ aspect-ratio:4/3; background:radial-gradient(circle at 50% 40%, #F3FBF6, #E6F4EC);
  display:grid; place-items:center; padding:18px; }
.tc-prod__img img{ max-height:100%; max-width:100%; object-fit:contain; mix-blend-mode:multiply; }
.tc-prod__body{ padding:16px 17px 18px; display:flex; flex-direction:column; flex:1; }
.tc-prod__cat{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tc-emerald); }
.tc-prod__body h3{ font-size:1.02rem; color:var(--tc-ink); margin:5px 0 10px; line-height:1.2; }
.tc-prod__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.tc-chip{ font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; }
.tc-chip--cbd{ background:#E4F6EC; color:#0B6B48; }
.tc-chip--thc{ background:#FBEEE2; color:#9A5B18; }
.tc-prod__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.tc-prod__price{ font-family:var(--tc-font-d); font-weight:700; font-size:1.22rem; color:var(--tc-ink); }
.tc-prod__rx{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--tc-emerald); }
.tc-prod__rx .material-symbols-rounded{ font-size:18px; }
.tc-linha__nota{ margin:28px 0 0; color:var(--tc-muted); font-size:.8rem; line-height:1.55; max-width:860px; }
.tc-prod__go{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--tc-cream); color:var(--tc-emerald); transition:background .2s, color .2s; }
.tc-prod:hover .tc-prod__go{ background:var(--tc-emerald); color:#fff; }

/* Indicações */
.tc-uses{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tc-use{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--tc-line);
  border-radius:14px; padding:16px 18px; font-weight:600; color:var(--tc-ink); transition:transform .18s, border-color .18s; }
.tc-use:hover{ transform:translateY(-3px); border-color:var(--tc-mint); }
.tc-use .material-symbols-rounded{ color:var(--tc-emerald); background:var(--tc-cream); padding:8px; border-radius:11px; font-size:22px; }

/* Diferenciais (dark) */
.tc-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tc-feat{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--tc-radius);
  padding:26px 22px; transition:transform .22s, background .22s, border-color .22s; }
.tc-feat:hover{ transform:translateY(-5px); background:rgba(47,230,160,.08); border-color:rgba(47,230,160,.35); }
.tc-feat .material-symbols-rounded{ font-size:30px; color:var(--tc-mint);
  background:rgba(47,230,160,.12); padding:11px; border-radius:14px; }
.tc-feat h3{ color:#fff; font-size:1.14rem; margin:16px 0 7px; }
.tc-feat p{ color:rgba(221,240,231,.72); font-size:.93rem; line-height:1.55; margin:0; }

/* CTA teleconsulta */
.tc-cta{ padding:12px 0 0; }
.tc-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--tc-emerald-d),var(--tc-emerald) 55%,var(--tc-mint)); color:#04140E;
  border-radius:28px; padding:40px 44px; box-shadow:var(--tc-shadow); position:relative; overflow:hidden; }
.tc-cta__inner::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 120% at 85% 0%, rgba(255,255,255,.28), transparent 60%); }
.tc-cta__inner h2{ font-family:var(--tc-font-d); font-size:clamp(1.5rem,3vw,2.1rem); margin:0; color:#052015; position:relative; }
.tc-cta__inner h2 em{ font-style:normal; }
.tc-cta__inner p{ margin:8px 0 0; color:rgba(5,32,21,.78); font-weight:500; position:relative; }
.tc-cta .tc-btn--primary{ background:#052015; color:var(--tc-mint); box-shadow:0 14px 30px -10px rgba(0,0,0,.5); position:relative; }
.tc-cta .tc-btn--primary:hover{ color:var(--tc-mint-2); }

/* FAQ */
.tc-faq{ max-width:820px; }
.tc-faq__list{ display:flex; flex-direction:column; gap:12px; }
.tc-acc{ background:#fff; border:1px solid var(--tc-line); border-radius:16px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.tc-acc[open]{ border-color:#CFE7DA; box-shadow:var(--tc-shadow); }
.tc-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 22px; font-family:var(--tc-font-d); font-weight:600; color:var(--tc-ink); font-size:1.04rem; }
.tc-acc summary::-webkit-details-marker{ display:none; }
.tc-acc summary .material-symbols-rounded{ color:var(--tc-emerald); transition:transform .25s; flex:none;
  background:var(--tc-cream); border-radius:9px; padding:3px; }
.tc-acc[open] summary .material-symbols-rounded{ transform:rotate(135deg); }
.tc-acc__body{ padding:0 22px 20px; color:var(--tc-muted); line-height:1.6; }

/* ====================== reveal / animações ================================ */
[data-tc]{ opacity:0; transform:translateY(20px); animation:tcIn .8s cubic-bezier(.2,.7,.2,1) forwards; }
[data-tc="1"]{ animation-delay:.04s } [data-tc="2"]{ animation-delay:.12s }
[data-tc="3"]{ animation-delay:.2s } [data-tc="4"]{ animation-delay:.28s }
[data-tc="5"]{ animation-delay:.36s } [data-tc="6"]{ animation-delay:.24s }
@keyframes tcIn{ to{ opacity:1; transform:none } }
@keyframes tcFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes tcPulse{ 0%,100%{ opacity:.85; transform:scale(1) } 50%{ opacity:1; transform:scale(1.05) } }
@media (prefers-reduced-motion: reduce){ [data-tc],.tc-spot img,.tc-spot__halo,.tc-spot__chip{ animation:none!important; opacity:1!important; transform:none!important } }

/* ============================ responsivo ================================== */
@media (max-width: 960px){
  .tc-hero{ padding:112px 0 72px; }
  .tc-hero__grid{ grid-template-columns:1fr; gap:36px; }
  .tc-hero__stage{ order:-1; min-height:300px; }
  .tc-steps,.tc-prods,.tc-uses,.tc-feats{ grid-template-columns:repeat(2,1fr); }
  .tc-step::after{ display:none; }
  .tc-sechead--split{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .tc-steps,.tc-prods,.tc-uses,.tc-feats{ grid-template-columns:1fr; }
  .tc-sec{ padding:64px 0; }
  .tc-cta__inner{ padding:30px 26px; }
}

/* ==========================================================================
   ÁREA INTERNA (portal do paciente / equipe) — reskin do shell base_interno.
   Carregado após o <style> inline azul, então sobrepõe pela ordem da cascata.
   ========================================================================== */
body.painel-interno{ background:var(--tc-cream); font-family:var(--tc-font-b); }

/* Topbar escura esmeralda + barra de acento mint */
.vi-top{ background:linear-gradient(100deg,var(--tc-deep),#0A3527 60%,var(--tc-emerald-d)) !important;
  box-shadow:0 6px 26px -8px rgba(6,32,24,.5) !important; }
.vi-top::after{ background:linear-gradient(90deg,var(--tc-emerald),var(--tc-mint) 55%,var(--tc-mint-2)) !important; }
.vi-brand img{ height:32px; }
.vi-tag{ background:rgba(47,230,160,.16) !important; border-color:rgba(47,230,160,.42) !important; color:var(--tc-mint-soft) !important; }
.vi-nav a{ color:rgba(214,240,229,.82) !important; font-family:var(--tc-font-b); }
.vi-nav a:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
.vi-nav a.on{ background:rgba(47,230,160,.2) !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(47,230,160,.4) !important; }
.vi-nav a.primary{ background:linear-gradient(120deg,var(--tc-emerald),var(--tc-mint)) !important; color:#04140E !important;
  box-shadow:0 6px 16px -4px rgba(47,230,160,.5) !important; }
.vi-nav a.primary:hover{ filter:brightness(1.05); color:#04140E !important; }

/* Migalhas / voltar */
.vi-back{ color:var(--tc-ink) !important; border-color:var(--tc-line) !important; }
.vi-back:hover{ background:#EAF7F0 !important; border-color:#CFE7DA !important; }
.vi-trail a{ color:var(--tc-emerald) !important; }
.vi-trail .cur{ color:var(--tc-ink) !important; }
.vi-main h1{ font-family:var(--tc-font-d); color:var(--tc-ink) !important; letter-spacing:-.02em; }
.vi-main .eyebrow{ color:var(--tc-emerald) !important; }

/* Campos de formulário — foco esmeralda */
.vi-main .form-card{ border-color:var(--tc-line) !important; box-shadow:0 10px 30px -14px rgba(6,40,28,.16) !important; }
.vi-main .form-card .field>label{ color:var(--tc-ink) !important; }
.vi-main .form-card .field input:focus,.vi-main .form-card .field select:focus,.vi-main .form-card .field textarea:focus{
  border-color:var(--tc-emerald) !important; box-shadow:0 0 0 4px rgba(15,143,95,.14) !important; }
.vi-main .order-card{ border-color:var(--tc-line) !important; }
.vi-main .order-card:hover{ box-shadow:var(--tc-shadow) !important; }

/* Dashboard do paciente */
.pdash-hero{ background:linear-gradient(120deg, rgba(6,32,24,.94), rgba(15,143,95,.72)), var(--hero, none) center/cover no-repeat !important; }
.pdash-hero h1{ font-family:var(--tc-font-d); }
.mini-card,.feature-card{ border-color:var(--tc-line) !important; border-radius:16px !important; transition:transform .2s ease, box-shadow .2s ease; }
.mini-card:hover,.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--tc-shadow) !important; border-color:#CFE7DA !important; }
.pdash-stat{ font-family:var(--tc-font-d); color:var(--tc-emerald) !important; }
.icon--green,.icon{ color:var(--tc-emerald); }