/* =========================================================
   BASE B2C – SEM VARIÁVEIS
   ========================================================= */
/* =========================================================
   BASE B2C – SEM VARIÁVEIS
   ========================================================= */

/* ---------- Fonte global (webfont Inter) ---------- */
@font-face {
  font-family: 'Inter'; /* nome da fonte para usar no CSS */
  src: url('/fonts/Inter-Variable.woff2') format('woff2'); /* arquivo da fonte */
  font-weight: 100 900; /* intervalo de peso suportado */
  font-style: normal;
  font-display: swap; /* evita texto invisível enquanto carrega a fonte */
}

/* ---------- Reset básico ---------- */
* {
  margin: 0;           /* zera margens padrão do navegador */
  padding: 0;          /* zera espaçamentos internos padrão */
  box-sizing: border-box; /* inclui padding/borda no cálculo da largura/altura */
}

html {
  scroll-behavior: smooth; /* rolagem suave ao usar âncoras */
}

html,
body {
  max-width: 100%;    /* impede que algo force largura maior que a viewport */
  overflow-x: hidden; /* evita scroll horizontal indesejado */
}

body {
  display: flex;                       /* permite usar main como flex-item */
  flex-direction: column;              /* empilha header, main, footer em coluna */
  min-height: 100vh;                   /* ocupa pelo menos toda a altura da tela */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* pilha de fontes */
  font-size: 18px;                     /* tamanho base de fonte no desktop */
  background: #f9f9f9;                 /* cor de fundo do site */
  color: #222222;                      /* cor padrão do texto */
}

main {
  flex: 1; /* faz o <main> crescer para ocupar o espaço entre header e footer */
}

/* Compensa header fixo – DESKTOP padrão */
body > main {
  padding-top: 120px; /* empurra o conteúdo para baixo 120px (altura do header) */
}

.no-scroll {
  overflow: hidden; /* usado quando o menu mobile está aberto para travar rolagem do body */
}

/* ---------- Tipografia base (desktop) ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;   /* deixa os títulos em negrito médio */
  line-height: 1.25;  /* altura de linha dos títulos */
  margin-bottom: 10px;/* espaçamento inferior padrão abaixo de títulos */
}

