/* ==========================================================================
   MÉTODO COLUNA LEVE — sistema de design da landing page
   --------------------------------------------------------------------------
   Derivado da biblioteca de padrões `modelo/design-modelo.html`
   (Site Essencial Rio / Luna Peregrino). A GRAMÁTICA é a mesma:
     · display em serifa com clamp, line-height < 1 e tracking negativo
     · kicker em caixa alta, peso 800, tracking 0.2em
     · réguas e bordas de 1px como único recorte (quase nenhum raio)
     · grades assimétricas (0.84/1.16 · 0.8/1.2 · 0.92/1.1/1)
     · superfícies empilhadas: gradiente + textura pontilhada + imagem
     · transição 500ms cubic-bezier(.22,1,.36,1); chevron 180ms ease
     · breakpoints 1120 / 900 / 640
   O que MUDA em relação ao modelo, de propósito:
     1. Tokens de cor: paleta extraída das fotos e dos vídeos do Studio
        Lovato Pilates (teal da marca, musgo da parede, âmbar do neon).
     2. Escala do corpo de texto AUMENTADA. O modelo usa 9–13px, adequado
        a um portfólio. Esta é uma página de venda para mulheres de 30 a 55
        anos com dor: corpo a 17px, lead a 20px. Legibilidade vence estilo.
   ========================================================================== */

/* --------------------------------------------------------------- fontes -- */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/garamond-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/garamond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------- tokens -- */
:root{
  /* superfícies claras — da parede verde clara do studio (#E4F0DE) */
  --cl-paper:#f4f7ef;
  --cl-paper-deep:#e8efdf;
  --cl-shell:#eef3e6;
  --cl-card:#fbfcf8;

  /* tinta — verde-preto, não preto puro */
  --cl-ink:#0e1a14;
  --cl-ink-soft:#1b2b22;
  --cl-muted:#4f6058;

  /* teal da marca — cor da logo, do uniforme e do magic circle */
  --cl-teal:#00666c;
  --cl-teal-deep:#004a50;
  --cl-teal-bright:#0b8e90;
  --cl-mist:#a9cfd0;
  --cl-mist-soft:#d5e8e5;

  /* âmbar — derivado do halo do neon do studio (#B99B73), escurecido para contraste */
  --cl-amber:#9c7a42;
  --cl-amber-glow:#e6c8a5;
  /* âmbar de TEXTO: --cl-amber dá 3,38–3,86:1 no kicker (12px/800) sobre os fundos
     claros, abaixo de AA. Este é o mesmo matiz escurecido: 5,0:1 sobre o mais
     escuro dos claros (--cl-paper-deep). Réguas, bordas e numerais seguem no
     --cl-amber original — lá não é texto corrido. (veredito I3) */
  --cl-amber-ink:#7d5f31;

  /* noite — o verde-preto exato do fundo dos vídeos do curso */
  --cl-night:#0b1710;
  --cl-night-soft:#14261c;
  --cl-moss:#182406;
  /* tinta sobre fundo noite, para superfícies escuras que NÃO são
     .cl-block--night (o rodapé). 11,5:1 a secundária. (veredito B3) */
  --cl-night-ink:#eaf2ea;
  --cl-night-ink-2:#c3d0c5;

  /* linhas */
  --cl-line:rgba(28,48,38,.18);
  --cl-line-strong:rgba(28,48,38,.34);
  --cl-line-light:rgba(255,255,255,.14);

  /* tipografia */
  --cl-serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --cl-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* ritmo */
  --cl-gutter:clamp(1.15rem,4vw,3.5rem);
  --cl-block:clamp(3.5rem,7vw,6.5rem);
  --cl-ease:cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--cl-paper);
  color:var(--cl-ink);
  font-family:var(--cl-sans);
  font-size:1.0625rem;      /* 17px */
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
ul,ol{list-style:none;margin:0;padding:0;}
img,video{display:block;max-width:100%;height:auto;}
a{color:inherit;}
button{font:inherit;}
:focus-visible{outline:3px solid var(--cl-ink);outline-offset:4px;}

/* -------------------------------------------------------------- estrutura */
.cl-shell{margin-inline:auto;width:min(100% - 2rem,90rem);}
@media (max-width:640px){.cl-shell{width:100%;}}

.cl-block{padding:var(--cl-block) var(--cl-gutter);position:relative;}
.cl-block--paper{background:var(--cl-paper);}
.cl-block--deep{background:var(--cl-paper-deep);}
.cl-block--shell{background:var(--cl-shell);}
.cl-block--card{background:var(--cl-card);}
.cl-block--night{background:var(--cl-night);color:#eaf2ea;}
.cl-block--line{border-top:1px solid var(--cl-line);}
.cl-block--night + .cl-block--night{border-top:1px solid var(--cl-line-light);}

/* textura pontilhada — a mesma meia-tinta do modelo, re-tintada */
.cl-grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(14,26,20,.16) 0 .7px,transparent .8px);
  background-size:6px 6px;opacity:.5;
}
.cl-block--night.cl-grain::before{
  background-image:radial-gradient(circle,rgba(214,232,214,.5) 0 .7px,transparent .8px);
  opacity:.22;
}
.cl-block > *{position:relative;z-index:1;}

.cl-head{display:grid;gap:1rem;max-width:52rem;margin-bottom:clamp(2rem,4vw,3.25rem);}
.cl-head--center{margin-inline:auto;text-align:center;justify-items:center;}
.cl-head--center .cl-rule{margin-inline:auto;}

/* --------------------------------------------------------- tipografia ---- */
.cl-kicker{
  font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cl-amber);line-height:1.4;
}
.cl-kicker--teal{color:var(--cl-teal);}
.cl-kicker--light{color:var(--cl-amber-glow);}
.cl-kicker--sm{font-size:.6875rem;letter-spacing:.18em;}

.cl-h1{
  font-family:var(--cl-serif);font-size:clamp(2.9rem,5.15vw,5.45rem);
  font-weight:480;letter-spacing:-.045em;line-height:.9;text-wrap:balance;
}
.cl-h1 em{font-style:normal;color:var(--cl-teal);}
.cl-block--night .cl-h1 em,.cl-block--night .cl-h2 em{color:var(--cl-mist);}

.cl-h2{
  font-family:var(--cl-serif);font-size:clamp(2.1rem,4vw,4.1rem);
  font-weight:470;letter-spacing:-.035em;line-height:.97;text-wrap:balance;
}
.cl-h2 em{font-style:normal;color:var(--cl-teal);}
.cl-h2--sm{font-size:clamp(1.9rem,3.5vw,3.3rem);}

.cl-statement{
  font-family:var(--cl-serif);font-size:clamp(1.9rem,4.3vw,4.25rem);
  font-weight:450;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;
}
.cl-numeral{
  font-family:var(--cl-serif);font-size:clamp(3.4rem,6vw,6.2rem);
  font-weight:440;letter-spacing:-.055em;line-height:.85;color:var(--cl-teal);
}
.cl-h3{font-family:var(--cl-serif);font-size:clamp(1.35rem,2vw,1.6rem);font-weight:560;line-height:1.15;}
.cl-h4{font-family:var(--cl-serif);font-size:1.25rem;font-weight:560;line-height:1.25;}

