/* COMPROVALOG — Refinamentos de acabamento (carregado por último).
   1) Menu "Mais"  2) Cartões de planos alinhados  3) Sombras mais discretas  4) Bloco TMS fiscal.
   Não altera textos, valores, links nem comportamento dos componentes existentes. */

/* =====================================================================
   1) MENU — submenu "Mais" e destaque do "Acessar COMPROVALOG"
   ===================================================================== */
.navbar-more { position: relative; }
.navbar-more-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding: 8px clamp(6px, .6vw, 12px);
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: clamp(.78rem, .3vw + .54rem, .87rem); font-weight: 600; color: #33415c;
  white-space: nowrap;
}
.navbar-more-toggle:hover, .navbar-more.is-open .navbar-more-toggle { color: var(--cl-blue); background: #f0f6ff; }
.navbar-more-chevron { transition: transform .2s ease; }
.navbar-more.is-open .navbar-more-chevron { transform: rotate(180deg); }
.navbar-more:has(a[aria-current="location"]) .navbar-more-toggle { color: var(--cl-blue); }
.navbar-more-toggle:focus-visible { outline: 3px solid #81b2ff; outline-offset: 2px; }

@media (min-width: 1221px) {
  .navbar-more-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    min-width: 190px; margin: 0; padding: 6px; list-style: none;
    border: 1px solid #dfe8f5; border-radius: 14px; background: #fff;
    box-shadow: 0 14px 34px rgba(10, 30, 70, .12);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .navbar-more.is-open .navbar-more-menu { opacity: 1; visibility: visible; transform: none; }
  .navbar-more-menu li { display: block; }
  .navbar-nav .navbar-more-menu a,
  .navbar-more-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    min-height: 40px; padding: 8px 12px;
    border: 0; border-radius: 9px; background: none; cursor: pointer;
    font: inherit; font-size: .86rem; font-weight: 600; color: #33415c; text-align: left;
  }
  .navbar-nav .navbar-more-menu a:hover, .navbar-more-menu button:hover,
  .navbar-nav .navbar-more-menu a:focus-visible, .navbar-more-menu button:focus-visible { background: #f0f6ff; color: var(--cl-blue); outline: none; }
  .navbar-nav .navbar-more-menu a[aria-current="location"] { color: var(--cl-blue); background: #eef5ff; }
  .navbar-nav .navbar-more-menu a[aria-current="location"]::after { display: none; }
  .navbar-more-menu .navbar-video-icon { width: 20px; height: 20px; flex: none; }
  .navbar-more-video { display: none !important; }

  /* "Acessar COMPROVALOG" em destaque */
  .navbar-actions .navbar-access {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 8px 18px;
    border-radius: 999px; font-size: .82rem; font-weight: 750;
    box-shadow: 0 4px 12px rgba(0, 87, 219, .22);
  }
  .navbar-actions .navbar-access:hover { box-shadow: 0 6px 16px rgba(0, 87, 219, .26); }
  .navbar-access-arrow { transition: transform .2s ease; }
  .navbar-access:hover .navbar-access-arrow { transform: translateX(2px); }
}
/* Em telas de computador mais estreitas, "Ver vídeo" passa para dentro de "Mais"
   (o botão de vídeo da capa continua visível). */
@media (min-width: 1221px) and (max-width: 1299px) {
  .navbar-actions .navbar-video { display: none; }
  .navbar-more-video { display: block !important; }
}

/* Menu do celular/tablet: "Mais" vira um grupo compacto, sempre visível */
@media (max-width: 1220px) {
  .navbar-more { margin-top: 6px; padding-top: 10px; border-top: 1px solid #e6edf7; }
  .navbar-more-toggle { pointer-events: none; padding: 0 12px 6px; min-height: 0; background: none !important; color: #7290bb !important; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .navbar-more-chevron { display: none; }
  .navbar-more-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0 4px; list-style: none; }
  .navbar-more-video { display: none; }
  .navbar-nav .navbar-more-menu a {
    justify-content: center; min-height: 40px; padding: 8px 6px;
    border: 1px solid #dbe6f6; border-radius: 10px; background: #f7faff;
    font-size: .86rem;
  }
  .navbar-nav .navbar-more-menu a::before { display: none; }
  .navbar-nav { gap: 1px; }
  .navbar-nav > li > a { min-height: 40px; }
}

/* =====================================================================
   2) PLANOS — cartões alinhados (logística e condomínios)
   ===================================================================== */
#planos .pricing-art { height: 142px; padding: 6px 10px; margin: 10px -8px 6px; }
#planos .pricing-art img { object-fit: contain; object-position: center; }

/* Com subgrid, título, descrição, preço, lista e botão ficam na mesma altura
   em todos os cartões da linha, sem alturas fixas. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    #planos .grid-4 { row-gap: 0; align-items: stretch; }
    #planos .grid-4 > .pricing-card {
      display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0;
      height: auto; margin-bottom: 18px;
    }
    #planos .pricing-card .pricing-volume,
    #planos .pricing-card .pricing-note,
    #planos .pricing-card .pricing-price { min-height: 0; }
    #planos .pricing-card .pricing-price { align-self: start; }
    #planos .pricing-card .pricing-features { align-self: start; margin-bottom: 22px; }
    #planos .pricing-card .btn { align-self: end; margin-top: 0; }
  }
}
#planos .pricing-card.is-featured { box-shadow: 0 14px 34px rgba(0, 102, 255, .12); }
#planos .pricing-card { box-shadow: 0 8px 24px rgba(8, 27, 58, .045); }
#planos .pricing-card:hover { box-shadow: 0 12px 30px rgba(8, 27, 58, .08); }
@media (max-width: 640px) {
  #planos .pricing-art { height: 150px; }
}

/* =====================================================================
   3) SOMBRAS E BRILHOS — mais discretos, mesmas cores
   ===================================================================== */
.btn-primary { box-shadow: 0 4px 12px rgba(0, 102, 255, .2); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(0, 102, 255, .24); }
.btn-primary:active { box-shadow: 0 2px 6px rgba(0, 102, 255, .22); }
.btn:focus-visible { outline: 3px solid #81b2ff; outline-offset: 3px; }

.cover-btn--app { box-shadow: 0 6px 16px rgba(22, 163, 74, .26); }
.cover-btn--app:hover { box-shadow: 0 8px 20px rgba(22, 163, 74, .3); }
.cover-btn--app:active, .cover-btn--video:active { transform: translateY(0); }
.cover-rot-item--hl { box-shadow: 0 4px 14px rgba(22, 163, 74, .28), 0 0 0 3px rgba(34, 197, 94, .14); }

.api-btn { box-shadow: 0 6px 16px rgba(22, 163, 74, .26); }
.api-btn:hover { box-shadow: 0 8px 20px rgba(22, 163, 74, .3); }

.persona-tab.is-active { box-shadow: 0 4px 12px rgba(0, 102, 255, .18); }
.exp-step-icon { box-shadow: 0 6px 14px rgba(0, 102, 255, .2); }
.cover-offline-icon { box-shadow: 0 6px 16px rgba(22, 163, 74, .24); }
.condo-plans .pricing-card .btn-primary { box-shadow: 0 4px 12px rgba(22, 163, 74, .22); }
.condo-plans .pricing-card .btn-primary:hover { box-shadow: 0 6px 16px rgba(22, 163, 74, .26); }

/* =====================================================================
   4) BLOCO "TMS fiscal integrado à sua operação" (solução de logística)
   ===================================================================== */
.tms-block {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: linear-gradient(135deg, #f3f8ff 0%, #ffffff 60%);
  border: 1px solid #d9e6f8;
  box-shadow: 0 8px 24px rgba(8, 27, 58, .05);
}
.tms-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: #eaf2ff; color: #0057db; border: 1px solid #c7dcfb;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tms-head h3 { margin: 12px 0 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--cl-navy); }
.tms-head p { margin: 10px 0 0; font-size: .97rem; line-height: 1.6; color: var(--cl-muted); }
.tms-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tms-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: 18px;
  background: #fff; border: 1px solid #e3ebf6;
}
.tms-item .icon-badge { margin-bottom: 6px; }
.tms-item > div { display: flex; flex-direction: column; gap: 4px; }
.tms-item strong { font-size: 1rem; font-weight: 800; color: var(--cl-navy); }
.tms-item span:not(.context-icon):not(.icon-badge) { font-size: .9rem; line-height: 1.5; color: var(--cl-muted); }
@media (max-width: 1020px) {
  .tms-block { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tms-items { grid-template-columns: 1fr; gap: 10px; }
  .tms-item { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px; }
  .tms-item .icon-badge { margin-bottom: 0; flex: none; }
  .tms-item > div { display: flex; flex-direction: column; gap: 3px; }
}
.tms-item .icon-badge {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, #e8f1ff, #f4f8ff);
  box-shadow: inset 0 0 0 1px rgba(0, 102, 255, .075);
}
.tms-item .icon-badge .context-icon { width: 40px; height: 40px; }

/* =====================================================================
   5) "Ver vídeo" com submenu: ComprovaLog Logística e ComprovaLog Condomínios
   ===================================================================== */
.navbar-videos { position: relative; }
.navbar-video-chevron { transition: transform .2s ease; }
.navbar-videos.is-open .navbar-video-chevron { transform: rotate(180deg); }
.navbar-videos.is-open .navbar-video { background: #eaf3ff; border-color: #a9ccff; }
.navbar-video:focus-visible, .navbar-video-item:focus-visible { outline: 3px solid #81b2ff; outline-offset: 2px; }
.navbar-video-menu { margin: 0; padding: 0; list-style: none; }
.navbar-video-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 8px 12px;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; color: #0a1b3d; text-align: left;
}
.navbar-video-item .navbar-video-icon { flex: none; width: 24px; height: 24px; }
.navbar-video-text { display: grid; line-height: 1.2; }
.navbar-video-text small { font-size: .74rem; font-weight: 600; color: #6b7a90; margin-top: 2px; }
.navbar-video-item:hover:not(:disabled) { background: #f0f6ff; color: var(--cl-blue); }
.navbar-video-item.is-soon { cursor: default; color: #5b6577; }
.navbar-video-item.is-soon .navbar-video-icon { background: #16a34a; opacity: .55; }
.navbar-video-item.is-soon small {
  justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  background: #dcfce7; color: #15803d; font-weight: 800; letter-spacing: .02em;
}

@media (min-width: 1221px) {
  .navbar-video-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    min-width: 250px; padding: 6px;
    border: 1px solid #dfe8f5; border-radius: 14px; background: #fff;
    box-shadow: 0 14px 34px rgba(10, 30, 70, .12);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .navbar-videos.is-open .navbar-video-menu { opacity: 1; visibility: visible; transform: none; }
  .navbar-more-menu .navbar-video-item { min-height: 44px; }
  .navbar-video-text { white-space: nowrap; }
}
@media (min-width: 1221px) and (max-width: 1299px) {
  .navbar-actions .navbar-videos { display: none; }
  .navbar-more-menu { min-width: 250px; }
}
/* Celular/tablet: os dois vídeos aparecem direto, lado a lado */
@media (max-width: 1220px) {
  .navbar-videos .navbar-video { display: none; }
  .navbar-video-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .navbar-video-item { min-height: 50px; padding: 8px 10px; border: 1px solid #d7e6fb; border-radius: 11px; background: #f5f9ff; font-size: .84rem; }
  .navbar-video-item.is-soon { background: #f7fbf8; border-color: #cdeedb; }
}
@media (max-width: 380px) {
  .navbar-video-menu { grid-template-columns: 1fr; }
}
.navbar-video-item--condo .navbar-video-icon { background: #16a34a; }
.navbar-video-item--condo:hover { color: #15803d !important; background: #effcf3 !important; }

/* =====================================================================
   6) Celular: um pouco mais de espaço entre botões (evita toque errado)
   ===================================================================== */
@media (max-width: 1220px) {
  .navbar-nav { gap: 6px; }
  .navbar-more-menu { gap: 10px; }
  .navbar-video-menu { gap: 10px; }
  .navbar-actions { gap: 12px; }
}
@media (max-width: 760px) {
  .persona-tabs { gap: 10px; }
  .cta-final-actions { gap: 14px; }
  .scene-steps { gap: 8px; }
}

/* =====================================================================
   7) Menu de vídeos maior, com miniaturas e ícone de play vermelho
   ===================================================================== */
/* Ícone de play vermelho (estilo player de vídeo) — botão "Ver vídeo" e itens */
.navbar-videos > .navbar-video .navbar-video-icon,
.navbar-video-item .navbar-video-icon {
  position: relative; width: 30px; height: 21px; border-radius: 7px;
  background: linear-gradient(180deg, #ff2a2a, #e00000); color: #fff;
  box-shadow: 0 3px 8px rgba(224, 0, 0, .28);
}
.navbar-videos > .navbar-video .navbar-video-icon svg,
.navbar-video-item .navbar-video-icon svg { margin-left: 1px; }
.navbar-videos > .navbar-video .navbar-video-icon::after {
  content: ""; position: absolute; inset: -4px; border-radius: 10px;
  border: 2px solid rgba(255, 42, 42, .55); opacity: 0;
  animation: yt-pulse 3.2s ease-out infinite;
}
@keyframes yt-pulse { 0%, 55% { opacity: 0; transform: scale(.85); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
.navbar-videos > .navbar-video { gap: 9px; padding-left: 8px; font-weight: 800; }
.navbar-videos > .navbar-video:hover .navbar-video-icon,
.navbar-videos.is-open > .navbar-video .navbar-video-icon { background: linear-gradient(180deg, #ff3b3b, #cc0000); }
.navbar-video-item.navbar-video-item--condo .navbar-video-icon { background: linear-gradient(180deg, #ff2a2a, #e00000); }
.navbar-video-item--condo:hover { color: #0a1b3d !important; }

/* Miniaturas */
.navbar-video-head { display: none; }
.navbar-video-thumb {
  position: relative; flex: none; display: grid; place-items: center;
  width: 112px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #0a1b3d center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.navbar-video-item--log .navbar-video-thumb {
  background-image: linear-gradient(180deg, rgba(4, 22, 54, .1), rgba(4, 22, 54, .55)), url("../img/hero/comprovalog-video-cover.jpg");
  background-position: center 30%;
}
.navbar-video-item--condo .navbar-video-thumb {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 63'%3E%3Crect x='62' y='12' width='36' height='51' fill='%23ffffff' opacity='.92'/%3E%3Cg fill='%2386efac'%3E%3Crect x='67' y='18' width='8' height='7' rx='1'/%3E%3Crect x='85' y='18' width='8' height='7' rx='1'/%3E%3Crect x='67' y='30' width='8' height='7' rx='1'/%3E%3Crect x='85' y='30' width='8' height='7' rx='1'/%3E%3C/g%3E%3Crect x='75' y='48' width='10' height='15' fill='%23166534'/%3E%3Crect x='14' y='34' width='34' height='29' fill='%23ffffff' opacity='.92'/%3E%3Crect x='11' y='30' width='40' height='6' rx='1.5' fill='%2316a34a'/%3E%3Crect x='18' y='40' width='26' height='12' rx='1.5' fill='%23bbf7d0'/%3E%3Crect x='33' y='46' width='8' height='6' fill='%23d9a066'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #15803d, #0b3d24);
  background-size: cover, cover;
}
.navbar-video-thumb .navbar-video-icon { width: 34px; height: 24px; border-radius: 8px; transition: transform .2s ease; }
.navbar-video-item:hover .navbar-video-thumb .navbar-video-icon,
.navbar-video-item:focus-visible .navbar-video-thumb .navbar-video-icon { transform: scale(1.12); }
.navbar-video-dur {
  position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: .64rem; font-weight: 800; line-height: 1.5;
}
.navbar-video-menu .navbar-video-text { white-space: normal; font-size: .95rem; font-weight: 800; }
.navbar-video-menu .navbar-video-text small { font-size: .78rem; font-weight: 600; margin-top: 4px; color: #5b6577; }

@media (min-width: 1221px) {
  .navbar-video-menu { min-width: 410px; padding: 10px; border-radius: 18px; box-shadow: 0 22px 48px rgba(10, 30, 70, .18); }
  .navbar-video-menu::before {
    content: ""; position: absolute; top: -8px; right: 0; left: 0; height: 8px; /* ponte do hover */
  }
  .navbar-video-head {
    display: block; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #edf2f9;
    font-size: .8rem; font-weight: 600; color: #6b7a90;
  }
  .navbar-video-head b { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e00000; margin-bottom: 2px; }
  .navbar-video-menu .navbar-video-item { gap: 14px; min-height: 0; padding: 10px; border-radius: 13px; }
  .navbar-video-menu .navbar-video-item:hover, .navbar-video-menu .navbar-video-item:focus-visible { background: #f3f7fd; color: #0a1b3d; }
  .navbar-video-menu .navbar-video-item--condo:hover, .navbar-video-menu .navbar-video-item--condo:focus-visible { background: #effbf3 !important; }
}
/* Celular/tablet: cartões com miniatura em cima */
@media (max-width: 1220px) {
  .navbar-video-menu .navbar-video-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
  .navbar-video-menu .navbar-video-thumb { width: 100%; }
  .navbar-video-menu .navbar-video-text { font-size: .86rem; }
  .navbar-video-menu .navbar-video-text small { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar-videos > .navbar-video .navbar-video-icon::after { animation: none; }
}

/* =====================================================================
   8) Menu "Fiscal" (CT-e, MDF-e, CIOT, SEFAZ)
   ===================================================================== */
.navbar-fiscal-toggle { gap: 6px; }
.navbar-fiscal-doc { flex: none; color: #4f46e5; }
.navbar-fiscal.is-current .navbar-fiscal-toggle { color: var(--cl-blue); background: #eef4ff; }
.navbar-fiscal-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: #e8f0ff; color: #0057db;
}
.navbar-fiscal-item--mdfe .navbar-fiscal-icon { background: #eeedff; color: #4f46e5; }
.navbar-fiscal-item--ciot .navbar-fiscal-icon { background: #fff3e0; color: #c2410c; }
.navbar-fiscal-item--sefaz .navbar-fiscal-icon { background: #e3f8ec; color: #15803d; }
.navbar-fiscal-text { display: grid; line-height: 1.2; font-weight: 800; color: #0a1b3d; }
.navbar-fiscal-text small { margin-top: 3px; font-size: .76rem; font-weight: 600; color: #6b7a90; }
.navbar-fiscal-all a span { margin-left: auto; }

@media (min-width: 1221px) {
  .navbar-fiscal .navbar-fiscal-menu { left: 0; right: auto; min-width: 320px; padding: 8px; border-radius: 16px; }
  .navbar-nav .navbar-fiscal-menu a.navbar-fiscal-item { gap: 12px; min-height: 0; padding: 9px 10px; border-radius: 12px; }
  .navbar-nav .navbar-fiscal-menu a.navbar-fiscal-item:hover .navbar-fiscal-text,
  .navbar-nav .navbar-fiscal-menu a.navbar-fiscal-item:focus-visible .navbar-fiscal-text { color: var(--cl-blue); }
  .navbar-nav .navbar-fiscal-all a {
    margin-bottom: 4px; padding: 9px 12px; border-radius: 12px;
    background: linear-gradient(90deg, #0a1b3d, #12306b); color: #fff !important;
    font-size: .84rem; font-weight: 800;
  }
  .navbar-nav .navbar-fiscal-all a:hover, .navbar-nav .navbar-fiscal-all a:focus-visible { background: linear-gradient(90deg, #0057db, #0066ff) !important; color: #fff !important; }
}
@media (max-width: 1220px) {
  .navbar-fiscal { margin-bottom: 2px; }
  .navbar-fiscal-doc { display: none; }
  .navbar-nav .navbar-fiscal-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .navbar-nav .navbar-fiscal-menu a.navbar-fiscal-item { justify-content: flex-start; gap: 9px; padding: 7px 9px; min-height: 46px; }
  .navbar-fiscal-icon { width: 30px; height: 30px; border-radius: 9px; }
  .navbar-fiscal-icon svg { width: 16px; height: 16px; }
  .navbar-fiscal-text { font-size: .86rem; }
  .navbar-fiscal-text small { display: none; }
  .navbar-fiscal-all { grid-column: 1 / -1; }
  .navbar-nav .navbar-fiscal-all a { justify-content: space-between; padding: 8px 14px; background: #0a1b3d !important; border-color: #0a1b3d !important; color: #fff !important; font-weight: 800; }
}