@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@600;700;800;900&family=Montserrat:wght@500;600;700;800;900&display=swap');

:root{
  --mdb-black:#070707;
  --mdb-graphite:#11100f;
  --mdb-orange:#F28C18;
  --mdb-orange-strong:#E95A0C;
  --mdb-gold:#F6C02D;
  --mdb-green:#1F8A4C;
  --mdb-blue:#1E5AA8;
  --mdb-paper:#FFF8ED;
  --background:34 52% 96% !important;
  --foreground:0 0% 6% !important;
  --card:0 0% 100% !important;
  --card-foreground:0 0% 7% !important;
  --primary:30 89% 52% !important;
  --primary-foreground:0 0% 4% !important;
  --ring:30 89% 52% !important;
  --color-primary-600:26 100% 43% !important;
  --color-primary-500:30 89% 52% !important;
  --color-primary-400:43 92% 57% !important;
  --color-primary-100:34 100% 93% !important;
  --color-primary-700:18 90% 48% !important;
  --on-primary:0 0% 100% !important;
}

*{box-sizing:border-box;}
html,body,#root{font-family:'Barlow',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;max-width:100vw!important;overflow-x:hidden!important;}
body{margin:0;background:#070707!important;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
h1,h2,h3,.font-bold{font-family:'Barlow Condensed','Barlow',system-ui,sans-serif!important;letter-spacing:.01em;}
.bg-background{background-color:hsl(var(--background))!important;}
.text-foreground{color:hsl(var(--foreground))!important;}
.text-muted-foreground{color:#6F6254!important;}
.text-primary{color:var(--mdb-orange)!important;}.border-primary{border-color:var(--mdb-orange)!important;}.ring-ring{--tw-ring-color:rgba(242,140,24,.45)!important;}
.min-h-screen.bg-background{max-width:100vw!important;overflow-x:hidden!important;background:linear-gradient(180deg,#070707 0,#100c08 270px,#f6efe3 271px,#fffaf2 100%)!important;}

/* HERO: uma única foto, benefício claro, mobile-first */
.relative.h-64{
  width:100%!important;
  height:410px!important;
  overflow:hidden!important;
  isolation:isolate;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  box-shadow:0 22px 54px rgba(7,7,7,.30);
  background-image:
    linear-gradient(180deg,rgba(7,7,7,.68) 0%,rgba(7,7,7,.42) 34%,rgba(7,7,7,.88) 74%,rgba(233,90,12,.32) 100%),
    radial-gradient(circle at 76% 18%,rgba(246,192,45,.24),transparent 26%),
    url('/acacio-hero.jpg')!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-size:cover,cover,auto 96%!important;
  background-position:center,center,right -18px top 8px!important;
}
.relative.h-64 > *{position:absolute;z-index:2;}
.relative.h-64:before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--mdb-green) 0 28%,var(--mdb-gold) 28% 67%,var(--mdb-blue) 67% 100%) top/100% 6px no-repeat,
    repeating-linear-gradient(132deg,rgba(255,255,255,.055) 0 1px,transparent 1px 16px);
}
.relative.h-64:after{
  content:'';
  position:absolute;z-index:1;left:-16%;right:-16%;bottom:-92px;height:158px;pointer-events:none;
  background:linear-gradient(100deg,var(--mdb-orange-strong),var(--mdb-orange) 52%,var(--mdb-gold));
  border-radius:58% 42% 0 0/78% 90% 0 0;
  transform:rotate(-2deg);
  box-shadow:0 -18px 58px rgba(242,140,24,.26);
}
.absolute.inset-0.bg-gradient-to-t{inset:0!important;z-index:1!important;background:linear-gradient(to top,rgba(7,7,7,.54) 0%,rgba(7,7,7,.16) 44%,rgba(7,7,7,.04) 100%)!important;}
.absolute.top-6{top:18px!important;left:0!important;right:0!important;z-index:3!important;padding:0 16px!important;display:flex!important;justify-content:center!important;}
.absolute.top-6 img{display:block!important;width:56vw!important;max-width:220px!important;height:56px!important;object-fit:contain!important;filter:drop-shadow(0 12px 20px rgba(0,0,0,.44));}
.absolute.bottom-8{left:0!important;right:0!important;bottom:30px!important;z-index:3!important;width:100%!important;padding-left:16px!important;padding-right:16px!important;text-align:center!important;}
.absolute.bottom-8:before{
  content:'A FORÇA DA CONEXÃO NO AMAPÁ';
  display:inline-flex;align-items:center;justify-content:center;min-height:26px;margin:0 auto 8px;padding:6px 9px 5px;border-radius:999px;
  color:#130701;background:linear-gradient(90deg,var(--mdb-gold),var(--mdb-orange));box-shadow:0 12px 28px rgba(242,140,24,.28);
  font-family:'Barlow Condensed','Barlow',sans-serif;font-size:.61rem;font-weight:900;letter-spacing:.042em;text-transform:uppercase;
}
.absolute.bottom-8 h1{display:block!important;width:100%!important;max-width:330px!important;margin:0 auto!important;font-size:2.04rem!important;line-height:.94!important;white-space:normal!important;overflow-wrap:break-word!important;text-transform:uppercase;color:#fff!important;text-shadow:0 10px 30px rgba(0,0,0,.55);}
.absolute.bottom-8 p{max-width:330px!important;margin:8px auto 0!important;color:#fff4dd!important;font-size:.84rem!important;line-height:1.14!important;font-weight:800!important;text-shadow:0 8px 22px rgba(0,0,0,.42);}
.absolute.bottom-8 p:after{content:'Comunidade • Rede • Causas • Cidade • Mobilização';display:block;width:auto;max-width:312px;margin:9px auto 0;padding:6px 8px 5px;border-radius:999px;color:#120701;background:rgba(255,255,255,.92);box-shadow:0 14px 30px rgba(0,0,0,.18);font-family:'Barlow Condensed','Barlow',sans-serif;font-size:.58rem;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-shadow:none;}

/* FORM */
.container.max-w-lg,.container.max-w-lg.mx-auto,.container.max-w-lg.mx-auto.px-4,div.container.max-w-lg.mx-auto.px-4.\-mt-8.relative.z-10.pb-12{width:92vw!important;max-width:92vw!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;}
.container.max-w-lg.mx-auto.px-4.\-mt-8{margin-top:-32px!important;}
div.container.max-w-lg.mx-auto.px-4.\-mt-8.relative.z-10.pb-12{padding-bottom:120px!important;}
.container.max-w-lg:before{content:'';display:block;height:8px;width:min(48vw,205px);margin:0 auto 14px;border-radius:999px;background:linear-gradient(90deg,var(--mdb-green) 0 24%,var(--mdb-gold) 24% 62%,var(--mdb-blue) 62% 100%);box-shadow:0 10px 24px rgba(242,140,24,.24);}
.container.max-w-lg .shadow-xl{position:relative;overflow:hidden;width:100%!important;max-width:100%!important;min-width:0!important;border:1px solid rgba(242,140,24,.20)!important;border-radius:22px!important;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,249,240,.99))!important;box-shadow:0 30px 82px rgba(7,7,7,.24),0 2px 0 rgba(255,255,255,.72) inset!important;}
.container.max-w-lg .shadow-xl:before{content:'';position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,var(--mdb-orange-strong),var(--mdb-orange),var(--mdb-gold));z-index:1;}
.container.max-w-lg .shadow-xl > div:first-child:not(:last-child){position:relative;z-index:2;width:100%!important;padding:24px 18px 16px!important;text-align:center!important;background:linear-gradient(135deg,#11100f,#241207 58%,#3A1A08)!important;border-bottom:1px solid rgba(242,140,24,.22);}
.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) [class*='CardTitle'],.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) div,.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h1,.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h2,.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h3{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;color:#fff!important;font-family:'Barlow Condensed','Barlow',sans-serif!important;font-size:1.08rem!important;font-weight:900!important;line-height:1.05!important;letter-spacing:.045em;text-transform:uppercase;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;}
.container.max-w-lg .shadow-xl > div:last-child{position:relative;z-index:2;width:100%!important;max-width:100%!important;min-width:0!important;padding-left:14px!important;padding-right:14px!important;box-sizing:border-box!important;}
.container.max-w-lg .shadow-xl form,.container.max-w-lg .shadow-xl form *{max-width:100%!important;}
form,form > div,form [class*='FormItem']{width:100%!important;min-width:0!important;}
label{font-family:'Barlow','Inter',sans-serif!important;font-size:1rem!important;font-weight:800!important;color:#151515!important;letter-spacing:.015em;}
input,textarea,button[role='combobox']{width:100%!important;min-width:0!important;min-height:52px!important;border-radius:17px!important;border:1.5px solid rgba(17,16,15,.16)!important;background:#fffdf9!important;color:#151515!important;font-size:1rem!important;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 24px rgba(7,7,7,.045)!important;}
textarea{min-height:106px!important;resize:vertical;}input::placeholder,textarea::placeholder{color:#8D8580!important;}input:focus,textarea:focus,button[role='combobox']:focus{border-color:var(--mdb-orange)!important;box-shadow:0 0 0 4px rgba(242,140,24,.16),0 12px 26px rgba(7,7,7,.06)!important;outline:0!important;}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1.05rem!important;}
button[type='submit'],.bg-primary,.hover\:bg-primary\/90:hover{color:#150A02!important;background:linear-gradient(135deg,var(--mdb-gold) 0%,var(--mdb-orange) 58%,var(--mdb-orange-strong) 100%)!important;box-shadow:0 18px 38px rgba(242,140,24,.34),0 1px 0 rgba(255,255,255,.35) inset!important;}
form button[type='submit']{min-height:54px!important;margin-top:8px!important;border-radius:16px!important;border:0!important;font-family:'Barlow Condensed','Barlow',sans-serif!important;font-size:.88rem!important;font-weight:900!important;letter-spacing:.04em!important;text-transform:uppercase!important;}
.rounded-lg,.rounded-xl,.rounded-md{border-radius:18px!important;}.w-16.h-16.rounded-full{box-shadow:0 16px 34px rgba(0,0,0,.12)!important;}

/* Cookie banner compacto no mobile */
.fixed.bottom-0.left-0.right-0.z-\[9999\]{padding:6px!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] .max-w-4xl{border-radius:14px!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] .max-w-4xl > div{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;padding:8px!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] .max-w-4xl > div > :first-child{display:none!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] p.text-sm{font-size:.72rem!important;line-height:1!important;margin:0!important;text-align:center!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] .text-xs.text-muted-foreground.leading-relaxed{display:none!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] [class*='flex-col'][class*='gap-2']{flex-direction:row!important;gap:6px!important;}
.fixed.bottom-0.left-0.right-0.z-\[9999\] [class*='flex-col'][class*='gap-2'] button{width:50%!important;height:30px!important;font-size:.68rem!important;padding-left:8px!important;padding-right:8px!important;}

@media (max-width:360px){.absolute.bottom-8 h1{font-size:1.86rem!important;}.absolute.bottom-8 p{font-size:.8rem!important;}.absolute.top-6 img{width:54vw!important;height:52px!important;}}
@media (min-width:481px){
  .relative.h-64{height:460px!important;background-image:linear-gradient(90deg,rgba(7,7,7,.94) 0%,rgba(7,7,7,.72) 42%,rgba(7,7,7,.25) 68%,rgba(233,90,12,.44) 100%),radial-gradient(circle at 72% 18%,rgba(246,192,45,.24),transparent 24%),url('/acacio-hero.jpg')!important;background-size:cover,cover,auto 118%!important;background-position:center,center,right 10% top 0!important;}
  .absolute.top-6 img{width:min(48vw,430px)!important;height:82px!important;max-width:430px!important;}
  .absolute.bottom-8{bottom:42px!important;}
  .absolute.bottom-8:before{font-size:.8rem!important;letter-spacing:.08em!important;padding:7px 14px 6px!important;}
  .absolute.bottom-8 h1{max-width:760px!important;font-size:clamp(3.4rem,7.2vw,5.15rem)!important;}
  .absolute.bottom-8 p{max-width:680px!important;font-size:clamp(1.02rem,2.4vw,1.24rem)!important;}
  .absolute.bottom-8 p:after{content:'Comunidade • Rede • Causas • Cidade • Mobilização'!important;max-width:100%!important;font-size:.86rem!important;padding:7px 14px 6px!important;}
  .container.max-w-lg,.container.max-w-lg.mx-auto,.container.max-w-lg.mx-auto.px-4,div.container.max-w-lg.mx-auto.px-4.\-mt-8.relative.z-10.pb-12{max-width:min(92vw,560px)!important;width:100%!important;}
  .container.max-w-lg.mx-auto.px-4.\-mt-8{margin-top:-48px!important;}
  .container.max-w-lg .shadow-xl{border-radius:28px!important;}
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child){padding:28px 24px 18px!important;}
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child) [class*='CardTitle'],.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) div,.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h1,.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h2,.container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h3{font-size:1.34rem!important;}
  .container.max-w-lg .shadow-xl > div:last-child{padding-left:24px!important;padding-right:24px!important;}
  form button[type='submit']{font-size:1rem!important;}
}
@media (min-width:768px){.relative.h-64{height:520px!important;background-size:cover,cover,auto 120%!important;background-position:center,center,right 14% top 0!important;}.absolute.top-6 img{height:102px!important;}.absolute.bottom-8{bottom:54px!important;}}

/* QA 390px — aperto final para impedir corte lateral no hero/card */
@media (max-width:480px){
  .absolute.bottom-8{
    left:0!important;
    right:0!important;
    width:100%!important;
    overflow:hidden!important;
    text-align:center!important;
  }
  .absolute.bottom-8:before{
    display:inline-flex!important;
    max-width:calc(100vw - 56px)!important;
    font-size:.55rem!important;
    letter-spacing:.028em!important;
    padding:6px 8px 5px!important;
  }
  .absolute.bottom-8 h1{
    width:auto!important;
    max-width:calc(100vw - 48px)!important;
    font-size:1.72rem!important;
    line-height:.98!important;
    white-space:nowrap!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .absolute.bottom-8 p{
    width:auto!important;
    max-width:calc(100vw - 52px)!important;
    font-size:.76rem!important;
    line-height:1.14!important;
    overflow:visible!important;
  }
  .absolute.bottom-8 p:after{
    content:'Comunidade • Causas • Eventos • Voz'!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:calc(100vw - 58px)!important;
    white-space:normal!important;
    font-size:.54rem!important;
    line-height:1.12!important;
    letter-spacing:.018em!important;
    padding:6px 8px 5px!important;
  }
  div.container.max-w-lg.mx-auto.px-4.\-mt-8.relative.z-10.pb-12,
  .container.max-w-lg,
  .container.max-w-lg.mx-auto,
  .container.max-w-lg.mx-auto.px-4{
    width:calc(100vw - 44px)!important;
    max-width:346px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Rebuild final mobile: foto composta, título grande e linguagem de solução */
@media (max-width:480px){
  .relative.h-64{
    height:520px!important;
    background-image:url('/acacio-hero-mobile.jpg')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center top!important;
    border-bottom-left-radius:34px!important;
    border-bottom-right-radius:34px!important;
  }
  .relative.h-64:before{background:linear-gradient(90deg,var(--mdb-green) 0 28%,var(--mdb-gold) 28% 67%,var(--mdb-blue) 67% 100%) top/100% 7px no-repeat!important;opacity:1!important;}
  .relative.h-64:after{display:none!important;}
  .absolute.inset-0.bg-gradient-to-t{background:linear-gradient(to top,rgba(7,7,7,.28) 0%,rgba(7,7,7,.05) 58%,transparent 100%)!important;}
  .absolute.top-6{top:20px!important;justify-content:flex-start!important;padding-left:22px!important;padding-right:22px!important;}
  .absolute.top-6 img{width:190px!important;max-width:190px!important;height:58px!important;filter:drop-shadow(0 12px 18px rgba(0,0,0,.42))!important;}
  .absolute.bottom-8{
    bottom:34px!important;
    text-align:left!important;
    padding-left:24px!important;
    padding-right:22px!important;
    overflow:visible!important;
  }
  .absolute.bottom-8:before{
    content:'A SOLUÇÃO PARA CONECTAR O AMAPÁ'!important;
    margin:0 0 10px 0!important;
    max-width:100%!important;
    font-size:.74rem!important;
    letter-spacing:.055em!important;
    padding:7px 10px 6px!important;
    box-shadow:0 14px 26px rgba(242,140,24,.28)!important;
  }
  .absolute.bottom-8 h1{
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    width:100%!important;
    max-width:340px!important;
    margin:0!important;
    white-space:normal!important;
  }
  .absolute.bottom-8 h1:before{
    content:'MDB\A CONECTADO';
    display:block;
    white-space:pre-line;
    color:#fff;
    font-family:'Barlow Condensed','Barlow',sans-serif;
    font-size:4.18rem;
    line-height:.78;
    font-weight:900;
    letter-spacing:-.025em;
    text-shadow:0 12px 28px rgba(0,0,0,.62);
  }
  .absolute.bottom-8 p{
    width:100%!important;
    max-width:326px!important;
    margin:12px 0 0 0!important;
    color:#fff4dd!important;
    font-size:1.05rem!important;
    line-height:1.08!important;
    font-weight:900!important;
    text-align:left!important;
    text-shadow:0 10px 24px rgba(0,0,0,.52)!important;
  }
  .absolute.bottom-8 p:after{
    content:'Comunidade • Causas • Rede • Mobilização'!important;
    display:inline-flex!important;
    margin:12px 0 0 0!important;
    max-width:310px!important;
    font-size:.72rem!important;
    line-height:1!important;
    letter-spacing:.035em!important;
    padding:8px 10px 7px!important;
    border-radius:999px!important;
  }
  .container.max-w-lg.mx-auto.px-4.\-mt-8{margin-top:-28px!important;}
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child) [class*='CardTitle'],
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child) div,
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h1,
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h2,
  .container.max-w-lg .shadow-xl > div:first-child:not(:last-child) h3{font-size:1.28rem!important;}
  form button[type='submit']{font-size:1.05rem!important;letter-spacing:.035em!important;}
}
@media (max-width:360px){
  .absolute.bottom-8 h1:before{font-size:3.72rem!important;}
  .absolute.bottom-8 p{font-size:.96rem!important;max-width:302px!important;}
  .absolute.top-6 img{width:170px!important;max-width:170px!important;}
}
