/* EngExpose — Curso Start (landing, inscrição pendente, confirmada, curso).
   Complementa site.css (cópia do site principal): só o que é exclusivo destas páginas. */

/* ---------- Preço ---------- */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
.price__old{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);line-height:1;color:var(--text-secondary)}
.price__old s{text-decoration-thickness:3px;text-decoration-color:var(--brand-accent)}
.price__new{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-4xl);line-height:.9;
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.price__note{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}
.start-hero .hero__copy{gap:var(--space-4)}
.start-hero .hero__title{font-size:clamp(3rem,7.4vw,6rem)}
.start-hero .hero__photo{aspect-ratio:1/1}
.start-hero .hero__photo img{object-position:58% center}

/* Botão e nota centralizados em relação ao cartão da oferta */
.offer-wrap{display:grid;gap:var(--space-3);max-width:460px;width:100%}
.offer-wrap .offer{margin-bottom:var(--space-2)}
.offer-wrap .hero__actions{justify-content:center}
.offer-wrap .price__note{text-align:center}

/* ---------- Cartão da oferta: preço + acesso vitalício num só bloco ---------- */
.offer{display:grid;gap:var(--space-4);max-width:460px;padding:var(--space-5) var(--space-5) var(--space-4);border:2px solid transparent;border-radius:var(--radius-lg);
  background:linear-gradient(var(--surface-card),var(--surface-card)) padding-box,var(--gradient-brand) border-box}
.offer__label{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-link)}
.offer .price__new{font-size:var(--text-3xl)}
.offer .price__old{font-size:var(--text-xl)}
.offer__lifetime{display:grid;padding-top:var(--space-4);border-top:1px solid var(--border-default)}
.offer__lifetime p{margin:0;display:grid;gap:2px}
.offer__lifetime strong{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-xl);line-height:1;color:var(--text-primary)}
.offer__lifetime span{font-size:var(--text-sm);line-height:1.45;color:var(--text-secondary)}

/* Selos abaixo da foto do hero: níveis, idades, celular */
.facts{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.facts li{display:flex;align-items:center;gap:var(--space-2);padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-card);font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:1.25;color:var(--text-primary)}
.facts svg{flex:none;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:480px){.facts{gap:var(--space-2)}.facts li{flex-direction:column;text-align:center;padding:12px 8px;font-size:12px}}

/* ---------- O que você recebe ---------- */
.includes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.includes__item{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-5)}
.includes__item strong{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-xl);line-height:1}
.includes__item strong::before{content:"";display:block;width:28px;height:4px;border-radius:2px;background:var(--gradient-brand);margin-bottom:var(--space-3)}
.includes__item p{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5}
.upgrade{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-6);
  padding:var(--space-5);border:1px dashed var(--border-default);border-radius:var(--radius-lg)}
.upgrade p{margin:0;max-width:70ch;color:var(--text-secondary)}
.upgrade strong{color:var(--text-primary)}
@media (max-width:1000px){.includes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.includes{grid-template-columns:1fr}}

/* ---------- Método (4 colunas) ---------- */
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.steps--4 .ee-step{grid-template-columns:1fr;gap:var(--space-2)}
.steps--4 .ee-step__letter{font-size:clamp(3.5rem,6vw,5rem)}
@media (max-width:1000px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps--4{grid-template-columns:1fr}}

/* ---------- Opt-in (janela) ---------- */
.optin{width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:var(--space-6);
  border:2px solid transparent;border-radius:var(--radius-lg);color:var(--text-primary);
  background:linear-gradient(var(--surface-card),var(--surface-card)) padding-box,var(--gradient-brand) border-box}
.optin::backdrop{background:rgba(11,10,22,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.optin[open]{display:grid;gap:var(--space-3)}
.optin__close{position:absolute;top:var(--space-3);right:var(--space-3);width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border-default);background:var(--surface-raised);color:var(--text-primary);font-size:22px;line-height:1}
.optin__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-2xl);line-height:1}
.optin__lead{margin:0;color:var(--text-secondary)}
.optin__form{display:grid;gap:var(--space-4);margin-top:var(--space-2)}
.field{display:grid;gap:6px}
.field label{font-weight:var(--weight-bold);font-size:var(--text-sm)}
.field input{font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);
  background:var(--surface-page);color:var(--text-primary)}
