:root {
    /* ═══ Paleta oficial Omnibees (validada com o design em 01/07/2026) ═══ */

    /* Roxo — pantone 2695C */
    --roxo-base: #2D1A46;   /* Main Purple */
    --roxo-800: #3B2359;    /* interno, entre base e 600 */
    --roxo-600: #4D2D78;    /* Purple Secundary */
    --roxo-400: #6E3FAB;    /* Purple Terciary */
    --roxo-300: #8E52DE;    /* lilás médio */
    --roxo-200: #A35EFF;    /* lilás claro (NOVO — do brand book) */
    --roxo-100: #E4DDEE;    /* tint muito claro */
    --roxo-50:  #F1EEF6;    /* tint quase branco */

    /* Amarelo — pantone 123C · cmyk(0,22,78,0) */
    --amarelo-base: #FFC738;      /* Main Amarelo oficial (hex direto do cmyk/pantone 123C) */
    --amarelo-claro: #FFD145;     /* mais claro que o base */
    --amarelo-medio: #FFDF53;     /* mais claro ainda */
    --amarelo-escuro: #F5AF04;    /* tom orangey (antigo base, agora "escuro" na escala) */
    --amarelo-mais-escuro: #E0AA14; /* tom mais fechado */
    --amarelo-50: #FFF8E5;        /* tint quase branco */

    /* Semânticas */
    --verde: #2E7D32;
    --verde-50: #E8F5E9;
    --vermelho: #C62828;
    --vermelho-50: #FFEBEE;

    /* Escala de cinzas oficial */
    --preto:      #000000;
    --cinza-800:  #262626;   /* Grey 600 */
    --cinza-600:  #3F3F40;   /* Grey 500 */
    --cinza-500:  #727273;   /* Grey 400 */
    --cinza-400:  #A5A4A6;   /* Grey 300 */
    --cinza-200:  #D7D7D9;   /* Grey 200 */
    --cinza-100:  #EFEFF1;   /* Grey 100 */
    --branco:     #FFFFFF;
    --cinza-texto: #727273;
    --cinza-label: #A5A4A6;

    /* Gradientes oficiais */
    --grad-roxo: linear-gradient(135deg, #1A142D, #564293);
    --grad-roxo-rd: radial-gradient(ellipse at center, #7A59DF, #47276C);
    --grad-amarelo: linear-gradient(135deg, #FFDF53, #FEC437, #E0AA14);
    --grad-omni: linear-gradient(135deg, #FEC437, #6D3FAB, #2E1A46);
    --shadow-sm: 0 1px 3px rgba(45,26,70,0.08);
    --shadow-md: 0 4px 16px rgba(45,26,70,0.1);
    --shadow-lg: 0 12px 32px rgba(45,26,70,0.15);
    --transition: 0.35s cubic-bezier(0.2, 0, 0, 1);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background: var(--roxo-50);
    color: var(--roxo-base);
    font-weight: 400;
    line-height: 1.5;
  }
  .container { max-width: 1100px; margin: 0 auto; padding: 20px; }

  /* Barra de navegação fixa no topo */
  .nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--roxo-100);
    padding: 12px 0;
    margin-bottom: 24px;
  }
  .nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--roxo-base);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .nav-link {
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--roxo-600);
    text-decoration: none;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
  }
  .nav-link:hover { background: var(--roxo-50); color: var(--roxo-base); }
  .nav-link.active { background: var(--roxo-base); color: #fff; border-bottom: 2px solid var(--amarelo-base); }
  .print-btn {
    background: var(--amarelo-base);
    color: var(--preto);
    border: none;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition);
  }
  .print-btn:hover { background: var(--amarelo-escuro); }
  .estado-selector {
    background: var(--roxo-50);
    color: var(--roxo-base);
    border: 1px solid var(--roxo-100);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232D1A46'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
  }
  .estado-selector:hover { background-color: var(--roxo-100); border-color: var(--roxo-400); }
  .estado-selector:focus { outline: 2px solid var(--roxo-400); outline-offset: 1px; }
  .estado-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--roxo-base); color: #fff;
    padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 500;
    z-index: 9999; box-shadow: var(--shadow-lg);
    animation: toastIn 0.25s ease;
  }
  @keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
  .badge {
    background: var(--amarelo-base);
    color: var(--preto);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
  }
  .badge-year {
    background: var(--amarelo-base);
    color: var(--preto);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
  }

  /* Slides verticais */
  .slide {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid var(--roxo-100);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0, 0, 1);
  }
  .slide.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .slide-num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 10px;
    color: var(--cinza-label);
    letter-spacing: 1px;
    font-weight: 500;
    z-index: 1;
  }
  .slide-inner { padding: 40px 50px; position: relative; }

  h1 { font-weight: 600; margin: 0; letter-spacing: -0.3px; }
  h1.title-lg, h1.title-md { font-family: 'Poppins', sans-serif; }
  h1.title-lg { font-size: 28px; color: var(--roxo-base); font-weight: 800; letter-spacing: -0.5px; }
  h1.title-md { font-size: 22px; color: var(--roxo-base); font-weight: 700; }
  p { margin: 0 0 12px 0; }

  select, button { font-family: inherit; }
  select {
    background: var(--roxo-50);
    color: var(--roxo-base);
    border: 1px solid var(--roxo-base);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
  }

  /* Cards com hover destacado */
  .card-stat {
    background: var(--roxo-50);
    padding: 22px 24px;
    border-radius: 12px;
    border-left: 4px solid var(--roxo-base);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    cursor: default;
  }
  .card-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    background: #fff;
  }
  .card-stat.highlight {
    background: var(--amarelo-50);
    border-left-color: var(--amarelo-base);
    box-shadow: inset 0 3px 0 var(--amarelo-base), var(--shadow-sm);
  }
  .card-stat.highlight:hover { background: #fff; }
  .card-stat .num { font-size: 32px; font-weight: 600; color: var(--roxo-base); letter-spacing: -1px; }
  .card-stat .lbl { font-size: 12px; color: var(--roxo-600); margin-top: 4px; }

  .kpi-card {
    background: var(--roxo-50);
    padding: 26px;
    border-radius: 12px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  }
  .kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    background: #fff;
  }
  .kpi-card.accent {
    background: var(--amarelo-50);
    border: 2px solid var(--amarelo-base);
    border-top: 4px solid var(--amarelo-escuro);
  }
  .kpi-card.accent:hover { background: #fff; }

  .pill-green {
    background: var(--verde);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
  }
  .pill-red {
    background: var(--vermelho);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
  }

  .source { font-size: 10px; color: var(--cinza-label); letter-spacing: 0.3px; margin-top: 14px; }
  .legend-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--roxo-600);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .legend-dot span { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

  /* Conclusão numerada com hover */
  .conclusion-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 14px 18px 14px 16px;
    border-radius: 10px;
    background: #fff;
    border-left: 5px solid var(--roxo-base);
    box-shadow: 0 3px 12px rgba(45,26,70,.05);
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .conclusion-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
  }
  .conclusion-num {
    width: 42px;
    height: 42px;
    background: var(--amarelo-base);
    color: var(--preto);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(255, 199, 56,.22);
  }
  .conclusion-destaque {
    margin-top: 20px;
    background: var(--roxo-base);
    border-radius: 12px;
    padding: 18px 22px;
    color: #fff;
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .conclusion-destaque .cd-emo { font-size: 1.8rem; flex-shrink: 0; }
  .conclusion-destaque .cd-kicker {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amarelo-claro);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .conclusion-destaque p { margin: 0; font-size: 13px; line-height: 1.5; color: #fff; }
  .conclusion-destaque strong { color: var(--amarelo-claro); }

  /* Linhas da tabela de pesquisas com hover */
  .pesq-row {
    display: grid;
    grid-template-columns: 60px 1fr 140px 140px 140px;
    padding: 12px 20px;
    border-bottom: 1px solid #EEE;
    font-size: 12px;
    align-items: center;
    transition: background var(--transition), transform var(--transition);
  }
  .pesq-row:hover {
    background: var(--amarelo-50) !important;
    transform: scale(1.005);
  }

  /* Barras de categoria com hover */
  .cat-row {
    transition: transform var(--transition);
  }
  .cat-row:hover { transform: scale(1.02); }
  .cat-row .bar { transition: filter var(--transition); }
  .cat-row:hover .bar { filter: brightness(1.15); }

  /* Cards de canais/hotdates com hover */
  .mini-card {
    background: var(--roxo-50);
    padding: 14px 16px;
    border-radius: 10px;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  }
  .mini-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background: #fff;
  }
  .hotdate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    transition: background var(--transition);
  }
  .hotdate-row:hover { background: var(--amarelo-50); }
  .hotdate-row + .hotdate-row { margin-top: 2px; }




  /* Slide Somos a Omnibees — composição similar ao PPT */
  .somos-ppt {
    background: var(--grad-amarelo) !important;
    min-height: 600px;
  }
  .somos-ppt .slide-inner {
    padding: 54px 64px 48px;
    min-height: 600px;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
    gap: 34px;
    align-items: center;
  }
  .somos-kicker {
    font-size: 38px;
    letter-spacing: 3px;
    color: #15051F;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 2px;
  }
  .somos-title {
    font-size: 68px;
    line-height: .88;
    color: var(--roxo-base);
    letter-spacing: -3px;
    font-weight: 700;
    margin-bottom: 24px;
  }
  .somos-desc {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(45,26,70,0.88);
    margin-bottom: 42px;
  }
  .somos-desc strong { color: var(--roxo-base); font-weight: 700; }
  .somos-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 42px;
    max-width: 560px;
  }
  .somos-metric {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 14px;
    transition: transform var(--transition), filter var(--transition);
  }
  .somos-metric:hover {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 12px 18px rgba(45,26,70,0.18));
  }
  .somos-icon {
    width: 68px;
    height: 68px;
    color: var(--roxo-base);
    opacity: .9;
  }
  .somos-number {
    font-size: 42px;
    color: var(--roxo-base);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -1.5px;
  }
  .somos-label {
    font-size: 18px;
    color: rgba(45,26,70,0.86);
    line-height: 1.2;
    margin-top: 4px;
  }
  .somos-visual {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .earth-orbit {
    position: absolute;
    right: -38px;
    top: 50%;
    width: 210px;
    height: 310px;
    transform: translateY(-50%);
    border: 2px solid rgba(255,209,69,.42);
    border-left: none;
    border-radius: 0 44px 44px 0;
    opacity: .95;
  }
  .earth-orbit::before,
  .earth-orbit::after {
    content:'';
    position:absolute;
    right: -2px;
    width: 88px;
    height: 88px;
    border: 2px solid rgba(255,209,69,.35);
    border-left: none;
    border-radius: 0 20px 20px 0;
  }
  .earth-orbit::before { top: -86px; }
  .earth-orbit::after { bottom: -86px; }
  .earth-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,26,70,.12) 0%, rgba(45,26,70,.10) 42%, transparent 68%);
    filter: blur(10px);
  }
  .earth-svg {
    position: relative;
    z-index: 2;
    width: min(510px, 100%);
    max-width: 510px;
    height: auto;
    filter: drop-shadow(0 26px 28px rgba(45,26,70,.35));
    transition: transform var(--transition), filter var(--transition);
  }
  .earth-svg:hover {
    transform: translateY(-5px) scale(1.015);
    filter: drop-shadow(0 34px 34px rgba(45,26,70,.42));
  }
  .earth-legend {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 24px;
    font-size: 14px;
    color: var(--roxo-base);
    z-index: 3;
    min-width: 250px;
  }
  .earth-legend span::before {
    content:'';
    display:inline-block;
    width: 8px;
    height: 8px;
    background: var(--roxo-base);
    border-radius: 50%;
    margin-right: 8px;
    transform: translateY(-1px);
  }

  .somos-visual.realistic {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .somos-visual.realistic .real-globe-img {
    position: relative;
    z-index: 2;
    width: min(820px, 100%);
    max-width: 820px;
    height: auto;
    display: block;
    filter: drop-shadow(0 22px 24px rgba(45,26,70,.22));
    transition: transform var(--transition), filter var(--transition);
  }
  .somos-visual.realistic .real-globe-img:hover {
    transform: translateY(-4px) scale(1.01);
    filter: drop-shadow(0 28px 34px rgba(45,26,70,.28));
  }
  .somos-visual.realistic .earth-legend {
    position: absolute;
    left: 52%;
    bottom: 14px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px 24px;
    font-size: 13px;
    color: var(--roxo-base);
    z-index: 3;
    min-width: 260px;
  }
  .somos-visual.realistic .earth-legend span::before {
    content:'';
    display:inline-block;
    width: 8px;
    height: 8px;
    background: var(--roxo-base);
    border-radius: 50%;
    margin-right: 8px;
    transform: translateY(-1px);
  }
  .somos-ppt .slide-inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
  }

  /* Correção do globo realista: somente elemento visual lateral, sem caixa/recorte de slide */
  .somos-visual.realistic {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .somos-visual.realistic .real-globe-img {
    width: min(610px, 112%);
    max-width: none;
    height: auto;
    display: block;
    object-fit: contain;
    border: none;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 22px 24px rgba(45,26,70,.24));
    transform: translateX(12px);
  }
  .somos-visual.realistic .earth-legend {
    position: absolute;
    left: 48%;
    bottom: 18px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--roxo-base);
    z-index: 3;
    min-width: 250px;
  }
  .somos-visual.realistic .earth-legend span::before {
    content:'';
    display:inline-block;
    width: 8px;
    height: 8px;
    background: var(--roxo-base);
    border-radius: 50%;
    margin-right: 8px;
    transform: translateY(-1px);
  }

  @media (max-width: 980px) {
    .somos-visual.realistic { min-height: 420px; }
    .somos-visual.realistic .real-globe-img { width: min(540px, 100%); }
    .somos-visual.realistic .earth-legend {
      left: 50%;
      bottom: 2px;
      font-size: 12px;
    }
    .somos-ppt .slide-inner {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 980px) {
    .somos-ppt .slide-inner {
      grid-template-columns: 1fr;
      padding: 42px 36px;
    }
    .somos-visual {
      min-height: 420px;
    }
    .earth-svg {
      width: min(430px, 100%);
    }
  }
  @media (max-width: 720px) {
    .somos-kicker { font-size: 28px; }
    .somos-title { font-size: 46px; }
    .somos-desc { font-size: 15px; }
    .somos-metrics { grid-template-columns: 1fr; gap: 22px; }
    .somos-ppt .slide-inner { padding: 34px 24px; }
  }

  /* Layout lateral do globo no slide institucional */
  .somos-slide .slide-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: 42px;
    align-items: center;
  }
  .somos-slide .somos-texto { min-width: 0; }
  .somos-slide .somos-globo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
  }
  .somos-slide .globe-wrap {
    width: 340px;
    height: 340px;
    margin: 0;
  }
  @media (max-width: 900px) {
    .somos-slide .slide-inner {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .somos-slide .somos-globo {
      order: -1;
      min-height: auto;
    }
    .somos-slide .globe-wrap {
      width: 280px;
      height: 280px;
    }
  }

  /* Globo institucional Omnibees */
  .globe-wrap {
    position: relative;
    width: 330px;
    height: 330px;
    margin: 0 auto;
    border-radius: 50%;
    background:
      radial-gradient(circle at 34% 28%, rgba(255,255,255,0.95) 0 4%, rgba(255,255,255,0.28) 5% 9%, transparent 10%),
      radial-gradient(circle at 40% 35%, #6E3FAB 0%, #4D2D78 38%, #2D1A46 72%, #120825 100%);
    box-shadow: inset -24px -24px 50px rgba(0,0,0,0.35), 0 22px 55px rgba(45,26,70,0.25);
    overflow: hidden;
    border: 6px solid rgba(255, 199, 56,0.35);
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .globe-wrap:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: inset -24px -24px 50px rgba(0,0,0,0.30), 0 28px 70px rgba(45,26,70,0.35);
  }
  .globe-wrap::before {
    content: '';
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background:
      linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.20) 49%, rgba(255,255,255,0.20) 51%, transparent 52%),
      repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.16) 39px 40px);
    opacity: 0.8;
  }
  .globe-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 68% 38%, rgba(255, 199, 56,0.25), transparent 36%),
      linear-gradient(120deg, transparent 0 50%, rgba(255,255,255,0.08) 51% 70%, transparent 71%);
    pointer-events: none;
  }
  .globe-lat, .globe-meridian {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 50%;
    z-index: 1;
  }
  .globe-lat.lat1 { left: 34px; right: 34px; top: 82px; height: 48px; }
  .globe-lat.lat2 { left: 24px; right: 24px; top: 145px; height: 42px; }
  .globe-lat.lat3 { left: 42px; right: 42px; top: 205px; height: 42px; }
  .globe-meridian.m1 { top: 24px; bottom: 24px; left: 96px; width: 74px; }
  .globe-meridian.m2 { top: 24px; bottom: 24px; right: 96px; width: 74px; }
  .globe-pin {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    background: var(--amarelo-base);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(255, 199, 56,0.18), 0 8px 18px rgba(0,0,0,0.22);
    transform: translate(-50%, -50%);
  }
  .globe-pin::after {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    top: -8px;
    background: rgba(255,255,255,0.92);
    color: var(--roxo-base);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .globe-orbit {
    position: absolute;
    inset: 18px;
    border: 1.5px solid rgba(255, 199, 56,0.55);
    border-radius: 50%;
    transform: rotate(-24deg);
    z-index: 2;
  }
  .globe-orbit::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--amarelo-base);
    border-radius: 50%;
    top: 16px;
    left: 66px;
    box-shadow: 0 0 12px rgba(255, 199, 56,0.9);
  }

  .footer-note {
    margin: 40px 0 20px;
    padding: 14px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    color: var(--roxo-400);
    text-align: center;
    border: 1px solid var(--roxo-100);
  }


  .section-card {
    background: var(--grad-roxo);
    color:#fff;
    min-height:360px;
    display:flex;
    align-items:center;
  }
  .section-card .slide-inner { width:100%; }
  .section-eyebrow { color:var(--amarelo-base); font-size:12px; letter-spacing:2px; font-weight:700; text-transform:uppercase; margin-bottom:8px; }
  .section-title-big { font-size:54px; line-height:.95; letter-spacing:-2px; font-weight:700; text-transform:uppercase; }
  .opp-card { background:#fff; border:1px solid var(--roxo-100); border-radius:14px; padding:18px; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; gap:4px 14px; align-items:start; }
  .opp-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--amarelo-base); }
  .opp-emoji { font-size:28px; margin-bottom:0; line-height:1; grid-column:1; grid-row:1 / span 2; align-self:start; padding-top:2px; }
  .opp-card > strong { grid-column:2; grid-row:1; font-size:17px; line-height:1.3; }
  .opp-card > p { grid-column:2; grid-row:2; margin-top:0 !important; font-size:15px !important; line-height:1.55; }
  .metric-tile { background:var(--roxo-50); border-radius:14px; padding:18px; text-align:center; transition:transform var(--transition), box-shadow var(--transition); }
  .metric-tile:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); background:#fff; }
  .metric-big { font-size:38px; font-weight:700; color:var(--roxo-base); line-height:1; }
  .metric-label { font-size:11px; color:var(--roxo-400); margin-top:6px; text-transform:uppercase; letter-spacing:1px; }
  .simple-bars { display:flex; flex-direction:column; gap:10px; }
  .simple-bar-row { display:grid; grid-template-columns:120px 1fr 58px; align-items:center; gap:10px; font-size:12px; }
  .simple-bar-track { height:12px; background:var(--roxo-50); border-radius:999px; overflow:hidden; }
  .simple-bar-fill { height:100%; background:var(--amarelo-base); border-radius:999px; }
  .otb-table { width:100%; border-collapse:separate; border-spacing:0 7px; font-size:16px; }
  .otb-table th { color:var(--roxo-400); text-align:right; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:6px 8px; }
  .otb-table th:first-child, .otb-table td:first-child { text-align:left; }
  .otb-table td { background:#fff; padding:10px 8px; text-align:right; border-top:1px solid var(--roxo-100); border-bottom:1px solid var(--roxo-100); }
  .otb-table td:first-child { border-left:1px solid var(--roxo-100); border-radius:8px 0 0 8px; font-weight:600; color:var(--roxo-base); }
  .otb-table td:last-child { border-right:1px solid var(--roxo-100); border-radius:0 8px 8px 0; }
  /* linha Total destacada: fundo âmbar + mais peso (o "fechamento" da tabela) */
  .otb-table tr.otb-total td { background:var(--amarelo-50,#FCF3DC); border-top-color:rgba(255, 199, 56,.5); border-bottom-color:rgba(255, 199, 56,.5); font-weight:800; }
  .otb-table tr.otb-total td:first-child { border-left-color:rgba(255, 199, 56,.5); text-transform:uppercase; letter-spacing:.05em; }
  .otb-table tr.otb-total td:last-child { border-right-color:rgba(255, 199, 56,.5); }
  .pos { color:var(--verde); font-weight:700; }
  .neg { color:var(--vermelho); font-weight:700; }

  /* Imprimir */
  @media print {
    .nav-bar, .footer-note { display: none; }
    body { background: #fff; }
    .slide {
      opacity: 1 !important;
      transform: none !important;
      page-break-after: always;
      box-shadow: none;
      border: none;
      margin-bottom: 0;
    }
  }

  @media (max-width: 700px) {
    .slide-inner { padding: 28px 22px; }
    h1.title-lg { font-size: 22px; }
    h1.title-md { font-size: 18px; }
  }

  /* Slide Somos com arte aprovada */
  .full-image-slide {
    background: transparent !important;
  }
  .full-image-slide .slide-inner {
    padding: 14px;
    min-height: 0;
  }
  .full-image-frame {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(45,26,70,0.12);
    background: #f7f5fb;
    position: relative;
  }
  .full-image-frame img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Sobreposição da logo canônica no #s1a — esconde a logo antiga do JPEG e
     padroniza com o resto do relatório (nav-bar, cobranding nos slides). */
  .s1a-logo-fix {
    position: absolute;
    left: 74%; top: 48.5%;
    transform: translate(-50%, -50%);
    width: 7%; aspect-ratio: 1 / 1;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
  }
  .s1a-logo-fix::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle, #FFC738 0%, #FFC738 55%, rgba(255, 199, 56,0) 100%);
    z-index: -1;
    border-radius: 50%;
  }
  .s1a-logo-fix svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 2px 6px rgba(45,26,70,.25));
  }
  .full-image-slide .slide-num {
    z-index: 3;
    color: rgba(45,26,70,0.55);
    top: 22px;
    right: 34px;
  }


  /* Edição de insights */
  .edit-panel {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 999px;
    background: rgba(45,26,70,0.92);
    box-shadow: 0 10px 30px rgba(45,26,70,0.25);
    backdrop-filter: blur(10px);
  }
  .edit-panel button {
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
  }
  .edit-panel button:hover {
    transform: translateY(-1px);
  }
  .edit-panel .edit-toggle {
    background: var(--amarelo-base);
    color: var(--preto);
  }
  .edit-panel .edit-reset {
    background: rgba(255,255,255,.14);
    color: #fff;
  }
  .edit-panel .edit-status {
    color: rgba(255,255,255,.76);
    font-size: 11px;
    padding: 0 6px;
    white-space: nowrap;
  }
  .editable-insight, .editable-field {
    transition: background .2s ease, outline .2s ease, box-shadow .2s ease;
  }

  /* Nível 1 — marcador amarelo nas frases-chave de insights */
  .editable-insight strong,
  .bf-reading-text strong,
  .slide p.editable-field strong {
    background: linear-gradient(to bottom, transparent 58%, rgba(255, 199, 56,0.30) 58%);
    font-weight: 700;
    padding-bottom: 1px;
  }

  body.edit-mode .editable-insight, body.edit-mode .editable-field {
    outline: 1.5px dashed rgba(45,26,70,.45);
    outline-offset: 4px;
    background: rgba(255,255,255,.36);
    border-radius: 8px;
    cursor: text;
    box-shadow: 0 0 0 6px rgba(255, 199, 56,.10);
  }
  body.edit-mode .editable-insight:focus, body.edit-mode .editable-field:focus {
    outline: 2px solid var(--amarelo-base);
    background: rgba(255,255,255,.72);
  }
  @media print {
    .edit-panel { display: none !important; }
    body.edit-mode .editable-insight, body.edit-mode .editable-field {
      outline: none;
      background: transparent;
      box-shadow: none;
    }
  }


  .locked-number {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    font: inherit;
    color: inherit;
  }
  body.edit-mode .locked-number {
    background: rgba(45,26,70,.08);
    border-radius: 4px;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }


  /* PDF / Impressão — versão ajustada */
  @media print {
    @page {
      size: 13.333in 7.5in;
      margin: 0;
    }

    html,
    body {
      width: 13.333in !important;
      height: 7.5in !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #fff !important;
      overflow: visible !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    .nav-bar,
    .footer-note,
    .edit-panel {
      display: none !important;
    }

    .container {
      width: 13.333in !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .slide {
      display: block !important;
      width: 13.333in !important;
      height: 7.5in !important;
      min-height: 7.5in !important;
      max-height: 7.5in !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      opacity: 1 !important;
      transform: none !important;
      page-break-after: always !important;
      break-after: page !important;
      break-inside: avoid !important;
      position: relative !important;
      background-clip: border-box !important;
    }

    .slide:last-of-type {
      page-break-after: auto !important;
      break-after: auto !important;
    }

    .slide-inner {
      padding: 0.42in 0.55in !important;
      width: 100% !important;
      height: 100% !important;
      box-sizing: border-box !important;
      position: relative !important;
    }

    .section-card,
    .section-card .slide-inner {
      min-height: 7.5in !important;
      height: 7.5in !important;
    }

    .full-image-slide .slide-inner {
      padding: 0 !important;
    }

    .full-image-frame {
      width: 13.333in !important;
      height: 7.5in !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    .full-image-frame img {
      width: 13.333in !important;
      height: 7.5in !important;
      object-fit: cover !important;
      display: block !important;
    }

    .slide-num {
      display: none !important;
    }

    canvas {
      max-width: 100% !important;
    }

    .editable-insight,
    .editable-field,
    .locked-number,
    body.edit-mode .editable-insight,
    body.edit-mode .editable-field,
    body.edit-mode .locked-number {
      outline: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-color: inherit !important;
    }

    a {
      color: inherit !important;
      text-decoration: none !important;
    }
  }


  /* Capa premium */
  .cover-premium {
    position: relative;
    padding: 0 !important;
    min-height: 600px;
    border: none;
    background:
      radial-gradient(ellipse at 18% 22%, rgba(254,196,55,0.26), transparent 36%),
      radial-gradient(circle at bottom right, rgba(109,63,171,0.22), transparent 30%),
      linear-gradient(135deg, #1A142D 0%, #2D1A46 55%, #564293 100%);
    box-shadow: 0 28px 64px rgba(27, 15, 45, 0.28);
    overflow: hidden;
    isolation: isolate;
  }
  .cover-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,0.08), transparent 28%, transparent 68%, rgba(255,255,255,0.06));
    pointer-events: none;
    z-index: 0;
  }
  .cover-premium::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
    z-index: 1;
  }
  .cover-slide-num {
    color: rgba(255,255,255,0.72) !important;
    top: 20px;
    right: 22px;
    letter-spacing: 1.5px;
    z-index: 4;
  }
  .cover-shell {
    position: relative;
    z-index: 2;
    padding: 18px;
  }
  .cover-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
      0 18px 48px rgba(19, 10, 34, 0.32),
      inset 0 1px 0 rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
  }
  .cover-image {
    width: 100%;
    display: block;
    height: auto;
    transform: scale(1.01);
    transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1), filter 0.8s ease;
    filter: saturate(1.03) contrast(1.02);
  }
  .cover-premium:hover .cover-image {
    transform: scale(1.025);
    filter: saturate(1.06) contrast(1.04);
  }
  .cover-shine {
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.18) 49%, rgba(255,255,255,0.05) 54%, transparent 62%);
    transform: translateX(-120%) skewX(-18deg);
    animation: coverShimmer 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
  }
  .cover-vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 15% 18%, rgba(255,255,255,0.08), transparent 16%),
      radial-gradient(circle at 82% 18%, rgba(255,209,69,0.14), transparent 18%),
      linear-gradient(to top, rgba(15, 8, 28, 0.22), transparent 32%);
    pointer-events: none;
    z-index: 2;
  }
  .cover-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(28px);
    pointer-events: none;
    opacity: 0.6;
    z-index: 1;
  }
  .cover-glow.glow-a {
    width: 180px;
    height: 180px;
    left: -20px;
    top: -18px;
    background: rgba(255, 199, 56,0.14);
  }
  .cover-glow.glow-b {
    width: 220px;
    height: 220px;
    right: -36px;
    bottom: -40px;
    background: rgba(142,82,222,0.18);
  }
  .cover-caption {
    position: absolute;
    left: 34px;
    bottom: 26px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(19,10,34,0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 24px rgba(19,10,34,0.22);
  }
  .cover-caption-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD145, #FFC738);
    box-shadow: 0 0 0 5px rgba(255, 199, 56,0.16);
    flex: 0 0 auto;
  }
  .cover-caption-text {
    color: rgba(255,255,255,0.95);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }
  .cover-premium .editable-field.is-highlighted {
    outline-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.08);
  }
  @keyframes coverShimmer {
    0%, 82%, 100% { transform: translateX(-120%) skewX(-18deg); }
    18%, 32% { transform: translateX(120%) skewX(-18deg); }
  }
  @media (max-width: 900px) {
    .cover-shell { padding: 12px; }
    .cover-caption { left: 18px; right: 18px; bottom: 16px; }
    .cover-caption-text { font-size: 12px; }
  }
  @media print {
    .cover-shine { animation: none !important; }
    .cover-image { transform: none !important; }
  }


  /* Ajustes estáveis v24 */
  .editor-slide-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .nav-link.is-hidden {
    display: none !important;
  }
  .slide.slide-hidden {
    display: none !important;
  }
  @media print {
    .slide.slide-hidden {
      display: none !important;
      page-break-after: auto !important;
      break-after: auto !important;
    }
  }

  /* Menu reorganizado v25 */
  .nav-inner {
    align-items: flex-start;
  }

  .nav-links {
    gap: 8px;
    row-gap: 8px;
  }

  .nav-group-label {
    align-self: center;
    color: var(--cinza-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 2px 6px 8px;
  }

  .nav-separator {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, rgba(45,26,70,.18), transparent);
    margin: 0 2px;
    align-self: center;
  }

  .nav-link {
    border: 1px solid rgba(45,26,70,0.06);
    background: rgba(255,255,255,0.65);
    white-space: nowrap;
  }

  .nav-link:hover {
    background: var(--roxo-50);
    border-color: rgba(45,26,70,0.12);
    box-shadow: 0 6px 16px rgba(45,26,70,.08);
  }

  .nav-link.active {
    background: var(--roxo-base);
    color: #fff;
    border-color: var(--roxo-base);
    box-shadow: 0 8px 18px rgba(45,26,70,.16);
    border-bottom: 2px solid var(--amarelo-base);
  }

  .print-btn {
    margin-left: 4px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255, 199, 56,.22);
  }

  @media (max-width: 900px) {
    .nav-group-label,
    .nav-separator {
      display: none;
    }
    .nav-links {
      max-height: 120px;
      overflow: auto;
      padding-bottom: 4px;
    }
  }

  @media print {
    .nav-group-label,
    .nav-separator {
      display: none !important;
    }
  }

  /* Menu auto-oculto v26 */
  .nav-bar {
    transition:
      transform 0.32s cubic-bezier(.2,0,0,1),
      opacity 0.24s ease,
      box-shadow 0.24s ease;
    will-change: transform;
  }

  .nav-bar.nav-hidden {
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
  }

  .nav-bar.nav-compact {
    box-shadow: 0 14px 34px rgba(45,26,70,.14);
  }

  .menu-peek-btn {
    position: fixed;
    top: 10px;
    right: 18px;
    z-index: 101;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(45,26,70,.88);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(45,26,70,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      opacity .22s ease,
      transform .22s cubic-bezier(.2,0,0,1),
      background .22s ease;
  }

  .menu-peek-btn:hover {
    background: var(--roxo-base);
  }

  .menu-peek-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Cluster que agrupa Menu + Editar no scroll */
  .peek-cluster {
    position: fixed;
    top: 10px;
    right: 18px;
    z-index: 101;
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .peek-cluster .menu-peek-btn {
    position: static;
  }

  .peek-edit-btn {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(45,26,70,.88);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(45,26,70,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      opacity .22s ease,
      transform .22s cubic-bezier(.2,0,0,1),
      background .22s ease,
      color .22s ease;
  }
  .peek-edit-btn:hover {
    background: var(--roxo-base);
  }
  .peek-edit-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .peek-edit-btn.active {
    background: var(--amarelo-base);
    color: var(--preto);
    border-color: rgba(224,170,20,.5);
  }
  .peek-edit-btn.active:hover {
    background: var(--amarelo-escuro);
  }

  @media print {
    .peek-cluster,
    .menu-peek-btn {
      display: none !important;
    }
  }


/* ===== v31 — slide comportamento final alinhado ao layout aprovado ===== */
#s5.behavior-final {
  background: #fff !important;
  border-radius: 18px;
  overflow: hidden;
  min-height: 640px !important;
}

#s5.behavior-final::before {
  display: none !important;
}

#s5.behavior-final .slide-inner {
  padding: 48px 56px 34px !important;
  min-height: 640px !important;
  box-sizing: border-box;
}

