/* Fora Lula - CSS estatico V5 */
:root {
  --verde:#077312;
  --verde-escuro:#07240e;
  --azul:#223645;
  --texto:#696a87;
  --branco:#fff;
  --largura:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--texto);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--verde);text-decoration:none}
a:hover{color:#ab094b}
img{display:block;max-width:100%;height:auto;border:0}
strong{font-weight:700}
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:10px 14px;background:#fff;color:#111;z-index:10001;outline:2px solid #111}

.main-grid{width:100%;max-width:var(--largura);margin:10px auto;display:grid;grid-template-columns:55% 45%;grid-template-areas:"hero side" "copy side";align-items:start;padding:0 15px}
.hero-link{grid-area:hero;display:block;padding-right:60px;margin-bottom:18px}
.hero-image{width:100%;aspect-ratio:1200/630;object-fit:cover}
.petition-copy{grid-area:copy;padding-right:60px;margin:0 0 30px;font-size:16px;line-height:24px;text-align:left}
.petition-copy p{margin:0 0 15px}
.petition-copy p:first-child{margin-top:10px}
.petition-copy h1,.petition-copy h2{color:var(--azul);font-weight:700;line-height:1.2;margin:.5rem 0 1rem}
.petition-copy h1{font-size:60px}
.petition-copy h2{font-size:50px}
.side{grid-area:side;min-width:0;content-visibility:auto;contain-intrinsic-size:700px}
.card{background:var(--branco);border-radius:25px;box-shadow:0 0 30px rgb(0 0 0 / .05)}
.counter-card{padding:10px 40px 20px;margin-bottom:10px;visibility:hidden}
.counter-card.is-ready{visibility:visible}
.counter-number{margin:.5rem 0 1rem;color:var(--azul);font-size:30px;font-weight:600;line-height:1.2;text-align:center}
.counter-label{margin:.5rem 0 1rem;color:var(--azul);font-size:15px;font-weight:600;line-height:1.2}
.form-card{margin-top:10px;padding:10px 40px 5px}
.form-title{margin:.5rem 0 1rem;color:var(--azul);font-size:20px;font-weight:600;line-height:1.2;text-align:center}
.tally-frame{display:block;width:100%;height:420px;border:0}
.form-note{margin:5px 0 1rem;color:var(--azul);font-size:16px;font-weight:500;line-height:1.2}

.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;align-items:center;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;text-align:center;opacity:0;visibility:hidden;transform:translateY(100%);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.sticky-bar.visivel{opacity:1;visibility:visible;transform:translateY(0)}
.sticky-button{display:inline-block;padding:16px 31px;background:var(--verde-escuro);border:3px solid var(--azul);border-radius:15px;color:#fff;font-size:20px;font-weight:600;line-height:1;text-align:center;transition:background-color .2s,border-color .2s}
.sticky-button:hover,.sticky-button:focus{background:var(--verde);border-color:#020101;color:#fff}

@media (max-width:1024px){
  .main-grid{grid-template-columns:1fr;grid-template-areas:"hero" "copy" "side";max-width:1024px;padding:0 15px}
  .hero-link,.petition-copy{padding-right:0}
  .petition-copy{margin-bottom:30px}
  .petition-copy h1{font-size:55px}
  .petition-copy h2{font-size:45px}
}
@media (max-width:767px){
  .main-grid{margin:0;max-width:none;padding:0;grid-template-areas:"hero" "copy" "side"}
  .hero-link{margin:0;padding:0}
  .petition-copy{margin:0 20px 10px;padding:0}
  .petition-copy h1{font-size:40px}
  .petition-copy h2{font-size:33px}
  .side{margin:0 20px}
  .counter-card,.form-card{padding:10px}
  .form-note{font-size:12px;line-height:1.3}
  .sticky-button{border-width:0;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky-bar,.sticky-button{transition:none}}
