/* =============================================================================
   ESTADIA EXPRESS - DESIGN SYSTEM
   Modulo: assets/hero.css
   Fase 2 - Hero Premium. Implementacao nova: nenhuma regra herdada da hero
   anterior (.ee-hero*), que era codigo morto comprovado e foi descartada.

   Sumario
     01. Tokens          :root --eex-*   (semente do design system)
     02. Escopo e canvas .eex-hero
     03. Tipografia editorial
     04. Rail de credenciais   (removido em hero.js 2.1.0)
     05. Console de busca (widget nativo da Stays, re-parenteado)
     06. Microinteracoes e entrada
     07. Breakpoints
     08. Acessibilidade, movimento reduzido, impressao

   Convivencia com o legado
     - Nenhum seletor de elemento global. Tudo escopado em .eex-hero ou em
       html.eex-hero-active.
     - Os tokens sao custom properties NOVAS: nao ha nome colidente no
       legacy.css nem no CSS da plataforma, logo nada existente muda.
     - !important aparece somente para vencer CSS de ID gerado pela Stays
       dentro do widget de busca. Toda ocorrencia esta comentada.
   ============================================================================= */

/* == 01. TOKENS ============================================================ */
/* ATENCAO (D-042, 2026-08-18): este bloco duplica os tokens de ds.css e,
   como hero.css carrega DEPOIS de ds.css (ordem documentada no topo de
   ds.css), qualquer valor declarado aqui vence o de ds.css para o :root
   inteiro (nao so para .eex-hero) — nao e escopo, e sobrescrita direta.
   Descoberto ao aplicar a paleta real da Seazone: sem espelhar a mudanca
   aqui, a troca de token em ds.css nao teria efeito visivel em lugar
   nenhum do site. Mantido como duplicata deliberada (ver comentario
   historico de ds.css, "extraido diretamente da Hero"), mas os dois
   blocos agora PRECISAM ser editados juntos — nao e mais seguro assumir
   que mexer so em ds.css basta. Ver DECISIONS.md D-042. */
:root{
  /* Cor: paleta real da Seazone (D-042), capturada ao vivo 2026-08-18 */
  --eex-canvas:      #EBEBF5;
  --eex-canvas-2:    #F5F1EB;
  --eex-canvas-3:    #F7F3ED;
  --eex-surface:     #FFFFFF;
  --eex-ink:         #080E32;
  --eex-ink-2:       #0C1640;
  --eex-stone:       #6B6E84;
  --eex-stone-2:     #948B82;
  --eex-hairline:    #CBD5E1;
  --eex-hairline-2:  #EFEAE3;
  --eex-accent:      #F1605D;  /* coral real (--primary-theme-highlight-new da Seazone) */
  --eex-accent-soft: #FF6763;  /* coral irmao real (--secondary-theme-highlight da Seazone) */
  --eex-accent-tint: #FDE4E3;  /* derivado do accent real, sem tint capturado ao vivo */
  --eex-cool:        #879DAE;  /* sem equivalente na Seazone, token nao usado hoje */

  /* Tipografia: Seazone nao usa par serif+sans, tudo em Inter (D-042) */
  --eex-font-display: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --eex-font-ui: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Escala em PX de proposito. A plataforma define html{font-size:10px},
     portanto rem aqui produziria toda a escala ~37% menor. */
  --eex-fs-micro:   11px;
  --eex-fs-small:   13px;
  --eex-fs-field:   15px;
  --eex-fs-body:    clamp(16px, 0.35vw + 14.7px, 19px);
  --eex-fs-display: clamp(38px, 6.2vw, 84px);
  --eex-fs-fact:    clamp(24px, 1.4vw + 17px, 34px);
  --eex-track-micro:   0.2em;
  --eex-track-display: -0.022em;
  --eex-lh-display:    0.99;

  /* Espaco: escala 4pt */
  --eex-s1:4px;  --eex-s2:8px;  --eex-s3:12px; --eex-s4:16px; --eex-s5:24px;
  --eex-s6:32px; --eex-s7:48px; --eex-s8:64px; --eex-s9:96px; --eex-s10:128px;

  /* Forma */
  --eex-r-sm:2px; --eex-r-md:6px; --eex-r-lg:12px; --eex-r-pill:999px;

  /* Elevacao: duas camadas (contato + difusa) */
  --eex-e1:0 1px 2px rgba(20,18,16,.04);
  --eex-e2:0 1px 2px rgba(20,18,16,.04), 0 10px 24px -12px rgba(20,18,16,.14);
  --eex-e3:0 2px 4px rgba(20,18,16,.05), 0 28px 60px -22px rgba(20,18,16,.22);

  /* Movimento */
  --eex-d1:140ms; --eex-d2:220ms; --eex-d3:420ms; --eex-d4:760ms;
  --eex-ease:cubic-bezier(.2,.8,.2,1);
  --eex-ease-out:cubic-bezier(.16,1,.3,1);

  /* Grade */
  --eex-maxw:1280px;
  --eex-gutter:clamp(20px, 5vw, 72px);
}