#s5 .bf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 42px;
}

#s5 .bf-title {
  margin: 0;
  color: var(--roxo-base);
  font-size: 31px;
  line-height: 1.08;
  letter-spacing: -0.5px;
  font-weight: 700;
}

#s5 .bf-subtitle {
  margin-top: 10px;
  color: var(--roxo-400);
  font-size: 14px;
  line-height: 1.35;
}

#s5 .bf-year {
  margin-top: 2px;
  background: var(--amarelo-base);
  color: var(--preto);
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(255, 199, 56,.18);
}

#s5 .bf-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 38px;
}

#s5 .bf-metric {
  position: relative;
  padding: 0 34px;
  min-height: 150px;
}

#s5 .bf-metric:first-child {
  padding-left: 0;
}

/* divisor só após os 2 primeiros KPIs. NÃO usar :not(:last-child): o auto-badge é injetado
   como último filho de .bf-metrics, o que faria o 3º KPI (Estadia) ganhar um divisor solto
   à direita, bem em cima do selo "AUTO SQL". */
#s5 .bf-metric:nth-child(-n+2)::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  height: 132px;
  width: 1px;
  background: rgba(45,26,70,.14);
}

#s5 .bf-metric-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

#s5 .bf-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #FFF6E5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--roxo-base);
  flex: 0 0 auto;
}

#s5 .bf-icon-circle svg {
  width: 30px;
  height: 30px;
  stroke: var(--roxo-base);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#s5 .bf-metric-label {
  color: var(--roxo-base);
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
}

#s5 .bf-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: end;
}

#s5 .bf-col-label {
  color: var(--roxo-600);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

#s5 .bf-big-value {
  text-align: center;
  color: var(--roxo-base);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

#s5 .bf-big-value.is-yellow {
  color: var(--amarelo-base);
}

#s5 .bf-delta-pill {
  min-width: 86px;
  height: 36px;
  border-radius: 999px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

#s5 .bf-delta-positive {
  background: #EEF6D9;
  color: #17813A;
}

#s5 .bf-delta-negative {
  background: #FCE4D8;
  color: #C94719;
}

#s5 .bf-reading {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: center;
  background: linear-gradient(180deg, #FFFDF8, #FFFDF8);
  border: 1px solid rgba(255, 199, 56,.22);
  border-radius: 18px;
  padding: 26px 30px;
  margin-top: 10px;
}

#s5 .bf-reading-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid rgba(45,26,70,.14);
  min-height: 98px;
}

#s5 .bf-reading-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFF6E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amarelo-base);
  font-size: 34px;
  font-weight: 700;
}

#s5 .bf-reading-title {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

#s5 .bf-reading-text {
  color: var(--roxo-base);
  font-size: 14px;
  line-height: 1.52;
}

#s5 .bf-reading-text p {
  margin: 0 0 8px 0;
}

#s5 .bf-source {
  margin-top: 24px;
  color: var(--roxo-400);
  font-size: 12px;
  font-weight: 300;
}

@media (max-width: 900px) {
  #s5.behavior-final .slide-inner {
    padding: 34px 28px !important;
  }

  #s5 .bf-metrics {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #s5 .bf-metric {
    padding: 0;
  }

  #s5 .bf-metric:not(:last-child)::after {
    display: none;
  }

  #s5 .bf-reading {
    grid-template-columns: 1fr;
  }

  #s5 .bf-reading-icon-wrap {
    border-right: none;
    border-bottom: 1px solid rgba(45,26,70,.14);
    padding-bottom: 18px;
  }
}


/* ===== v32 — modo relatório web full width ===== */
:root {
  --web-report-max: 1560px;
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 199, 56,.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(45,26,70,.08), transparent 30%),
    #F4F1F8 !important;
}

.container {
  width: min(var(--web-report-max), calc(100vw - 42px)) !important;
  max-width: none !important;
  margin: 18px auto 54px !important;
  padding: 0 !important;
}

.slide {
  margin-bottom: 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 36px rgba(45,26,70,.08) !important;
  border: 1px solid rgba(45,26,70,.08) !important;
}

.slide:not(.section-card):not(.cover-premium):not(.full-image-slide) {
  min-height: auto !important;
}

.slide-inner {
  padding: 44px 58px !important;
}

.section-card {
  min-height: 260px !important;
  border-radius: 18px !important;
}

.section-card .slide-inner {
  min-height: 260px !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-title-big {
  font-size: 46px !important;
}

.cover-premium {
  min-height: auto !important;
}

.cover-shell {
  padding: 14px !important;
}

.cover-image-wrap {
  border-radius: 18px !important;
}

.cover-image {
  width: 100% !important;
  height: auto !important;
}

.full-image-slide {
  min-height: auto !important;
}

.full-image-frame {
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
}

.full-image-frame img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* reduz a sensação de páginas separadas */
.slide + .slide {
  margin-top: 18px !important;
}

/* deixa slides analíticos respirarem melhor na largura total */
:is(#s3, #s2b) .slide-inner,
#s4 .slide-inner,
#s5 .slide-inner,
#s6 .slide-inner,
#s7 .slide-inner,
#s8 .slide-inner,
#s8a .slide-inner,
#s9 .slide-inner,
#s9a .slide-inner,
#s10 .slide-inner,
#s12 .slide-inner {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

/* evita cards enormes demais quando a tela é muito larga */
@media (min-width: 1400px) {
  .slide-inner {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }

  h1.title-lg {
    font-size: 34px !important;
  }

  h1.title-md {
    font-size: 27px !important;
  }
}

/* adaptação do slide comportamento para tela cheia */
#s5.behavior-final {
  min-height: auto !important;
}

#s5.behavior-final .slide-inner {
  min-height: auto !important;
}

#s5 .bf-metrics {
  margin-bottom: 32px !important;
}

#s5 .bf-reading {
  margin-top: 0 !important;
}

/* menu fica mais compacto no modo web */
.nav-bar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-inner {
  width: min(var(--web-report-max), calc(100vw - 42px)) !important;
  max-width: none !important;
}

.nav-links {
  gap: 7px !important;
}

.nav-link {
  padding: 7px 12px !important;
}

