/* Reset básico */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: Roboto, Arial, sans-serif;
  color: #e9e9e9;
}

/* Fundo com imagem */
#content{
  min-height: 100vh;
  position: relative;
  background-image: url("bolo.png"); /* <-- sua imagem de fundo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay (camada escura/esverdeada por cima da imagem) */
#content::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(20, 40, 35, 0.557); /* verde escuro translúcido */
}

/* Tudo por cima do overlay */
#conteudo_interno, #midias{
  position: relative;
  z-index: 1;
}

/* Ícones sociais no topo direito */
#midias{
 
  text-align: left; 
  
  

}
#wts{
   
    margin-right: 30px;;
}
#midias img{
  width: 60px;
  

}
a {
    color: inherit;
    text-decoration: none; /* opcional */
  }
/* Layout geral: logo à esquerda + texto à direita */
#conteudo_interno{

max-width: 80%;;
margin-left: 10%;;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows: auto 1fr auto;
  
  align-items: center;
  column-gap: 40px;

}

/* Logo grande à esquerda */
#logo{
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-start;
  margin-top: -150px;;
  
}

#logo img{
  width: min(340px, 100%);
  height: auto;
  opacity: 0.70;
  
}

/* Texto principal na direita */
#texto{
    margin-top: 150px;;
  grid-column: 2;
  grid-row: 1;
  max-width: 820px;
  padding-top: 40px;
}

#texto h1{
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
  color: rgba(255,255,255,.88);
}

#texto p{
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.35;
  color: rgba(255,255,255,.75);
}

#texto p.sub{
  margin-top: 28px;
  font-size: clamp(18px, 1.8vw, 30px);
  color: rgba(255,255,255,.70);
}

/* Contatos embaixo (3 colunas) */
#contato{
   
    margin-top: -900px;;
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 20px;
  align-items: inherit;
  padding-top: 10px;
}

.contatos .label{
  display: block;
  font-size: 20px;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  color: #a5a94c; /* amarelo-lima como no print */
  font-weight: 700;
}

.contatos .value{
  display: block;
  font-size: 30px;
  line-height: 1.2;
  color: rgba(255,255,255,.70);
}

