/* GERADO por ferramentas/montar-tema-blog.mjs. Não edite: mude src/styles/ e rode o script. */
:root,[data-theme="claro"]{--azul-50:#eff6fa;--azul-100:#dfedf6;--azul-200:#c3dcee;--azul-300:#9bc6e2;--azul-400:#69a9d4;--azul-500:#378cc6;--azul-600:#317bad;--azul-700:#2b6791;--azul-800:#245272;--azul-900:#1d3c53;--magenta-50:#fdf2f3;--magenta-100:#fce5e7;--magenta-200:#f9ced1;--magenta-300:#f5acb3;--magenta-400:#f0838d;--magenta-500:#eb5a67;--magenta-600:#cd525e;--magenta-700:#a24652;--magenta-800:#773b46;--magenta-900:#4c2f3a;--amarelo-50:#fffdf1;--amarelo-100:#fefbe3;--amarelo-200:#fef8ca;--amarelo-300:#fdf4a6;--amarelo-400:#fcee7a;--amarelo-500:#fbe84d;--amarelo-600:#dbcc48;--amarelo-700:#aca441;--amarelo-800:#7e7c3a;--amarelo-900:#505433;--tinta:#14202a;--tinta-90:#1d2a34;--tinta-80:#3a4650;--tinta-60:#5f6b75;--tinta-40:#98a1a9;--mescla:#d5d2cb;--papel-2:#ede8df;--papel:#f6f3ed;--branco:#ffffff;--surface-page:var(--papel);--surface-alt:var(--papel-2);--surface-card:var(--branco);--surface-inverse:var(--tinta);--text:var(--tinta);--text-soft:var(--tinta-80);--text-muted:var(--tinta-60);--text-inverse:var(--papel);--border:var(--mescla);--border-control:var(--tinta-60);--action:var(--azul-600);--action-hover:var(--azul-700);--on-action:var(--branco);--link:var(--azul-700);--brand-azul:var(--azul-500);--on-azul:var(--tinta);--brand-magenta:var(--magenta-500);--on-magenta:var(--tinta);--brand-amarelo:var(--amarelo-500);--on-amarelo:var(--tinta);--focus:var(--tinta);--danger:var(--magenta-700);--tag-azul-bg:var(--azul-100);--tag-azul-fg:var(--azul-800);--tag-magenta-bg:var(--magenta-100);--tag-magenta-fg:var(--magenta-800);--tag-amarelo-bg:var(--amarelo-200);--tag-amarelo-fg:var(--tinta);--shadow-card:0 1px 2px rgba(20, 32, 42, 0.06), 0 8px 24px rgba(20, 32, 42, 0.08);--shadow-pop:0 16px 48px rgba(20, 32, 42, 0.16);--whatsapp:#25D366;--whatsapp-hover:#1DA851;--on-whatsapp:var(--tinta);--shadow-offset:4px 4px 0 #14202a;}
[data-theme="escuro"]{--surface-page:var(--tinta);--surface-alt:var(--tinta-90);--surface-card:var(--tinta-90);--surface-inverse:var(--papel);--text:var(--papel);--text-soft:var(--mescla);--text-muted:var(--tinta-40);--text-inverse:var(--tinta);--border:var(--tinta-80);--border-control:var(--tinta-40);--action:var(--azul-400);--action-hover:var(--azul-300);--on-action:var(--tinta);--link:var(--azul-400);--brand-azul:var(--azul-500);--on-azul:var(--tinta);--brand-magenta:var(--magenta-500);--on-magenta:var(--tinta);--brand-amarelo:var(--amarelo-500);--on-amarelo:var(--tinta);--focus:var(--amarelo-500);--danger:var(--magenta-400);--tag-azul-bg:var(--azul-900);--tag-azul-fg:var(--azul-200);--tag-magenta-bg:var(--magenta-900);--tag-magenta-fg:var(--magenta-200);--tag-amarelo-bg:var(--amarelo-900);--tag-amarelo-fg:var(--amarelo-200);--shadow-card:0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);--shadow-pop:0 16px 48px rgba(0, 0, 0, 0.5);--whatsapp:#25D366;--whatsapp-hover:#2fe077;--on-whatsapp:var(--tinta);--shadow-offset:4px 4px 0 #fbe84d;}

:root{--font-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--font-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/Archivo-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--page-max:1200px;--gutter:24px;--ig-post-w:1080px;--ig-post-h:1350px;--ig-margin:72px;}

:root{--radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-btn:20px;--radius-lg:28px;--radius-xl:40px;--radius-full:9999px;--stroke-hairline:1px;--stroke-strong:2px;--stroke-focus:3px;}

.display-2xl{font-family:var(--font-display);font-size:120px;line-height:0.9;font-weight:900;}
.display-xl{font-family:var(--font-display);font-size:88px;line-height:0.92;font-weight:900;}
.display-lg{font-family:var(--font-display);font-size:64px;line-height:0.95;font-weight:900;}
.display-md{font-family:var(--font-display);font-size:44px;line-height:1;font-weight:900;}
.display-sm{font-family:var(--font-display);font-size:32px;line-height:1;font-weight:900;}
.heading-lg{font-family:var(--font-sans);font-size:28px;line-height:1.2;font-weight:800;}
.heading-md{font-family:var(--font-sans);font-size:22px;line-height:1.25;font-weight:700;}
.heading-sm{font-family:var(--font-sans);font-size:18px;line-height:1.3;font-weight:700;}
.body-lg{font-family:var(--font-sans);font-size:18px;line-height:1.6;font-weight:400;}
.body{font-family:var(--font-sans);font-size:16px;line-height:1.6;font-weight:400;}
.body-sm{font-family:var(--font-sans);font-size:14px;line-height:1.5;font-weight:400;}
.caption{font-family:var(--font-sans);font-size:12px;line-height:1.4;font-weight:500;}
.button{font-family:var(--font-sans);font-size:16px;line-height:1;font-weight:700;}
.button-lg{font-family:var(--font-sans);font-size:18px;line-height:1;font-weight:700;}
.label{font-family:var(--font-sans);font-size:14px;line-height:1.2;font-weight:700;}
.eyebrow{font-family:var(--font-sans);font-size:14px;line-height:1.2;font-weight:500;letter-spacing:0.32em;}
.ig-headline{font-family:var(--font-display);font-size:112px;line-height:0.92;font-weight:900;}
.ig-sub{font-family:var(--font-sans);font-size:40px;line-height:1.25;font-weight:500;}
.ig-label{font-family:var(--font-sans);font-size:28px;line-height:1;font-weight:700;letter-spacing:0.28em;}
.display-2xl,.display-xl,.display-lg,.display-md,.display-sm,.ig-headline,.eyebrow,.ig-label{text-transform:uppercase;margin:0;}
.eyebrow{color:var(--text-soft);}

/* Personalize Estampas: classes de componentes (prefixo pe-). Cores, tipos, espacos e raios vem de outros tokens/*.css. */
.pe-root { font-family: var(--font-sans); color: var(--text); background: var(--surface-page); }
.pe-root *, .pe-root *::before, .pe-root *::after { box-sizing: border-box; }

.pe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-5); border: var(--stroke-strong) solid transparent;
  border-radius: var(--radius-btn); background: var(--action); color: var(--on-action);
  font: 700 16px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.pe-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-offset); }
