<style>
/* ============================================================
   SweetStudents — landing (Etapa 1: esqueleto + copy oficial)
   Tokens: Direcao 1 "Doce Premium" (secao 6.1 do prompt mestre)
   Fonte display: Fraunces (PLACEHOLDER ate a fonte da marca chegar)
   ============================================================ */
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost';
  src:url('/assets/fonts/jost-latin.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/ibmplexmono-latin-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/ibmplexmono-latin-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/ibmplexmono-latin-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Caveat';
  src:url('/assets/fonts/caveat-latin.woff2') format('woff2');
  font-weight:500 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --bg:#FDFAF8; --bg-alt:#F2E8DD; --surface:#FFF; --soft:#FBEEE6; --text:#43302E; --muted:#6E5A56;
  --cta:#CCA89A; --cta-hover:#BC9B8E; --accent:#8A3D52; --accent2:#8C5A2E;
  --badge:#F7DCE4; --ok:#4E7A4E; --line:#F1E2DA;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --wrap:1080px; --read:680px;
  --sec:clamp(64px,9vw,96px);
  --shadow-s:0 1px 2px rgba(67,48,46,.05),0 4px 14px -6px rgba(67,48,46,.10);
  --shadow-m:0 2px 4px rgba(67,48,46,.05),0 14px 34px -14px rgba(67,48,46,.20);
  --shadow-l:0 3px 6px rgba(67,48,46,.06),0 30px 60px -22px rgba(67,48,46,.30);
}
*,*::before,*::after{box-sizing:border-box}
html{text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.62;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* grao de papel sutil — tira o "liso demais" de tela cheia */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  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='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
img,svg{max-width:100%;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(28px,5vw,44px);line-height:1.16;letter-spacing:-.014em}
h2{font-size:clamp(24px,3.3vw,34px);line-height:1.2;letter-spacing:-.012em}
h3{font-size:clamp(19px,1.6vw,22px);line-height:1.3;letter-spacing:-.006em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
/* reset das margens de UA: figure (1em 40px) e blockquote (1em 40px) inflavam o
   min-content dos itens de grid e estouravam o track (overflow horizontal em 768px) */
figure,blockquote,ul,ol,dl{margin:0}
strong{font-weight:650}
::selection{background:var(--badge);color:var(--text)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4.5vw,32px);position:relative;z-index:1}
.read{max-width:var(--read);margin-inline:auto}
section{padding-block:var(--sec)}
.lead{font-size:clamp(17px,1.7vw,18.5px);color:var(--muted);line-height:1.6}
.micro{font-size:13px;line-height:1.5;color:var(--muted)}
.eyebrow{
  font-size:12px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;
  color:#8A3D52;margin:0 0 var(--s3);display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{display:none}
.center{text-align:center}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:17px;font-weight:700;line-height:1.2;
  padding:17px 38px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn-primary{background:linear-gradient(180deg,#F0BEC5,#E8AEB7);color:#4E423C;box-shadow:0 2px 3px rgba(232,174,183,.25),0 12px 26px -12px rgba(232,174,183,.6)}
.btn-primary:hover{background:linear-gradient(180deg,#EDB2BB,#E4A2AC);transform:translateY(-1px);box-shadow:0 3px 5px rgba(232,174,183,.3),0 18px 34px -14px rgba(232,174,183,.65)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--accent);border-color:#E3CBC4;font-size:16px;padding:14px 28px}
.btn-ghost:hover{background:var(--soft);border-color:var(--accent)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn-primary:hover{transform:none}}

.cta-block{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.center .cta-block,.cta-block.is-center{align-items:center}
.cta-block .micro{max-width:44ch}
.micro .nb{white-space:nowrap}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-r]{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
  .s2-steps[data-r],.s2-steps [data-r]{opacity:1!important;transform:none!important}
  [data-r].in{opacity:1;transform:none}
  [data-r][data-d="1"]{transition-delay:.09s}
  [data-r][data-d="2"]{transition-delay:.18s}
  [data-r][data-d="3"]{transition-delay:.27s}
  [data-r][data-d="4"]{transition-delay:.36s}
}

/* ================= S02 "O Ciclo" -- split visual + 4 passos ================= */
.s2{
  --s2-bg:#FBF6EE; --s2-ink:#4E423C; --s2-muted:#6E6058; --s2-surface:#FFFDFA;
  --s2-hair:#E8DECF; --s2-block:#D2E3FA; --s2-mark:#F8FFD9; --s2-cta:#FAC8C8; --s2-accent:#3E5E85; --s2-pivot:#B0486A;
  background:var(--s2-bg);padding:88px 24px 0;color:var(--s2-ink);
}
.s2-wrap{max-width:1100px;margin:0 auto}
.s2-head{text-align:center;margin-bottom:48px}
.s2-eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#8A3D52;font-weight:600}
.s2 h2{font-weight:500;font-size:clamp(28px,4vw,40px);margin-top:14px}
.s2 h2 em{font-style:italic}
.s2-grid{display:grid;grid-template-columns:minmax(380px,640px) 1fr;gap:48px;align-items:center;margin-bottom:54px}
.plfig{transform:scale(1.3)}

.s2-step{margin-bottom:20px;padding-left:18px;border-left:3px solid var(--s2-hair);animation:var(--s2an) 20s linear infinite}
.s2-step:nth-child(1){--s2an:plS1}
.s2-step:nth-child(2){--s2an:plS2;border-color:var(--s2-block)}
.s2-step:nth-child(3){--s2an:plS3;border-color:var(--s2-cta)}
.s2-step:nth-child(4){--s2an:plS4;border-color:#E9C46A}
.s2-chip{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--s2-accent);font-weight:700}
.s2-step h3{font-size:19px;font-weight:500;margin:2px 0 6px}
.s2-step p{font-size:15px;color:var(--s2-muted);line-height:1.6}
.s2-step p strong{color:var(--s2-ink)}
.s2 .mark{background:linear-gradient(transparent 55%,var(--s2-mark) 55%,var(--s2-mark) 92%,transparent 92%);padding:0 2px}

.s2-culpa{background-color:#E2E7ED;width:100vw;margin-left:calc(50% - 50vw);
  padding:64px calc(50vw - 50%) 168px;margin-top:var(--s7);
  background-image:radial-gradient(rgba(78,66,60,.16) 1.4px,transparent 1.4px);background-size:15px 15px}

.s2-whisper{text-align:center;max-width:640px;margin:0 auto}
.s2-whisper .lead-in{display:inline-flex;border-radius:999px;overflow:hidden;margin:0 0 28px;
  box-shadow:0 1px 2px rgba(67,48,46,.08),0 6px 16px -8px rgba(67,48,46,.18)}
.s2-badge-a,.s2-badge-b{padding:10px 18px;font-family:var(--display);font-size:14px}
.s2-badge-a{background:var(--s2-surface);font-style:italic;font-weight:700;color:var(--s2-ink)}
.s2-badge-b{background:#F1F4F7;font-weight:400;color:var(--s2-ink)}

.s2-whisper .quote{font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(24px,3.4vw,32px);color:var(--s2-ink);line-height:1.4;display:block}
.s2-culpa .quote .mark{background:linear-gradient(transparent 55%,var(--s2-cta) 55%,var(--s2-cta) 92%,transparent 92%);padding:0 2px}

.s2-pivot{text-align:center;margin:16px 0 44px}
.s2-pivot span{font-family:var(--display);font-style:normal;font-weight:600;
  font-size:clamp(28px,4vw,38px);color:var(--s2-accent)}

.s2-mech{max-width:580px;margin:0 auto;text-align:left;border-left:3px solid var(--s2-cta);padding-left:22px}
.s2-mech p{font-family:'IBM Plex Mono',monospace;font-size:14.5px;line-height:2em;color:var(--s2-ink);margin:0;padding-bottom:2px;
  background-image:linear-gradient(rgba(78,66,60,.16) 1px,transparent 1px);background-size:100% 2em;background-position:0 1.85em}
.s2-mech p+p{margin-top:6px;color:var(--s2-muted)}
.s2-mech .s2-bar{font-weight:600;font-style:normal;color:var(--s2-ink);background:#C7D0DA;padding:1px 6px;border-radius:3px}

@media (max-width:860px){
  .s2{padding:64px 20px 0}
  .s2-culpa{padding-bottom:144px}
  .s2-head{margin-bottom:20px}
  .s2-grid{grid-template-columns:1fr;gap:28px}
  .s2-grid>.pl-ciclo{width:100vw;margin-left:calc(50% - 50vw)}
  .s2-grid>.pl-ciclo svg{width:min(640px,100vw)!important;transform:scale(1.14);transform-origin:50% 50%}
  .s2-steps{position:relative;padding-left:34px}
  .s2-steps::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;border-left:2px dashed var(--s2-hair)}
  .s2-step{border-left:none;padding-left:0;position:relative;margin-bottom:26px}
  .s2-step::before{content:"";position:absolute;left:-33px;top:5px;width:12px;height:12px;border-radius:50%;
    background:var(--s2-block);border:3px solid var(--s2-surface);box-shadow:0 0 0 1px var(--s2-hair)}
  .s2-step:nth-child(3)::before{background:var(--s2-cta)}
  .s2-step:nth-child(4)::before{background:var(--s2-mark)}
}


/* ---------- topo ---------- */
#hero .ss-brand{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:fit-content;margin:0 auto;text-decoration:none}
#hero .ss-brand img{height:clamp(46px,6.8vh,62px);width:auto;display:block}

/* ================= S01 HERO (v2 — spec fechada) =================
   Paleta EXCLUSIVA do hero (9 hex). Nao usa os tokens globais de cor.
   Buttercream #FDFAF8 · Espresso #4E423C · Taupe #6E6058 · Rosa #FAC8C8
   Ceu #DFEAFB · Citrus #F8FFD9 · Azul profundo #5A7699 · Hairline #E8DECF
   Branco #FFFDFA
   Excecoes cromaticas ditadas pela propria spec (secoes 4 e 5): aluminio
   #C9C6C2, moldura #5E5954, camera #3E3A36, borda do CTA #EFE6D8, gradiente
   da pilula #F0BEC5→#E8AEB7 e as sombras rgba(196,124,138,*).
   ================================================================= */
#hero{
  --cream:#FDFAF8; --espresso:#4E423C; --taupe:#6E6058; --rose:#FAC8C8;
  --sky:#DFEAFB; --citrus:#F8FFD9; --deep:#5A7699; --hair:#E8DECF; --paper:#FFFDFA;

  position:relative; overflow:hidden; box-sizing:border-box;
  flex:1 1 auto;min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  padding:37px 22px 0;
  background:var(--sky);
  color:var(--espresso);
  font-family:var(--body);
}
/* PERMANENTE -- NAO REMOVER -- dobra: crava a faixa no limite da tela
   por construcao (nao por calculo), em qualquer dispositivo. */
.ss-fold{height:100svh;display:flex;flex-direction:column}
/* --- duas camadas absolutas de fundo --- */
#hero .ss-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
#hero .ss-stripes{background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 44px,transparent 44px 88px)}
#hero .ss-glow{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.1))}
#hero .ss-frost{
  position:absolute;pointer-events:none;z-index:0;
  left:50%;top:1%;bottom:1%;
  width:min(880px,94%);
  transform:translateX(-50%);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 50%,#000 45%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 52% at 50% 50%,#000 45%,transparent 100%);
}

/* icones decorativos flutuantes do hero removidos 15/08 (pedido do Luciano) */
/* --- eyebrow --- */
#hero .ss-eyebrow{
  position:relative;z-index:1;margin:15px 0 0;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#5A7699;
}
#hero .ss-eyebrow::before,#hero .ss-eyebrow::after{
  content:"";width:26px;height:1px;background:currentColor;opacity:.35;flex:none;
}

/* --- chip de prova social --- */
#hero .ss-chip{
  position:relative;z-index:1;margin:22px 0 0;
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px 6px 8px;border-radius:999px;
  background:rgba(255,253,250,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.85);
  font-size:12.5px;line-height:1.3;color:var(--taupe);
}
#hero .ss-faces{display:inline-flex;flex:none}
#hero .ss-faces i{
  width:28px;height:28px;border-radius:50%;display:block;
  border:1.5px solid var(--paper);box-sizing:border-box;
  pointer-events:none;-webkit-user-drag:none;user-select:none;
}
#hero .ss-faces i+i{margin-left:-9px}
#hero .ss-chip b{
  font-family:var(--display);font-weight:700;font-variation-settings:'wght' 700;
  color:var(--espresso);
}

