/* ==========================================================================
   Componentes reutilizáveis
   ========================================================================== */

@layer components {

  /* ---- Ícones (sprite SVG inline) ---------------------------------------- */
  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--fill { fill: currentColor; stroke: none; }

  /* ---- Botões ------------------------------------------------------------ */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-heading);
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.625rem 1.375rem;
    border: 2px solid var(--btn-bd);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 650;
    font-size: var(--fs-16);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      translate var(--dur-fast) var(--ease-out),
      scale var(--dur-fast) var(--ease-out);
  }
  .btn:hover { color: var(--btn-fg); }
  .btn:active:not(:disabled) { scale: 0.97; }
  .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }

  .btn--cta { --btn-bg: var(--color-cta); --btn-fg: var(--color-cta-text); }
  .btn--cta:hover:not(:disabled) { translate: 0 -1px; box-shadow: 0 8px 20px rgb(8 43 82 / 0.25); }

  .btn--navy { --btn-bg: var(--igor-navy); --btn-fg: var(--igor-white); }
  .btn--navy:hover:not(:disabled) { box-shadow: 0 8px 20px rgb(8 43 82 / 0.25); translate: 0 -1px; }

  .btn--ghost { --btn-bd: var(--igor-navy); --btn-fg: var(--igor-navy); }
  .btn--ghost:hover { --btn-bg: var(--igor-navy); --btn-fg: var(--igor-white); }

  .btn--light { --btn-bg: var(--igor-white); --btn-fg: var(--igor-navy); }
  .btn--light:hover { box-shadow: 0 0 0 4px rgb(255 255 255 / 0.3); }

  .btn--wa { --btn-bd: var(--igor-wa); --btn-fg: var(--igor-navy); --btn-bg: var(--igor-white); }
  .btn--wa .icon { color: var(--igor-blue); }
  .btn--wa:hover { --btn-bg: var(--igor-wa); --btn-fg: var(--igor-navy); }
  .btn--wa:hover .icon { color: var(--igor-navy); }

  .btn--text { --btn-fg: var(--igor-blue); padding-inline: 0.5rem; min-height: 44px; }
  .btn--text:hover { --btn-fg: var(--igor-navy); text-decoration: underline; }

  .btn--sm { min-height: 40px; padding: 0.375rem 1rem; font-size: var(--fs-14); }
  .btn--block { width: 100%; }

  .btn.is-done { --btn-bg: var(--igor-navy); --btn-fg: var(--igor-white); }
  .btn .icon { width: 1.2em; height: 1.2em; }

  /* ---- Aviso de protótipo ------------------------------------------------ */
  .proto-notice {
    background: var(--igor-gray-100);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-14);
  }
  .proto-notice__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: 0.375rem;
  }
  .proto-notice__inner p { display: flex; gap: 0.5rem; align-items: center; max-width: none; }
  .proto-notice .icon { color: var(--igor-blue); }
  .proto-notice button {
    min-height: 36px;
    padding-inline: 0.625rem;
    border-radius: var(--radius-xs);
    color: var(--igor-blue);
    font-weight: 650;
  }

  /* ---- Cabeçalho --------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--color-border);
  }
  @supports (animation-timeline: scroll()) {
    .site-header {
      border-bottom-color: transparent;
      animation: header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 96px;
    }
  }
  @keyframes header-settle {
    to { border-bottom-color: var(--igor-gray-300); box-shadow: 0 6px 24px rgb(8 43 82 / 0.07); }
  }

  .site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
  /* O arquivo do logo tem letras brancas: sempre sobre o selo azul-marinho */
  .logo-badge {
    display: inline-grid;
    place-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background: transparent;
  }
  .logo-badge img { width: auto; height: var(--logo-h, 46px); }
  .brand { flex: none; transition: scale var(--dur-fast) var(--ease-out); }
  .brand:hover { scale: 1.03; }

  .main-nav { margin-left: auto; }
  .main-nav__list { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
  .main-nav__item { position: relative; }
  .main-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
    color: var(--color-heading);
    font-size: var(--fs-16);
    font-weight: 600;
    text-decoration: none;
  }
  .main-nav__link::after {
    content: "";
    position: absolute;
    inset: auto 0 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--igor-blue);
    scale: 0 1;
    transition: scale var(--dur-base) var(--ease-out);
  }
  .main-nav__link:hover::after,
  .main-nav__link[aria-current="page"]::after,
  .main-nav__toggle[aria-expanded="true"]::after { scale: 1 1; }
  .main-nav__toggle .icon { width: 1rem; height: 1rem; transition: rotate var(--dur-base) var(--ease-out); }
  .main-nav__toggle[aria-expanded="true"] .icon { rotate: 180deg; }

  /* Painéis suspensos do cabeçalho (Destinos e idioma) */
  @keyframes menu-in { from { opacity: 0; translate: 0 -0.25rem; } }
  .menu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    z-index: 60;
    min-width: 12rem;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--igor-white);
    box-shadow: var(--shadow-lift);
    list-style: none;
    animation: menu-in var(--dur-base) var(--ease-out);
  }
  .menu-panel[hidden] { display: none; }
  .menu-panel ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .menu-panel li { max-width: none; }
  .menu-panel a,
  .menu-panel__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 40px;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .menu-panel a:hover { background: var(--igor-gray-100); color: var(--igor-blue); }
  .menu-panel--destinos { left: -1rem; display: grid; grid-template-columns: repeat(2, minmax(11rem, 1fr)); gap: var(--space-2) var(--space-4); }
  .menu-panel__label { margin: 0 0 0.25rem; padding-inline: 0.625rem; color: var(--color-text-muted); font-size: var(--fs-14); font-weight: 600; }
  .menu-panel .menu-panel__all { grid-column: 1 / -1; margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border); border-radius: 0; color: var(--igor-blue); }

  .lang-menu { position: relative; }
  .icon-btn.lang-menu__toggle { display: inline-flex; align-items: center; gap: 0.125rem; width: auto; padding-inline: 0.5rem; }
  .lang-menu__toggle .icon + .icon { width: 1rem; height: 1rem; }
  .menu-panel--lang { right: 0; min-width: 12rem; }
  .menu-panel__option.is-current .icon { width: 1.125rem; height: 1.125rem; color: var(--igor-green); }
  .menu-panel__option.is-soon { color: var(--color-text-muted); font-weight: 500; }
  .menu-panel__option small { font-size: var(--fs-12); }

  .header-actions { display: flex; align-items: center; gap: var(--space-1); }
  .icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-heading);
    text-decoration: none;
    transition: background-color var(--dur-fast) ease;
  }
  .icon-btn:hover { background: var(--igor-gray-100); color: var(--color-heading); }
  .icon-btn .icon { width: 24px; height: 24px; }

  .nav-toggle { display: none; }

  @media (max-width: 1040px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-grid; }
    .header-actions { margin-left: auto; }
  }
  /* Em telas estreitas o idioma fica no menu lateral */
  @media (max-width: 480px) {
    .lang-menu { display: none; }
  }

  .nav-sheet {
    margin: 0 0 0 auto;
    width: min(22rem, 88vw);
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    padding: var(--space-5);
    border: 0;
    background: var(--igor-white);
    color: var(--color-text);
  }
  .nav-sheet::backdrop { background: rgb(8 43 82 / 0.45); }
  .nav-sheet[open] { animation: sheet-in var(--dur-slow) var(--ease-out); }
  @keyframes sheet-in { from { translate: 100% 0; } }
  .nav-sheet__head { display: flex; align-items: center; justify-content: space-between; }
  .nav-sheet ul { display: flex; flex-direction: column; margin: var(--space-1) 0 var(--space-4); padding: 0; list-style: none; }
  .nav-sheet__label { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--fs-14); font-weight: 600; }
  .nav-sheet__lang { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-14); }
  .nav-sheet li { max-width: none; }
  .nav-sheet a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--fs-24);
    font-weight: 700;
    text-decoration: none;
  }

  /* ---- Migalhas ---------------------------------------------------------- */
  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-14);
    color: var(--color-text-muted);
  }
  .breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
  .breadcrumb li + li::before { content: "/"; color: var(--igor-gray-400); }
  .breadcrumb a { color: var(--color-text-muted); }
  .breadcrumb a:hover { color: var(--color-heading); }
  .breadcrumb [aria-current="page"] { color: var(--color-text); }

  /* ---- Selos, chips e pílulas ------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    font-weight: 700;
    line-height: 1.2;
  }
  .badge--mais-vendido { background: var(--igor-navy); color: var(--igor-white); }
  .badge--imperdivel { background: var(--igor-cyan); color: var(--igor-navy); }
  .badge--desconto-progressivo { background: var(--igor-lime); color: var(--igor-navy); }
  .badge--season { background: var(--igor-gray-200); color: var(--igor-navy); }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 40px;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--igor-gray-600);
    border-radius: var(--radius-pill);
    color: var(--color-heading);
    font-size: var(--fs-14);
    font-weight: 600;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  }
  .chip:hover { background: var(--igor-gray-100); }
  .chip[aria-pressed="true"] { background: var(--igor-navy); border-color: var(--igor-navy); color: var(--igor-white); }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-pill);
    color: var(--igor-navy);
    font-size: var(--fs-12);
    font-weight: 700;
    white-space: nowrap;
  }
  .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .pill--pago { background: var(--status-paid-bg); }
  .pill--pago::before { background: var(--igor-green); }
  .pill--pendente { background: var(--status-pending-bg); }
  .pill--pendente::before { background: var(--igor-orange); }
  .pill--cancelado { background: var(--status-cancel-bg); color: var(--igor-gray-800); }
  .pill--cancelado::before { background: var(--igor-gray-600); }
  .pill--expirado { background: var(--status-cancel-bg); }
  .pill--expirado::before { background: var(--status-pending-fg); }
  .pill--recusado { background: var(--status-cancel-bg); }
  .pill--recusado::before { background: var(--status-pending-fg); }
  .pill--reembolsado { background: var(--status-cancel-bg); color: var(--igor-gray-800); }
  .pill--reembolsado::before { background: var(--igor-gray-600); }
  .pill--em_disputa, .pill--contestado { background: var(--status-pending-bg); }
  .pill--em_disputa::before, .pill--contestado::before { background: var(--color-error); }
  .pill--sample { background: var(--igor-gray-100); color: var(--igor-gray-600); }
  .pill--sample::before { display: none; }

  /* ---- Abas -------------------------------------------------------------- */
  .tabs {
    position: relative;
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    min-height: 48px;
    padding: 0.5rem 1rem;
    color: var(--color-text-muted);
    font-weight: 650;
    white-space: nowrap;
    transition: color var(--dur-fast) ease;
  }
  .tab:hover, .tab[aria-selected="true"] { color: var(--color-heading); }
  .tab__count { margin-left: 0.375rem; color: var(--color-text-muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
  .tabs__indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--w, 0);
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--igor-green);
    translate: var(--x, 0) 0;
    transition: translate var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
  }

  /* ---- Filtros em pílula e busca do catálogo ------------------------------ */
  .catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); }
  .chip-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3); }
  .catalog-toolbar--start, .catalog-toolbar--start .chip-filters { justify-content: flex-start; }
  .catalog-toolbar--start { margin-bottom: var(--space-6); }
  .chip-filter {
    min-height: 44px;
    padding: 0.5rem 1.375rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--igor-white);
    color: var(--color-heading);
    font-weight: 600;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .chip-filter:hover { border-color: var(--igor-navy); }
  .chip-filter[aria-pressed="true"] { border-color: var(--igor-navy); background: var(--igor-navy); color: var(--igor-white); }
  .search-field { position: relative; display: flex; align-items: center; flex: 1 1 16rem; max-width: 26rem; }
  .search-field .icon { position: absolute; left: 1rem; color: var(--color-text-muted); pointer-events: none; }
  .search-field input {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 1.125rem 0.5rem 2.75rem;
    border: 1.5px solid var(--color-text-muted);
    border-radius: var(--radius-pill);
    background: var(--igor-white);
    color: var(--color-text);
    font: inherit;
  }
  .search-field input:focus-visible { border-color: var(--igor-navy); outline: 3px solid var(--color-focus); outline-offset: 2px; }

  .catalog-home__inner { display: flex; flex-direction: column; gap: var(--space-6); }
  .catalog-home__title { font-size: var(--fs-48); text-align: center; }
  .catalog-home__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--color-text-muted); text-align: center; }
  .catalog-home__empty[hidden] { display: none; }
  .catalog-home__more { display: flex; justify-content: center; max-width: none; margin: 0; }

  /* ---- Card de passeio --------------------------------------------------- */
  .tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-5);
  }
  .tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--igor-white);
    box-shadow: var(--shadow-lift);
    transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .tour-card:hover { translate: 0 -2px; box-shadow: 0 2px 4px rgb(8 43 82 / 0.06), 0 16px 36px rgb(8 43 82 / 0.13); }
  .tour-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--igor-gray-200); }
  .tour-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: scale var(--dur-slow) var(--ease-out); }
  .tour-card:hover .tour-card__media img { scale: 1.04; }
  .tour-card__badges { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.375rem; pointer-events: none; }
  .tour-card__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.94);
    color: var(--igor-navy);
    box-shadow: 0 2px 8px rgb(8 43 82 / 0.2);
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
  }
  .tour-card__nav--prev { left: 0.75rem; }
  .tour-card__nav--next { right: 0.75rem; }
  .tour-card:hover .tour-card__nav, .tour-card__nav:focus-visible { opacity: 1; }
  @media (hover: none) { .tour-card__nav { opacity: 1; } }
  .tour-card__dots { position: absolute; bottom: 0.75rem; left: 50%; z-index: 2; display: flex; gap: 0.375rem; translate: -50% 0; }
  .tour-card__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.6); box-shadow: 0 0 2px rgb(0 0 0 / 0.35); }
  .tour-card__dots span.is-active { background: var(--igor-white); }
  .tour-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); }
  .tour-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--fs-18);
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .tour-card__title a { color: inherit; text-decoration: none; }
  .tour-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .tour-card__title a:focus-visible { outline: none; }
  .tour-card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .tour-card:hover .tour-card__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
  .tour-card__cta { flex: none; width: 100%; white-space: normal; }
  .tour-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--fs-14);
  }
  .tour-card__meta li { display: inline-flex; align-items: center; gap: 0.375rem; }
  .tour-card__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: auto;
  }
  .tour-card__foot .price--end { align-items: flex-start; text-align: left; }

  /* ---- Preço ------------------------------------------------------------- */
  .price { display: flex; flex-direction: column; line-height: 1.25; }
  .price--end { align-items: flex-end; text-align: right; }
  .price__value--ask { font-size: var(--fs-18); }
  .price__from, .price__unit { color: var(--color-text-muted); font-size: var(--fs-12); }
  .price__value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--fs-24);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .price__value::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--color-price-icon);
  }

  /* ---- Formulários ------------------------------------------------------- */
  .field { display: flex; flex-direction: column; gap: 0.375rem; }
  .field > label, .field > .label, legend.label { color: var(--color-heading); font-size: var(--fs-14); font-weight: 650; }
  .field .hint { color: var(--color-text-muted); font-size: var(--fs-14); }
  .input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--igor-gray-600);
    border-radius: var(--radius-sm);
    background: var(--igor-white);
    color: var(--color-text);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  }
  .textarea { min-height: 7.5rem; resize: vertical; }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: none;
    border-color: var(--igor-blue);
    box-shadow: 0 0 0 3px rgb(0 127 224 / 0.35);
  }
  [aria-invalid="true"] { border-color: var(--color-error); }
  .field__error { display: flex; align-items: center; gap: 0.375rem; color: var(--color-error); font-size: var(--fs-14); }
  .field__error:empty { display: none; }

  .check { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--fs-14); }
  .check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--igor-green); }

  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); }
  .form-grid .span-all { grid-column: 1 / -1; }

  fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

  .option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--igor-white);
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
  }
  .option:hover { border-color: var(--igor-navy); }
  .option input { flex: none; width: 20px; height: 20px; accent-color: var(--igor-green); }
  .option:has(input:checked) { border-color: var(--igor-navy); background: var(--igor-gray-100); box-shadow: inset 0 0 0 1px var(--igor-navy); }
  .option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .option:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
  .option__main { display: flex; flex: 1; flex-direction: column; line-height: 1.3; }
  .option__main strong { color: var(--color-heading); }
  .option__main span { color: var(--color-text-muted); font-size: var(--fs-14); }
  .option__aside { color: var(--color-text-muted); font-size: var(--fs-14); text-align: right; }

  /* ---- Contador de pessoas ---------------------------------------------- */
  .stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--color-border);
  }
  .stepper-row:last-child { border-bottom: 0; }
  .stepper-row__label { display: flex; flex-direction: column; line-height: 1.3; }
  .stepper-row__label strong { color: var(--color-heading); }
  .stepper-row__label span { color: var(--color-text-muted); font-size: var(--fs-14); }
  .stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
  .stepper button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--igor-gray-600);
    border-radius: 50%;
    color: var(--color-heading);
    transition: background-color var(--dur-fast), scale var(--dur-fast) var(--ease-out);
  }
  .stepper button:hover:not(:disabled) { background: var(--igor-gray-100); }
  .stepper button:active:not(:disabled) { scale: 0.9; }
  .stepper button:disabled { border-color: var(--color-border); color: var(--igor-gray-400); cursor: not-allowed; }
  .stepper output {
    min-width: 2.25ch;
    color: var(--color-heading);
    font-size: var(--fs-18);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ---- Calendário -------------------------------------------------------- */
  .cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
  .cal__month { color: var(--color-heading); font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; }
  .cal__month::first-letter { text-transform: uppercase; }
  .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cal__dow { padding-block: 0.25rem; color: var(--color-text-muted); font-size: var(--fs-12); font-weight: 650; text-align: center; }
  .cal__day {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--igor-white);
    color: var(--color-heading);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), scale var(--dur-fast) var(--ease-out);
  }
  .cal__day:hover:not(:disabled) { border-color: var(--igor-navy); }
  .cal__day:active:not(:disabled) { scale: 0.92; }
  .cal__day:disabled { border-color: transparent; background: var(--igor-gray-100); color: var(--igor-gray-600); font-weight: 400; cursor: not-allowed; }
  .cal__day.is-soldout { text-decoration: line-through; }
  .cal__day.is-high { box-shadow: inset 0 -3px 0 var(--igor-sky); }
  .cal__day.is-low::after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--igor-orange);
  }
  .cal__day[aria-pressed="true"] { border-color: var(--igor-navy); background: var(--igor-navy); color: var(--igor-white); }
  .cal__pad { visibility: hidden; }
  .cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--fs-12);
  }
  .cal__legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
  .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--color-border); }
  .swatch--low { border: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--igor-orange); }
  .swatch--high { box-shadow: inset 0 -3px 0 var(--igor-sky); }
  .swatch--off { border-color: transparent; background: var(--igor-gray-100); }

  /* ---- Toast ------------------------------------------------------------- */
  .toast-region {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(28rem, calc(100vw - 2rem));
    translate: -50% 0;
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background: var(--igor-navy);
    color: var(--igor-white);
    box-shadow: var(--shadow-pop);
    pointer-events: auto;
    animation: toast-in var(--dur-slow) var(--ease-out);
  }
  .toast .icon { color: var(--igor-lime); }
  .toast a { margin-left: auto; color: var(--igor-white); font-weight: 700; white-space: nowrap; }
  .toast.is-leaving { animation: toast-out 220ms ease-in forwards; }
  @keyframes toast-in { from { opacity: 0; translate: 0 1rem; scale: 0.98; } }
  @keyframes toast-out { to { opacity: 0; translate: 0 0.5rem; } }

  /* ---- Modal ------------------------------------------------------------- */
  .modal {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto; /* o reset zera a margem que centraliza o <dialog> */
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--igor-white);
    color: var(--color-text);
    box-shadow: var(--shadow-pop);
  }
  .modal::backdrop { background: rgb(8 43 82 / 0.5); }
  .modal[open] { animation: modal-in var(--dur-base) var(--ease-out); }
  @keyframes modal-in { from { opacity: 0; scale: 0.96; } }
  .modal__body { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
  .modal__close { position: absolute; top: 0.75rem; right: 0.75rem; }

  /* ---- Perguntas frequentes --------------------------------------------- */
  .faq { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
  .faq details { border-bottom: 1px solid var(--color-border); interpolate-size: allow-keywords; }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 64px;
    padding-block: var(--space-3);
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--fs-18);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .icon { transition: rotate var(--dur-base) var(--ease-out); }
  .faq details[open] summary .icon { rotate: 45deg; }
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  .faq__answer { padding-bottom: var(--space-4); }

  /* ---- Lista de confiança ----------------------------------------------- */
  .trust { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); }
  .trust li { display: flex; align-items: flex-start; gap: 0.625rem; }
  .trust .icon { margin-top: 1px; color: var(--igor-green); }

  /* ---- Notas e estados vazios ------------------------------------------- */
  .note { display: flex; gap: 0.75rem; padding: var(--space-4); border-radius: var(--radius-md); background: var(--igor-gray-100); font-size: var(--fs-14); }
  .note .icon { margin-top: 2px; color: var(--igor-blue); }
  .note--warn { background: var(--status-pending-bg); }
  .note--warn .icon { color: var(--status-pending-fg); }
  .note--error { background: #FBE9EC; color: var(--color-error); }
  .note--error .icon { color: var(--color-error); }
  .note p { max-width: none; }

  .empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; }
  .empty p { color: var(--color-text-muted); }

  /* ---- Rodapé ------------------------------------------------------------ */
  .site-footer { margin-top: auto; background: var(--color-footer); color: var(--color-text); }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-8) var(--space-6);
  }
  .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-14); }
  .site-footer__brand img { width: 128px; height: auto; }
  .site-footer h2 { margin-bottom: var(--space-3); color: var(--color-heading); font-family: var(--font-body); font-size: var(--fs-16); font-weight: 700; letter-spacing: 0; }
  .site-footer ul { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); }
  .site-footer a { color: var(--color-text); text-decoration: none; }
  .site-footer a:hover { color: var(--igor-navy); text-decoration: underline; }
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-top: 1px solid var(--igor-gray-400);
    font-size: var(--fs-14);
  }
  .site-footer__bottom p { max-width: none; }
  .site-footer__seal { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
  .site-footer__seal img { width: 72px; height: 72px; }

  @media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

  /* ---- WhatsApp flutuante ----------------------------------------------- */
  .wa-float {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--igor-green);
    color: var(--igor-white);
    box-shadow: 0 8px 24px rgb(8 43 82 / 0.25);
    transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .wa-float:hover { color: var(--igor-navy); translate: 0 -2px; box-shadow: 0 12px 28px rgb(8 43 82 / 0.3); }
  .wa-float .icon { width: 30px; height: 30px; }
  @media (max-width: 1000px) {
    .has-booking-bar .wa-float,
    .has-booking-bar .toast-region { bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
  }
}

/* Menu de viagens LiveTur: atendimento e navegação por categoria. */
.travel-header { position: relative; background: #082b52; color: #fff; border-bottom: 0; backdrop-filter: none; animation: none; }
.travel-header .site-header__inner { min-height: 88px; gap: 1.5rem; }
.travel-header .brand { margin-right: auto; }
.travel-header .brand img { height: 48px; }
.travel-header .main-nav { margin-left: 0; }
.travel-header .main-nav__list { gap: 1.25rem; }
.travel-header .main-nav__link, .travel-header .header-actions .icon-btn { color: #fff; }
.travel-header .main-nav__link::after { background: #ffc51b; }
.travel-header .menu-panel { color: var(--color-text); }
.travel-header .icon-btn:hover { background: rgb(255 255 255 / .12); }
.travel-header__support { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .875rem; border-radius: .5rem; background: #e6f3f8; color: #082b52; font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.travel-header__support .icon { width: 1.125rem; height: 1.125rem; }
.travel-header__support:hover { background: #ffc51b; }
.travel-categories { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3.5rem); overflow-x: auto; padding-block: .75rem 1.25rem; scrollbar-width: thin; scrollbar-color: #8298ad #082b52; }
.travel-categories__item { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .625rem; min-width: 5.5rem; padding: .25rem .375rem .75rem; color: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: .5rem; }
.travel-categories__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; color: #fff; background: #244667; transition: background .18s, color .18s; }
.travel-categories__icon .icon { width: 1.5rem; height: 1.5rem; }
.travel-categories__item:hover { color: #ffc51b; }
.travel-categories__item:hover .travel-categories__icon { background: #345b7e; }
.travel-categories__item[aria-current="page"] .travel-categories__icon { color: #082b52; background: #ffc51b; }
.travel-categories__item[aria-current="page"]::after { content: ''; position: absolute; height: 3px; border-radius: 3px; background: #ffc51b; left: .375rem; right: .375rem; bottom: 0; }
.travel-categories__item:focus-visible, .travel-header__support:focus-visible { outline: 3px solid #ffc51b; outline-offset: 4px; }
@media (max-width: 1100px) {
 .travel-header .site-header__inner { gap: 1rem; }
 .travel-header .main-nav__list { gap: .875rem; }
 .travel-header__support span { display: none; }
 .travel-header__support { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (max-width: 760px) {
 .travel-header .site-header__inner { min-height: 76px; gap: .625rem; }
 .travel-header .brand img { height: 40px; }
 .travel-header .header-actions { margin-left: 0; }
 .travel-categories { justify-content: flex-start; gap: .5rem; padding-block: .25rem .875rem; }
 .travel-categories__item { min-width: 5rem; font-size: .75rem; }
 .travel-categories__icon { width: 2.75rem; height: 2.75rem; }
 .travel-categories__icon .icon { width: 1.25rem; height: 1.25rem; }
}

/* O painel se ancora ao cabeçalho e permanece dentro da largura da página. */
.travel-header .site-header__inner { position: relative; }
.travel-header .main-nav__item { position: static; }
.travel-header .menu-panel--destinos { left: auto; right: 0; width: min(38rem, 100%); min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 1.25rem; gap: .75rem 1.5rem; max-height: min(75vh, 40rem); overflow-y: auto; }
.travel-header .menu-panel--destinos a { white-space: normal; overflow-wrap: anywhere; font-size: .875rem; }
.travel-header .menu-panel--destinos .menu-panel__label { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #576a7a; }
.travel-header .menu-panel--destinos .menu-panel__label--spaced { margin-top: 1rem; }
.destination-search { display: block; margin: .5rem 0 .75rem; }
.destination-search input { width: 100%; max-width: 100%; min-height: 42px; padding: .5rem .75rem; border: 1px solid #c8d6df; border-radius: .5rem; font: inherit; font-size: .875rem; background: #fff; }
.destination-options { max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .5rem; }
.destination-options .check { align-items: flex-start; line-height: 1.5; font-size: .875rem; }
.destination-options input { flex-shrink: 0; margin-top: .2rem; }
.destination-options [hidden] { display: none; }

.travel-header .logo-badge { background: transparent; }
.nav-sheet__head .logo-badge { background: #082b52; padding: .5rem .75rem; }

/* Acesso da equipe no cabeçalho público. */
.team-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #ffc51b;border-radius:10px;color:#ffc51b;font-size:14px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap}
.team-login:hover{background:#ffc51b;color:#082b52}
.team-login:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:600px){.team-login{font-size:12px;padding:6px 8px;white-space:normal;max-width:80px}}