/* Tamanhos e cores dos títulos (você pode ajustar depois) */
h1 { font-size: 30px; color: #06527b; }  /* azul da marca */
h2 { font-size: 28px; color: #f2675b; }  /* coral */
h3 { font-size: 22px; color: #f2675b; }
h4 { font-size: 20px; color: #f2675b; }
p  { font-size: 18px; line-height: 1.6; color: #444444; } /* texto de parágrafo */

/* Listas */
ul,
ol {
  padding-left: 20px; /* recuo para bullets/números */
}

ul li + li,
ol li + li {
  margin-top: 0.4em; /* espaço vertical entre itens de lista */
}

/* ---------- Imagens e mídia fluida ---------- */
img,
video,
iframe {
  max-width: 100%; /* nunca ultrapassa a largura do container */
  height: auto;    /* mantém a proporção */
  display: block;  /* remove espaço “inline” embaixo do elemento */
}

/* ---------- Containers ---------- */
.container,
.conteudo {
  max-width: 1500px;   /* largura máxima do conteúdo principal */
  margin-inline: auto; /* centraliza horizontalmente */
 
}

/* wrapper interno das páginas internas */
.conteudo_interno {
  max-width: 1500px;   /* mesma largura máxima que o container */
  margin: 0 auto;      /* centralizado */
  padding-top: 32px;   /* espaço extra abaixo do header (além do padding do main) */
  padding-left: 32px;  /* respiro lateral esquerdo */
  padding-right: 32px; /* respiro lateral direito */
}

/* ---------- Utilitários simples ---------- */
.u-left {
  text-align: left !important; /* força alinhamento à esquerda */
}

.u-center {
  text-align: center !important; /* força alinhamento central */
}

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid #f2675b; /* borda de foco coral */
  outline-offset: 2px;        /* espaço entre o foco e o elemento */
}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */

   header.navbar {
    position: fixed;                 /* header fica fixo no topo da tela */
    inset: 0 0 auto 0;               /* top:0; left:0; right:0; bottom:auto; */
    height: 120px;                   /* altura do header no desktop */
    background: #0f2b3a;             /* fundo azul escuro */
    color: #ffffff;                  /* texto branco */
    z-index: 1000;                   /* fica acima do conteúdo normal */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1); /* leve sombra embaixo do header */
  }
  
  .nav-container {
    max-width: 1500px;           /* largura máxima do conteúdo do header */
    margin: 0 auto;              /* centraliza o conteúdo do header */
    height: 100%;                /* ocupa toda a altura do header */
    display: flex;               /* flexbox para distribuir logo e menu */
    align-items: center;         /* alinha verticalmente no centro */
    justify-content: space-between; /* logo à esquerda, menu à direita */
    padding: 0 12px;             /* respiro lateral do header */
  }
  
  /* Logo */
  .logo-nav {
    height: 80px; /* altura da logo; largura é proporcional */
    width: auto;
    display: block;
  }
  
  .logo-desktop { display: block; }  /* logo usada no desktop */
  .logo-mobile  { display: none; }   /* logo mobile escondida por padrão */
  
  /* Links do menu (desktop) */
  .nav-links {
    display: flex;               /* itens na horizontal */
    align-items: center;
    gap: 40px;                   /* espaço entre os links */
  }
  
  .nav-links a {
    color: #ffffff;              /* links brancos */
    font-size: 24px;             /* tamanho dos links do menu */
    text-decoration: none;       /* remove sublinhado */
    position: relative;          /* necessário para a linha de destaque */
    padding-bottom: 4px;         /* espaço para a linha embaixo */
    transition: color .2s ease;  /* transição suave na cor */
  }
  
  .nav-links a:hover,
  .nav-links a.active,
  footer a.active {
    color: #f2675b;              /* muda para coral no hover/ativo */
  }
  
  .nav-links a:hover::after,
  .nav-links a.active::after {
    content: "";                 /* cria a linha */
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: #f2675b;         /* linha coral */
  }
  
  /* Botão hambúrguer – aparece só no mobile */
  .hamburger {
    display: none;               /* escondido no desktop */
    font-size: 32px;             /* tamanho do ícone (≃ 3 linhas) */
    background: none;            /* sem fundo */
    border: none;                /* sem borda */
    color: #ffffff;              /* ícone branco */
    cursor: pointer;             /* cursor de clique */
  }
  
/* =========================================================
   BANDEIRAS – DESKTOP vs MOBILE
   ========================================================= */

/* Bandeiras de idioma no topo – visíveis apenas em DESKTOP */
.bandeiras-topo {
  position: fixed;      /* fixas no topo da tela */
  top: -5px;            /* levemente acima do topo visual (encaixe fino) */
  right: 10px;          /* encostadas à direita */
  z-index: 1100;        /* acima do header e conteúdo */
  display: flex;        /* bandeiras lado a lado */
  gap: 6px;             /* espaço entre bandeiras */
  padding: 5px;         /* pequeno respiro interno */
}

.bandeiras-topo img {
  width: 25px;          /* largura da bandeira */
  height: auto;         /* mantém proporção */
  opacity: 0.4;         /* ligeiramente transparente */
  cursor: pointer;      /* cursor de clique */
  transition: opacity 0.2s ease, transform 0.2s ease; /* animação suave */
}

.bandeiras-topo img:hover {
  opacity: 1;           /* fica totalmente opaca ao passar o mouse */
  transform: scale(1.1);/* leve zoom no hover */
}

/* Dropdown mobile – escondido no desktop por padrão */
.lang-toggle,
.lang-menu {
  display: none;        /* só aparecerão nas media queries de até 1024px */
}


/* =========================================================
   FOOTER
   ========================================================= */

   footer.footer {
    background-color: #0f2b3a; /* mesma cor do header */
    color: #ffffff;
    text-align: center;
    width: 100%;
  }
  
  /* Bloco principal do footer (3 colunas) */
  .footer-conteudo {
    max-width: 1500px;         /* largura máxima */
    margin: 0 auto;            /* centralizado */
    padding: 32px 16px 16px;   /* espaço interno: topo, laterais e baixo */
    display: flex;             /* colunas lado a lado */
    flex-wrap: wrap;           /* permite quebrar para segunda linha se apertar */
    justify-content: center;   /* centraliza colunas na horizontal */
    gap: 64px;                 /* espaço entre colunas */
  }
  
  .footer-coluna {
    min-width: 240px;          /* largura mínima de cada coluna */
  }
  
  .footer-coluna h3 {
    color: #f2675b;            /* títulos coral */
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .footer-coluna p,
  .footer-coluna a {
    color: #ffffff;            /* texto branco */
    font-size: 16px;
    text-decoration: none;     /* links sem sublinhado */
  }
  
  /* Ícones sociais */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }
  
  .footer-social img {
    height: 50px;
    width: 50px;
    background: #f2675b;       /* círculo coral */
    border-radius: 50%;        /* torna redondo */
    transition: transform .2s; /* animação no hover */
  }
  
  .footer-social img:hover {
    transform: scale(1.1);     /* leve zoom */
  }
  
  /* Links inferiores (Impressum/Datenschutz, AGB) */
  .footer-bottom {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 20px 0;
  }
  
  .footer-bottom a {
    color: #cccccc;
    font-size: 14px;
    text-decoration: none;
  }
  
  .footer-bottom a:hover {
    color: #ffffff;            /* clareia no hover */
  }
  
  /* Mapa – full bleed (vai de ponta a ponta da tela) */
  .footer-mapa {
    width: 100vw;                        /* ocupa a largura da viewport */
    margin-left: calc(50% - 50vw);       /* “puxa” para a borda esquerda */
    margin-right: calc(50% - 50vw);      /* “puxa” para a borda direita */
    background-color: #0f2b3a;           /* mantém cor de fundo em volta */
  }
  
  .footer-mapa iframe {
    width: 100%;              /* mapa cheio na largura */
    height: 300px;            /* altura fixa (ajustável) */
    border: none;             /* sem borda */
    display: block;           /* remove espaço inline extra */
  }
  
  /* Copy (linha final) */
  .footer-copy {
    background-color: #0f2b3a;
    text-align: center;
    font-size: 14px;
    color: #aaaaaa;           /* cinza mais claro */
    padding: 16px 0;
    line-height: 1.6;
  }
  
  /* =========================================================
     FULL-BLEED UTILITÁRIO (para outras seções com bleed)
     ========================================================= */
  
  .full-bleed {
    width: 100vw;                         /* ocupa larg. viewport */
    margin-left: calc(50% - 50vw);        /* cola à esquerda */
    margin-right: calc(50% - 50vw);       /* cola à direita */
    position: relative;
    background: transparent;
  }
  
  .full-bleed > .container {
    max-width: 1500px;     /* conteúdo volta a ficar centralizado com largura máxima */
    margin-inline: auto;
  }
  
/* =========================================================
   RESPONSIVO
   ========================================================= */
/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ---------------------------------------------------------
   ≤ 1500px – ajustes leves de padding interno
   --------------------------------------------------------- */
   @media (max-width: 1500px) {
    .conteudo_interno {
      padding-left: 32px;  /* mantém respiro lateral */
      padding-right: 32px;
      border:1px solid red;
    }
    
  }
  
  /* ---------------------------------------------------------
     ≤ 1024px – Tablet landscape
     --------------------------------------------------------- */
  @media (max-width: 1024px) {
  
    /* header fica um pouco menor */
    header.navbar {
      height: 110px;
    }
  
    body > main {
      padding-top: 110px; /* compensa altura menor do header */
    }
  
    .conteudo_interno {
      padding-left: 24px;  /* menos padding lateral em telas menores */
      padding-right: 24px;
    }
  
    /* Tipografia levemente reduzida */
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }
    p  { font-size: 17px; }
  
    .nav-links a {
      font-size: 18px;
    }
  
    .footer-conteudo {
      gap: 32px;                        /* menos espaço entre colunas */
    }
  }
  
  /* ---------------------------------------------------------
     ≤ 834px – iPad portrait
     --------------------------------------------------------- */
  @media (max-width: 834px) {
  
    header.navbar {
      height: 100px;
    }
  
    body > main {
      padding-top: 100px; /* compensa header menor */
    }
  
    /* reduz mais a tipografia */
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    p  { font-size: 16px; }
  
    .footer-conteudo {
      flex-direction: column;  /* colunas empilhadas */
      align-items: center;
      gap: 24px;
    }
  
    .footer-bottom {
      flex-direction: column;
      gap: 8px;
    }
  
    .footer-mapa iframe {
      height: 260px;           /* mapa um pouco mais baixo */
    }
  }
  
  /* ---------------------------------------------------------
     ≤ 768px – Mobile landscape / tablet pequeno
     --------------------------------------------------------- */
  @media (max-width: 768px) {


    /* BANDEIRAS – desktop some, dropdown mobile aparece */
  
    .bandeiras-topo {
      display: none; /* esconde bandeiras fixas no topo */
    }
  
    .lang-toggle {
      display: inline-flex;                     /* mostra botão de idiomas */
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.15);    /* leve fundo translúcido */
      border: 1px solid rgba(255, 255, 255, 0.4);
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1200;
      color: #ffffff;
    }
  
    .lang-toggle img {
      width: 26px;
      height: auto;
      display: block;
    }
  
    .lang-menu {
      position: absolute;
      right: 13px;
      top: 70px;                        /* aparece logo abaixo do header */
      z-index: 1500;
      display: none;                    /* começa escondido, JS adiciona .active */
      background: rgba(255, 255, 255, 0.611); /* fundo claro */
      border: 1px solid #dddddd;
      border-radius: 4px;
      list-style: none;
      padding: 4px 0;
      margin: 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    }
  
    .lang-menu.active {
      display: block;                   /* mostrado quando o botão é clicado */
    }
  
    .lang-menu li a {
      display: block;
      padding: 4px 12px;
      text-align: center;
    }
  
    .lang-menu img {
      width: 30px;
      height: auto;
      display: block;
      margin: 0 auto;
    }
  
  
    header.navbar {
      height: 100px;
      padding: 12px 0;
    }
  
    body > main {
      padding-top: 100px;
    }
  
    .nav-container {
      justify-content: center; /* centraliza logo no mobile */
    }
  
    /* Troca para logo mobile */
    .logo-desktop { display: none; }
    .logo-mobile  { display: block; width: 70px; height: 70px; margin: 0 auto; }
  
    /* Hambúrguer aparece no mobile */
    .hamburger {
      display: block;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1201;
    }
  
    /* Menu principal como dropdown */
    .nav-links {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;                            /* abaixo do header */
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.724); /* fundo claro */
      text-align: center;
      gap: 1rem;
      padding: 2rem 1rem;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
      backdrop-filter: blur(4px);
      opacity: 0;
      transform: translateY(-16px);
      pointer-events: none;
      transition: transform .3s ease, opacity .3s ease;
    }
  
    .nav-links.active {
      opacity: 1;
      transform: translateY(0); /* aparece deslizando */
      pointer-events: auto;
    }
  
    .nav-links a {
      color: #333333;
      border-bottom: 1px solid #eeeeee;
      padding: 8px 0;
      font-size: 22px;
    }
  
    .nav-links a:last-child {
      border-bottom: none;
    }
  }
  
  /* ---------------------------------------------------------
     ≤ 480px – Mobile portrait
     --------------------------------------------------------- */
  @media (max-width: 480px) {
  
    header.navbar {
      height: 90px;
    }
  
    body > main {
      padding-top: 90px;
    }
  
    /* fontes menores para telas pequenas */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    p  { font-size: 15px; }
  
    .conteudo_interno {
      padding-left: 16px;  /* menos respiro lateral */
      padding-right: 16px;
    }
  
    .logo-mobile {
      width: 60px;
      height: 60px;
    }
  
    .footer-social img {
      width: 40px;
      height: 40px;
    }
  
    .footer-mapa iframe {
      height: 220px;
    }
  }