/* =====================================================
   KIT DO AGENTE DE VIAGENS · HOTEL JATIÚCA
   Camada de página. Consome tokens.css e guide.css do DS
   Edição 03. Nada de cor solta: tudo vem de token.
   Mobile-first. O agente abre isto no celular, no estande,
   no 4G do centro de convenções.
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
/* O atributo hidden tem que vencer o display dos componentes .jat-* */
[hidden] { display: none !important; }

.kit-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--jat-accent);
  color: var(--jat-on-accent);
  padding: var(--jat-space-3) var(--jat-space-5);
  z-index: var(--jat-z-modal);
}
.kit-skip:focus { left: var(--jat-space-3); top: var(--jat-space-3); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--jat-border-focus);
  outline-offset: 2px;
  border-radius: var(--jat-radius-xs);
}

/* ── HEADER ─────────────────────────────────────────── */
.kit-header {
  position: sticky;
  top: 0;
  z-index: var(--jat-z-sticky);
  background: color-mix(in srgb, var(--jat-branco) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--jat-border);
}
.kit-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jat-space-4);
  min-height: 64px;
}
.kit-header__logo img { width: 148px; height: auto; }

.kit-nav {
  display: flex;
  align-items: center;
  gap: var(--jat-space-5);
  font-size: var(--jat-text-body-sm);
}
.kit-nav a {
  color: var(--jat-text-soft);
  text-decoration: none;
  font-weight: var(--jat-weight-medium);
}
.kit-nav a:hover { color: var(--jat-accent); }
.kit-nav a:not(.kit-nav__cta) { display: none; }
.kit-nav__cta {
  background: var(--jat-accent);
  color: var(--jat-on-accent) !important;
  padding: 0.55rem 1.05rem;
  border-radius: var(--jat-radius-full);
  font-weight: var(--jat-weight-bold);
  white-space: nowrap;
}
.kit-nav__cta:hover { background: var(--jat-accent-hover); }

@media (min-width: 900px) {
  .kit-header__logo img { width: 180px; }
  .kit-nav a:not(.kit-nav__cta) { display: inline; }
}

/* ── HERO ───────────────────────────────────────────── */
.kit-hero {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--jat-mar-50) 0%, var(--jat-bg) 62%);
  padding-block: clamp(2.75rem, 8vw, 5.25rem) clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  border-bottom: 1px solid var(--jat-border);
}
.kit-hero__inner { display: grid; gap: var(--jat-space-4); justify-items: center; }
.kit-hero .jat-display { color: var(--jat-mar-800); }
.kit-hero__sub { max-width: 46ch; }
.kit-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jat-space-3);
  justify-content: center;
  margin-top: var(--jat-space-2);
}

/* ── SEÇÕES ─────────────────────────────────────────── */
.kit-section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.kit-section--soft { background: var(--jat-bg-soft); }
.kit-section--cream { background: var(--jat-bg-cream); }
.kit-section--mar {
  background: var(--jat-mar-900);
  color: var(--jat-branco);
}
.kit-section--mar .jat-h2,
.kit-section--mar .jat-lead { color: var(--jat-branco); }
.kit-section__head {
  display: grid;
  gap: var(--jat-space-2);
  max-width: 58ch;
  margin-bottom: var(--jat-space-8);
}

/* ── CARTÃO DO EXECUTIVO ────────────────────────────── */
.kit-section--cartao { padding-block: clamp(2rem, 5vw, 3rem); }
.kit-cartao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--jat-space-5);
  align-items: start;
  background: var(--jat-surface);
  border: 1px solid var(--jat-border-mar);
  border-radius: var(--jat-radius-lg);
  padding: var(--jat-space-6);
  box-shadow: var(--jat-shadow-card);
}
.kit-cartao__marca img { width: 56px; height: 56px; }
.kit-cartao__corpo { display: grid; gap: var(--jat-space-2); min-width: 0; }
.kit-cartao__cargo {
  margin: 0;
  color: var(--jat-text-muted);
  font-weight: var(--jat-weight-medium);
}
.kit-cartao__links {
  list-style: none;
  margin: var(--jat-space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--jat-space-2);
}
.kit-cartao__links a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--jat-space-2);
  color: var(--jat-accent);
  text-decoration: none;
  font-weight: var(--jat-weight-semibold);
  font-variant-numeric: var(--jat-nums);
}
.kit-cartao__links a:hover { text-decoration: underline; }
.kit-cartao__links .kit-rotulo {
  color: var(--jat-text-muted);
  font-weight: var(--jat-weight-regular);
  font-size: var(--jat-text-caption);
}
.kit-cartao__vcard { margin-top: var(--jat-space-3); justify-self: start; }

@media (max-width: 560px) {
  .kit-cartao { grid-template-columns: 1fr; }
  .kit-cartao__vcard { justify-self: stretch; text-align: center; }
}

