/* Estilo compartilhado das paginas de venda.
   Extraido do HTML em 2026-09-21: embutido, cada produto novo copiaria
   ~130 linhas de estilo e elas divergiriam na primeira correcao. */
:root{
    --azul:#1f3a5f; --azul-2:#2d5286; --claro:#eaf0f6; --verde:#1e7a46;
    --verde-claro:#eef7f1; --vermelho:#b3261e; --cinza:#5b6472;
    --linha:#d7dee7; --fundo:#fbfcfd; --tinta:#17202b;
    --raio:14px; --max:1080px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; color-scheme:light}
  /* Rolagem suave e o leve levantar do botao sao enfeite: sob
     prefers-reduced-motion eles saem inteiros. */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  }
  body{
    margin:0; background:var(--fundo); color:var(--tinta);
    font:400 17px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(31,58,95,.12);
  }
  .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
  .estreito{max-width:720px}
  h1,h2,h3{line-height:1.2; color:var(--azul); margin:0 0 .5em; text-wrap:balance}
  h1{font-size:clamp(28px,5.2vw,46px); letter-spacing:-.02em}
  h2{font-size:clamp(23px,3.6vw,32px); margin-top:0}
  h3{font-size:19px}
  p{margin:0 0 1em}
  section{padding:clamp(44px,7vw,80px) 0; scroll-margin-top:24px}
  section + section{border-top:1px solid var(--linha)}
  .selo{
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--verde); margin-bottom:14px;
  }
  .btn{
    display:inline-block; background:var(--verde); color:#fff; text-decoration:none;
    font-weight:700; font-size:18px; padding:17px 34px; border-radius:var(--raio);
    box-shadow:0 3px 10px rgba(30,122,70,.28);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(30,122,70,.34)}
  .btn:focus-visible,a:focus-visible,summary:focus-visible{
    outline:3px solid var(--azul); outline-offset:3px; border-radius:4px;
  }
  .sob-btn{font-size:14.5px; color:var(--cinza); margin-top:12px}

  /* 1 — topo */
  .topo{background:linear-gradient(180deg,#fff 0%,var(--claro) 100%)}
  .topo-grade{display:grid; gap:34px; align-items:center}
  @media(min-width:860px){.topo-grade{grid-template-columns:1.05fr .95fr; gap:52px}}
  .topo h1 span{color:var(--verde)}
  .sub{font-size:clamp(17px,2.2vw,20px); color:var(--cinza); margin-bottom:26px}
  .arte{
    border-radius:var(--raio); overflow:hidden; box-shadow:0 14px 40px rgba(31,58,95,.16);
    background:#fff; aspect-ratio:4/3;
  }
  .arte img{width:100%; height:100%; object-fit:cover; display:block}

  /* listas e cartões */
  .grade{display:grid; gap:18px}
  @media(min-width:700px){.grade.c2{grid-template-columns:1fr 1fr}}
  @media(min-width:900px){.grade.c4{grid-template-columns:repeat(4,1fr)}}
  .cartao{
    background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
    padding:22px 22px 24px;
  }
  .cartao h3{margin-bottom:.35em}
  .cartao p{margin:0; font-size:15.5px; color:var(--cinza)}
  .etiqueta{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--verde); display:block; margin-bottom:8px}

  ul.limpa{list-style:none; margin:0 0 1em; padding:0}
  ul.limpa li{position:relative; padding-left:30px; margin-bottom:11px}
  ul.limpa li::before{
    content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
    border-radius:50%; background:var(--verde);
  }
  ul.nao li::before{background:var(--vermelho)}

  .caixa{background:var(--claro); border-left:4px solid var(--azul); padding:20px 22px; border-radius:0 var(--raio) var(--raio) 0; margin:22px 0}
  .caixa.verde{background:var(--verde-claro); border-left-color:var(--verde)}
  .citacao{font-size:19px; color:var(--azul); font-style:italic; margin:0}

  /* abas da planilha */
  table{width:100%; border-collapse:collapse; margin:18px 0; font-size:16px}
  th,td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--linha); vertical-align:top}
  th{background:var(--claro); color:var(--azul)}

  /* oferta */
  .oferta{background:var(--azul); color:#fff; text-align:center}
  .oferta h2,.oferta h3{color:#fff}
  .painel{
    background:#fff; color:var(--tinta); border-radius:18px; padding:clamp(26px,4vw,40px);
    max-width:640px; margin:0 auto; text-align:left; box-shadow:0 18px 50px rgba(0,0,0,.24);
  }
  .linha-item{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--linha); font-size:16px}
  .linha-item:last-of-type{border-bottom:0}
  .linha-item b{color:var(--azul)}
  .preco{text-align:center; margin:22px 0 6px}
  .preco .valor{font-size:clamp(40px,7vw,56px); font-weight:800; color:var(--azul); line-height:1}
  .preco .obs{color:var(--cinza); font-size:15px; margin-top:6px}
  .centro{text-align:center}

  /* faq */
  details{border:1px solid var(--linha); border-radius:var(--raio); background:#fff; margin-bottom:12px}
  summary{cursor:pointer; padding:17px 20px; font-weight:600; color:var(--azul); list-style:none}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; float:right; color:var(--verde); font-weight:700}
  details[open] summary::after{content:"–"}
  details .corpo{padding:0 20px 18px; color:var(--cinza); font-size:16px}

  footer{background:#0f1b2b; color:#9fb0c4; font-size:14.5px; padding:40px 0}
  footer a{color:#cfe0f0}
  footer .links{margin-bottom:14px}
  footer .links a{margin-right:18px}

  .pular{
    position:absolute; left:-9999px; top:0; background:var(--azul); color:#fff;
    padding:12px 18px; border-radius:0 0 var(--raio) 0; z-index:10; text-decoration:none;
  }
  .pular:focus{left:0}