/* ==========================================================================
   hotsite.css — camada de responsividade da landing page (view/hotsite/start.html)
   A página é montada com estilos inline; por isso quase toda regra daqui precisa
   de !important para vencer o inline. Mobile-first NÃO se aplica: o layout base
   é desktop (inline) e este arquivo só corrige para baixo.
   Breakpoints: 1200 / 1024 / 900 / 768 / 600 / 420
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base / guardas globais
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
svg {
  max-width: 100%;
}

/* Palavras longas (e-mail do rodapé/contato) não podem estourar a caixa */
.eg-contactlist span,
.eg-footer-row a {
  overflow-wrap: anywhere;
}

/* Alvos de toque: qualquer link-botão tem no mínimo ~44px de altura no touch */
@media (hover: none) and (pointer: coarse) {

  .eg-hero-actions a,
  .eg-cta-row a,
  .eg-midcta-row a,
  .eg-cta-head,
  .eg-navtoggle,
  #egSubmit {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   2. Logo — o SVG é 80x80 mas a arte ocupa só y=16.3..63.6; o wrapper corta
      essa moldura vazia para o logo crescer sem esticar a faixa escura.
   -------------------------------------------------------------------------- */
.eg-logowrap {
  display: block;
  height: 100px;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}

.eg-logowrap img {
  width: 150px;
  height: 150px;
  margin-top: -25px;
}

/* --------------------------------------------------------------------------
   3. Menu mobile (hamburger + drawer)
      Abaixo de 900px o nav horizontal não cabe; em vez de sumir sem substituto,
      vira um drawer controlado por #egNavChk (checkbox, sem JS).
   -------------------------------------------------------------------------- */
.eg-navtoggle {
  display: none;
}

#egNavChk {
  display: none;
}

/* Duplica o CTA do header dentro do drawer — só aparece no mobile, onde o
   botão laranja da barra é escondido. */
.eg-navcta {
  display: none;
}

@media (max-width: 900px) {
  .egnav {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-left: 0 !important;
    background: var(--nav2);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 30px rgba(11, 31, 58, .35);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    z-index: 30;
  }

  .egnav a {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 16px !important;
  }

  .egnav .eg-navcta {
    display: block;
    background: var(--acc);
    color: #fff !important;
    font-weight: 800 !important;
    text-align: center;
    border-bottom: 0;
  }

  #egNavChk:checked~.eg-headrow .egnav {
    max-height: 320px;
  }

  .eg-navtoggle {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    cursor: pointer;
    flex-shrink: 0;
  }

  .eg-navtoggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition: background .2s;
  }

  .eg-navtoggle span::before,
  .eg-navtoggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s;
  }

  .eg-navtoggle span::before {
    top: -6px;
  }

  .eg-navtoggle span::after {
    top: 6px;
  }

  #egNavChk:checked~.eg-headrow .eg-navtoggle span {
    background: transparent;
  }

  #egNavChk:checked~.eg-headrow .eg-navtoggle span::before {
    transform: translateY(6px) rotate(45deg);
  }

  #egNavChk:checked~.eg-headrow .eg-navtoggle span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .eg-headrow {
    position: relative;
  }

  /* O CTA do header sai da barra no mobile — a hotline da faixa laranja cobre a urgência */
  .eg-cta-head {
    display: none !important;
  }
}

/* Header — faixa utilitária */
@media (max-width: 768px) {
  .eg-util {
    flex-wrap: wrap;
    justify-content: center !important;
    text-align: center;
    gap: 6px !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
  }

  .eg-headrow {
    padding: 8px 16px !important;
    gap: 12px !important;
  }

  .eg-logowrap {
    height: 74px;
  }

  .eg-logowrap img {
    width: 118px;
    height: 118px;
    margin-top: -22px;
  }
}

@media (max-width: 420px) {
  .eg-util {
    font-size: 12px !important;
  }

  .eg-logowrap {
    height: 62px;
  }

  .eg-logowrap img {
    width: 100px;
    height: 100px;
    margin-top: -19px;
  }

  .eg-navtoggle {
    width: 42px;
    height: 42px;
  }
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-hero {
    min-height: 78vh !important;
  }

  .eg-hero-inner {
    padding: 56px 20px !important;
  }
}

@media (max-width: 768px) {
  .eg-hero {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .eg-hero-inner {
    padding: 52px 16px !important;
  }

  .eg-hero-badges {
    gap: 8px !important;
    margin-bottom: 26px !important;
  }

  .eg-hero-badges span {
    font-size: 13px !important;
    padding: 8px 13px !important;
  }

  .eg-hero-actions {
    gap: 14px !important;
  }

  .eg-hero-actions>a:first-child {
    flex: 1 1 100%;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .eg-hero-inner {
    padding: 44px 16px !important;
  }

  .eg-hero-phone span span:last-child {
    font-size: 19px !important;
  }

  .eg-hero-phone>span:first-child {
    width: 46px !important;
    height: 46px !important;
  }
}

/* O typer trava a largura do span via JS; abaixo de 420px ele espremia o badge */
@media (max-width: 420px) {
  .eg-hero-badge-live {
    font-size: 11px !important;
    padding: 7px 12px !important;
  }

  #egCityTyper {
    max-width: 100%;
    overflow: hidden;
  }
}

/* Celular deitado: o hero de 88vh escondia todo o conteúdo */
@media (max-height: 520px) and (orientation: landscape) {
  .eg-hero {
    min-height: 0 !important;
  }

  .eg-hero-inner {
    padding: 40px 24px !important;
  }
}

/* --------------------------------------------------------------------------
   5. Seções genéricas
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .eg-sec {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   6. Pain points
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-grid-pain {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  .eg-grid-pain {
    grid-template-columns: 1fr !important;
  }

  .eg-grid-pain>div {
    padding: 24px !important;
  }
}

@media (max-width: 600px) {
  .eg-cta-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .eg-cta-row a {
    justify-content: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   7. What we do (split + imagens sobrepostas)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .egsplit {
    grid-template-columns: 1fr !important;
  }

  /* As duas fotos são absolutas no desktop; no mobile viram grade de 2 colunas */
  .eg-introimgs {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .eg-introimgs>img {
    position: static !important;
    width: 100% !important;
    border: 0 !important;
  }
}

@media (max-width: 480px) {
  .eg-introimgs {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   8. Services — 5 cards
      Desktop: grade de 6 colunas, cada card ocupa 2 (3 por linha) e os dois
      últimos são deslocados para ficarem centralizados (auto-fit deixava órfão).
   -------------------------------------------------------------------------- */
.eg-services {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.eg-services>div {
  grid-column: span 2;
}

.eg-services>div:nth-child(4) {
  grid-column: 2 / 4;
}

.eg-services>div:nth-child(5) {
  grid-column: 4 / 6;
}

@media (max-width: 1000px) {
  .eg-services {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .eg-services>div,
  .eg-services>div:nth-child(4),
  .eg-services>div:nth-child(5) {
    grid-column: auto;
  }

  .eg-services>div:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .eg-services {
    grid-template-columns: 1fr;
  }

  .eg-services>div:last-child {
    grid-column: auto;
  }

  .eg-services>div>div {
    padding: 22px !important;
  }
}

/* --------------------------------------------------------------------------
   9. Process
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-grid-process {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 560px) {
  .eg-grid-process {
    grid-template-columns: 1fr !important;
  }

  .eg-step {
    padding-top: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   10. Mid CTA
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .eg-midcta-row {
    justify-content: center !important;
    text-align: center;
  }

  .eg-midcta-row h2 {
    flex: 1 1 100%;
  }

  .eg-midcta-row>div {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .eg-midcta-row>div {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }

  .eg-midcta-row>div a {
    justify-content: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   11. Locations
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-grid-loc {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .eg-grid-loc {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   12. Testimonials + stats
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-grid-testi {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .eg-grid-testi>div {
    padding: 26px !important;
  }
}

@media (max-width: 780px) {
  .eg-stats {
    grid-template-columns: 1fr !important;
    padding: 30px 20px !important;
    gap: 26px !important;
  }

  /* Sem as 3 colunas as bordas laterais viram divisórias horizontais */
  .eg-stats>div:nth-child(2) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid #22406b;
    border-bottom: 1px solid #22406b;
    padding: 26px 0;
  }
}

/* --------------------------------------------------------------------------
   13. Contato / formulário
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-formcard {
    padding: 26px !important;
  }
}

@media (max-width: 600px) {
  .eg-contactlist {
    gap: 14px !important;
  }

  .eg-contactlist span span:last-child {
    font-size: 15px !important;
  }

  .eg-formcard {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  /* iOS dá zoom em input com fonte < 16px */
  .eg-formcard input,
  .eg-formcard select,
  .eg-formcard textarea {
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .eg-footer-row {
    justify-content: center !important;
    text-align: center;
    gap: 20px !important;
  }

  .eg-footer-row>* {
    flex: 1 1 100%;
    justify-content: center;
  }

  .eg-footernav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .eg-footer {
    padding: 32px 16px !important;
  }

  .eg-footer-row img {
    height: 80px !important;
  }
}

/* --------------------------------------------------------------------------
   15. Acessibilidade — respeita quem pediu menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}