.field input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px}
.field__error{display:none;margin:0;font-size:var(--text-sm);color:var(--state-warning)}
.field.is-invalid input{border-color:var(--state-warning)}
.field.is-invalid .field__error{display:block}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.optin__legal{margin:0;font-size:12px;line-height:1.5;color:var(--text-secondary)}
.optin__form button[disabled]{opacity:.7;cursor:progress}

/* ---------- Páginas de status (pendente, confirmado, curso) ---------- */
.status{padding-block:var(--space-8) var(--space-9)}
.status__inner{max-width:760px;display:grid;gap:var(--space-4);justify-items:start}
.status__icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--gradient-brand)}
.status__icon svg{fill:none;stroke:var(--text-on-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.status__title{font-size:clamp(2.5rem,6.5vw,4.5rem)}
.status__lead{max-width:62ch}
.status__email{color:var(--text-primary);overflow-wrap:anywhere}
.status__help{margin-top:var(--space-4);padding:var(--space-5);border:1px dashed var(--border-default);border-radius:var(--radius-lg);color:var(--text-secondary);width:100%}
.status__help p{margin:0}
.status__help strong{color:var(--text-primary)}
.status__cta{display:grid;gap:var(--space-3);justify-items:start;margin-block:var(--space-3)}
.status__hint{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}

/* Passos da inscrição pendente: a ordem é a sequência que o aluno segue */
.checklist{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-3);width:100%;counter-reset:step}
.checklist li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;column-gap:var(--space-4);row-gap:2px;
  padding:var(--space-5);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.checklist li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg);background:var(--gradient-brand);color:var(--text-on-brand)}
.checklist strong{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-lg);line-height:1.1;align-self:center}
.checklist p{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5}

/* Resumo da página confirmada */
.recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);width:100%;margin-top:var(--space-4)}
.recap__col{padding:var(--space-5);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.recap__title{margin:0 0 var(--space-4);font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-link)}
.routine{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.routine li{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:var(--space-2)}
.routine__letter{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg);
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.routine__min{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);font-variant-numeric:tabular-nums}
@media (max-width:600px){.recap{grid-template-columns:1fr}}

/* ---------- Área do aluno (/start/curso/) ---------- */
.course-hero{padding-block:var(--space-8) var(--space-8)}
.course-hero__inner{display:grid;gap:var(--space-4);justify-items:start}
.course-hero__title{font-size:clamp(2.75rem,7vw,5rem)}
.course-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.course-hero__note{margin:0;font-size:var(--text-sm);color:var(--text-secondary);max-width:62ch}

/* Primeiros passos: a ordem é a sequência que o aluno segue */
.start-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);counter-reset:s}
.start-steps li{counter-increment:s;display:grid;gap:var(--space-2);align-content:start;justify-items:start;padding:var(--space-5)}
.start-steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:var(--space-2);
  background:var(--gradient-brand);color:var(--text-on-brand);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg)}
.start-steps strong{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-xl);line-height:1}
.start-steps p{margin:0 0 var(--space-2);color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5}
@media (max-width:1000px){.start-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.start-steps{grid-template-columns:1fr}}

/* 4 etapas da aula */
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stages li{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-5)}
.stages__tag{justify-self:start;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-link);
  padding:4px 8px;border:1px solid var(--border-default);border-radius:var(--radius-pill)}
.stages strong{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-xl);line-height:1}
.stages p{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5}
@media (max-width:1000px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stages{grid-template-columns:1fr}}

/* Guia de comandos */
.cmd-tools{position:sticky;top:calc(69px + env(safe-area-inset-top,0px));z-index:5;display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--space-3) var(--space-4);
  align-items:end;padding:var(--space-4);margin-bottom:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card)}
.cmd-tools__hint{grid-column:1 / -1;margin:0;font-size:var(--text-sm);color:var(--text-secondary)}
.cmd-empty{color:var(--text-secondary)}
.cmd-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);align-items:start}
.cmd-group{padding:var(--space-5);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.cmd-group__head{display:grid;gap:4px;margin-bottom:var(--space-4)}
.cmd-group__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-xl);line-height:1}
.cmd-group__note{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}
.cmd-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.cmd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-3);align-items:center;padding-top:var(--space-3);border-top:1px solid var(--border-default)}
.cmd:first-child{border-top:0;padding-top:0}
.cmd__code{justify-self:start;font-family:var(--font-mono);font-size:var(--text-md);color:var(--text-primary);background:var(--surface-raised);
  padding:4px 10px;border-radius:var(--radius-sm);overflow-wrap:anywhere;user-select:all}
