/* Kit da Prô: identidade de escola. Sobrepõe a base (styles.css): lousa verde com giz, papel de caderno, fita adesiva, formas de giz. */
:root {
  --ink: #23303a; --ink-2: #3b4852; --mute: #6d7a84; --line: #e2d9c3;
  --paper: #fbf5e6; --card: #fffdf7; --hl: #ffcf3f; --hl-2: #ffc107; --red: #ff6b6b; --ok: #2f9e6b;
  --lousa: #2f5d50; --lousa-2: #275044; --giz: #f4efe0; --azul: #7fc8f8; --rosa: #ffb4c4; --verde: #9ee0b8;
  --disp: "Nunito", "Bricolage Grotesque", system-ui, sans-serif; --body: "Nunito", "Inter", system-ui, sans-serif;
  --r: 18px;
}
body { font-weight: 600; }
h1, h2, h3 { letter-spacing: -.01em; }
h1 { font-weight: 900; } h2 { font-weight: 900; }
mark { background: linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 92%, transparent 92%); }

/* papel de caderno nas seções claras */
main > section:not(.hero):not(.pain):not(.final):not(.numbers) { background-image: repeating-linear-gradient(transparent 0 30px, rgba(35,48,58,.07) 30px 31px); background-color: var(--paper); }
.inside, .combo, .catalog, .how, .trust, .faq { position: relative; }