.pe-btn:active { transform: translate(0, 0); box-shadow: none; }
.pe-btn:focus-visible, .pe-input:focus-visible, .pe-choice:focus-visible, .pe-link:focus-visible, .pe-faq summary:focus-visible {
  outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px;
}
.pe-btn--primary:hover { background: var(--action-hover); }
.pe-btn--magenta { background: var(--brand-magenta); color: var(--on-magenta); }
.pe-btn--amarelo { background: var(--brand-amarelo); color: var(--on-amarelo); }
.pe-btn--outline { background: transparent; color: var(--text); border-color: var(--border-control); }
.pe-btn--ghost { background: transparent; color: var(--link); padding: 0 var(--space-3); border-color: transparent; }
.pe-btn--ghost:hover { transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.pe-btn--inverse { background: var(--papel); color: var(--tinta); }
.pe-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.pe-btn--lg { height: 56px; padding: 0 var(--space-6); font-size: 18px; }
.pe-btn[disabled], .pe-btn[aria-disabled="true"] { background: var(--mescla); color: var(--tinta-60); border-color: transparent; cursor: not-allowed; transform: none; box-shadow: none; }
.pe-btn--whatsapp { background: var(--whatsapp); color: var(--on-whatsapp); }
.pe-btn--whatsapp:hover { background: var(--whatsapp-hover); }
.pe-btn__wa-icon { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/whatsapp.svg") center / contain no-repeat; mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/whatsapp.svg") center / contain no-repeat; }
.pe-link { color: var(--link); font-weight: 600; text-underline-offset: 3px; }