/* --- H1 --- */
#hero h1{
  position:relative;z-index:1;margin:20px 0 0;
  font-family:var(--display);font-weight:640;font-variation-settings:'wght' 640;
  letter-spacing:-.015em;
  font-size:34px;line-height:1.12;
  max-width:760px;text-wrap:balance;color:var(--espresso);
}
/* telas grandes: headline acompanha o crescimento da imagem (que vai
   ate min(1100px,97vw)) em vez de ficar travada em 34px/760px */
@media (min-width:1440px){
  #hero h1{font-size:38px;max-width:820px}
}
/* grifo citrus ATRAS do texto — faixa, nunca retangulo opaco */
#hero .ss-mark{
  background:linear-gradient(#F8FFD9,#F8FFD9);
  background-size:100% .46em;
  background-position:0 .86em;
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
#hero .ss-it{
  font-style:italic;font-weight:480;font-variation-settings:'wght' 480;
  color:var(--deep);
}

/* --- subtitulo --- */
#hero .ss-sub{
  position:relative;z-index:1;margin:16px auto 0;
  font-size:15.5px;font-weight:500;line-height:1.5;
  color:var(--taupe);max-width:560px;
}

/* --- mockup real (screenshot oficial de /pt/studyplanner) --- */
#hero .ss-shot-wrap{
  flex:1 1 auto;min-height:460px;width:100%;
  display:flex;justify-content:center;align-items:flex-end;
  overflow:hidden;
  margin-top:24px;position:relative;z-index:0;
}
#hero .ss-shot{
  display:block;
  max-width:min(1100px,97vw);max-height:100%;
  width:auto;height:auto;
  margin-bottom:-16px;      /* mergulha atras da faixa -- so' um beliscao */
  filter:drop-shadow(0 8px 14px rgba(78,66,60,.10));
}
/* telas baixas tipo notebook (1366x768 etc.): texto cede, imagem
   mantem o minimo -- valores exatos da tabela de referencia */
