.elementor-kit-5{--e-global-color-primary:#2D5C3F;--e-global-color-secondary:#EBF4EE;--e-global-color-text:#4A8C5C;--e-global-color-accent:#3A7D52;--e-global-color-cfe209b:#C4533A;--e-global-color-31c57f6:#F5EDD8;--e-global-color-e04ce4f:#1A2E1F;--e-global-color-66979f8:#5C6B5E;--e-global-color-f23ae90:#FFFFFF;--e-global-color-21253f0:#2D5C3F1A;--e-global-typography-primary-font-family:"Cooper";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:bold;--e-global-typography-primary-line-height:1.15em;--e-global-typography-secondary-font-family:"Cooper";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:bold;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Cooper";--e-global-typography-text-font-size:28px;--e-global-typography-text-font-weight:bold;--e-global-typography-text-line-height:1.25em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:29px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.3em;--e-global-typography-a71e8e3-font-family:"Inter";--e-global-typography-a71e8e3-font-size:13px;--e-global-typography-a71e8e3-font-weight:500;--e-global-typography-a71e8e3-text-transform:uppercase;--e-global-typography-a71e8e3-line-height:1.4em;--e-global-typography-7701d90-font-family:"Inter";--e-global-typography-7701d90-font-size:17px;--e-global-typography-7701d90-font-weight:400;--e-global-typography-7701d90-line-height:1.65em;--e-global-typography-08f5897-font-family:"Inter";--e-global-typography-08f5897-font-size:14px;--e-global-typography-08f5897-font-weight:400;--e-global-typography-08f5897-line-height:1.6em;--e-global-typography-db5f3e9-font-family:"Inter";--e-global-typography-db5f3e9-font-weight:400;--e-global-typography-db5f3e9-line-height:1.5em;--e-global-typography-0192e59-font-family:"Inter";--e-global-typography-0192e59-font-size:15px;--e-global-typography-0192e59-font-weight:600;--e-global-typography-0192e59-line-height:1em;background-color:transparent;color:var( --e-global-color-e04ce4f );font-family:var( --e-global-typography-7701d90-font-family ), Sans-serif;font-size:var( --e-global-typography-7701d90-font-size );font-weight:var( --e-global-typography-7701d90-font-weight );line-height:var( --e-global-typography-7701d90-line-height );background-image:linear-gradient(180deg, var( --e-global-color-secondary ) 0%, #EFFFF4 100%);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-accent );}.elementor-kit-5 a:hover{color:var( --e-global-color-primary );}.elementor-kit-5 h1{color:var( --e-global-color-e04ce4f );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-5 h2{color:var( --e-global-color-e04ce4f );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-5 h3{color:var( --e-global-color-e04ce4f );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h4{color:var( --e-global-color-e04ce4f );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-5 h5{color:var( --e-global-color-e04ce4f );font-family:var( --e-global-typography-7701d90-font-family ), Sans-serif;font-size:var( --e-global-typography-7701d90-font-size );font-weight:var( --e-global-typography-7701d90-font-weight );line-height:var( --e-global-typography-7701d90-line-height );}.elementor-kit-5 h6{color:var( --e-global-color-66979f8 );font-family:"Inter", Sans-serif;font-size:13px;font-weight:500;text-transform:uppercase;line-height:0.08em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-kit-5{font-size:var( --e-global-typography-7701d90-font-size );line-height:var( --e-global-typography-7701d90-line-height );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-5 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-5 h3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-5 h5{font-size:var( --e-global-typography-7701d90-font-size );line-height:var( --e-global-typography-7701d90-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{font-size:var( --e-global-typography-7701d90-font-size );line-height:var( --e-global-typography-7701d90-line-height );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-5 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-5 h3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-5 h5{font-size:var( --e-global-typography-7701d90-font-size );line-height:var( --e-global-typography-7701d90-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Oculta visualmente, mas mantém acessível para teclado */
.skip-link {
    position: absolute;
    top: -40px; /* Escondido fora da tela */
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 9999;
    transition: top 0.3s;
}

/* Quando o usuário pressionar TAB, o link desce e aparece */
.skip-link:focus {
    top: 0;
}

/* =========================================================================
   ITINGA — CSS DO PROJETO ENTREGAS
   Versão consolidada. Substitui TODO o conteúdo de
   Elementor → Configurações do site → CSS personalizado.

   Apague o que está lá e cole este arquivo inteiro. A partir de agora,
   qualquer regra nova vai NO FIM deste arquivo, nunca por cima dele.

   Ordem das seções:
     1. Paleta
     2. H1 da página de região
     3. Linha de dados do single (status, taxa, pedido mínimo)
     4. Card do hub
     5. Formulário de pedido
     6. Bairros atendidos
     7. Outras regiões (chips do rodapé)
     8. Celular
     9. Movimento reduzido

   Contraste verificado (WCAG 2.1 AA exige 4.5:1 para texto pequeno):
     branco sobre Verde Primário #2D5C3F .... 7.74:1
     branco sobre Coral #C4533A ............. 4.52:1
     Texto Secundário sobre Verde Claro ..... 5.03:1
     branco sobre Verde CTA #3A7D52 ......... 4.96:1
     Texto Principal sobre branco ........... 14.44:1
     Texto Secundário sobre branco .......... 5.65:1
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. PALETA

   Declarada no :root para valer em qualquer lugar da página, inclusive nos
   blocos que o PHP imprime. Na versão anterior as variáveis viviam dentro
   do card, o que fazia qualquer bloco fora dele nascer sem cor.
   ------------------------------------------------------------------------- */

:root {
  --itinga-verde-primario: #2D5C3F;
  --itinga-verde-claro:    #EBF4EE;
  --itinga-verde-cta:      #3A7D52;
  --itinga-coral:          #C4533A;
  --itinga-texto:          #1A2E1F;
  --itinga-texto-2:        #5C6B5E;
  --itinga-branco:         #FFFFFF;
  --itinga-borda:          #C9D6CC;
}


/* -------------------------------------------------------------------------
   2. H1 DA PÁGINA DE REGIÃO

   O prefixo body existe para vencer o kit do Elementor, que escreve as
   regras de tipografia global com especificidade maior que uma classe
   sozinha. Sem ele, a família passa por herança e o tamanho não.

   clamp( mínimo, ideal, máximo ) escala o título junto com a largura da
   tela, sem salto na troca de breakpoint.
   ------------------------------------------------------------------------- */

body .itinga-h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}


