/* ============================================================
   DYNEXA — 03 LAYOUT
   Container, grid editorial, header, hero, footer.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--alt  { background: var(--bg-alt); }
.section--dark {
  background: var(--bg-dark);
  color: var(--text-invert);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .lead { color: var(--text-invert-muted); }

/* Fio dourado que separa blocos maiores */
.rule-gold {
  height: 1px;
  background: linear-gradient(90deg,
    var(--gold-600) 0%, var(--gold-400) 28%, transparent 72%);
  transform-origin: left;
}

/* Grid editorial de 12 colunas */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6) var(--sp-6);
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Cabecalho de secao: rotulo a esquerda, titulo deslocado */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--sp-5) var(--sp-7);
  align-items: start;
  padding-bottom: var(--sp-7);
}
.section-head__aside { padding-top: .55rem; }
.section-head__title { max-width: 22ch; }
.section-head__text  { margin-top: var(--sp-4); max-width: 62ch; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: var(--sp-4); }
  .section-head__title { max-width: none; }
}

/* ============================================================
   HEADER
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Opaco, nao translucido: sobre o navy do hero qualquer transparencia
     mistura azul-escuro e o header le como cinza, nao como papel. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.header.is-compact {
  height: var(--header-h-compact);
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 22px -8px rgba(4, 18, 46, .28);
}

/* Com o menu aberto o header fica sobre o painel navy: mantem o fundo claro
   e marca a divisao com um fio, para o logo e o X nao flutuarem soltos. */
body.is-locked .header {
  border-bottom-color: var(--rule-invert);
  box-shadow: none;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: 46px;
  width: auto;
  transition: height var(--dur-2) var(--ease);
}
.header.is-compact .brand img { height: 36px; }
@media (max-width: 620px) { .brand img { height: 36px; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, .1rem + .9vw, 1.1rem); }

.nav__link {
  position: relative;
  display: block;
  padding: .55rem .35rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: .002em;
  white-space: nowrap;   /* rotulo de menu nunca quebra em duas linhas */
  transition: color var(--dur-1) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: .35rem; right: .35rem; bottom: .28rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__link:hover { color: var(--navy-800); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current='page'],
.nav__link.is-current { color: var(--navy-800); }
/* o item Especialidades e um <button>, fora do alcance de [aria-current] */
.nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }

/* Dropdown */
.nav__item { position: relative; }
/* O item de topo e um <a> navegavel; a seta e um <button> irmao que
   apenas abre o submenu. Assim o hub continua alcancavel pelo menu. */
.nav__item--has-menu { display: flex; align-items: center; }
.nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 28px;
  margin-left: -.18rem;
  color: var(--slate);
  transition: color var(--dur-1) var(--ease);
}
.nav__caret:hover { color: var(--accent); }
.nav__caret svg { width: 9px; height: 9px; transition: transform var(--dur-2) var(--ease); }
.nav__item.is-open .nav__caret svg { transform: rotate(180deg); }
.nav__item.is-open .nav__caret { color: var(--accent); }

.dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  left: -1rem;
  z-index: 5;
  min-width: 328px;
  padding: .5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-out),
              visibility var(--dur-2);
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown__link {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .35rem .35rem;
  padding: .62rem .75rem;
  transition: background var(--dur-1) var(--ease);
}
.dropdown__link:hover { background: var(--paper-2); }
.dropdown__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--accent);
  padding-top: .18rem;
}
.dropdown__name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.dropdown__desc {
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.44;
}

/* Acoes do header */
.header__actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.header__phone {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--graphite);
  white-space: nowrap;
}
.header__phone:hover { color: var(--accent); }
@media (min-width: 1340px) { .header__phone { display: block; } }

/* Botao hamburguer */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  place-items: center;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Com tres submenus (Especialidades, Servicos, Segmentos) a barra precisa de
   mais largura; abaixo disso o menu vai para o hamburguer. */
@media (max-width: 1180px) {
  .burger { display: grid; }
  .nav { display: none; }
  .header__actions .btn { display: none; }
  /* Quem empurrava as acoes para a direita era o .nav (margin-left:auto).
     Com o nav oculto, o hamburguer precisa assumir esse papel. */
  .header__actions { margin-left: auto; }
}

/* Menu mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--navy-950);
  color: var(--text-invert);
  padding: calc(var(--header-h) + 1rem) var(--gutter) var(--sp-6);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-3) var(--ease-out),
              visibility var(--dur-2);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu__list { border-top: 1px solid var(--rule-invert); }
.mobile-menu__item { border-bottom: 1px solid var(--rule-invert); }

/* Nivel 1 — destinos principais */
.mobile-menu__link {
  display: block;
  padding: .82rem 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--white);
}

/* Nivel 2 — sub-itens: menores, recuados e em tom mais baixo, para a
   lista nao ler como 17 destinos de mesmo peso. */
