/* Fontes oficiais da identidade. Coloque os arquivos licenciados em assets/fonts/:
   CocomatPro-Regular.woff2, CocomatPro-Bold.woff2, Now-Bold.woff2, Blacktear.woff2.
   Enquanto não estiverem presentes, o site usa Poppins/Pacifico como fallback. */
@font-face{font-family:"Cocomat Pro";src:local("Cocomat Pro"),url("fonts/CocomatPro-Regular.woff2") format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:"Cocomat Pro";src:local("Cocomat Pro Bold"),url("fonts/CocomatPro-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Now";src:local("Now"),url("fonts/Now-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Blacktear";src:local("Blacktear"),url("fonts/Blacktear.woff2") format("woff2");font-weight:400;font-display:swap}

/* Fontes oficiais da identidade. Colocar os arquivos licenciados em assets/fonts/
     (CocomatPro-Light/Italic/Bold, Now-Light/Bold, Blacktear). Enquanto os arquivos
     nao estiverem na pasta, o navegador usa a fonte instalada no sistema ou o fallback. */
  @font-face{font-family:"Cocomat Pro";src:local("Cocomat Pro"),local("CocomatPro"),url("assets/fonts/CocomatPro-Regular.woff2") format("woff2");font-weight:300 500;font-display:swap}
  @font-face{font-family:"Cocomat Pro";src:local("Cocomat Pro Bold"),url("assets/fonts/CocomatPro-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}
  @font-face{font-family:"Now";src:local("Now"),url("assets/fonts/Now-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}
  @font-face{font-family:"Blacktear";src:local("Blacktear"),url("assets/fonts/Blacktear.woff2") format("woff2");font-weight:400;font-display:swap}
  :root{
    --mobrio:url(mobilize-rio.webp);
    --rio:url(hero-rio-duotone.webp);
    --cacau:#260F08; --laranja:#E83D0F; --turquesa:#11889C; --azul:#92DBE5;
    --roxo:#6C3CA3; --lilas:#AC7CC3; --amarelo:#FFEFB5; --creme:#FFFAEF;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Cocomat Pro","Poppins",sans-serif;color:var(--cacau);background:var(--creme)}
  a{text-decoration:none;color:inherit}
  img{display:block;max-width:100%}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;flex-direction:column;
  }
  .hero-bg{
    position:absolute;inset:0;z-index:0;
    background-image:var(--rio);
    background-size:cover;background-position:center 65%;
  }
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(255,250,239,.92) 0%, rgba(255,250,239,.72) 34%, rgba(255,250,239,.15) 62%, rgba(255,250,239,0) 80%);
  }

  .tracos{
    position:relative;z-index:20;
    width:100%;height:9px;
    display:flex;align-items:stretch;
  }
  .tracos i{display:block}
  .stamp{width:100%;height:26px;display:flex}
  .stamp i{flex:1}
  .navbar{
    position:relative;z-index:5;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:16px min(5vw,60px);
    background:var(--creme);
    border-bottom:1px solid rgba(38,15,8,.08);
    box-shadow:0 8px 28px rgba(38,15,8,.14);
    flex-wrap:wrap;
  }
  .logo img{height:58px;width:auto;display:block}
  .menu{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px);font-weight:600;font-size:.95rem;flex-wrap:wrap}
  .menu a{color:var(--cacau);padding:8px 14px;border-radius:999px;transition:.2s}
  .menu a:hover{color:var(--roxo)}
  .menu a.ativo{background:var(--cacau);color:var(--creme)}
  .menu a.participar{background:var(--laranja);color:var(--creme);font-weight:700}
  .menu a.participar:hover{background:var(--roxo)}
  .burger{display:none;background:none;border:0;font-size:1.7rem;color:var(--roxo);cursor:pointer}

  .hero-grid{
    position:relative;z-index:4;
    flex:1;display:flex;align-items:flex-end;
    padding:0 min(6vw,72px);
    gap:2vw;
  }
  .hero-copy{
    flex:1 1 52%;
    align-self:center;
    padding-bottom:10vh;
    max-width:640px;
    margin-left:auto;margin-right:2vw;
  }
  .eyebrow{
    font-weight:700;letter-spacing:.42em;text-transform:uppercase;
    font-size:clamp(.8rem,1.5vw,1.1rem);color:var(--turquesa);
    margin-bottom:14px;
  }
  .hero-name{
    font-style:italic;font-weight:800;text-transform:uppercase;
    font-size:clamp(2.6rem,7.2vw,6rem);
    line-height:.95;letter-spacing:-.01em;
    color:var(--roxo);
  }
  .hero-name .sobrenome{color:var(--laranja)}
  .numero{
    display:inline-block;margin-top:26px;
    background:var(--creme);
    border-radius:22px;
    padding:6px 34px;
    box-shadow:0 10px 30px rgba(38,15,8,.16);
  }
  .numero b{
    font-family:"Now","Poppins",sans-serif;
    font-style:normal;font-weight:800;
    font-size:clamp(2.4rem,5.5vw,4.6rem);
    color:var(--roxo);letter-spacing:.02em;
  }
  .lema{
    font-family:"Blacktear","Pacifico",cursive;
    color:var(--laranja);
    font-size:clamp(1.2rem,2.4vw,1.9rem);
    margin-top:22px;
  }
  .hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
  .btn{
    display:inline-block;font-weight:700;font-size:1rem;
    padding:14px 28px;border-radius:999px;transition:.2s;
  }
  .btn-laranja{background:var(--laranja);color:var(--creme)}
  .btn-laranja:hover{background:var(--cacau)}
  .btn-vazado{border:2.5px solid var(--roxo);color:var(--roxo)}
  .btn-vazado:hover{background:var(--roxo);color:var(--creme)}

  .hero-foto{
    flex:1 1 45%;
    align-self:flex-end;
    display:flex;justify-content:center;
    position:relative;
  }
  .hero-foto img{
    width:min(54vw,680px);
    max-height:92vh;object-fit:contain;object-position:bottom;
    filter:drop-shadow(0 18px 40px rgba(38,15,8,.28));
  }

  .zap{
    position:fixed;right:26px;bottom:26px;z-index:50;
    width:62px;height:62px;border-radius:50%;
    background:#25D366;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 26px rgba(0,0,0,.25);transition:.2s;
  }
  .zap:hover{transform:scale(1.08)}
  .zap svg{width:32px;height:32px;fill:#fff}

  /* ============ FAIXA DE MOSAICO ============ */
  .mosaico{width:100%;height:20px;display:block}

  /* ============ SEÇÕES ============ */
  section{padding:76px min(6vw,72px)}
  .kicker{font-family:"Blacktear","Pacifico",cursive;color:var(--laranja);font-size:1.3rem;margin-bottom:8px}
  h2{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.15;margin-bottom:18px}
  .sec-txt{max-width:780px;font-weight:300;font-size:1.05rem;line-height:1.75}
  .sec-txt b{font-weight:700}
  .link-mais{display:inline-block;margin-top:22px;font-weight:700;color:var(--turquesa);border-bottom:3px solid var(--azul)}
  .link-mais:hover{color:var(--roxo);border-color:var(--roxo)}

  .historia{background:var(--creme)}
  .historia-grid{display:flex;align-items:center;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
  .historia-txt{flex:1 1 440px;min-width:300px}
  .historia-fotos{flex:1 1 420px;min-width:300px}
  .historia-fotos img{width:100%;height:auto}

  .atos{background:var(--amarelo)}
  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(185px,235px));
    justify-content:center;
    gap:24px;margin-top:34px;
  }
  .card-foto{
    position:relative;display:block;
    border-radius:22px;overflow:hidden;
    aspect-ratio:3/4;
    box-shadow:0 10px 30px rgba(38,15,8,.14);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .card-foto:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(38,15,8,.20)}
  .cf-img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:filter .35s ease, transform .45s ease;
  }
  .cf-img{filter:saturate(.55) contrast(.98)}
  .card-foto:hover .cf-img{filter:none;transform:scale(1.05)}
  .cf-tint{
    position:absolute;inset:0;
    mix-blend-mode:multiply;
    opacity:.44;
    transition:opacity .35s ease;
    pointer-events:none;
  }
  .card-foto:hover .cf-tint{opacity:0}
  .t-lilas{background:#AC7CC3}
  .t-turquesa{background:#11889C}
  .t-laranja{background:#E83D0F}
  .t-azul{background:#92DBE5}
  .t-roxo{background:#6C3CA3}
  .cf-grad{
    position:absolute;left:0;right:0;bottom:0;height:58%;
    background:linear-gradient(180deg, rgba(255,250,239,0) 0%, rgba(255,250,239,.55) 42%, rgba(255,250,239,.97) 78%);
    pointer-events:none;
  }
  .cf-txt{position:absolute;left:18px;right:18px;bottom:16px}
  .cf-txt .ato{font-family:"Blacktear","Pacifico",cursive;font-size:1rem;margin-bottom:3px}
  .cf-txt h3{font-size:1.12rem;font-weight:700;color:var(--cacau);line-height:1.25}
  .mobilize{
    position:relative;overflow:hidden;
    background:var(--roxo);color:var(--creme);text-align:center;
    isolation:isolate;
  }
  .mob-bg{
    position:absolute;inset:0;z-index:-2;
    background-image:var(--mobrio);background-size:cover;background-position:center;
    opacity:0;transform:scale(1.08);
    transition:opacity 1.1s ease, transform 6s ease;
    filter:saturate(.5);
  }
  .mob-veu{
    position:absolute;inset:0;z-index:-1;
    background:var(--roxo);
    transition:opacity 1.1s ease;
  }
  .mobilize.ativa .mob-bg{opacity:1;transform:scale(1)}
  .mobilize.ativa .mob-veu{opacity:.55;mix-blend-mode:multiply}
  .mobilize .kicker{color:var(--amarelo)}
  .mobilize .sec-txt{margin:0 auto 30px}

  footer{background:var(--cacau);color:var(--creme);padding:44px min(6vw,72px);font-size:.9rem}
  .foot-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}
  .foot-links{display:flex;gap:20px;flex-wrap:wrap;font-weight:500}
  .foot-links a:hover{color:var(--azul)}
  .foot-legal{margin-top:26px;opacity:.65;font-weight:300;font-size:.8rem;line-height:1.6}

  @media (max-width:880px){
    .menu{display:none}
    .menu.aberto{
      display:flex;flex-direction:column;position:absolute;top:110px;right:5vw;
      background:var(--creme);padding:22px 28px;border-radius:18px;
      box-shadow:0 14px 40px rgba(38,15,8,.18);z-index:60;
    }
    .burger{display:block}
    .hero-grid{flex-direction:column;align-items:center;padding-top:2vh}
    .hero-copy{padding-bottom:0;text-align:center;align-self:center}
    .hero-cta{justify-content:center}
    .hero-foto img{width:min(92vw,520px);max-height:60vh}
  }