/* == 02. ESCOPO E CANVAS =================================================== */
.eex-hero{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  padding:clamp(56px,9vh,112px) var(--eex-gutter) clamp(48px,7vh,88px);
  background:var(--eex-canvas);
  border-bottom:1px solid var(--eex-hairline);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.eex-hero *,
.eex-hero *::before,
.eex-hero *::after{ box-sizing:border-box; }

/* Wash ambiente 100% CSS: zero requisicao de imagem, zero custo de rede.
   Duas fontes de luz (terracota quente na origem, cinza-azul fria a direita)
   sobre um degrade vertical muito curto. */
.eex-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(115% 85% at 6% -12%,  rgba(255,103,99,.22), rgba(255,103,99,0) 56%),
    radial-gradient(85% 70% at 102% -6%,  rgba(135,157,174,.15), rgba(135,157,174,0) 58%),
    linear-gradient(180deg, var(--eex-canvas) 58%, var(--eex-canvas-3) 100%);
}
.eex-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--eex-maxw);
  margin:0 auto;
}

/* == 03. TIPOGRAFIA EDITORIAL ============================================== */
.eex-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--eex-s5);
  font:500 var(--eex-fs-micro)/1 var(--eex-font-ui);
  letter-spacing:var(--eex-track-micro);
  text-transform:uppercase;
  color:var(--eex-stone);
}
.eex-hero__dot{
  flex:0 0 auto;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--eex-accent);
  box-shadow:0 0 0 4px var(--eex-accent-tint);
}
.eex-hero__title{
  margin:0;
  font-family:var(--eex-font-display);
  font-weight:400;                       /* peso leve em corpo grande = luxo */
  font-size:var(--eex-fs-display);
  line-height:var(--eex-lh-display);
  letter-spacing:var(--eex-track-display);
  color:var(--eex-ink);
}
.eex-hero__title-line{ display:block; }
/* Hierarquia tonal dentro do proprio titulo: a segunda linha recua em cor,
   nao em tamanho. Cria profundidade sem quebrar a escala. */
.eex-hero__title-line--soft{ color:var(--eex-stone-2); }

.eex-hero__lede{
  margin:var(--eex-s5) 0 0;
  max-width:46ch;
  font:400 var(--eex-fs-body)/1.65 var(--eex-font-ui);
  color:var(--eex-stone);
  text-wrap:pretty;
}