@media (max-height:780px){
  #hero{padding-top:28px}
  #hero .ss-brand img{height:36px}
  #hero .ss-eyebrow{margin-top:0}
  #hero .ss-chip{margin-top:10px}
  #hero h1{margin-top:12px;font-size:30px}
  #hero .ss-sub{margin-top:8px;font-size:15px}
  body #hero .ss-cta{margin-top:14px}
  body #hero .ss-price{margin-top:6px}
  body #hero .ss-lead{margin-top:8px}
  #hero .ss-lead{font-size:13.5px}
  #hero .ss-shot-wrap{margin-top:8px;min-height:340px}
}

/* .ss-hero-content: no desktop e' transparente ao layout (display:contents
   -- os filhos viram itens diretos do flex do #hero, ZERO mudanca visual).
   So' no mobile ele vira o container com space-evenly. */
.ss-hero-content,.ss-hg1,.ss-hg2,.ss-hg3{display:contents}

/* mobile: 3 grupos (topo / H1+CTA / +600) com space-between -- o
   grupo do CTA cai no meio da tela, sem buraco concentrado */
@media (max-width:767px){
  #hero{padding-top:14px;justify-content:stretch}
  #hero{padding-left:14px;padding-right:14px}     /* coluna de texto mais larga */
  .ss-hero-content{
    display:flex;flex-direction:column;justify-content:space-between;
    flex:1 1 auto;min-height:0;width:100%;padding:4px 0 2px;
  }
  .ss-hg1,.ss-hg2,.ss-hg3{
    display:flex;flex-direction:column;align-items:center;flex:none;
  }
  #hero .ss-brand img{height:44px}      /* logo maior */
  #hero .ss-eyebrow{margin-top:10px}
  #hero .ss-chip{margin-top:10px}
  #hero h1{margin-top:0;font-size:23px;line-height:1.16;max-width:100%}
  #hero .ss-sub{margin-top:10px;font-size:15px}
  body #hero .ss-cta{margin-top:clamp(28px,7vw,52px)}
  body #hero .ss-price{margin-top:14px}
  #hero .ss-price{font-size:11.5px}
  body #hero .ss-lead{margin-top:6px}
  #hero .ss-lead{font-size:13px;line-height:1.4;max-width:36em}
  #hero .ss-shot-wrap{flex:0 0 auto;min-height:235px;margin-top:8px}
  #hero .ss-shot{max-width:112vw;filter:drop-shadow(0 6px 12px rgba(78,66,60,.10))}
}
/* aparelhos muito baixos (ex.: iPhone SE, ~667px de altura): reduz o
   H1 como ultimo recurso, so' se a imagem ja nao tiver mais margem
   pra ceder -- a faixa NUNCA sai do limite (isso e' garantido pelo
   .ss-fold, nao depende deste ajuste). */
@media (max-width:767px) and (max-height:700px){
  #hero h1{font-size:20px}
  #hero .ss-sub{font-size:12.5px}
  #hero .ss-shot-wrap{min-height:200px}
}

/* --- conteudo solto do hero (sem mockup de iPad, removido 10/08 a pedido
   do Luciano) --- */
#hero .ss-lead{
  position:relative;z-index:1;margin:16px auto 0;
  font-size:13.5px;line-height:1.5;color:var(--taupe);max-width:620px;
}
#hero .ss-lead b{
  font-family:var(--display);font-weight:640;font-variation-settings:'wght' 640;
  color:var(--espresso);letter-spacing:-.01em;
}
#hero .ss-price{position:relative;z-index:1;margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--taupe)}

/* ================= botao CTA (PERMANENTE -- NAO REMOVER -- CTA v1) =================
   Restaurado EXATO do backup index.html.bak-V1-APROVADO-1786399445 a
   pedido explicito do Luciano (10/08), incluindo o texto "Baixar meu
   caderno agora" -- reverte a decisao anterior de banir a palavra.
   Mecanismo: pilula expande (width) + texto revela (opacity fade). */