.pe-tag {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 14px;
  border-radius: var(--radius-full); background: var(--surface-alt); color: var(--text);
  font: 700 13px/1 var(--font-sans); white-space: nowrap;
}
.pe-tag--azul { background: var(--tag-azul-bg); color: var(--tag-azul-fg); }
.pe-tag--magenta { background: var(--tag-magenta-bg); color: var(--tag-magenta-fg); }
.pe-tag--amarelo { background: var(--tag-amarelo-bg); color: var(--tag-amarelo-fg); }
.pe-tag--solido { background: var(--brand-amarelo); color: var(--on-amarelo); }
.pe-tag--escuro { background: var(--surface-inverse); color: var(--text-inverse); }
.pe-tag__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--_dot, currentColor); flex: none; }

.pe-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pe-label { font: 700 14px/1.2 var(--font-sans); color: var(--text); }
.pe-input {
  height: 48px; width: 100%; padding: 0 var(--space-4); border-radius: var(--radius-btn);
  border: var(--stroke-strong) solid var(--border-control); background: var(--surface-card); color: var(--text);
  font: 400 16px/1.2 var(--font-sans);
}
.pe-input::placeholder { color: var(--text-muted); }
.pe-textarea { height: auto; min-height: 112px; padding: 14px var(--space-4); border-radius: var(--radius-md); resize: vertical; }
select.pe-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314202a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.pe-hint { font: 400 13px/1.4 var(--font-sans); color: var(--text-muted); }
.pe-field--error .pe-input { border-color: var(--danger); }
.pe-error { font: 600 13px/1.4 var(--font-sans); color: var(--danger); }
.pe-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pe-choice {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-full); border: var(--stroke-strong) solid var(--border-control);
  background: var(--surface-card); color: var(--text); font: 600 14px/1 var(--font-sans); cursor: pointer;
}
.pe-choice[aria-pressed="true"] { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.pe-choice:hover:not([aria-pressed="true"]) { border-color: var(--text); background: var(--surface-alt); }

.pe-card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface-card);
  border: var(--stroke-hairline) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.pe-card__media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface-alt); color: var(--text); position: relative; }
.pe-card__media--azul { background: var(--brand-azul); color: var(--tinta); }
.pe-card__media--magenta { background: var(--brand-magenta); color: var(--tinta); }
.pe-card__media--amarelo { background: var(--brand-amarelo); color: var(--tinta); }
.pe-card__media--tinta { background: var(--tinta); color: var(--papel); }
.pe-card__media svg { width: 58%; height: auto; }
.pe-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.pe-card__title { margin: 0; }
.pe-card__text { margin: 0; color: var(--text-soft); }
.pe-card--flat { box-shadow: none; }

.pe-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.pe-step { display: flex; flex-direction: column; gap: var(--space-3); }
.pe-step__n { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-amarelo); color: var(--on-amarelo); font: 900 30px/56px var(--font-display); text-align: center; }
.pe-step__title { margin: 0; }
.pe-step__text { margin: 0; color: var(--text-soft); }