/* == 04. RAIL DE CREDENCIAIS (REMOVIDO) ======================================
   O bloco lateral de credenciais (imoveis disponiveis, preco a partir de e
   localizacao) foi removido junto com a marcacao, em hero.js 2.1.0. Nenhuma
   regra sobrou nesta secao; a numeracao foi mantida para nao renumerar o
   arquivo inteiro por causa de uma remocao.

   A coluna da direita continua declarada na grade do desktop de proposito:
   e ela que fixa a largura do titulo, do lede e do console. Sem ela esses
   elementos se alargariam, e o pedido era remover o bloco preservando
   exatamente o resto da composicao. A area agora apenas fica livre.
   ========================================================================== */

/* == 05. CONSOLE DE BUSCA ==================================================
   O console NAO reimplementa a busca. O widget nativo da Stays
   (#basic_availability_search) e movido por hero.js para dentro de
   .eex-hero__slot. Como o no do DOM e movido e nunca recriado, todos os
   listeners, o datepicker e o bootstrap-select continuam intactos.
   As regras abaixo apenas neutralizam a pele da plataforma.
   ========================================================================== */
.eex-hero__console{
  position:relative;
  max-width:900px;
  margin:clamp(40px,6vh,72px) 0 0;
  background:var(--eex-surface);
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-md);
  box-shadow:none;
  transition:box-shadow var(--eex-d3) var(--eex-ease), border-color var(--eex-d3) var(--eex-ease);
}
.eex-hero__console:hover,
.eex-hero__console:focus-within{ box-shadow:var(--eex-e3); }
.eex-hero__slot{ border-radius:inherit; }

/* Casca do widget. O !important aqui vence "#Cf3b614{background-color:#879dae}",
   CSS de ID gerado pelo editor de hotsite da Stays (especificidade 1-0-0). */
.eex-hero .eex-w{ margin:0; padding:0; }
.eex-hero .eex-wrap{
  position:static !important;
  width:auto !important;
  top:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transition:none !important;
}
.eex-hero .eex-box{            /* era .container do Bootstrap */
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.eex-hero .eex-form{ margin:0; }

/* Grade de tres celulas. Bootstrap 3 usa float + width em porcentagem nos
   .col-*; trocamos por flex sem tocar nas classes originais. */
.eex-hero .eex-row{
  display:flex !important;
  flex-direction:column;
  margin:0 !important;
}
.eex-hero .eex-cell{
  position:relative;
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:var(--eex-s4) var(--eex-s5) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-height:78px;
  transition:background var(--eex-d1) linear;
}
.eex-hero .eex-cell + .eex-cell{ border-top:1px solid var(--eex-hairline-2); }
.eex-hero .eex-cell:not(.eex-cell--cta):hover{ background:var(--eex-canvas); }

/* Microinteracao de foco: filete terracota que cresce da esquerda.
   Apenas transform -> sem reflow, roda no compositor. */
.eex-hero .eex-cell::after{
  content:"";
  position:absolute;
  left:var(--eex-s5); right:var(--eex-s5); bottom:-1px;
  height:1px;
  background:var(--eex-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--eex-d2) var(--eex-ease);
}
.eex-hero .eex-cell:focus-within::after{ transform:scaleX(1); }
.eex-hero .eex-cell--cta::after{ display:none; }

.eex-hero__field-label{
  font:500 var(--eex-fs-micro)/1 var(--eex-font-ui);
  letter-spacing:var(--eex-track-micro);
  text-transform:uppercase;
  color:var(--eex-stone-2);
  transition:color var(--eex-d2) var(--eex-ease);
}
.eex-hero .eex-cell:focus-within .eex-hero__field-label{ color:var(--eex-stone); }

/* Controles internos: input de datas e input-group */
.eex-hero .eex-cell .input-group{
  display:flex !important;
  align-items:center;
  width:100% !important;
}
/* Os icones (fa-calendar / fa-users) saem. Com rotulo explicito acima de
   cada campo eles viram ruido, e o CSS da plataforma os pinta de branco. */
.eex-hero .eex-cell .input-group-addon{ display:none !important; }
.eex-hero .eex-cell .form-control{
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font:500 var(--eex-fs-field)/1.45 var(--eex-font-ui) !important;
  color:var(--eex-ink) !important;
}
.eex-hero .eex-cell input.form-control{ cursor:pointer; }
.eex-hero .eex-cell .form-control::placeholder{
  color:var(--eex-stone-2);
  font-weight:400;
}

/* bootstrap-select (Hospedes) */
.eex-hero .eex-cell .bootstrap-select{
  display:flex !important;
  float:none !important;
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.eex-hero .eex-cell .bootstrap-select > .dropdown-toggle{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  text-align:left;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  font:500 var(--eex-fs-field)/1.45 var(--eex-font-ui) !important;
  color:var(--eex-ink) !important;
}
.eex-hero .eex-cell .bootstrap-select > .dropdown-toggle.bs-placeholder,
.eex-hero .eex-cell .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option{
  font-weight:400 !important;
  color:var(--eex-stone-2) !important;
}
/* O triangulo do Bootstrap 3 vira um chevron de 1.5px que gira ao abrir. */
.eex-hero .eex-cell .bootstrap-select .caret{
  position:static !important;
  width:7px; height:7px;
  margin:0 0 3px 0 !important;
  border:0 !important;
  border-right:1.5px solid var(--eex-stone) !important;
  border-bottom:1.5px solid var(--eex-stone) !important;
  transform:rotate(45deg);
  transition:transform var(--eex-d2) var(--eex-ease);
}
.eex-hero .eex-cell .bootstrap-select.open .caret{ transform:rotate(-135deg); }

/* Dentro da hero o dropdown de hospedes precisa abrir para BAIXO: sobra
   espaco e abrir para cima colidiria com o titulo. O app.js aplica .dropup
   em .bs-container; em vez de alterar o app.js (congelado), reposicionamos
   apenas quando a hero esta montada. */
html.eex-hero-active .bs-container.persons.dropup > .dropdown-menu{
  top:100% !important;
  bottom:auto !important;
  margin-top:6px !important;
  margin-bottom:0 !important;
}
html.eex-hero-active .bs-container.persons > .dropdown-menu{
  border:1px solid var(--eex-hairline);
  border-radius:var(--eex-r-md);
  box-shadow:var(--eex-e3);
  padding:var(--eex-s2) 0;
}

/* CTA: tinta, nao terracota. A terracota fica reservada para acentos micro,
   o que impede o visual "botao laranja de portal de viagem". */
.eex-hero .eex-cell--cta{
  flex:0 0 auto;
  padding:var(--eex-s3) !important;
  justify-content:center;
}
.eex-hero .eex-cell--cta .btn{
  display:inline-flex !important;
  flex-direction:row-reverse;          /* texto, depois o icone: "Procurar >" */
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:18px 30px !important;
  border:0 !important;
  border-radius:var(--eex-r-sm) !important;
  background:var(--eex-ink) !important;
  color:#fff !important;
  font:600 var(--eex-fs-micro)/1 var(--eex-font-ui) !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:none !important;
  /* A Stays marca o botao com .disabled sem o atributo disabled e o mantem
     clicavel. Preservamos exatamente esse comportamento. */
  opacity:1 !important;
  pointer-events:auto !important;
  transition:background var(--eex-d2) var(--eex-ease),
             transform  var(--eex-d2) var(--eex-ease),
             box-shadow var(--eex-d2) var(--eex-ease);
}
.eex-hero .eex-cell--cta .btn:hover{
  background:var(--eex-ink-2) !important;
  transform:translateY(-1px);
  box-shadow:var(--eex-e2) !important;
}
.eex-hero .eex-cell--cta .btn:active{ transform:translateY(0); }
.eex-hero .eex-cell--cta .btn:focus-visible{
  outline:2px solid var(--eex-accent);
  outline-offset:3px;
}
.eex-hero .eex-cell--cta .btn .fa{
  font-size:12px;
  transition:transform var(--eex-d2) var(--eex-ease);
}
.eex-hero .eex-cell--cta .btn:hover .fa{ transform:translateX(3px); }

/* == 06. MICROINTERACOES E ENTRADA ========================================= */
.eex-hero__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--eex-s5);
  margin:var(--eex-s5) 0 0;
}
.eex-hero__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:2px 0;
  font:500 var(--eex-fs-small)/1 var(--eex-font-ui);
  color:var(--eex-ink) !important;         /* vence o link global do legacy */
  text-decoration:none !important;
}
.eex-hero__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--eex-ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--eex-d2) var(--eex-ease);
}
.eex-hero__link:hover::after,
.eex-hero__link:focus-visible::after{ transform:scaleX(1); }
.eex-hero__link:focus-visible{ outline:2px solid var(--eex-accent); outline-offset:4px; }
.eex-hero__link-arrow{
  font-size:11px;
  transition:transform var(--eex-d2) var(--eex-ease);
}
.eex-hero__link:hover .eex-hero__link-arrow{ transform:translateX(3px); }
.eex-hero__note{
  margin:0;
  font:400 var(--eex-fs-small)/1.5 var(--eex-font-ui);
  color:var(--eex-stone-2);
}

/* Entrada encenada. Sem chevron pulando: apenas opacidade + 14px de subida,
   escalonados por --eex-i. So dispara quando hero.js adiciona .is-ready,
   garantindo que nada anime antes de estar posicionado. */
/* Sem estado inicial fora da animacao: se .is-ready nunca chegar (JS falho,
   rAF congelado em aba de fundo), o conteudo simplesmente aparece visivel.
   O fill-mode "both" e quem aplica o opacity:0 durante o delay. */
.eex-hero.is-ready [data-eex-reveal]{
  animation:eex-rise var(--eex-d4) var(--eex-ease-out) both;
  animation-delay:calc(var(--eex-i, 0) * 85ms);
  will-change:opacity, transform;
}
@keyframes eex-rise{
  from{ opacity:0; transform:translate3d(0,14px,0); }
  to  { opacity:1; transform:none; }
}

/* Pista de rolagem: um filete de 1px que respira. Substitui o chevron,
   que e o clichê visual mais comum em landing pages. */
.eex-hero__cue{ display:none; }
@keyframes eex-cue{
  0%,100%{ transform:scaleY(.32); opacity:.30; }
  50%    { transform:scaleY(1);   opacity:.85; }
}

/* == 07. BREAKPOINTS ======================================================= */
/* Mobile-first: acima daqui o console passa a ser uma barra de tres celulas. */
@media (min-width:768px){
  .eex-hero .eex-row{ flex-direction:row; align-items:stretch; }
  .eex-hero .eex-cell{ flex:1 1 0; min-width:0; }
  .eex-hero .eex-cell + .eex-cell{
    border-top:0;
    border-left:1px solid var(--eex-hairline-2);
  }
  .eex-hero .eex-cell--cta{
    border-left:0 !important;
    flex:0 0 auto;
    padding:var(--eex-s3) !important;
  }
  .eex-hero .eex-cell::after{ bottom:0; }
}

@media (min-width:1024px){
  .eex-hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:84vh;
    min-height:min(84svh, 880px);
    padding-top:clamp(72px,10vh,132px);
  }
  /* Composicao assimetrica: copy a esquerda, coluna livre a direita.
     Centralizar tudo e o que faz uma hero parecer template.

     As grid-areas desacoplam a composicao da ordem do DOM. A segunda coluna
     nao recebe mais nenhum item desde a remocao do rail de credenciais, mas
     continua declarada: e ela que fixa a largura do titulo, do lede e do
     console. O '.' marca a celula como intencionalmente vazia. */
  .eex-hero__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(210px,290px);
    grid-template-areas:
      "copy    ."
      "console console"
      "foot    foot"
      "cue     cue";
    column-gap:var(--eex-s9);
    align-items:end;
  }
  .eex-hero__copy   { grid-area:copy; }
  .eex-hero__console{ grid-area:console; }
  .eex-hero__foot   { grid-area:foot; }
  .eex-hero__cue    { grid-area:cue; }
  .eex-hero__cue{
    display:block;
    width:1px;
    height:56px;
    margin:var(--eex-s8) 0 0;
    background:linear-gradient(180deg, var(--eex-stone-2), rgba(148,139,130,0));
    transform-origin:top center;
    animation:eex-cue 2.8s var(--eex-ease) infinite;
  }
}

