/* =========================================================
   Amplo Mídia — identidade visual
   Cores extraídas da logomarca (azul royal + prata)
   ========================================================= */

/* A cor de destaque (--e-global-color-0066ab1) é trocada direto nos CSS do
   Elementor pelo build.sh: #57A3B0 -> #0146af. Aqui ficam só os ajustes
   que dependem do contexto (fundos sólidos, hover, detalhes). */

:root {
  --amplo-azul: #0146af;        /* azul da marca — botões e fundos sólidos */
  --amplo-azul-escuro: #01337f; /* hover / profundidade */
  --amplo-azul-claro: #4790ea;  /* texto e ícones sobre o fundo escuro (~5:1) */
  --amplo-prata: #B9BDC2;       /* prata da logo */
  --amplo-prata-claro: #E2E5E8;
}

/* ---------- Legibilidade sobre o fundo escuro ----------
   O azul #0146af rende 8,4:1 sobre fundo claro, mas só 1,9:1 sobre o fundo
   escuro do site (#232323 / #1B1B1B) — praticamente invisível. O amplo.js
   marca esses elementos e aqui eles recebem um tom mais claro do mesmo azul,
   que chega a ~5:1 mantendo a identidade da marca. */
.amplo-sobre-escuro,
.amplo-sobre-escuro i,
.amplo-sobre-escuro span {
  color: var(--amplo-azul-claro) !important;
}
.amplo-sobre-escuro svg,
.amplo-sobre-escuro i::before {
  fill: var(--amplo-azul-claro) !important;
  color: var(--amplo-azul-claro) !important;
}