@media (max-width: 900px) {
  .container {
    width: calc(100vw - 20px) !important;
    margin-top: 10px !important;
  }

  .slide-inner {
    padding: 28px 22px !important;
  }

  :is(#s3, #s2b) .slide-inner,
  #s4 .slide-inner,
  #s5 .slide-inner,
  #s6 .slide-inner,
  #s7 .slide-inner,
  #s8 .slide-inner,
  #s8a .slide-inner,
  #s9 .slide-inner,
  #s9a .slide-inner,
  #s10 .slide-inner,
  #s12 .slide-inner {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* preserva o PDF em formato apresentação */
@media print {
  .container {
    width: 13.333in !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .slide {
    width: 13.333in !important;
    height: 7.5in !important;
    min-height: 7.5in !important;
    max-height: 7.5in !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .slide-inner {
    padding: 0.42in 0.55in !important;
  }

  .section-card,
  .section-card .slide-inner {
    min-height: 7.5in !important;
    height: 7.5in !important;
  }
}


/* ===== v33 — Web Mode / relatório contínuo ===== */
body.web-mode {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 199, 56,.08), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(110,63,171,.10), transparent 30%),
    linear-gradient(180deg, #FAF8FD 0%, #F4F1F8 38%, #FBFAFD 100%) !important;
}

/* deixa o relatório parecer página web, não PPT */
body.web-mode .container {
  width: min(1540px, calc(100vw - 56px)) !important;
  max-width: none !important;
  margin: 10px auto 80px !important;
  padding: 0 !important;
}

/* remove a sensação de folha/slide */
body.web-mode .slide {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 0 46px 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner {
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(45,26,70,.08);
  border-radius: 26px;
  box-shadow: 0 18px 42px rgba(45,26,70,.07);
  padding: 48px 62px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* números de página somem no modo web */
body.web-mode .slide-num {
  display: none !important;
}

/* capa vira hero */
body.web-mode .cover-premium {
  background: transparent !important;
  margin-bottom: 48px !important;
}

body.web-mode .cover-premium::before,
body.web-mode .cover-premium::after {
  display: none !important;
}

body.web-mode .cover-shell {
  padding: 0 !important;
}

body.web-mode .cover-image-wrap {
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 30px 70px rgba(45,26,70,.18) !important;
  overflow: hidden !important;
}

body.web-mode .cover-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* slides de imagem cheia ficam como banners, não páginas */
body.web-mode .full-image-slide .slide-inner {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.web-mode .full-image-frame {
  border-radius: 30px !important;
  box-shadow: 0 26px 64px rgba(45,26,70,.14) !important;
  border: 1px solid rgba(45,26,70,.08);
  overflow: hidden;
}

body.web-mode .full-image-frame img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* seções viram faixas editoriais */
body.web-mode .section-card {
  min-height: 180px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(254,196,55,.24), transparent 32%),
    var(--grad-roxo) !important;
  box-shadow: 0 20px 46px rgba(45,26,70,.14) !important;
  margin: 56px 0 38px !important;
  overflow: hidden !important;
  color: #fff !important;
}

body.web-mode .section-card .slide-inner {
  min-height: 180px !important;
  height: auto !important;
  padding: 40px 56px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.web-mode .section-title-big {
  font-size: 42px !important;
  line-height: .98 !important;
  max-width: 900px;
}

body.web-mode .section-eyebrow {
  color: var(--amarelo-base) !important;
}

/* títulos ficam mais editoriais */
body.web-mode h1.title-lg,
body.web-mode h1.title-md {
  font-size: clamp(26px, 2vw, 34px) !important;
  letter-spacing: -0.6px;
}

body.web-mode .source,
body.web-mode .bf-source {
  opacity: .78;
}

/* menu: menos botão de PPT, mais navegação de web */
body.web-mode .nav-bar {
  /* dark nav — sobrescrito pelo bloco "Nav premium escuro" no final do style */
  margin-bottom: 0 !important;
}

body.web-mode .nav-inner {
  width: min(1540px, calc(100vw - 56px)) !important;
  max-width: none !important;
}

body.web-mode .nav-brand span {
  letter-spacing: .2px;
}

body.web-mode .nav-group-label {
  opacity: .7;
}

body.web-mode .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
}

body.web-mode .nav-link:hover {
  background: rgba(45,26,70,.06) !important;
}

body.web-mode .nav-link.active {
  background: var(--roxo-base) !important;
  color: #fff !important;
  border-bottom: 2px solid var(--amarelo-base) !important;
}

/* mais largura para grids analíticos no modo web */
body.web-mode :is(#s3, #s2b) .slide-inner,
body.web-mode #s4 .slide-inner,
body.web-mode #s5 .slide-inner,
body.web-mode #s6 .slide-inner,
body.web-mode #s7 .slide-inner,
body.web-mode #s8 .slide-inner,
body.web-mode #s8a .slide-inner,
body.web-mode #s9 .slide-inner,
body.web-mode #s9a .slide-inner,
body.web-mode #s10 .slide-inner,
body.web-mode #s12 .slide-inner {
  padding-left: 66px !important;
  padding-right: 66px !important;
}

/* preserva o slide comportamento aprovado */
body.web-mode #s5.behavior-final .slide-inner {
  background: transparent;
}

/* em telas menores, conserva leitura */
@media (max-width: 900px) {
  body.web-mode .container,
  body.web-mode .nav-inner {
    width: calc(100vw - 22px) !important;
  }

  body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner {
    padding: 30px 22px !important;
    border-radius: 22px;
  }

  body.web-mode .section-card .slide-inner {
    padding: 32px 26px !important;
  }

}

/* PDF continua com cara de apresentação */
@media print {
  body.web-mode .slide-num {
    display: none !important;
  }

  body.web-mode .container {
    width: 13.333in !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.web-mode .slide {
    display: block !important;
    width: 13.333in !important;
    height: 7.5in !important;
    min-height: 7.5in !important;
    max-height: 7.5in !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    page-break-after: always !important;
    break-after: page !important;
    background: #fff !important;
  }

  body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner,
  body.web-mode .slide-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.42in 0.55in !important;
  }
}

/* ===== v34 — reduzir espaçamento vertical no modo web ===== */
body.web-mode .slide {
  margin-bottom: 18px !important;
}

body.web-mode .cover-premium {
  margin-bottom: 18px !important;
}

body.web-mode .full-image-slide {
  margin-bottom: 18px !important;
}

body.web-mode .section-card {
  margin: 26px 0 18px !important;
}

body.web-mode .slide + .slide {
  margin-top: 0 !important;
}

body.web-mode .container {
  margin-top: 14px !important;
}

/* deixa a transição entre imagens/seções mais contínua */
body.web-mode .cover-image-wrap,
body.web-mode .full-image-frame,
body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner {
  box-shadow: 0 14px 34px rgba(45,26,70,.06) !important;
}


/* ===== v36 — web mode equilibrado ===== */

/* Fundo mais contínuo, menos “slides sobre fundo lilás” */
body.web-mode {
  background:
    radial-gradient(circle at 8% 2%, rgba(255, 199, 56,.06), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(45,26,70,.07), transparent 26%),
    linear-gradient(180deg, #FBFAFD 0%, #F7F4FA 42%, #FBFAFD 100%) !important;
}

/* Mantém leitura, mas reduz efeito PPT */
body.web-mode .container {
  width: min(1520px, calc(100vw - 56px)) !important;
  margin: 12px auto 64px !important;
}

/* Blocos com menos sombra, menos borda e menos raio */
body.web-mode .slide {
  margin: 0 0 12px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(45,26,70,.055) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(45,26,70,.035) !important;
  padding: 44px 58px !important;
}

/* Capa como banner mais enxuto no modo web */
body.web-mode .cover-premium {
  margin-bottom: 12px !important;
}

body.web-mode .cover-shell {
  padding: 0 !important;
}

body.web-mode .cover-image-wrap {
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.08) !important;
}

body.web-mode .cover-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Slides de imagem/institucionais como banners, não folhas */
body.web-mode .full-image-frame {
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(45,26,70,.06) !important;
  border: 1px solid rgba(45,26,70,.05) !important;
}

body.web-mode .full-image-frame img {
  display: block !important;
}

/* Capa de seção em altura fixa de 600px (estilo capa cheia) */
body.web-mode .section-card {
  height: 600px !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  margin: 18px 0 12px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(45,26,70,.075) !important;
  background:
    radial-gradient(circle at 8% 30%, rgba(255, 199, 56,.18), transparent 26%),
    linear-gradient(135deg, var(--roxo-base), var(--roxo-600)) !important;
}

body.web-mode .section-card .slide-inner {
  height: 100% !important;
  min-height: 0 !important;
  padding: 64px 80px !important;
  justify-content: center !important;
}

/* Tipografia da capa 600px */
body.web-mode .section-card .section-eyebrow {
  font-size: 26px !important;
  letter-spacing: 4.5px !important;
  margin-bottom: 20px !important;
}

body.web-mode .section-card .section-title-big {
  font-size: 84px !important;
  letter-spacing: -1px !important;
  line-height: 1.02 !important;
}

body.web-mode .section-title-big {
  font-size: 36px !important;
  line-height: 1.02 !important;
  letter-spacing: -1px !important;
}

body.web-mode .section-eyebrow {
  font-size: 11px !important;
  margin-bottom: 8px !important;
}

/* Remove número de página no modo web */
body.web-mode .slide-num {
  display: none !important;
}

/* Títulos mais editoriais, menos “slide title” */
body.web-mode h1.title-lg,
body.web-mode h1.title-md {
  font-size: clamp(25px, 1.8vw, 31px) !important;
  letter-spacing: -0.5px !important;
}

body.web-mode h1.title-lg::after,
body.web-mode h1.title-md::after,
body.web-mode h2::after {
  width: 54px !important;
  height: 2px !important;
}

/* Menu superior mais compacto */
body.web-mode .nav-bar {
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 8px 22px rgba(45,26,70,.06) !important;
}

body.web-mode .nav-inner {
  width: min(1520px, calc(100vw - 56px)) !important;
  padding: 10px 0 !important;
}

body.web-mode .nav-brand span {
  font-size: 13px !important;
}

body.web-mode .nav-links {
  gap: 6px !important;
  row-gap: 6px !important;
}

body.web-mode .nav-link {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

body.web-mode .nav-group-label {
  font-size: 8px !important;
  padding-left: 4px !important;
}

body.web-mode .print-btn {
  padding: 7px 12px !important;
}

/* Mais continuidade visual */
body.web-mode .slide + .slide {
  margin-top: 0 !important;
}

/* Ajustes específicos do comportamento final aprovado */
body.web-mode #s5.behavior-final .slide-inner {
  background: transparent !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Em mobile, mantém legibilidade */
@media (max-width: 900px) {
  body.web-mode .container,
  body.web-mode .nav-inner {
    width: calc(100vw - 20px) !important;
  }

  body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner {
    padding: 28px 22px !important;
  }

  body.web-mode .section-card .slide-inner {
    padding: 28px 24px !important;
  }
}

/* PDF permanece preservado */
@media print {
  body.web-mode .slide {
    margin: 0 !important;
  }
}



/* ===== v37 — menu dropdown + temas de cor ===== */

/* estrutura nova do menu */
body.web-mode .nav-links {
  align-items: center !important;
  gap: 8px !important;
  row-gap: 8px !important;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-group-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--roxo-base);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 15px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.nav-group-btn:hover,
.nav-dropdown:hover .nav-group-btn,
.nav-dropdown.is-open .nav-group-btn {
  background: rgba(45,26,70,.07);
  color: var(--roxo-600);
}

.nav-dropdown.is-active .nav-group-btn {
  color: var(--roxo-600);
  background: rgba(45,26,70,.08);
  box-shadow: inset 0 -2px 0 var(--amarelo-base);
}

.nav-caret {
  font-size: 14px;
  opacity: .85;
  transform: translateY(-1px);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 238px;
  padding: 12px;
  border-radius: 16px;
  background: var(--menu-dd-bg, rgba(255,255,255,.98));
  border: 1px solid var(--menu-dd-border, rgba(45,26,70,.09));
  box-shadow: 0 22px 44px rgba(45,26,70,.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 120;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--menu-dd-bg, rgba(255,255,255,.98));
  border-left: 1px solid var(--menu-dd-border, rgba(45,26,70,.09));
  border-top: 1px solid var(--menu-dd-border, rgba(45,26,70,.09));
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--menu-dd-text, var(--roxo-base)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
}

.nav-dropdown-item:hover,
.nav-dropdown-item.active {
  background: var(--menu-dd-hover, rgba(45,26,70,.07)) !important;
  color: var(--menu-dd-text-active, var(--roxo-600)) !important;
}

.nav-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--menu-icon-color, var(--roxo-600));
  background: var(--menu-icon-bg, rgba(45,26,70,.07));
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.theme-toggle-btn {
  border: 1px solid rgba(45,26,70,.13);
  background: rgba(255,255,255,.72);
  color: var(--roxo-base);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.theme-toggle-btn:hover {
  background: rgba(45,26,70,.07);
  box-shadow: 0 8px 18px rgba(45,26,70,.08);
}

/* Tema 1 — Brand Classic */
body[data-menu-theme="classic"] {
  --menu-bg: rgba(255,255,255,.90);
  --menu-text: var(--roxo-base);
  --menu-active: var(--roxo-600);
  --menu-dd-bg: rgba(255,255,255,.98);
  --menu-dd-border: rgba(45,26,70,.10);
  --menu-dd-text: var(--roxo-base);
  --menu-dd-text-active: var(--roxo-600);
  --menu-dd-hover: rgba(45,26,70,.07);
  --menu-icon-bg: rgba(45,26,70,.07);
  --menu-icon-color: var(--roxo-600);
}

/* Tema 2 — Premium Dark */
body[data-menu-theme="dark"] {
  --menu-bg: rgba(22,14,34,.94);
  --menu-text: rgba(255,255,255,.78);
  --menu-active: #FFC738;
  --menu-dd-bg: rgba(24,17,36,.98);
  --menu-dd-border: rgba(255, 199, 56,.22);
  --menu-dd-text: rgba(255,255,255,.84);
  --menu-dd-text-active: #FFC738;
  --menu-dd-hover: rgba(255, 199, 56,.10);
  --menu-icon-bg: rgba(255, 199, 56,.12);
  --menu-icon-color: #FFC738;
}

/* Tema 3 — Soft Lavender */
body[data-menu-theme="lavender"] {
  --menu-bg: rgba(250,246,255,.92);
  --menu-text: #5B3A86;
  --menu-active: #6D45A8;
  --menu-dd-bg: rgba(250,246,255,.98);
  --menu-dd-border: rgba(109,69,168,.14);
  --menu-dd-text: #5B3A86;
  --menu-dd-text-active: #6D45A8;
  --menu-dd-hover: rgba(109,69,168,.09);
  --menu-icon-bg: rgba(109,69,168,.10);
  --menu-icon-color: #6D45A8;
}

/* Tema 4 — Modern Neutral */
body[data-menu-theme="neutral"] {
  --menu-bg: rgba(244,242,239,.92);
  --menu-text: #3C3448;
  --menu-active: #2D1A46;
  --menu-dd-bg: rgba(255,255,255,.98);
  --menu-dd-border: rgba(60,52,72,.12);
  --menu-dd-text: #3C3448;
  --menu-dd-text-active: #2D1A46;
  --menu-dd-hover: rgba(60,52,72,.07);
  --menu-icon-bg: rgba(60,52,72,.08);
  --menu-icon-color: #2D1A46;
}

/* aplica variáveis de tema no nav */
body.web-mode .nav-bar,
.nav-bar {
  background: var(--menu-bg, rgba(255,255,255,.90)) !important;
  color: var(--menu-text, var(--roxo-base)) !important;
}

.nav-group-btn {
  color: var(--menu-text, var(--roxo-base)) !important;
}

.nav-group-btn:hover,
.nav-dropdown:hover .nav-group-btn,
.nav-dropdown.is-open .nav-group-btn,
.nav-dropdown.is-active .nav-group-btn {
  color: var(--menu-active, var(--roxo-600)) !important;
}

.nav-dropdown.is-active .nav-group-btn {
  box-shadow: inset 0 -2px 0 var(--amarelo-base);
}

body[data-menu-theme="dark"] .nav-bar {
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 34px rgba(12,8,20,.26) !important;
}

body[data-menu-theme="dark"] .nav-brand span,
body[data-menu-theme="dark"] .theme-toggle-btn {
  color: rgba(255,255,255,.88) !important;
}

body[data-menu-theme="dark"] .theme-toggle-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

body[data-menu-theme="dark"] .nav-separator {
  background: rgba(255,255,255,.12) !important;
}

/* esconde labels antigos, caso existam por cache */
.nav-group-label,
.nav-separator {
  display: none !important;
}

/* ajustes mobile */
@media (max-width: 900px) {
  body.web-mode .nav-links {
    overflow: visible !important;
    max-height: none !important;
  }

  .nav-dropdown-menu {
    left: auto;
    right: 0;
    transform: translateY(8px);
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    transform: translateY(0);
  }

  .nav-dropdown-menu::before {
    left: auto;
    right: 26px;
    transform: rotate(45deg);
  }
}

@media print {
  .theme-toggle-btn {
    display: none !important;
  }
}

/* ===== v38 — refinamento do header/menu ===== */

/* marca/título maior e mais presente */
.nav-brand {
  gap: 12px !important;
}

.nav-brand span {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  color: var(--menu-text, var(--roxo-base)) !important;
}

.nav-brand svg:not(.nav-logo-hex),
.nav-brand img {
  width: 24px !important;
  height: 24px !important;
}

/* botões do menu mais premium */
.nav-group-btn {
  position: relative;
  min-height: 38px;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05px;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* remove o caractere antigo da seta */
.nav-caret {
  font-size: 0 !important;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  opacity: .82;
}

/* cria chevron limpo */
.nav-caret::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.nav-dropdown:hover .nav-caret::before,
.nav-dropdown:focus-within .nav-caret::before,
.nav-dropdown.is-open .nav-caret::before {
  transform: rotate(225deg) translateY(-1px);
}

/* estado hover/ativo dos grupos */
.nav-group-btn:hover,
.nav-dropdown:hover .nav-group-btn,
.nav-dropdown.is-open .nav-group-btn {
  background: rgba(45,26,70,.055) !important;
  border-color: rgba(45,26,70,.07) !important;
}

.nav-dropdown.is-active .nav-group-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.62)) !important;
  border: 1px solid rgba(45,26,70,.10) !important;
  color: var(--menu-active, var(--roxo-600)) !important;
  box-shadow:
    inset 0 -2px 0 var(--amarelo-base),
    0 8px 18px rgba(45,26,70,.055) !important;
}

/* dropdown mais alinhado ao botão */
.nav-dropdown-menu {
  top: calc(100% + 12px) !important;
}

/* botão de cor mais discreto e com cara de ação */
.theme-toggle-btn {
  min-height: 36px;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(45,26,70,.12) !important;
  background: rgba(255,255,255,.74) !important;
  color: var(--menu-text, var(--roxo-base)) !important;
  box-shadow: 0 7px 16px rgba(45,26,70,.045) !important;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  background: rgba(45,26,70,.06) !important;
}

/* botão PDF mais consistente */
.print-btn {
  min-height: 38px !important;
  padding: 10px 16px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1px;
  box-shadow: 0 9px 20px rgba(255, 199, 56,.22) !important;
}

/* espaçamento melhor entre grupos */
body.web-mode .nav-links,
.nav-links {
  gap: 10px !important;
}

/* tema dark: adapta os novos botões */
body[data-menu-theme="dark"] .nav-dropdown.is-active .nav-group-btn {
  background: rgba(255, 199, 56,.10) !important;
  border-color: rgba(255, 199, 56,.22) !important;
  box-shadow:
    inset 0 -2px 0 var(--amarelo-base),
    0 8px 18px rgba(0,0,0,.16) !important;
}

body[data-menu-theme="dark"] .nav-group-btn:hover,
body[data-menu-theme="dark"] .nav-dropdown:hover .nav-group-btn,
body[data-menu-theme="dark"] .nav-dropdown.is-open .nav-group-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* responsivo */
@media (max-width: 900px) {
  .nav-brand span {
    font-size: 14px !important;
  }

  .nav-brand svg,
  .nav-brand img {
    width: 21px !important;
    height: 21px !important;
  }

  .nav-group-btn {
    padding: 9px 13px !important;
    font-size: 12.5px !important;
  }
}


/* ===== v39 — refinamento forçado do menu ===== */

/* Header mais alto e com presença */
body.web-mode .nav-bar,
.nav-bar {
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
}

body.web-mode .nav-inner,
.nav-inner {
  min-height: 78px !important;
  padding: 14px 0 !important;
  align-items: center !important;
}

/* Marca bem maior */
body.web-mode .nav-brand,
.nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 330px !important;
}

body.web-mode .nav-brand span,
.nav-brand span {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .25px !important;
  color: var(--menu-text, var(--roxo-base)) !important;
}

body.web-mode .nav-brand svg:not(.nav-logo-hex),
body.web-mode .nav-brand img,
.nav-brand svg:not(.nav-logo-hex),
.nav-brand img {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

/* Menu com botões mais encorpados */
body.web-mode .nav-links,
.nav-links {
  gap: 14px !important;
  align-items: center !important;
}

body.web-mode .nav-group-btn,
.nav-group-btn {
  min-height: 44px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--menu-text, var(--roxo-base)) !important;
  box-shadow: none !important;
}

/* Chevron melhor e mais visível */
body.web-mode .nav-caret,
.nav-caret {
  font-size: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 6px !important;
  position: relative !important;
  opacity: .95 !important;
}

body.web-mode .nav-caret::before,
.nav-caret::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform .2s ease, top .2s ease !important;
}

body.web-mode .nav-dropdown:hover .nav-caret::before,
body.web-mode .nav-dropdown:focus-within .nav-caret::before,
body.web-mode .nav-dropdown.is-open .nav-caret::before,
.nav-dropdown:hover .nav-caret::before,
.nav-dropdown:focus-within .nav-caret::before,
.nav-dropdown.is-open .nav-caret::before {
  top: 7px !important;
  transform: rotate(225deg) !important;
}

/* Estados visuais mais perceptíveis */
body.web-mode .nav-group-btn:hover,
body.web-mode .nav-dropdown:hover .nav-group-btn,
body.web-mode .nav-dropdown.is-open .nav-group-btn,
.nav-group-btn:hover,
.nav-dropdown:hover .nav-group-btn,
.nav-dropdown.is-open .nav-group-btn {
  background: rgba(45,26,70,.07) !important;
  border-color: rgba(45,26,70,.12) !important;
}

body.web-mode .nav-dropdown.is-active .nav-group-btn,
.nav-dropdown.is-active .nav-group-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(45,26,70,.13) !important;
  color: var(--menu-active, var(--roxo-600)) !important;
  box-shadow:
    inset 0 -3px 0 var(--amarelo-base),
    0 12px 26px rgba(45,26,70,.10) !important;
}

/* Dropdown maior e mais premium */
body.web-mode .nav-dropdown-menu,
.nav-dropdown-menu {
  top: calc(100% + 16px) !important;
  min-width: 270px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 54px rgba(45,26,70,.18) !important;
}

body.web-mode .nav-dropdown-item,
.nav-dropdown-item {
  padding: 13px 14px !important;
  font-size: 15px !important;
  border-radius: 13px !important;
  gap: 13px !important;
}

body.web-mode .nav-item-icon,
.nav-item-icon {
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
}

/* Botão Cor e PDF mais fortes */
body.web-mode .theme-toggle-btn,
.theme-toggle-btn {
  min-height: 44px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(45,26,70,.14) !important;
  background: #fff !important;
  color: var(--menu-text, var(--roxo-base)) !important;
  box-shadow: 0 10px 24px rgba(45,26,70,.08) !important;
}

body.web-mode .print-btn,
.print-btn {
  min-height: 46px !important;
  padding: 13px 20px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--amarelo-base) !important;
  color: var(--preto) !important;
  box-shadow: 0 14px 30px rgba(255, 199, 56,.30) !important;
}

/* Ajuste para o tema dark */
body[data-menu-theme="dark"] .nav-dropdown.is-active .nav-group-btn {
  background: rgba(255, 199, 56,.12) !important;
  border-color: rgba(255, 199, 56,.30) !important;
}

body[data-menu-theme="dark"] .theme-toggle-btn {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.90) !important;
}

/* Mobile */
@media (max-width: 900px) {
  body.web-mode .nav-brand,
  .nav-brand {
    min-width: auto !important;
  }

  body.web-mode .nav-brand span,
  .nav-brand span {
    font-size: 14px !important;
  }

  body.web-mode .nav-brand svg:not(.nav-logo-hex),
  body.web-mode .nav-brand img,
  .nav-brand svg:not(.nav-logo-hex),
  .nav-brand img {
    width: 24px !important;
    height: 24px !important;
  }

  body.web-mode .nav-group-btn,
  .nav-group-btn {
    min-height: 38px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}


/* ===== v40 — logo, anos e tipografia padronizados ===== */

/* Base tipográfica dos slides */
.slide,
.slide *:not(canvas) {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

.slide .slide-inner {
  padding: 42px 48px !important;
}

.slide-num {
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
  font-weight: 600 !important;
  color: var(--roxo-400) !important;
}

/* Títulos padronizados */
.slide h1,
.slide h2,
.slide h3 {
  color: var(--roxo-base) !important;
  letter-spacing: -0.35px !important;
}

.slide h1.title-lg,
.slide .title-lg,
#s5 .bf-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.9px !important;
}

.slide h1.title-md,
.slide .title-md {
  font-size: 24px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

/* Texto corrido mais consistente */
.slide p,
.slide li,
.slide .editable-insight,
.slide .bf-subtitle,
.slide .source,
.slide .bf-source {
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.slide .source,
.slide .bf-source {
  font-size: 12.5px !important;
  color: var(--roxo-400) !important;
}

/* Badge/ano do canto superior direito padronizado */
.badge-year,
#s5 .bf-year {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 76px !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  background: var(--amarelo-base) !important;
  color: var(--preto) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.25px !important;
  box-shadow: 0 10px 24px rgba(255, 199, 56,.18) !important;
  text-align: center !important;
}

#s5 .bf-year {
  margin-top: 0 !important;
}

/* Marca do topo */
.nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 430px !important;
}

.nav-brand-lockup {
  width: 118px !important;
  height: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.nav-brand-divider {
  width: 1px;
  height: 28px;
  background: rgba(45,26,70,.14);
  border-radius: 999px;
  flex: 0 0 auto;
}

.nav-brand-title {
  display: inline-block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: var(--roxo-base) !important;
  white-space: nowrap !important;
}

/* Dá mais consistência aos botões do topo */
.nav-group-btn,
.theme-toggle-btn,
.print-btn {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

/* Ajustes responsivos */
@media (max-width: 1200px) {
  .nav-brand {
    min-width: 360px !important;
  }

  .nav-brand-lockup {
    width: 100px !important;
  }

  .nav-brand-title {
    font-size: 19px !important;
  }
}

@media (max-width: 900px) {
  .nav-brand {
    min-width: auto !important;
    gap: 10px !important;
  }

  .nav-brand-lockup {
    width: 88px !important;
  }

  .nav-brand-divider {
    height: 22px !important;
  }

  .nav-brand-title {
    font-size: 15px !important;
  }

  .badge-year,
  #s5 .bf-year {
    min-width: 64px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  .slide h1.title-lg,
  .slide .title-lg,
  #s5 .bf-title {
    font-size: 24px !important;
  }

  .slide h1.title-md,
  .slide .title-md {
    font-size: 20px !important;
  }
}



/* ===== v43 — base v40 preservada / refino seguro ===== */

/* Header sem logo estranha */
.nav-brand.nav-brand-text-only {
  min-width: 300px !important;
  gap: 0 !important;
}

.nav-brand.nav-brand-text-only .nav-brand-title {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.15px !important;
  color: var(--roxo-base) !important;
  white-space: nowrap !important;
}

/* Esconde apenas os ícones decorativos que aparecem antes dos títulos.
   Não remove elementos do HTML, apenas oculta visualmente. */
.slide-inner > div:first-child > svg {
  display: none !important;
}

.slide-inner > div:first-child {
  gap: 0 !important;
}

/* Remove recuo que existia por causa do ícone nos subtítulos */
.slide-inner > p[style*="46px"] {
  margin-left: 0 !important;
}

/* Títulos padronizados sem quebrar layout */
.slide h1.title-lg,
.slide .title-lg {
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  color: var(--roxo-base) !important;
}

.slide h1.title-md,
.slide .title-md {
  font-size: 25px !important;
  line-height: 1.16 !important;
  font-weight: 800 !important;
  letter-spacing: -0.45px !important;
  color: var(--roxo-base) !important;
}

#s5 .bf-title {
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px !important;
}

/* Subtítulos e textos de apoio */
.slide .slide-inner > div:first-child p,
#s5 .bf-subtitle {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--roxo-400) !important;
}

/* Badge do ano padronizado */
.badge-year,
#s5 .bf-year {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: var(--amarelo-base) !important;
  color: var(--preto) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 9px 20px rgba(255, 199, 56,.18) !important;
}

/* Paginação */
.slide-num {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
}

/* Menu refinado sem mexer em navegação */
.nav-group-btn {
  font-weight: 700 !important;
}

.nav-caret {
  font-size: 0 !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px !important;
  position: relative !important;
}

.nav-caret::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  transform: rotate(45deg) !important;
}

.nav-dropdown:hover .nav-caret::before,
.nav-dropdown:focus-within .nav-caret::before,
.nav-dropdown.is-open .nav-caret::before {
  transform: rotate(225deg) !important;
  top: 6px !important;
}

/* Ajuste responsivo */
@media (max-width: 980px) {
  .nav-brand.nav-brand-text-only .nav-brand-title {
    font-size: 18px !important;
  }

  .slide h1.title-lg,
  .slide .title-lg,
  #s5 .bf-title {
    font-size: 25px !important;
  }

  .slide h1.title-md,
  .slide .title-md {
    font-size: 22px !important;
  }
}


/* #s11 encerramento: estilizado 100% inline em index.html (<style id="s11-style">) */