.cl-lead{font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.6;color:var(--cl-ink-soft);}
.cl-block--night .cl-lead{color:rgba(234,242,234,.84);}
.cl-body{font-size:1.0625rem;line-height:1.7;color:var(--cl-muted);}
.cl-block--night .cl-body{color:rgba(234,242,234,.76);}
.cl-sm{font-size:.9375rem;line-height:1.6;color:var(--cl-muted);}
.cl-block--night .cl-sm{color:rgba(234,242,234,.7);}
.cl-fine{font-size:.8125rem;line-height:1.55;color:var(--cl-muted);}
.cl-block--night .cl-fine{color:rgba(234,242,234,.62);}

.cl-rule{display:block;width:3rem;height:1px;background:var(--cl-amber);border:0;}
.cl-block--night .cl-rule{background:var(--cl-amber-glow);}

/* ------------------------------------------------------------- ação ------ */
.cl-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:3.6rem;padding:1rem 2rem;border:1px solid transparent;border-radius:999px;
  background:var(--cl-teal);color:#f3fbf8;
  font-size:1.0625rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;
  box-shadow:0 16px 34px rgba(0,74,80,.22),inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .5s var(--cl-ease),box-shadow .5s var(--cl-ease),transform .5s var(--cl-ease),border-color .5s var(--cl-ease);
}
.cl-cta svg{width:1.15rem;height:1.15rem;flex:0 0 auto;}
.cl-cta:hover{background:var(--cl-teal-deep);box-shadow:0 22px 44px rgba(0,74,80,.3),inset 0 1px 0 rgba(255,255,255,.16);}
.cl-cta:focus-visible{outline:3px solid var(--cl-ink);outline-offset:4px;}
.cl-cta--lg{min-height:4.1rem;font-size:1.15rem;padding-inline:2.5rem;}
.cl-cta--block{display:flex;width:100%;}
.cl-cta--light{background:var(--cl-amber-glow);color:var(--cl-night);box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.4);}
.cl-cta--light:hover{background:#f3dcc2;box-shadow:0 22px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.5);}
@media (prefers-reduced-motion:no-preference){.cl-cta:hover{transform:translateY(-2px);}}

.cl-cta-note{display:flex;align-items:center;gap:.45rem;font-size:.875rem;color:var(--cl-muted);}
.cl-block--night .cl-cta-note{color:rgba(234,242,234,.72);}
.cl-cta-note svg{width:1rem;height:1rem;color:var(--cl-teal);flex:0 0 auto;}
.cl-block--night .cl-cta-note svg{color:var(--cl-mist);}

.cl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;}

/* ---------------------------------------------------------- faixa de prova */
.cl-ribbon{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--cl-amber);border-radius:.35rem;overflow:hidden;
}
.cl-ribbon li{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.35rem;min-height:5rem;}
.cl-ribbon li + li{border-left:1px solid var(--cl-line);}
.cl-ribbon svg{width:1.5rem;height:1.5rem;color:var(--cl-amber);flex:0 0 auto;}
.cl-ribbon strong{display:block;font-family:var(--cl-serif);font-size:1.15rem;font-weight:560;line-height:1.2;color:var(--cl-ink);}
.cl-ribbon span{display:grid;gap:.2rem;font-size:.9375rem;line-height:1.4;color:var(--cl-muted);}
.cl-block--night .cl-ribbon{border-color:var(--cl-amber-glow);}
.cl-block--night .cl-ribbon li + li{border-left-color:var(--cl-line-light);}
.cl-block--night .cl-ribbon svg{color:var(--cl-amber-glow);}
.cl-block--night .cl-ribbon strong{color:#eaf2ea;}
.cl-block--night .cl-ribbon span{color:rgba(234,242,234,.74);}

/* ---------------------------------------------------------------- listas -- */
.cl-list{display:grid;}
.cl-list li{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1rem 1rem 1rem 0;border-top:1px solid var(--cl-line);
  font-size:1.0625rem;line-height:1.55;color:var(--cl-ink-soft);
}
.cl-list svg{width:1.25rem;height:1.25rem;margin-top:.2rem;flex:0 0 auto;color:var(--cl-teal);}
.cl-list--two{grid-template-columns:1fr 1fr;gap:0 2rem;}
.cl-list--no svg{color:#8a9790;}
.cl-block--night .cl-list li{border-top-color:var(--cl-line-light);color:rgba(234,242,234,.86);}
.cl-block--night .cl-list svg{color:var(--cl-mist);}

/* --------------------------------------------------------------- cartões -- */
.cl-cards{display:grid;gap:1.5rem;}
.cl-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cl-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cl-card{
  background:var(--cl-card);border:1px solid var(--cl-line);
  padding:clamp(1.5rem,2.5vw,2rem);display:grid;gap:.8rem;align-content:start;
}
.cl-card__icon{width:2.25rem;height:2.25rem;color:var(--cl-teal);}
.cl-card__icon svg{width:100%;height:100%;}
.cl-block--night .cl-card{background:var(--cl-night-soft);border-color:var(--cl-line-light);}
.cl-block--night .cl-card__icon{color:var(--cl-mist);}

/* passos numerados — a trilha de 5 colunas do modelo, agora vertical/grid */
.cl-steps{display:grid;grid-template-columns:repeat(3,1fr);}
.cl-steps li{padding:1.35rem 1.5rem 1.75rem;display:grid;gap:.5rem;align-content:start;}
.cl-steps li + li{border-left:1px solid var(--cl-line);}
.cl-steps__n{font-family:var(--cl-serif);font-size:1.3rem;color:var(--cl-amber);line-height:1;}
.cl-steps h3{font-family:var(--cl-serif);font-size:1.3rem;font-weight:560;line-height:1.2;
  border-bottom:1px solid var(--cl-amber);display:table;padding-bottom:.25rem;}

/* grade de aulas — painel escuro, igual ao blueprint do modelo */
.cl-plan{background:var(--cl-night);color:#eaf2ea;padding:clamp(1.5rem,3vw,2.25rem);}
.cl-plan ol{display:grid;}
.cl-plan li{
  display:grid;grid-template-columns:2.75rem 1fr;gap:1rem;align-items:start;
  padding:1.1rem 0;border-bottom:1px solid var(--cl-line-light);
}
.cl-plan li:last-child{border-bottom:0;}
.cl-plan__n{font-family:var(--cl-serif);font-size:1.25rem;color:var(--cl-amber-glow);line-height:1.3;}
.cl-plan h3{font-family:var(--cl-serif);font-size:1.3rem;font-weight:540;line-height:1.25;}
.cl-plan p{font-size:.9375rem;line-height:1.6;color:rgba(234,242,234,.74);margin-top:.25rem;}

/* ------------------------------------------------------------- acordeão --- */
.cl-faq{border-top:1px solid var(--cl-amber);}
.cl-faq details{border-bottom:1px solid var(--cl-line);}
.cl-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4rem;padding-block:.9rem;cursor:pointer;list-style:none;
  font-family:var(--cl-serif);font-size:1.3rem;font-weight:540;line-height:1.3;
}
.cl-faq summary::-webkit-details-marker{display:none;}
.cl-faq summary svg{width:1.15rem;height:1.15rem;flex:0 0 auto;color:var(--cl-teal);transition:transform 180ms ease;}
.cl-faq details[open] summary svg{transform:rotate(45deg);}
.cl-faq details > p{font-size:1.0625rem;line-height:1.7;color:var(--cl-muted);padding:0 2.5rem .95rem 0;}
.cl-block--night .cl-faq{border-top-color:var(--cl-amber-glow);}
.cl-block--night .cl-faq details{border-bottom-color:var(--cl-line-light);}
.cl-block--night .cl-faq summary svg{color:var(--cl-mist);}
.cl-block--night .cl-faq details > p{color:rgba(234,242,234,.76);}

/* ---------------------------------------------------------------- preço --- */
.cl-price{
  background:var(--cl-card);border:1px solid var(--cl-line-strong);
  padding:clamp(1.75rem,3.5vw,2.75rem);display:grid;gap:1rem;justify-items:center;text-align:center;
}
.cl-price__from{font-size:1rem;color:var(--cl-muted);}
.cl-price__from s{opacity:.8;}
.cl-price__value{display:flex;align-items:baseline;gap:.4rem;justify-content:center;flex-wrap:wrap;}
.cl-price__x{font-family:var(--cl-serif);font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--cl-teal);}
.cl-price__total{font-size:1rem;color:var(--cl-muted);}
.cl-price__list{display:grid;gap:.55rem;text-align:left;width:100%;margin-top:.5rem;}
.cl-price__list li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem;line-height:1.5;}
.cl-price__list svg{width:1.15rem;height:1.15rem;margin-top:.2rem;flex:0 0 auto;color:var(--cl-teal);}