/* topbar e nav */
.topbar { background: var(--red); color: #fff; }
.topbar button { background: #fff; color: var(--red); border-color: #fff; }
.nav { background: rgba(47,93,80,.92); border-bottom: 3px solid #1f4237; }
.nav.scrolled { border-color: #1f4237; }
.logo { font-weight: 900; }
.nav__links a, .link { color: #dfe9e3; } .nav__links a:hover, .link:hover { color: #fff; }
.cart-btn { background: var(--lousa-2); border-color: #1f4237; color: #fff; }
.cart-btn__n { background: var(--hl); color: var(--ink); }

/* lousa */
.hero { background: var(--lousa); color: var(--giz); border-bottom: 10px solid #b98652; }
.hero::before { background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 6px 6px; opacity: .5; }
.hero__glow { background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 70%); }
.hero .kicker { color: #cfe2d8; }
.hero .kicker .dot { background: var(--hl); }
.hero h1 { text-transform: none; font-size: clamp(2.1rem, 6vw, 3.7rem); line-height: 1.08; }
.hero mark, .final mark { background: var(--hl); color: var(--ink); padding: 0 .16em; border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .lead { color: #dfe9e3; } .hero .lead strong { color: #fff; }
.hero .btn--primary { background: var(--hl); border-color: var(--hl); color: var(--ink); box-shadow: 0 6px 0 #c99a1c; animation: none; }
.hero .btn--primary:hover { box-shadow: 0 8px 0 #c99a1c; transform: translateY(-2px); }
.hero .btn--ghost { border-color: #9dc5b6; color: #fff; border-style: dashed; }
.hero .btn--ghost:hover { background: rgba(255,255,255,.08); }
.hero__selos li { color: #dfe9e3; border: 1.5px dashed #7fae9d; background: rgba(0,0,0,.12); }
.hero__giz { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }
.hero__giz svg { position: absolute; color: #fff; }
.stack__p { border: 6px solid #fff; border-radius: 4px; box-shadow: 0 24px 50px -22px rgba(0,0,0,.6); }
.stack__tag { background: var(--azul); color: var(--ink); }
.stamp { background: var(--red); box-shadow: 0 6px 0 #c94c4c; font-family: var(--disp); }
.ticker { background: #b98652; border-top: 0; background-image: repeating-linear-gradient(90deg, transparent 0 40px, rgba(0,0,0,.06) 40px 42px); }
.ticker span { color: #fff7e6; font-weight: 800; letter-spacing: .06em; }
.ticker span::after { background: var(--hl); }

/* números como adesivos */
.numbers { background: var(--paper); border-bottom: 0; }
.numbers__grid > div { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 18px 16px; box-shadow: 4px 4px 0 var(--ink); position: relative; }
.numbers__grid > div::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 54px; height: 16px; background: var(--azul); opacity: .85; border-radius: 2px; }
.numbers__grid > div:nth-child(2)::before { background: var(--rosa); } .numbers__grid > div:nth-child(3)::before { background: var(--verde); } .numbers__grid > div:nth-child(4)::before { background: var(--hl); }
.numbers b { color: var(--ink); }

/* dor: lousa 2 */
.pain { background: var(--lousa); color: var(--giz); }
.pain mark { background: var(--hl); color: var(--ink); }
.pain article { background: rgba(0,0,0,.14); border: 1.5px dashed #7fae9d; border-radius: 16px; }
.pain .num { color: var(--hl); } .pain p { color: #dfe9e3; }

/* eyebrow com giz de cera */
.eyebrow { color: var(--red); }
.eyebrow::before { background: var(--red); height: 4px; border-radius: 2px; }

/* galeria: fotos com fita adesiva */
.inside { background-color: var(--paper); }
.rail figure { position: relative; padding-top: 10px; }
.rail figure::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 70px; height: 20px; background: var(--rosa); opacity: .9; border-radius: 2px; z-index: 2; }
.rail figure:nth-child(2n)::before { background: var(--azul); transform: translateX(-50%) rotate(3deg); } .rail figure:nth-child(3n)::before { background: var(--verde); }
.rail img { border: 6px solid #fff; border-radius: 3px; box-shadow: 0 12px 24px -12px rgba(35,48,58,.45); }
.rail figcaption b { font-family: var(--disp); }

/* cards dos pacotes */
.card { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); background: var(--card); position: relative; overflow: visible; }
.card::before { content: ""; position: absolute; top: -10px; left: 24px; width: 64px; height: 18px; background: var(--hl); opacity: .95; border-radius: 2px; transform: rotate(-4deg); z-index: 3; }
.card:nth-child(3n+2)::before { background: var(--azul); } .card:nth-child(3n)::before { background: var(--rosa); }
.card--featured { outline: 0; }
.card--featured::after { content: "o mais pedido"; position: absolute; top: -12px; right: 14px; background: var(--red); color: #fff; font: 800 .7rem var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; transform: rotate(3deg); }
.card__cover img:first-child { border-radius: 12px 12px 0 0; }
.card__price { font-family: var(--disp); font-weight: 900; }
.btn { border-radius: 14px; font-weight: 800; }
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 5px 0 #c94c4c; }
.btn--primary:hover { background: #ff5c5c; box-shadow: 0 7px 0 #c94c4c; transform: translateY(-2px); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #c94c4c; }
.btn--dark { background: var(--lousa); border-color: var(--lousa); color: #fff; }
.btn.added { background: var(--ok); border-color: var(--ok); color: #fff; }

/* kit completo: caixa de giz de cera */
.combo__box { border: 2px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--hl); background: var(--card); }
.combo__box::before { content: "economize R$ 47"; background: var(--red); }
.tag { background: var(--lousa); color: var(--hl); border-radius: 999px; }
.combo__buy { background: var(--paper); border: 2px dashed var(--line); }
.combo__list li::marker { content: ""; }
.combo__list svg { color: var(--ok); }
.combo__covers img { border: 4px solid #fff; }

/* como funciona */
.steps li span { background: var(--hl); color: var(--ink); border-radius: 50%; font-weight: 900; }

/* confiança e FAQ */
.trust .src { border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.trust .src:nth-child(2) { box-shadow: 4px 4px 0 var(--red); } .trust .src:nth-child(3) { box-shadow: 4px 4px 0 var(--azul); }
.src__n { color: var(--red); }
.guarantee { background: #eaf7ef; border: 2px solid var(--ok); border-radius: 16px; }
.faq details { background: var(--card); border: 2px solid var(--line); border-radius: 14px; margin-bottom: 10px; padding: 0 18px; }
.faq summary { font-weight: 800; }
.faq summary::after { border-color: var(--red); }

/* final: lousa */
.final { background: var(--lousa); color: var(--giz); border-top: 10px solid #b98652; }
.final p { color: #dfe9e3; }
.final .btn--primary { border-color: var(--red); }
.foot { background: var(--paper); border-top: 2px dashed var(--line); }

/* carrinho e barra fixa */
.sticky { background: var(--lousa); border-radius: 18px; }
.sticky .btn { border-color: var(--hl); background: var(--hl); color: var(--ink); box-shadow: none; }
.sheet__panel { border-radius: 22px 0 0 22px; background: var(--paper); }
.bump { background: #fff4bf; border: 2px dashed var(--hl-2); border-radius: 14px; }
.done__icon { background: var(--ok); color: #fff; }

.numbers b small { font-size: .5em; }
.trust__grid .src { text-decoration: none; }
.card__area { text-transform: none; }
@media (max-width: 819px) { .sheet__panel { border-radius: 22px 22px 0 0; } }
.hero__selos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__selos li { font: 700 .76rem var(--mono); text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 7px 12px; }
h2, .final h2, .pain h2 { text-transform: none; }

/* ---- camada escola ---- */
.hero .kicker, .eyebrow, .stack__tag, .hero__seta b { font-family: "Patrick Hand", var(--mono); font-size: 1.05rem; letter-spacing: .02em; text-transform: none; }
.hero__giz { opacity: .5; }
.hero__giz svg, .hero__giz .gt { position: absolute; color: #fff; }
.hero__giz .gt { font: 400 2.2rem "Patrick Hand", cursive; transform: rotate(-6deg); }
.g1 { left: 2%; top: 8%; transform: rotate(-4deg); } .g2 { right: 4%; top: 6%; } .g3 { left: 46%; bottom: 8%; transform: rotate(8deg); } .g4 { left: 30%; top: 4%; }
.g5 { left: 6%; bottom: 14%; } .g6 { right: 8%; bottom: 18%; transform: rotate(4deg); } .g7 { left: 62%; top: 14%; font-size: 1.6rem; } .g8 { right: 30%; bottom: 6%; transform: rotate(12deg); } .g9 { left: 22%; bottom: 30%; transform: rotate(-10deg); }
@media (max-width: 859px) { .g3, .g6, .g7, .g9 { display: none; } .hero__giz { opacity: .35; } }
.hero__seta { display: inline-flex; align-items: flex-end; gap: 4px; color: var(--hl); margin-left: 4px; transform: translateY(-14px); }
.hero__seta b { font-weight: 400; font-size: 1.15rem; transform: rotate(-8deg); }
@media (max-width: 859px) { .hero__seta { display: none; } }

.giz { display: flex; justify-content: center; gap: 6px; padding: 14px 20px 0; background: var(--paper); }
.giz i { width: 22px; height: 46px; border-radius: 4px 4px 3px 3px; position: relative; background: var(--c); --c: #ff6b6b; transform: rotate(var(--r, 0deg)); }
.giz i::before { content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); border: 11px solid transparent; border-top: 0; border-bottom: 10px solid var(--c); }
.giz i::after { content: ""; position: absolute; inset: 14px 5px auto; height: 10px; background: rgba(255,255,255,.55); border-radius: 2px; }
.giz i:nth-child(2) { --c: #ff9f43; } .giz i:nth-child(3) { --c: #ffcf3f; } .giz i:nth-child(4) { --c: #9ee0b8; } .giz i:nth-child(5) { --c: #2f9e6b; } .giz i:nth-child(6) { --c: #7fc8f8; }
.giz i:nth-child(7) { --c: #3d7ed6; } .giz i:nth-child(8) { --c: #9b7bd6; } .giz i:nth-child(9) { --c: #ffb4c4; } .giz i:nth-child(10) { --c: #b98652; } .giz i:nth-child(11) { --c: #6d7a84; } .giz i:nth-child(12) { --c: #23303a; }
.giz i:nth-child(odd) { --r: -3deg; } .giz i:nth-child(even) { --r: 3deg; }
@media (max-width: 600px) { .giz i:nth-child(n+9) { display: none; } }

/* percevejos no mural */
.rail figure::before { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a9a, var(--red) 55%, #c94c4c); box-shadow: 0 3px 5px rgba(0,0,0,.35); top: 2px; transform: translateX(-50%); }
.rail figure:nth-child(2n)::before { background: radial-gradient(circle at 35% 30%, #b8e0ff, var(--azul) 55%, #4a9ad8); transform: translateX(-50%); }
.rail figure:nth-child(3n)::before { background: radial-gradient(circle at 35% 30%, #ffe08a, var(--hl) 55%, #c99a1c); }
.rail img { transform: rotate(-1.2deg); } .rail figure:nth-child(2n) img { transform: rotate(1.4deg); }
.rail figure:hover img { transform: translateY(-6px) rotate(0); }

.steps__ico { width: 54px; height: 54px; display: grid; place-items: center; background: var(--hl); border-radius: 50%; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* régua acima do rodapé */
.regua { height: 26px; background: #f2d38f; border-top: 2px solid #b98652; background-image: repeating-linear-gradient(90deg, #6b4b23 0 2px, transparent 2px 20px), repeating-linear-gradient(90deg, #6b4b23 0 2px, transparent 2px 100px); background-size: 20px 8px, 100px 16px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }

/* mural: papel de caderno com furos à esquerda nos cards */
.card::after { content: ""; position: absolute; left: 10px; top: 60px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); box-shadow: 0 34px 0 var(--paper), 0 34px 0 1.5px var(--line), 0 68px 0 var(--paper), 0 68px 0 1.5px var(--line); z-index: 2; }
.card--featured::after { content: "o mais pedido"; width: auto; height: auto; left: auto; box-shadow: none; background: var(--red); border: 0; }
.inside h2, .catalog h2, .trust h2, .data h2, .sec-head h2, .hero h1 { text-transform: none !important; }