/* ======================== Badge "Atualizado em" (v45) ======================== */
.nav-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--roxo-50);
  color: var(--roxo-600);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: 1px solid var(--roxo-100);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  cursor: help;
}
.nav-brand-badge:hover {
  background: var(--roxo-base);
  color: var(--amarelo-base);
}
.nav-brand-badge.is-ok {
  background: var(--verde-50, #E8F5E9);
  color: var(--verde);
  border-color: #C8E6C9;
}
.nav-brand-badge.is-ok:hover {
  background: var(--verde);
  color: #fff;
}
.nav-brand-badge.is-stale {
  background: #FFF3CD;
  color: #856404;
  border-color: #FFE69C;
}
.nav-brand-badge.is-error {
  background: #FFEBEE;
  color: var(--vermelho);
  border-color: #FFCDD2;
}
.nav-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  opacity: 0.7;
}
.nav-brand-badge.is-ok .nav-badge-dot {
  animation: pulse-ok 2s ease-in-out infinite;
}
@keyframes pulse-ok {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
@media (max-width: 900px) {
  .nav-brand-badge { display: none; }
}

/* ===== Cabeçalho — ações agrupadas (cluster compacto) v3 ===== */
.nav-bar .nav-actions-cluster {
  display: inline-flex !important;
  align-items: stretch;
  margin-left: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  box-shadow: 0 6px 16px rgba(19,10,34,.18);
}
.nav-bar .nav-actions-cluster > .estado-selector,
.nav-bar .nav-actions-cluster > .print-btn,
.nav-bar .nav-actions-cluster > .inline-edit-toggle {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 15px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  cursor: pointer;
}
.nav-bar .nav-actions-cluster > * + * {
  border-left: 1px solid rgba(255,255,255,0.18) !important;
}
.nav-bar .nav-actions-cluster > *:hover {
  background-color: rgba(255,255,255,0.10) !important;
}
.nav-bar .nav-actions-cluster > .print-btn {
  color: var(--amarelo-base) !important;   /* PDF mantém acento âmbar */
  font-weight: 700 !important;
}
.nav-bar .nav-actions-cluster > .inline-edit-toggle > span {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
/* ===== MODO EDIÇÃO ATIVO: destaque âmbar no botão + lembrete fixo ===== */
.nav-bar .nav-actions-cluster > .inline-edit-toggle.active {
  background-color: var(--amarelo-base) !important;
  color: var(--roxo-base) !important;
  animation: editToggleGlow 1.9s ease-in-out infinite;
}
.nav-bar .nav-actions-cluster > .inline-edit-toggle.active > span { color: var(--roxo-base) !important; }
.nav-bar .nav-actions-cluster > .inline-edit-toggle.active:hover { background-color: var(--amarelo-escuro) !important; }
@keyframes editToggleGlow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(45,26,70,0); }
  50%      { box-shadow: inset 0 0 0 2px rgba(45,26,70,.22); }
}
/* lembrete discreto enquanto o modo edição está ligado (não entra no PDF: é overlay fixo) */
body.inline-edit-enabled::after {
  content: "✎ Modo edição ligado";
  position: fixed; right: 16px; bottom: 16px; z-index: 9998;
  background: var(--amarelo-base); color: var(--preto);
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 12px;
  padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(45,26,70,.28);
  pointer-events: none;
}
.nav-bar .nav-actions-cluster > .estado-selector {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
.nav-bar .nav-actions-cluster > .estado-selector option {
  color: #2D1A46;
  background: #fff;
}

/* dropdowns do menu menos arredondados (feedback: estava muito redondo) */
.nav-bar .nav-dropdown .nav-group-btn { border-radius: 8px !important; }
.nav-bar .nav-dropdown .nav-dropdown-menu { border-radius: 10px !important; }
.nav-bar .nav-dropdown .nav-dropdown-item { border-radius: 6px !important; }

/* menu abre SÓ por clique (.is-open) — corrige bug de 2 dropdowns abertos via hover.
   o JS de clique já fecha os demais, então fica sempre só um aberto. */
.nav-bar .nav-dropdown:hover:not(.is-open) .nav-dropdown-menu,
.nav-bar .nav-dropdown:focus-within:not(.is-open) .nav-dropdown-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.nav-bar .nav-dropdown:hover:not(.is-open) .nav-caret::before,
.nav-bar .nav-dropdown:focus-within:not(.is-open) .nav-caret::before {
  transform: rotate(45deg) !important;
  top: 4px !important;
}


/* ==================== Skeleton loaders (v47) ==================== */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.chart-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 10px 40px;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}
.chart-skeleton.hidden {
  opacity: 0;
  visibility: hidden;
}
.chart-skeleton-bar {
  height: 14px;
  background: linear-gradient(
    90deg,
    rgba(45,26,70,0.06) 0%,
    rgba(45,26,70,0.12) 50%,
    rgba(45,26,70,0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.chart-skeleton-bar.short  { width: 30%; }
.chart-skeleton-bar.medium { width: 55%; }
.chart-skeleton-bar.long   { width: 78%; }
.chart-skeleton-bar.xlong  { width: 92%; }
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.chart-skeleton-line {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chart-skeleton-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to top, rgba(45,26,70,0.04) 1px, transparent 1px);
  background-size: 100% 20%;
}
.chart-skeleton-line::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 199, 56,0.2) 0%,
    rgba(255, 199, 56,0.5) 30%,
    rgba(255, 199, 56,0.35) 60%,
    rgba(255, 199, 56,0.6) 100%
  );
  background-size: 200% 100%;
  border-radius: 2px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  transform: rotate(-4deg);
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .chart-skeleton-bar,
  .chart-skeleton-line::after { animation: none; }
}

/* ==================== Glossário de siglas (v47) ==================== */
abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted var(--roxo-400);
  cursor: help;
  transition: color var(--transition), border-color var(--transition);
}
abbr[title]:hover {
  color: var(--roxo-base);
  border-bottom-color: var(--amarelo-base);
  border-bottom-style: solid;
}

/* ==================== Estilos para impressão/PDF (v47) ==================== */
@media print {
  /* Reset global */
  @page {
    size: A4 landscape;
    margin: 12mm 10mm;
  }
  
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Esconde elementos de UI */
  .nav-bar,
  .menu-lateral,
  .toolbar,
  .print-btn,
  .edit-btn,
  .nav-brand-badge,
  button,
  [role="button"],
  .floating-btn,
  .back-to-top,
  .edit-panel,
  .chart-skeleton {
    display: none !important;
  }
  
  /* Container e slides */
  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .slide {
    opacity: 1 !important;
    transform: none !important;
    page-break-after: always;
    page-break-inside: avoid;
    break-after: page;
    break-inside: avoid;
    margin-bottom: 0;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: auto !important;
    background: #fff !important;
  }
  .slide:last-child {
    page-break-after: auto;
  }
  
  /* Separadores de seção (ssec1, ssec3) mais compactos */
  .section-divider,
  [id^="ssec"] {
    page-break-before: always;
    page-break-after: avoid;
  }
  
  /* Títulos não ficam "órfãos" no final da página */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
  
  /* Remove hover-states e transições */
  *,
  *:hover,
  *:focus {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Links mostram URL ao lado em preto */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666;
    font-weight: normal;
  }
  /* Exceto em links internos */
  a[href^="#"]::after,
  .nav-dropdown-item::after {
    content: "";
  }
  
  /* Abbr - mostra a explicação ao lado em impressão */
  abbr[title] {
    border-bottom: none !important;
    color: inherit !important;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
    font-size: 8pt;
    color: #666;
    font-weight: normal;
    font-style: italic;
  }
  
  /* Tabelas */
  table, .pesq-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Gráficos: garante tamanho fixo para não quebrar */
  canvas {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }
  
  /* Cards, KPIs - preservam cor de fundo */
  .kpi-card,
  .card-stat,
  .mini-card,
  .kpi-opp,
  .badge,
  .badge-year,
  .pill-green,
  .pill-red {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Source / rodapé de cada slide */
  .source {
    font-size: 8pt;
    color: #666;
  }
  
  /* Prefers-reduced-motion */
  .nav-badge-dot,
  .chart-skeleton-bar {
    animation: none !important;
  }
  
  /* Cover / Capa - ocupa página inteira */
  #s1 {
    min-height: 90vh !important;
  }
  
  /* Institutional (s1a) - mantém proporção da imagem */
  #s1a img,
  .full-image-frame img {
    max-width: 100% !important;
    max-height: 90vh !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ==================== Inline hover-to-edit (v48) ==================== */

/* Container relativo para o pencil ficar posicionado corretamente */
.editable-field {
  position: relative;
  transition: background var(--transition), outline var(--transition);
  border-radius: 4px;
}

/* Em modo de visualização normal (sem hover), nada aparece.
   Escopo: só os campos marcados como .copy-editable (textos de análise/insight) —
   assim títulos/legendas não mostram o affordance nem ficam editáveis. */
body.inline-edit-enabled .copy-editable {
  /* sinaliza sutilmente que é editável quando está no modo edição */
  cursor: text;
}

/* Hover sobre o elemento editável: destaca suavemente */
body.inline-edit-enabled .copy-editable:hover:not(.inline-editing) {
  background: rgba(255, 199, 56, 0.07);
  outline: 1.5px solid rgba(255, 199, 56, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
}

/* O ícone de lápis que aparece no hover */
body.inline-edit-enabled .copy-editable:hover:not(.inline-editing)::after {
  content: '✎';
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  background: var(--amarelo-base);
  color: #2D1A46;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(45,26,70,0.35);
  z-index: 10;
  pointer-events: none;
  animation: pencil-pop 0.2s ease-out;
}

@keyframes pencil-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Botão "↻ outra versão" (texto de IA) — só aparece com o modo "Origem do texto" ligado */
.variant-btn {
  display: none;
  position: absolute; top: 10px; right: 12px; z-index: 6;
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  border: 1px solid var(--roxo-400); background: #fff; color: var(--roxo-400);
  font-size: 15px; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(45,26,70,.18);
  transition: transform .4s ease, background .15s;
}
.variant-btn:hover { background: var(--roxo-50); }
.variant-btn.spin { transform: rotate(360deg); }
body.show-origin .variant-btn { display: inline-flex; }

/* Quando está efetivamente editando um campo: outline sólido amarelo */
.editable-field.inline-editing {
  background: rgba(255, 199, 56, 0.07) !important;
  outline: 2px solid var(--amarelo-base) !important;
  outline-offset: 3px;
  border-radius: 6px;
  cursor: text !important;
}
/* O ::after do editing mostra "Esc para sair" — mesmo idioma visual (roxo translúcido) */
.editable-field.inline-editing::after {
  content: 'Esc para sair · Ctrl+B negrito';
  position: absolute;
  top: -30px;
  right: 0;
  background: rgba(19,10,34,.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFD145;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 18px rgba(19,10,34,.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 0.2px;
}

/* Toast / Feedback visual de "salvo" — mesma família do pill (roxo translúcido + blur) */
.inline-save-toast {
  position: fixed;
  left: 18px;
  bottom: 62px;
  background: rgba(19,10,34,.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 9px 15px;
  border-radius: 12px;
  font: 600 12.5px/1 'Poppins', sans-serif;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(19,10,34,.4);
  z-index: 100001;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-save-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Pill flutuante de status da edição (#hr-edit-pill, criado em charts.js) ===== */
#hr-edit-pill {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 13px;
  border-radius: 999px;
  background: rgba(19,10,34,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(19,10,34,.4);
  color: #fff;
  font: 600 12.5px/1 'Poppins', sans-serif;
  letter-spacing: .2px;
  animation: hr-pill-in .3s ease both;
}
@keyframes hr-pill-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#hr-edit-pill .hr-edit-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  animation: hr-dot-pulse 2s infinite;
}
@keyframes hr-dot-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ring); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
#hr-edit-pill.is-online  { --ring: rgba(63,208,122,.55); }
#hr-edit-pill.is-online  .hr-edit-dot { background: #3FD07A; }
#hr-edit-pill.is-offline { --ring: rgba(255,90,95,.55); border-color: rgba(255,90,95,.45); }
#hr-edit-pill.is-offline .hr-edit-dot { background: #FF5A5F; }
#hr-edit-pill.is-offline .hr-edit-label { color: #FFC7C9; }

/* Botão toggle no nav-bar para ligar/desligar modo edição */
.inline-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin-left: 8px;
  border-radius: 6px;
  background: var(--roxo-50);
  color: var(--roxo-600);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--roxo-100);
  transition: all var(--transition);
  user-select: none;
}
.inline-edit-toggle:hover {
  background: var(--roxo-100);
  color: var(--roxo-base);
}
.inline-edit-toggle.active {
  background: var(--amarelo-base);
  color: var(--preto);
  border-color: var(--amarelo-escuro);
  font-weight: 600;
}
.inline-edit-toggle.active::before {
  content: '●';
  color: var(--roxo-base);
  animation: pulse-ok 2s ease-in-out infinite;
}

/* No modo impressão, sumir com tudo que é de edição */
@media print {
  .editable-field::after,
  .inline-save-toast,
  #hr-edit-pill,
  .inline-edit-toggle { display: none !important; }
  .editable-field {
    background: transparent !important;
    outline: none !important;
  }
}

@media print {
  .inline-edit-enabled .editable-field::after,
  .inline-save-toast,
  .inline-edit-toggle,
  body.inline-edit-enabled .editable-field:hover::after {
    display: none !important;
  }
  .editable-field.inline-editing {
    outline: none !important;
    background: transparent !important;
  }
}

/* ===== Nav premium escuro — identidade Omnibees ===== */
.nav-bar,
body.web-mode .nav-bar {
  background: rgba(20,10,36,0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 8px 40px rgba(20,10,36,0.32) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.nav-logo-hex { flex-shrink: 0; display: block; width: 66px !important; height: 66px !important; min-width: 66px !important; min-height: 66px !important; filter: drop-shadow(0 2px 8px rgba(255, 199, 56,0.25)); }
/* HN roundel — matching visible height do hex (66×85% ≈ 56) */
/* Impede que o nav-links caia pra segunda linha quando brand + menu passam
   da largura disponível (viewports 1280-1440 ficam apertados). */
.nav-bar .nav-inner { flex-wrap: nowrap !important; }
.nav-bar .nav-brand { min-width: 0 !important; flex-shrink: 1 !important; }
.nav-bar .nav-links { flex-shrink: 0 !important; }

.nav-brand {
  gap: 12px !important;
  border-right: 1px solid rgba(255,255,255,0.10);
  padding-right: 20px;
  margin-right: 6px;
  color: #fff !important;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.nav-brand-name {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}

.nav-brand-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.48);
  letter-spacing: 0.3px;
  margin-top: 4px;
  font-weight: 400;
}

.nav-brand-badge,
body.web-mode .nav-brand-badge {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.62) !important;
}

.nav-badge-dot { background: var(--amarelo-base) !important; }
#navBadgeText { color: rgba(255,255,255,0.62) !important; }

.nav-group-btn,
body.web-mode .nav-group-btn {
  color: rgba(255,255,255,0.78) !important;
}

.nav-group-btn:hover,
.nav-dropdown:hover .nav-group-btn,
.nav-dropdown.is-open .nav-group-btn {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.nav-dropdown.is-active .nav-group-btn {
  color: var(--amarelo-base) !important;
  background: rgba(255, 199, 56,0.14) !important;
  box-shadow: inset 0 -2px 0 var(--amarelo-base) !important;
}

.nav-caret { opacity: .55; }

.inline-edit-toggle {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.76) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.inline-edit-toggle:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}
.inline-edit-toggle.active {
  background: var(--amarelo-base) !important;
  color: var(--preto) !important;
  border-color: var(--amarelo-escuro) !important;
}

.theme-toggle-btn {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.76) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.print-btn,
body.web-mode .print-btn {
  background: var(--amarelo-base) !important;
  color: var(--preto) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
.print-btn:hover { background: var(--amarelo-escuro) !important; }

/* ── Landing page flow ── slides contínuos, sem quebra de espaço ── */
body.web-mode .container {
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.web-mode .slide,
body.web-mode .cover-premium,
body.web-mode .full-image-slide,
body.web-mode .section-card {
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.web-mode .slide + .slide { margin-top: 0 !important; }
body.web-mode .slide:not(.cover-premium):not(.section-card):not(.full-image-slide) .slide-inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.web-mode .cover-image-wrap {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.web-mode .full-image-frame {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════
   VISUAL UPGRADE — Landing Page Premium
   ═══════════════════════════════════════════════ */

/* 1 ── Fundo mais rico e profundo */
body.web-mode {
  background:
    radial-gradient(ellipse 60% 40% at 2% 0%, rgba(255, 199, 56,.09) 0%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 98% 0%, rgba(45,26,70,.14) 0%, transparent 100%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(110,63,171,.07) 0%, transparent 100%),
    linear-gradient(180deg, #F3F0FA 0%, #FAFAFD 40%, #F3F0FA 100%) !important;
}

/* 2 ── Padding generoso nas seções */
body.web-mode .slide-inner {
  padding: 80px 96px !important;
}

/* 3 ── KPI cards — glassmorphism */
body.web-mode .kpi-card {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 2px 0 rgba(255,255,255,0.9) inset, 0 6px 28px rgba(45,26,70,.07) !important;
  border-radius: 18px !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
body.web-mode .kpi-card:hover {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 16px 48px rgba(45,26,70,.13) !important;
  transform: translateY(-5px) !important;
}
body.web-mode .kpi-card.accent {
  background: linear-gradient(145deg, rgba(255,223,83,.18), rgba(255, 199, 56,.08)) !important;
  border-color: rgba(255, 199, 56,.30) !important;
  box-shadow: 0 6px 28px rgba(255, 199, 56,.13) !important;
}

/* 4 ── card-stat — glass + números com gradiente */
body.web-mode .card-stat {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-left: 3px solid var(--roxo-400) !important;
  box-shadow: 0 4px 20px rgba(45,26,70,.06) !important;
  border-radius: 14px !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
body.web-mode .card-stat:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 38px rgba(45,26,70,.12) !important;
}
body.web-mode .card-stat.highlight {
  background: linear-gradient(145deg, rgba(255,223,83,.14), rgba(255,255,255,.80)) !important;
  border-left-color: var(--amarelo-base) !important;
  box-shadow: 0 4px 20px rgba(255, 199, 56,.10) !important;
}
body.web-mode .card-stat .num {
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  background: linear-gradient(135deg, var(--roxo-base) 30%, var(--roxo-400)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.web-mode .card-stat.highlight .num {
  background: linear-gradient(135deg, var(--amarelo-escuro), var(--amarelo-base)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 5 ── Separador visual sutil entre seções */
body.web-mode .slide + .slide {
  border-top: 1px solid transparent !important;
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(45,26,70,.07) 20%,
    rgba(255, 199, 56,.15) 50%,
    rgba(45,26,70,.07) 80%,
    transparent 100%) !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  padding-top: 0 !important;
}


/* ===== v49 — Reservas emitidas em gráfico de linha ===== */
#s5a .reservas-line-slide-inner {
  padding: 46px 58px 34px !important;
}

#s5a .reservas-line-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
}

#s5a .reservas-line-header h1 {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.9px !important;
  color: var(--roxo-base) !important;
}

#s5a .reservas-line-header p {
  margin: 8px 0 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--roxo-400) !important;
  max-width: 880px;
}

#s5a .reservas-line-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: 28px;
  margin-bottom: 24px;
}

#s5a .reservas-bullet {
  position: relative;
  padding-left: 28px;
  color: var(--roxo-base);
  font-size: 14px;
  line-height: 1.45;
}

#s5a .reservas-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 18px;
  background: var(--amarelo-base);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 8px 16px rgba(255, 199, 56,.18);
}

#s5a .reservas-chart-card {
  background: #fff;
  border-radius: 22px;
  padding: 24px 30px 18px;
  border: 1px solid rgba(45,26,70,.08);
  box-shadow: 0 18px 38px rgba(45,26,70,.12);
}

#s5a .reservas-chart-title {
  text-align: center;
  color: var(--roxo-600);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}

#s5a .reservas-chart-wrap {
  position: relative;
  height: 350px;
}

#s5a .source {
  text-align: right;
  margin-top: 18px;
  font-size: 13px !important;
  color: var(--roxo-400) !important;
}

@media (max-width: 900px) {
  #s5a .reservas-line-slide-inner {
    padding: 34px 28px !important;
  }

  #s5a .reservas-line-intro {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #s5a .reservas-chart-wrap {
    height: 300px;
  }
}


/* ===== v50 — garantir visibilidade do slide de reservas ===== */
#s5a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#s5a.slide-hidden,
#s5a.hidden,
#s5a.is-hidden {
  display: block !important;
}


/* ===== v51 — reservas padronizado com slides analíticos ===== */
#s5a {
  background: #fff !important;
}

#s5a .reservas-standard-inner {
  padding: 44px 58px 32px !important;
}

#s5a .reservas-standard-header {
  margin-bottom: 26px !important;
}

#s5a .reservas-standard-header .analysis-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.9px !important;
  color: var(--roxo-base) !important;
  margin: 0 !important;
}

#s5a .reservas-standard-header .analysis-subtitle {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--roxo-400) !important;
  max-width: 900px !important;
}

#s5a .reservas-standard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: stretch;
}

#s5a .reservas-standard-chart {
  background: #fff !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 18px !important;
  padding: 22px 24px 14px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.07) !important;
}

#s5a .chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 8px;
}

#s5a .chart-kicker {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#s5a .chart-title {
  color: var(--roxo-base);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#s5a .chart-legend-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--roxo-base);
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
}

#s5a .chart-legend-inline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#s5a .legend-dot-line {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

#s5a .legend-2024 { background: var(--amarelo-base); }
#s5a .legend-2025 { background: var(--roxo-base); }
#s5a .legend-2026 { background: #74C000; }

#s5a .reservas-chart-wrap {
  position: relative;
  height: 330px;
  margin-top: 4px;
}

#s5a .reservas-standard-insight {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#s5a .insight-card,
#s5a .mini-note-card {
  background: #fff !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.06) !important;
}

#s5a .insight-card {
  padding: 22px 22px 20px;
  min-height: 250px;
}

#s5a .insight-card-label {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

#s5a .insight-card p {
  color: var(--roxo-base);
  font-size: 14px !important;
  line-height: 1.62 !important;
  margin: 0 0 12px !important;
}

#s5a .mini-note-card {
  padding: 18px 20px;
  background: var(--amarelo-50) !important;
  border-color: rgba(255, 199, 56,.24) !important;
}

#s5a .mini-note-title {
  color: var(--roxo-base);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#s5a .mini-note-text {
  color: var(--roxo-base);
  font-size: 13px;
  line-height: 1.55;
}

/* ===== #s5a — bloco de comentários no MESMO padrão do #s3/#s4 =====
   Card único com borda + acento amarelo à esquerda + gradiente laranja no topo-direito,
   esticado até embaixo (grid já é align-items: stretch), com Leitura e Destaque DENTRO. */
#s5a .reservas-standard-insight {
  padding: 26px 26px 22px !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-left: 4px solid var(--amarelo-base) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.06) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 199, 56,.10), transparent 34%),
    #fff !important;
  justify-content: center !important;
  gap: 6px !important;
}
/* Card interno da Leitura vira contêiner liso (evita caixa dentro de caixa) */
#s5a .insight-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* Destaque (mini-note) no mesmo molde do mini-action do #s3/#s4 */
#s5a .mini-note-card {
  margin-top: 6px !important;
  border-radius: 14px !important;
  padding: 14px 15px !important;
}

/* ===== Card de Leitura full-width REUTILIZÁVEL (#s6, #s9a, ...) — mesmo idioma visual
   do #s3/#s4/#s5a, abaixo do conteúdo, em vez de texto solto no rodapé. ===== */