/* -------------------------------------------------------------------------
   3. LINHA DE DADOS DO SINGLE

   Status, taxa e pedido mínimo lado a lado. Quebra sozinha no celular.

   As classes de estado (itinga-status-*) chegam pelo <body>, injetadas pelo
   mu-plugin. Elas nunca são digitadas no Elementor.
   ------------------------------------------------------------------------- */

.itinga-single__dados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* A pílula é desenhada no próprio elemento que carrega a classe, e o
   conteúdo interno herda. Assim funciona com qualquer geração de widget,
   sem depender da marcação que o Elementor gerou por dentro. */
.itinga-single__status {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.itinga-single__status > *,
.itinga-single__status .elementor-heading-title {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.itinga-status-atendemos .itinga-single__status {
  background: var(--itinga-verde-primario);
  color: var(--itinga-branco);
}

.itinga-status-sob-consulta .itinga-single__status {
  background: var(--itinga-coral);
  color: var(--itinga-branco);
}

.itinga-status-em-breve .itinga-single__status {
  background: var(--itinga-verde-claro);
  color: var(--itinga-texto-2);
  box-shadow: inset 0 0 0 1px rgba(92, 107, 94, .28);
}

.itinga-single__taxa,
.itinga-single__minimo {
  font-size: 16px;
  font-weight: 500;
  color: var(--itinga-texto-2);
}

.itinga-single__taxa > *,
.itinga-single__minimo > *,
.itinga-single__taxa .elementor-heading-title,
.itinga-single__minimo .elementor-heading-title {
  margin: 0;
  color: inherit;
  font: inherit;
}


/* -------------------------------------------------------------------------
   4. CARD DO HUB

   Altura total para que cards da mesma linha terminem juntos, e coluna com
   o CTA empurrado para baixo — os botões alinham entre si mesmo quando um
   card tem taxa e o outro não.
   ------------------------------------------------------------------------- */

.elementor-widget-loop-grid .e-loop-item {
  display: flex;
}

.itinga-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 28px;
  border-radius: 14px;
  background: var(--itinga-branco);
  box-shadow: 0 1px 2px rgba(26, 46, 31, .06),
              0 4px 12px rgba(26, 46, 31, .05);
  transition: box-shadow .22s ease, transform .22s ease;
}

.itinga-card:hover,
.itinga-card:focus-within {
  box-shadow: 0 2px 4px rgba(26, 46, 31, .08),
              0 12px 28px rgba(26, 46, 31, .10);
  transform: translateY(-2px);
}

/* Nome da região. Sublinhado só no hover mantém a lista limpa com muitos
   títulos empilhados, sem tirar a pista de que é clicável. */
.itinga-card > .elementor-widget-heading:first-child .elementor-heading-title {
  margin: 0;
  line-height: 1.2;
}

.itinga-card .elementor-heading-title a {
  color: var(--itinga-texto);
  text-decoration: none;
  transition: color .18s ease;
}

.itinga-card .elementor-heading-title a:hover {
  color: var(--itinga-verde-primario);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}

/* Etiqueta de status do card. Mesmo padrão tolerante do single:
   cor E palavra, sempre. Cor sozinha não comunica para daltonismo de eixo
   vermelho-verde, que é justamente o eixo desta paleta. */
.itinga-card__status {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.itinga-card__status > *,
.itinga-card__status .elementor-heading-title {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.itinga-status-atendemos .itinga-card__status {
  background: var(--itinga-verde-primario);
  color: var(--itinga-branco);
}

.itinga-status-sob-consulta .itinga-card__status {
  background: var(--itinga-coral);
  color: var(--itinga-branco);
}

/* "Em breve" é promessa, não oferta: recua por cor, nunca por opacity —
   opacity derruba o contraste do texto junto. */
.itinga-status-em-breve .itinga-card__status {
  background: var(--itinga-verde-claro);
  color: var(--itinga-texto-2);
  box-shadow: inset 0 0 0 1px rgba(92, 107, 94, .28);
}

/* Taxa: dado de apoio, um degrau abaixo do nome em peso e cor.
   Quando o campo está vazio o widget inteiro some — nada aqui precisa
   prever estado vazio. */
.itinga-card__taxa {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--itinga-texto-2);
}

.itinga-card__taxa > *,
.itinga-card__taxa .elementor-heading-title {
  margin: 0;
  color: inherit;
  font: inherit;
}

/* margin-top:auto cola o CTA no rodapé do card: numa linha de três, os
   botões ficam na mesma altura mesmo com conteúdos de tamanhos diferentes.
   Altura mínima de 44px é o alvo de toque recomendado para dedo. */
.itinga-card__cta {
  margin-top: auto;
  padding-top: 4px;
}

.itinga-card__cta .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 8px;
  background: var(--itinga-verde-cta);
  color: var(--itinga-branco);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .18s ease;
}

.itinga-card__cta .elementor-button:hover,
.itinga-card__cta .elementor-button:focus {
  background: var(--itinga-verde-primario);
  color: var(--itinga-branco);
}

/* Foco visível: sem isto, quem navega por teclado percorre a grade inteira
   sem saber onde está. :focus-visible não aparece no clique de mouse. */
.itinga-card a:focus-visible,
.itinga-card .elementor-button:focus-visible {
  outline: 3px solid var(--itinga-verde-primario);
  outline-offset: 3px;
  border-radius: 4px;
}


/* -------------------------------------------------------------------------
   5. FORMULÁRIO DE PEDIDO — shortcode [itinga_pedido]
   ------------------------------------------------------------------------- */

.itinga-pedido {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  padding: 24px;
  border-radius: 14px;
  background: var(--itinga-branco);
  box-shadow: 0 1px 2px rgba(26, 46, 31, .06),
              0 4px 12px rgba(26, 46, 31, .05);
}

.itinga-pedido__titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--itinga-texto);
}