.pe-faq { border-top: var(--stroke-hairline) solid var(--border); }
.pe-faq details { border-bottom: var(--stroke-hairline) solid var(--border); }
.pe-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; list-style: none; font: 700 18px/1.3 var(--font-sans); color: var(--text); }
.pe-faq summary::-webkit-details-marker { display: none; }
.pe-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-alt); font: 700 20px/1 var(--font-sans); }
.pe-faq details[open] summary::after { content: "\2212"; background: var(--brand-amarelo); color: var(--on-amarelo); }
.pe-faq p { margin: 0 0 var(--space-4); max-width: 62ch; color: var(--text-soft); font: 400 16px/1.6 var(--font-sans); }

.pe-cta {
  position: relative; overflow: hidden; display: grid; gap: var(--space-4); justify-items: start;
  padding: var(--space-8) var(--space-7); border-radius: var(--radius-xl);
  background: var(--action); color: var(--on-action);
}
.pe-cta > * { position: relative; z-index: 1; }
.pe-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='5' cy='5' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='15' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(120deg, transparent 35%, #000 100%); mask-image: linear-gradient(120deg, transparent 35%, #000 100%); }
.pe-cta__title { margin: 0; max-width: 16ch; }
.pe-cta__text { margin: 0; max-width: 52ch; font: 400 18px/1.55 var(--font-sans); }

.pe-stripes { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; }
.pe-stripes span:nth-child(1) { flex: 3; background: var(--azul-500); }
.pe-stripes span:nth-child(2) { flex: 1; background: var(--magenta-500); }
.pe-stripes span:nth-child(3) { flex: 1; background: var(--amarelo-500); }

.pe-announce { background: var(--tinta); color: var(--papel); font: 500 13px/1 var(--font-sans); text-align: center; padding: 10px var(--space-4); }
.pe-header { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface-page); border-bottom: var(--stroke-hairline) solid var(--border); }
.pe-header__logo { height: 52px; width: auto; display: block; }
.pe-nav { display: flex; gap: var(--space-5); margin: 0 auto 0 var(--space-4); padding: 0; list-style: none; }
.pe-nav a { color: var(--text); font: 600 15px/1 var(--font-sans); text-decoration: none; padding: 8px 0; border-bottom: var(--stroke-strong) solid transparent; }
.pe-nav a:hover, .pe-nav a[aria-current="page"] { border-bottom-color: var(--brand-azul); }
.pe-nav .pe-caret::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.pe-footer { background: var(--tinta); color: var(--papel); padding: var(--space-8) var(--space-5) var(--space-5); }
.pe-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); margin: var(--space-6) 0; }
.pe-footer h4 { margin: 0 0 var(--space-3); font: 700 13px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-40); }
.pe-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pe-footer a { color: var(--papel); text-decoration: none; font: 400 15px/1.3 var(--font-sans); }
.pe-footer a:hover { text-decoration: underline; }
.pe-footer__small { color: var(--tinta-40); font: 400 13px/1.5 var(--font-sans); }

.pe-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; padding: var(--space-8) var(--space-5); }
.pe-hero__copy { display: grid; gap: var(--space-4); justify-items: start; }
.pe-hero__title { max-width: 9ch; }
.pe-hero__lead { margin: 0; max-width: 46ch; color: var(--text-soft); }
.pe-hero__visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-xl); background: var(--brand-azul); overflow: hidden; display: grid; place-items: center; color: var(--tinta); }

.pe-bg { position: relative; isolation: isolate; background-color: var(--surface-page); }
.pe-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pe-bg--meiatinta::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='4' cy='4' r='1.5' fill='%23378cc6'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23378cc6'/%3E%3C/svg%3E");
  opacity: .28; -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 62%); mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
}
.pe-bg--malha::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M0 1 L5 7 L10 1' fill='none' stroke='%2314202a' stroke-width='1.3'/%3E%3C/svg%3E");
  opacity: .055;
}
.pe-bg--registro::before {
  background-image:
    linear-gradient(90deg, var(--tinta) 0 22px, transparent 0), linear-gradient(90deg, var(--tinta) 0 22px, transparent 0),
    linear-gradient(0deg, var(--tinta) 0 22px, transparent 0), linear-gradient(0deg, var(--tinta) 0 22px, transparent 0),
    linear-gradient(90deg, var(--tinta) 0 22px, transparent 0), linear-gradient(90deg, var(--tinta) 0 22px, transparent 0),
    linear-gradient(0deg, var(--tinta) 0 22px, transparent 0), linear-gradient(0deg, var(--tinta) 0 22px, transparent 0);
  background-size: 22px 1px, 1px 22px, 1px 22px, 22px 1px, 22px 1px, 1px 22px, 1px 22px, 22px 1px;
  background-repeat: no-repeat;
  background-position: left 18px top 18px, left 18px top 18px, right 18px top 18px, right 18px top 18px, left 18px bottom 18px, left 18px bottom 18px, right 18px bottom 18px, right 18px bottom 18px;
  opacity: .5;
}
.pe-bg--sobreposicao::before {
  background-image:
    radial-gradient(circle at calc(100% - 110px) 40px, var(--azul-100) 0 84px, transparent 85px),
    radial-gradient(circle at calc(100% - 50px) 104px, var(--magenta-100) 0 84px, transparent 85px),
    radial-gradient(circle at calc(100% - 140px) 112px, var(--amarelo-200) 0 84px, transparent 85px);
  background-blend-mode: multiply;
}
.pe-bg--tinta { background-color: var(--tinta); color: var(--papel); }
.pe-bg--tinta .pe-btn:hover { box-shadow: 4px 4px 0 var(--amarelo-500); }
.pe-bg--tinta .pe-btn--inverse:hover { box-shadow: 4px 4px 0 var(--azul-300); }
.pe-bg--tinta .pe-btn--amarelo:hover { box-shadow: 4px 4px 0 var(--brand-magenta); }
.pe-bg--tinta::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='4' cy='4' r='1.5' fill='%23f6f3ed'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23f6f3ed'/%3E%3C/svg%3E");
  opacity: .1; -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 62%); mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
}
.pe-bg--trama::before {
  background-image:
    repeating-linear-gradient(0deg, #14202a 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, #14202a 0 1px, transparent 1px 7px);
  opacity: .16;
}
.pe-bg--meiotom::before {
  background-image: radial-gradient(circle, #eb5a67 0 3.6px, transparent 3.7px);
  background-size: 13px 13px;
  opacity: .4;
  -webkit-mask-image: radial-gradient(circle at 78% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 78% 30%, #000 0%, transparent 70%);
}
.pe-bg--respingo::before {
  background-image:
    radial-gradient(circle at 12% 22%, #14202a 0 5px, transparent 6px),
    radial-gradient(circle at 24% 30%, #14202a 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 68%, #14202a 0 7px, transparent 8px),
    radial-gradient(circle at 70% 78%, #14202a 0 3px, transparent 4px),
    radial-gradient(circle at 90% 20%, #14202a 0 3px, transparent 4px),
    radial-gradient(circle at 45% 85%, #14202a 0 2px, transparent 3px);
  opacity: .18;
}
.pe-bg--rodo::before {
  background-image: repeating-linear-gradient(115deg, transparent 0 18px, rgba(20,32,42,.05) 18px 20px, transparent 20px 46px, rgba(20,32,42,.09) 46px 49px);
}
.pe-cmyk { display: inline-flex; gap: 4px; }
.pe-cmyk i { width: 14px; height: 14px; display: block; }
.pe-cmyk i:nth-child(1) { background: var(--azul-500); }
.pe-cmyk i:nth-child(2) { background: var(--magenta-500); }
.pe-cmyk i:nth-child(3) { background: var(--amarelo-500); }
.pe-cmyk i:nth-child(4) { background: var(--tinta); }

/* --- Base ---------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

/* Rolagem suave, mas respeitando quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

img { max-width: 100%; height: auto; }

/* Pular para o conteúdo — primeiro foco da página, para teclado e leitor de tela. */
.site-skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  transform: translateY(-200%);
  background: var(--tinta); color: var(--papel);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-btn);
  font: 700 15px/1 var(--font-sans); text-decoration: none;
}
.site-skip:focus { transform: translateY(0); }

/* --- Utilitários de layout do site --------------------------------------- */
/* O kit define os tokens --page-max e --gutter mas não traz uma classe de
   contêiner. Estas são utilidades do site, não componentes novos do sistema. */

.site-wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ritmo vertical do README: space-8 em tela média, space-9 em tela grande. */
.site-section { padding-block: var(--space-7); }

@media (min-width: 768px) {
  .site-section { padding-block: var(--space-8); }
}

@media (min-width: 1200px) {
  .site-section { padding-block: var(--space-9); }
}

.site-section--alt { background: var(--surface-alt); }

/* Faixa magenta para quebrar a sequência de tons pastel. O texto secundário do kit
   (--text-soft, tinta-80) cai para cerca de 2,9:1 sobre magenta, então aqui tudo
   usa --on-magenta (tinta, cerca de 4,9:1). */
.site-section--magenta { background: var(--brand-magenta); color: var(--on-magenta); }
.site-section--magenta .site-head p,
.site-section--magenta .pe-step__text { color: var(--on-magenta); }

/* Textura de malha (D29): colunas de pontos em V, como um jersey tricotado. Só nas bordas de
   cima e de baixo da seção, esmaecendo para o centro, então nunca passa por trás do texto.
   Cada ponto é um V claro com uma sombra escura deslocada 1px, o que dá o relevo. Fica
   atrás do conteúdo e sem interceptar clique. */
/* A textura fica em :root porque também é usada nas amostras de malha de Produtos (D45). */
:root { --malha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' viewBox='0 0 9 8'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M1.5 2.2l3 4.4 3-4.4' stroke='%23000' stroke-opacity='.10'/%3E%3Cpath d='M1.5 1.2l3 4.4 3-4.4' stroke='%23fff' stroke-opacity='.20'/%3E%3C/g%3E%3C/svg%3E"); }
.site-section--magenta { position: relative; overflow: hidden; }
.site-section--magenta::before,
.site-section--magenta::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  height: clamp(48px, 7vw, 88px);
  background-image: var(--malha);
}
.site-section--magenta::before {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.site-section--magenta::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}
.site-section--magenta > * { position: relative; z-index: 1; }

/* Cabeçalho de seção: eyebrow, título display e uma frase de apoio. */
.site-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
/* Frase de apoio do cabeçalho de seção: ocupa a largura inteira do contêiner, sem
   quebrar antes do fim da linha (o limite de 62ch deixava metade da faixa vazia). */
.site-head p { margin: 0; max-width: none; color: var(--text-soft); }
.site-head--center { justify-items: center; text-align: center; }
.site-head--center p { text-align: center; }

.site-grid { display: grid; gap: var(--space-5); }

@media (min-width: 620px) {
  .site-grid--2,
  .site-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .site-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .site-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Cinco cartões de segmento: 1 · 2 · 3 · 5 conforme a largura. */
@media (min-width: 620px)  { .site-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .site-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .site-grid--5 { grid-template-columns: repeat(5, 1fr); } }

.site-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-actions--centro { justify-content: center; }

/* O kit define .pe-btn com white-space: nowrap, pensado para rótulos curtos.
   Rótulos longos da copy ("Não sabe qual escolher? Fale com a gente") estouram
   a tela em 375px e criam rolagem horizontal. Em telas estreitas o botão passa
   a quebrar linha, mantendo os 48px como altura mínima. */
@media (max-width: 619px) {
  .pe-btn {
    white-space: normal;
    height: auto;
    min-height: 48px;
    padding-block: var(--space-3);
    text-align: center;
  }
  .site-actions > .pe-btn { width: 100%; }
  /* O flutuante é ícone, não acompanha a regra acima. */
  .site-zap { width: 56px; min-height: 0; height: 56px; padding: 0; }
}

/* --- Tipografia fluida ---------------------------------------------------- */
/* As classes display-* do kit têm tamanho fixo (display-xl = 88px), o que
   estoura em 375px. Os clamps abaixo preservam o topo em tela grande. */

.display-2xl { font-size: clamp(56px, 11vw, 120px); }
.display-xl  { font-size: clamp(40px,  8vw,  88px); }
.display-lg  { font-size: clamp(34px,  6vw,  64px); }
.display-md  { font-size: clamp(28px,  4vw,  44px); }
.display-sm  { font-size: clamp(24px,  3vw,  32px); }

/* O eyebrow do kit tem letter-spacing 0.32em, desenhado para frases curtas.
   A linha de apoio do hero tem 76 caracteres e ocupa 3 linhas em 375px.
   Em tela estreita o espaçamento cede; a partir de 620px volta ao do kit. */
@media (max-width: 619px) {
  .eyebrow { font-size: 12px; letter-spacing: 0.18em; }
}

/* --- Cabeçalho ------------------------------------------------------------ */

.pe-header { flex-wrap: wrap; row-gap: var(--space-3); }

/* Menu fixo no topo que some ao rolar para baixo e volta ao rolar para cima.
   A classe é alternada por um script pequeno no Base.astro; sem JavaScript o
   cabeçalho simplesmente fica fixo. Transição de 120ms, o teto do kit (D16). */
.pe-header {
  position: sticky; top: 0; z-index: 40;
  transition: transform .12s ease;
}
.pe-header.site-header--oculto { transform: translateY(-100%); }

/* O cabeçalho fixo cobriria o título de uma âncora alcançada rolando para cima. */
html { scroll-padding-top: 96px; }

.site-header__cta { display: none; }

/* Menu sanfona no celular, sem JavaScript: <details>/<summary>. */
.site-menu { margin-left: auto; }
.site-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-4);
  border: var(--stroke-strong) solid var(--border-control);
  border-radius: var(--radius-btn);
  font: 700 15px/1 var(--font-sans); color: var(--text);
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }
.site-menu[open] > summary { background: var(--surface-alt); }

.site-menu .pe-nav {
  flex-direction: column; align-items: flex-start;
  gap: var(--space-2); margin: var(--space-4) 0 0; width: 100%;
}
.site-menu .pe-nav a { display: block; width: 100%; padding: var(--space-3) 0; }

@media (min-width: 1000px) {
  .site-menu > summary { display: none; }

  /* Um <details> fechado esconde o conteúdo pela folha de estilo do navegador,
     e esconder o <summary> não basta. As duas regras abaixo cobrem os dois
     mecanismos: o slot interno (motores antigos) e ::details-content (novos).
     Sem isso o menu desaparece no desktop. */
  .site-menu > nav { display: block; }
  .site-menu::details-content { content-visibility: visible; block-size: auto; }

  .site-menu { margin: 0 auto 0 var(--space-4); }
  .site-menu .pe-nav { flex-direction: row; align-items: center; gap: var(--space-5); margin: 0; }
  .site-menu .pe-nav a { width: auto; padding: 8px 0; }
  .site-header__cta { display: inline-flex; }
}


/* --- Rodapé --------------------------------------------------------------- */

.pe-footer__grid { grid-template-columns: 1fr; }

@media (min-width: 620px)  { .pe-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pe-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }

/* --- Botão flutuante de WhatsApp ------------------------------------------ */

.site-zap {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 50;
  width: 56px; height: 56px; padding: 0;
  border-radius: var(--radius-full); box-shadow: var(--shadow-pop);
}
.site-zap svg { width: 28px; height: 28px; }

/* Em telas estreitas o flutuante cobre o botão de envio do formulário.
   A página do formulário marca o body e o botão sai do caminho. */
@media (max-width: 619px) {
  body[data-form] .site-zap { bottom: calc(var(--space-4) + 72px); }
}

/* Com os CTAs em largura total no celular, o flutuante pousa em cima deles.
   Reduzir o diâmetro e encostar no canto diminui a sobreposição; os botões
   ganham um respiro à direita na última linha de ações de cada bloco.
   Os dois fazem a mesma coisa (abrir o WhatsApp), então a sobreposição é
   redundante, não destrutiva — mas continua feia. */
@media (max-width: 619px) {
  .site-zap { width: 48px; height: 48px; right: var(--space-3); bottom: var(--space-3); }
  .site-zap svg { width: 24px; height: 24px; }
}