.analise-leitura-card {
  margin-top: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(45,26,70,.08);
  border-left: 4px solid var(--amarelo-base);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(45,26,70,.06);
  background:
    radial-gradient(circle at 97% 14%, rgba(255, 199, 56,.10), transparent 28%),
    #fff;
}
.analise-leitura-kicker {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.analise-leitura-card .editable-insight {
  font-size: 13.8px !important;
  line-height: 1.62 !important;
  margin: 0 !important;
  max-width: none !important;
  color: var(--roxo-base) !important;
}

#s5a .source {
  margin-top: 18px !important;
  text-align: left !important;
  color: var(--roxo-400) !important;
  font-size: 12px !important;
}

@media (max-width: 1000px) {
  #s5a .reservas-standard-grid {
    grid-template-columns: 1fr;
  }

  #s5a .reservas-chart-wrap {
    height: 310px;
  }
}

@media (max-width: 700px) {
  #s5a .reservas-standard-inner {
    padding: 32px 24px !important;
  }

  #s5a .chart-panel-header {
    flex-direction: column;
  }

  #s5a .reservas-chart-wrap {
    height: 280px;
  }
}


/* ===== v52 — corrigir badge 2026 à direita no slide de reservas ===== */
#s5a .reservas-standard-header,
#s5a .analysis-topbar.reservas-standard-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  justify-content: initial !important;
  width: 100% !important;
  gap: 24px !important;
}

#s5a .reservas-standard-header .analysis-heading {
  min-width: 0 !important;
  max-width: 100% !important;
}

#s5a .reservas-standard-header .badge-year,
#s5a .reservas-standard-header .analysis-badge-year {
  justify-self: end !important;
  align-self: start !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

@media (max-width: 700px) {
  #s5a .reservas-standard-header,
  #s5a .analysis-topbar.reservas-standard-header {
    grid-template-columns: 1fr auto !important;
  }
}


/* ===== v53 — Altos e baixos atualizado conforme PPT ===== */
#s8{background:#fff!important}
#s8 .altos-ppt-inner{padding:38px 48px 26px!important}
#s8 .altos-ppt-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;margin-bottom:26px}
#s8 .altos-ppt-header h1{font-size:43px!important;line-height:1!important;font-weight:300!important;letter-spacing:-1px!important;color:var(--roxo-base)!important;margin:0!important}
#s8 .altos-ppt-header h1 strong{font-weight:700!important}
#s8 .altos-ppt-header p{margin:10px 0 0!important;color:var(--roxo-base);font-size:14px!important;line-height:1.45!important;max-width:620px}
#s8 .altos-year-badge{width:112px;height:86px;border:2px solid var(--roxo-base);border-radius:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--amarelo-base);font-size:28px;font-weight:700;transform:rotate(8deg);position:relative}
#s8 .altos-year-badge::before{content:"";width:24px;height:22px;background:var(--amarelo-base);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);position:absolute;left:-16px}
#s8 .altos-year-badge span{transform:rotate(-8deg)}
#s8 .altos-ppt-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:stretch}
#s8 .altos-text-panel{background:var(--cinza-100);border-radius:56px 56px 0 0;padding:40px 38px 26px;min-height:540px;display:flex;flex-direction:column}
#s8 .altos-panel-title{color:#111;font-size:22px;line-height:1.08;font-weight:700;margin-bottom:26px}
#s8 .altos-text-panel p{color:#111;font-size:13px!important;line-height:1.38!important;margin:0 0 14px!important}
#s8 .altos-text-panel strong{font-weight:700}
#s8 .altos-channel-kpi{margin-top:auto;display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px;color:var(--roxo-base)}
#s8 .altos-network-icon{position:relative;width:112px;height:112px;opacity:.45}
#s8 .altos-network-icon::before,#s8 .altos-network-icon::after{content:"";position:absolute;background:#777;height:5px;border-radius:999px;left:28px;top:55px;width:78px;transform:rotate(35deg)}
#s8 .altos-network-icon::after{transform:rotate(-35deg)}
#s8 .altos-network-icon span{position:absolute;width:26px;height:26px;border:6px solid #777;background:var(--cinza-100);border-radius:50%}
#s8 .altos-network-icon span:nth-child(1){left:42px;top:42px;width:38px;height:38px}
#s8 .altos-network-icon span:nth-child(2){left:0;top:0}
#s8 .altos-network-icon span:nth-child(3){right:0;top:0}
#s8 .altos-network-icon span:nth-child(4){left:0;bottom:0}
#s8 .altos-network-icon span:nth-child(5){right:0;bottom:0}
#s8 .altos-kpi-label{font-size:15px;line-height:1.1;font-weight:700}
#s8 .altos-kpi-number{font-size:42px;line-height:1;font-weight:700;margin-top:6px}
#s8 .altos-kpi-small{font-size:11px;line-height:1.25;margin-top:6px;color:var(--roxo-600)}
#s8 .altos-main-panel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(245px,.75fr);grid-template-rows:305px 250px;gap:16px}
#s8 .altos-chart-card{background:#fff;border:1px solid rgba(45,26,70,.20);border-radius:34px;padding:18px 22px;box-shadow:none!important;overflow:hidden}
#s8 .altos-line-card{grid-column:1;grid-row:1}
#s8 .altos-share-card{grid-column:2;grid-row:1}
#s8 .altos-payment-card{grid-column:1;grid-row:2}
#s8 .altos-hotdates-card{grid-column:2;grid-row:2}
#s8 .altos-card-title{text-align:center;color:var(--roxo-base);font-size:20px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:-.2px;margin-bottom:9px}
#s8 .altos-inline-legend{display:flex;justify-content:center;gap:10px;color:var(--roxo-base);font-size:10px;font-weight:700;margin-bottom:4px;flex-wrap:wrap}
#s8 .altos-inline-legend span{display:inline-flex;gap:4px;align-items:center}
#s8 .altos-inline-legend i{width:8px;height:8px;display:inline-block;border-radius:50%}
#s8 .ota{background:#74C000} #s8 .operadora{background:#7C47C7} #s8 .direta{background:var(--amarelo-base)}
#s8 .altos-line-wrap{height:235px;position:relative}
#s8 .market-bars{height:205px;display:flex;justify-content:center;align-items:end;gap:22px;margin-top:4px}
#s8 .market-year{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;font-weight:700;color:var(--roxo-base)}
#s8 .stack{width:42px;height:164px;display:flex;flex-direction:column-reverse;overflow:hidden;background:var(--cinza-200)}
#s8 .stack-seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
#s8 .seg-ota{background:#74C000} #s8 .seg-operadora{background:#7C47C7} #s8 .seg-direta{background:var(--amarelo-base)}
#s8 .market-legend{font-size:8px;margin-top:5px;gap:6px}
#s8 .donut-wrap{width:180px;height:160px;margin:4px auto 2px;position:relative}
#s8 .payment-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:9px;color:#111;font-weight:700;max-width:330px;margin:0 auto}
#s8 .payment-legend span{display:inline-flex;gap:5px;align-items:center}
#s8 .payment-legend i{width:8px;height:8px;display:inline-block;border-radius:50%}
#s8 .credit{background:#7C47C7} #s8 .invoice{background:var(--amarelo-base)} #s8 .hotelpay{background:#1D78B5} #s8 .deposit{background:#74C000}
#s8 .hotdates-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
#s8 .hotdates-columns h3{text-align:center;margin:0 0 8px;text-transform:uppercase;color:var(--roxo-base);font-size:19px;line-height:1;font-weight:700}
#s8 .hotdates-columns ul{list-style:none;margin:0;padding:10px 12px;border:1px solid rgba(45,26,70,.18);border-radius:12px;min-height:95px}
#s8 .hotdates-columns li{display:flex;justify-content:space-between;gap:8px;color:#111;font-size:10px;line-height:1.25;margin-bottom:4px}
#s8 .hotdates-columns li span{color:var(--verde);font-weight:700;white-space:nowrap}
#s8 .source{text-align:right;margin-top:14px!important;color:var(--roxo-400)!important;font-size:13px!important}
#s8a{display:none!important}
@media print{#s8a{display:none!important}}
@media (max-width:1100px){
  #s8 .altos-ppt-grid{grid-template-columns:1fr}
  #s8 .altos-text-panel{min-height:auto;border-radius:28px}
  #s8 .altos-main-panel{grid-template-columns:1fr;grid-template-rows:auto}
  #s8 .altos-line-card,#s8 .altos-share-card,#s8 .altos-payment-card,#s8 .altos-hotdates-card{grid-column:auto;grid-row:auto}
}


/* ===== v54 — Altos e baixos padronizado no estilo dos demais slides ===== */
#s8 {
  background: #fff !important;
}

#s8 .altos-standard-inner {
  padding: 44px 58px 32px !important;
}

#s8 .altos-standard-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}

#s8 .altos-standard-header .analysis-heading {
  min-width: 0 !important;
}

#s8 .altos-standard-header .badge-year {
  justify-self: end !important;
  align-self: start !important;
}

#s8 .altos-standard-header .analysis-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.9px !important;
  color: var(--roxo-base) !important;
  margin: 0 !important;
}

#s8 .altos-standard-header .analysis-subtitle {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--roxo-400) !important;
  max-width: 900px !important;
}

#s8 .altos-standard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, .72fr);
  grid-template-areas:
    "line kpi"
    "payment market"
    "hotdates insight";
  gap: 18px;
  align-items: stretch;
}

#s8 .altos-standard-card {
  background: #fff !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.06) !important;
  padding: 20px 22px;
  overflow: hidden;
}

#s8 .altos-main-chart { grid-area: line; }
#s8 .altos-kpi-card { grid-area: kpi; }
#s8 .altos-payment-card { grid-area: payment; }
#s8 .altos-market-card { grid-area: market; }
#s8 .altos-hotdates-card { grid-area: hotdates; }
#s8 .altos-insight-card { grid-area: insight; }

#s8 .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 8px;
}

#s8 .card-head.compact {
  margin-bottom: 14px;
}

#s8 .card-kicker {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#s8 .card-title {
  color: var(--roxo-base);
  font-size: 22px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#s8 .standard-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--roxo-base);
  font-size: 11px;
  font-weight: 700;
}

#s8 .standard-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#s8 .standard-legend i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}
#s8 .legend-square {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

#s8 .ota { background: #74C000; }
#s8 .operadora { background: #7C47C7; }
#s8 .direta { background: var(--amarelo-base); }
#s8 .corporativo { background: var(--roxo-600); }

#s8 .credit { background: #7C47C7; }
#s8 .invoice { background: var(--amarelo-base); }
#s8 .hotelpay { background: #1D78B5; }
#s8 .deposit { background: #74C000; }

#s8 .altos-line-wrap {
  height: 285px;
  position: relative;
}

#s8 .altos-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #FFFDF8, #FFFFFF) !important;
  border-left: 4px solid var(--amarelo-base) !important;
}

#s8 .altos-kpi-number {
  color: var(--roxo-base);
  font-size: 56px;
  line-height: .95;
  font-weight: 700;
  letter-spacing: -2px;
  margin: 8px 0 10px;
}

#s8 .altos-kpi-detail {
  color: var(--roxo-400);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 12px;
}

#s8 .payment-standard-content {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  align-items: center;
}

#s8 .donut-wrap {
  width: 180px;
  height: 170px;
  position: relative;
}

#s8 .payment-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--roxo-base);
  font-size: 13px;
  line-height: 1.35;
}

#s8 .payment-list div {
  display: flex;
  align-items: center;
  gap: 8px;
}

#s8 .payment-list strong {
  font-weight: 700;
  min-width: 34px;
  text-align: right;
  display: inline-block;
}

/* --- 2 donuts de pagamento (Venda Direta vs Demais canais) --- */
#s8 .altos-payment-card {
  display: flex !important;
  flex-direction: column !important;
}
#s8 .payment-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;                /* preenche a altura do card (pra baixo) */
  align-items: stretch;   /* as 2 colunas ficam da mesma altura */
}
#s8 .payment-col {
  background: #F7F7F9;               /* cinza bem claro (mais leve que o cinza-100) */
  border: 1px solid rgba(45,26,70,.05);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;           /* centraliza o conteúdo na altura do card */
  gap: 4px;
}
#s8 .payment-col-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--preto);
  margin-bottom: 10px;
}
#s8 .payment-col-title .pcol-badge {
  width: 9px; height: 9px; border-radius: 50%;
}
/* cinza neutro nos dois: são rótulos de seção, não cor de dado
   (evita brigar com roxo=Cartão / verde=PIX do donut e da legenda) */
#s8 .payment-col-title .pcol-badge.vd,
#s8 .payment-col-title .pcol-badge.out { background: var(--cinza-400); }
/* dentro da coluna: donut menor em cima, lista embaixo (empilhado).
   !important pra vencer as regras compactas de #s8 .payment-standard-content. */
#s8 .payment-col .payment-standard-content {
  display: block !important;
}
#s8 .payment-col .donut-wrap {
  width: 132px !important;
  height: 132px !important;
  margin: 0 auto 14px !important;
}
#s8 .payment-col .payment-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px 12px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
#s8 .payment-col .payment-list div {
  align-items: flex-start !important;
  gap: 5px !important;
}
#s8 .payment-col .payment-list .legend-square {
  margin-top: 2px !important;
}
#s8 .payment-col .payment-list strong {
  min-width: 26px !important;
}

#s8 .market-bars-standard {
  height: 178px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 24px;
  margin-top: 4px;
}

#s8 .market-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--roxo-base);
}

#s8 .stack {
  width: 44px;
  height: 150px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  background: var(--cinza-200);
  border-radius: 8px 8px 3px 3px;
}

#s8 .stack-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

#s8 .seg-ota { background: #74C000; }
#s8 .seg-operadora { background: #7C47C7; }
#s8 .seg-direta { background: var(--amarelo-base); }

#s8 .market-legend {
  justify-content: center;
  font-size: 9px;
  margin-top: 10px;
}

#s8 .hotdates-standard-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#s8 .hotdates-standard-columns h3 {
  margin: 0 0 8px;
  color: var(--roxo-base);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.2px;
}

#s8 .hotdates-standard-columns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#s8 .hotdates-standard-columns li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(45,26,70,.08);
  color: var(--roxo-base);
  font-size: 12px;
  line-height: 1.25;
}

#s8 .hotdates-standard-columns li:last-child {
  border-bottom: 0;
}

#s8 .hotdates-standard-columns li span {
  color: var(--verde);
  font-weight: 700;
  white-space: nowrap;
}

#s8 .altos-insight-card p {
  color: var(--roxo-base);
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 0 10px !important;
}

#s8 .altos-insight-card strong {
  font-weight: 700 !important;
}

#s8 .source {
  margin-top: 18px !important;
  text-align: left !important;
  color: var(--roxo-400) !important;
  font-size: 12px !important;
}

/* Mantém o slide de Market Share na estrutura, mas o oculta na navegação visual para evitar duplicidade */
#s8a {
  display: none !important;
}

@media print {
  #s8a {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  #s8 .altos-standard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "line"
      "kpi"
      "payment"
      "market"
      "hotdates"
      "insight";
  }

  #s8 .payment-standard-content {
    grid-template-columns: 1fr;
  }

  #s8 .donut-wrap {
    margin: 0 auto;
  }
}


/* ===== v55 — reorganização do painel Altos e baixos ===== */

/* Grade em 3 colunas para eliminar o vazio do card de pagamento */
#s8 .altos-standard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.38fr) minmax(250px, .62fr) minmax(300px, .78fr) !important;
  grid-template-areas:
    "line line kpi"
    "payment market insight"
    "hotdates hotdates insight" !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Reposicionamento das áreas */
#s8 .altos-main-chart { grid-area: line !important; }
#s8 .altos-kpi-card { grid-area: kpi !important; }
#s8 .altos-payment-card { grid-area: payment !important; }
#s8 .altos-market-card { grid-area: market !important; }
#s8 .altos-hotdates-card { grid-area: hotdates !important; }
#s8 .altos-insight-card { grid-area: insight !important; }

/* Proporções visuais mais equilibradas */
#s8 .altos-main-chart,
#s8 .altos-kpi-card {
  min-height: 310px !important;
}

#s8 .altos-payment-card,
#s8 .altos-market-card {
  min-height: 245px !important;
}

#s8 .altos-hotdates-card {
  min-height: 220px !important;
}

#s8 .altos-insight-card {
  min-height: 483px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#s8 .altos-line-wrap {
  height: 250px !important;
}

/* O card de pagamento agora é compacto e centralizado */
#s8 .payment-standard-content {
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
}

#s8 .donut-wrap {
  width: 150px !important;
  height: 150px !important;
  margin: 0 !important;
}

#s8 .payment-list {
  gap: 8px !important;
  font-size: 12px !important;
}

#s8 .payment-list div {
  align-items: flex-start !important;
}

/* Market share ocupa melhor o espaço sem ficar pequeno demais */
#s8 .altos-market-card {
  display: flex !important;
  flex-direction: column !important;
}
#s8 .market-bars-standard {
  height: 210px !important;
  gap: 26px !important;
  margin-top: 6px !important;
}
/* legenda empurrada pro rodapé do card */
#s8 .market-legend {
  margin-top: auto !important;
  padding-top: 14px !important;
}

#s8 .stack {
  height: 190px !important;
  width: 54px !important;
}

/* Hot dates mais horizontal e arejado */
#s8 .hotdates-standard-columns {
  gap: 28px !important;
}

#s8 .hotdates-standard-columns li {
  font-size: 12.5px !important;
  padding: 7px 0 !important;
}

/* Leitura executiva mais premium e preenchendo a lateral */
#s8 .altos-insight-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 199, 56,.10), transparent 32%),
    #fff !important;
  border-left: 4px solid var(--amarelo-base) !important;
}

#s8 .altos-insight-card .card-kicker {
  margin-bottom: 16px !important;
}

#s8 .altos-insight-card p {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  margin-bottom: 16px !important;
}

/* Ajusta o KPI para não parecer vazio */
#s8 .altos-kpi-card {
  padding: 28px 28px !important;
}

#s8 .altos-kpi-number {
  font-size: 62px !important;
}

#s8 .pill-green {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
}

/* Ajuste responsivo */
@media (max-width: 1250px) {
  #s8 .altos-standard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr) !important;
    grid-template-areas:
      "line kpi"
      "payment market"
      "hotdates insight" !important;
  }

  #s8 .altos-insight-card {
    min-height: auto !important;
  }
}

@media (max-width: 900px) {
  #s8 .altos-standard-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "line"
      "kpi"
      "payment"
      "market"
      "hotdates"
      "insight" !important;
  }

  #s8 .payment-standard-content {
    grid-template-columns: 1fr !important;
  }

  #s8 .donut-wrap {
    margin: 0 auto !important;
  }
}


/* ===== v57 — remoção do slide Diária média/Capitais final ===== */
#s12 {
  display: none !important;
}
a[href="#s12"] {
  display: none !important;
}


/* ===== v58 — ajustes comportamento + categoria ===== */

/* 1) Retira a estrela/ícone do bloco de insight do slide comportamento */
#s5 .bf-reading-icon-wrap,
#s5 .bf-reading-icon {
  display: none !important;
}

#s5 .bf-reading {
  display: block !important;
  grid-template-columns: 1fr !important;
  padding: 24px 30px !important;
}

#s5 .bf-reading-content {
  width: 100% !important;
}

#s5 .bf-reading-title {
  margin-bottom: 12px !important;
}

/* 2) Slide Diária média por categoria — sobe gráfico e texto */
#s7 .slide-inner {
  padding-top: 34px !important;
  padding-bottom: 28px !important;
}

/* reduz o vazio superior */
#s7 .slide-inner > div:first-child {
  margin-bottom: 12px !important;
}

/* aproxima o bloco gráfico do título */
#s7 .slide-inner > div[style*="grid-template-columns:2fr 28px 2fr"] {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

/* grid das categorias mais alto e compacto */
#s7 #categoriasGrid {
  margin-top: 0 !important;
  gap: 10px !important;
}

/* força as linhas/categorias a subirem, sem sobrar tanto espaço */
#s7 .cat-row {
  margin-top: 0 !important;
}

/* texto/insight sobe e ocupa melhor a largura inferior */
#s7 .editable-insight,
#s7 p.editable-insight,
#s7 .slide-inner > p {
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  max-width: 930px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* fonte sobe junto e fica alinhada ao texto */
#s7 .source {
  margin-top: 8px !important;
}

/* em modo web, remove espaço extra herdado */
body.web-mode #s7 .slide-inner {
  padding-top: 34px !important;
  padding-bottom: 28px !important;
}


/* ===== v59 — categoria com gráfico ao lado e texto no próprio slide ===== */
#s7 {
  background: #fff !important;
}

#s7 .categoria-side-inner {
  padding: 44px 58px 32px !important;
}

#s7 .categoria-side-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}

#s7 .categoria-side-header .analysis-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.9px !important;
  color: var(--roxo-base) !important;
  margin: 0 !important;
}

#s7 .categoria-side-header .analysis-subtitle {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--roxo-400) !important;
  max-width: 880px !important;
}

#s7 .categoria-side-header .badge-year {
  justify-self: end !important;
  align-self: start !important;
}

#s7 .categoria-side-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(320px, .82fr);
  gap: 24px;
  align-items: stretch;
}

#s7 .categoria-chart-card,
#s7 .categoria-insight-card {
  background: #fff !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.06) !important;
}

#s7 .categoria-chart-card {
  padding: 24px 28px 28px;
}

#s7 .categoria-chart-head {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

#s7 .categoria-axis-title {
  color: var(--roxo-600);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

#s7 .categoria-axis-title:first-child {
  text-align: right;
}

#s7 .categoria-axis-title:last-child {
  grid-column: 3;
  text-align: left;
}

#s7 .categoria-bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Split em 2 blocos (Room Night · Tarifa média) — fundo cinza brand */
/* Grid 2x2 de cards por categoria — fundo cinza 100 + tag dinâmica por quadrante */
#s7 .categoria-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}
#s7 .cat-card {
  background: var(--cinza-100);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#s7 .cat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
#s7 .cat-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#s7 .cat-card-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--roxo-base);
  margin: 0;
  letter-spacing: -0.2px;
}
#s7 .cat-icon {
  width: 26px;
  height: 26px;
  background: var(--amarelo-base);
  color: var(--roxo-base);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#s7 .cat-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
#s7 .cat-tag {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
/* 4 quadrantes · tag dinâmica */
#s7 .cat-tag[data-quad="up-up"]   { background: var(--branco); color: var(--roxo-base); border: 1px solid var(--cinza-200); }
#s7 .cat-tag[data-quad="up-dn"]   { background: var(--roxo-base); color: var(--branco); }
#s7 .cat-tag[data-quad="dn-up"]   { background: var(--amarelo-base); color: var(--preto); }
#s7 .cat-tag[data-quad="dn-dn"]   { background: var(--cinza-200); color: var(--roxo-base); }

#s7 .cat-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#s7 .cat-metric {
  background: rgba(255, 255, 255, .72);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#s7 .cat-metric-lbl {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--cinza-500);
  font-weight: 800;
  text-transform: uppercase;
}
#s7 .cat-metric-val {
  font-size: 22px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
}
#s7 .cat-metric-val[data-dir="up"] { color: #2E8540; }
#s7 .cat-metric-val[data-dir="dn"] { color: #C2384B; }

#s7 .categoria-insight-card {
  padding: 26px 26px 22px;
  border-left: 4px solid var(--amarelo-base) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 199, 56,.10), transparent 32%),
    #fff !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#s7 .categoria-insight-card .card-kicker {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