.cmd__desc{grid-column:1;margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--text-secondary)}
.cmd__copy{grid-column:2;grid-row:1 / span 2;align-self:center;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;
  padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-primary)}
.cmd__copy:hover{border-color:var(--brand-secondary)}
.cmd__link{grid-column:1;justify-self:start;font-size:var(--text-sm);font-weight:var(--weight-bold);text-decoration:none;
  padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--brand-secondary);color:var(--text-primary);
  background:color-mix(in srgb,var(--brand-secondary) 14%,transparent);transition:background .15s,transform .15s}
.cmd__link:hover{background:color-mix(in srgb,var(--brand-secondary) 26%,transparent);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.cmd__link{transition:none}.cmd__link:hover{transform:none}}
.cmd__link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.cmd__copy:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:900px){.cmd-groups{grid-template-columns:1fr}}
@media (max-width:520px){.cmd-tools{grid-template-columns:1fr;position:static}}

/* Ajuda */
.course-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.course-help__card{display:grid;gap:var(--space-3);align-content:start;justify-items:start}
.course-help__card p{margin:0;color:var(--text-secondary);line-height:1.55}
.course-help__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-2xl);line-height:1}
@media (max-width:760px){.course-help{grid-template-columns:1fr}}

/* Aviso "Comando copiado" */
.toast{position:fixed;left:50%;bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  padding:10px 18px;border-radius:var(--radius-pill);background:var(--text-primary);color:var(--surface-page);font-weight:var(--weight-bold);font-size:var(--text-sm)}

[hidden]{display:none!important}

/* Escada de níveis na área do aluno: A1–B2 incluídos no Start, C1–C2 em cinza */
.levels-legend{list-style:none;margin:0 0 var(--space-5);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--text-secondary)}
.levels-legend li{display:flex;align-items:center;gap:var(--space-2)}
.levels-legend__swatch{width:22px;height:12px;border-radius:3px}
.levels-legend__swatch--in{background:var(--gradient-brand)}
.levels-legend__swatch--out{background:var(--border-default)}
#niveis .level.is-out .level__bar,#niveis .level.is-out .level__hours::before{background:var(--border-default)}
#niveis .level.is-out .level__code,#niveis .level.is-out .level__name{color:var(--text-secondary)}

/* Guia de aula: a sequência de comandos para estudar cada unidade (a ordem importa) */
.cmd-tools--guide{position:static;grid-template-columns:160px minmax(0,1fr);align-items:center}
.cmd-tools--guide .cmd-tools__hint{grid-column:auto}
.lesson-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);counter-reset:ls}
.lesson-step{counter-increment:ls;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:var(--space-3) var(--space-4);
  padding:var(--space-4) var(--space-5);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.lesson-step::before{content:counter(ls);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--gradient-brand);color:var(--text-on-brand);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg)}
.lesson-step__body{display:grid;gap:2px;min-width:0}
.lesson-step__body strong{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-lg);line-height:1.1}
.lesson-step__body p{margin:0;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.45}
.lesson-step__body .cmd__link{margin-top:var(--space-2)}
.lesson-step .cmd__copy{grid-column:auto;grid-row:auto}
.lesson-daily{margin:0;max-width:58ch;padding-left:var(--space-4);border-left:3px solid var(--brand-secondary);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-primary)}
.lesson-note{margin:var(--space-5) 0 0;color:var(--text-secondary);max-width:70ch}
.lesson-note code{font-family:var(--font-mono);background:var(--surface-raised);padding:1px 6px;border-radius:4px;color:var(--text-primary)}
@media (max-width:700px){
  .lesson-step{grid-template-columns:44px minmax(0,1fr);row-gap:var(--space-2)}
  .lesson-step .cmd__code{grid-column:2}
  .lesson-step .cmd__copy{grid-column:2;justify-self:start}
}
@media (max-width:520px){.cmd-tools--guide{grid-template-columns:1fr}}