/* Emilly Folly · Coloração Pessoal — página de vendas
   Paleta: marfim, ameixa profunda, vinho e ouro champanhe. */
:root {
  --papel: #FBF7F2;
  --marfim: #F4ECE2;
  --areia: #E9DCCB;
  --tinta: #2A1B22;
  --tinta-2: #5A4750;
  --vinho: #6B2638;
  --ameixa: #3A1F2B;
  --ouro: #B08D57;
  --ouro-claro: #DCC59E;
  --linha: rgba(42, 27, 34, .14);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --raio: 22px;
  --sombra: 0 30px 60px -30px rgba(58, 31, 43, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 300 17px/1.65 var(--sans);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--vinho); font-weight: 500; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.caixa { width: min(1120px, 100% - 40px); margin-inline: auto; }
.caixa--estreita { width: min(760px, 100% - 40px); }
section { padding: clamp(72px, 10vw, 128px) 0; }

.sobre-titulo {
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 18px;
}
.sobre-titulo::before {
  content: ""; display: inline-block; width: 28px; height: 1px;
  background: currentColor; vertical-align: middle; margin-right: 12px;
}

.cabeca { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 6vw, 64px); }
.cabeca h2 { font-size: clamp(34px, 5vw, 54px); }
.cabeca__sub { margin-top: 20px; color: var(--tinta-2); }
.cabeca--esq { text-align: left; margin-left: 0; }
.cabeca--claro h2 { color: var(--papel); }
.cabeca--claro h2 em { color: var(--ouro-claro); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px;
  background: var(--ameixa); color: var(--papel);
  border-radius: 999px; text-decoration: none;
  font: 500 15px/1 var(--sans); letter-spacing: .06em;
  box-shadow: 0 14px 30px -14px rgba(58, 31, 43, .7), inset 0 0 0 1px rgba(220, 197, 158, .35);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.botao:hover { transform: translateY(-2px); background: var(--vinho); }
.botao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.botao .ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.botao--ouro { background: linear-gradient(135deg, #C9A86E, #A9844C); color: var(--ameixa); }
.botao--ouro:hover { background: linear-gradient(135deg, #D6B87F, #B08D57); }
.botao--linha { background: transparent; color: var(--ameixa); box-shadow: inset 0 0 0 1px var(--ameixa); }
.botao--linha:hover { background: var(--ameixa); color: var(--papel); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251, 247, 242, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo__in { width: min(1120px, 100% - 40px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { text-decoration: none; display: flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1; }
.marca__nome { font: italic 500 26px/1 var(--serif); color: var(--ameixa); }
.marca__sub { font: 500 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ouro); margin-top: 6px; }
.topo__wa {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; text-decoration: none; color: var(--ameixa);
  font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--ameixa);
  transition: background .2s, color .2s;
}
.topo__wa:hover { background: var(--ameixa); color: var(--papel); }

/* ---------- hero ---------- */
.hero {
  padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(220, 197, 158, .45), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(107, 38, 56, .08), transparent 70%),
    var(--papel);
  overflow: hidden;
}
.hero__in { width: min(1120px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; }
.hero h1 em { display: block; }
.hero__sub { margin-top: 24px; font-size: clamp(17px, 1.6vw, 19px); color: var(--tinta-2); max-width: 520px; }
.hero__fatos { display: flex; gap: 0; margin-top: 32px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); max-width: 520px; }
.hero__fatos li { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; }
.hero__fatos li + li { border-left: 1px solid var(--linha); }
.hero__fatos strong { font: 500 28px/1 var(--serif); color: var(--vinho); }
.hero__fatos span { font-size: 13px; color: var(--tinta-2); margin-top: 6px; line-height: 1.3; }
.hero__acao { margin-top: 32px; }
.hero__apoio { margin-top: 14px; font-size: 14px; color: var(--tinta-2); }
.hero__apoio strong { font-weight: 500; color: var(--tinta); }

/* leque de cartelas */
.leque { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin-inline: auto; }
.leque__laminas { position: absolute; inset: 0; }
.leque .l {
  position: absolute; left: calc(50% - 30px); bottom: 16%;
  width: 60px; height: 64%;
  border-radius: 30px 30px 10px 10px;
  transform-origin: 50% calc(100% - 22px);
  transform: rotate(var(--r));
  box-shadow: 0 10px 24px -10px rgba(42, 27, 34, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: transform 1.3s cubic-bezier(.2, .8, .2, 1);
}
.leque .l::after { /* furo do pino */
  content: ""; position: absolute; left: 50%; bottom: 14px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--papel); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.l1  { --r: -66deg; background: linear-gradient(#F7C9A9, #F2A595 45%, #A9D8CB); }
.l2  { --r: -54deg; background: linear-gradient(#F4C27A, #EB8A3C 50%, #7FB85A); }
.l3  { --r: -42deg; background: linear-gradient(#FFC93C, #FF5A5F 50%, #00A99D); }
.l4  { --r: -30deg; background: linear-gradient(#D7E1F0, #E6BFD1 50%, #A7C3DE); }
.l5  { --r: -18deg; background: linear-gradient(#9AB0D3, #C2577A 50%, #5B7DB1); }
.l6  { --r:  -6deg; background: linear-gradient(#C7B7BE, #A99AA8 50%, #7E8FA6); }
.l7  { --r:   6deg; background: linear-gradient(#CDB79A, #B59B7C 50%, #8E9476); }
.l8  { --r:  18deg; background: linear-gradient(#E0A458, #C1652F 50%, #6B7B2E); }
.l9  { --r:  30deg; background: linear-gradient(#B07A3A, #7A3420 50%, #2F4A43); }
.l10 { --r:  42deg; background: linear-gradient(#FF4F86, #E4002B 50%, #0047AB); }
.l11 { --r:  54deg; background: linear-gradient(#ECEAF4, #B0124F 50%, #1F3A93); }
.l12 { --r:  66deg; background: linear-gradient(#6B2A44, #3E0E2A 50%, #0B2545); }
html.anima .leque:not(.ok) .l { transform: rotate(0deg); }
.leque__pino {
  position: absolute; left: 50%; bottom: calc(16% + 15px); width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F3E2BE, #A9844C 70%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); z-index: 2;
}
.leque__legenda {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font: italic 400 22px/1.2 var(--serif); color: var(--tinta-2);
}
.leque__legenda em { font: italic 600 30px/1 var(--serif); color: var(--vinho); }

/* ---------- frase ---------- */
.frase { background: var(--ameixa); color: var(--papel); text-align: center; padding: clamp(64px, 9vw, 112px) 20px; position: relative; }
.frase::before, .frase::after { content: ""; position: absolute; left: 50%; width: 1px; height: 40px; background: var(--ouro); opacity: .6; }
.frase::before { top: 0; } .frase::after { bottom: 0; }
.frase p { font: 400 clamp(30px, 4.6vw, 52px)/1.15 var(--serif); max-width: 860px; margin-inline: auto; }
.frase em { color: var(--ouro-claro); }

/* ---------- dimensões ---------- */
.dimensoes { background: var(--papel); }
.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dim { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px 28px 30px; box-shadow: var(--sombra); }
.dim h3 { font-size: 30px; margin-top: 22px; }
.dim p { margin-top: 10px; color: var(--tinta-2); font-size: 16px; }
.dim__barra { display: block; height: 14px; border-radius: 99px; }
.dim__barra--temp { background: linear-gradient(90deg, #D9822B, #E8B04A 30%, #EDE6DD 50%, #A7C3DE 70%, #3F64A6); }
.dim__barra--prof { background: linear-gradient(90deg, #F6EEE6, #C9A88A 40%, #7A4A3A 75%, #2A1B22); }
.dim__barra--int  { background: linear-gradient(90deg, #A99AA8, #B68A98 40%, #D9456E 75%, #E4002B); }

/* ---------- 12 estações ---------- */
.estacoes { background: linear-gradient(180deg, var(--ameixa), #24131B); color: var(--papel); }
.estacoes .sobre-titulo { color: var(--ouro-claro); }
.grade-est { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.est { border: 1px solid rgba(220, 197, 158, .25); border-radius: var(--raio); padding: 26px 22px 22px; background: rgba(255, 255, 255, .03); }
.est h3 { font: italic 500 30px/1 var(--serif); color: var(--ouro-claro); margin-bottom: 18px; }
.cartela { display: grid; grid-template-columns: 74px repeat(5, 1fr); align-items: center; gap: 5px; margin-top: 10px; }
.cartela span { font-size: 13px; letter-spacing: .04em; color: rgba(251, 247, 242, .8); }
.c { display: block; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.estacoes__nota { margin-top: 28px; text-align: center; font-size: 13px; color: rgba(251, 247, 242, .6); }
/* amostras ilustrativas */
.pc1{background:#F7C6A3}.pc2{background:#F4A79D}.pc3{background:#9ED9C8}.pc4{background:#F6E08A}.pc5{background:#A9C8F0}
.pq1{background:#F28C38}.pq2{background:#E8B04A}.pq3{background:#7FB85A}.pq4{background:#E8664F}.pq5{background:#F4C27A}
.pb1{background:#FF5A5F}.pb2{background:#00A99D}.pb3{background:#FFC300}.pb4{background:#FF7F3F}.pb5{background:#2E86DE}
.vc1{background:#C9D6EA}.vc2{background:#E8BFD0}.vc3{background:#B7D9D3}.vc4{background:#D8C7E6}.vc5{background:#9FB7D9}
.vf1{background:#5B7DB1}.vf2{background:#C2577A}.vf3{background:#7A6FA8}.vf4{background:#3F8A8C}.vf5{background:#9AA9C4}
.vs1{background:#A99AA8}.vs2{background:#8FA3A6}.vs3{background:#C49A9F}.vs4{background:#7E8FA6}.vs5{background:#B8A88E}
.os1{background:#B59B7C}.os2{background:#9A8F6A}.os3{background:#C08A74}.os4{background:#7F8B74}.os5{background:#A89070}
.oq1{background:#C1652F}.oq2{background:#D49A2A}.oq3{background:#6B7B2E}.oq4{background:#A64B2A}.oq5{background:#E0A458}
.op1{background:#6B2E1F}.op2{background:#4F5D2F}.op3{background:#8C3B1E}.op4{background:#2F4A43}.op5{background:#9C6B2E}
.ib1{background:#E4002B}.ib2{background:#0047AB}.ib3{background:#00A86B}.ib4{background:#FF1493}.ib5{background:#F4F4F8}
.if1{background:#1F3A93}.if2{background:#B0124F}.if3{background:#5B2A86}.if4{background:#0F6B6B}.if5{background:#E8E8F0}
.ip1{background:#4A0E2E}.ip2{background:#0B2545}.ip3{background:#1B4D3E}.ip4{background:#6B1A24}.ip5{background:#111}

/* ---------- passos ---------- */
.passos { background: var(--marfim); }
.lista-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linha); }
.passo { padding: 36px 32px 8px; position: relative; }
.passo + .passo { border-left: 1px solid var(--linha); }
.passo__n { font: italic 400 64px/1 var(--serif); color: var(--ouro); display: block; }
.passo h3 { font-size: 28px; margin-top: 16px; }
.passo p { margin-top: 10px; color: var(--tinta-2); font-size: 16px; }

/* ---------- o que leva ---------- */
.leva { background: var(--papel); }
.leva__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.paleta {
  position: relative; aspect-ratio: 4 / 5; max-width: 400px; margin-inline: auto;
  background: linear-gradient(160deg, #fff, var(--marfim));
  border-radius: 28px; padding: 34px 30px 70px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linha);
  transform: rotate(-3deg);
}
.paleta::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(176, 141, 87, .45); border-radius: 20px; pointer-events: none; }
.paleta__f { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.f1 { background: #C1652F; } .f2 { background: #E0A458; } .f3 { background: #6B7B2E; }
.f4 { background: #A64B2A; } .f5 { background: #D9B38C; } .f6 { background: #2F4A43; }
.paleta__rotulo { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font: italic 500 24px/1 var(--serif); color: var(--ameixa); }
.itens li { position: relative; padding: 16px 0 16px 40px; border-bottom: 1px solid var(--linha); color: var(--tinta-2); }
.itens li::before {
  content: ""; position: absolute; left: 4px; top: 22px; width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(#E4002B, #FFC300, #00A99D, #1F3A93, #C2577A, #E4002B);
  box-shadow: 0 0 0 3px var(--papel), 0 0 0 4px var(--ouro-claro);
}
.itens b { color: var(--tinta); font-weight: 500; }

/* ---------- depoimento ---------- */
.prova { background: var(--marfim); }
.prova__in { text-align: center; max-width: 860px; margin-inline: auto; }
.prova__aspas { display: block; font: italic 400 120px/.6 var(--serif); color: var(--ouro); height: 56px; }
.prova blockquote { margin: 0; font: italic 400 clamp(30px, 4.4vw, 48px)/1.2 var(--serif); color: var(--ameixa); }
.prova figcaption { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; }
.prova figcaption b { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.prova figcaption span { color: var(--tinta-2); font-size: 14px; }

/* ---------- para quem é ---------- */
.paraquem { background: var(--papel); }
.pq { display: grid; gap: 14px; max-width: 760px; margin-inline: auto; }
.pq li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; background: #fff; border-radius: 18px; border: 1px solid var(--linha); font-size: 18px; }
.pq__m { flex: none; width: 10px; height: 10px; margin-top: 10px; border-radius: 50%; background: var(--vinho); box-shadow: 0 0 0 5px rgba(107, 38, 56, .12); }

/* ---------- sobre ---------- */
.sobre { background: linear-gradient(180deg, var(--marfim), var(--areia)); }
.sobre__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.selo { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#F7C6A3, #F28C38, #FF5A5F, #C9D6EA, #5B7DB1, #A99AA8, #B59B7C, #C1652F, #6B2E1F, #E4002B, #1F3A93, #4A0E2E, #F7C6A3);
  box-shadow: var(--sombra); }
.selo__anel { position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--marfim) 75%);
  box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .5), 0 0 0 6px rgba(251, 247, 242, .5); }
.selo__ef { position: relative; z-index: 1; font: italic 500 clamp(96px, 14vw, 140px)/1 var(--serif); color: var(--ameixa); letter-spacing: -.04em; }
.sobre h2 { font-size: clamp(44px, 6vw, 72px); }
.sobre__texto > p:not(.sobre-titulo) { margin-top: 20px; color: var(--tinta-2); }
.sobre__fala { margin: 26px 0 0; padding-left: 22px; border-left: 2px solid var(--ouro); font: italic 400 24px/1.35 var(--serif); color: var(--ameixa); }
.link-insta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ouro); color: var(--vinho); }

/* ---------- oferta ---------- */
.oferta { background: var(--papel); }
.cartao {
  position: relative; max-width: 640px; margin-inline: auto; text-align: center;
  background: linear-gradient(165deg, #3A1F2B, #24131B); color: var(--papel);
  border-radius: 32px; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  box-shadow: 0 40px 80px -36px rgba(36, 19, 27, .8);
}
.cartao::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(220, 197, 158, .35); border-radius: 24px; pointer-events: none; }
.cartao .sobre-titulo { color: var(--ouro-claro); }
.cartao h2 { font-size: clamp(32px, 4.6vw, 48px); }
.cartao h2 em { color: var(--ouro-claro); }
.preco { display: flex; flex-direction: column; align-items: center; margin: 30px 0 26px; }
.preco__rot { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(251, 247, 242, .7); }
.preco__val { font: 500 clamp(72px, 10vw, 96px)/1 var(--serif); color: var(--papel); margin-top: 8px; }
.preco__val small { font-size: .38em; vertical-align: .9em; margin-right: 6px; color: var(--ouro-claro); }
.preco__det { font-size: 14px; color: rgba(251, 247, 242, .75); margin-top: 8px; }
.cartao__lista { display: grid; gap: 8px; margin: 0 auto 32px; max-width: 420px; text-align: left; }
.cartao__lista li { padding-left: 26px; position: relative; color: rgba(251, 247, 242, .88); font-size: 16px; }
.cartao__lista li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 1px; background: var(--ouro-claro); }
.cartao .botao { width: 100%; max-width: 420px; }
.cartao__nota { margin-top: 16px; font-size: 14px; color: rgba(251, 247, 242, .7); }

.presente {
  max-width: 640px; margin: 24px auto 0; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 24px 26px; border-radius: 22px; background: var(--marfim); border: 1px solid var(--linha);
}
.presente h3 { font-size: 26px; }
.presente p { font-size: 15px; color: var(--tinta-2); margin-top: 4px; }
.presente__laco { width: 52px; height: 52px; border-radius: 14px; position: relative;
  background: linear-gradient(90deg, transparent 44%, var(--vinho) 44% 56%, transparent 56%), linear-gradient(transparent 44%, var(--vinho) 44% 56%, transparent 56%), var(--ouro-claro); }
.presente .botao { min-height: 48px; padding: 0 22px; font-size: 14px; }

/* ---------- dúvidas ---------- */
.duvidas { background: var(--marfim); }
details { border-bottom: 1px solid var(--linha); }
details:first-of-type { border-top: 1px solid var(--linha); }
summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font: 500 22px/1.3 var(--serif); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 300 28px/1 var(--sans); color: var(--ouro); transition: transform .3s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding: 0 0 22px; color: var(--tinta-2); }

/* ---------- rodapé ---------- */
.rodape { background: #1E1016; color: var(--papel); padding: 56px 0 0; }
.rodape__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 48px; }
.rodape .marca__nome { color: var(--papel); font-size: 32px; display: block; }
.rodape .marca__sub { display: block; margin-top: 10px; line-height: 1.5; }
.rodape__links { display: flex; flex-direction: column; gap: 6px; }
.rodape__links a { text-decoration: none; color: rgba(251, 247, 242, .82); min-height: 44px; display: inline-flex; align-items: center; }
.rodape__links a:hover { color: var(--ouro-claro); }
.rodape__fita { height: 6px; background: linear-gradient(90deg, #F7C6A3, #F28C38, #FF5A5F, #C9D6EA, #5B7DB1, #A99AA8, #B59B7C, #C1652F, #6B2E1F, #E4002B, #1F3A93, #4A0E2E); }

/* ---------- barra fixa (celular) ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(251, 247, 242, .96); border-top: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform .35s ease;
}
.barra.vem { transform: translateY(0); }
.barra__preco { font: 500 24px/1 var(--serif); color: var(--ameixa); display: flex; flex-direction: column; }
.barra__preco small { font: 400 12px/1.2 var(--sans); color: var(--tinta-2); margin-top: 4px; }
.barra .botao { flex: 1; min-height: 50px; padding: 0 16px; font-size: 14px; }

/* ---------- entradas (à prova de falha: só esconde com html.anima) ---------- */
html.anima .anim { opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
html.anima .anim.ok { opacity: 1; transform: none; }
html.anima .d1 { transition-delay:  80ms; }
html.anima .d2 { transition-delay: 160ms; }
html.anima .d3 { transition-delay: 240ms; }
html.anima .d4 { transition-delay: 320ms; }
html.anima .d5 { transition-delay: 400ms; }
html.anima .d6 { transition-delay: 480ms; }
html.anima .anim--sobe { transform: translateY(22px); }
html.anima .anim--surge { transform: scale(.96); }
html.anima .anim--pop { transform: translateY(18px) scale(.98); }
html.anima .anim--lado { transform: translateX(-20px); }
html.anima .anim.ok { transform: none; }
.paleta { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }

/* ---------- responsivo ---------- */
@media (min-width: 900px) { .barra { display: none; } }
@media (max-width: 980px) {
  .grade-est { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero__in { grid-template-columns: 1fr; gap: 24px; }
  .leque { max-width: 360px; }
  .dims, .lista-passos { grid-template-columns: 1fr; }
  .passo + .passo { border-left: 0; border-top: 1px solid var(--linha); }
  .passo { padding: 28px 4px 24px; }
  .leva__in, .sobre__in { grid-template-columns: 1fr; }
  .sobre__texto { text-align: center; }
  .sobre__fala { text-align: left; }
  .presente { grid-template-columns: auto 1fr; }
  .presente .botao { grid-column: 1 / -1; }
  .rodape { padding-bottom: 76px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grade-est { grid-template-columns: 1fr; }
  .hero__fatos strong { font-size: 24px; }
  .hero__fatos li { padding: 14px 8px; }
  .hero .botao { width: 100%; }
  .marca__nome { font-size: 22px; }
  .topo__wa { padding: 0 16px; font-size: 12px; }
  .pq li { font-size: 16px; padding: 18px 20px; }
  .cartela { grid-template-columns: 78px repeat(5, 1fr); }
  .leque__legenda { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.anima .anim { opacity: 1; transform: none; }
  html.anima .leque .l { transform: rotate(var(--r)); }
}

/* ---------- retrato da Emilly (foto do perfil, 320 px: fica em círculo pequeno) ---------- */
.retrato { position: relative; margin: 0 auto; width: 200px; aspect-ratio: 1; padding: 7px; border-radius: 50%;
  background: conic-gradient(from 200deg, #F7C6A3, #F28C38, #FF5A5F, #C9D6EA, #5B7DB1, #A99AA8, #B59B7C, #C1652F, #6B2E1F, #E4002B, #1F3A93, #4A0E2E, #F7C6A3);
  box-shadow: var(--sombra); }
.retrato img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid var(--papel); background: var(--marfim); }

/* assinatura no topo do hero */
.assina { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 22px;
  padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--linha); }
.assina img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--ouro-claro); }
.assina span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; color: var(--tinta-2); }
.assina b { font: italic 500 19px/1.1 var(--serif); color: var(--ameixa); }

/* ---------- celular primeiro: ajustes finos para telas pequenas ---------- */
@media (max-width: 560px) {
  section { padding: 60px 0; }
  .caixa, .caixa--estreita, .hero__in, .topo__in { width: calc(100% - 32px); }
  .topo__in { height: 60px; }
  .hero { padding: 24px 0 48px; }
  .hero h1 { font-size: 40px; }
  .hero__sub { margin-top: 16px; font-size: 16px; }
  .hero__fatos { margin-top: 22px; }
  .hero__acao { margin-top: 22px; }
  .leque { max-width: 290px; margin-top: 4px; }
  .leque__legenda { font-size: 17px; }
  .leque__legenda em { font-size: 24px; }
  .frase { padding: 52px 20px; }
  .frase p { font-size: 28px; }
  .cabeca { margin-bottom: 30px; }
  .cabeca h2 { font-size: 32px; }
  .cabeca__sub { font-size: 15px; }
  .dims { gap: 14px; }
  .dim { padding: 22px 20px; display: grid; grid-template-columns: 1fr; }
  .dim h3 { font-size: 26px; margin-top: 14px; }
  .grade-est { grid-template-columns: 1fr 1fr; gap: 10px; }
  .est { padding: 16px 12px 14px; border-radius: 16px; }
  .est h3 { font-size: 24px; margin-bottom: 8px; }
  .cartela { grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
  .cartela span { grid-column: 1 / -1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .lista-passos { border-top: 0; gap: 12px; }
  .passo { display: grid; grid-template-columns: 54px 1fr; column-gap: 8px; padding: 20px 18px; background: rgba(255, 255, 255, .6); border-radius: 18px; border: 1px solid var(--linha) !important; }
  .passo__n { font-size: 44px; grid-row: span 2; }
  .passo h3 { font-size: 23px; margin-top: 2px; }
  .passo p { font-size: 15px; margin-top: 6px; }
  .paleta { max-width: 240px; padding: 22px 20px 54px; gap: 10px; }
  .paleta__rotulo { font-size: 20px; bottom: 18px; }
  .itens li { padding: 13px 0 13px 36px; font-size: 15px; }
  .itens li::before { top: 17px; }
  .prova blockquote { font-size: 28px; }
  .prova__aspas { font-size: 96px; height: 44px; }
  .retrato { width: 168px; }
  .sobre h2 { font-size: 42px; }
  .sobre__fala { font-size: 21px; }
  .cartao { border-radius: 26px; padding: 36px 20px 30px; }
  .cartao h2 { font-size: 30px; }
  .preco__val { font-size: 76px; }
  summary { font-size: 20px; padding: 18px 40px 18px 0; }
}