#s7 .categoria-insight-card p {
  color: var(--roxo-base);
  font-size: 13.8px !important;
  line-height: 1.62 !important;
  margin: 0 0 14px !important;
}

#s7 .categoria-insight-card p:last-child {
  margin-bottom: 0 !important;
}

#s7 .categoria-insight-card strong {
  font-weight: 700 !important;
  background: linear-gradient(to bottom, transparent 58%, rgba(255, 199, 56,0.25) 58%);
}

#s7 .source {
  margin-top: 18px !important;
  text-align: left !important;
  color: var(--roxo-400) !important;
  font-size: 12px !important;
}

@media (max-width: 1050px) {
  #s7 .categoria-side-layout {
    grid-template-columns: 1fr;
  }

  #s7 .categoria-insight-card {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  #s7 .categoria-side-inner {
    padding: 32px 24px !important;
  }

  #s7 .categoria-chart-head,
  #s7 .categoria-row {
    grid-template-columns: 1fr;
  }

  #s7 .categoria-axis-title,
  #s7 .categoria-axis-title:first-child,
  #s7 .categoria-axis-title:last-child {
    text-align: left !important;
    grid-column: auto !important;
  }

  #s7 .bar-side.left,
  #s7 .bar-side.right {
    justify-content: flex-start;
  }
}