/* ── FILTROS ────────────────────────────────────────── */
.kit-filtros {
  display: flex;
  gap: var(--jat-space-2);
  overflow-x: auto;
  padding-bottom: var(--jat-space-3);
  margin-bottom: var(--jat-space-4);
  scrollbar-width: thin;
}
.kit-filtro {
  flex: none;
  border: 1px solid var(--jat-border-medium);
  background: var(--jat-surface);
  color: var(--jat-text-soft);
  border-radius: var(--jat-radius-full);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: var(--jat-text-body-sm);
  font-weight: var(--jat-weight-medium);
  cursor: pointer;
  white-space: nowrap;
}
.kit-filtro:hover { border-color: var(--jat-accent); color: var(--jat-accent); }
/* Estado ativo com duas pistas: cor e peso mais borda cheia (daltônico-safe) */
.kit-filtro.is-ativo {
  background: var(--jat-accent);
  border-color: var(--jat-accent);
  color: var(--jat-on-accent);
  font-weight: var(--jat-weight-bold);
}
.kit-filtro__contagem { opacity: 0.72; font-variant-numeric: var(--jat-nums); }

.kit-acoes-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jat-space-3);
  margin-bottom: var(--jat-space-6);
}
/* text-muted (#757575) reprova AA sobre areia/cream (4,32:1). Nestes textos
   pequenos sobre superfície clara, subir pra text-soft (#616161 = 5,4:1). */
.kit-acoes-lote__nota { font-size: var(--jat-text-caption); margin: 0; color: var(--jat-text-soft); }

/* ── GRADE ──────────────────────────────────────────── */
.kit-grade__ajuda { font-size: var(--jat-text-body-sm); margin: 0 0 var(--jat-space-4); color: var(--jat-text-soft); }

/* Colunas explícitas: nunca colapsa pra 1 coluna gigante como o auto-fill fazia. */
.kit-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--jat-space-3);
}
@media (min-width: 520px) { .kit-grade { grid-template-columns: repeat(3, 1fr); gap: var(--jat-space-4); } }
@media (min-width: 780px) { .kit-grade { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1060px) { .kit-grade { grid-template-columns: repeat(5, 1fr); } }

/* Card limpo: só a foto, sem chrome por cima. Botão pra ser acessível por teclado. */
.kit-foto {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--jat-border);
  border-radius: var(--jat-radius-md);
  overflow: hidden;
  background: var(--jat-cinza-bg);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.kit-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--jat-transition-base);
}
.kit-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 39, 50, 0);
  transition: background var(--jat-transition-fast);
}
.kit-foto:hover img { transform: scale(1.05); }
.kit-foto:hover::after { background: rgba(0, 39, 50, 0.12); }

.kit-grade--video .kit-foto { aspect-ratio: 9 / 16; }
.kit-grade--video .kit-foto[data-orientacao="horizontal"] { aspect-ratio: 16 / 9; }
.kit-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.kit-video__play {
  color: var(--jat-branco);
}
.kit-video__play svg {
  width: 24px;
  height: 24px;
  padding: 12px;
  box-sizing: content-box;
  border-radius: var(--jat-radius-full);
  background: rgba(0, 39, 50, 0.58);
  border: 2px solid var(--jat-branco);
}

.kit-mais { display: grid; justify-items: center; margin-top: var(--jat-space-6); }

/* ── FOLHA DE DETALHE ───────────────────────────────── */
.kit-sheet {
  border: none;
  padding: 0;
  border-radius: var(--jat-radius-lg);
  max-width: min(680px, calc(100vw - 2rem));
  width: 100%;
  background: var(--jat-surface);
  color: var(--jat-text);
  box-shadow: var(--jat-shadow-elevated);
  overflow: hidden;
}
.kit-sheet::backdrop { background: rgba(0, 39, 50, 0.62); backdrop-filter: blur(3px); }
.kit-sheet__fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--jat-radius-full);
  background: rgba(0, 39, 50, 0.55);
  color: var(--jat-branco);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kit-sheet__fechar:hover { background: rgba(0, 39, 50, 0.78); }
.kit-sheet__fechar svg { width: 20px; height: 20px; }
.kit-sheet__media {
  background: var(--jat-mar-900);
  display: grid;
  place-items: center;
  max-height: 62vh;
  overflow: hidden;
}
.kit-sheet__img,
.kit-sheet__video {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
}
.kit-sheet__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jat-space-3);
  padding: var(--jat-space-4) var(--jat-space-5);
}
.kit-sheet__legenda {
  margin: 0;
  flex: 1 1 auto;
  min-width: 40%;
  font-family: var(--jat-font-display);
  font-weight: var(--jat-weight-bold);
  font-size: var(--jat-text-h3);
  color: var(--jat-mar-800);
}
.kit-sheet__acoes { display: flex; flex-wrap: wrap; gap: var(--jat-space-2); }
@media (max-width: 480px) {
  .kit-sheet__acoes { width: 100%; }
  .kit-sheet__acoes .jat-btn { flex: 1 1 auto; text-align: center; }
}