/* ---------- Botões: azul cheio da logo com texto branco ---------- */
.elementor-button[class*="elementor-size"],
.elementor-button-wrapper .elementor-button,
.ekit-btn,
button[type="submit"],
input[type="submit"] {
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.elementor-button:hover,
.elementor-button:focus,
button[type="submit"]:hover,
input[type="submit"]:hover {
  box-shadow: 0 6px 20px rgba(1, 70, 175, .35);
}

/* Onde o Elementor pinta o fundo com a cor global, usa o azul cheio */
.elementor-widget-button .elementor-button[style*="background"],
.elementor-element .elementor-button-wrapper .elementor-button {
  --amplo-btn: var(--amplo-azul);
}

/* ---------- Links e ícones de destaque ---------- */
a:hover .elementor-icon,
.elementor-social-icon:hover {
  background-color: var(--amplo-azul) !important;
}

/* ---------- Detalhes prateados da logo ---------- */
.elementor-divider-separator {
  border-image: linear-gradient(90deg, var(--amplo-azul), var(--amplo-prata)) 1;
}

/* ---------- Logo no cabeçalho e rodapé ---------- */
.elementor-widget-theme-site-logo img,
.elementor-widget-image img[src*="logo-amplo-midia"] {
  filter: drop-shadow(0 2px 10px rgba(1, 70, 175, .25));
}

/* Respiro em volta da logo do topo.
   O CSS do Elementor fixa a altura da imagem em 90px, o que espicharia a
   logomarca horizontal (proporção ~3,6:1 — daria quase 330px de largura na
   barra). Aqui a altura cai para um valor proporcional à assinatura deitada e
   a margem devolve o respiro, mantendo a barra com a mesma altura total. */
.elementor-location-header img[src*="logo-amplo-midia"],
header img[src*="logo-amplo-midia"] {
  width: auto !important;
  height: 56px !important;
  margin: 20px 0 !important;
  object-fit: contain;
}

/* No celular a barra é mais baixa; a logo acompanha. */
@media (max-width: 1024px) {
  .elementor-location-header img[src*="logo-amplo-midia"],
  header img[src*="logo-amplo-midia"] {
    height: 40px !important;
    margin: 18px 0 !important;
  }
}

/* Telas estreitas: a assinatura deitada é larga e divide a barra com o menu.
   Deixa a largura mandar para ela nunca encostar no botão do menu. */
@media (max-width: 480px) {
  .elementor-location-header img[src*="logo-amplo-midia"],
  header img[src*="logo-amplo-midia"] {
    height: auto !important;
    width: 150px !important;
    max-width: 45vw !important;
    margin: 14px 0 !important;
  }
}

/* Logo do rodapé. Sem a altura fixa do cabeçalho, a imagem assumiria os 720px
   do arquivo; aqui ela fica no tamanho da coluna. */
.elementor-location-footer img[src*="logo-amplo-midia"],
footer img[src*="logo-amplo-midia"] {
  width: auto !important;
  height: 68px !important;
  max-width: 100% !important;
  object-fit: contain;
}

@media (max-width: 767px) {
  .elementor-location-footer img[src*="logo-amplo-midia"],
  footer img[src*="logo-amplo-midia"] {
    height: 56px !important;
  }
}

/* ---------- "Mapa de Pontos": item destacado do menu ----------
   Os demais itens são texto branco solto sobre a barra escura. Este vira uma
   pílula azul cheia para puxar o olho — branco sobre #0146af rende 8,4:1, bem
   acima do mínimo. O !important é necessário porque o Elementor pinta o item
   pelo seletor longo .elementor-125 .elementor-element-df5d0d5 .pp-menu-item. */
.amplo-menu-mapa > .pp-menu-item {
  background-color: var(--amplo-azul) !important;
  color: #fff !important;
  fill: #fff !important;
  border-radius: 999px;
  padding: 9px 20px !important;
  margin-left: 8px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .25s ease;
}

.amplo-menu-mapa > .pp-menu-item:hover,
.amplo-menu-mapa > .pp-menu-item:focus-visible {
  background-color: var(--amplo-azul-escuro) !important;
  color: #fff !important;
}

/* No menu sanduíche os itens viram lista vertical e ocupam a largura toda; a
   pílula precisa voltar a ter a largura do próprio texto para não virar barra. */
.pp-advanced-menu--dropdown .amplo-menu-mapa {
  text-align: center;
}

.pp-advanced-menu--dropdown .amplo-menu-mapa > .pp-menu-item {
  display: inline-block;
  margin: 10px 0;
}

/* ---------- Botão flutuante do WhatsApp / barra fixa ---------- */
.elementor-button-link[href*="whatsapp"]:hover {
  background-color: var(--amplo-azul-escuro) !important;
}

/* ---------- Balão "Tem uma ideia?" da home ----------
   O fundo agora é a bola da logomarca (balao-amplo.png) no lugar do círculo
   teal do site antigo. A sombra no texto garante a leitura sobre as partes
   mais claras do "A" da marca. */
.elementor-element-52855581 .elementor-heading-title,
.elementor-element-52855581 .elementor-widget-heading {
  text-shadow: 0 2px 12px rgba(0, 20, 60, .55);
}

/* ---------- Seleção de texto ---------- */
::selection { background: var(--amplo-azul); color: #fff; }
::-moz-selection { background: var(--amplo-azul); color: #fff; }

/* ---------- Barra de rolagem ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1B1B1B; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--amplo-azul), var(--amplo-azul-escuro));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--amplo-azul-claro); }

/* ---------- Mensagem de retorno do formulário ---------- */
.amplo-form-msg {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: rgba(1, 70, 175, .14);
  border: 1px solid var(--amplo-azul);
  color: #fff;
}

/* =========================================================
   Blocos escritos à mão
   ---------------------------------------------------------
   Daqui para baixo está o que não veio do clone: a chamada do Mapa de Pontos
   (bloco reaproveitado na home e na página de serviços) e a página de
   serviços inteira. São classes próprias, com prefixo "amplo-".

   Os títulos aparecem como ".amplo-hero h1.amplo-hero__titulo" e não só pela
   classe porque o kit do Elementor pinta ".elementor-kit-121 h1" — dois níveis
   de especificidade, que ganhariam de uma classe sozinha e deixariam os
   títulos cinza-escuro em cima das faixas escuras, quase invisíveis.
   ========================================================= */

.amplo-largura {
  width: min(1140px, 100% - 48px);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Botão ---------- */
.amplo-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid var(--amplo-azul-claro);
  background: var(--amplo-azul);
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.amplo-botao:hover,
.amplo-botao:focus-visible {
  background: var(--amplo-azul-escuro);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(1, 70, 175, .4);
}

.amplo-botao--vazado {
  background: transparent;
  border-color: rgba(226, 229, 232, .45);
  color: var(--amplo-prata-claro) !important;
}

.amplo-botao--vazado:hover,
.amplo-botao--vazado:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  color: #fff !important;
  box-shadow: none;
}

/* ---------- Chamada do Mapa de Pontos ----------
   Faixa escura, tanto na home quanto na página de serviços, para destacar o
   bloco das seções claras que ficam em volta. O texto branco sobre esse
   gradiente fica bem acima de 10:1; o azul claro dos números, em torno de
   5:1 — os dois com folga sobre o mínimo. */
.amplo-mapa {
  padding: clamp(56px, 8vw, 96px) 0;
  background:
    radial-gradient(120% 130% at 85% 12%, rgba(1, 70, 175, .45) 0%, rgba(1, 70, 175, 0) 62%),
    linear-gradient(160deg, #0a1728 0%, #0d1e39 55%, #060f1e 100%);
  color: #fff;
  overflow: hidden;
}

.amplo-mapa__grade {
  width: min(1140px, 100% - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

.amplo-mapa__olho,
.amplo-olho {
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amplo-azul-claro);
}

.amplo-mapa h2.amplo-mapa__titulo {
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
}

.amplo-mapa__linha {
  margin: 0 0 28px;
  max-width: 52ch;
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .84);
}

.amplo-mapa__numeros {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
}

.amplo-mapa__numeros li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.amplo-mapa__numeros strong {
  font-family: "Poppins", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--amplo-azul-claro);
}

.amplo-mapa__numeros span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}

.amplo-mapa__botao-linha { margin: 0 0 24px; }

.amplo-mapa__cidades {
  margin: 0;
  max-width: 56ch;
  font-family: "Roboto", sans-serif;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(226, 229, 232, .72);
}

.amplo-mapa__arte {
  display: block;
  padding: 10px;
  border: 1px solid rgba(71, 144, 234, .28);
  border-radius: 18px;
  background: rgba(6, 15, 30, .5);
  transition: transform .3s ease, border-color .3s ease;
}

.amplo-mapa__arte:hover,
.amplo-mapa__arte:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(71, 144, 234, .6);
}

.amplo-mapa__arte img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .amplo-mapa__grade { grid-template-columns: 1fr; }
  /* No celular a arte vem primeiro: é ela que explica em um olhar o que o
     bloco está oferecendo. */
  .amplo-mapa__arte { order: -1; }
}