/* ===== v61 — Desempenho Estados fiel ao PPT e padronizado ===== */
:is(#s3, #s2b){ background:#fff!important; }
:is(#s3, #s2b) .desempenho-estados-inner{padding:38px 54px 28px!important;min-height:650px}
:is(#s3, #s2b) .desempenho-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:24px;margin-bottom:18px}
:is(#s3, #s2b) .desempenho-title-lockup{display:flex;align-items:center;gap:16px;min-width:0}
:is(#s3, #s2b) .omni-mark{width:54px;height:54px;display:inline-block;flex:0 0 auto;background:var(--amarelo-base);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);position:relative}
:is(#s3, #s2b) .omni-mark::after{content:"";position:absolute;inset:13px;background:var(--roxo-base);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
:is(#s3, #s2b) .desempenho-title-row h1{margin:0!important;color:var(--roxo-base)!important;font-size:34px!important;line-height:1.08!important;letter-spacing:-0.9px!important;font-weight:700!important}
:is(#s3, #s2b) .desempenho-title-row h1 strong{font-weight:700!important}
:is(#s3, #s2b) .year-outline-badge{width:104px;height:84px;border:2px solid var(--roxo-base);border-radius:18px;transform:rotate(8deg);display:inline-flex;align-items:center;justify-content:center;color:var(--amarelo-base);font-size:27px;line-height:1;font-weight:700;position:relative}
:is(#s3, #s2b) .year-outline-badge::before{content:"";width:23px;height:21px;background:var(--amarelo-base);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);position:absolute;left:-15px}
:is(#s3, #s2b) .year-outline-badge span{transform:rotate(-8deg)}
:is(#s3, #s2b) .desempenho-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:34px;align-items:stretch}
:is(#s3, #s2b) .desempenho-text-panel{background:var(--cinza-100);border-radius:56px 56px 0 0;padding:38px 34px 26px;min-height:520px;position:relative;overflow:hidden}
:is(#s3, #s2b) .desempenho-text-panel p{position:relative;z-index:1;color:#111}
:is(#s3, #s2b) .desempenho-text-panel .text-lead{font-size:20px!important;line-height:1.12!important;margin:0 0 28px!important;color:#111!important}
:is(#s3, #s2b) .desempenho-text-panel .editable-insight{font-size:13px!important;line-height:1.32!important;margin:0 0 16px!important;color:#111!important}
:is(#s3, #s2b) .desempenho-text-panel strong{font-weight:700!important}
:is(#s3, #s2b) .panel-watermark{position:absolute;left:128px;bottom:44px;width:118px;height:90px;opacity:.28}
:is(#s3, #s2b) .wm-bar{position:absolute;bottom:12px;width:18px;background:#777;border-radius:2px 2px 0 0}
:is(#s3, #s2b) .wm-bar.one{left:10px;height:26px} :is(#s3, #s2b) .wm-bar.two{left:40px;height:42px} :is(#s3, #s2b) .wm-bar.three{left:70px;height:62px}
:is(#s3, #s2b) .wm-arrow{position:absolute;left:4px;bottom:52px;width:92px;height:52px;border-top:5px solid #777;border-right:5px solid #777;border-radius:0 10px 0 0;transform:skewX(-20deg) rotate(-10deg)}
:is(#s3, #s2b) .desempenho-chart-panel{position:relative;min-height:520px;padding:88px 14px 0}
:is(#s3, #s2b) .country-label{position:absolute;left:28px;top:118px;color:var(--roxo-base);font-size:30px;line-height:1;font-weight:700}
:is(#s3, #s2b) .metric-head{position:absolute;top:78px;display:flex;align-items:center;gap:12px;color:var(--roxo-base)}
:is(#s3, #s2b) .rn-head{left:245px} :is(#s3, #s2b) .tarifa-head{right:18px}
:is(#s3, #s2b) .metric-head strong{display:block;font-size:17px;line-height:1;font-weight:700;white-space:nowrap}
:is(#s3, #s2b) .metric-head small{display:block;margin-top:3px;font-size:9px;line-height:1;color:#111;font-weight:700}
:is(#s3, #s2b) .hex-kpi{width:66px;height:60px;display:inline-flex;align-items:center;justify-content:center;clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);font-size:16px;font-weight:700;filter:drop-shadow(0 6px 6px rgba(45,26,70,.24))}
:is(#s3, #s2b) .hex-kpi.yellow{background:var(--amarelo-base);color:var(--roxo-400)}
:is(#s3, #s2b) .hex-kpi.purple{background:var(--roxo-400);color:#fff}
:is(#s3, #s2b) .ranking-table{margin-top:150px;display:flex;flex-direction:column;gap:6px}
:is(#s3, #s2b) .ranking-row{display:grid;grid-template-columns:42px minmax(180px,1fr) minmax(180px,1fr);gap:20px;align-items:center;min-height:22px;position:relative}
:is(#s3, #s2b) .ranking-row.is-es{outline:2px dashed var(--roxo-400);outline-offset:3px;border-radius:8px;background:rgba(142,82,222,.035)}
:is(#s3, #s2b) .uf{color:var(--roxo-base);font-size:17px;line-height:1;font-weight:700;text-align:right}
:is(#s3, #s2b) .bar-cell{height:22px;position:relative;display:flex;align-items:center}
:is(#s3, #s2b) .rn-cell{display:grid;grid-template-columns:1fr 1fr auto;gap:0}
:is(#s3, #s2b) .tarifa-cell{display:grid;grid-template-columns:1fr auto;gap:6px}
:is(#s3, #s2b) .rn-neg{display:flex;justify-content:flex-end;align-items:center;height:18px}
:is(#s3, #s2b) .rn-pos{display:flex;justify-content:flex-start;align-items:center;height:18px}
:is(#s3, #s2b) .tarifa-track{height:18px;display:flex;justify-content:flex-start;align-items:center}
:is(#s3, #s2b) .bar-fill{height:18px;border-radius:2px}
:is(#s3, #s2b) .rn-fill{background:var(--amarelo-base)}
:is(#s3, #s2b) .tarifa-fill{background:var(--roxo-400)}
:is(#s3, #s2b) .value-chip{background:#E8E6EC;color:var(--roxo-400);border-radius:4px;padding:3px 7px;font-size:12px;line-height:1;font-weight:700;margin-left:6px;white-space:nowrap}
:is(#s3, #s2b) .rn-chip.negative{margin-left:0;margin-right:6px;order:-1}
:is(#s3, #s2b) .tarifa-chip{background:#A49DB0;color:#fff}
:is(#s3, #s2b) .source{margin-top:16px!important;text-align:right!important;color:var(--roxo-400)!important;font-size:12px!important}
@media(max-width:1100px){
  :is(#s3, #s2b) .desempenho-layout{grid-template-columns:1fr}
  :is(#s3, #s2b) .desempenho-text-panel{min-height:auto;border-radius:32px}
  :is(#s3, #s2b) .desempenho-chart-panel{padding-top:96px}
}
@media(max-width:760px){
  :is(#s3, #s2b) .desempenho-title-lockup{align-items:flex-start}
  :is(#s3, #s2b) .desempenho-title-row h1{font-size:30px!important}
  :is(#s3, #s2b) .desempenho-layout{gap:18px}
  :is(#s3, #s2b) .ranking-row{grid-template-columns:34px 1fr}
  :is(#s3, #s2b) .tarifa-cell{grid-column:2}
  :is(#s3, #s2b) .metric-head,:is(#s3, #s2b) .country-label{position:static;margin:8px 0}
  :is(#s3, #s2b) .ranking-table{margin-top:20px}
}


/* ===== v62 — Desempenho Estados no padrão da landing page ===== */
:is(#s3, #s2b){
  background: #fff !important;
}

:is(#s3, #s2b) .estados-standard-inner {
  padding: 44px 58px 32px !important;
}

:is(#s3, #s2b) .estados-standard-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}

:is(#s3, #s2b) .estados-standard-header .analysis-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.9px !important;
  color: var(--roxo-base) !important;
  margin: 0 !important;
}

:is(#s3, #s2b) .estados-standard-header .analysis-subtitle {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--roxo-400) !important;
  max-width: 920px !important;
}

:is(#s3, #s2b) .estados-standard-header .badge-year {
  justify-self: end !important;
  align-self: start !important;
}

:is(#s3, #s2b) .estados-standard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

:is(#s3, #s2b) .estados-chart-card,
:is(#s3, #s2b) .estados-insight-card {
  background: #fff !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.06) !important;
}

:is(#s3, #s2b) .estados-chart-card {
  padding: 24px 26px 22px !important;
}

:is(#s3, #s2b) .estados-chart-head {
  display: grid !important;
  grid-template-columns: minmax(120px, .6fr) minmax(190px, .9fr) minmax(190px, .9fr) !important;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

:is(#s3, #s2b) .country-chip {
  color: var(--roxo-base);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

:is(#s3, #s2b) .metric-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

:is(#s3, #s2b) .metric-chip .metric-hex {
  position: relative;
  width: 62px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  flex: 0 0 auto;
  color: inherit;
  isolation: isolate;
}

:is(#s3, #s2b) .metric-chip .metric-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 6px 8px rgba(45,26,70,.16));
  z-index: -1;
}

:is(#s3, #s2b) .metric-chip.room .metric-hex {
  color: var(--roxo-400);
}

:is(#s3, #s2b) .metric-chip.room .metric-hex::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'><path d='M20 3.5h22c2.2 0 4.4.6 6.2 1.8l9.5 6.4c2.6 1.8 4.3 4.8 4.3 8v16.6c0 3.2-1.6 6.2-4.3 8l-9.5 6.4c-1.8 1.2-4 1.8-6.2 1.8H20c-2.2 0-4.4-.6-6.2-1.8l-9.5-6.4C1.6 42.5 0 39.5 0 36.3V19.7c0-3.2 1.6-6.2 4.3-8l9.5-6.4C15.6 4.1 17.8 3.5 20 3.5Z' fill='%23F5AF04'/><path d='M20.8 8.3h20.4c1.8 0 3.5.5 4.9 1.5l8.1 5.5c2.1 1.4 3.3 3.7 3.3 6.3v12.9c0 2.5-1.2 4.9-3.3 6.3l-8.1 5.5c-1.5 1-3.2 1.5-4.9 1.5H20.8c-1.8 0-3.5-.5-4.9-1.5l-8.1-5.5c-2.1-1.4-3.3-3.7-3.3-6.3V21.6c0-2.5 1.2-4.9 3.3-6.3l8.1-5.5c1.5-1 3.2-1.5 4.9-1.5Z' fill='none' stroke='%23D79900' stroke-width='1.6'/></svg>");
}

:is(#s3, #s2b) .metric-chip.tarifa .metric-hex {
  color: #fff;
}

:is(#s3, #s2b) .metric-chip.tarifa .metric-hex::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'><path d='M20 3.5h22c2.2 0 4.4.6 6.2 1.8l9.5 6.4c2.6 1.8 4.3 4.8 4.3 8v16.6c0 3.2-1.6 6.2-4.3 8l-9.5 6.4c-1.8 1.2-4 1.8-6.2 1.8H20c-2.2 0-4.4-.6-6.2-1.8l-9.5-6.4C1.6 42.5 0 39.5 0 36.3V19.7c0-3.2 1.6-6.2 4.3-8l9.5-6.4C15.6 4.1 17.8 3.5 20 3.5Z' fill='%238E52DE'/><path d='M20.8 8.3h20.4c1.8 0 3.5.5 4.9 1.5l8.1 5.5c2.1 1.4 3.3 3.7 3.3 6.3v12.9c0 2.5-1.2 4.9-3.3 6.3l-8.1 5.5c-1.5 1-3.2 1.5-4.9 1.5H20.8c-1.8 0-3.5-.5-4.9-1.5l-8.1-5.5c-2.1-1.4-3.3-3.7-3.3-6.3V21.6c0-2.5 1.2-4.9 3.3-6.3l8.1-5.5c1.5-1 3.2-1.5 4.9-1.5Z' fill='none' stroke='%23743FD0' stroke-width='1.6'/></svg>");
}

:is(#s3, #s2b) .metric-title {
  color: var(--roxo-base);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

:is(#s3, #s2b) .metric-sub {
  margin-top: 4px;
  color: var(--roxo-400);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

:is(#s3, #s2b) .ranking-head {
  display: grid;
  /* MESMA grade do cabeçalho dos cards (estados-chart-head) p/ alinhar card↔título↔barras */
  grid-template-columns: minmax(110px, .4fr) minmax(285px, .85fr) minmax(285px, .85fr);
  gap: 22px;
  margin-bottom: 8px;
  color: var(--roxo-400);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}

:is(#s3, #s2b) .estados-ranking {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:is(#s3, #s2b) .estado-row {
  display: grid;
  grid-template-columns: minmax(110px, .4fr) minmax(285px, .85fr) minmax(285px, .85fr);
  gap: 22px;
  align-items: center;
  min-height: 24px;
  position: relative;
}

:is(#s3, #s2b) .estado-row.is-es {
  /* destaque do estado/região atual SEM deslocar a linha: o outline é desenhado por fora
     (não afeta o layout), então as barras ficam alinhadas com as das demais linhas. */
  border-radius: 9px;
  background: rgba(142,82,222,.035);
  padding: 2px 0;
  outline: 1.7px dashed var(--roxo-400);
  outline-offset: 4px;
}

:is(#s3, #s2b) .estado-uf {
  color: var(--roxo-base);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  text-align: left; /* coluna do rótulo agora é larga (alinhada ao "Brasil") -> UF à esquerda */
}

/* #s2b (Desempenho das Regiões) herda o visual do #s3 via :is(#s3,#s2b); só ajusta a
   coluna do rótulo (nome de região é maior que UF de 2 letras) e alinha à esquerda. */
#s2b .estado-uf {
  text-align: left;
  font-size: 13px;
}

:is(#s3, #s2b) .estado-bar {
  display: flex;
  align-items: center;
  min-width: 0;
}

:is(#s3, #s2b) .estado-rn {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 0;
}

:is(#s3, #s2b) .axis-neg,
:is(#s3, #s2b) .axis-pos {
  height: 17px;
  display: flex;
  align-items: center;
}

:is(#s3, #s2b) .axis-neg {
  justify-content: flex-end;
}

:is(#s3, #s2b) .axis-pos {
  justify-content: flex-start;
}

:is(#s3, #s2b) .rn-bar,
:is(#s3, #s2b) .tarifa-bar {
  height: 17px;
  border-radius: 4px;
}

:is(#s3, #s2b) .rn-bar {
  background: var(--amarelo-base);
}

:is(#s3, #s2b) .tarifa-bar {
  background: var(--roxo-400);
}

:is(#s3, #s2b) .estado-tarifa {
  display: grid;
  grid-template-columns: 1fr 1fr 60px;
  align-items: center;
  gap: 0;
}

:is(#s3, #s2b) .tarifa-track {
  height: 17px;
  display: flex;
  align-items: center;
}

:is(#s3, #s2b) .estado-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #ECE8F2;
  color: var(--roxo-400);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

:is(#s3, #s2b) .rn-value.negative {
  order: -1;
  margin-right: 6px;
}

:is(#s3, #s2b) .tarifa-value {
  background: #ECE8F2;
  color: var(--roxo-400);
}

/* Títulos das colunas do ranking (#s2b/#s3/#s4): grade unificada com o cabeçalho dos cards
   (mesmo grid-template + gap 22px), então cada título cai na MESMA coluna do seu card. O
   padding-left alinha o título sob o TEXTO do card: padding 12 + hexágono 112 + gap 16 =
   140px (valores reais do card maior). Cor segue a métrica (RN âmbar, Tarifa roxo). */
:is(#s2b, #s3, #s4) .ranking-head {
  font-size: 12px !important;
}
:is(#s2b, #s3, #s4) .ranking-head span:nth-child(2) {
  padding-left: 140px;
  color: var(--amarelo-escuro);
}
:is(#s2b, #s3, #s4) .ranking-head span:nth-child(3) {
  padding-left: 140px;
  color: var(--roxo-400);
}

/* #s2 Panorama — tema ESCURO (estilo apresentação/deck) sobre a estrutura dinâmica.
   Cards mantêm .card-stat/.num/.lbl (renderPanorama preenche); aqui é só o restyle visual. */
#s2 { background: radial-gradient(circle at 88% 12%, rgba(255, 199, 56,.16), transparent 42%), var(--roxo-base) !important; }
#s2 .slide-inner { background: transparent !important; }
#s2 .title-lg { color: #fff !important; }
#s2 .s2-kicker { font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--amarelo-base); margin-bottom: 14px; }
#s2 .slide-num { color: rgba(255,255,255,.55) !important; }
#s2 .slide-inner p { color: #C9BBE6; }
#s2 .slide-inner p strong { color: #fff !important; }
#s2 .panorama-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0 18px; }
#s2 .card-stat { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; }
#s2 .card-stat:hover { background: rgba(255,255,255,.10) !important; transform: none !important; box-shadow: none !important; }
/* numbers do #s2 vinham com gradiente roxo (background-clip:text) do tema web-mode;
   no escuro precisam ser brancos -> resetar o gradiente e o text-fill-color. */
#s2 .card-stat .num { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
#s2 .card-stat .lbl { color: #B9A9D9 !important; }
#s2 .card-stat.highlight { background: rgba(255, 199, 56,.10) !important; border-color: rgba(255, 199, 56,.5) !important; }
#s2 .card-stat.highlight:hover { background: rgba(255, 199, 56,.14) !important; }
#s2 .card-stat.highlight .num { color: var(--amarelo-base) !important; }
#s2 .card-stat { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
/* Libera o tamanho do HotelierNews no nav (override das 3 regras antigas que
   forçam .nav-brand img pra 24x24). Ajustado pra 56px pra bater com a altura
   visível do hexágono Omnibees (que renderiza a 66px mas tem cantos vazios). */
.nav-bar .nav-cobranding img,
body.web-mode .nav-bar .nav-cobranding img {
  width: auto !important;
  height: 56px !important;
}
.nav-bar .nav-cobranding { align-self: center; }
/* Símbolo Omnibees (hexágono SVG) no nav — escapa das regras .nav-brand img
   (24/30px) que o espremeriam. Altura 56px = MESMO tamanho do roundel do HN. */
.nav-bar .nav-brand img.nav-logo-omni,
body.web-mode .nav-bar .nav-brand img.nav-logo-omni {
  width: auto !important;
  height: 56px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
/* Leve destaque no termo geográfico (Brasil / Região / Estado / Destino) */
#s2 .lbl-geo { color: #fff !important; font-weight: 700 !important; }
#s2 .card-stat.highlight .lbl-geo { color: var(--amarelo-base) !important; }
#s2 .destino-tag {
  position: absolute !important;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--amarelo-base);
  margin: 0 !important;
  white-space: nowrap;
}
@media (max-width: 900px) { #s2 .panorama-cards-row { grid-template-columns: 1fr 1fr; } }

:is(#s3, #s2b) .estados-insight-card {
  padding: 26px 26px 22px !important;
  border-left: 4px solid var(--amarelo-base) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 199, 56,.10), transparent 34%),
    #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

:is(#s3, #s2b) .estados-insight-card .card-kicker {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

:is(#s3, #s2b) .estados-insight-card p {
  color: var(--roxo-base);
  font-size: 13.8px !important;
  line-height: 1.62 !important;
  margin: 0 0 14px !important;
}

:is(#s3, #s2b) .estados-insight-card strong {
  font-weight: 700 !important;
  background: linear-gradient(to bottom, transparent 58%, rgba(255, 199, 56,0.25) 58%);
}

:is(#s3, #s2b) .mini-action-card {
  margin-top: 6px;
  background: var(--amarelo-50);
  border: 1px solid rgba(255, 199, 56,.28);
  border-radius: 14px;
  padding: 14px 15px;
  color: var(--roxo-base);
}

:is(#s3, #s2b) .mini-action-title {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

:is(#s3, #s2b) .mini-action-text {
  font-size: 13px;
  line-height: 1.45;
}

:is(#s3, #s2b) .source {
  margin-top: 18px !important;
  text-align: left !important;
  color: var(--roxo-400) !important;
  font-size: 12px !important;
}

@media (max-width: 1100px) {
  :is(#s3, #s2b) .estados-standard-grid {
    grid-template-columns: 1fr !important;
  }

  :is(#s3, #s2b) .estados-insight-card {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  :is(#s3, #s2b) .estados-standard-inner {
    padding: 32px 24px !important;
  }

  :is(#s3, #s2b) .estados-chart-head,
  :is(#s3, #s2b) .ranking-head,
  :is(#s3, #s2b) .estado-row {
    grid-template-columns: 1fr !important;
  }

  :is(#s3, #s2b) .estado-uf {
    text-align: left;
  }
}


/* ===== v64 — badges KPI arredondados no slide Desempenho Estados ===== */

/* Cards/pills dos KPIs no padrão aprovado */
:is(#s3, #s2b) .metric-chip {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 22px !important;
  padding: 12px 18px 12px 12px !important;
  min-width: 285px !important;
  box-shadow: 0 12px 28px rgba(45,26,70,.08) !important;
  gap: 16px !important;
}

:is(#s3, #s2b) .metric-chip .metric-hex {
  width: 112px !important;
  height: 58px !important;
  border-radius: 18px !important;
  clip-path: none !important;
  filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  position: relative !important;
  isolation: auto !important;
  box-shadow: inset 0 -7px 14px rgba(45,26,70,.08), 0 8px 18px rgba(45,26,70,.08) !important;
}

/* remove o desenho SVG/losango anterior */
:is(#s3, #s2b) .metric-chip .metric-hex::before,
:is(#s3, #s2b) .metric-chip .metric-hex::after {
  display: none !important;
  content: none !important;
}

:is(#s3, #s2b) .metric-chip.room .metric-hex {
  background: linear-gradient(135deg, #FFC738 0%, var(--amarelo-base) 100%) !important;
  color: var(--roxo-base) !important;
}

:is(#s3, #s2b) .metric-chip.tarifa .metric-hex {
  background: linear-gradient(135deg, #A35EFF 0%, var(--roxo-400) 100%) !important;
  color: #fff !important;
}

:is(#s3, #s2b) .metric-title {
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--roxo-base) !important;
}

:is(#s3, #s2b) .metric-sub {
  margin-top: 7px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--roxo-400) !important;
}

/* reposicionamento para os cards maiores */
:is(#s3, #s2b) .estados-chart-head {
  grid-template-columns: minmax(110px, .4fr) minmax(285px, .85fr) minmax(285px, .85fr) !important;
  gap: 22px !important;
  margin-bottom: 22px !important;
}

:is(#s3, #s2b) .country-chip {
  font-size: 28px !important;
}

/* cabeçalhos das colunas descem um pouco para respirar */
:is(#s3, #s2b) .ranking-head {
  margin-top: 6px !important;
}

/* responsivo */
@media (max-width: 900px) {
  :is(#s3, #s2b) .metric-chip {
    min-width: 0 !important;
    width: 100% !important;
  }

  :is(#s3, #s2b) .metric-chip .metric-hex {
    width: 96px !important;
    height: 52px !important;
    font-size: 19px !important;
  }

  :is(#s3, #s2b) .metric-title {
    font-size: 17px !important;
  }

  :is(#s3, #s2b) .metric-sub {
    font-size: 11px !important;
  }
}

/* ===== s4 — herda estilos de ranking/layout do s3 ===== */

#s4 .ranking-head {
  display: grid;
  grid-template-columns: minmax(110px, .4fr) minmax(285px, .85fr) minmax(285px, .85fr);
  gap: 22px;
  margin-bottom: 8px;
  color: var(--roxo-400);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}

#s4 .estados-ranking {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#s4 .estado-row {
  display: grid;
  grid-template-columns: minmax(110px, .4fr) minmax(285px, .85fr) minmax(285px, .85fr);
  gap: 22px;
  align-items: center;
  min-height: 24px;
  position: relative;
}

#s4 .estado-row.is-es {
  /* destaque do destino atual SEM deslocar a linha (outline não afeta o layout) */
  border-radius: 9px;
  background: rgba(142,82,222,.035);
  padding: 2px 0;
  outline: 1.7px dashed var(--roxo-400);
  outline-offset: 4px;
}

#s4 .estado-uf {
  color: var(--roxo-base);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#s4 .estado-bar {
  display: flex;
  align-items: center;
  min-width: 0;
}

#s4 .estado-rn {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 0;
}

#s4 .axis-neg,
#s4 .axis-pos {
  height: 17px;
  display: flex;
  align-items: center;
}

#s4 .axis-neg {
  justify-content: flex-end;
}

#s4 .axis-pos {
  justify-content: flex-start;
}

#s4 .rn-bar,
#s4 .tarifa-bar {
  height: 17px;
  border-radius: 4px;
}

#s4 .rn-bar {
  background: var(--amarelo-base);
}

#s4 .tarifa-bar {
  background: var(--roxo-400);
}

#s4 .estado-tarifa {
  display: grid;
  grid-template-columns: 1fr 1fr 60px;
  align-items: center;
  gap: 0;
}

#s4 .tarifa-track {
  height: 17px;
  display: flex;
  align-items: center;
}

#s4 .estado-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #ECE8F2;
  color: var(--roxo-400);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

#s4 .rn-value.negative {
  order: -1;
  margin-right: 6px;
}

#s4 .tarifa-value {
  background: #ECE8F2;
  color: var(--roxo-400);
}

#s4 .estados-insight-card {
  padding: 26px 26px 22px !important;
  border-left: 4px solid var(--amarelo-base) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 199, 56,.10), transparent 34%),
    #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#s4 .estados-insight-card .card-kicker {
  color: var(--amarelo-escuro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

#s4 .estados-insight-card p {
  color: var(--roxo-base);
  font-size: 13.8px !important;
  line-height: 1.62 !important;
  margin: 0 0 14px !important;
}

#s4 .estados-insight-card strong {
  font-weight: 700 !important;
  background: linear-gradient(to bottom, transparent 58%, rgba(255, 199, 56,0.25) 58%);
}

#s4 .mini-action-card {
  margin-top: 6px;
  background: var(--amarelo-50);
  border: 1px solid rgba(255, 199, 56,.28);
  border-radius: 14px;
  padding: 14px 15px;
  color: var(--roxo-base);
}

#s4 .mini-action-title {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#s4 .mini-action-text {
  font-size: 13px;
  line-height: 1.45;
}

#s4 .source {
  margin-top: 18px !important;
  text-align: left !important;
  color: var(--roxo-400) !important;
  font-size: 12px !important;
}

/* Inner + header — mesmo padrão do s3 */
#s4 .estados-standard-inner {
  padding: 44px 58px 32px !important;
}

#s4 .estados-standard-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

#s4 .estados-standard-header .analysis-title {
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
}

#s4 .estados-standard-header .analysis-subtitle {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--roxo-400) !important;
  max-width: 920px !important;
}

#s4 .estados-standard-header .badge-year {
  justify-self: end !important;
  align-self: start !important;
}

/* Card base — mesmo padrão do s3 */
#s4 .estados-chart-card,
#s4 .estados-insight-card {
  background: #fff !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(45,26,70,.06) !important;
}

/* A regra `border: 1px` acima (compartilhada) vem DEPOIS do border-left amarelo do
   card de Leitura e o sobrescrevia (no :is(#s3, #s2b)a ordem é invertida, por isso lá aparece).
   Reaplica o acento amarelo à esquerda + o gradiente, igualando o #s3. */
#s4 .estados-insight-card {
  border-left: 4px solid var(--amarelo-base) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 199, 56,.10), transparent 34%),
    #fff !important;
}

#s4 .estados-chart-card {
  padding: 24px 26px 22px !important;
}

/* Grid 2 colunas — mesmo padrão do s3 (align-items: stretch faz o card da Leitura
   esticar até a altura do card do gráfico, preenchendo o espaço com a borda até embaixo). */
#s4 .estados-standard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
}

/* Header de KPIs — mesmo padrão do s3 */
#s4 .estados-chart-head {
  display: grid !important;
  grid-template-columns: minmax(110px, .4fr) minmax(285px, .85fr) minmax(285px, .85fr) !important;
  gap: 22px !important;
  margin-bottom: 22px !important;
  align-items: center !important;
}

#s4 .country-chip {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--roxo-base) !important;
}

#s4 .metric-chip {
  display: flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(45,26,70,.08) !important;
  border-radius: 22px !important;
  padding: 12px 18px 12px 12px !important;
  min-width: 285px !important;
  box-shadow: 0 12px 28px rgba(45,26,70,.08) !important;
  gap: 16px !important;
}

#s4 .metric-chip .metric-hex {
  width: 112px !important;
  height: 58px !important;
  border-radius: 18px !important;
  clip-path: none !important;
  filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  position: relative !important;
  isolation: auto !important;
  box-shadow: inset 0 -7px 14px rgba(45,26,70,.08), 0 8px 18px rgba(45,26,70,.08) !important;
}

#s4 .metric-chip .metric-hex::before,
#s4 .metric-chip .metric-hex::after {
  display: none !important;
  content: none !important;
}

#s4 .metric-chip.room .metric-hex {
  background: linear-gradient(135deg, #FFC738 0%, var(--amarelo-base) 100%) !important;
  color: var(--roxo-base) !important;
}

#s4 .metric-chip.tarifa .metric-hex {
  background: linear-gradient(135deg, #A35EFF 0%, var(--roxo-400) 100%) !important;
  color: #fff !important;
}

#s4 .metric-title {
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--roxo-base) !important;
}

#s4 .metric-sub {
  margin-top: 7px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--roxo-400) !important;
}

#s4 .ranking-head {
  margin-top: 6px !important;
}

@media (max-width: 1100px) {
  #s4 .estados-standard-grid {
    grid-template-columns: 1fr !important;
  }

  #s4 .estados-insight-card {
    justify-content: flex-start !important;
  }
}

@media (max-width: 900px) {
  #s4 .metric-chip {
    min-width: 0 !important;
    width: 100% !important;
  }

  #s4 .metric-chip .metric-hex {
    width: 96px !important;
    height: 52px !important;
    font-size: 19px !important;
  }

  #s4 .metric-title {
    font-size: 17px !important;
  }

  #s4 .metric-sub {
    font-size: 11px !important;
  }
}

@media (max-width: 760px) {
  #s4 .estados-standard-inner {
    padding: 32px 24px !important;
  }

  #s4 .estados-chart-head,
  #s4 .ranking-head,
  #s4 .estado-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== bloco ===== */

/* ── 1. Scroll progress bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 99999;
  background: rgba(45,26,70,.10);
  pointer-events: none;
}
#scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FFC738 0%, #FFD145 50%, #FFC738 100%);
  background-size: 200% 100%;
  animation: shimmer-bar 1.8s linear infinite;
  transition: width .08s linear;
  border-radius: 0 2px 2px 0;
}
@keyframes shimmer-bar {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 2. Cover hero escuro ── */
body.web-mode .cover-premium {
  background: linear-gradient(160deg, #0E0820 0%, #1E1135 60%, #2D1A46 100%) !important;
  min-height: 60vh !important;
}

/* ── 3. Slide-num oculto ── */
body.web-mode .slide-num { display: none !important; }
body.web-mode .slide { position: relative !important; overflow: visible !important; }
body.web-mode .slide-inner { position: relative !important; z-index: 1 !important; }

/* ── 4. Barra accent antes de cada seção ── */
body.web-mode .slide:not(.cover-premium):not(.full-image-slide):not(.section-card) .slide-inner::before {
  content: '';
  display: block;
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, #FFC738, #6E3FAB);
  border-radius: 99px;
  margin-bottom: 36px;
}

/* ── 5. Alternância de fundo entre slides (classes manuais alt-A/alt-B
   garantem alternação previsível, independente do nth-child do container) ── */
body.web-mode .slide.alt-A {
  background: var(--branco) !important;
}
body.web-mode .slide.alt-B {
  background: var(--cinza-100) !important;
}
/* Fallback genérico de título e subtítulo dos slides analíticos —
   pra quem não tem regra específica (ex: #s6). Regras específicas por slide
   (#s5a, #s7, #s8, #s3/#s2b) continuam vencendo por especificidade maior. */
.analysis-title {
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: var(--roxo-base);
  margin: 0;
}
.analysis-subtitle {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--roxo-400);
  max-width: 900px;
}
/* Override de slides que têm background hardcoded em outras regras
   (#s2b, #s3, #s5, #s5a, #s8 têm "background:#fff!important" em regras anteriores).
   Especificidade :is(#id).classe ganha de :is(#id) */
body.web-mode :is(#s2b, #s3, #s5, #s5a, #s7, #s8).alt-A {
  background: var(--branco) !important;
}
body.web-mode :is(#s2b, #s3, #s5, #s5a, #s7, #s8).alt-B {
  background: var(--cinza-100) !important;
}
body.web-mode .slide.section-card,
body.web-mode .slide.section-card:nth-child(odd),
body.web-mode .slide.section-card:nth-child(even) {
  background:
    radial-gradient(circle at 12% 18%, rgba(254,196,55,.28), transparent 36%),
    linear-gradient(135deg, #1A142D, #564293) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── 6. Tipografia escalada ── */
body.web-mode h1.title-lg {
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -1.8px !important;
  line-height: 1.08 !important;
}
body.web-mode h1.title-md {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
}

/* ── 7. Figuras tabulares nos números ── */
body.web-mode .num,
body.web-mode .card-stat .num {
  font-feature-settings: "tnum" 1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 8. Glow sutil nos gráficos ── */
body.web-mode canvas {
  filter: drop-shadow(0 6px 24px rgba(45,26,70,.09));
}

/* ===== Capa padronizada (coverx): painel diagonal + foto por destino ===== */
.coverx{position:relative;width:100%;aspect-ratio:21/9;max-height:88vh;border-radius:22px;overflow:hidden;background:#160c26;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(19,10,34,.32);}
.coverx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.coverx-panel{position:absolute;left:0;top:0;bottom:0;width:47%;background:linear-gradient(155deg,#4D2D78 0%,#2D1A46 55%,#1c1030 100%);clip-path:polygon(0 0,100% 0,82% 100%,0 100%);padding:0 13% 0 6%;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.8vw,30px);}
.coverx-logo{display:flex;align-items:center;gap:14px;}
.coverx-logo svg{width:clamp(40px,3.4vw,58px);height:auto;}
.coverx-logo span{font-family:Poppins,sans-serif;font-weight:800;font-size:clamp(1.4rem,2.1vw,2.2rem);letter-spacing:.5px;color:#fff;line-height:1;}
.coverx-logo sup{color:#FFC738;font-size:.55em;}
.coverx-chip{align-self:flex-start;background:#FFC738;color:#2D1A46;font-family:Poppins,sans-serif;font-weight:800;letter-spacing:3px;font-size:clamp(.8rem,1.2vw,1.05rem);padding:clamp(8px,.9vw,12px) clamp(16px,1.6vw,24px);border-radius:11px;text-transform:uppercase;}
.coverx-title{font-family:Poppins,sans-serif;font-weight:800;line-height:.88;letter-spacing:-1px;}
.coverx-title .t1{display:block;font-size:clamp(2.6rem,5vw,5.4rem);color:#fff;}
.coverx-title .t2{display:block;font-size:clamp(2.6rem,5vw,5.4rem);color:#FFC738;}
.coverx-year{align-self:flex-start;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(1.1rem,1.6vw,1.6rem);padding:6px 24px;border-radius:13px;letter-spacing:1px;}
.coverx-tag{font-family:Poppins,sans-serif;font-size:clamp(.85rem,1.1vw,1.1rem);color:#C9C2DA;line-height:1.55;}
@media (max-width:760px){.coverx-panel{width:74%;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);}}


/* Gráfico divergente: codifica o SINAL por cor (boa prática) — negativo em vermelho,
   positivo segue âmbar. Mais legível que linha/faixa. :is(#s3, #s2b)e #s4 (coluna Room Night). */
:is(#s3, #s2b) .rn-bar.negative, #s4 .rn-bar.negative { background: #E15554; }

/* Alinhamento do ZERO (gráfico divergente): coluna do valor com largura FIXA.
   Antes era 'auto' e flutuava conforme o texto do % ("+13,9%" vs "−0,4%"),
   deslocando o ponto zero linha a linha. Fixar => zero no mesmo x em todas. :is(#s3, #s2b)e #s4. */
:is(#s3, #s2b) .estado-rn, #s4 .estado-rn { grid-template-columns: 1fr 1fr 60px; }
:is(#s3, #s2b) .estado-rn .estado-value, #s4 .estado-rn .estado-value { justify-self: start; }

/* Barra de TARIFA com valor negativo: vermelha (reflete o sinal, igual ao Room Night). */
:is(#s3, #s2b) .tarifa-bar.negative, #s4 .tarifa-bar.negative { background: #E15554; }

:is(#s3, #s2b) .estado-tarifa .estado-value, #s4 .estado-tarifa .estado-value { justify-self: start; }

/* #s7 Categorias: barra negativa em vermelho. */
#s7 .bar-fill.negative { background: #E15554; }

/* Labels como pill colorido (mesmo padrão do #s3 mas com sinal por cor). */
#s7 .value-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 10px;
  border-radius: 100px;
  background: #EEF6D9;
  color: #17813A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
#s7 .value-label.negative {
  background: #FCE4D8;
  color: #C94719;
}

/* Coluna SEM negativos: ancora as barras a esquerda (colapsa o lado negativo), sem espaco vazio. */
:is(#s3, #s2b) .estado-rn.no-neg, :is(#s3, #s2b) .estado-tarifa.no-neg, #s4 .estado-rn.no-neg, #s4 .estado-tarifa.no-neg { grid-template-columns: 0fr 1fr 60px; }

/* ===================================================================
   #s5 Analise de comportamento — Cards roxos uniformes (substitui o
   layout antigo .bf-metrics; classes .bf-card/.bf-cards aplicadas)
   =================================================================== */
#s5 .bf-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
#s5 .bf-card {
  background: linear-gradient(135deg, var(--roxo-base, #2D1A46), var(--roxo-600, #4D2D78));
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(45,26,70,.18);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  row-gap: 14px;
  align-items: center;
}
#s5 .bf-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 199, 56,.18);
  color: var(--amarelo-base, #FFC738);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  grid-column: 1;
  grid-row: 1;
}
#s5 .bf-card-icon svg { width: 22px; height: 22px; }
#s5 .bf-card-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amarelo-base, #FFC738);
  margin-bottom: 0;
  grid-column: 2;
  grid-row: 1;
}
#s5 .bf-card-num-row,
#s5 .bf-card-compare,
#s5 .bf-card-insight {
  grid-column: 1 / -1;
}
#s5 .bf-card-num-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
#s5 .bf-card-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}
#s5 .bf-card-unit {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}
#s5 .bf-card-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14px;
  color: rgba(255,255,255,.8);
}
#s5 .bf-card-compare > span:first-child { flex: 1; }
#s5 .bf-card-delta {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
#s5 .bf-card-delta.bf-delta-positive { background: rgba(46,155,92,.4); color: #fff; }
#s5 .bf-card-delta.bf-delta-negative { background: rgba(220,64,64,.4); color: #fff; }
/* Excecao: queda de cancelamento e' boa (verde); alta e' ruim (vermelho) */
#s5 .bf-card[data-metric="cancelamento"] .bf-card-delta.bf-delta-negative {
  background: rgba(46,155,92,.4);
  color: #fff;
}
#s5 .bf-card[data-metric="cancelamento"] .bf-card-delta.bf-delta-positive {
  background: rgba(198,40,40,.22);
  color: #FF7B7B;
}
#s5 .bf-card-insight {
  font-size: 15px;
  color: rgba(255,255,255,.88);
  margin-top: 10px;
  line-height: 1.5;
}
#s5 .bf-card-insight strong {
  color: var(--amarelo-light, #FFD145);
  font-weight: 600;
}
@media (max-width: 900px) {
  #s5 .bf-cards { grid-template-columns: 1fr; }
}

/* ================================================================
   MOBILE — Fase 1 (13/07/2026): elimina o OVERFLOW HORIZONTAL e deixa
   o relatório legível em telas estreitas. Só afeta <=760px; desktop
   permanece 100% intacto.
   ================================================================ */
/* hambúrguer: escondido no desktop, só aparece no mobile (regra abaixo) */
.nav-hamburger { display: none; }

@media (max-width: 760px) {
  /* guarda dura: nada rola a página pros lados */
  html, body { overflow-x: hidden !important; max-width: 100vw; }

  /* NAV mobile: sem menu — navegação por scroll (barra fica só com a marca).
     O hambúrguer/painel abaixo ficam desligados (display:none); é só trocar
     para 'flex' aqui se um dia quiser reativar o menu mobile. */
  /* NAV MOBILE EM 1 LINHA: logos + "Hotel Report 2026" + seletor de destino + PDF.
     Texto encurtado (o seletor já mostra a cidade); badge "Atualizado" escondido. */
  .nav-inner, .nav-bar .nav-inner, body.web-mode .nav-bar .nav-inner {
    flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; }
  .nav-links { display: flex !important; align-items: center; gap: 6px !important;
    margin-left: auto !important; flex: 0 0 auto !important; }
  .nav-links > *:not(.nav-actions-cluster) { display: none !important; }
  .nav-hamburger { display: none !important; }
  /* No mobile, os controles de EDIÇÃO e selos de debug somem */
  #auto-toggle, #origin-toggle, #hn-toggle,
  #inlineEditToggle, #peekEditBtn, .peek-cluster { display: none !important; }
  .param-badge, .auto-badge { display: none !important; }

  /* texto da marca CURTO: "Hotel Report 2026" (esconde UF/destino/separadores e o
     badge "Atualizado"); o texto real vira font-size:0 e o ::before mostra o curto. */
  .nav-brand-text { display: block !important; min-width: 0 !important; }
  .nav-brand-text .nav-brand-badge { display: none !important; }
  .nav-brand-sub { font-size: 0 !important; white-space: nowrap !important; line-height: 1.2 !important; }
  /* os <b> da UF/destino têm font-size:13px inline !important; escondemos p/ sobrar só o ::before */
  .nav-brand-sub b { display: none !important; }
  .nav-brand-sub::before { content: "Hotel Report 2026"; font-size: 13px !important;
    font-weight: 600 !important; color: #b9a9de !important; letter-spacing: 0; white-space: nowrap; }
  /* gaps apertados (alta especificidade p/ vencer o gap:14 base) p/ caber em 1 linha */
  .nav-bar .nav-brand, body.web-mode .nav-bar .nav-brand {
    min-width: 0 !important; gap: 6px !important; flex: 0 1 auto !important; }
  .nav-bar .nav-cobranding, body.web-mode .nav-bar .nav-cobranding { gap: 6px !important; }
  /* remove a divisória vertical à direita do "Hotel Report 2026" (entre o texto e o
     seletor) — mantém a divisória entre os logos. */
  .nav-brand-text, .nav-brand-sub { border: 0 !important; }
  .nav-brand-text::after, .nav-brand-sub::after,
  .nav-links::before, .nav-links::after { display: none !important; content: none !important; }
  .nav-links, .nav-bar .nav-links { border: 0 !important; }
  /* logos menores p/ tudo caber em 1 linha */
  body.web-mode .nav-bar .nav-brand img.nav-logo-omni,
  body.web-mode .nav-bar .nav-cobranding img,
  body.web-mode .nav-bar .nav-cobranding svg {
    height: 32px !important; max-height: 32px !important; width: auto !important;
    min-height: 0 !important; }

  /* remove a pílula/borda em volta do seletor+PDF (a borda esquerda dela era a "linha"
     que aparecia colada no "Hotel Report 2026") */
  .nav-bar .nav-actions-cluster { display: inline-flex !important; align-items: center; gap: 8px !important;
    margin-left: auto !important; flex: 0 0 auto !important; overflow: visible !important;
    border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
  .nav-bar .nav-actions-cluster > .estado-selector {
    display: inline-block !important; width: auto !important; flex: 0 1 auto !important;
    min-width: 68px !important; max-width: 26vw !important; font-size: 12px !important;
    padding-left: 9px !important; padding-right: 24px !important; }
  .nav-bar .nav-actions-cluster > .print-btn { display: inline-flex !important; flex: 0 0 auto; }
  /* menu aberto: nav-links vira painel vertical abaixo da barra, com todos os links */
  .nav-bar.mobile-nav-open .nav-links {
    display: flex !important; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin: 0;
    background: #1b1030; border-top: 1px solid rgba(255,255,255,.12);
    padding: 10px 16px 18px; max-height: 74vh; overflow-y: auto; gap: 4px;
    box-shadow: 0 20px 44px rgba(0,0,0,.45); max-width: 100%; }
  .nav-bar.mobile-nav-open .nav-dropdown { display: block; }
  .nav-bar.mobile-nav-open .nav-group-btn { width: 100%; text-align: left; padding: 10px 4px 4px;
    color: #B9A9D9 !important; font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
    background: transparent !important; box-shadow: none !important; border: 0 !important; }
  .nav-bar.mobile-nav-open .nav-caret { display: none; }
  .nav-bar.mobile-nav-open .nav-dropdown-menu {
    position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important;
    transform: none !important; max-height: none !important; background: transparent !important;
    box-shadow: none !important; border: 0 !important; padding: 0 0 6px 6px !important; min-width: 0 !important; }
  .nav-bar.mobile-nav-open .nav-dropdown-item { padding: 9px 8px !important; border-radius: 8px;
    color: #EBE5F4 !important; font-size: 15px !important; }
  .nav-bar.mobile-nav-open .nav-dropdown-item:hover,
  .nav-bar.mobile-nav-open .nav-dropdown-item:active { background: rgba(255,255,255,.08) !important; }
  .nav-bar.mobile-nav-open .nav-item-icon { color: #FFC738 !important; opacity: .95 !important; }
  /* mata a setinha/losango decorativo do dropdown no menu vertical */
  .nav-bar.mobile-nav-open .nav-dropdown-menu::before,
  .nav-bar.mobile-nav-open .nav-dropdown-menu::after { display: none !important; }

  /* container e slides FULL-BLEED no mobile: edge-to-edge, sem cantos
     arredondados, sem borda/sombra/gap (visual de tela cheia, não "card") */
  .container { max-width: 100% !important; padding: 0 !important; }
  .slide { border-radius: 0 !important; margin-bottom: 0 !important;
    box-shadow: none !important; border: 0 !important; }
  .slide-inner { padding: 24px 16px !important; }
  /* estes slides forçam padding lateral 66px por uma regra desktop de alta
     especificidade (body.web-mode #sN .slide-inner) que ganhava do reset acima
     e espremia o conteúdo p/ ~258px. Espelhamos a especificidade p/ 16px. */
  body.web-mode :is(#s2b,#s3,#s4,#s5,#s5a,#s6,#s7,#s8,#s8a,#s9,#s9a,#s10,#s12) .slide-inner {
    padding-left: 16px !important; padding-right: 16px !important; }

  /* cards de conteúdo nunca passam da largura da tela */
  .estados-chart-card, .estados-insight-card,
  .altos-standard-card, .section-card, .card, .bf-card { max-width: 100%; }

  /* REFLOW dos grids de 2 colunas -> 1 coluna ENCOLHÍVEL (minmax(0,1fr) deixa
     descer abaixo do min-content; 1fr sozinho não deixava e forçava 778px) */
  /* GENÉRICO: qualquer grid *-standard-grid / *-cards-grid (estados, reservas,
     altos, categoria...) vira 1 coluna encolhível — pega todos de uma vez */
  [class*="standard-grid"], [class*="cards-grid"], .desempenho-layout,
  .estados-standard-inner { grid-template-columns: minmax(0, 1fr) !important; }
  /* filhos de grid/flex podem encolher (mata o overflow por min-content) */
  [class*="standard-grid"] > *, [class*="cards-grid"] > *, .desempenho-layout > *,
  .estados-chart-card, .estados-insight-card,
  .reservas-standard-chart, .reservas-standard-insight,
  .estados-ranking, .estados-chart-head, .ranking-head { min-width: 0 !important; max-width: 100% !important; }

  /* gráficos e tabelas/rankings densos ROLAM dentro do próprio card (não vazam) */
  .auto-badge-wrap, .estados-chart-card, .estados-insight-card, .estados-ranking,
  .reservas-standard-chart, .reservas-standard-insight { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* tabela OTB (8 colunas): CABE TUDO em uma tela (sem rolagem). Layout fixo p/
     colunas de largura igual + fonte/padding compactos; nowrap p/ não quebrar. */
  #s9a .otb-table { display: table !important; width: 100% !important; min-width: 0 !important;
    table-layout: fixed !important; border-spacing: 0 6px !important; }
  #s9a .otb-table th { font-size: 8px !important; letter-spacing: 0 !important;
    padding: 4px 1px !important; white-space: nowrap !important; }
  #s9a .otb-table td { font-size: 11px !important; padding: 9px 1px !important;
    white-space: nowrap !important; }
  #s9a .otb-table th:first-child, #s9a .otb-table td:first-child {
    font-size: 12px !important; padding-left: 6px !important; width: 74px !important; }
  #s9a .otb-table .cell-arrow, #s9a .otb-table td span { letter-spacing: -1px !important; }

  /* BARRAS de regiões/estados (#s2b/#s3) no mobile:
     - menos respiro vertical (gap 22 -> 7 dentro da região; 14 entre regiões)
     - barras SEM negativo colapsam a metade negativa (0 1fr auto) e usam a largura
       toda, ficando ~2x mais longas (antes só ocupavam a metade positiva do eixo). */
  /* RANKING lado a lado no mobile também (ROOM NIGHT | TARIFA MÉDIA em colunas), como
     no desktop — com fonte/barras menores pra caber. Cada célula: barra crescendo da
     esquerda + valor ao lado; negativo = barra vermelha com sinal "-". */
  :is(#s2b,#s3,#s4) .estado-row {
    grid-template-columns: minmax(46px, .5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important; align-items: center !important; }
  :is(#s2b,#s3,#s4) .ranking-table { gap: 10px !important; margin-top: 12px !important; }
  /* eixo DIVERGENTE proporcional (largura das metades vem das vars do JS); aqui só a
     largura da pílula de valor e o min-width. O grid em si é a regra universal no fim. */
  :is(#s2b,#s3,#s4) .estado-rn, :is(#s2b,#s3,#s4) .estado-tarifa {
    --rank-val-w: 30px; min-width: 0 !important; gap: 0 !important; }
  :is(#s2b,#s3,#s4) .estado-value {
    min-width: 30px !important; padding: 2px 2px !important; font-size: 8.5px !important; }
  :is(#s2b,#s3,#s4) .estado-uf { font-size: 9.5px !important; line-height: 1.1 !important; }
  :is(#s2b,#s3,#s4) .rn-bar, :is(#s2b,#s3,#s4) .tarifa-bar { height: 12px !important; }
  /* cabeçalhos de coluna alinhados às colunas (ROOM NIGHT | TARIFA MÉDIA) */
  :is(#s2b,#s3,#s4) .ranking-head {
    display: grid !important;
    grid-template-columns: minmax(46px, .5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important; margin: 2px 0 6px !important; }
  :is(#s2b,#s3,#s4) .ranking-head span {
    padding-left: 0 !important; font-size: 11px !important; display: block !important;
    text-align: center !important; letter-spacing: 0 !important; }
  /* alinha sobre as barras (compensa a pílula de valor de 32px à direita) */
  :is(#s2b,#s3,#s4) .ranking-head span:nth-child(2),
  :is(#s2b,#s3,#s4) .ranking-head span:nth-child(3) { transform: translateX(-16px) !important; }
  :is(#s2b,#s3,#s4) .ranking-head span:first-child { display: block !important; }
  /* o contorno tracejado da linha destacada (is-es) era cortado pelo overflow-x:auto
     do .estados-ranking; as barras agora cabem, então o scroll ali é desnecessário. */
  :is(#s2b,#s3,#s4) .estados-ranking { overflow: visible !important; }
  :is(#s2b,#s3,#s4) .estado-row.is-es { outline-offset: 3px !important; }

  /* #s6: cards 2024/2025/2026 na MESMA LINHA (a regra genérica de reflow os empilhava).
     :has(> .card-stat) mira só o trio de anos. */
  #s6 .slide-inner > div:has(> .card-stat) {
    grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; }
  #s6 .card-stat { padding: 11px 7px !important; }
  /* número "R$ 350" (2º filho) não pode quebrar; encolhe p/ caber (~98px).
     3º filho (delta OU "ponto de partida") fica pequeno como subtítulo. */
  #s6 .card-stat > div:nth-child(2) {
    font-size: 20px !important; white-space: nowrap !important; letter-spacing: -.5px !important; }
  #s6 .card-stat > div:nth-child(3) { font-size: 10px !important; }

  /* #s8: os 2 donuts de pagamento (com legendas detalhadas) não cabem lado a lado
     numa tela estreita sem cortar; empilhamos, cada um com largura cheia e legenda
     confortável. min-width:0 evita que a coluna force overflow. */
  #s8 .payment-split { grid-template-columns: 1fr !important; gap: 14px !important; }
  #s8 .payment-col { min-width: 0 !important; }

  /* #s9 tabela de pesquisas: grid inline "44px 2fr 150px 140px 110px" (~490px)
     estourava e cortava a coluna HOTÉIS. Recompomos p/ caber em 358px:
     rank estreito, destino flexível, e colunas de dado compactas. */
  #s9 [style*="44px 2fr"] {
    grid-template-columns: 24px minmax(0,1fr) 66px 48px 34px !important;
    column-gap: 5px !important; }
  #s9 [style*="44px 2fr"] > div { font-size: 12px !important; min-width: 0 !important; }
  /* cabeçalho (fundo roxo-base) precisa de fonte bem menor p/ os rótulos não colidirem */
  #s9 [style*="44px 2fr"][style*="--roxo-base"] > div {
    font-size: 8px !important; letter-spacing: 0 !important; }

  /* KPIs do OTB (#s9a): eram 4 cards enormes empilhados, desproporcionais à tabela.
     Viram 2x2 com número e padding menores. (o :has evita pegar a <table>.auto-badge-wrap) */
  #s9a .auto-badge-wrap:has(> .metric-tile) {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #s9a .metric-tile { padding: 14px 10px !important; }
  #s9a .metric-big { font-size: 27px !important; }

  /* capa: brilho decorativo não transborda */
  .cover-shine { display: none !important; }

  /* CAPA: mata o min-height:60vh (=~506px) que deixava um VÃO enorme embaixo
     do card no mobile — o slide passa a caber no conteúdo real */
  body.web-mode .cover-premium, .cover-premium { min-height: 0 !important; }
  .cover-premium .slide-inner { padding-bottom: 20px !important; }

  /* ---- TIPOGRAFIA: títulos grandes escalam no mobile. Prefixo body.web-mode
     p/ vencer as regras específicas (ex.: .section-card .section-title-big=84px) ---- */
  body.web-mode .section-card .section-title-big,
  body.web-mode .section-title-big,
  .section-title-big { font-size: clamp(28px, 8.5vw, 40px) !important; line-height: 1.06 !important; letter-spacing: -1px !important; }
  body.web-mode h1.title-lg, .slide h1.title-lg, h1.title-lg { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.14 !important; }
  body.web-mode h1.title-md, .slide h1.title-md, h1.title-md { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.18 !important; }
  body.web-mode .slide p, .slide p { font-size: 15px !important; line-height: 1.55 !important; }

  /* ---- REFLOW: grids INLINE de 2/3 colunas -> 1 coluna (cards de oportunidade etc.) ---- */
  [style*="grid-template-columns:repeat"] { grid-template-columns: 1fr !important; }
  .opp-card { min-width: 0 !important; }

  /* ================= CAPA vira HERO VERTICAL no mobile =================
     Card retrato: foto de fundo + painel escuro semitransparente full-width
     por cima (sem o corte diagonal), texto ancorado embaixo. */
  #s1 .cover-box { aspect-ratio: 1 / 1 !important; border-radius: 0 !important; }
  #s1 .cover-edge { display: none !important; }
  /* A foto tem enquadramento (pan `x` do posicoes.json) pensado p/ o layout diagonal
     do desktop, onde o painel roxo TAPA a faixa descoberta à esquerda. No mobile o
     painel é gradiente vertical e essa faixa vira uma "borda preta". Aqui resetamos a
     foto p/ cover cheio (sem pan/zoom), que preenche o box quadrado inteiro. */
  #s1 .cover-box > img {   /* SÓ a foto (filha direta) — não os logos, que ficam no painel */
    width: 100% !important; height: 100% !important;
    left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
    transform: none !important; animation: none !important;
    object-fit: cover !important; object-position: 50% 50% !important;
  }
  #s1 .cover-panel {
    position: relative !important; width: 100% !important; height: 100% !important;
    clip-path: none !important; box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(20,10,32,.28) 0%, rgba(20,10,32,.78) 56%, rgba(20,10,32,.95) 100%) !important;
    justify-content: flex-end !important; gap: 10px !important;
    padding: 20px 20px 52px !important;
  }
  /* cobranding no hero: Omnibees | HotelierNews (a HN VOLTA — cabe no painel full-width) */
  #s1 img[alt="Omnibees"] { height: 24px !important; }
  #s1 .cover-hn { display: block !important; }
  #s1 img.cover-hn[alt="HotelierNews"] { height: 17px !important; }
  #s1 span.cover-hn { height: 22px !important; }
  #s1 .cover-chip { font-size: 12px !important; padding: 6px 14px !important; letter-spacing: 2px !important; }
  #s1 .cover-title span { font-size: clamp(40px, 14vw, 66px) !important; }
  #s1 .cover-year { font-size: 15px !important; padding: 6px 18px !important; }
  #s1 .cover-tag { font-size: 13px !important; }

  /* legenda "Vista em destaque" menor e afastada da borda */
  #s1 .cover-cap { padding: 5px 10px !important; gap: 6px !important;
    right: 10px !important; bottom: 10px !important; max-width: 72% !important; }
  #s1 .cover-cap .cover-cap-txt { font-size: 10.5px !important; line-height: 1.2 !important; }

  /* ---- (c) #s2b/#s3/#s4: cabeçalho do resumo. Título (país/UF) ocupa a linha toda
     e os cards Room Night + Tarifa Média ficam LADO A LADO (2 colunas). ---- */
  :is(#s3, #s2b, #s4) .estados-chart-head {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important; align-items: stretch !important; }
  :is(#s3, #s2b, #s4) .estados-chart-head > .country-chip { grid-column: 1 / -1 !important; }
  :is(#s3, #s2b, #s4) .metric-chip {
    width: auto !important; max-width: 100% !important; min-width: 0 !important;
    padding: 11px 8px 11px 8px !important; gap: 8px !important; }
  /* hexágono "+5.7%" era 96px (quase a chip toda) e empurrava o texto "ROOM NIGHT"
     pra fora. Encolhemos o hexágono e o título p/ tudo caber na chip estreita. */
  :is(#s3, #s2b, #s4) .metric-hex {
    min-width: 0 !important; width: auto !important; flex: 0 0 auto !important;
    font-size: 14px !important; padding: 8px 8px !important; }
  :is(#s3, #s2b, #s4) .metric-title { font-size: 12px !important; line-height: 1.12 !important; }
  :is(#s3, #s2b, #s4) .metric-sub { font-size: 9px !important; }

  /* ---- #s11 OBRIGADO: os ícones sociais estavam colados no card translúcido ---- */
  #s11 .s11-glass { margin-top: 22px !important; }

  /* ---- Rodapé co-branding (source + logos Omnibees|HotelierNews) ----
     No desktop é space-between (source esq. / logos dir.). No mobile a row quebra e
     os logos ficavam soltos à ESQUERDA. Centraliza o conteúdo quando empilha. ---- */
  /* Empilha em coluna centralizada: texto (source) em cima, logos embaixo, os dois
     no centro. Robusto p/ source curto (#s8) e longo (#s9) — não depende de
     flex-grow/justify numa linha só, que deixava os logos soltos na ponta. */
  .cobranding-row { flex-direction: column !important; align-items: center !important;
    justify-content: center !important; text-align: center !important; row-gap: 12px !important; }
  .cobranding-row .analysis-source, .cobranding-row .bf-source, .cobranding-row .source { text-align: center !important; }
  .cobranding-footer { justify-content: center !important; }
}

/* ===== COVER desktop 761–1068px: cobranding (Omnibees | HotelierNews) transbordava
   o painel diagonal e cortava a logo do parceiro. Deixamos os logos ENCOLHEREM p/
   caber no espaço útil do painel (flex-shrink + height:auto preserva o aspecto).
   Acima de ~1068px o painel já é largo o suficiente e os logos ficam no tamanho cheio. */
@media (min-width: 761px) and (max-width: 1068px) {
  /* o min-height:60vh do cover deixa um vão roxo embaixo quando o cover-box
     (aspect-ratio) fica mais baixo que 60vh (abaixo de ~959px). Some com o vão. */
  body.web-mode .cover-premium, #s1.cover-premium { min-height: 0 !important; }
  /* alturas explícitas (fluido via clamp): maiores que o "encolhido pra caber", mas
     ainda dentro do painel antes da diagonal. Avança um pouco na margem de segurança. */
  #s1 .cover-panel > div:has(> img.cover-hn) { min-width: 0; margin-right: -40px; }
  #s1 .cover-panel > div:has(> img.cover-hn) > img[alt="Omnibees"] {
    height: clamp(28px, 4.2vw, 38px) !important; width: auto !important; min-width: 0; }
  #s1 .cover-panel > div:has(> img.cover-hn) > img.cover-hn {
    height: clamp(19px, 2.85vw, 26px) !important; width: auto !important; min-width: 0; }
}

/* ===== NAV COMPACTO no desktop encolhido (761–1100px) =====
   O nav completo (marca 330px + menu Abertura/Mercado/Insights/Fechamento + seletor +
   PDF) precisa de ~1300px e ESTOURAVA a página abaixo disso (faixa branca + scroll +
   logo esmagado), inclusive em produção. Abaixo de 1100px a barra vira o formato
   compacto: marca enxuta (logos, sem o texto) + seletor de destino + PDF, sem os
   dropdowns. Acima de 1320px o menu completo volta (é onde ele cabe). Não afeta o mobile (≤760). */
@media (min-width: 761px) and (max-width: 1320px) {
  .nav-inner { padding-left: 8px !important; }
  .nav-links { display: flex !important; align-items: center; gap: 8px !important;
    margin-left: auto !important; flex: 0 0 auto !important; }
  .nav-links > *:not(.nav-actions-cluster) { display: none !important; }
  .nav-hamburger { display: none !important; }
  /* o "Menu peek" (botão flutuante de acesso ao menu recolhido) sobrepunha o selo 2026
     e o conteúdo; no nav compacto navega-se por scroll (igual mobile), então some. */
  #menuPeekBtn, .menu-peek-btn { display: none !important; }
  /* MANTÉM o texto da marca (Hotel Report · PR · Curitiba · 2026 + "Atualizado");
     cabe sobrando quando só os dropdowns do menu são escondidos. */
  .nav-brand { min-width: 0 !important; gap: 10px !important; }
  .nav-cobranding { gap: 10px !important; }
  body.web-mode .nav-bar .nav-brand img.nav-logo-omni,
  body.web-mode .nav-bar .nav-cobranding img,
  body.web-mode .nav-bar .nav-cobranding svg {
    height: 40px !important; max-height: 40px !important; width: auto !important; min-height: 0 !important; }
  .nav-inner { gap: 10px !important; }
  .nav-bar .nav-actions-cluster { display: inline-flex !important; align-items: center; gap: 8px !important;
    margin-left: auto !important; flex: 0 0 auto !important; overflow: visible !important; }
  .nav-bar .nav-actions-cluster > .estado-selector {
    display: inline-block !important; width: auto !important;
    min-width: 120px !important; max-width: 300px !important; font-size: 14px !important;
    padding-left: 14px !important; padding-right: 32px !important; }
  .nav-bar .nav-actions-cluster > .print-btn { display: inline-flex !important; flex: 0 0 auto; }
}

/* ===== Desktop estreito (761–1023px): os slides de desempenho (#s2b/#s3/#s4) tinham
   cards com largura mínima ~778px que não cabia na área útil — abaixo de ~860px
   vazava a página; entre 861–1023px ficava DESCENTRALIZADO (mais margem à esquerda
   que à direita). 1 coluna fluida + cards presos a 100% resolve. De 1024px pra cima
   o layout desktop 2-colunas do desempenho (gráfico | leitura) só cabe a partir de
   ~1300px; abaixo disso ele QUEBRAVA (barras de Tarifa invadiam a leitura). Por isso
   o tratamento de coluna única vai até 1299px. ===== */
@media (min-width: 761px) and (max-width: 1299px) {
  /* PADDING LATERAL UNIFORME em todos os slides de conteúdo (padroniza o espaçamento
     entre os blocos e a borda — antes variava de 22 a 66px). */
  body.web-mode :is(#s2,#s2a,#s2b,#s3,#s4,#s5,#s5a,#s6,#s7,#s8,#s8a,#s9,#s9a,#s10,#s12) .slide-inner {
    padding-left: 26px !important; padding-right: 26px !important; }
  :is(#s3, #s2b, #s4) .estados-standard-grid,
  :is(#s3, #s2b) .desempenho-layout { grid-template-columns: 1fr !important; }
  :is(#s2b,#s3,#s4) .estados-chart-card,
  :is(#s2b,#s3,#s4) .estados-insight-card,
  :is(#s2b,#s3,#s4) .estados-standard-inner,
  :is(#s2b,#s3,#s4) .metric-chip,
  :is(#s2b,#s3,#s4) .estados-ranking { max-width: 100% !important; min-width: 0 !important; }
  /* chips do resumo (RN/Tarifa): gap/padding menores p/ caber na faixa estreita */
  :is(#s2b,#s3,#s4) .estados-chart-head { gap: 10px !important; }
  :is(#s2b,#s3,#s4) .metric-chip { padding: 12px 10px 12px 10px !important; gap: 10px !important; }

  /* RANKING lado a lado (ROOM NIGHT | TARIFA MÉDIA) preservado — o card do gráfico está
     em largura cheia (grid externo 1fr), então cabe sem empilhar. Só reduzimos um pouco
     as larguras mínimas das colunas p/ caber na ponta estreita da faixa. */
  :is(#s3, #s2b, #s4) .estado-row {
    grid-template-columns: minmax(84px, .5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important; }
  :is(#s3, #s2b, #s4) .estado-rn, :is(#s3, #s2b, #s4) .estado-tarifa { min-width: 0 !important; }
  :is(#s2b,#s3,#s4) .estado-value { min-width: 40px !important; }
  /* cabeçalho = grid IGUAL à estado-row, com ROOM NIGHT/TARIFA centralizados sobre
     cada coluna e fonte legível (estava minúsculo e o TARIFA desalinhava). */
  :is(#s2b,#s3,#s4) .ranking-head {
    display: grid !important;
    grid-template-columns: minmax(84px, .5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important; margin-bottom: 8px !important; }
  :is(#s2b,#s3,#s4) .ranking-head span {
    padding-left: 0 !important; text-align: center !important;
    font-size: 14px !important; letter-spacing: .5px !important; }
  /* alinha o cabeçalho sobre as BARRAS (eixo zero), não sobre a coluna inteira —
     compensa a pílula de valor (60px) que fica à direita e puxava o centro. */
  :is(#s2b,#s3,#s4) .ranking-head span:nth-child(2),
  :is(#s2b,#s3,#s4) .ranking-head span:nth-child(3) { transform: translateX(-30px) !important; }
  :is(#s2b,#s3,#s4) .ranking-head span:first-child { display: block !important; }
}

/* ===== RANKING: grid com eixo PROPORCIONAL (mata o "buraco" da metade negativa) =====
   As vars --rn-neg-fr/--rn-pos-fr/--adr-neg-fr/--adr-pos-fr vêm do JS (_rankAxis):
   a metade negativa tem só a largura do maior negativo da coluna, então as linhas
   positivas não deixam vão vazio à esquerda, e a escala (px por %) é preservada.
   Vale em todas as larguras (mobile, estreito e desktop). --rank-val-w = pílula. */
:is(#s2b,#s3,#s4) .estado-rn {
  grid-template-columns: var(--rn-neg-fr, 1fr) var(--rn-pos-fr, 1fr) var(--rank-val-w, 60px) !important; }
:is(#s2b,#s3,#s4) .estado-tarifa {
  grid-template-columns: var(--adr-neg-fr, 1fr) var(--adr-pos-fr, 1fr) var(--rank-val-w, 60px) !important; }