/* Ordem das camadas (insumos/10 §3.1). Todo arquivo de saída começa com esta linha.
   "importantes": declarações que o tema marca com !important, sem o !important (T046), numa camada
   acima das páginas, para continuarem ganhando das regras comuns do tema como hoje. */
@layer reset, tokens, base, layout, componentes, paginas, importantes, utilitarios;

/* 50-paginas/lista-de-representantes.css */
/*
 * lista-de-representantes: CSS do tema traduzido para este tipo de página (T069, Q27). Valores do tema
 * wp-drift-master como o site atual serve hoje; ver ferramentas/traduzir-tema.mjs.
 */
/* === gerado por ferramentas/traduzir-tema.mjs: não editar à mão (ajustes no fim) === */
@layer paginas {
  .esconde {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .mostra {
    opacity: 1;
    transition: opacity 0.3s;
  }
  .mapa-representantes-representantes .mapa-representantes {
    margin-bottom: 80px;
  }
  img[src="https://cristalcopo.com.br/wp-content/uploads/2019/07/kit-potes-redondo-caixas.png"] {
    max-width: 325px;
  }
  img[src="https://cristalcopo.com.br/wp-content/uploads/2019/07/kit-potes-redondo-caixas.png"] {
    max-width: 325px;
  }
  input[type="submit"] {
    appearance: none;
  }
  .mapa-representantes-representantes {
    margin-top: 220px;
    margin-bottom: 25px;
    position: relative;
  }
  .mapa-representantes-representantes .main-grid {
    max-width: 1110px;
    position: relative;
  }
  .mapa-representantes-representantes .main-grid:before {
    content: url("/ativos/img/representantes-capa-1.072794d271.png");
    right: 0;
    top: -95px;
    position: absolute;
    z-index: -1;
  }
  .mapa-representantes-representantes:before {
    content: '';
    position: absolute;
    left: 0;
    top: -220px;
    width: 100%;
    height: 879px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    background-image: url("/ativos/img/linhas-representantes.f4680035f5.png");
  }
  .mapa-representantes-representantes:after {
    content: url("/ativos/img/result.e0aa5c2a99.svg");
    width: calc(100% + 360px);
    overflow: hidden;
    position: absolute;
    left: -360px;
    top: 215px;
    z-index: -1;
  }
  .mapa-representantes-representantes .mapa-representantes {
    display: flex;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais {
    text-align: left;
    margin-top: 340px;
    width: 60%;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais {
    color: #fff;
    margin-left: 170px;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais>:is(h3:where(:not([class*="como-h"])), :where(.como-h3)) {
    font-family: "WeeklyAlt", "WeeklyAlt Reserva",sans-serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    max-width: 180px;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais>p {
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    max-width: 270px;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais .campos-filtro-mapa {
    display: flex;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais .campos-filtro-mapa .seleciona-estado-mapa {
    margin-left: 20px;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais .campos-filtro-mapa select {
    display: block;
    appearance: none;
    background-image: url("/ativos/img/Grupo-1932.319c3a06a7.png");
    background-position: 96% 45%;
    background-repeat: no-repeat;
    padding: 6px 20px 7px 8px;
    border-radius: 50px;
    border: none;
    color: #156cb5;
    background-color: #fff;
    cursor: pointer;
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-style: italic;
    font-size: 14px;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais .campos-filtro-mapa label {
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-size: 14px;
    padding-bottom: 5px;
    display: block;
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .baixo-locais {
    margin-top: 140px;
  }
  .mapa-representantes-representantes .mapa-representantes .div-mapa {
    width: 40%;
  }
  .mapa-representantes-representantes .mapa-representantes .div-mapa img {
    display: none;
  }
  .mapa-representantes-representantes .mapa-representantes .div-mapa svg {
    position: relative;
    z-index: 9;
    margin-top: 30px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) {
    padding: 25px 100px;
    border-radius: 500px;
    border: 2px solid var(--cor-azul-i);
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .titulo {
    font-family: "Segoe",sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--cor-azul-i);
    font-weight: 700;
    margin-bottom: 20px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0)>div {
    font-family: "Segoe",sans-serif;
    font-size: 14px;
    color: var(--cor-azul-i);
    font-weight: 400;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0)>div strong {
    font-weight: 600;
    color: var(--cor-azul-i);
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0)>div:nth-last-child(2) {
    margin-bottom: 20px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .produtos-revendidos {
    display: flex;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .produtos-revendidos .produtos-revendidos {
    width: 120px;
    padding: 4px 8px 4px;
    border-radius: 50px;
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-size: 12px;
    color: #fff;
    justify-content: center;
    text-align: center;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .produtos-revendidos .produtos-revendidos:last-child:not(:first-child) {
    margin-left: 15px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .produtos-revendidos .produtos-revendidos.personalize {
    background-color: var(--cor-personalize);
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .produtos-revendidos .produtos-revendidos.uso-e-consumo {
    background-color: var(--cor-uso-consumo);
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .produtos-revendidos .produtos-revendidos.industrial {
    background-color: var(--cor-verde);
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0):not(:last-child) {
    margin-bottom: 25px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 {
    margin-left: 170px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 p {
    font-family: "Segoe",sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--cor-azul-i);
    margin-bottom: 15px;
    max-width: 410px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 p strong {
    font-weight: 600;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 .div-central-atendimento-mapa {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 .div-central-atendimento-mapa p {
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-size: 14px;
    color: var(--cor-azul-claro-i);
    margin-bottom: 10px;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 .div-central-atendimento-mapa a {
    margin-bottom: 5px;
    padding: 2px 15px 3px 32px;
    border-radius: 50px;
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-style: italic;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    position: relative;
    border: 1px solid var(--cor-azul-claro-i);
    color: var(--cor-azul-claro-i);
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 .div-central-atendimento-mapa .telefone-central-atendimento:before {
    content: '';
    background-image: url("/ativos/img/icone-telefone-representante.63dde0488a.png");
    position: absolute;
    left: -1px;
    top: 0;
    width: 23px;
    height: 23px;
    background-size: cover;
  }
  .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 .div-central-atendimento-mapa .email-central-atendimento:before {
    content: '';
    background-image: url("/ativos/img/icone-email-representante.1a1b1eca77.png");
    position: absolute;
    left: -1px;
    top: 0;
    width: 23px;
    height: 23px;
    background-size: cover;
  }
  .contato .main-grid {
    max-width: 1110px;
  }
  .slick-slider {
    position: relative;
  }
  .slick-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
  }
  .desaparecido {
    font-family: "RawsonPro", "RawsonPro Reserva",sans-serif;
    font-size: 14px;
    color: var(--cor-descartaveis);
    opacity: 0;
    height: 0;
  }
  .gform_footer.top_label {
    position: relative;
  }
  .consentir-newslettes label.gfield_consent_label {
    font-size: 12px;
  }
  .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    -khtml-user-select: none;
    touch-action: pan-y;
  }
  .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
  }
  .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .slick-track:before,
  .slick-track:after {
    display: table;
    content: '';
  }
  .slick-track:after {
    clear: both;
  }
  .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
  }
  [dir='rtl'] .slick-slide {
    float: right;
  }
  .slick-slide img {
    display: block;
  }
  .slick-initialized .slick-slide {
    display: block;
  }
  @media (width <= 1200px) {
    .mapa-representantes-representantes .mapa-representantes .div-locais .baixo-locais {
      margin-top: calc(361.05px - 15.78vw);
    }
  }
  @media (width <= 1000px) {
    .mapa-representantes-representantes .mapa-representantes {
      margin-bottom: 0;
    }
    .mapa-representantes-representantes {
      margin-bottom: 150px;
    }
    .mapa-representantes-representantes .mapa-representantes {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .mapa-representantes-representantes .mapa-representantes .div-mapa {
      width: 100%;
      text-align: center;
    }
    .mapa-representantes-representantes .mapa-representantes .div-mapa svg {
      margin-top: 175px;
      max-width: 100%;
      height: auto;
    }
    .mapa-representantes-representantes .mapa-representantes .div-locais {
      margin-top: 100px;
      width: 100%;
    }
    .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais {
      margin-left: 0;
      text-align: center;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }
    .mapa-representantes-representantes .mapa-representantes .div-locais .baixo-locais {
      margin-top: 50px;
    }
    .mapa-representantes-representantes .mapa-representantes .div-locais :is(h3:where(:not([class*="como-h"])), :where(.como-h3)),
    .mapa-representantes-representantes .mapa-representantes .div-locais p,
    .mapa-representantes-representantes .mapa-representantes .div-locais label {
      color: var(--cor-azul-i);
    }
    .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 {
      margin: 0 auto;
      text-align: center;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0>p {
      margin: 0 auto 15px;
    }
    .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante-0 .div-central-atendimento-mapa {
      align-items: center;
    }
  }
  @media (width <= 600px) {
    .mapa-representantes-representantes:before {
      height: 380px;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -1;
      background-size: cover;
    }
    .mapa-representantes-representantes:after {
      top: -45px;
    }
    .mapa-representantes-representantes .main-grid:before {
      display: none;
    }
    .mapa-representantes-representantes .mapa-representantes .div-mapa svg {
      margin-top: calc(235px - 50vw);
    }
    .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) {
      padding: 25px 25px;
      border-radius: 70px;
    }
    .mapa-representantes-representantes .mapa-representantes .lista-representantes .representante:not(.representante-0) .e-mail {
      word-break: break-all;
    }
    .mapa-representantes-representantes:after {
      width: calc(170% + 500px);
      left: -460px;
      transform: scale(.5);
      top: -185px;
    }
    .mapa-representantes-representantes .mapa-representantes {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 300px;
      margin: 0 auto;
    }
    .mapa-representantes-representantes .mapa-representantes .div-mapa {
      margin-top: -50px;
    }
    .mapa-representantes-representantes .mapa-representantes .div-mapa svg {
      margin-top: -60px;
    }
    .mapa-representantes-representantes .mapa-representantes .div-locais {
      margin-top: 30px;
    }
  }
}
/* declarações com !important no tema (sem o !important; camada acima, ver 00-camadas.css) */
@layer importantes {
  .driftweb a {
    color: var(--cor-verde);
  }
  .mapa-representantes-representantes .mapa-representantes .div-locais .cima-locais>p {
    margin-bottom: 20px;
  }
  .consentir-newslettes label.gfield_consent_label {
    color: #fff;
    position: relative;
  }
  @media (width <= 1000px) {
    .mapa-representantes-representantes .mapa-representantes .div-locais select {
      border: 1px solid var(--cor-azul-i);
    }
  }
}
/* === fim do gerado; ajustes manuais abaixo === */
@layer paginas {
}
@layer paginas {
  /* Hoje o fim de .mapa-representantes-representantes tem o bloco invisível .carrega-fontes ("aA bB",
     altura 0), que impede a margem de baixo do mapa de sair do contêiner. O bloco não foi copiado
     (conteudo/_LEIA-ME.md); flow-root mantém a mesma altura (940 px em 1440). */
  .mapa-representantes-representantes { display: flow-root; }
}
@layer paginas {
  /* Cursor das regiões do mapa (hoje estilo inline do plugin; a CSP não aceita estilo inline). */
  .div-mapa svg > g.regiao-clicavel { cursor: pointer; }
}
@layer paginas {
  /* CLS (T161, FR-070): o módulo do mapa esconde todos os representantes ao iniciar e só mostra os do
     lugar escolhido (style.display = 'block'). Escondidos já pelo CSS, a página não encolhe quando o
     módulo roda. Sem JavaScript, sem-js.css mostra a lista inteira, como antes. */
  .mapa-representantes-representantes .lista-representantes .representante[data-local] { display: none; }
  /* O SVG embutido pelo módulo entra depois do <img> do mesmo arquivo (586 x 826). Até lá o <img> ocupa
     o lugar com as mesmas regras do svg, e some quando o svg chega (deixa de ser :only-child). */
  .mapa-representantes-representantes .mapa-representantes .div-mapa img.mapa-svg:only-child {
    display: inline;
    position: relative;
    z-index: 9;
    margin-top: 30px;
  }
  @media (width <= 1000px) {
    .mapa-representantes-representantes .mapa-representantes .div-mapa img.mapa-svg:only-child {
      margin-top: 175px;
      max-width: 100%;
      height: auto;
    }
  }
  @media (width <= 600px) {
    .mapa-representantes-representantes .mapa-representantes .div-mapa img.mapa-svg:only-child {
      margin-top: -60px;
    }
  }
}
@layer paginas {
  /* CLS (T161): o módulo esconde a caixa de UF ao iniciar e só a mostra com País = Brasil ('block').
     Escondida já pelo CSS, o filtro não muda de largura quando o módulo roda. Sem JS: sem-js.css. */
  .mapa-representantes-representantes .campos-filtro-mapa .seleciona-estado-mapa { display: none; }
}