/* Responsivo */
    /* =========================
   MOBILE (até 768px)
   Cole no FINAL do CSS
========================= */
@media (max-width: 768px) {

    /* Segurança */
    body {
      overflow-x: hidden;
    }
  
    /* Conteúdo principal */
    #conteudo_interno {
      max-width: 100%;
      margin: 0;
      padding: 32px 20px 40px;
      min-height: 100vh;
  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      text-align: center;
    }
  
    /* Logo */
    #logo {
      margin: 0;              /* remove margin negativa */
      justify-content: center;
      ;
    }
  
    #logo img {
      width: min(160px, 70vw);
      opacity: 0.85;
    }
  
    /* Texto */
    #texto {
      margin: 0;              /* remove margin-top: 150px */
      padding: 0;
      max-width: 100%;
    }
  
    #texto h1 {
      font-size: clamp(22px, 6vw, 30px);
      line-height: 1.2;
    }
  
    #texto p,
    #texto p.sub {
      font-size: 20px;
      line-height: 1.4;
    }
  
    /* Contato */
    #contato {
      margin: 0;              /* remove margin-top: -900px */
      padding: 0;
      width: 100%;
  
      display: flex;
      flex-direction: column;
      gap: 18px;
      text-align: center;
    }
  
    .contatos .label {
      font-size: 16px;
    }
  
    .contatos .value {
      font-size: 18px;
      word-break: break-word;
    }
  
    /* Mídias sociais */
    #midias {
      position: relative;
      margin-top: 10px;
      text-align: center;
    }
  
    #midias img {
      width: 60px;
      height: 60px;
    }
  
    #wts {
      margin-right: 16px;
    }
  }
  

  /* =========================
   iPad / Tablet (769px – 1024px)
   Cole no FINAL do seu style.css (depois do mobile)
========================= */
@media (min-width: 769px) and (max-width: 1024px) {

    body { overflow-x: hidden; }
  
    /* Mantém o fundo ok */
    #content{
      min-height: 100vh;
    }
  
    /* Container vira 1 coluna (tablet) pra não apertar */
    #conteudo_interno{
      max-width: 92%;
      margin: 0 auto;
      padding: 64px 28px 44px;
      min-height: 100vh;
  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 34px;
      text-align: center;
    }
  
    /* Remove margens negativas que quebram no iPad */
    #logo{
      margin-top: 0;
      grid-column: auto;
      grid-row: auto;
      justify-content: center;
      align-items: center;
    }
  
    #logo img{
      width: min(320px, 55vw);
      opacity: 0.85;
    }
  
    #texto{
      margin-top: 0;
      padding-top: 0;
      max-width: 720px;
    }
  
    #texto h1{
      font-size: clamp(26px, 3.6vw, 38px);
      line-height: 1.2;
    }
  
    #texto p{
      font-size: clamp(16px, 2vw, 22px);
      line-height: 1.45;
    }
  
    #texto p.sub{
      margin-top: 18px;
      font-size: clamp(16px, 2.1vw, 24px);
    }
  
    /* Contato em 2 colunas (fica bonito no iPad) */
    #contato{
      margin-top: 0;
      padding-top: 0;
      width: 100%;
  
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 22px;
      justify-items: center;
      text-align: center;
    }
  
    /* Se tiver 3 itens, o terceiro ocupa a linha de baixo centralizado */
    #contato .contatos:nth-child(3){
      grid-column: 1 / -1;
      max-width: 520px;
    }
  
    .contatos .label{
      font-size: 18px;
      margin-bottom: 8px;
    }
  
    .contatos .value{
      font-size: 22px;
      line-height: 1.25;
      word-break: break-word;
    }
  
    /* Ícones sociais: tamanho “tablet” */
    #midias{
      position: relative;
      text-align: center;
      margin-top: 6px;
    }
  
    #midias img{
      width: 44px;
      height: 44px;
    }
  
    #wts{
      margin-right: 20px;
    }
  }

  /* =========================
   LANDSCAPE (tablet & mobile)
========================= */
@media (orientation: landscape) and (max-height: 820px) {

    body {
      overflow-x: hidden;
    }
  
    /* Estrutura geral: volta para 2 colunas */
    #conteudo_interno {
      max-width: 90%;
      margin: 0 auto;
      padding: 40px 32px;
  
      display: grid;
      grid-template-columns: 360px 1fr;
      grid-template-rows: auto auto;
      column-gap: 40px;
      row-gap: 24px;
  
      align-items: center;
      justify-content: center;
      text-align: left;
    }
  
    /* Logo à esquerda */
    #logo {
      grid-column: 1;
      grid-row: 1 / span 2;
      margin: 0;
      justify-content: flex-start;
    }
  
    #logo img {
      width: min(300px, 40vw);
      opacity: 0.85;
    }
  
    /* Texto à direita */
    #texto {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      padding: 0;
      max-width: 720px;
    }
  
    #texto h1 {
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.2;
    }
  
    #texto p,
    #texto p.sub {
      font-size: clamp(24px, 1.6vw, 24px);
      line-height: 1.4;
    }
  
    /* Contatos em linha */
    #contato {
      grid-column: 2;
      grid-row: 2;
      margin: 0;
      padding-top: 8px;
  
      display: grid;
      grid-template-columns: repeat(3, minmax(160px, 1fr));
      gap: 20px;
      align-items: flex-start;
    }
  
    .contatos .label {
      font-size: 16px;
    }
  
    .contatos .value {
      font-size: 20px;
      line-height: 1.2;
      word-break: break-word;
    }
  
    /* Ícones sociais */
    #midias {
      position: absolute;
      top: 20px;
      right: 20px;
      text-align: right;
    }
  
    #midias img {
      width: 40px;
      height: 40px;
    }
  
    #wts {
      margin-right: 16px;
    }
  }