/* =============================================================================
   Treinamentos  ·  /treinamentos e /treinamentos/agenda
   O cabeçalho (.pagehead) repete o padrão de página interna já definido na
   página de mailing: fundo --teal-deep, breadcrumb, eyebrow, H1. Sem o hero em
   gradiente, que é exclusivo da home. Só uma folha de CSS carrega por página,
   então as duas cópias das regras de .pagehead nunca se encontram.
   ============================================================================= */
.pagehead{background:var(--teal-deep);color:#eaf6f5;padding:24px 0 48px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.pagehead::before{content:"";position:absolute;top:-120px;right:-100px;width:380px;height:380px;background:radial-gradient(circle,rgba(102,200,198,.13),transparent 70%);border-radius:50%}
.pagehead .wrap{position:relative;z-index:1}
.pagehead .kick.light{color:#66c8c6}
.pagehead h1{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.8vw,58px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin-top:14px;max-width:20ch}
.pagehead h1 .accent{color:var(--amber)}
.pagehead .dek{font-size:clamp(17px,2vw,20px);color:#bcd4d3;margin-top:18px;max-width:62ch;line-height:1.5}
.pagehead .dek b{color:#fff;font-weight:600}
.pagehead .ph-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pagehead .ph-cta .btn-dark{background:#04191A;color:#fff;border:1px solid rgba(255,255,255,.16)}
.pagehead .ph-cta .btn-dark:hover{background:#000;border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.pagehead-proof{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.pagehead-proof span{font-family:var(--disp);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:#9fc4c3;display:flex;align-items:center;gap:8px}
.pagehead-proof span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)}

.breadcrumb{display:flex;align-items:center;gap:9px;font-size:13px;color:#8fb0af}
.breadcrumb a{color:#8fb0af}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.55}
.breadcrumb .cur{color:#cfe3e2}

/* ---- [1] por que existe --------------------------------------------------- */
.tr-why{padding:76px 0}
.tr-why h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-top:14px;max-width:20ch}
.tr-why h2 em{font-style:italic;color:var(--teal)}
.tr-why .dek{font-size:18px;color:var(--muted);line-height:1.6;margin-top:16px;max-width:66ch}
/* "Ideal para quem": lista curta de reconhecimento — a pessoa se acha numa
   linha e entende que o treinamento é para ela. */
.tr-ideal{margin-top:40px;padding:28px 32px;border-radius:16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);max-width:64ch}
.tr-ideal h3{font-family:var(--disp);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:16px}
.tr-ideal ul{list-style:none;display:grid;gap:12px}
.tr-ideal li{position:relative;padding-left:30px;font-size:17px;color:var(--ink);line-height:1.5}
.tr-ideal li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:9px;border-left:2.4px solid var(--teal);border-bottom:2.4px solid var(--teal);transform:rotate(-45deg)}

/* ---- [2] o ritmo da semana ------------------------------------------------ */
.tr-ritmo{background:var(--hd);color:#eaf6f5;padding:70px 0}
.tr-ritmo h2{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.2vw,38px);color:#fff;margin-top:14px}
.tr-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px;max-width:820px}
.tr-slot{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:26px;background:rgba(255,255,255,.03)}
.ts-dia{font-family:var(--disp);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#66c8c6}
.ts-hora{font-family:var(--disp);font-weight:800;font-size:38px;line-height:1;color:#fff;margin-top:8px}
.tr-slot p{font-size:15px;color:#bcd4d3;margin-top:12px;line-height:1.5}
.tr-conduz{margin-top:26px;font-size:15px;color:#bcd4d3}
.tr-conduz b{color:#fff}

/* ---- [3] como entrar ------------------------------------------------------ */
.tr-passos{padding:76px 0;background:var(--surface)}
.tr-passos h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-top:14px}
.tr-passos h2 em{font-style:italic;color:var(--teal)}
.tr-steps{list-style:none;counter-reset:tr;display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:44px;max-width:900px}
.tr-steps li{counter-increment:tr;position:relative;padding-top:52px}
.tr-steps li::before{content:counter(tr);position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--disp);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.tr-steps h3{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.2;color:var(--ink);margin-bottom:9px}
.tr-steps p{font-size:15.5px;color:var(--muted);line-height:1.6}
.tr-steps p b{color:var(--ink);font-weight:600}
/* a privacidade da lista de participantes é exigência do brief, não detalhe */
.tr-priv{display:flex;gap:15px;align-items:flex-start;margin-top:40px;padding:22px 24px;border-radius:14px;background:rgba(0,107,110,.07);border:1px solid rgba(0,107,110,.2)}
.tr-priv svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.tr-priv p{font-size:15.5px;color:var(--muted);line-height:1.58}
.tr-priv b{color:var(--ink)}

/* ---- [4] fecho ------------------------------------------------------------ */
.tr-final{background:var(--teal);color:#fff;padding:66px 0;text-align:center}
.tr-prox-k{font-family:var(--disp);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;color:#9fe0de}
.tr-prox{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.08;margin-top:10px}
.tr-final h2{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.1}
.tr-final p{font-size:17px;color:#d6efee;margin-top:12px}
.tr-final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.tr-final .btn-teal{background:#fff;color:var(--teal)}
.tr-final .btn-teal:hover{background:var(--amber);color:#082A2B}
.tr-final .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.tr-final .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---- agenda (área logada) ------------------------------------------------- */
.tr-agenda{padding:56px 0 80px}
/* aviso honesto de que a inscrição pelo site ainda não está ligada */
.tr-aviso{display:flex;gap:16px;align-items:flex-start;padding:24px 26px;border-radius:14px;background:rgba(255,201,77,.11);border:1px solid rgba(255,201,77,.42);margin-bottom:34px}
.tr-aviso svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke:#9a6a00;stroke-width:1.8;stroke-linecap:round;margin-top:2px}
.tr-aviso b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:7px}
.tr-aviso p{font-size:15.5px;color:var(--muted);line-height:1.58;max-width:70ch}
.tr-aviso-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
/* .btn-ghost do skin e branco (nasceu para fundo escuro): sobre o aviso claro
   ele some, entao aqui vira contorno escuro. */
.tr-aviso-cta .btn-ghost{color:var(--ink);border-color:rgba(21,32,31,.26)}
.tr-aviso-cta .btn-ghost:hover{border-color:var(--ink);background:rgba(21,32,31,.06)}
.tr-vazio{padding:34px 26px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:16px}

.tr-lista{list-style:none;display:grid;gap:14px}
.tr-item{display:grid;grid-template-columns:84px 1fr auto;gap:22px;align-items:center;padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.16s}
.tr-item:hover{border-color:rgba(0,107,110,.3)}
.tr-item.is-lotada{opacity:.62}
.tr-data{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0;border-radius:12px;background:var(--teal);color:#fff}
.td-dia{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1}
.td-mes{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.1em;margin-top:3px;color:#9fe0de}
.tr-info h3{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--ink);line-height:1.2}
.tr-quando{font-size:14.5px;color:var(--teal);font-weight:600;margin-top:5px}
.tr-desc{font-size:14.5px;color:var(--muted);margin-top:7px;line-height:1.55;max-width:62ch}
.tr-acao{display:flex;flex-direction:column;align-items:flex-end;gap:11px}
.tr-tag{font-family:var(--disp);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--teal);background:rgba(0,107,110,.1);border-radius:999px;padding:6px 13px;white-space:nowrap}
.tr-tag.lot{color:#9a3b32;background:rgba(198,54,43,.1)}

@media(max-width:980px){
  .tr-steps{grid-template-columns:1fr}
  .tr-steps li{padding-top:0;padding-left:56px}
  .tr-steps li::before{top:-2px}
}
@media(max-width:700px){
  .tr-why,.tr-passos{padding:52px 0}
  .tr-ideal{padding:24px 22px}
  .tr-slots{grid-template-columns:1fr}
  .tr-item{grid-template-columns:64px 1fr;gap:16px}
  .tr-acao{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .td-dia{font-size:24px}
  .pagehead-proof{gap:8px 16px}
}

/* ---- inscrição dentro do card --------------------------------------------- */
.tr-item{align-items:start}
.tr-data,.tr-info,.tr-acao{align-self:center}
.tr-tag.ok{color:#0a6b4a;background:rgba(14,163,107,.12)}
.tr-btn{white-space:nowrap}
.tr-cancelar{background:none;border:0;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tr-cancelar:hover{color:var(--red)}
.tr-demo{display:inline-block;font-family:var(--disp);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#082A2B;background:var(--amber);padding:3px 9px;border-radius:999px;vertical-align:2px}
.tr-aviso.is-nota{background:rgba(0,107,110,.07);border-color:rgba(0,107,110,.24)}
.tr-aviso.is-nota svg{stroke:var(--teal)}

.tr-form{grid-column:1/-1;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.trf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trf-campo{display:flex;flex-direction:column;gap:6px}
.trf-largo{grid-column:1/-1}
.trf-campo>span{font-family:var(--disp);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.trf-campo>span em{font-style:normal;font-weight:700;color:var(--muted);letter-spacing:.04em}
.trf-campo input,.trf-campo textarea{font-family:var(--font);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;transition:.15s}
.trf-campo input:focus,.trf-campo textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,107,110,.12)}
.trf-campo textarea{resize:vertical;min-height:62px}
/* o e-mail é exibição, não entrada: fica claro que ele vem do cadastro */
.trf-campo.is-fixo input{background:var(--surface);color:var(--muted);cursor:default}
.trf-campo small{font-size:12.5px;color:var(--muted);line-height:1.45}
.trf-acao{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.trf-voltar{background:none;border:0;padding:0;font-size:14px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.trf-voltar:hover{color:var(--ink)}
.trf-erro{font-size:14px;color:#9a3b32;font-weight:600}
.tr-form button[type=submit].is-carregando{opacity:.7;pointer-events:none}

.tr-ok{grid-column:1/-1;margin-top:4px;padding:18px 20px;border-radius:12px;background:rgba(14,163,107,.09);border:1px solid rgba(14,163,107,.28)}
.tr-ok b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:5px}
.tr-ok p{font-size:15px;color:var(--muted);line-height:1.55}
.tr-item.is-inscrito{border-color:rgba(14,163,107,.4)}

@media(max-width:700px){
  .trf-grid{grid-template-columns:1fr}
  .tr-form,.tr-ok{grid-column:1/-1}
}

/* ---- fale com o time de suporte ------------------------------------------- */
.tr-suporte{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.tr-suporte h3{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.4vw,26px);color:var(--ink);margin-bottom:20px}
.trs-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trs-item{display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.16s}
.trs-item:hover{border-color:#25D366;transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(4,25,26,.3)}
.trs-av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--disp);font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center}
.trs-txt{flex:1 1 auto;min-width:0}
.trs-txt b{display:block;font-family:var(--disp);font-weight:800;font-size:16px;color:var(--ink);line-height:1.2}
.trs-txt small{font-size:14px;color:var(--muted)}
.trs-item svg{flex:0 0 auto;width:19px;height:19px;fill:#c3cdcc;transition:.16s}
.trs-item:hover svg{fill:#25D366}
@media(max-width:860px){.trs-lista{grid-template-columns:1fr}}

/* ---- modal "Identifique-se" ------------------------------------------------ */
.ti{position:fixed;inset:0;z-index:210;display:none}
.ti.open{display:block}
.ti-back{position:absolute;inset:0;background:rgba(4,25,26,.72);backdrop-filter:blur(3px)}
.ti-card{position:relative;max-width:460px;margin:10vh auto 0;background:#fff;border-radius:18px;padding:34px 34px 26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
.ti-x{position:absolute;top:14px;right:16px;width:32px;height:32px;border:0;background:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.ti-x:hover{background:var(--surface);color:var(--ink)}
.ti-card h2{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1.15;color:var(--ink);max-width:18ch}
.ti-dek{font-size:15px;color:var(--muted);line-height:1.55;margin:10px 0 22px}
.ti-btn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:16px 18px;border-radius:12px;font-family:var(--disp);font-weight:800;font-size:15px;cursor:pointer;transition:.16s;border:1px solid var(--line);background:#fff;color:var(--ink)}
.ti-btn:hover{border-color:var(--teal);transform:translateY(-1px)}
.ti-btn:disabled{opacity:.6;cursor:default;transform:none}
/* a porta virou um campo (25/09/2026): era uma escolha de botão de login */
.ti-form{display:flex;flex-direction:column;gap:14px}
.ti-campo{display:flex;flex-direction:column;gap:7px}
.ti-campo span{font-family:var(--disp);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ti-campo input{width:100%;padding:15px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font);font-size:16px;color:var(--ink);background:#fff;transition:border-color .16s,box-shadow .16s}
.ti-campo input::placeholder{color:#9db0af}
.ti-campo input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,107,110,.13)}
.ti-btn.is-enviar{background:var(--teal);border-color:var(--teal);color:#fff}
.ti-btn.is-enviar:hover{background:var(--teal-h);border-color:var(--teal-h)}
a.ti-btn{text-decoration:none;box-sizing:border-box}
/* o endereço é uma palavra só de 23 caracteres: sem isto ele quebra em
   "suporte.vip@i-" / "maxpr.com" no card estreito */
.ti-nota b{white-space:nowrap}
.ti-rodape{display:flex;flex-direction:column;gap:5px}
.ti-rodape a{white-space:nowrap}
/* trocar de endereço é caso de uso, não desistência: parece link, não botão */
/* a promessa de que a senha não passa por aqui é o ponto do desenho */
.ti-nota{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.5}
.ti-nota svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.ti-erro{display:block;margin-top:14px;font-size:14px;color:#9a3b32;font-weight:600}
.ti-rodape{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.ti-rodape a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ti-rodape a:hover{color:var(--red)}
body.ti-open{overflow:hidden}
@media(max-width:560px){
  .ti-card{margin:0;min-height:100%;border-radius:0;padding:30px 22px}
}