.itinga-pedido__campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--itinga-texto-2);
}

/* 16px no campo evita que o Safari do iPhone dê zoom automático ao focar. */
.itinga-pedido__campo input,
.itinga-pedido__campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--itinga-borda);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--itinga-texto);
  background: var(--itinga-branco);
}

.itinga-pedido__campo textarea {
  min-height: 88px;
  resize: vertical;
}

.itinga-pedido__campo input:focus-visible,
.itinga-pedido__campo textarea:focus-visible,
.itinga-pedido__botao:focus-visible {
  outline: 3px solid var(--itinga-verde-primario);
  outline-offset: 2px;
}

.itinga-pedido__botao {
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--itinga-verde-cta);
  color: var(--itinga-branco);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease;
}

.itinga-pedido__botao:hover {
  background: var(--itinga-verde-primario);
}

.itinga-pedido__erro {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--itinga-coral);
}

.itinga-pedido__nota {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--itinga-texto-2);
}


/* -------------------------------------------------------------------------
   6. BAIRROS ATENDIDOS — shortcode [itinga_bairros]

   Vem do PHP, então não recebe estilo pelo painel do Elementor.
   font-family: inherit puxa a fonte global do site: se a tipografia da
   marca mudar um dia, este bloco acompanha sem ser reeditado.
   ------------------------------------------------------------------------- */