#hero .ss-cta,#oferta .ss-cta,#comecar .ss-cta,#demo .ss-cta,#faq .ss-cta{
  position:relative;display:inline-flex;align-items:center;
  margin:26px 0 0;
  --pill-w:clamp(54px,17.44vw,68px);   /* = 68px em >=390px; encolhe abaixo disso */
  width:auto;height:60px;flex:none;max-width:100%;
  padding:0 28px 0 calc(var(--pill-w) + 20px);   /* = 88px em >=390px */
  border-radius:18px;background:var(--paper);border:1px solid #EFE6D8;
  overflow:hidden;text-decoration:none;
  box-shadow:0 2px 6px rgba(196,124,138,.16);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),filter .3s cubic-bezier(.4,0,.2,1);
}
#hero .ss-cta-rest,#oferta .ss-cta-rest,#comecar .ss-cta-rest,#demo .ss-cta-rest,#faq .ss-cta-rest{
  position:relative;z-index:0;
  font-size:clamp(10px,2.95vw,16px);font-weight:700;line-height:1;
  color:var(--espresso);white-space:nowrap;
}
#hero .ss-pill,#oferta .ss-pill,#comecar .ss-pill,#demo .ss-pill,#faq .ss-pill{
  position:absolute;top:4px;left:4px;height:50px;width:var(--pill-w);z-index:1;
  border-radius:14px;background:linear-gradient(180deg,#F0BEC5,#E8AEB7);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
#hero .ss-pill svg,#oferta .ss-pill svg,#comecar .ss-pill svg,#demo .ss-pill svg,#faq .ss-pill svg{position:absolute;top:50%;right:calc((var(--pill-w) - 23px) / 2);transform:translateY(-50%);width:23px;height:23px}
#hero .ss-cta-hover,#oferta .ss-cta-hover,#comecar .ss-cta-hover,#demo .ss-cta-hover,#faq .ss-cta-hover{
  position:absolute;left:0;right:52px;top:0;bottom:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(10px,2.95vw,16px);font-weight:700;line-height:1;
  color:var(--espresso);white-space:nowrap;
  opacity:0;transition:opacity .25s ease .12s;
}
#hero .ss-cta:hover,#hero .ss-cta:focus-visible,#oferta .ss-cta:hover,#oferta .ss-cta:focus-visible,#comecar .ss-cta:hover,#comecar .ss-cta:focus-visible,#demo .ss-cta:hover,#demo .ss-cta:focus-visible,#faq .ss-cta:hover,#faq .ss-cta:focus-visible{
  filter:brightness(1.04);
  box-shadow:0 5px 12px rgba(196,124,138,.22);
}
#hero .ss-cta:hover .ss-pill,#hero .ss-cta:focus-visible .ss-pill,#oferta .ss-cta:hover .ss-pill,#oferta .ss-cta:focus-visible .ss-pill,#comecar .ss-cta:hover .ss-pill,#comecar .ss-cta:focus-visible .ss-pill,#demo .ss-cta:hover .ss-pill,#demo .ss-cta:focus-visible .ss-pill,#faq .ss-cta:hover .ss-pill,#faq .ss-cta:focus-visible .ss-pill{width:calc(100% - 8px)}
#hero .ss-cta:hover .ss-cta-hover,#hero .ss-cta:focus-visible .ss-cta-hover,#oferta .ss-cta:hover .ss-cta-hover,#oferta .ss-cta:focus-visible .ss-cta-hover,#comecar .ss-cta:hover .ss-cta-hover,#comecar .ss-cta:focus-visible .ss-cta-hover,#demo .ss-cta:hover .ss-cta-hover,#demo .ss-cta:focus-visible .ss-cta-hover,#faq .ss-cta:hover .ss-cta-hover,#faq .ss-cta:focus-visible .ss-cta-hover{opacity:1}
#hero .ss-cta:focus-visible,#oferta .ss-cta:focus-visible,#comecar .ss-cta:focus-visible,#demo .ss-cta:focus-visible,#faq .ss-cta:focus-visible{outline:2.5px solid var(--deep);outline-offset:3px}

/* CTA da secao de preco (#oferta): fica permanentemente no estado visual de hover
   (pill expandida + texto "Baixar meu Caderno Agora"), nao so ao passar o mouse. */
#oferta .ss-pill{width:calc(100% - 8px)}
#oferta .ss-cta-hover{opacity:1}
#oferta .ss-cta{filter:brightness(1.04);box-shadow:0 5px 12px rgba(196,124,138,.22)}

/* ripple/pulse sutil nos CTAs 100% rosa - efeito "pedra na agua" */
@keyframes ssRipplePulse{
  0%{box-shadow:0 5px 12px rgba(196,124,138,.22),0 0 0 0 rgba(240,190,197,.55)}
  70%{box-shadow:0 5px 12px rgba(196,124,138,.22),0 0 0 10px rgba(240,190,197,0)}
  100%{box-shadow:0 5px 12px rgba(196,124,138,.22),0 0 0 10px rgba(240,190,197,0)}
}

@media (prefers-reduced-motion:reduce){
  #hero .ss-cta,#hero .ss-pill,#hero .ss-cta-hover,#oferta .ss-cta,#oferta .ss-pill,#oferta .ss-cta-hover,#comecar .ss-cta,#comecar .ss-pill,#comecar .ss-cta-hover,#demo .ss-cta,#demo .ss-pill,#demo .ss-cta-hover,#faq .ss-cta,#faq .ss-pill,#faq .ss-cta-hover{transition:none}
}
@media (max-width:767px){
  #hero .ss-cta,#oferta .ss-cta{width:100%;justify-content:flex-start}
  #hero .ss-cta-rest,#hero .ss-cta-hover,#oferta .ss-cta-rest,#oferta .ss-cta-hover{font-size:16px}
}

/* ================= faixa inferior (marquee) — PERMANENTE, NAO REMOVER =================
   Irma do #hero dentro de .ss-fold (nao mais absoluta): flex:0 0 52px
   crava no limite da tela por construcao, sem calculo pra errar. */