/* ---------- Botão "Conheça nossos serviços" da home ----------
   O widget de icon-box do Elementor vira um <a> no build.sh; aqui o link só
   devolve a aparência de antes, sem sublinhado nem cor de link. */
.amplo-caixa-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.amplo-caixa-link .elementor-icon,
.amplo-caixa-link .elementor-icon-box-title {
  transition: transform .25s ease, color .25s ease;
}

/* A regra genérica lá de cima ("a:hover .elementor-icon") pinta o fundo do
   ícone de azul — ela foi escrita para os ícones sociais do rodapé, que são
   brancos. Aqui ela engolia a seta: o glifo é o mesmo azul da marca, então
   ficava azul sobre azul e a seta sumia no hover. O fundo volta a ser
   transparente e o efeito passa a ser o movimento: a seta anda para a direita
   e escurece, junto com o texto. */
.amplo-caixa-link:hover .elementor-icon,
.amplo-caixa-link:focus-visible .elementor-icon {
  background-color: transparent !important;
  transform: translateX(6px);
}

.amplo-caixa-link:hover .elementor-icon,
.amplo-caixa-link:hover .elementor-icon i,
.amplo-caixa-link:focus-visible .elementor-icon,
.amplo-caixa-link:focus-visible .elementor-icon i {
  color: var(--amplo-azul-escuro) !important;
  fill: var(--amplo-azul-escuro) !important;
}

.amplo-caixa-link:hover .elementor-icon-box-title,
.amplo-caixa-link:focus-visible .elementor-icon-box-title {
  color: var(--amplo-azul);
}

/* ---------- Página de serviços ---------- */

/* A capa segue o mesmo padrão das outras internas (portfólio, a empresa,
   contato), que no Elementor é a seção 3af6a60d: a foto ocupa a faixa inteira
   sem filtro nenhum, e o texto vive num bloco #232323 de meia largura
   encostado na base da seção. Os 250px de respiro no topo também são os do
   original — e são eles que compensam o cabeçalho, que tem margin-bottom:-90px
   e fica por cima do começo de toda página. Medidas, tipografia e cores foram
   copiadas de post-541.css para as duas capas ficarem idênticas. */
.amplo-hero {
  position: relative;
  padding: 250px 0 0;
  background: #F7F7F7;
  overflow: hidden;
}