/* ── MARCA ──────────────────────────────────────────── */
.kit-marca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--jat-space-4);
  margin-bottom: var(--jat-space-10);
}
.kit-marca__item { margin: 0; display: grid; gap: var(--jat-space-3); }
.kit-marca__palco {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: var(--jat-space-5);
  background: var(--jat-bg-soft);
  border: 1px solid var(--jat-border);
  border-radius: var(--jat-radius-md);
}
.kit-marca__palco--escuro { background: var(--jat-mar-900); border-color: var(--jat-mar-800); }
.kit-marca__palco img { max-height: 72px; width: auto; }
.kit-marca__item figcaption { display: grid; gap: 0.15rem; font-size: var(--jat-text-body-sm); }

.kit-link {
  color: var(--jat-accent);
  font-weight: var(--jat-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kit-link:hover { color: var(--jat-accent-hover); }

.kit-cores { margin-bottom: var(--jat-space-8); }
.kit-cores__lista {
  list-style: none;
  padding: 0;
  margin: var(--jat-space-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--jat-space-3);
}
.kit-cores__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--jat-space-3);
  align-items: center;
  font-size: var(--jat-text-body-sm);
}
.kit-cor { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: var(--jat-radius-sm); }
.kit-cores__lista code { color: var(--jat-text-soft); font-size: var(--jat-text-micro); }

.kit-donts ul { margin: var(--jat-space-4) 0 0; padding-left: 1.15rem; display: grid; gap: var(--jat-space-2); }
.kit-donts li { color: var(--jat-text-soft); }

/* ── FICHA ──────────────────────────────────────────── */
.kit-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--jat-space-5);
  margin: 0 0 var(--jat-space-8);
}
.kit-ficha div { display: grid; gap: 0.25rem; }
.kit-ficha dt {
  font-size: var(--jat-text-caption);
  color: var(--jat-mar-200);
  font-weight: var(--jat-weight-medium);
}
.kit-ficha dd {
  margin: 0;
  font-family: var(--jat-font-display);
  font-size: 1.28rem;
  font-weight: var(--jat-weight-bold);
  color: var(--jat-branco);
  font-variant-numeric: var(--jat-nums);
}
.kit-ficha__conceito {
  border-left: 3px solid var(--jat-dourado-500);
  padding-left: var(--jat-space-4);
  max-width: 46ch;
  margin: 0;
}

/* ── FOOTER ─────────────────────────────────────────── */
.kit-footer {
  background: var(--jat-mar-900);
  color: var(--jat-mar-100);
  padding-block: var(--jat-space-10);
}
.kit-footer__inner { display: grid; gap: var(--jat-space-5); justify-items: start; }
.kit-footer__logo { width: 150px; height: auto; }
.kit-footer__texto { display: grid; gap: var(--jat-space-2); font-size: var(--jat-text-body-sm); }
.kit-footer__texto p { margin: 0; }
.kit-footer a { color: var(--jat-branco); text-decoration: underline; text-underline-offset: 3px; }

/* ── MODAL ──────────────────────────────────────────── */
.kit-modal {
  border: none;
  border-radius: var(--jat-radius-lg);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 2rem);
  box-shadow: var(--jat-shadow-elevated);
  color: var(--jat-text);
}
.kit-modal::backdrop { background: rgba(0, 39, 50, 0.55); backdrop-filter: blur(2px); }
.kit-modal__form { display: grid; gap: var(--jat-space-4); padding: var(--jat-space-6); }
.kit-modal__intro { margin: 0; color: var(--jat-text-soft); font-size: var(--jat-text-body-sm); }

.kit-campo { display: grid; gap: 0.3rem; font-size: var(--jat-text-body-sm); }
.kit-campo span { font-weight: var(--jat-weight-medium); }
.kit-campo input {
  font: inherit;
  padding: 0.62rem 0.8rem;
  border: 1px solid var(--jat-border-medium);
  border-radius: var(--jat-radius-sm);
  background: var(--jat-branco);
  color: var(--jat-text);
}
.kit-campo input:focus { border-color: var(--jat-accent); }
/* Erro com duas pistas: cor e o texto do aviso, nunca só a cor */
.kit-campo input[aria-invalid="true"] { border-color: var(--jat-coral); border-width: 2px; }

.kit-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--jat-space-3);
  font-size: var(--jat-text-micro);
  color: var(--jat-text-soft);
  line-height: var(--jat-leading-normal);
}
.kit-consent input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--jat-accent); }
.kit-consent a { color: var(--jat-accent); }

.kit-modal__erro {
  margin: 0;
  color: var(--jat-coral);
  font-size: var(--jat-text-body-sm);
  font-weight: var(--jat-weight-semibold);
}
.kit-modal__acoes { display: grid; gap: var(--jat-space-2); }

/* ── TOAST ──────────────────────────────────────────── */
.kit-toast {
  position: fixed;
  left: 50%;
  bottom: var(--jat-space-6);
  transform: translateX(-50%);
  background: var(--jat-mar-900);
  color: var(--jat-branco);
  padding: 0.7rem 1.15rem;
  border-radius: var(--jat-radius-full);
  font-size: var(--jat-text-body-sm);
  box-shadow: var(--jat-shadow-elevated);
  z-index: var(--jat-z-modal);
  max-width: calc(100% - 2rem);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .kit-foto:hover img { transform: none; }
}