:root{
    --nave:#F6F1E7;          /* creme dos posts */
    --nave-2:#EDE5D6;
    --papel:#FCFAF4;
    --tinta:#12294B;         /* azul-marinho dos posts */
    --tinta-2:#3E4C63;
    --pedra:#7A7263;         /* cinza quente */
    --vitral:#17335F;
    --vitral-esc:#112748;
    --ouro:#A8801F;
    --ouro-claro:#E0B657;
    --linha:#E1D6C2;
    --card:#FFFFFF;
    --sombra:0 1px 2px rgba(35,26,10,.05), 0 10px 26px -14px rgba(35,26,10,.22);
    --alerta:#8A4B12;
    --alerta-bg:#FBF0DD;
    --ok:#1F6B4A;
    --av-bg:#FCF3DF;
    --av-borda:#C08121;
    --av-tinta:#3D2E16;
    --av-titulo:#95590E;
    --max:1120px;
    --medida:64ch;
  }

  html{
    color-scheme:light;
    scroll-behavior:smooth;
    scroll-padding-top:calc(76px + env(safe-area-inset-top, 0px));
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --nave:#0B1524;
    --nave-2:#111E31;
    --papel:#0E1A2B;
    --tinta:#E8EFF8;
    --tinta-2:#B3C2D6;
    --pedra:#8A9AB0;
    --vitral:#6BA3EE;
    --vitral-esc:#9CC3F5;
    --ouro:#E2A93F;
    --ouro-claro:#F2C871;
    --linha:#26374F;
    --card:#132236;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
    --alerta:#F0C48A;
    --alerta-bg:#2A1E0F;
    --ok:#6ECBA0;
    --av-bg:#2A1E0F;
    --av-borda:#E2A93F;
    --av-tinta:#E7D7C0;
    --av-titulo:#F0C48A;
  }

  *{box-sizing:border-box}
  html{background:var(--nave)}
  body{
    margin:0;
    background:var(--nave);
    color:var(--tinta);
    font-family:Montserrat,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:17px; line-height:1.74; letter-spacing:-.002em;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{font-family:"Playfair Display",Georgia,"Times New Roman",serif; text-wrap:balance; letter-spacing:-.01em;}
  a{color:var(--vitral)}
  img{display:block; max-width:100%}

  .wrap{max-width:var(--max); margin-inline:auto; padding-inline:20px}
  .medida{max-width:var(--medida)}
  /* na história a coluna de leitura fica centrada sob as imagens largas */
  #historia .prosa.medida, #nossa-historia .prosa.medida, .legenda-par{margin-inline:auto}
  .legenda-par{font-size:14px; color:var(--pedra); margin:0 0 10px; line-height:1.5; max-width:62ch}
  section{padding-block:clamp(44px,7vw,84px)}

  .eyebrow{
    font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ouro); display:flex; align-items:center; gap:10px; margin:0 0 14px;
  }
  .eyebrow::after{content:""; flex:1; height:1px; background:var(--linha); max-width:120px}

  /* ---------- faixa de prévia ---------- */
  .previa{
    background:#112748; color:#fff; font-size:13px; letter-spacing:.02em;
    padding-block:9px;
  }
  .previa .wrap{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
  .previa b{color:var(--ouro-claro); letter-spacing:.1em; text-transform:uppercase; font-size:11px}

  /* ---------- topo ---------- */
  .topo{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
    background:color-mix(in srgb, var(--nave) 88%, transparent);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--linha);
  }
  .topo .wrap{display:flex; align-items:center; gap:14px; padding-block:10px}
  .topo img{width:46px; height:36px; object-fit:contain}
  .marca{font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:15px; line-height:1.2}
  .marca span{display:block; font-family:Montserrat,sans-serif; font-weight:500;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pedra)}


  /* ---------- botão de tema ---------- */
  .tema{
    display:inline-grid; place-items:center; width:40px; height:40px; flex:none;
    border:1px solid var(--linha); background:transparent; color:var(--tinta-2);
    cursor:pointer; border-radius:2px; padding:0; margin-left:auto;
    transition:border-color .16s ease, color .16s ease;
  }
  .tema:hover{border-color:var(--vitral); color:var(--vitral)}
  .tema svg{width:19px; height:19px}
  .tema .ico-sol{display:none}
  :root[data-theme="dark"] .tema .ico-lua{display:none}
  :root[data-theme="dark"] .tema .ico-sol{display:block}

  /* ---------- botões ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:600; font-size:14px; line-height:1; text-decoration:none;
    padding:14px 22px; border-radius:2px; border:1px solid transparent; cursor:pointer;
    transition:transform .12s ease, background .16s ease, border-color .16s ease;
    font-family:inherit;
  }
  .btn:active{transform:translateY(1px)}
  .btn-ouro{background:var(--ouro); color:#241703; border-color:var(--ouro)}
  .btn-ouro:hover{background:var(--ouro-claro)}
  .btn-linha{background:transparent; color:var(--tinta); border-color:var(--linha)}
  .btn-linha:hover{border-color:var(--vitral); color:var(--vitral)}
  .btn-sm{padding:9px 15px; font-size:13px}
  :focus-visible{outline:2px solid var(--vitral); outline-offset:3px}

  /* ---------- hero ---------- */
  .hero{position:relative; background:#0E2140; padding:0}
  .hero-foto{position:relative}
  .hero-foto .hero-img{
    width:100%; height:clamp(340px,62vw,600px); object-fit:cover; object-position:center 55%;
    display:block; background:#0E2140;
  }
  .hero-foto .hero-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 55%;
    opacity:0; transition:opacity .7s ease; pointer-events:none;
  }
  .hero-foto .hero-video.tocando{opacity:1}
  @media (prefers-reduced-motion: reduce){
    .hero-foto .hero-video{display:none}
  }
  .hero-foto::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(14,33,64,.66) 0%, rgba(14,33,64,.20) 20%, rgba(14,33,64,.60) 44%, rgba(14,33,64,.90) 68%, rgba(14,33,64,.96) 100%);
  }
  .hero-txt{position:absolute; inset:auto 0 0 0; padding-block:0 clamp(26px,4vw,44px)}
  .selo-campanha{width:clamp(126px,13vw,158px); height:auto; margin:0 auto 26px; display:block}
  .hero-txt .eyebrow{color:var(--ouro-claro)}
  .hero-txt .eyebrow::after{background:rgba(255,255,255,.28)}
  .hero h1{
    color:#fff; margin:0 0 14px; font-weight:600;
    font-size:clamp(29px,5.2vw,55px); line-height:1.06; letter-spacing:-.015em;
    max-width:24ch;
  }
  .hero p{color:#D6E0EE; margin:0; max-width:56ch; font-size:clamp(16px,1.6vw,18px)}
  .hero-acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
  .hero-acoes .btn-linha{color:#fff; border-color:rgba(255,255,255,.4)}
  .hero-acoes .btn-linha:hover{border-color:#fff; color:#fff}
  .credito{
    color:rgba(255,255,255,.55); font-size:11.5px; letter-spacing:.04em;
    margin-top:18px;
  }

  /* ---------- barra de fatos ---------- */
  .fatos{background:#112748; color:#EAF1FB; padding-block:34px 0}
  .fatos dl.wrap{
    display:grid; gap:0; background:transparent;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  }
  .fato{background:transparent; padding:22px 24px; border-left:1px solid rgba(255,255,255,.16)}
  .fato:first-child{border-left:none; padding-left:0}
  .fato:last-child{padding-right:0}
  .fato dt{
    font-size:11px; letter-spacing:.13em; text-transform:uppercase;
    color:rgba(234,241,251,.62); margin:0 0 6px; font-weight:600;
  }
  .fato dd{margin:0; font-family:"Playfair Display",Georgia,serif; font-size:22px; line-height:1.25; color:#fff}
  .fato dd small{display:block; font-family:Montserrat,sans-serif; font-size:13px;
    color:rgba(234,241,251,.7); margin-top:3px; letter-spacing:0}

  /* ---------- texto corrido ---------- */
  .prosa p{margin:0 0 1.25em}
  .prosa p:last-child{margin-bottom:0}
  .prosa h2{font-size:clamp(24px,3.2vw,35px); line-height:1.14; margin:0 0 20px; font-weight:600}
  .destaque{
    font-family:"Playfair Display",Georgia,serif; font-size:clamp(19px,2.3vw,25px); line-height:1.38;
    color:var(--tinta); border-left:3px solid var(--ouro); padding-left:22px; margin:34px 0;
    font-style:italic; max-width:40ch;
  }

  /* ---------- foto larga ---------- */
  .larga{margin:34px 0 0}
  .larga img{width:100%; aspect-ratio:4/3; object-fit:cover}

  /* ---------- par antes e depois ---------- */
  .par{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); margin:34px 0}
  .par figure{margin:0; position:relative}
  .par img{width:100%; aspect-ratio:3/4; object-fit:cover}
  .par .sel{
    position:absolute; top:0; left:0; background:var(--vitral-esc); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    padding:7px 12px;
  }
  .par figure:last-child .sel{background:var(--ouro); color:#1A1204}

  /* ---------- galeria ---------- */
  .galeria{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); margin-top:36px}
  figure{margin:0}
  figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 32%}
  figcaption{font-size:13.5px; color:var(--pedra); margin-top:9px; line-height:1.45}

  /* ---------- a conta ---------- */
  .conta{background:var(--papel); border-block:1px solid var(--linha)}
  .conta-grid{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:start}
  .ledger{border-top:1px solid var(--linha)}
  .ledger .row{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:15px 0; border-bottom:1px solid var(--linha);
  }
  .ledger .row span:first-child{color:var(--tinta-2); font-size:15.5px}
  .ledger .row span:last-child{
    font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap;
    font-family:"Playfair Display",Georgia,serif; font-size:19px;
  }
  .ledger .row.total span:last-child{color:var(--ouro)}
  .ledger .row.total span:first-child{color:var(--tinta); font-weight:600}

  /* ---------- etapas / termômetro ---------- */
  .meta-card{
    background:var(--card); border:1px solid var(--linha); box-shadow:var(--sombra);
    padding:clamp(22px,3vw,34px);
  }
  .meta-topo{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
  .meta-valor{font-family:"Playfair Display",Georgia,serif; font-size:clamp(30px,4.6vw,44px); line-height:1;
    font-variant-numeric:tabular-nums; color:var(--tinta); font-weight:600}
  .meta-de{font-size:14px; color:var(--pedra); margin-top:4px}
  .meta-pct{font-family:"Playfair Display",Georgia,serif; font-size:26px; color:var(--ouro); font-variant-numeric:tabular-nums}
  .barra{height:14px; background:var(--nave-2); margin-top:20px; overflow:hidden; position:relative}
  .barra i{display:block; height:100%; min-width:6px; background:linear-gradient(90deg,var(--ouro),var(--ouro-claro))}
  .atualizado{font-size:12.5px; color:var(--pedra); margin-top:10px; letter-spacing:.01em}

  .etapas{display:grid; gap:14px; margin-top:26px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
  .etapa{border-top:2px solid var(--linha); padding-top:14px}
  .etapa.ativa{border-top-color:var(--ouro)}
  .etapa .n{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--pedra); font-weight:700}
  .etapa h4{margin:6px 0 4px; font-family:"Playfair Display",Georgia,serif; font-size:18px; font-weight:600}
  .etapa p{margin:0; font-size:14px; color:var(--tinta-2); line-height:1.5}
  .etapa .v{margin-top:8px; font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; color:var(--vitral)}

  /* ---------- doar ---------- */
  .doar{background:#112748; color:#EAF1FB; position:relative; overflow:hidden}
  .vitral-bg{position:absolute; inset:0; opacity:.07; pointer-events:none}
  .doar .wrap{position:relative}
  .doar h2{color:#fff; font-size:clamp(25px,3.3vw,36px); margin:0 0 12px; font-weight:600}
  .doar > .wrap > p{color:#C8D6E9; max-width:56ch; margin:0}
  .doar .eyebrow{color:var(--ouro-claro)}
  .doar .eyebrow::after{background:rgba(255,255,255,.25)}

  .pix{
    background:var(--card); color:var(--tinta); margin-top:30px; padding:clamp(22px,3vw,32px);
    display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    align-items:start;
  }
  .pix h3{margin:0 0 6px; font-size:20px; font-weight:600}
  .chave{
    display:flex; align-items:center; gap:12px; border:1px solid var(--linha);
    padding:13px 15px; margin-top:14px; background:var(--nave); flex-wrap:wrap;
  }
  .chave code{
    font-family:Montserrat,ui-monospace,monospace; font-size:19px; font-weight:600;
    letter-spacing:.01em; font-variant-numeric:tabular-nums; color:var(--tinta);
  }
  .chave .btn{margin-left:auto}
  .rotulo{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--pedra); font-weight:700}
  .aviso{
    background:var(--alerta-bg); border-left:3px solid var(--alerta); color:var(--alerta);
    padding:14px 16px; font-size:14.5px; line-height:1.5; margin-top:18px;
  }
  .aviso strong{color:var(--alerta)}
  .qr{background:var(--nave); border:1px solid var(--linha); display:grid; place-items:center;
      aspect-ratio:1; max-width:220px; width:100%; color:var(--pedra); font-size:13px; text-align:center; padding:18px}
  .valores{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
  .valores .btn{flex:1 1 auto; min-width:86px}
  .breve{
    margin-top:22px; font-size:14px; color:#B8C8DE; border-top:1px solid rgba(255,255,255,.16);
    padding-top:16px;
  }
  .breve b{color:var(--ouro-claro)}

  /* ---------- aviso forte ---------- */
  .aviso-forte{
    margin-top:18px; background:var(--av-bg); border:2px solid var(--av-borda);
    padding:clamp(18px,2.5vw,26px); display:grid; gap:14px;
  }
  .aviso-forte h3{
    margin:0; font-family:Montserrat,sans-serif; font-size:14px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--av-titulo);
    display:flex; align-items:center; gap:9px;
  }
  .aviso-forte h3 svg{width:22px; height:22px; flex:none}
  .aviso-forte p{margin:0; font-size:15.5px; line-height:1.55; color:var(--av-tinta)}
  .aviso-forte strong{font-weight:700; color:var(--av-titulo)}

  /* ---------- botões de rede ---------- */
  .redes{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
  .rede{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    border:1px solid var(--linha); background:var(--card); color:var(--tinta);
    padding:11px 16px; font-size:14.5px; font-weight:600; border-radius:2px;
    transition:border-color .16s ease, color .16s ease;
  }
  .rede:hover{border-color:var(--vitral); color:var(--vitral)}
  .rede svg{width:19px; height:19px; flex:none}
  footer .redes .rede{background:transparent; border-color:rgba(255,255,255,.28); color:#DCE6F4}
  footer .redes .rede:hover{border-color:#fff; color:#fff}

  /* ---------- empresas ---------- */
  .empresas-grid{display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); align-items:center}
  .placas{display:grid; gap:10px}
  .placa{
    display:flex; justify-content:space-between; gap:14px; align-items:baseline;
    border:1px solid var(--linha); padding:14px 16px; background:var(--card);
  }
  .placa b{font-family:"Playfair Display",Georgia,serif; font-size:17px; font-weight:600}
  .placa span{font-size:13.5px; color:var(--pedra); text-align:right}

  /* ---------- formulário ---------- */
  .form-card{
    background:var(--card); border:1px solid var(--linha); box-shadow:var(--sombra);
    padding:clamp(22px,3vw,34px);
  }
  .campos{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); margin-top:20px}
  .campo{display:flex; flex-direction:column; gap:6px}
  .campo label{font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--pedra)}
  .campo input, .campo select{
    font-family:inherit; font-size:16px; padding:11px 13px; border:1px solid var(--linha);
    background:var(--papel); color:var(--tinta); border-radius:0; width:100%;
  }
  .campo input:focus, .campo select:focus{border-color:var(--vitral); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--vitral) 18%, transparent)}
  .form-rodape{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:20px}
  .form-rodape small{color:var(--pedra); font-size:13px; max-width:40ch; line-height:1.45}
  .obrigado{
    display:flex; gap:12px; align-items:flex-start; background:var(--nave-2);
    border-left:3px solid var(--ok); padding:16px 18px; margin-top:20px; font-size:15px;
  }
  .obrigado b{color:var(--ok)}

  /* ---------- horários ---------- */
  .horarios{background:var(--papel); border-top:1px solid var(--linha)}
  .hgrid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); margin-top:26px}
  .hbloco h4{margin:0 0 10px; font-family:"Playfair Display",Georgia,serif; font-size:18px; font-weight:600}
  .hbloco ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--linha)}
  .hbloco li{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
    padding:10px 0; border-bottom:1px solid var(--linha); font-size:15px}
  .hbloco li span:last-child{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; color:var(--vitral)}
  .hbloco li span:first-child{color:var(--tinta-2)}

  /* ---------- transparência ---------- */
  .transp{background:var(--papel); border-top:1px solid var(--linha)}
  .dados{
    display:grid; column-gap:40px; row-gap:0; margin-top:26px;
    grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--linha);
  }
  @media (max-width:820px){ .dados{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:28px} }
  @media (max-width:520px){ .dados{grid-template-columns:1fr} }
  .transp .redes{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
    max-width:660px; margin-inline:auto;
  }
  .transp .rede{justify-content:center}
  .dado{padding:16px 0; border-bottom:1px solid var(--linha)}
  .dado dt{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--pedra); font-weight:700; margin-bottom:5px}
  .dado dd{margin:0; font-size:15.5px; line-height:1.45}

  /* ---------- apoio institucional ---------- */
  .apoio{background:var(--papel); border-top:1px solid var(--linha); padding-block:36px}
  .apoio p{
    text-align:center; margin:0 0 22px; font-size:11px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--pedra);
  }
  .marcas{display:flex; gap:clamp(26px,5vw,56px); flex-wrap:wrap;
    align-items:center; justify-content:center}
  .marcas figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:9px; max-width:150px}
  .marcas img{height:64px; width:auto; object-fit:contain}
  .marcas figcaption{
    font-size:11px; line-height:1.35; text-align:center; color:var(--pedra); margin:0;
  }

  /* ---------- rodapé ---------- */
  footer{background:#0E2140; color:#B8C8DE; padding-block:40px 34px}
  .foot-grid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
  footer h5{margin:0 0 10px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ouro-claro); font-weight:700}
  footer p{margin:0 0 4px; font-size:14.5px; line-height:1.55}
  footer a{color:#DCE6F4}
  .foot-fim{margin-top:32px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
    font-size:12.5px; color:#8FA3BD; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation:none!important; transition:none!important}
  }
  /* ---------- celular ---------- */
  @media (max-width:700px){
    /* o texto do hero sai de cima da foto e passa a ficar embaixo dela */
    .hero-foto .hero-img{height:clamp(230px,56vw,320px)}
    .hero-foto::after{
      background:linear-gradient(to bottom, rgba(14,33,64,.40) 0%, rgba(14,33,64,.06) 50%, rgba(14,33,64,.45) 100%);
    }
    .hero-txt{position:static; padding-block:26px 34px}
    .hero h1{font-size:clamp(27px,7.2vw,36px); max-width:none; line-height:1.1}
    .hero p{font-size:16px}
    .hero-acoes{margin-top:22px}
    .hero-acoes .btn{flex:1 1 100%}
    .par figure:last-child .sel, .par .sel{font-size:10px; padding:6px 10px}
  }
  @media (max-width:700px){
    .fato{border-left:none; border-top:1px solid rgba(255,255,255,.16); padding-inline:0}
    .fato:first-child{border-top:none}
    .transp .redes{grid-template-columns:repeat(2, minmax(0,1fr))}
  }
  @media (max-width:560px){
    .placa{flex-direction:column; gap:5px}
    .placa span{text-align:left}
    .valores .btn{flex:1 1 calc(50% - 4px)}
  }
  @media (max-width:480px){
    .topo .wrap{gap:10px}
    .topo img{width:32px; height:32px}
    .marca{font-size:13.5px}
    .marca span{font-size:10px}
    .topo .btn{white-space:nowrap; padding:11px 14px; font-size:13px}
    .tema{width:36px; height:36px}
    .chave{gap:10px}
    .chave .btn{margin-left:0}
  }

/* ---------- formulário real (campo-isca e mensagem de erro) ---------- */
.isca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-erro{
  margin:16px 0 0; padding:12px 14px; border-radius:6px;
  background:var(--av-bg); border:1px solid var(--av-borda);
  color:var(--av-tinta); font-size:14.5px; line-height:1.5;
}