/*
Theme Name: Kobbe
Theme URI: https://kobbe.com.br
Author: Edmo Junior
Description: Tema da Kobbe - presenca digital para clinicas e negocios locais. Identidade "Dois Apoios": petroleo, coral e creme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: kobbe
*/
:root{
    --petroleo:#0E3B3A;
    --petroleo-esc:#092B2A;
    --petroleo-cl:#175553;
    --creme:#FBF6EE;
    --creme-fundo:#F4EDE2;
    --coral:#EE6A4D;
    --coral-esc:#D8563A;
    --menta:#CFE7DF;
    --verde-ok:#2C8A6E;
    --tinta:#12302F;
    --texto-sec:#4B6664;
    --linha:#DCD2C2;
    --linha-escura:#1D4E4C;

    --display:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
    --corpo:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;

    --raio:18px;
    --raio-sm:12px;
    --medida:64ch;
  }

  *,*::before,*::after{box-sizing:border-box;}

  body{
    margin:0;
    background:var(--creme);
    color:var(--tinta);
    font-family:var(--corpo);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display{font-family:var(--display);text-wrap:balance;margin:0;}
  h1{font-size:clamp(2.05rem,5.1vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.022em;}
  h2{font-size:clamp(1.5rem,3.2vw,1.875rem);font-weight:700;line-height:1.18;letter-spacing:-.014em;}
  h3{font-size:1.1875rem;font-weight:700;line-height:1.32;letter-spacing:-.008em;}
  p{margin:0;}
  a{color:inherit;}

  .rotulo{
    font-family:var(--display);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--texto-sec);
  }

  .env{width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px;}
  section{padding-block:clamp(56px,7vw,88px);}

  /* ---------- selo dois apoios ---------- */
  .selo{display:block;flex:none;}

  /* ---------- topo ---------- */
  .topo{
    position:sticky;top:0;z-index:20;
    background:rgba(251,246,238,.93);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--linha);
  }
  .topo-int{display:flex;align-items:center;gap:20px;min-height:70px;}
  .marca{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;}
  .marca-nome{
    font-family:var(--display);font-weight:800;font-size:1.45rem;
    letter-spacing:-.03em;color:var(--petroleo);
  }
  .nav{display:flex;gap:26px;}
  .nav a{
    font-family:var(--display);font-weight:500;font-size:.9375rem;
    text-decoration:none;color:var(--texto-sec);padding-block:6px;
    border-bottom:2px solid transparent;
  }
  .nav a:hover{color:var(--petroleo);border-bottom-color:var(--coral);}
  @media (max-width:860px){.nav{display:none;}}

  /* ---------- botões ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--display);font-weight:700;font-size:1rem;
    padding:14px 24px;border-radius:999px;border:2px solid transparent;
    text-decoration:none;cursor:pointer;
    transition:transform .14s ease,background-color .14s ease,border-color .14s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-coral{background:var(--coral);color:var(--creme);}
  .btn-coral:hover{background:var(--coral-esc);}
  .btn-contorno{background:transparent;color:var(--petroleo);border-color:var(--petroleo);}
  .btn-contorno:hover{background:var(--petroleo);color:var(--creme);}
  .btn-claro{background:transparent;color:var(--creme);border-color:rgba(251,246,238,.45);}
  .btn-claro:hover{border-color:var(--creme);background:rgba(251,246,238,.1);}
  .btn-sm{padding:10px 19px;font-size:.9375rem;}
  .btn:focus-visible{outline:3px solid var(--coral);outline-offset:3px;}
  a:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px;}

  /* ---------- herói ---------- */
  .heroi{
    background:var(--petroleo);color:var(--creme);
    position:relative;overflow:hidden;
    padding-block:clamp(60px,8vw,96px);
  }
  .heroi::after{
    content:"";position:absolute;inset-inline-end:-160px;inset-block-start:-120px;
    width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(207,231,223,.13),transparent 68%);
    pointer-events:none;
  }
  .heroi-grade{
    display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);
    align-items:center;position:relative;z-index:1;
  }
  @media (max-width:900px){.heroi-grade{grid-template-columns:1fr;}}
  .heroi .rotulo{color:var(--menta);}
  .heroi h1{margin-block:16px 20px;}
  .heroi-sub{
    font-size:1.1rem;line-height:1.6;color:rgba(251,246,238,.84);
    max-width:52ch;
  }
  .heroi-acoes{display:flex;flex-wrap:wrap;gap:13px;margin-block-start:30px;}
  .heroi-nota{
    margin-block-start:26px;padding-block-start:20px;
    border-top:1px solid rgba(207,231,223,.24);
    font-size:.9375rem;color:rgba(251,246,238,.72);max-width:46ch;
  }

  /* painel de busca — o momento que o dentista reconhece */
  .painel{
    background:var(--creme);border-radius:var(--raio);
    padding:22px;color:var(--tinta);
    box-shadow:0 22px 44px rgba(9,43,42,.3);
  }
  .painel-barra{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--linha);border-radius:999px;
    padding:10px 16px;font-size:.9375rem;color:var(--texto-sec);
    background:#fff;
  }
  .painel-lista{display:flex;flex-direction:column;gap:11px;margin-block-start:16px;}
  .painel-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:var(--raio-sm);
    background:var(--creme-fundo);font-size:.9375rem;
  }
  .painel-item.ativo{background:var(--menta);}
  .painel-selo{
    width:34px;height:34px;flex:none;border-radius:10px;
    display:grid;place-items:center;
    font-family:var(--display);font-weight:800;font-size:.9rem;
    background:rgba(14,59,58,.1);color:var(--petroleo);
  }
  .painel-item.ativo .painel-selo{background:var(--petroleo);color:var(--menta);}
  .painel-txt{display:flex;flex-direction:column;line-height:1.32;}
  .painel-txt b{font-family:var(--display);font-weight:700;}
  .painel-txt span{font-size:.8125rem;color:var(--texto-sec);}
  .painel-item.ativo .painel-txt span{color:var(--petroleo);}
  .painel-pe{
    margin-block-start:16px;font-size:.8125rem;color:var(--texto-sec);
    display:flex;align-items:center;gap:8px;
  }
  .ponto{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;}

  /* ---------- problema ---------- */
  .problema{background:var(--creme-fundo);}
  .problema-grade{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;
  }
  @media (max-width:820px){.problema-grade{grid-template-columns:1fr;}}
  .problema p{max-width:var(--medida);margin-block-start:14px;color:var(--texto-sec);}
  .lista-check{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;}
  .lista-check li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;}
  .lista-check svg{flex:none;margin-block-start:3px;}

  /* ---------- serviços ---------- */
  .cartoes{
    display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-block-start:34px;
  }
  @media (max-width:720px){.cartoes{grid-template-columns:1fr;}}
  .cartao{
    background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
    padding:26px;display:flex;flex-direction:column;gap:11px;
  }
  .cartao-icone{
    width:44px;height:44px;border-radius:13px;background:var(--menta);
    display:grid;place-items:center;margin-block-end:5px;
  }
  .cartao p{color:var(--texto-sec);font-size:.9688rem;}

  /* ---------- como funciona (sequência real) ---------- */
  .etapas{background:var(--petroleo);color:var(--creme);}
  .etapas .rotulo{color:var(--menta);}
  .etapas-grade{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-block-start:34px;
  }
  @media (max-width:900px){.etapas-grade{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.etapas-grade{grid-template-columns:1fr;}}
  .etapa{
    border-top:2px solid rgba(207,231,223,.3);padding-block-start:18px;
    display:flex;flex-direction:column;gap:9px;
  }
  .etapa:first-child{border-top-color:var(--coral);}
  .etapa-apoios{display:flex;align-items:flex-end;gap:4px;height:22px;margin-block-end:4px;}
  .apoio{width:7px;border-radius:4px;background:var(--menta);}
  .apoio.alto{background:var(--coral);}
  .etapa h3{font-size:1.0625rem;}
  .etapa p{font-size:.9375rem;color:rgba(251,246,238,.76);}
  .etapa-prazo{
    font-family:var(--display);font-size:.75rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--menta);
  }

  /* ---------- quem faz ---------- */
  .quem-grade{
    display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;
  }
  @media (max-width:820px){.quem-grade{grid-template-columns:1fr;}}
  .quem-cartao{
    background:var(--menta);border-radius:var(--raio);padding:30px;
    display:flex;flex-direction:column;gap:16px;
  }
  .quem-cartao dl{margin:0;display:flex;flex-direction:column;gap:13px;}
  .quem-linha{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
    border-bottom:1px solid rgba(14,59,58,.15);padding-block-end:11px;}
  .quem-linha:last-child{border-bottom:0;padding-block-end:0;}
  .quem-linha dt{font-size:.875rem;color:var(--petroleo);opacity:.75;}
  .quem-linha dd{margin:0;font-family:var(--display);font-weight:700;font-size:.9375rem;
    color:var(--petroleo);text-align:end;}
  .quem p{color:var(--texto-sec);max-width:var(--medida);margin-block-start:14px;}
  .quem p a{color:var(--petroleo);font-weight:600;text-underline-offset:3px;}

  /* ---------- dúvidas ---------- */
  .duvidas{background:var(--creme-fundo);}
  .faq{margin-block-start:30px;display:flex;flex-direction:column;gap:12px;max-width:820px;}
  details{
    background:#fff;border:1px solid var(--linha);border-radius:var(--raio-sm);
    padding:17px 20px;
  }
  details[open]{border-color:var(--petroleo-cl);}
  summary{
    font-family:var(--display);font-weight:700;font-size:1.0313rem;
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;
    align-items:center;gap:16px;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{
    content:"+";font-size:1.35rem;font-weight:500;color:var(--coral);
    line-height:1;flex:none;
  }
  details[open] summary::after{content:"–";}
  details p{margin-block-start:11px;color:var(--texto-sec);font-size:.9688rem;max-width:var(--medida);}
  summary:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:4px;}

  /* ---------- chamada final ---------- */
  .final{background:var(--coral);color:var(--creme);}
  .final-int{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;}
  .final h2{max-width:19ch;}
  .final p{margin-block-start:11px;max-width:44ch;color:rgba(251,246,238,.9);}
  .btn-creme{background:var(--creme);color:var(--coral-esc);}
  .btn-creme:hover{background:#fff;}

  /* ---------- rodapé ---------- */
  .rodape{background:var(--petroleo-esc);color:rgba(251,246,238,.72);padding-block:44px;font-size:.9063rem;}
  .rodape-int{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;}
  .rodape .marca-nome{color:var(--creme);font-size:1.25rem;}
  .rodape a{color:var(--menta);text-underline-offset:3px;}
  .rodape-legal{font-size:.8125rem;color:rgba(251,246,238,.5);max-width:52ch;}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;}
  }

/* ---------- páginas internas (index.php) ---------- */
.conteudo{max-width:var(--medida);}
.conteudo p,.conteudo ul,.conteudo ol{margin-block-end:1.05em;}
.conteudo h2{margin-block:1.6em .5em;}
.conteudo h3{margin-block:1.4em .4em;}
.conteudo a{color:var(--petroleo);font-weight:600;text-underline-offset:3px;}
.conteudo img{max-width:100%;height:auto;border-radius:var(--raio-sm);}
.conteudo blockquote{
  margin:1.4em 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--coral);color:var(--texto-sec);
}
.conteudo table{width:100%;border-collapse:collapse;}
.conteudo :is(table,pre){display:block;overflow-x:auto;}
.pagination{display:flex;gap:12px;margin-block-start:32px;}