.pl-marquee{
  flex:0 0 52px;
  background:var(--paper);border-top:1px solid var(--hair);
  display:flex;align-items:center;overflow:hidden;
}
.pl-marquee-track{
  display:flex;width:max-content;will-change:transform;
}
.pl-marquee-seq{
  display:flex;align-items:center;gap:56px;padding-right:56px;white-space:nowrap;
}
.pl-marquee-seq span{
  font-family:'Outfit',var(--display);font-style:normal;
  font-weight:560;font-variation-settings:'wght' 560;
  font-size:16px;line-height:1.2;letter-spacing:.04em;color:var(--espresso);
  white-space:nowrap;
}
.pl-marquee-seq i{display:inline-flex;align-items:center;opacity:.55;color:var(--espresso)}
.pl-marquee-ic{width:20px;height:20px;max-width:none;flex:none;display:block}

@media (prefers-reduced-motion: reduce){.pl-marquee-track{animation:none}}

/* ================= entrada (so opacity + transform) ================= */
@keyframes ss-in     { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes ss-fade   { from { opacity:0; } to { opacity:1; } } /* sem transform: usado em elementos com estados interativos (hover/active) */
@keyframes ss-rise   { from { transform:translateY(12px); } to { transform:none; } } /* SEM opacity: h1/ss-pad sao candidatos a LCP */
#hero [data-anim]{animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}
#hero .ss-brand[data-anim]  {animation-name:ss-in;    animation-duration:.55s;animation-delay:0s}
#hero .ss-eyebrow[data-anim]{animation-name:ss-in;    animation-duration:.55s;animation-delay:.07s}
#hero .ss-chip[data-anim]   {animation-name:ss-in;    animation-duration:.55s;animation-delay:.14s}
#hero h1[data-anim]         {animation-name:ss-rise;  animation-duration:.6s; animation-delay:.2s}
#hero .ss-sub[data-anim]    {animation-name:ss-in;    animation-duration:.55s;animation-delay:.28s}
#hero .ss-cta[data-anim]    {animation-name:ss-fade;  animation-duration:.55s;animation-delay:.36s}
#hero .ss-price[data-anim]  {animation-name:ss-in;    animation-duration:.55s;animation-delay:.42s}
#hero .ss-lead[data-anim]   {animation-name:ss-in;    animation-duration:.55s;animation-delay:.48s}
#hero .ss-shot[data-anim]   {animation-name:ss-rise;  animation-duration:.6s; animation-delay:.56s}
@media (prefers-reduced-motion: reduce){
  [data-anim],[data-anim] *{animation:none !important}
}

/* ================= S02 AGITACAO ================= */
.punch{
  font-family:var(--display);font-weight:600;font-size:clamp(26px,4.6vw,40px);line-height:1.2;
  letter-spacing:-.015em;text-align:center;color:var(--accent);
  margin:var(--s7) 0;position:relative;
}
.punch svg{margin:6px auto 0;width:min(230px,62%);height:11px;overflow:visible}
.punch path{stroke:var(--cta);stroke-width:3.2;fill:none;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s ease-out .15s}
.punch.in path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.punch path{stroke-dashoffset:0;transition:none}}

/* ================= S03 COMO FUNCIONA ================= */
#como-funciona{background:#FBF6EE;position:relative}
.steps{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s6) var(--s5) var(--s5);position:relative}
.step-n{font-family:var(--display);font-size:44px;font-weight:600;line-height:1;color:var(--badge);position:absolute;top:14px;right:20px}
.step h3{margin-bottom:10px;position:relative}
.step h3 em{font-style:normal;color:var(--accent2);font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;display:block;margin-bottom:6px}
.step p{color:var(--muted);font-size:15.8px;margin:0}