/* mock de celular — o papel que o mock de navegador tem no modelo */
.cl-phone{
  width:min(17rem,70vw);aspect-ratio:9/19;margin-inline:auto;
  background:var(--cl-night);border:.4rem solid #0a120c;border-radius:1.9rem;
  box-shadow:0 1.5rem 3.5rem rgba(8,20,14,.42);overflow:hidden;position:relative;
}
.cl-phone video,.cl-phone img{width:100%;height:100%;object-fit:cover;}
.cl-phone::before{
  content:"";position:absolute;top:.55rem;left:50%;transform:translateX(-50%);
  width:4.5rem;height:.35rem;border-radius:999px;background:rgba(255,255,255,.22);z-index:2;
}

/* figura com moldura */
.cl-figure{position:relative;border:1px solid var(--cl-line);overflow:hidden;background:var(--cl-paper-deep);}
.cl-figure img{width:100%;height:100%;object-fit:cover;}
.cl-figure--tall{aspect-ratio:3/4;}
.cl-figure--wide{aspect-ratio:16/10;}
.cl-figure figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.15rem;
  background:linear-gradient(to top,rgba(11,23,16,.88),rgba(11,23,16,0));
  color:#eaf2ea;font-size:.875rem;line-height:1.45;
}

/* --------------------------------------------------------------- grades --- */
.cl-split{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;}
.cl-split--hero{grid-template-columns:minmax(22rem,1.08fr) minmax(20rem,.92fr);}
.cl-split--82{grid-template-columns:.8fr 1.2fr;align-items:start;}
.cl-split--28{grid-template-columns:1.2fr .8fr;align-items:start;}
.cl-split--even{grid-template-columns:1fr 1fr;align-items:start;}

/* ---------------------------------------------------------- barra fixa --- */
.cl-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem clamp(.9rem,3vw,1.5rem);
  background:rgba(11,23,16,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--cl-line-light);color:#eaf2ea;
  padding-bottom:max(.75rem,env(safe-area-inset-bottom));
}
.cl-sticky[data-visible="true"]{display:flex;}
.cl-sticky__price{display:grid;gap:.1rem;line-height:1.2;}
.cl-sticky__price strong{font-family:var(--cl-serif);font-size:1.35rem;font-weight:540;}
.cl-sticky__price span{font-size:.75rem;color:rgba(234,242,234,.7);}
.cl-sticky .cl-cta{min-height:3rem;padding:.7rem 1.4rem;font-size:1rem;box-shadow:none;}

/* ------------------------------------------------------------- cabeçalho -- */
.cl-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,247,239,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cl-line);
}
.cl-header__in{
  margin-inline:auto;width:min(100% - 2rem,90rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4.25rem;
}
.cl-brand{display:grid;gap:.1rem;text-decoration:none;}
.cl-brand strong{font-family:var(--cl-serif);font-size:1.3rem;font-weight:540;letter-spacing:.02em;line-height:1;}
.cl-brand span{font-size:.625rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--cl-amber);}
.cl-header .cl-cta{min-height:2.9rem;padding:.6rem 1.35rem;font-size:.9375rem;box-shadow:none;}

/* ---------------------------------------------------------------- rodapé -- */
.cl-footer{background:var(--cl-night);color:rgba(234,242,234,.72);padding:3rem var(--cl-gutter);}
.cl-footer a{color:#eaf2ea;}
.cl-footer__grid{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr;align-items:start;}

/* ----------------------------------------------------------- responsivo -- */
@media (max-width:1120px){
  .cl-split--hero{grid-template-columns:1fr;}
  .cl-steps{grid-template-columns:1fr;}
  .cl-steps li + li{border-left:0;border-top:1px solid var(--cl-line);}
}
@media (max-width:900px){
  .cl-split--82,.cl-split--28,.cl-split--even{grid-template-columns:1fr;}
  .cl-cards--3{grid-template-columns:1fr;}
  .cl-ribbon{grid-template-columns:1fr;}
  .cl-ribbon li + li{border-left:0;border-top:1px solid var(--cl-line);}
  .cl-block--night .cl-ribbon li + li{border-top-color:var(--cl-line-light);}
  .cl-list--two{grid-template-columns:1fr;}
  .cl-footer__grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  body{font-size:1.0625rem;}
  .cl-cards--2{grid-template-columns:1fr;}
  .cl-h1{font-size:clamp(2.4rem,10.5vw,3.2rem);line-height:.95;letter-spacing:-.04em;}
  .cl-h2{font-size:clamp(1.85rem,8.5vw,2.5rem);}
  .cl-statement{font-size:clamp(1.7rem,8vw,2.3rem);}
  .cl-numeral{font-size:3.2rem;}
  .cl-cta{width:100%;}
  .cl-actions{align-items:stretch;flex-direction:column;}
  .cl-faq details > p{padding-right:0;}
}

/* -------------------------------------------------- redução de movimento -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;}
}

/* ------------------------------------------------- revelação ao rolar ---- */
.cl-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--cl-ease),transform .7s var(--cl-ease);}
.cl-reveal[data-shown="true"]{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.cl-reveal{opacity:1;transform:none;}}