/* A foto é fundo, não conteúdo: entra como <img> para o navegador poder
   escolher quando baixar, e sai do fluxo pelo position absolute. A tag entra
   no seletor porque o Elementor manda ".elementor img{height:auto}" — sem
   isso a foto assume a altura natural e, no celular, cobre só a primeira
   parte da faixa, deixando o resto no cinza do fundo. */
.amplo-hero img.amplo-hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No desktop a foto sobra em altura e o recorte horizontal não muda nada.
     Já no celular a faixa fica estreita e o corte central pegava só o prédio;
     puxando para a direita, o outdoor continua aparecendo. */
  object-position: 72% center;
}

.amplo-hero > .amplo-largura {
  position: relative;
  z-index: 1;
}

.amplo-hero__caixa {
  width: 50%;
  padding: 50px 60px 60px;
  background: #232323;
}

.amplo-hero h1.amplo-hero__titulo {
  margin: 0 0 30px;
  font-family: "Poppins", sans-serif;
  font-size: 65px;
  font-weight: 700;
  line-height: 1.1em;
  color: #fff;
}

.amplo-hero__linha {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 1024px) {
  .amplo-hero { padding-top: 300px; }
  .amplo-hero__caixa { width: 100%; padding: 40px; }
  .amplo-hero h1.amplo-hero__titulo { font-size: 50px; }
}

@media (max-width: 767px) {
  .amplo-hero__caixa { padding: 30px; text-align: center; }
  .amplo-hero h1.amplo-hero__titulo { font-size: 30px; margin-bottom: 20px; }
}

.amplo-servicos {
  padding: clamp(56px, 8vw, 100px) 0;
  background: #fff;
}

/* Sobre fundo claro o azul cheio da marca é que rende contraste (8,4:1); o
   tom claro usado nas faixas escuras aqui sumiria. */
.amplo-servicos .amplo-olho { color: var(--amplo-azul); }

.amplo-servicos h2.amplo-titulo-secao {
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  color: #232323;
}

.amplo-intro {
  margin: 0 0 clamp(36px, 5vw, 56px);
  max-width: 66ch;
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #5b6167;
}

.amplo-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* O min() é o que segura a coluna em telas de 320px: sem ele o mínimo de
     288px seria maior que a largura disponível e a grade transbordaria. */
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: 28px;
}

.amplo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #E6E8EB;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.amplo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(1, 70, 175, .35);
  box-shadow: 0 18px 40px rgba(1, 70, 175, .14);
}

.amplo-card__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #EDEFF2;
}

.amplo-card__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 28px;
}

.amplo-card h3.amplo-card__titulo {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #232323;
}

.amplo-card__corpo p {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5b6167;
}

.amplo-card a.amplo-card__link {
  margin-top: auto;
  padding-top: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--amplo-azul);
  text-decoration: none;
}

.amplo-card a.amplo-card__link:hover,
.amplo-card a.amplo-card__link:focus-visible {
  color: var(--amplo-azul-escuro);
  text-decoration: underline;
}

.amplo-cta {
  padding: clamp(52px, 7vw, 84px) 0;
  background: linear-gradient(135deg, #01337f 0%, #0146af 55%, #012a68 100%);
  color: #fff;
}

.amplo-cta__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.amplo-cta h2.amplo-cta__titulo {
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.amplo-cta__acoes {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.amplo-cta__linha {
  margin: 0;
  max-width: 52ch;
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
}

/* A faixa já é azul da marca: um botão do mesmo azul sumiria dentro dela, então
   aqui o preenchido inverte — fundo branco, texto azul (8,4:1). */
.amplo-cta .amplo-botao {
  background: #fff;
  border-color: #fff;
  color: var(--amplo-azul) !important;
}

.amplo-cta .amplo-botao:hover,
.amplo-cta .amplo-botao:focus-visible {
  background: var(--amplo-prata-claro);
  border-color: var(--amplo-prata-claro);
  color: var(--amplo-azul-escuro) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.amplo-cta .amplo-botao--vazado {
  background: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: #fff !important;
}

.amplo-cta .amplo-botao--vazado:hover,
.amplo-cta .amplo-botao--vazado:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  color: #fff !important;
}

@media (max-width: 860px) {
  .amplo-cta__grade { grid-template-columns: 1fr; }
}