.curve{margin:var(--s7) auto 0;max-width:720px}
.curve svg{width:100%;height:auto}
.curve .axis{stroke:#E0CDC4;stroke-width:1.2}
.curve .grid{stroke:#E9D9D1;stroke-width:1;stroke-dasharray:2 5}
.curve .decay{stroke:#CDB9B1;stroke-width:2;fill:none;stroke-dasharray:5 5}
.curve .keep{stroke:var(--cta);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.curve .lbl{font-family:var(--body);font-size:11px;fill:var(--muted);font-weight:600;letter-spacing:.04em}
.curve .lbl.k{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .curve .keep{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.9s cubic-bezier(.3,.7,.35,1) .2s}
  .curve.in .keep{stroke-dashoffset:0}
}
.sci{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent2);
  border-radius:4px 16px 16px 4px;padding:var(--s6);margin:var(--s7) auto 0;max-width:var(--read);
}
.sci h3{font-size:19px;margin-bottom:12px}
.sci p{color:var(--muted);font-size:15.8px;margin:0}
.closer{font-family:var(--display);font-size:clamp(19px,2.3vw,24px);line-height:1.42;text-align:center;color:var(--text);margin:var(--s7) auto 0;max-width:26em}

/* ================= S04 DEMO ================= */
/* ================= S04 CARROSSEL "por dentro do caderno" (Sky Pastel) ================= */
#demo{--dm-bg:#FFFFFF;--dm-ink:#4E423C;--dm-muted:#6E6058;--dm-surface:#FFFDFA;--dm-hair:#E8DECF;--dm-accent:#3E5E85;--paper:#FFFDFA;--espresso:#4E423C;background:var(--dm-bg)}
#demo .eyebrow{color:#8A3D52}
#demo h2,#demo .lead{color:var(--dm-ink)}
#demo .lead{color:var(--dm-muted)}
.pl-carousel{position:relative;width:420px;max-width:86vw;margin:var(--s7) auto 0}
@media (min-width:641px){.pl-carousel{width:560px}}
.pl-car-stage{position:relative;aspect-ratio:1700/2300;overflow:hidden;background:var(--dm-surface)}
.pl-car-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.pl-car-stage img.on{opacity:1;z-index:1}
.pl-car-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:var(--dm-surface);border:1px solid var(--dm-hair);box-shadow:var(--shadow-s);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;
  font-size:24px;line-height:1;color:var(--dm-ink);
  transition:background-color .18s ease,transform .18s ease;
}
.pl-car-btn:hover{background:var(--dm-bg)}
.pl-car-btn:active{transform:translateY(-50%) scale(.94)}
.pl-car-btn:disabled{opacity:.35;cursor:default}
.pl-car-btn:disabled:hover{background:var(--dm-surface)}
.pl-car-btn.prev{left:-14px}
.pl-car-btn.next{right:-14px}
.pl-car-count{text-align:center;margin-top:10px;font-size:13px;color:var(--dm-muted);font-weight:600;font-variant-numeric:tabular-nums}
.pl-car-caption{text-align:center;margin-top:6px;font-size:15px;color:var(--dm-muted)}
@media (max-width:520px){
  .pl-car-btn.prev{left:-8px}
  .pl-car-btn.next{right:-8px}
  .pl-car-btn{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){.pl-car-stage img{transition:none}}
.demo-note{text-align:center;margin-top:var(--s6)}
#demo .demo-note-cta{background:#FFFDFA;border-color:#EFE6D8;filter:brightness(1.04);box-shadow:0 5px 12px rgba(196,124,138,.22)}
#demo .demo-note-cta .ss-pill{width:calc(100% - 8px)}
#demo .demo-note-cta .ss-cta-hover{opacity:1}

/* ================= S05 TOUR "sanfona empilhada" (Sky Pastel, full-width) ================= */
#por-dentro{background:#FBF6EE;border-block:none}
#por-dentro .eyebrow{color:#8A3D52}
#por-dentro h2{color:#4E423C}
#por-dentro .closer{max-width:560px;font-size:17px;margin-top:40px}
.acc-stack{margin-top:var(--s7);width:100vw;margin-left:calc(50% - 50vw)}
@media (min-width:768px){.acc-stack{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto}}
.acc-card{position:relative;background:var(--acc-bg,#FFFDFA);border-radius:34px;margin-top:-24px;box-shadow:0 -10px 28px rgba(78,66,60,.09);transition:transform .25s ease}
.acc-card:not(.is-open):hover{transform:translateY(-2px)}
.acc-stack .acc-card:first-child{margin-top:0;box-shadow:none}
.acc-card--surface{border:1px solid #E8DECF}
.acc-head{margin:0;font-family:var(--display);font-size:21px;font-weight:500}
.acc-toggle{
  width:100%;min-height:128px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:44px max(5vw,32px);font:inherit;color:#4E423C;
}
.acc-toggle:focus-visible{outline:2.5px solid #3E5E85;outline-offset:-3px;border-radius:20px}
.acc-toggle-icon{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.75;order:2}
.acc-toggle-icon svg{width:100%;height:100%}
.acc-toggle-label{flex:1;min-width:0}
.acc-body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.33,0,.2,1)}
.acc-card.is-open .acc-body-wrap{grid-template-rows:1fr}
.acc-body{overflow:hidden;min-height:0}
.acc-body-inner{display:grid;grid-template-columns:55% 45%;gap:32px;align-items:center;min-height:340px;padding:0 max(5vw,32px) 36px}
.acc-body-inner--sem-foto{grid-template-columns:1fr;max-width:640px;margin-inline:0;align-items:start;min-height:0;margin-top:-30px;padding-bottom:56px}
.acc-text-wrap{max-width:520px}
.acc-text{font-size:16px;line-height:1.6;color:#4E423C;margin:0}
.acc-support{font-size:14.5px;line-height:1.55;color:#6E6058;margin:10px 0 0}
.acc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;list-style:none;padding:0}
.acc-chips li{font-size:12px;font-weight:650;letter-spacing:.02em;color:#4E423C;background:rgba(255,255,255,.55);border:1px solid rgba(78,66,60,.14);border-radius:999px;padding:5px 13px}
@media (prefers-reduced-motion:reduce){
  .acc-body-wrap{transition:none}
}
@media (max-width:760px){
  .acc-card{margin-top:-20px}
  .acc-stack .acc-card:first-child{margin-top:0}
  .acc-head{font-size:17px}
  .acc-toggle{padding:32px 22px 38px;gap:12px;min-height:108px}
  .acc-body-inner{grid-template-columns:1fr;padding:0 22px 40px;gap:16px;min-height:0}
  .acc-text-wrap{max-width:none}
}

/* ================= S06 SEU TABLET ================= */
.pl-apps-split{display:grid;grid-template-columns:40% 1fr;gap:24px;align-items:stretch;margin-top:var(--s6)}
.compat-card{background:#FFFDFA;border:1px solid var(--line);border-radius:20px;padding:var(--s6);display:flex;flex-direction:column;justify-content:center}
.pl-apps-col{align-items:center;gap:20px}
.pl-apps{display:flex;justify-content:space-between;gap:8px;width:100%}
.pl-app{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:default;position:relative;
}
.pl-app-icon{
  width:64px;height:64px;border-radius:18px;background:#FFF;border:1px solid #E8DECF;
  display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.33,0,.2,1),box-shadow .3s,border-color .3s;
}
.pl-app img{width:34px;height:34px}
.pl-app:hover .pl-app-icon,.pl-app.is-lit .pl-app-icon{transform:translateY(-5px);border-color:#D2E3FA;box-shadow:0 5px 12px rgba(78,66,60,.09)}
.pl-app:focus-visible .pl-app-icon{transform:translateY(-5px);border-color:#D2E3FA;box-shadow:0 5px 12px rgba(78,66,60,.09)}

.pl-app-name{font-size:11.5px;font-weight:650;color:#6E6058;text-align:center;white-space:nowrap;transition:color .3s}
.pl-app.is-lit .pl-app-name{color:var(--text)}
.pl-apps-legend{font-size:13px;color:#6E6058;text-align:center;max-width:300px;white-space:nowrap;margin:0}
@media (prefers-reduced-motion:reduce){.pl-app,.pl-app img,.pl-app-icon{transition:none}}
@media (max-width:860px){
  .pl-apps-split{grid-template-columns:1fr;gap:20px}
  .compat-card{padding:var(--s5) var(--s4)}
  .pl-app-icon{width:52px;height:52px;border-radius:14px}
  .pl-app:hover .pl-app-icon,.pl-app:focus-visible .pl-app-icon{transform:none;box-shadow:none;border-color:#E8DECF}
  .pl-app.is-lit .pl-app-icon{transform:none;border-color:#D2E3FA;box-shadow:0 3px 8px rgba(78,66,60,.08)}
  .pl-app img{width:28px;height:28px}
  .pl-app-name{font-size:10.5px;white-space:normal}
  .pl-apps-legend{white-space:normal;max-width:230px;font-size:12px}
}

.compat-tabs-card{gap:0}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tab{
  font-family:var(--body);font-size:15px;font-weight:650;padding:11px 24px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.tab:hover{border-color:#E3CBC4;color:var(--text)}
.tab[aria-selected="true"]{background:var(--text);color:#fff;border-color:var(--text)}
.tabpanel{margin-top:var(--s5);font-size:16.5px;color:var(--muted)}
.tabpanel[hidden]{display:none}
.howto-label{font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);text-align:center;margin:var(--s7) 0 var(--s4)}
.howto{counter-reset:h;margin:0;padding:0;list-style:none;display:grid;gap:var(--s5);position:relative}
@media (min-width:820px){
  .howto{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .howto::before{content:"";position:absolute;top:0;left:16.6667%;right:16.6667%;height:1px;background:var(--line)}
}
.howto li{
  position:relative;background:#FFFDFA;border:1px solid var(--line);border-radius:16px;
  padding:36px 22px 22px;font-size:15.8px;color:var(--muted);
}
.howto li::before{
  counter-increment:h;content:counter(h);position:absolute;left:50%;top:0;translate:-50% -50%;
  width:40px;height:40px;border-radius:50%;background:var(--badge);color:var(--accent);
  font-family:var(--display);font-size:20px;font-weight:600;display:grid;place-items:center;
  border:3px solid #FFFDFA;
}
.honest{border:1px solid var(--line);border-radius:16px;padding:var(--s6);margin:var(--s7) auto 0;max-width:var(--read);font-size:15.8px;color:var(--muted)}
.honest b{color:var(--text)}

/* ================= S07 MOMENTOS ================= */
#momentos{background:#FBF6EE}
.moments{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media (min-width:860px){.moments{grid-template-columns:repeat(3,minmax(0,1fr))}}
.moment{border-radius:24px;padding:var(--s6) var(--s5);box-shadow:0 16px 32px -20px rgba(78,66,60,.28)}
.moment-tint-rosa{background:#F0BEC5}
.moment-tint-azul{background:#DFEAFB}
.moment-tint-greige{background:#F2E8DD}
.moment .emo{font-size:26px;line-height:1;display:block;margin-bottom:14px}
.moment h3{font-size:19px;margin-bottom:9px;color:#3F3A3A}
.moment p{font-size:15.4px;color:#4E423C;margin:0}

/* ================= S08 PROVA SOCIAL ================= */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);text-align:center;margin-bottom:var(--s7)}
.stat b{display:block;font-family:var(--display);font-size:clamp(26px,4.6vw,44px);font-weight:600;line-height:1.05;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:7px}
@media (max-width:520px){.stat span{font-size:11px;letter-spacing:.04em}}
/* prova social -- carrossel de depoimentos, 2 variantes (leque / esteira) */
.pl-testi-variant{margin-top:var(--s7)}

.pl-testi-card2{padding:3px;border-radius:24px;display:block}
.pl-testi-card2 img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;pointer-events:none}
.pl-tint-blue{background:#DFEAFB}

/* --- grade de depoimentos (15/08: troca a pilha/leque por grid, todos visiveis) --- */
.pl-testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1140px;margin:var(--s7) auto 0}
.pl-testi-grid .pl-testi-card2{width:100%}
@media (max-width:900px){.pl-testi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:640px}}
@media (max-width:520px){.pl-testi-grid{grid-template-columns:1fr;max-width:380px;gap:18px}.pl-testi-card2{padding:3px}}

.pl-testi-note{text-align:center;margin-top:var(--s7);font-size:15px;color:#6E6058}
.pl-testi-note a{color:#3E5E85;font-weight:600}

/* ================= S09 CONTA ================= */
#conta{background:#F2E8DD}
.compare{display:grid;gap:var(--s5);margin-top:var(--s7);align-items:stretch}
@media (min-width:880px){.compare{grid-template-columns:repeat(3,minmax(0,1fr))}}
.col{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.col .emo{font-size:24px;line-height:1}
.col p{font-size:15.4px;color:var(--muted);margin:0}
.col.win{border:2px solid #F0BEC5;box-shadow:var(--shadow-m);position:relative}
.col.win p{color:var(--text)}
.col.win::before{
  content:"Uma vez. Para sempre.";position:absolute;top:-12px;left:var(--s5);
  background:#F0BEC5;color:#8A3D52;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 13px;border-radius:999px;
}

/* ================= S10 OFERTA "duas pecas" (Sky Pastel) ================= */
#oferta{
  --of-bg:#FFF9F1;--of-ink:#4E423C;--of-muted:#6E6058;--of-surface:#FFF;--of-hair:#E8DECF;--of-block:#DFEAFB;--of-accent:#3E5E85;
  --espresso:#4E423C;--paper:#FFFDFA;--deep:#5A7699;
  background:var(--of-bg);
}
#oferta .eyebrow{color:#8A3D52}
#oferta h2{color:var(--of-ink)}
.offer2{display:grid;grid-template-columns:48% 52%;gap:0;max-width:1140px;margin:var(--s7) auto 0;text-align:left;align-items:center}
.offer2-left,.offer2-right{min-width:0}
.offer2-left{
  background:var(--of-block);border-radius:24px;padding:36px 88px 36px 40px;margin-right:-56px;
  position:relative;z-index:1;
}
.offer2-right{background:var(--of-surface);border-radius:28px;padding:48px 56px;text-align:center;box-shadow:0 24px 60px rgba(78,66,60,.16);position:relative;z-index:2}
.offer2-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:18px}
.offer2-item-row{display:flex;align-items:baseline;gap:8px}
.offer2-check{color:var(--of-accent);font-weight:700;font-size:16px;flex:none}
.offer2-item-row b{flex:1;color:var(--of-ink);font-weight:650;font-size:15px;line-height:1.3}
.offer2-anchor{color:var(--of-muted);font-size:13px;font-weight:600;white-space:nowrap;flex:none}
.offer2-desc{margin:4px 0 0 24px;color:var(--of-muted);font-size:13.5px;line-height:1.4}
.offer2-total{border-top:1px solid rgba(78,66,60,.16);padding-top:16px;font-size:15px;color:var(--of-ink);font-weight:650;margin:0}
.offer2-total s{color:var(--of-muted);font-weight:600;margin-left:4px}
.offer2-mockup{width:100%;max-width:190px;height:auto;object-fit:contain;margin:0 auto 16px;display:block}
.offer2-label{font-size:14px;color:var(--of-muted);margin:0 0 6px}
.offer2-label s{color:var(--of-muted)}
.offer2-price{font-family:var(--display);font-size:clamp(48px,8vw,64px);font-weight:600;line-height:1;color:var(--of-ink);margin:0 0 6px}
.pl2-price-unit{font-size:14px;font-weight:500;margin-left:4px;vertical-align:0.5em}
.pl-price-date{font-size:13px;font-weight:400;color:#6B6B6B!important;text-align:center;margin:0 0 10px;line-height:1.2em}
.offer2-vista{font-size:11px;color:var(--of-muted);margin:0 0 18px;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.offer2-install{font-size:15px;color:var(--of-ink);font-weight:600;margin-bottom:20px}
#oferta .ss-cta{width:100%;justify-content:flex-start}
.offer2-micro{font-size:13px;color:var(--of-muted);margin-top:16px}
.offer2-micro .nb{white-space:nowrap}
@media (max-width:760px){
  .offer2{grid-template-columns:1fr;gap:20px;max-width:420px}
  .offer2-right{padding:28px 20px}
  .offer2-left{margin:0;padding:28px 24px 28px 24px}
  #oferta .ss-cta-rest,#oferta .ss-cta-hover{font-size:13px}
  .offer2-micro{white-space:normal}
}


/* ================= S12 FAQ ================= */
#faq{--paper:#FFFDFA}
.faq{margin-top:var(--s6);max-width:720px;margin-left:auto;margin-right:auto}
.faq details{border-bottom:1px solid #E8DECF}
.faq details:first-child{border-top:1px solid #E8DECF}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-family:var(--display);font-size:17px;font-weight:600;line-height:1.35;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:26px;width:11px;height:11px;
  border-right:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:4px var(--s6) 16px 0;color:var(--muted);font-size:15px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
.faq-close{text-align:center;margin-top:var(--s6);font-size:15px;color:var(--muted)}
.faq-close a{color:var(--accent2);font-weight:600}
.faq-cta{text-align:center;margin-top:var(--s5)}

/* ================= S13 FECHAMENTO ================= */
#comecar{--espresso:#4E423C;--paper:#FFFDFA;--deep:#5A7699;background:linear-gradient(180deg,#F0BEC5,#E8AEB7)}
#comecar .vision{font-size:clamp(17px,1.9vw,19px);color:var(--muted);margin-inline:auto;max-width:32em}
#comecar .vision strong{color:var(--text);font-weight:600}
.pl-footer{background:#FDF6F7;color:#4E423C}
.pl-footer-3{border-top:1px solid rgba(78,66,60,.15);padding:22px 0 26px;text-align:center}
.pl-footer-3 p{font-size:12.5px;color:#6E6058;margin:0 0 4px;line-height:1.5}
.pl-footer-3 p:last-child{margin-bottom:0}
.pl-footer-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;text-decoration:none}
.pl-footer-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:12px;margin-top:10px}
.pl-footer-legal-links a{color:#6E6058;text-decoration:none}
.pl-footer-legal-links a:hover{color:#3E5E85;text-decoration:underline}

/* ================= sticky CTA mobile ================= */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,246,238,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.sticky-cta.show{transform:none}
.sticky-cta{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.sticky-cta .sticky-ss-cta{
  position:relative;display:flex;align-items:center;justify-content:flex-start;
  width:100%;height:60px;
  --pill-w:68px;
  padding:0 20px 0 88px;
  border-radius:18px;background:#FFFDFA;
  border:1px solid #EFE6D8;overflow:hidden;text-decoration:none;
  box-shadow:0 2px 6px rgba(196,124,138,.16);
}
.sticky-cta .sticky-ss-cta .ss-cta-rest{font-size:16px;font-weight:700;color:#4E423C;white-space:nowrap}
.sticky-cta .sticky-ss-cta .ss-pill{
  position:absolute;top:4px;left:4px;height:50px;width:var(--pill-w);
  border-radius:14px;background:linear-gradient(180deg,#F0BEC5,#E8AEB7);
}
.sticky-cta .sticky-ss-cta .ss-pill svg{position:absolute;top:50%;right:calc((var(--pill-w) - 23px) / 2);transform:translateY(-50%);width:23px;height:23px}
@media (min-width:900px){.sticky-cta{display:none}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
body{padding-bottom:0}

.skip{position:absolute;left:0;top:0;transform:translateY(-140%);background:var(--surface);padding:12px 20px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{transform:none}

/* ================= texturas de papel (pontilhado / quadriculado) ================= */
.tx{position:relative}
.tx > *{position:relative;z-index:1}
.tx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);}
.tx-dot::before{background:radial-gradient(circle 1.2px, rgba(154,178,209,.26) 98%, transparent) 0 0/52px 52px}
.tx-dot--demo::before{background:radial-gradient(circle 1.2px, rgba(154,178,209,.5) 98%, transparent) 0 0/52px 52px}
.tx-dot--faint::before{background:radial-gradient(circle 1.2px, rgba(154,178,209,.2) 98%, transparent) 0 0/52px 52px}
.tx-lines::before{background:repeating-linear-gradient(180deg, rgba(154,178,209,.2) 0 1px, transparent 1px 34px)}

.section-scallop{
  position:absolute;left:0;right:0;top:100%;margin-top:-1px;height:24px;pointer-events:none;z-index:2;
  background-image:radial-gradient(circle at 20px 0, var(--scallop-color) 19px, transparent 19.5px);
  background-size:40px 24px;background-repeat:repeat-x;background-position:center bottom;
}
@media (max-width:600px){.section-scallop{height:16px;background-size:28px 16px;background-image:radial-gradient(circle at 14px 0, var(--scallop-color) 13px, transparent 13.5px)}}

.tx-hero-shot{
  display:block;width:clamp(220px,26vw,300px);height:auto;margin:0 auto var(--s6);
  filter:drop-shadow(0 18px 26px rgba(78,66,60,.28));
}



</style>