/* ==========================================================================
   --- componentes específicos da LP ---
   Acrescentado na implementação do index.html. Só tokens --cl-*, nenhuma cor
   literal nova e nenhuma fonte nova. Mesma gramática: réguas de 1px, grades
   assimétricas, serifa em clamp, kicker em caixa alta.
   ========================================================================== */

/* -------------------------------------------------- medida e ritmo de texto */
/* linhas de no máximo ~65 caracteres: o avatar lê no celular, à noite */
.cl-measure{max-width:34rem;}
.cl-measure--wide{max-width:44rem;}
.cl-measure--center{margin-inline:auto;}
.cl-center{text-align:center;}

.cl-flow{display:grid;gap:1.05rem;align-content:start;}
.cl-flow--air{gap:1.5rem;}
.cl-gap-top{margin-top:clamp(2rem,4vw,3.25rem);}
.cl-closer{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:1.25rem;}
.cl-split .cl-head{margin-bottom:0;}

/* termo do mecanismo (Centro Adormecido / Sequência do Chão) no corpo do texto */
.cl-term{font-style:normal;font-weight:650;color:var(--cl-teal);}
.cl-block--night .cl-term{color:var(--cl-mist);}

/* ------------------------------------------------------------- cabeçalho -- */
.cl-header__meta{margin:0;white-space:nowrap;}
@media (max-width:640px){.cl-header__meta{display:none;}}

/* ------------------------------------------------------------ hero (D1) --- */
.cl-hero-media{position:relative;}
/* .cl-figure--low (object-position) e .cl-phone--contain (object-fit:contain)
   saíram na v2: o hero usa hero-atendimento.webp já recortado em 3/4 (I1) e o
   celular usa preview-celular.mp4, que é 540x1140 = 9/19 exato — o mesmo da
   moldura .cl-phone. Com cover não se perde um pixel e não sobra tarja (I2). */
.cl-hero-media .cl-phone{
  position:absolute;right:-.75rem;bottom:-1.25rem;
  width:min(11.5rem,40%);margin:0;border-width:.3rem;border-radius:1.4rem;
}
@media (max-width:1120px){.cl-hero-media{max-width:34rem;margin-inline:auto;}}
@media (max-width:640px){.cl-hero-media .cl-phone{right:.5rem;bottom:-.75rem;width:8.5rem;}}

/* ------------------------------------------- listas com mais respiro (D2) - */
.cl-list--air li{padding-block:1.4rem;font-size:1.125rem;line-height:1.6;}
@media (min-width:641px){.cl-list--air li{font-size:1.2rem;}}
/* item de peso maior na lista do "não é para você" (proteção legal, D9) */
.cl-list li.cl-list__heavy{font-size:1.125rem;color:var(--cl-ink);}

/* ------------------------------------------------- aviso em caixa discreta */
.cl-note{
  display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.9rem 1rem;align-items:start;
  padding:1.25rem 1.35rem;border:1px solid var(--cl-line);background:var(--cl-shell);
}
.cl-note > svg{width:1.5rem;height:1.5rem;color:var(--cl-amber);}
.cl-note > div{display:grid;gap:.4rem;}
.cl-note--teal{border-color:var(--cl-mist);background:var(--cl-mist-soft);}
.cl-note--teal > svg{color:var(--cl-teal);}
.cl-block--night .cl-note{background:var(--cl-night-soft);border-color:var(--cl-line-light);}
.cl-block--night .cl-note > svg{color:var(--cl-amber-glow);}

/* ------------------------------------------------------- citação destacada */
.cl-quote{
  font-family:var(--cl-serif);font-size:clamp(1.45rem,2.6vw,2.05rem);
  font-weight:450;letter-spacing:-.02em;line-height:1.2;color:var(--cl-ink);
  border-left:1px solid var(--cl-amber);padding-left:1.25rem;
}
.cl-block--night .cl-quote{border-left-color:var(--cl-amber-glow);}

/* ------------------------------- Respirar / Ativar / Mover como grafismo -- */
.cl-triad{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;
  font-family:var(--cl-serif);font-size:clamp(1.7rem,3.4vw,2.7rem);
  font-weight:450;letter-spacing:-.03em;line-height:1;color:var(--cl-teal);
}
.cl-triad li{display:flex;align-items:center;gap:1.25rem;}
.cl-triad li:not(:last-child)::after{
  content:"";width:clamp(1.5rem,4vw,3rem);height:1px;background:var(--cl-amber);
}

/* --------------------------------------------- camadas de benefício (D5) -- */
.cl-layer{display:grid;gap:1.25rem;}
.cl-layer + .cl-layer{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--cl-line);
}
.cl-numeral--sm{font-size:clamp(2.2rem,3.4vw,3rem);}
.cl-card--mark{border-left:3px solid var(--cl-teal);background:var(--cl-paper-deep);}
.cl-block--night .cl-card--mark{border-left-color:var(--cl-mist);}

/* ------------------------------------------------ linha de números (D6) -- */
.cl-ribbon--stat li{min-height:7rem;align-items:flex-start;}
.cl-ribbon--stat strong{
  font-family:var(--cl-serif);font-size:clamp(2rem,3.2vw,2.8rem);
  font-weight:450;letter-spacing:-.035em;line-height:1;margin-bottom:.3rem;
}

/* vídeo em 16:9 (sem recorte) — o preview real da aula */
.cl-videoframe{display:grid;gap:.6rem;}
.cl-videoframe video{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--cl-night);border:1px solid var(--cl-line-light);
}

/* ------------------------------------------------- as 9 aulas (D6) ------- */
/* os nomes reais dos exercícios são a prova: ficam no summary, visíveis
   mesmo com o acordeão fechado e sem JavaScript */
.cl-lessons{border-top:1px solid var(--cl-amber-glow);}
.cl-lesson{border-bottom:1px solid var(--cl-line-light);}
.cl-lesson summary{
  display:grid;grid-template-columns:2.75rem minmax(0,1fr) 1.25rem;gap:0 1rem;
  align-items:start;padding-block:1.15rem;cursor:pointer;list-style:none;
}
.cl-lesson summary::-webkit-details-marker{display:none;}
.cl-lesson__n{font-family:var(--cl-serif);font-size:1.25rem;line-height:1.35;color:var(--cl-amber-glow);}
.cl-lesson__main{
  display:grid;gap:.3rem;margin:0;
  font-family:var(--cl-serif);font-size:clamp(1.3rem,2vw,1.55rem);
  font-weight:540;line-height:1.2;
}
.cl-lesson__ex{
  font-family:var(--cl-sans);font-size:.9375rem;font-weight:400;
  line-height:1.5;color:var(--cl-mist);
}
.cl-lesson summary > svg{
  width:1.25rem;height:1.25rem;margin-top:.4rem;color:var(--cl-mist);
  transition:transform 180ms ease;
}
.cl-lesson[open] summary > svg{transform:rotate(45deg);}
.cl-lesson__body{
  display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);
  gap:1.25rem 1.75rem;align-items:start;padding:0 0 1.6rem;
}
.cl-lesson__body p{max-width:42rem;}
.cl-lesson__body--text{grid-template-columns:minmax(0,1fr);}
@media (max-width:640px){
  .cl-lesson summary{grid-template-columns:2.25rem minmax(0,1fr) 1.1rem;}
  .cl-lesson__body{grid-template-columns:minmax(0,1fr);}
}

