
:root{color-scheme:light;--ink:#152036;--muted:#62718a;--blue:#1464f4;--blue-hover:#0c50d4;--line:#e8edf4;--surface:#f4f6f9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}a{color:inherit}
:focus-visible{outline:3px solid #5e92fb;outline-offset:3px}
.skip-link{position:absolute;left:8px;top:-60px;padding:10px;background:white;z-index:10}.skip-link:focus{top:8px}
.shell{max-width:980px;padding:0 28px;margin:0 auto}
.masthead{padding-top:31px;font-size:14px;letter-spacing:-.15px}.masthead a{text-decoration:none}
.tool{position:relative;max-width:530px;margin:68px auto 0;text-align:center}
h1{font-weight:740;letter-spacing:-1.65px;font-size:clamp(36px,4.1vw,49px);line-height:1.11;margin:0}
.lead{color:var(--muted);font-size:16px;line-height:1.5;margin:15px 0 27px}
.copy-button{display:block;width:100%;min-height:58px;border-radius:11px;border:1px solid var(--blue);background:var(--blue);color:#fff;font-weight:680;font-size:16px;transition:background .12s}
.copy-button:hover{background:var(--blue-hover)}.copy-button:active{background:#063cad}
.copy-feedback{margin:0;min-height:22px;padding-top:7px;font-size:13px;color:#137047;line-height:20px;font-weight:600}
.copy-feedback[data-state=error]{color:#b23a31}
.alternative{display:block;max-width:max-content;margin:2px auto 0;padding:10px 12px;border:0;background:transparent;color:#1c5fce;font-size:14px;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.manual{margin:12px auto 0;max-width:420px;color:var(--muted);font-size:13px;text-align:left}
.manual input{width:100%;background:white;color:var(--ink);padding:12px;border-radius:8px;margin-top:8px;border:1px solid var(--line)}
.how{margin:29px auto 0;max-width:550px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.how ol{list-style:none;padding:0;margin:0;display:flex;align-items:center;justify-content:space-between;gap:9px}
.how li{display:flex;gap:8px;align-items:center;white-space:nowrap;color:#273549;font-size:13px}
.how li span{display:grid;place-items:center;background:#f0f5ff;color:#184c9d;width:32px;height:32px;border-radius:50%;font-weight:650}
.advertisement{max-width:550px;margin:24px auto 0}.ad-caption{text-align:center;color:#59677e;font-size:10px;letter-spacing:2px;margin-bottom:9px}.ad-placeholder{background:#f1f3f6;border-radius:9px;height:94px}
.faqs{max-width:550px;margin:28px auto 0}.faqs details{border-bottom:1px solid var(--line)}.faqs details:first-child{border-top:1px solid var(--line)}
.faqs summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:58px;gap:16px;font-size:14px;list-style:none}
.faqs summary::-webkit-details-marker{display:none}.faqs summary:after{content:'+';font-size:23px;color:#8690a1;font-weight:350}.faqs details[open] summary:after{content:'−'}
.faqs p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.footer{display:flex;justify-content:center;gap:25px;padding:36px 0 27px;color:var(--muted);font-size:12px}.footer a{text-decoration:none}.footer a:hover,.back-link:hover{text-decoration:underline}
.page{max-width:660px;margin:54px auto 0}.page-kicker{color:var(--muted);font-size:13px;margin:0 0 12px}
.page h1{font-size:clamp(33px,4vw,46px);line-height:1.15;letter-spacing:-1.3px}
.prose{max-width:600px}.prose p{font-size:16px;line-height:1.75;margin:19px 0;color:#334155}.prose h2{font-size:19px;margin:31px 0 6px;letter-spacing:-.3px}
.family-figure{margin:33px 0 18px}.family-figure img{display:block;width:100%;height:auto;border-radius:13px}.family-figure figcaption{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.6;text-align:center}
.about-footnote{margin-top:20px}.about-footnote p{font-size:13px;color:var(--muted);line-height:1.65}
.back-link{display:inline-block;text-decoration:none;color:#1759cb;margin-top:18px;font-size:14px}
@media(max-width:600px){.shell{padding:0 22px}.masthead{padding-top:24px;font-size:14px}.tool{margin-top:46px;text-align:left}h1{font-size:clamp(34px,9.2vw,41px);letter-spacing:-1.55px}.lead{font-size:15px;margin:14px 0 23px}.copy-button{font-size:15px;min-height:56px}.copy-feedback{text-align:center}.alternative{text-align:center;font-size:13px}.how{margin-top:23px;padding-bottom:23px}.how li{font-size:12px;gap:5px}.how li span{width:28px;height:28px}.faqs{margin-top:27px}.faqs summary{font-size:13px}.page{margin-top:44px}.page h1{font-size:35px}.prose p{font-size:15px}.family-figure{margin:25px -8px 14px}.footer{padding-top:29px}}
@media(max-width:350px){.shell{padding:0 15px}.how li{font-size:11px;gap:3px}.how li span{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.copy-button{transition:none}}

/* Aime v4: pequenos refinamentos de segurança visual e acessibilidade. */
[hidden]{display:none!important}
button:disabled{cursor:wait;opacity:.75}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media (max-width:380px){.how li{font-size:12px}.how ol{gap:5px}}

/* Slot comercial: AdSense escolhe a altura. Nunca limitar o anúncio à prévia de 94px. */
.advertisement[data-preview="false"] .ad-placeholder{height:auto;min-height:250px;background:transparent}
.advertisement[data-preview="false"] .adsbygoogle{display:block;min-height:250px}

.nojs{max-width:530px;margin:18px auto;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
/* Sem publicidade ativa, não deixe duas linhas separadoras consecutivas. */
.advertisement[hidden]+.faqs{margin-top:10px}
.advertisement[hidden]+.faqs details:first-child{border-top:0}

/* v4.3: opções progressivas, botões alinhados e leitura móvel previsível. */
.alternative { line-height:1.4; max-width:100%; }
.last-alternative { margin-top:0; color:#415b80; text-decoration-style:dotted; }
.copy-feedback { padding-inline:8px; }
@media(max-width:600px) {
  .alternative { margin-left:auto; margin-right:auto; text-align:center; }
  .how li { flex:0 1 auto; }
  .how li span { flex:0 0 auto; }
}
@media(max-width:350px) {
  .how ol { gap:4px; }
  .how li { font-size:11px; }
}

/* Sem JavaScript: retirar botão inerte e oferecer cópia manual acessível. */
.nojs{max-width:530px;margin:46px auto 0;text-align:left}
.nojs p{line-height:1.65;margin:0 0 12px}
.nojs input{width:100%;max-width:420px;padding:13px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff}

/* Áreas de toque de links secundários ampliadas sem poluir a composição. */
.masthead a{display:inline-block;padding:6px 0;margin:-6px 0}
.footer a{display:inline-flex;min-height:32px;align-items:center;margin:-7px 0}
.back-link{padding:8px 0;margin-top:10px}


/* v4.5 — anúncio único adaptativo; não há duplicação de slots entre dispositivos.
   Escolha de negócio: desktop >=1100px lateral 300x250; demais abaixo da ferramenta.
   Montagem estática do anúncio ativo é feita pelo build para evitar CLS na inicialização. */
.home-layout{width:100%;max-width:960px;margin-inline:auto}
.advertisement{width:100%;max-width:550px;margin:24px auto 0;text-align:center}
.advertisement:not([hidden]) .ad-placeholder{width:min(300px,100%);min-height:250px;margin-inline:auto;background:transparent;border-radius:9px}
.advertisement[data-preview="true"] .ad-placeholder{
  height:250px;min-height:250px;background:#eff3f8;border:1px dashed #c8d1dd;
  display:grid;place-items:center;padding:12px;color:#5b6b81;font-size:12px;letter-spacing:.1px
}
.advertisement:not([hidden]) .ad-caption{margin-bottom:10px}
.advertisement:not([hidden])+.faqs{margin-top:30px}
.advertisement:not([hidden])+.faqs details:first-child{border-top:1px solid var(--line)}
.advertisement[data-preview="false"] .ad-placeholder{min-height:250px;height:auto}
.advertisement[data-preview="false"] .adsbygoogle{display:block;min-height:250px;max-width:100%;margin-inline:auto}
@media(min-width:1100px){
  .shell{max-width:1110px}
  .home-layout.ad-layout{
    display:grid;grid-template-columns:minmax(0,550px) 300px;column-gap:86px;
    grid-template-rows:auto auto auto;align-items:start;justify-content:center;
    margin:68px auto 0
  }
  .home-layout.ad-layout>.tool{grid-column:1;grid-row:1;margin:0 auto;max-width:530px;width:100%}
  .home-layout.ad-layout>.how{grid-column:1;grid-row:2;margin:29px 0 0;width:100%;max-width:none}
  .home-layout.ad-layout>.faqs{grid-column:1;grid-row:3;margin:10px 0 0;max-width:none;width:100%}
  .home-layout.ad-layout>.faqs details:first-child{border-top:0}
  .home-layout.ad-layout>.advertisement{grid-column:2;grid-row:1 / 4;width:300px;max-width:300px;margin:46px 0 0}
  .home-layout.ad-layout>.advertisement .ad-placeholder{width:300px}
  .home-layout.ad-layout>.advertisement:not([hidden])+.faqs{margin-top:10px}
  .home-layout.ad-layout>.advertisement:not([hidden])+.faqs details:first-child{border-top:0}
}
@media(max-width:1099px){.home-layout{display:block}}

/* v4.6: assinatura simples, sem painel ou divisória adicional. */
.about-signature{margin-top:8px!important;color:#526178!important;font-size:14px!important}
.about-footnote a{color:#1759cb;text-underline-offset:3px;overflow-wrap:anywhere}

/* v4.7 — contato curto, sem formulário nem anúncios. */
.contact-page .contact-address{margin:20px 0;font-size:clamp(18px,3vw,22px);font-weight:650;overflow-wrap:anywhere}
.contact-page .contact-address a{color:#1759cb;text-decoration:underline;text-underline-offset:4px}

/* v4.9 — identidade aprovada; arte original, sem redesenho. */
.masthead{padding-top:19px;line-height:0}
.masthead a{display:inline-flex;align-items:center;padding:0;margin:0;min-height:54px}
.site-logo{display:block;width:208px;height:auto;max-width:100%;object-fit:contain}
@media(max-width:600px){
 .masthead{padding-top:15px}
 .masthead a{min-height:48px}
 .site-logo{width:174px}
 .tool{margin-top:40px}
}
@media(min-width:601px){.tool{margin-top:58px}}
/* Cabeçalho equilibrado no grid comercial */
@media(min-width:1100px){.home-layout.ad-layout{margin-top:58px}}

/* v5.0 — informacao util apos a ferramenta, sem alterar a area de conversao. */
.quick-guide{max-width:550px;margin:28px auto 0;color:#334155}
.quick-guide h2{font-size:19px;line-height:1.3;letter-spacing:-.3px;color:var(--ink);margin:0 0 12px;font-weight:720}
.quick-guide p{font-size:14px;line-height:1.75;margin:11px 0 0;color:#526178}
.quick-guide+.faqs{margin-top:25px}
@media(max-width:600px){.quick-guide{margin-top:26px}.quick-guide h2{font-size:18px}.quick-guide p{font-size:14px}}
@media(min-width:1100px){
 .home-layout.ad-layout>.quick-guide{grid-column:1;grid-row:3;margin:26px 0 0;max-width:none;width:100%}
 .home-layout.ad-layout>.faqs{grid-column:1;grid-row:4;margin:23px 0 0;max-width:none;width:100%}
 .home-layout.ad-layout>.advertisement{grid-row:1 / 5}
}


/* v5.1 — SOMENTE /sobre/: Lolla é detalhe de encerramento, não um banner. */
.about-page .about-ending{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 0 4px}
.about-page .about-ending .about-signature{margin:0!important;align-self:center}
.about-page .family-figure{flex:0 0 142px;width:142px;margin:0;text-align:center}
.about-page .family-figure img{width:100%;height:auto;display:block;border-radius:0}
.about-page .family-figure figcaption{font-size:11px;line-height:1.4;margin:2px 0 0;color:var(--muted);text-align:center}
@media(max-width:600px){
 .about-page .about-ending{gap:12px;margin:8px 0 3px}
 .about-page .family-figure{flex-basis:114px;width:114px;margin:0}
 .about-page .family-figure figcaption{font-size:10.5px}
}