@media (min-width:1440px){
  .eex-hero__inner{ column-gap:var(--eex-s10); }
  .eex-hero__console{ max-width:940px; }
}

/* == 08. ACESSIBILIDADE, MOVIMENTO REDUZIDO, IMPRESSAO ===================== */
.eex-hero__sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media (prefers-reduced-motion:reduce){
  .eex-hero [data-eex-reveal]{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    will-change:auto;
  }
  .eex-hero__cue{ animation:none !important; opacity:.5; }
  .eex-hero *,
  .eex-hero *::before,
  .eex-hero *::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
}
@media print{
  .eex-hero{ min-height:0; padding:24px 0; border-bottom:1px solid #ccc; }
  .eex-hero__bg,
  .eex-hero__cue,
  .eex-hero__console{ display:none !important; }
}

/* == 09. CONVIVENCIA COM O CSS DA PLATAFORMA ===============================
   Bloco isolado de propósito: tudo aqui existe apenas para vencer regras de
   terceiros. Quando o legacy.css for desmontado, esta secao deve encolher.
   ========================================================================== */

/* 09.1 - Titulo
   O legacy.css declara "#maincontent h2,#maincontent h1" com !important
   (font-size clamp em rem, font-weight 700 e color var(--texto)).
   Especificidade 1-1-0 + !important vence 1-0-1 + !important. */
#eex-hero .eex-hero__title{
  font-family:var(--eex-font-display) !important;
  font-size:var(--eex-fs-display) !important;
  font-weight:400 !important;
  line-height:var(--eex-lh-display) !important;
  letter-spacing:var(--eex-track-display) !important;
  color:var(--eex-ink) !important;
}
#eex-hero .eex-hero__title-line--soft{ color:var(--eex-stone-2) !important; }

/* 09.2 - Titulo oculto do console (h2) cai na mesma regra do legacy.
   Como e apenas para leitor de tela, basta garantir que nao ocupe espaco. */
#eex-hero .eex-hero__sr{
  font-size:0 !important;
  line-height:0 !important;
}

/* 09.3 - Interior do bootstrap-select
   A marcacao real e:
     button > div.filter-option > div.filter-option-inner > div...inner-inner
     button > span.bs-caret > span.caret
     button > div.filter-expand   (elemento so de medicao)
   O .filter-option nasce position:absolute; dentro de um container flex isso
   fazia o caret cair em cima do texto. */
#eex-hero .eex-cell .bootstrap-select .filter-option{
  position:static !important;
  flex:1 1 auto;
  min-width:0;
  padding:0 !important;
  text-align:left;
}
#eex-hero .eex-cell .bootstrap-select .filter-option-inner,
#eex-hero .eex-cell .bootstrap-select .filter-option-inner-inner{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#eex-hero .eex-cell .bootstrap-select .bs-caret{
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  padding-left:12px;
}
#eex-hero .eex-cell .bootstrap-select .filter-expand{
  position:absolute !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none;
}

/* 09.4 - Respiro do console e do rodape da hero */
#eex-hero .eex-cell{ padding:18px 24px !important; }
#eex-hero .eex-cell--cta{ padding:12px !important; }
#eex-hero .eex-hero__foot{ margin-top:var(--eex-s6); }