/* Paginas de case da Inazuma: focinhal, folego e fornalha compartilham este arquivo. */
  :root{--red:#A31D1D;--red-esc:#6E1212;--black:#0B0B0B;--white:#F7F5F2;--cinza:#5A554E;--linha:#DDD8D0}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--white);color:var(--black);font-family:'Jost',sans-serif;font-size:21px;line-height:1.62}
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px}
  section{padding:84px 0}
  h1,h2,h3{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;line-height:.94}
  h2{font-size:58px;margin-bottom:14px}
  h3{font-size:30px;margin-bottom:8px}
  .chapeu{font-size:15px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
  .lead{font-size:23px;color:var(--cinza);max-width:720px}
  a{color:inherit}

  header{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:2px solid var(--linha)}
  header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;gap:18px}
  header img{height:46px;display:block}
  .voltar{font-size:16px;font-weight:500;color:var(--cinza);text-decoration:none}
  .voltar:hover{color:var(--red)}
  .bt{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;border-radius:999px;
      padding:14px 26px;font-weight:500;text-decoration:none;font-size:17px;white-space:nowrap}
  .bt:hover{background:var(--red-esc)}
  .bt svg{width:19px;height:19px;fill:currentColor;flex:none}
  .bt-g{padding:20px 38px;font-size:20px}

  .capa{background:var(--black);color:var(--white);padding:78px 0}
  .capa h1{font-size:88px;color:var(--white);margin-bottom:18px}
  .capa .lead{color:#C9C4BC;font-size:23px}
  .capa .ficha{display:flex;gap:44px;flex-wrap:wrap;margin-top:40px;font-size:17px;color:#C9C4BC}
  .capa .ficha b{display:block;color:var(--white);font-family:'Big Shoulders Display',sans-serif;
                 font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.02em}

  .escuro{background:var(--black);color:var(--white)}
  .escuro h2{color:var(--white)} .escuro .lead{color:#C9C4BC}
  .cinza{background:#F1EEE9}

  /* alinhado pelo topo: centralizar deixava o texto flutuando no meio da foto */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;margin-top:40px}
  .duo.invertido{grid-template-columns:.92fr 1.08fr}
  .aviso{margin-top:34px;max-width:780px;font-size:18px;line-height:1.6;color:#9A948B;
         border-left:5px solid var(--red);padding-left:20px}
  img.quadro{width:100%;display:block;border-radius:14px;border:2px solid var(--linha)}
  .escuro img.quadro{border-color:#2A2A2A}
  /* imagem alta dentro de uma janela, senao um print de site de 4.000 px
     sozinho faz a pagina do case ficar do tamanho de treze telas */
  .janela{position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--linha)}
  .janela img{width:100%;display:block}
  .janela::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none}
  .janela.sobre-branco::after{background:linear-gradient(to top,var(--white),transparent)}
  .janela.sobre-cinza::after{background:linear-gradient(to top,#F1EEE9,transparent)}
  .h-site{max-height:660px} .h-perfil{max-height:740px}

  .lista{margin:22px 0 0;padding-left:24px;font-size:20px}
  .lista li{margin-bottom:14px}
  .lista.ruim li::marker{color:var(--red)}

  .grade6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
  .grade6 figure{margin:0}
  .grade6 img{width:100%;height:auto;display:block;border-radius:12px}
  .grade6 figcaption{font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
                     margin-top:13px;font-weight:500}
  @media(max-width:700px){.grade6{grid-template-columns:repeat(2,1fr);gap:14px}}

  .par{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:780px;margin-top:30px}
  .par img{width:100%;height:auto;display:block;border-radius:12px}

  .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;max-width:940px}
  .stories img{width:100%;display:block;border-radius:12px}
  /* no celular, tres colunas viram 100 px cada e o texto some: um story por vez, com rolagem lateral */
  @media(max-width:700px){
    .stories{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;
             -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .stories::-webkit-scrollbar{display:none}
    .stories img{flex:0 0 74%;width:74%;scroll-snap-align:start}   /* width tambem, senao o 100% de cima vira minimo do item flex */
  }

  video{width:100%;max-width:400px;display:block;border-radius:16px;background:#000}

  .antesdepois{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:40px}
  .antesdepois img{width:100%;display:block;border-radius:12px;border:2px solid var(--linha)}
  .antesdepois .r{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;
                  font-size:30px;margin-bottom:12px}
  .antesdepois .a .r{color:var(--cinza)} .antesdepois .d .r{color:var(--red)}

  .cta{background:var(--red);color:#fff;text-align:center}
  .cta h2{color:#fff}
  .cta p{max-width:640px;margin:14px auto 30px;font-size:21px;color:#F6DADA}
  .cta .bt{background:var(--white);color:var(--red)}
  .cta .bt:hover{background:#fff}
  footer{background:var(--black);color:#8E8980;padding:40px 0;font-size:16px}
  footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  footer img{height:46px}

  @media(max-width:860px){
    section{padding:58px 0}
    h2{font-size:40px}
    .capa h1{font-size:54px}
    .duo,.duo.invertido,.antesdepois,.par{grid-template-columns:1fr;gap:28px}
    .par{max-width:420px}
  }