/* ------------------------------------- coluna de mídia empilhada (D7/D8) - */
.cl-stack-media{display:grid;gap:1.25rem;}

/* ----------------------------------------------- quatro passos (D8) ------ */
.cl-steps--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1120px){
  .cl-steps--4{grid-template-columns:1fr 1fr;}
  .cl-steps--4 li + li{border-left:1px solid var(--cl-line);border-top:0;}
  .cl-steps--4 li:nth-child(odd){border-left:0;}
  .cl-steps--4 li:nth-child(n+3){border-top:1px solid var(--cl-line);}
}
@media (max-width:640px){
  .cl-steps--4{grid-template-columns:1fr;}
  .cl-steps--4 li + li{border-left:0;border-top:1px solid var(--cl-line);}
}

/* ------------------------------------------------------ oferta (D10) ----- */
.cl-offer{
  background:var(--cl-card);border:1px solid var(--cl-line-strong);
  box-shadow:0 2rem 4.5rem rgba(11,23,16,.14);
  padding:clamp(1.35rem,4vw,3rem);display:grid;gap:clamp(1.75rem,3.5vw,2.75rem);
  max-width:58rem;margin-inline:auto;
}
.cl-offer .cl-price{background:var(--cl-shell);}
.cl-actions--center{justify-content:center;}

/* stack do que está incluído */
.cl-stack{display:grid;margin-top:.9rem;border-top:1px solid var(--cl-line);}
.cl-stack > div{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:.3rem 1.75rem;
  padding:1.05rem 0;border-bottom:1px solid var(--cl-line);align-items:baseline;
}
.cl-stack dt{font-family:var(--cl-serif);font-size:1.2rem;font-weight:560;line-height:1.25;color:var(--cl-ink);}
.cl-stack dd{margin:0;font-size:1rem;line-height:1.55;color:var(--cl-muted);}
@media (max-width:640px){.cl-stack > div{grid-template-columns:1fr;}}

/* lista numerada curta ("o que acontece depois do clique") */
.cl-ol{display:grid;gap:.85rem;counter-reset:cl-ol;}
/* O numerador era grid de duas colunas. Mas o <li> tem conteúdo MISTO —
   um <strong> e texto solto depois dele — e num container grid cada nó vira
   um item: o <strong> ocupava a coluna larga e o parágrafo caía na coluna de
   1.5rem, quebrando uma palavra por linha. Com ::before absoluto o conteúdo
   volta a ser fluxo inline normal e aceita qualquer marcação por dentro. */
.cl-ol li{
  position:relative;padding-left:2.4rem;
  font-size:1rem;line-height:1.55;color:var(--cl-ink-soft);counter-increment:cl-ol;
}
.cl-ol li::before{
  content:counter(cl-ol);position:absolute;left:0;top:0;
  font-family:var(--cl-serif);font-size:1.2rem;
  line-height:1.3;color:var(--cl-teal);
}

/* ----------------------------------------------- fechamento (D12) ------- */
.cl-final{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
  max-width:46rem;margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.cl-final__photo{width:9.5rem;aspect-ratio:3/4;}
.cl-final__copy{display:grid;gap:1.1rem;justify-items:start;}
@media (max-width:640px){
  .cl-final{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .cl-final__copy{justify-items:stretch;width:100%;}
}

/* ---------------------------------------------------------- rodapé ------- */
.cl-footer__links{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:.9375rem;}
.cl-footer__links a{text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------- barra fixa: só no mobile, como previsto */
@media (min-width:901px){.cl-sticky[data-visible="true"]{display:none;}}

/* agrupador das tres camadas de beneficio (D5) */
.cl-layers{display:grid;}

/* ==========================================================================
   ACRÉSCIMO · rodada 2 (v2 da copy + veredito)
   Só tokens --cl-*. Nenhuma cor literal, nenhuma fonte nova, nenhum seletor
   fora de .cl-*. Mesma gramática: réguas de 1px, serifa em clamp, kicker em
   caixa alta.
   --------------------------------------------------------------------------
   1. B3 — o rodapé tem fundo --cl-night mas NÃO é .cl-block--night, então
      .cl-sm/.cl-fine caíam em --cl-muted sobre --cl-night: 2,75:1. O aviso
      médico longo é justamente um .cl-fine.
   2. I3 — .cl-kicker em --cl-amber dá 3,38–3,86:1 nas dobras claras. Passa a
      usar --cl-amber-ink (5,0:1 no pior fundo). Régua, borda do ribbon,
      numerais e .cl-steps__n seguem em --cl-amber: lá não é texto corrido.
   3. I5/I6 — molduras novas para as fotos que a cliente trocou.
   4. Componentes da v2: a conta da dor (2.2), o tapete contido (8) e o
      mockup de celular do passo 3.
   ========================================================================== */

/* ---------------------------------------------------------- B3 · rodapé --- */
.cl-footer .cl-body,
.cl-footer .cl-sm,
.cl-footer .cl-fine{color:var(--cl-night-ink-2);}
.cl-footer .cl-h4{color:var(--cl-night-ink);}

/* enquanto as URLs não existem, os rótulos do rodapé não são links: href="#"
   rolava para o topo e lia como link quebrado (backlog 5) */
.cl-footer__links--soon span{
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
}

/* ---------------------------------------------------------- I3 · kicker --- */
/* precisa vir DEPOIS de .cl-kicker--teal/--light, senão os modificadores
   perdem por ordem de origem */
.cl-kicker{color:var(--cl-amber-ink);}
.cl-kicker--teal{color:var(--cl-teal);}
.cl-kicker--light{color:var(--cl-amber-glow);}
.cl-brand span{color:var(--cl-amber-ink);}

/* ------------------------------------------------- hero · primeira tela --- */
/* regra nº 1 da v2: H1 + virada + alívio na mesma tela em 390x844. A virada
   fica em .cl-lead e o alívio ganha um degrau de tamanho sem custar altura. */
.cl-hero-relief{
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.45;color:var(--cl-ink);
}
@media (max-width:640px){
  .cl-hero{padding-top:clamp(1.75rem,5vw,2.75rem);}
  .cl-hero-copy{gap:1.15rem;}
  .cl-hero-copy .cl-h1{font-size:clamp(2.1rem,8.8vw,2.75rem);}
}

/* ------------------------------------- Dobra 2.1 · ponte para a conta ----- */
.cl-bridge{margin-top:clamp(1.5rem,3vw,2.25rem);}

/* ----------------------------------------- Dobra 2.2 · a conta da dor ----- */
/* checklist com espaço em branco à direita de cada linha: um formulário que
   ela preenche mentalmente. Nenhum valor em reais aqui, em nenhum caso. */
.cl-tally{display:grid;border-top:1px solid var(--cl-line);}
.cl-tally li{
  display:grid;grid-template-columns:.7rem minmax(0,1fr) minmax(3.5rem,8rem);
  gap:0 .9rem;align-items:baseline;padding:1.05rem 0;
  border-bottom:1px solid var(--cl-line);
  font-size:1.0625rem;line-height:1.55;color:var(--cl-ink-soft);
}
.cl-tally li::before{
  content:"";width:.6rem;height:.6rem;align-self:center;
  border:1px solid var(--cl-amber);
}
.cl-tally__blank{border-bottom:1px dashed var(--cl-line-strong);height:1.1rem;}
@media (max-width:640px){
  .cl-tally li{grid-template-columns:.7rem minmax(0,1fr);}
  .cl-tally__blank{grid-column:2;margin-top:.5rem;}
}

/* ------------------------------------- I5 · retrato 2:3 em moldura 4/5 ---- */
/* atendimento-3.webp é 900x1350. Numa moldura 16/10 o cover descartava 58% da
   altura pelo meio e decapitava a cena. 4/5 preserva 83%, e o deslocamento
   sobe o enquadramento para o terço superior, onde está a cabeça. */
.cl-figure--portrait{aspect-ratio:4/5;}
.cl-figure--portrait img{object-position:50% 35%;}

/* ---------------------------- Dobra 8 · o tapete como apoio, não assunto -- */
/* a cliente pediu a tapete-chao.webp menor: ela é apoio e o texto é o
   assunto. Coluna estreita, nunca bloco de meia tela. */
.cl-figure--strip{aspect-ratio:3/4;width:min(14rem,100%);margin-inline-start:auto;}
@media (max-width:900px){.cl-figure--strip{margin-inline:auto;}}

/* mockup de celular com legenda (passo 3: o app com download offline) */
.cl-phonefig{display:grid;gap:.75rem;justify-items:center;align-content:start;}
.cl-phonefig .cl-phone{width:min(14rem,60vw);}
.cl-phonefig figcaption{text-align:center;max-width:22rem;}

/* -------------------------------------- I6 · foto do fechamento (D12) ----- */
/* hero-pricila.webp é 1000x1572 (0,636) na moldura 3/4: centra o rosto no
   terço superior. pricila-circle.webp saiu — foto "fitness", contradiz a copy. */
.cl-final__photo img{object-position:50% 30%;}

/* ------------------------------- hero · primeira tela também no desktop --- */
/* medido: com o padding e a escala originais, o alívio caía em y=878 num
   viewport de 1440x800 — abaixo da dobra, que é exatamente a única forma de
   esta página falhar por design. Aqui o topo respira menos, a H1 perde um
   degrau (continua o maior elemento da página, acima de .cl-h2) e o fluxo
   fecha mais junto. */
@media (min-width:641px){
  .cl-hero{padding-top:clamp(2.5rem,3.5vw,4rem);}
  .cl-hero-copy{gap:1.2rem;}
  .cl-hero-copy .cl-h1{font-size:clamp(2.9rem,4.5vw,4.6rem);}
}

/* ==========================================================================
   AJUSTES FINAIS — preço, âncora riscada e ritmo vertical
   ========================================================================== */

/* âncora de preço riscada + linha de transparência do parcelamento */
.cl-price__anchor{
  font-size:1.0625rem;line-height:1.3;color:var(--cl-muted);
  margin-top:.35rem;
}
.cl-price__anchor s{
  color:var(--cl-muted);text-decoration-thickness:1px;text-underline-offset:2px;
  opacity:.85;
}
.cl-price__fine{
  font-size:.8125rem;line-height:1.5;color:var(--cl-muted);
  max-width:28rem;margin-top:.1rem;
}

/* Ritmo vertical: as dobras estavam com ~104px em cima e embaixo, o que soma
   mais de 200px entre o conteúdo de duas dobras vizinhas. Reduzido para ~72px. */
:root{
  --cl-block:clamp(2.75rem,5vw,4.5rem);
}

/* O hero usava align-items:center, o que fazia a coluna da imagem "descer" e
   começar bem abaixo do kicker e da H1. Alinhado ao topo do bloco de texto. */
.cl-split--hero{align-items:start;}
@media (max-width:1120px){.cl-split--hero{align-items:stretch;}}

/* --------------------------------- microcopy do CTA: um só item de flex --- */
/* .cl-cta-note é flex e cada <span data-preco> virava um item de flex
   independente numa linha sem wrap: o min-content somava todos os pedaços e
   estourava a largura nas telas estreitas (medido: 314px num viewport de
   320px), além de inserir o `gap` entre o número e a palavra ao lado.
   Agora o texto inteiro é um item só, que quebra linha por dentro. */
.cl-cta-note__t{min-width:0;}

/* ------------------------------------------- contraste AA · dois restos --- */
/* 1. .cl-steps__n é o único texto que o briefing manda manter em --cl-amber
      (numeral, não texto corrido). A 20,8px/400 isso dava 3,38:1, abaixo dos
      4,5:1 exigidos. Em peso 700 o numeral passa a ser "texto grande" por
      WCAG (>=18,66px em negrito), onde o exigido é 3:1 — e o âmbar fica.
   2. A legenda sobre foto usava um gradiente que chega TRANSPARENTE no topo
      da caixa: a primeira linha de uma legenda de duas podia cair sobre a
      parte clara da imagem. O piso de 70% garante AA sobre qualquer foto e o
      gradiente original continua por cima, dando o mesmo esmaecido. */
.cl-steps__n{font-weight:700;}
.cl-figure figcaption{background-color:color-mix(in srgb,var(--cl-night) 70%,transparent);}

/* ==========================================================================
   Aviso de saúde — faixa própria no fim do rodapé
   Era a segunda coluna do grid do rodapé, competindo de igual para igual com
   a identificação da marca. É o texto legalmente mais importante da página:
   ganha largura inteira, moldura, selo e contraste suficiente para ser lido.
   ========================================================================== */
.cl-disclaimer{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.5rem);align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,2rem);
  border:1px solid var(--cl-line-light);
  border-left:3px solid var(--cl-amber-glow);
  background:color-mix(in srgb, var(--cl-night-soft) 70%, transparent);
}
.cl-disclaimer__mark{
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;border-radius:999px;
  border:1px solid var(--cl-line-light);
  color:var(--cl-amber-glow);
}
.cl-disclaimer__mark svg{width:1.4rem;height:1.4rem;}
.cl-disclaimer__body{display:grid;gap:.6rem;}
.cl-disclaimer__body p:not(.cl-kicker){
  font-size:.9375rem;line-height:1.65;color:var(--cl-night-ink-2);
  max-width:72ch;
}
@media (max-width:640px){
  .cl-disclaimer{grid-template-columns:1fr;}
  .cl-disclaimer__mark{width:2.4rem;height:2.4rem;}
}

/* Links do rodapé agora são links de verdade (termos e privacidade existem). */
.cl-footer__links a{
  color:var(--cl-night-ink);text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--cl-amber-glow) 55%, transparent);
  text-underline-offset:3px;transition:text-decoration-color .5s var(--cl-ease);
}
.cl-footer__links a:hover{text-decoration-color:var(--cl-amber-glow);}

/* ==========================================================================
   Páginas legais (termos.html, privacidade.html)
   Documento para ser lido do começo ao fim: medida curta, hierarquia clara
   e respiro entre os itens. Reaproveita todos os tokens da LP.
   ========================================================================== */
.cl-legal__body{display:grid;gap:1rem;}
.cl-legal__body > p{font-size:1.0625rem;line-height:1.75;color:var(--cl-ink-soft);}
.cl-legal__body > p.cl-lead{margin-bottom:.75rem;}
.cl-legal__body > p.cl-fine{color:var(--cl-muted);}
.cl-legal__body h2{margin-top:clamp(1.75rem,3.5vw,2.75rem);}
.cl-legal__body h3{margin-top:1rem;color:var(--cl-teal);}
.cl-legal__body h2 + p,
.cl-legal__body h3 + p{margin-top:-.25rem;}
.cl-legal__body .cl-list{margin-block:.35rem .5rem;}
.cl-legal__body a{
  color:var(--cl-teal);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--cl-teal) 40%, transparent);
  transition:text-decoration-color .5s var(--cl-ease);
}
.cl-legal__body a:hover{text-decoration-color:var(--cl-teal);}

.cl-legal-back{
  font-size:.875rem;font-weight:600;color:var(--cl-teal);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
}
.cl-legal-back::before{content:"←";}
.cl-legal-back:hover{text-decoration:underline;text-underline-offset:3px;}

/* ==========================================================================
   ACRÉSCIMO · v3 da copy
   Só tokens --cl-*. Nenhuma cor literal nova, nenhuma fonte nova, nenhum
   seletor fora de .cl-*. Mesma gramática: réguas de 1px, serifa em clamp,
   kicker em caixa alta.
   --------------------------------------------------------------------------
   1. .cl-axis — a frase-eixo dos dez minutos como ELEMENTO GRÁFICO, não como
      parágrafo (copy v3 §15). Herda a assinatura do card de instrução das
      aulas: régua vertical de 3px, serifa no número, nota em sans embaixo.
   2. .cl-offer — a caixa de oferta virou o ÚLTIMO CARD DE INSTRUÇÃO: fundo
      --cl-night, régua de 3px em --cl-mist, kicker em caixa alta, e o preço
      no lugar que o título do exercício ocupa nos outros cards.
   3. .cl-lesson sem numeral: os passos têm nome, não número (regra 2 da v3).
   4. Ritmo vertical: a v2 media 26,4 telas e a dobra da oferta 4,2. Aqui o
      aperto vem de --cl-block, margin-top de bloco, gap e max-width de
      medida — NUNCA de reduzir a tipografia de leitura (corpo segue em 17px
      e o contraste AA segue inegociável).
   ========================================================================== */

/* ------------------------------------- 1 · frase-eixo como bloco gráfico -- */
.cl-axis{
  display:grid;gap:.3rem;
  border-left:3px solid var(--cl-teal);padding-left:clamp(.9rem,2vw,1.35rem);
}
.cl-axis strong{
  font-family:var(--cl-serif);font-size:clamp(1.7rem,3.1vw,2.5rem);
  font-weight:520;letter-spacing:-.03em;line-height:1.05;
  color:var(--cl-ink);text-wrap:balance;
}
.cl-axis span{font-size:1.0625rem;line-height:1.45;color:var(--cl-ink-soft);}
.cl-axis--sm strong{font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.15;}
.cl-axis--light{border-left-color:var(--cl-mist);}
.cl-axis--light strong{color:var(--cl-night-ink);}
.cl-axis--light span{color:var(--cl-night-ink-2);}
.cl-axis--center{
  max-width:44rem;margin-inline:auto;text-align:center;
  border-left:0;border-top:1px solid var(--cl-mist);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0 0;
}

/* declaração em tamanho de headline dentro de um fluxo de texto (Dobra 8) */
.cl-statement--sm{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.08;color:var(--cl-ink);}

/* ---------------------------- 3 · passos com nome, não número (Dobra 6) --- */
.cl-lesson summary{grid-template-columns:minmax(0,1fr) 1.25rem;}
.cl-lesson__tag{
  font-family:var(--cl-sans);font-size:.6875rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.4;
  color:var(--cl-amber-glow);
}
@media (max-width:640px){.cl-lesson summary{grid-template-columns:minmax(0,1fr) 1.1rem;}}

/* o método está crescendo — tratamento próprio, ao fim da lista aberta */
.cl-grow{
  display:grid;gap:.6rem;
  border-left:3px solid var(--cl-mist);
  padding:clamp(1rem,2vw,1.35rem) 0 clamp(1rem,2vw,1.35rem) clamp(1rem,2.2vw,1.5rem);
  max-width:46rem;
}

/* --------------------- empacotamento de cartões sem sobra de linha ------- */
/* numa grade, a linha fica da altura do cartão mais alto e o curto deixa um
   buraco. Em colunas os cartões encaixam e a dobra perde a altura morta. */
.cl-cards--pack{display:block;column-count:2;column-gap:1.1rem;}
.cl-cards--pack > .cl-card{break-inside:avoid;margin-bottom:1.1rem;}
@media (max-width:900px){.cl-cards--pack{column-count:1;}}

/* ------------------- 2 · a oferta como o último card de instrução -------- */
.cl-offer{
  background:var(--cl-night);color:var(--cl-night-ink);
  border:1px solid var(--cl-line-light);
  border-left:3px solid var(--cl-mist);
  box-shadow:0 2rem 4.5rem rgba(11,23,16,.14);
  padding:clamp(1.25rem,2.6vw,2rem) clamp(1.15rem,2.6vw,2.25rem);
  display:grid;gap:clamp(1rem,1.8vw,1.35rem);
  max-width:46rem;margin-inline:auto;
}
.cl-offer .cl-kicker{color:var(--cl-amber-glow);}
.cl-offer .cl-term{color:var(--cl-mist);}
.cl-offer__eixo{
  font-size:1.125rem;line-height:1.5;color:var(--cl-mist);max-width:34rem;
}
.cl-offer__eixo strong{color:var(--cl-night-ink);font-weight:700;}
.cl-offer__price{display:grid;gap:.15rem;}
.cl-offer__anchor{font-size:1rem;line-height:1.3;color:var(--cl-night-ink-2);}
.cl-offer__anchor s{text-decoration-thickness:1px;}
.cl-offer__value{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.cl-offer__x{font-family:var(--cl-serif);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;color:var(--cl-mist);}
.cl-offer__value .cl-numeral{color:var(--cl-night-ink);}
.cl-offer__total{font-size:1rem;line-height:1.4;color:var(--cl-night-ink-2);}

/* o que você leva: uma linha por item, nunca parágrafo */
.cl-offer__list{display:grid;border-top:1px solid var(--cl-line-light);}
.cl-offer__list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6rem;
  padding:.55rem 0;border-bottom:1px solid var(--cl-line-light);
}
.cl-offer__list strong{
  font-family:var(--cl-serif);font-size:1.15rem;font-weight:560;line-height:1.3;
  color:var(--cl-night-ink);
}
.cl-offer__list span{font-size:.9375rem;line-height:1.45;color:var(--cl-night-ink-2);}

/* as três garantias operacionais, em linha */
.cl-offer__ops{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
.cl-offer__ops li{display:flex;align-items:center;gap:.45rem;font-size:.875rem;color:var(--cl-night-ink-2);}
.cl-offer__ops svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--cl-mist);}

/* ------------------------------------------ 4 · ritmo vertical apertado -- */
:root{--cl-block:clamp(2rem,3.4vw,3rem);}
.cl-head{margin-bottom:clamp(1.25rem,2.2vw,1.75rem);gap:.9rem;}
.cl-gap-top{margin-top:clamp(1.25rem,2.4vw,1.75rem);}
.cl-closer{margin-top:clamp(1.4rem,2.6vw,2rem);gap:1rem;}
.cl-flow{gap:.9rem;}
.cl-flow--air{gap:1.2rem;}
.cl-split{gap:clamp(1.5rem,2.6vw,2.75rem);}
.cl-cards{gap:1.1rem;}
.cl-card{padding:clamp(1.1rem,1.8vw,1.5rem);gap:.6rem;}
.cl-list li{padding:.8rem 1rem .8rem 0;}
.cl-list--air li{padding-block:.95rem;}
.cl-layer{gap:1rem;}
.cl-layer + .cl-layer{margin-top:clamp(1.4rem,2.4vw,1.9rem);padding-top:clamp(1.4rem,2.4vw,1.9rem);}
.cl-tally li{padding:.8rem 0;}
.cl-bridge{margin-top:clamp(1rem,2vw,1.5rem);}
.cl-lesson summary{padding-block:.9rem;}
.cl-lesson__body{padding-bottom:1.2rem;gap:1rem 1.5rem;}
.cl-faq summary{min-height:3.2rem;padding-block:.65rem;}
.cl-faq details > p{padding-bottom:.85rem;}
.cl-steps li{padding:1rem 1.2rem 1.2rem;}
.cl-ol{gap:.7rem;}
.cl-final{margin:clamp(1.5rem,2.8vw,2.25rem) auto 0;}
.cl-phonefig .cl-phone{width:min(11.5rem,55vw);}
/* medida: 37rem ≈ 68 caracteres a 17px, dentro do teto de 70 da copy §15 */
.cl-measure{max-width:37rem;}
.cl-measure--wide{max-width:46rem;}

/* ------------------------- v3 · empacotamento mais largo e grades novas --- */
/* Dobra 5: oito cartões curtos. Em três colunas no desktop grande, a dobra
   perde ~500px de linha morta sem encolher uma letra. */
@media (min-width:1200px){.cl-cards--pack3{column-count:3;}}

/* Dobra 8: a prova da promessa de lugar não precisa de meia tela de altura */
.cl-figure--cap{max-width:30rem;}

/* Dobra 11: o FAQ é uma lista longa de itens curtos. Duas colunas no desktop
   mantêm a dobra calma e cortam metade da altura. */
.cl-faq--two{max-width:76rem;margin-inline:auto;}
@media (min-width:901px){
  .cl-faq--two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem);}
  .cl-faq--two details{align-self:start;}
}

/* Dobra 10: os três argumentos antes da caixa, lado a lado */
.cl-args{
  display:grid;gap:clamp(1.25rem,2.4vw,2.25rem);
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
}
.cl-args .cl-body,.cl-args .cl-sm{font-size:1rem;line-height:1.6;}
.cl-args .cl-lead{font-size:1.125rem;}
.cl-sm--up{color:var(--cl-ink-soft);}
@media (max-width:1120px){.cl-args{grid-template-columns:1fr 1fr;}}
@media (max-width:900px){.cl-args{grid-template-columns:1fr;}}

/* hero: o retrato em 4/5 em vez de 3/4 — a primeira tela é da H1, da virada
   e da frase-eixo, não da foto */
.cl-hero-media .cl-figure--tall{aspect-ratio:4/5;}

/* ---------------------------- v3 · últimos cortes de altura (tarefa C) ---- */
/* sete ausências curtas não precisam de duas colunas largas: em três, a
   Dobra 8 perde ~280px sem encolher uma letra */
@media (min-width:1121px){
  .cl-list--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem;}
}
.cl-phonefig .cl-phone{width:min(10rem,55vw);}

/* a coluna mais longa dos três argumentos ganha medida, e com ela perde linhas */
@media (min-width:1121px){
  .cl-args{grid-template-columns:1fr 1.35fr .9fr;}
}

/* a lista do que você leva: uma linha por item, sem respiro de parágrafo */
.cl-offer__list li{padding:.42rem 0;}
.cl-offer{gap:clamp(.85rem,1.5vw,1.15rem);}

/* respiro entre dobras: 40px no desktop (a v2 tinha 104) */
:root{--cl-block:clamp(1.75rem,3vw,2.5rem);}

/* ---- v3 · regra 4: H1 + virada + frase-eixo na PRIMEIRA TELA, inclusive em
   390x844. A frase-eixo subiu no DOM para logo depois do alívio (é o quarto
   elemento da sequência provocação → virada → alívio → dez minutos → mecanismo),
   e no celular o hero fecha o fluxo o bastante para a linha caber na dobra.
   Se algum dia não couber, o que se corta é o kicker — nunca a frase-eixo. */
@media (max-width:640px){
  .cl-hero{padding-top:1.15rem;}
  .cl-hero-copy{gap:.8rem;}
  .cl-hero-copy .cl-kicker{line-height:1.3;}
  .cl-hero-copy .cl-axis strong{font-size:clamp(1.45rem,6.4vw,1.8rem);}
  .cl-hero-copy .cl-axis span{font-size:1rem;}
  .cl-hero-copy .cl-axis{padding-left:.8rem;gap:.2rem;}
}
@media (min-width:641px){
  .cl-hero{padding-top:clamp(1.5rem,2.2vw,2rem);}
  .cl-hero-copy{gap:.95rem;}
  /* no hero a régua some: a H1 e a virada precisam ler como um bloco só, e
     cada elemento entre as duas empurra a frase-eixo para fora da dobra */
  .cl-hero-copy .cl-rule{display:none;}
}
@media (min-width:641px){
  .cl-hero{padding-top:clamp(1.25rem,1.8vw,1.5rem);}
  .cl-hero-copy .cl-axis{gap:.2rem;}
}