.itinga-bairros,
.itinga-bairros__titulo {
  font-family: inherit;
}

/* Rótulo da seção: pequeno e em caixa alta para não competir com o H1
   nem com os parágrafos do corpo. É etiqueta, não título de leitura. */
.itinga-bairros__titulo {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--itinga-verde-primario);
}

.itinga-bairros--inline {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--itinga-texto-2);
}

.itinga-bairros:not(.itinga-bairros--inline) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.itinga-bairros:not(.itinga-bairros--inline) li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--itinga-verde-claro);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--itinga-verde-primario);
}


/* -------------------------------------------------------------------------
   7. OUTRAS REGIÕES — chips do rodapé do single

   O Loop Grid monta colunas fixas, o que deixa buraco quando o nome é
   curto. O flex-wrap faz cada chip ocupar só a largura do próprio nome.

   Visual deliberadamente diferente das etiquetas de bairro: aqui é branco
   com borda, lá é verde-claro chapado. Bairro é dado, região é link — a
   pessoa precisa saber onde vale clicar.
   ------------------------------------------------------------------------- */

.itinga-relacionadas .elementor-loop-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.itinga-relacionadas .e-loop-item {
  width: auto;
  max-width: none;
}

.itinga-chip a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--itinga-borda);
  border-radius: 999px;
  background: var(--itinga-branco);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--itinga-verde-primario);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.itinga-chip a:hover,
.itinga-chip a:focus-visible {
  border-color: var(--itinga-verde-cta);
  background: var(--itinga-verde-cta);
  color: var(--itinga-branco);
}

.itinga-chip a:focus-visible {
  outline: 3px solid var(--itinga-verde-primario);
  outline-offset: 3px;
}

/* Região "Em breve" continua na lista, mas recuada. */
.itinga-status-em-breve .itinga-chip a {
  border-style: dashed;
  color: var(--itinga-texto-2);
}


/* -------------------------------------------------------------------------
   8. CELULAR

   Card mais estreito pede menos respiro interno, senão o conteúdo útil
   perde metade da largura da tela.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .itinga-single__dados {
    gap: 10px;
  }

  .itinga-single__status {
    font-size: 12px;
    padding: 5px 12px;
  }

  .itinga-single__taxa,
  .itinga-single__minimo {
    font-size: 15px;
  }

  .itinga-card {
    padding: 22px;
    gap: 12px;
  }

  .itinga-card__cta .elementor-button {
    width: 100%;
    justify-content: center;
  }

  .itinga-pedido {
    padding: 20px;
  }
}


/* -------------------------------------------------------------------------
   9. MOVIMENTO REDUZIDO

   Respeita quem configurou o sistema para reduzir animação — vestibular,
   enxaqueca, epilepsia fotossensível.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .itinga-card,
  .itinga-card .elementor-heading-title a,
  .itinga-card__cta .elementor-button,
  .itinga-pedido__botao,
  .itinga-chip a {
    transition: none;
  }

  .itinga-card:hover,
  .itinga-card:focus-within {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   CORREÇÃO DE ESPECIFICIDADE — texto dentro das etiquetas de status

   O kit do Elementor e o painel do widget definem a cor do heading com
   seletor mais forte que uma classe sozinha, e o texto acabava saindo na
   cor da marca sobre o fundo da marca. O prefixo body devolve o controle
   ao CSS, sem precisar de !important.
   ------------------------------------------------------------------------- */

body .itinga-single__status > *,
body .itinga-single__status .elementor-heading-title,
body .itinga-card__status > *,
body .itinga-card__status .elementor-heading-title {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cooper';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://itingaorganicos.com.br/wp-content/uploads/2026/06/Cooper-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */