/* Página do produto (raiz do endereço). Medidas do ESPEC.md da rodada do GPT de 03/11/2026
   (Meu Drive/clientes/protectpool/ux-ia-2026-11-03-pagina-produto). Página pública: não usa a escala do sistema. */
:root {
  --terracota: #C45736; --grafite: #253138; --texto: #5E696F; --acao: #26654E;
  --fundo-abertura: #F7F5EF; --fundo-evolucao: #EEF3EE; --fundo-fechamento: #F6F3ED;
  --borda: #E0E4DF; --figura: #F7F9F4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--grafite); font: 400 15px/24px "DejaVu Sans", sans-serif;
  -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; color: var(--grafite); }
p { margin: 0; }
.caixa { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.ico { width: 18px; height: 18px; flex: none; }

/* Topo */
.cabeca { background: #fff; }
.cabeca__linha { height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.logo img { width: 195px; }
.cabeca nav { display: flex; align-items: center; gap: 32px; font-size: 13px; line-height: 20.8px; }
.cabeca nav a { text-decoration: none; }
.entrar { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--borda);
  border-radius: 6px; }
.entrar .ico { width: 15px; height: 15px; }

/* Botões */
.botao { display: inline-flex; align-items: center; gap: 14px; background: var(--acao); color: #fff;
  font-size: 13px; line-height: 20.8px; font-weight: 700; padding: 15px 23px; border-radius: 7px; text-decoration: none; }
.botao:hover { background: #1f5541; }
.botao--claro { background: #fff; color: var(--grafite); flex: none; padding: 16px; font-size: 11px; line-height: 17.6px; }
.botao--claro:hover { background: #f1f1ee; }

/* Abertura */
.abertura { background: var(--fundo-abertura); padding: 60px 0 45px; }
.abertura__grade { display: grid; grid-template-columns: 0.9fr 1.2fr; gap: 30px; align-items: center; }
.contexto, .sobre { font-size: 11px; line-height: 17.6px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--grafite); margin-bottom: 18px; }
.abertura h1 { font-size: 54px; line-height: 58.32px; letter-spacing: -2.8px; margin-bottom: 24px; }
.abertura h1 span { color: var(--terracota); }
.abertura__texto > p:not(.contexto):not(.apoio) { font-size: 16px; line-height: 25.6px; color: var(--texto); margin-bottom: 28px; }
.apoio { font-size: 12px; line-height: 19.2px; color: var(--texto); margin-top: 16px; }
.abertura__visual { margin: 0 -35px 0 -25px; }
.legenda { border-left: 3px solid var(--terracota); padding-left: 18px; margin: 18px 0 0 60px; max-width: 460px; }
.legenda b { font-size: 13px; line-height: 20.8px; }
.legenda p { font-size: 12px; line-height: 19.2px; color: var(--texto); }

/* Aviso único */
.aviso { background: #FFF8E9; border: 1px solid #EADABE; border-radius: 10px; padding: 22px 26px; margin: 30px 0; }
.aviso b { font-size: 13px; line-height: 20.8px; color: var(--grafite); display: block; margin-bottom: 6px; }
.aviso p { font-size: 12px; line-height: 20.4px; color: #695D47; }

/* Ramos */
.ramos { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 24px 50px; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; font-size: 11px; line-height: 25.3px; color: var(--texto); }
.ramos span { white-space: nowrap; }
.ramos span + span::before { content: "·"; margin: 0 14px; color: #A9B1B4; }

/* Seções */
.secao { padding: 75px 0; }
.secao h2, .fechamento h2 { font-size: 35px; line-height: 42px; letter-spacing: -1.2px; }
.lead { color: var(--texto); margin-top: 18px; }
.base__grade { display: grid; grid-template-columns: 0.9fr 1.15fr; gap: 30px; align-items: center; margin-bottom: 40px; }
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cartoes article { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 28px; }
.cartao__ico { display: block; color: var(--terracota); margin-bottom: 20px; }
.cartao__ico .ico { width: 30px; height: 30px; }
.cartoes h3 { font-size: 21px; line-height: 27.3px; margin: 14px 0 12px; }
.cartoes article > .cartao__ico + h3 { margin-top: 0; }
.cartoes p { font-size: 13px; line-height: 20.8px; color: var(--texto); }
.selo { display: inline-block; font-size: 10px; line-height: 16px; font-weight: 700; padding: 5px 9px; border-radius: 25px;
  border: 1px solid; }
.selo--pronto { background: #EEF6EF; color: #28624F; border-color: #CBDED2; }
.selo--caminho { background: #F6EDDF; color: #785D37; border-color: #DFD1BB; flex: none; }

/* Evolução */
.evolucao { background: var(--fundo-evolucao); }
.evolucao__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: start; }
.evolucao__texto h2 { margin-bottom: 20px; }
.evolucao__texto > p:not(.sobre) { color: var(--texto); font-size: 13px; line-height: 20.8px; margin-bottom: 14px; }
.telefone { max-width: 300px; margin: 30px auto 0; }
.matriz { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.matriz article { background: #fff; border: 1px solid var(--borda); border-radius: 9px; padding: 26px; }
.matriz .ico { width: 30px; height: 30px; color: var(--terracota); margin-bottom: 20px; }
.matriz strong { display: block; font-size: 17px; line-height: 23.8px; margin-bottom: 8px; }
.matriz p { font-size: 13px; line-height: 21.45px; color: var(--texto); }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 45px 0 40px; }
.galeria figure { margin: 0; background: var(--figura); border: 1px solid var(--borda); border-radius: 14px; padding: 10px 10px 22px; }
.galeria img { max-height: 430px; width: 100%; object-fit: contain; }
.galeria figcaption { text-align: center; font-size: 15px; line-height: 24px; font-weight: 700; margin-top: 8px; }
.caminho { display: flex; align-items: center; gap: 25px; margin-top: 30px; padding: 25px; border-radius: 8px;
  background: var(--fundo-fechamento); }
.caminho p { font-size: 12px; line-height: 19.2px; color: var(--texto); }

/* Redes */
.redes { background: var(--grafite); padding: 75px 0; }
.redes__linha { display: flex; align-items: center; gap: 32px; }
.redes__ico { width: 64px; height: 64px; display: grid; place-items: center; color: #E8A78C; flex: none; align-self: flex-start; }
.redes__ico .ico { width: 58px; height: 58px; }
.redes__texto { flex: 1; }
.redes .sobre { color: #fff; }
.redes h2 { color: #fff; font-size: 29px; line-height: 34.8px; letter-spacing: -1.2px; margin-bottom: 14px; }
.redes__texto > p:not(.sobre) { color: #C2CED1; font-size: 13px; line-height: 20.8px; max-width: 620px; }

/* Fechamento */
.fechamento { background: var(--fundo-fechamento); padding: 75px 0; text-align: center; }
.fechamento h2 { margin-bottom: 18px; }
.fechamento p:not(.sobre) { color: var(--texto); max-width: 640px; margin: 0 auto 28px; }
.fechamento .botao { padding: 17px 23px; }

/* Rodapé */
.rodape { padding: 36px 0; font-size: 10px; line-height: 16px; color: var(--texto); }
.rodape__linha { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.rodape__marca { width: 160px; }
.rodape a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rodape p a { text-decoration: underline; }
.rodape .ico { width: 13px; height: 13px; }

/* Intermediário: empilha as grades de duas colunas antes de apertar */
@media (max-width: 1024px) {
  .abertura__grade, .base__grade, .evolucao__grade { grid-template-columns: 1fr; }
  .abertura__visual { margin: 0; }
  .evolucao__grade { gap: 40px; }
}

/* Celular */
@media (max-width: 600px) {
  body { font-size: 14px; line-height: 22.4px; }
  .caixa { padding: 0 22px; }
  .cabeca__linha { height: 86px; }
  .logo img { width: 160px; }
  .nav-interno { display: none; }
  .entrar { padding: 8px 14px; font-size: 11px; line-height: 17.6px; }
  .botao { font-size: 12px; line-height: 19.2px; }
  .abertura { padding: 40px 0 35px; }
  .abertura__grade { gap: 20px; }
  .abertura h1 { font-size: 39px; line-height: 42.12px; letter-spacing: -1.8px; }
  .abertura__texto > p:not(.contexto):not(.apoio) { font-size: 14px; line-height: 22.4px; }
  .abertura__visual img { max-width: 320px; margin: 0 auto; }
  .legenda { margin: 18px 0 0; }
  .aviso { margin: 22px 0; padding: 20px; }
  .ramos { padding: 18px 22px; font-size: 10px; line-height: 23px; }
  .ramos span + span::before { margin: 0 8px; }
  .secao, .redes, .fechamento { padding: 48px 0; }
  .secao h2, .fechamento h2 { font-size: 28px; line-height: 33.6px; letter-spacing: -1px; }
  .cartoes { grid-template-columns: 1fr; gap: 14px; }
  .cartoes article { padding: 24px; }
  .cartao__ico .ico, .matriz .ico { width: 28px; height: 28px; }
  .matriz { gap: 12px; }
  .matriz article { padding: 18px 15px; }
  .matriz strong { font-size: 14px; line-height: 19.6px; }
  .matriz p { font-size: 12px; line-height: 19.2px; }
  .telefone { max-width: 280px; }
  .galeria { grid-template-columns: 1fr; gap: 16px; margin: 30px 0; }
  .galeria figure { padding: 4px 4px 20px; }
  .galeria figcaption { font-size: 13px; line-height: 20.8px; }
  .caminho { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; margin-top: 24px; }
  .redes__linha { flex-direction: column; align-items: flex-start; gap: 0; }
  .redes__ico { width: 40px; height: 40px; margin-bottom: 18px; }
  .redes__ico .ico { width: 40px; height: 40px; }
  .redes h2 { font-size: 27px; line-height: 32.4px; }
  .redes .botao { margin-top: 24px; }
  .fechamento { text-align: left; }
  .fechamento p:not(.sobre) { margin: 0 0 28px; }
  .rodape { padding: 30px 0; }
  .rodape__linha { flex-direction: column; align-items: flex-start; gap: 14px; }
}