/* ═══════════════════════════════════════════════════
   ALTAGRAD — Mobile Navigation Fix v2
   Correcções:
   1. Hamburger visível e clicável
   2. Drawer com links visíveis
   3. Overlay para fechar ao clicar fora
═══════════════════════════════════════════════════ */

/* ── MOBILE: esconder nav desktop, mostrar hamburger ── */
@media (max-width: 768px) {

  /* Esconder links de navegação NO HEADER apenas */
  .nav-inner > .nav-links,
  nav#nav .nav-inner .nav-links {
    display: none !important;
  }

  /* Esconder botões de acção no header */
  .nav-inner .btn-nav-cta,
  .nav-inner .btn-login,
  .nav-inner .lang-toggle {
    display: none !important;
  }

  /* Mostrar hamburger */
  .nav-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    transition: background 0.2s;
  }
  .nav-hamburger:hover,
  .nav-hamburger:focus {
    background: rgba(255,255,255,.1);
    outline: none;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
    pointer-events: none;
  }
}

/* ── HAMBURGER ANIMAÇÃO (todas as larguras) ── */
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── DRAWER MOBILE ── */
#nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-height, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  background: #12151e;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 24px 24px 40px;
  z-index: 999;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#nav-drawer.is-open {
  display: flex !important;
}

/* Links dentro do drawer — especificidade alta */
#nav-drawer .nav-links {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

#nav-drawer .nav-links .nav-link,
#nav-drawer .nav-link {
  display: block !important;
  padding: 16px 0;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color 0.2s, padding-left 0.2s;
}

#nav-drawer .nav-links .nav-link:last-child,
#nav-drawer .nav-link:last-child {
  border-bottom: none;
}

#nav-drawer .nav-links .nav-link:hover,
#nav-drawer .nav-link:hover {
  color: #1D9E75 !important;
  padding-left: 8px;
}

/* CTA dentro do drawer */
#nav-drawer .btn-nav-cta,
#nav-drawer .btn--full {
  display: block !important;
  margin-top: 20px;
  padding: 14px 20px;
  background: #1D9E75;
  color: #ffffff !important;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* Lang row dentro do drawer */
.drawer-lang-row {
  display: flex !important;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.drawer-lang-btn {
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: #ffffff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
}

.drawer-lang-btn.on,
.drawer-lang-btn[aria-pressed="true"] {
  background: #1D9E75;
  border-color: #1D9E75;
}

/* ── OVERLAY ── */
#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 998;
  -webkit-tap-highlight-color: transparent;
}

#nav-overlay.is-open {
  display: block;
}

/* ── BODY LOCK quando menu aberto ── */
body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


/* ═══════════════════════════════════════════════════
   FIX — Hamburger sempre visível (z-index reforçado)
   O hero com position:relative + overflow:hidden
   pode mascarar o nav em certos browsers mobile
═══════════════════════════════════════════════════ */
#nav {
  z-index: 1000 !important;
  position: fixed !important;
}

.nav-inner {
  position: relative;
  z-index: 1001 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .nav-hamburger {
    z-index: 1002 !important;
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════
   FIX — Página Sobre: texto vertical corrigido
   grid-template-columns forçado a 1fr em mobile
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .about-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .about-h1 {
    font-size: clamp(28px, 6vw, 42px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-founder-photo {
    max-width: 260px !important;
    margin-inline: auto !important;
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* Grid vira flex column: foto em cima, texto em baixo */
  .about-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Div da foto — primeiro elemento visual */
  .about-hero-inner > div:last-child {
    order: -1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* Foto circular compacta */
  .about-founder-photo {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    flex-shrink: 0 !important;
  }

  /* Div do texto — ocupa toda a largura */
  .about-hero-inner > div:first-child {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* H1 ocupa largura total sem cortar */
  .about-h1 {
    font-size: clamp(24px, 6.5vw, 36px) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  /* Parágrafo — texto distribuído entre margens */
  .about-hero-inner p,
  .about-sub {
    width: 100% !important;
    text-align: justify !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Badge não corta */
  .about-hero-inner .hero-badge {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .about-hero {
    padding-inline: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════
   FIX — Drawer links alinhados à esquerda
   não cortados à direita do ecrã
═══════════════════════════════════════════════════ */
#nav-drawer {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#nav-drawer .nav-links {
  align-items: flex-start !important;
  width: 100% !important;
}

#nav-drawer .nav-links .nav-link,
#nav-drawer .nav-link {
  text-align: left !important;
  width: 100% !important;
  padding-right: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
}


/* ═══════════════════════════════════════════════════
   SISTEMA DE GRELHA RESPONSIVA
   Alinhado com configurações recomendadas:
   Desktop: 16 col · Margens 20px · Gutter 8px
   Tablet:   8 col · Margens 32px · Gutter 8px
   Mobile:   8 col · Margens 20px · Gutter 8px
═══════════════════════════════════════════════════ */

/* ── TOKENS DE GRELHA ── */
:root {
  --grid-cols-desktop: 16;
  --grid-cols-tablet:   8;
  --grid-cols-mobile:   8;
  --gutter:            8px;
  --margin-desktop:   20px;
  --margin-tablet:    32px;
  --margin-mobile:    20px;
  --max-content:    1200px;
}

/* ── CONTAINER BASE ── */
.container,
.nav-inner,
.hero-inner,
.sec,
.sec--alt,
.footer-grid,
.footer-bottom {
  width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}

/* ── DESKTOP (>1024px) ── */
@media (min-width: 1025px) {
  .container,
  .hero-inner,
  .sec,
  .sec--alt {
    max-width: var(--max-content);
    padding-inline: var(--margin-desktop);
  }
}

/* ── TABLET (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .container,
  .hero-inner,
  .sec,
  .sec--alt {
    padding-inline: var(--margin-tablet);
  }

  /* Grelha de 2 colunas em tablet */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Serviços — 2 cards por linha em tablet */
  .services-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--gutter) !important;
  }

  /* About hero — coluna única em tablet */
  .about-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {
  .container,
  .hero-inner,
  .sec,
  .sec--alt {
    padding-inline: var(--margin-mobile) !important;
  }

  /* Coluna única em mobile */
  .grid-2,
  .grid-3,
  .grid-4,
  .services-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--gutter) !important;
  }

  /* Cards de serviço — full width */
  .service-card,
  .pricing-card,
  [class*="card"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tipografia responsiva */
  h1 { font-size: clamp(28px, 7vw, 40px) !important; }
  h2 { font-size: clamp(22px, 5.5vw, 32px) !important; }
  h3 { font-size: clamp(18px, 4.5vw, 24px) !important; }

  /* Imagens — nunca ultrapassam o container */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Botões — full width em mobile */
  .btn--full,
  .hero .btn,
  .hero a[class*="btn"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Espaçamento vertical reduzido em mobile */
  .sec, .sec--alt {
    padding-block: 48px !important;
  }

  /* Footer — coluna única */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-inline: var(--margin-mobile) !important;
  }

  .footer-bottom {
    padding-inline: var(--margin-mobile) !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
}

/* ── PREVENT HORIZONTAL OVERFLOW (todos os devices) ── */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════
   FIX — Página Sobre: grid collapsa correctamente
   A foto não deve empurrar o texto para fora
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Forçar coluna única e ordem: texto primeiro, foto depois */
  .about-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Texto do fundador — primeiro e full width */
  .about-hero-inner > div:first-child {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  /* Foto — segundo, centrada e proporcionalmente menor */
  .about-hero-inner > div:last-child,
  .about-hero-inner img,
  .about-founder-photo {
    order: 1 !important;
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* H1 do Sobre — largura total, sem overflow */
  .about-h1 {
    font-size: clamp(24px, 6vw, 36px) !important;
    width: 100% !important;
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
  }

  /* Badge no Sobre — não cortar */
  .about-hero-inner .hero-badge {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
}

/* ═══════════════════════════════════════════════════
   FIX — PT/EN selector visível em mobile (homepage)
   O lang-toggle está escondido em mobile pelo CSS
   Adicionar PT/EN directamente abaixo do logo no header mobile
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Mostrar lang-toggle no header mobile */
  .lang-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .lang-toggle li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .lang-toggle a {
    display: inline-block !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.6) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
  }

  .lang-toggle .current-lang a {
    color: #1D9E75 !important;
    border-color: #1D9E75 !important;
  }
}


/* ═══════════════════════════════════════════════════
   FIX — PT/EN selector visível no desktop
   O setLang() do main.js funciona em todos os devices
   Só precisamos de mostrar o botão EN no header desktop
═══════════════════════════════════════════════════ */
.lang-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lang-toggle li {
  list-style: none !important;
}

.lang-toggle a {
  display: inline-block !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: color .2s, border-color .2s !important;
  cursor: pointer !important;
}

.lang-toggle a:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.5) !important;
}

.lang-toggle .current-lang a,
.lang-toggle [aria-current="true"] {
  color: #1D9E75 !important;
  border-color: #1D9E75 !important;
}

/* Adicionar botão EN ao lang-toggle via CSS content não é possível */
/* O main.js já trata do toggle — só precisamos de mostrar o elemento */