.mobile-menu__sub { padding-bottom: .55rem; }
.mobile-menu__sub a {
  display: grid;
  grid-template-columns: 1.85rem 1fr;
  align-items: baseline;
  /* 37px de altura: acima do minimo da WCAG (24px) e confortavel para o
     dedo, sem inflar a lista de volta ao tamanho anterior. */
  padding: .55rem 0;
  font-size: .875rem;
  line-height: 1.38;
  color: var(--text-invert-muted);
  transition: color var(--dur-1) var(--ease);
}
.mobile-menu__sub a:hover,
.mobile-menu__sub a:focus-visible { color: var(--white); }
.mobile-menu__sub .num {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--gold-400);
}
.mobile-menu__foot { margin-top: auto; padding-top: var(--sp-6); }

body.is-locked { overflow: hidden; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-950);
  color: var(--text-invert);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 4vw, 5rem));
  padding-bottom: clamp(2.75rem, 1rem + 4vw, 4.75rem);
  overflow: hidden;
}

/* Camada 1: malha tecnica */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(233,237,244,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,237,244,.055) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(120% 88% at 22% 8%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 88% at 22% 8%, #000 12%, transparent 76%);
}

/* Camada 2: brilho dourado */
.hero__glow {
  position: absolute;
  z-index: -2;
  right: -14%;
  top: -22%;
  width: min(78vw, 940px);
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
    rgba(201,151,31,.30) 0%,
    rgba(176,112,0,.13) 34%,
    transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}
.hero__glow--blue {
  right: auto; left: -22%;
  top: auto; bottom: -34%;
  width: min(64vw, 760px);
  background: radial-gradient(circle at center,
    rgba(30,99,196,.30) 0%, rgba(14,58,133,.14) 38%, transparent 70%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
}
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.024em;
  color: var(--white);
  max-width: 24ch;   /* alvo: 3 linhas no desktop */
  margin-top: var(--sp-5);
}
.hero__text {
  margin-top: var(--sp-5);
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-invert-muted);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* Ficha lateral do hero */
.hero__card {
  border: 1px solid var(--rule-invert);
  border-top: 2px solid var(--gold-500);
  background: linear-gradient(180deg, rgba(10,42,99,.42), rgba(4,18,46,.24));
  backdrop-filter: blur(3px);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.hero__card dl { display: grid; gap: 0; }
.hero__card .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: .82rem 0;
  border-bottom: 1px solid var(--rule-invert);
}
.hero__card .row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__card dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
}
.hero__card dd {
  font-family: var(--font-display);
  font-size: 1.32rem;
  color: var(--white);
  text-align: right;
  line-height: 1.2;
}
.hero__card dd .unit {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--gold-400);
  display: block;
  margin-top: .18rem;
  text-transform: uppercase;
}

/* Barra de estados no rodape do hero */
.hero__states {
  margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-invert);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
}
.hero__states .label { color: var(--text-invert-muted); }
.hero__states ol { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.hero__states li {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--gold-300);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  background: var(--navy-950);
  color: var(--text-invert-muted);
  padding-top: var(--sp-10);
  font-size: var(--fs-sm);
}
.footer::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400) 26%, transparent 62%);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr));
  gap: var(--sp-7) var(--sp-6);
  padding-bottom: var(--sp-8);
}
@media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer__top { grid-template-columns: 1fr; } }

.footer__brand { display: flex; align-items: center; gap: .9rem; }
.footer__brand img { width: 46px; height: auto; }
.footer__wordmark {
  font-family: var(--font-display);
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--white);
}
.footer__wordmark span { color: var(--gold-400); }
.footer__tagline {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  margin-top: .34rem;
}
.footer__about { margin-top: var(--sp-5); max-width: 42ch; line-height: 1.62; }

.footer h2,
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-4);
}
.footer__links li + li { margin-top: .58rem; }
.footer__links a {
  color: var(--text-invert-muted);
  transition: color var(--dur-1) var(--ease);
}
.footer__links a:hover { color: var(--white); }

.footer address { font-style: normal; line-height: 1.72; }
.footer address a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid var(--rule-invert);
  font-size: var(--fs-xs);
  color: var(--mist);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* Botao flutuante WhatsApp */
.wa-float {
  position: fixed;
  right: clamp(1rem, .4rem + 1.4vw, 1.75rem);
  bottom: clamp(1rem, .4rem + 1.4vw, 1.75rem);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .78rem 1.1rem .78rem .9rem;
  background: var(--navy-900);
  color: var(--white);
  border: 1px solid rgba(233,237,244,.2);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateY(1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-3) var(--ease-out),
              background var(--dur-1) var(--ease);
}
.wa-float.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-float:hover { background: var(--navy-800); }
.wa-float svg { width: 19px; height: 19px; flex: none; fill: #3ECC5F; }
.wa-float span { white-space: nowrap; }
@media (max-width: 560px) {
  .wa-float span { display: none; }
  .wa-float { padding: .9rem; }
}

/* Ultima linha do submenu: atalho para a pagina-hub */
.dropdown__all {
  margin-top: .3rem;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}
.dropdown__all .dropdown__name { color: var(--accent); }