/* =========================================================================
   IBERCASH — PELE DE APP (setembro 2026)
   -------------------------------------------------------------------------
   Carregada DEPOIS do style.css e so o sobrepoe. Tres ideias:

   1. Cores de carteira digital: verde floresta profundo + lima. O escuro
      continua a ser o padrao da casa (agora floresta em vez de castanho);
      o claro e papel verde-gelo com cartoes brancos e blocos floresta.
   2. Tudo com cara de app: cartoes redondos (22-28px), botoes em pilula,
      barra de baixo flutuante com o "Comparar" em destaque ao centro.
   3. Numeros grandes para o que se poupa — e o que a pessoa veio ver.

   Para voltar ao desenho anterior basta tirar a <link> deste ficheiro.
   ========================================================================= */

@font-face {
    font-family: "Unbounded";
    src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jakarta";
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* --- 1. TOKENS -------------------------------------------------------- */

:root,
:root[data-tema="claro"] {
    --ah-floresta: #0f2b20;
    --ah-floresta-2: #173d2e;
    --ah-floresta-3: #1f4d3a;
    --ah-lima: #c8f169;
    --ah-lima-forte: #b2e04a;
    --ah-lima-suave: rgba(200, 241, 105, 0.18);
    --ah-es: #ff8a4c;
    --ah-pt: #6fa8ff;
    --ah-coral: #ff6b57;
    --ah-sol: #ffd447;
    --ah-raio: 24px;
    --ah-raio-p: 16px;
    --ah-fonte: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ah-titulo: "Unbounded", "Jakarta", ui-sans-serif, system-ui, sans-serif;

    --green: #c8f169;
    --green-strong: #a9d943;
    --green-texto: #1c6b3e;
    --forte: #0f2b20;
    --ink: #0f241b;
    --ink-2: #23392e;
    --paper: #f1f5ee;
    --cream: #e8eee4;
    --card: #ffffff;
    --card-2: #f7f9f4;
    --surface: #eef2ea;
    --preco-caixa: #f1f5ee;
    --preco-borda: #dbe4d7;
    --line: rgba(15, 36, 27, 0.08);
    --line-2: #dbe4d7;
    --contorno: rgba(15, 36, 27, 0.2);
    --muted: #5d7066;
    --grid: #e2e9df;
    --warn-bg: #fff5d9;
    --good-bg: #ecf8d6;
    --danger-texto: #b3301b;
    --blue: #2d6fd6;
    --shadow: 0 18px 44px rgba(15, 43, 32, 0.12);
    --ah-sombra: 0 10px 30px rgba(15, 43, 32, 0.08);
    --barra: rgba(241, 245, 238, 0.86);
    --card-vidro: #ffffff;
    --sobre-escuro: rgba(236, 246, 238, 0.86);
    --ah-foto: #f4f7f1;
}

:root:not([data-tema="claro"]),
:root[data-tema="escuro"] {
    --green: #c8f169;
    --green-strong: #b2e04a;
    --green-texto: #c8f169;
    --forte: #0f2b20;
    --ink: #eef5ec;
    --ink-2: #cfddd2;
    --paper: #081711;
    --cream: #0d2019;
    --card: #10271e;
    --card-2: #142e24;
    --surface: #18362a;
    --preco-caixa: #18362a;
    --preco-borda: rgba(214, 240, 222, 0.16);
    --line: rgba(214, 240, 222, 0.09);
    --line-2: rgba(214, 240, 222, 0.15);
    --contorno: rgba(214, 240, 222, 0.26);
    --muted: #93a99c;
    --grid: rgba(214, 240, 222, 0.09);
    --warn-bg: #33301a;
    --good-bg: #1f3a1b;
    --danger-texto: #ff9d86;
    --blue: #8ab8ff;
    --shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
    --ah-sombra: 0 10px 30px rgba(0, 0, 0, 0.28);
    --barra: rgba(8, 23, 17, 0.82);
    --card-vidro: #10271e;
    --ah-foto: #f4f7f1;
}

/* --- 2. BASE ---------------------------------------------------------- */

html {
    -webkit-tap-highlight-color: transparent;
}

body {
    padding-bottom: 0 !important;
    font-family: var(--ah-fonte);
    word-spacing: 0.05em;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3,
.brand-nome {
    font-family: var(--ah-titulo);
    letter-spacing: -0.02em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

main {
    width: min(1180px, calc(100% - 28px));
}

::selection {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

/* --- 3. TOPO ---------------------------------------------------------- */

.topbar {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 0;
    background: var(--barra);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

.brand-nome {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.brand-nome i {
    color: var(--green-texto);
    font-style: normal;
}

.nav {
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    width: fit-content;
    max-width: 100%;
    justify-self: center;
}

.nav a {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px 13px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-weight: 700;
    min-height: 0 !important;
}

@media (min-width: 1366px) {
    .nav a {
        font-size: 0.86rem;
    }
}

:root:not([data-tema="claro"]) .nav a.active {
    background: var(--ah-lima) !important;
    color: var(--ah-floresta) !important;
}

@media (max-width: 1100px) and (min-width: 721px) {
    .nav {
        padding: 3px;
    }

    .session .button.primary {
        display: none;
    }
}

.nav a:hover {
    color: var(--ink) !important;
}

.nav a.active {
    background: var(--ah-floresta) !important;
    color: var(--ah-lima) !important;
}

.tema-botao,
.icon-button {
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--card) !important;
    box-shadow: var(--ah-sombra);
    color: var(--ink) !important;
}

.topbar-lang a {
    border-radius: 999px !important;
}

/* --- 4. BOTOES, CAMPOS, PILULAS -------------------------------------- */

.button {
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 0;
    font-weight: 800;
    letter-spacing: -0.005em;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.button:active {
    transform: scale(0.97);
}

.button.primary {
    background: var(--ah-lima);
    color: var(--ah-floresta);
    box-shadow: 0 8px 20px rgba(178, 224, 74, 0.28);
}

.button.primary:hover {
    background: var(--ah-lima-forte);
}

.button.dark {
    background: var(--ah-floresta);
    color: var(--ah-lima);
}

.button.ghost {
    background: var(--card);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line-2);
}

.button.ghost:hover {
    box-shadow: inset 0 0 0 1.5px var(--green-strong);
}

.button.small {
    min-height: 38px;
    padding: 8px 15px;
}

.button.mini {
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
}

input,
select,
textarea {
    border-radius: var(--ah-raio-p) !important;
    border: 1.5px solid var(--line-2) !important;
    background: var(--card-2) !important;
    color: var(--ink) !important;
    min-height: 48px;
}

input[type="checkbox"],
input[type="radio"] {
    min-height: 0;
    border-radius: 6px !important;
    accent-color: var(--ah-lima-forte);
}

input[type="range"] {
    min-height: 0;
    border: 0 !important;
    background: transparent !important;
    accent-color: var(--ah-lima-forte);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ah-lima-forte) !important;
    box-shadow: 0 0 0 4px var(--ah-lima-suave);
}

label {
    font-weight: 700;
}

.filter-strip a,
.etiqueta,
.tag {
    border-radius: 999px !important;
}

.filter-strip a {
    border: 0 !important;
    background: var(--card) !important;
    box-shadow: var(--ah-sombra);
    font-weight: 700;
}

.filter-strip a.active,
.filter-strip a:hover {
    background: var(--ah-floresta) !important;
    color: var(--ah-lima) !important;
}

.etiqueta {
    background: var(--surface) !important;
    border: 0 !important;
    font-weight: 600;
}

.flash {
    border-radius: var(--ah-raio-p);
    border: 0;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    box-shadow: var(--shadow);
}

/* --- 5. CARTOES GERAIS ------------------------------------------------ */

.panel,
.price-card,
.product-tile,
.station-card,
.compare-card,
.blog-cartao,
.empty-state {
    border: 1px solid var(--line) !important;
    border-radius: var(--ah-raio) !important;
    background: var(--card) !important;
    box-shadow: var(--ah-sombra) !important;
}

.product-tile:hover,
.price-card:hover,
.station-card:hover,
.product-tile:focus-within,
.price-card:focus-within {
    border-color: var(--green-strong) !important;
}

.product-photo,
.brand-photo,
.compare-photo,
.result-photo,
.alt-foto {
    border-radius: 18px !important;
    border: 0 !important;
    background: var(--ah-foto) !important;
}

.country-row span,
.price-grid > div {
    border-radius: 14px !important;
    border: 0 !important;
    background: var(--surface) !important;
}

.price-grid .winner,
.country-row .winner {
    background: var(--ah-lima) !important;
    color: var(--ah-floresta) !important;
}

.recommendation,
.decision-line {
    border-radius: 16px !important;
    border: 0 !important;
    background: var(--ah-lima-suave) !important;
}

.recommendation strong,
.decision-line strong {
    color: var(--green-texto);
}

.selo-tendencia {
    border-radius: 999px !important;
    font-weight: 800;
}

.station-card .station-price,
.posto-preco {
    font-family: var(--ah-titulo);
    letter-spacing: -0.02em;
}

.station-tag-melhor {
    border-radius: 999px !important;
}

.marca-chip {
    border-radius: 14px !important;
}

/* Os blocos escuros de destaque (hero antigo, destaque dos postos, cabecalhos
   das fichas) passam a ser o bloco floresta da carteira. */
.hero,
.station-highlight {
    border-radius: 28px !important;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(200, 241, 105, 0.22), transparent 55%),
        linear-gradient(160deg, var(--ah-floresta-2), var(--ah-floresta) 70%) !important;
    color: var(--sobre-escuro);
    box-shadow: var(--shadow) !important;
    border: 1px solid rgba(214, 240, 222, 0.08);
}

.hero-copy,
.station-highlight h2,
.hero h1,
.station-highlight h1 {
    color: var(--ah-lima) !important;
}

.hero .eyebrow,
.station-highlight .eyebrow {
    background: rgba(200, 241, 105, 0.14);
    color: var(--ah-lima);
}

.hero .button.ghost,
.station-highlight .button.ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #eef5ec;
    box-shadow: inset 0 0 0 1.5px rgba(214, 240, 222, 0.22);
}

.decision-card,
.station-highlight .panel {
    border-radius: 22px !important;
}

.page-heading h1,
.auth-layout h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1;
}

.page-heading .lead {
    font-size: 1rem;
}

/* Graficos: linhas mais grossas e pontos redondos. */
.price-chart .chart-line {
    stroke-width: 3;
}

.price-chart .chart-axis {
    fill: var(--muted);
    font-family: var(--ah-fonte);
}

/* --- 6. RODAPE e AVISOS ---------------------------------------------- */

.rodape {
    margin-top: 30px;
    border-top: 0;
    border-radius: 32px 32px 0 0;
    background: var(--ah-floresta) !important;
    color: #dce9df;
}

.rodape h2,
.rodape .brand-nome {
    color: #eef5ec;
}

.rodape .brand-nome i {
    color: var(--ah-lima);
}

.rodape .muted,
.rodape p {
    color: rgba(220, 233, 223, 0.7) !important;
}

.rodape nav a:hover {
    color: var(--ah-lima);
}

.rodape-idioma a {
    color: rgba(220, 233, 223, 0.7);
}

.rodape-idioma a.active {
    color: #eef5ec;
}

.rodape-base {
    color: rgba(220, 233, 223, 0.55);
    border-color: rgba(220, 233, 223, 0.1) !important;
}

.recomendacao {
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
}

.aviso-privacidade {
    border-radius: 24px !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
}

/* =========================================================================
   7. A HOME DE APP (includes/ibero_home_app.php)
   ========================================================================= */

.app-home {
    display: grid;
    gap: 22px;
    padding-top: 4px;
}

.app-home h2 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.15;
}

.app-home a {
    color: inherit;
}

/* Ola + local -------------------------------------------------------- */
.ah-ola {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ah-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
    font-family: var(--ah-titulo);
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 0 0 4px var(--ah-lima-suave);
}

.ah-ola-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ah-ola-texto p {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.ah-ola-texto h1 {
    margin: 0;
    font-size: clamp(1.45rem, 4.6vw, 2.2rem);
    line-height: 1.05;
    color: var(--ink);
}

.ah-local {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 42%;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    font-size: 0.82rem;
    font-weight: 700;
}

.ah-local span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Busca --------------------------------------------------------------- */
.ah-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    border: 1px solid var(--line);
}

.ah-busca input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 4px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.95rem;
}

.ah-busca button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-weight: 800;
    cursor: pointer;
}

:root:not([data-tema="claro"]) .ah-busca button {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

/* Topo: carteira + lado --------------------------------------------- */
.ah-topo {
    display: grid;
    gap: 18px;
}

@media (min-width: 900px) {
    .ah-topo {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: stretch;
    }
}

.ah-carteira {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 20px;
    border-radius: 30px;
    color: #eef5ec;
    background:
        radial-gradient(90% 70% at 105% -10%, rgba(200, 241, 105, 0.35), transparent 60%),
        radial-gradient(60% 50% at -10% 110%, rgba(111, 168, 255, 0.14), transparent 60%),
        linear-gradient(155deg, #1b4735 0%, var(--ah-floresta) 55%, #0b2219 100%);
    box-shadow: 0 24px 50px rgba(15, 43, 32, 0.32);
    border: 1px solid rgba(214, 240, 222, 0.1);
}

.ah-carteira::after {
    /* O "chip" do cartao: um circulo lima desfocado que da profundidade. */
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 26px solid rgba(200, 241, 105, 0.07);
    pointer-events: none;
}

.ah-carteira-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ah-pilula {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 700;
}

.ah-carteira-data {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(238, 245, 236, 0.6);
}

.ah-carteira-valor {
    margin: 10px 0 0;
    font-family: var(--ah-titulo);
    font-size: clamp(2.2rem, 9.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ah-lima);
}

.ah-carteira-nota {
    margin: 0;
    color: rgba(238, 245, 236, 0.66);
    font-size: 0.84rem;
    line-height: 1.4;
}

.ah-barras {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 92px;
    margin: 14px 0 6px;
    padding-top: 24px;
}

.ah-barra {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.ah-barra i {
    display: block;
    width: 100%;
    height: var(--h);
    border-radius: 10px 10px 6px 6px;
    background: rgba(200, 241, 105, 0.22);
    transform-origin: bottom;
    animation: ah-sobe 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: background 0.15s ease;
}

.ah-barra:nth-child(2) i { animation-delay: 0.04s; }
.ah-barra:nth-child(3) i { animation-delay: 0.08s; }
.ah-barra:nth-child(4) i { animation-delay: 0.12s; }
.ah-barra:nth-child(5) i { animation-delay: 0.16s; }
.ah-barra:nth-child(6) i { animation-delay: 0.2s; }
.ah-barra:nth-child(7) i { animation-delay: 0.24s; }
.ah-barra:nth-child(8) i { animation-delay: 0.28s; }

.ah-barra.is-top i,
.ah-barra:hover i {
    background: var(--ah-lima);
}

.ah-barra em {
    position: absolute;
    left: 50%;
    bottom: calc(var(--h) + 6px);
    transform: translateX(-10%);
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--ah-floresta);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes ah-sobe {
    from { transform: scaleY(0.05); }
    to { transform: scaleY(1); }
}

.ah-carteira-acoes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.ah-btn-lima,
.ah-btn-vidro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.15s ease;
}

.ah-btn-lima {
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
}

.ah-btn-lima:hover {
    background: var(--ah-lima-forte);
}

.ah-btn-vidro {
    background: rgba(255, 255, 255, 0.1);
    color: #eef5ec !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ah-btn-lima:active,
.ah-btn-vidro:active {
    transform: scale(0.97);
}

/* Atalhos redondos --------------------------------------------------- */
.ah-lado {
    display: grid;
    gap: 16px;
    align-content: start;
}

.ah-atalhos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ah-atalhos a {
    display: grid;
    justify-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-2);
    text-align: center;
}

.ah-atalhos a > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    font-size: 1.6rem;
    transition: transform 0.15s ease, background 0.15s ease;
}

.ah-atalhos a:nth-child(2) > span {
    background: var(--ah-lima);
}

.ah-atalhos a:hover > span {
    transform: translateY(-3px);
}

.ah-atalhos b {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ah-coral);
    color: #fff;
    font-size: 0.7rem;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 3px var(--paper);
}

/* Bento -------------------------------------------------------------- */
.ah-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
}

.ah-card {
    display: block;
    padding: 18px;
    border-radius: var(--ah-raio);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    min-width: 0;
}

.ah-quem {
    grid-row: span 2;
    display: grid;
    align-content: space-between;
    gap: 10px;
}

.ah-quem h2 {
    font-size: 1rem;
}

.ah-donut {
    position: relative;
    width: min(100%, 132px);
    margin: 0 auto;
}

.ah-donut svg {
    display: block;
    width: 100%;
    height: auto;
}

.ah-donut circle {
    fill: none;
    stroke-width: 13;
}

.ah-donut .d-fundo { stroke: var(--surface); }
.ah-donut .d-es { stroke: var(--ah-es); stroke-linecap: round; }
.ah-donut .d-pt { stroke: var(--ah-pt); stroke-linecap: round; }

.ah-donut-centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.ah-donut-centro strong {
    font-family: var(--ah-titulo);
    font-size: 1.6rem;
    line-height: 1;
}

.ah-donut-centro span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.ah-legenda {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    font-weight: 600;
}

.ah-legenda li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ah-legenda b {
    margin-left: auto;
    font-weight: 800;
}

.ah-legenda i {
    width: 10px;
    height: 10px;
    border-radius: 4px;
}

.ah-legenda .l-es { background: var(--ah-es); }
.ah-legenda .l-pt { background: var(--ah-pt); }

.ah-mini {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 16px;
}

.ah-mini .ah-emoji {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.ah-mini strong {
    font-family: var(--ah-titulo);
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ah-mini p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
}

.ah-mini-lima {
    background: var(--ah-lima);
    border-color: transparent;
    color: var(--ah-floresta);
}

.ah-mini-lima p {
    color: rgba(15, 43, 32, 0.72);
}

/* Categorias ---------------------------------------------------------- */
.ah-cats {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 4px 14px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ah-cats::-webkit-scrollbar,
.ah-prateleira::-webkit-scrollbar {
    display: none;
}

.ah-cats a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 7px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    scroll-snap-align: start;
}

.ah-cats a span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
    font-size: 1.05rem;
}

.ah-cats a:hover {
    background: var(--ah-floresta);
    color: var(--ah-lima);
}

/* Seccoes --------------------------------------------------------------- */
.ah-seccao {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.ah-seccao-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.ah-seccao-cab a {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto) !important;
    font-size: 0.78rem;
    font-weight: 800;
}

.ah-nota {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ah-nota a {
    color: var(--green-texto) !important;
    font-weight: 700;
    text-decoration: underline;
}

.ah-duas {
    display: grid;
    gap: 18px;
}

@media (min-width: 900px) {
    .ah-duas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Prateleira de produtos -------------------------------------------- */
.ah-prateleira {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 176px);
    gap: 12px;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 4px 14px 16px;
    scroll-snap-type: x mandatory;
    scroll-padding: 14px;
    scrollbar-width: none;
}

@media (min-width: 900px) {
    .ah-prateleira {
        grid-auto-columns: minmax(196px, 1fr);
        margin: 0;
        padding: 4px 2px 16px;
    }
}

.ah-prod {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px 8px 12px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    scroll-snap-align: start;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.ah-prod:hover {
    transform: translateY(-3px);
    border-color: var(--green-strong);
}

.ah-prod-foto {
    position: relative;
    display: block;
    aspect-ratio: 1 / 0.9;
    border-radius: 16px;
    background: var(--ah-foto);
    overflow: hidden;
}

.ah-prod-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    mix-blend-mode: multiply;
    background: transparent !important;
    border-radius: 0 !important;
}

.ah-selo-pct {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ah-coral);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ah-selo-pais {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(15, 43, 32, 0.12);
}

.ah-prod-corpo {
    display: grid;
    gap: 4px;
    padding: 10px 4px 0;
    flex: 1 1 auto;
    align-content: start;
}

.ah-prod-cat {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ah-prod h3 {
    margin: 0;
    min-height: 2.5em;
    font-family: var(--ah-fonte);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ah-prod-precos {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 2px;
}

.ah-prod-precos strong {
    font-family: var(--ah-titulo);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.ah-prod-precos s {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.ah-prod-poupa {
    width: fit-content;
    margin: 4px 0 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto);
    font-size: 0.72rem;
    font-weight: 700;
    padding-right: 44px;
}

.ah-prod-add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
}

.ah-prod-add button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease;
}

:root:not([data-tema="claro"]) .ah-prod-add button {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.ah-prod-add button:active {
    transform: scale(0.9);
}

/* Combustivel --------------------------------------------------------- */
.ah-fuel {
    display: grid;
    gap: 14px;
}

.ah-fuel-linha {
    display: grid;
    gap: 6px;
}

.ah-fuel-linha p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
}

.ah-tag-poupa {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto);
    font-size: 0.72rem;
    font-weight: 800;
}

.ah-fuel-barra {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.ah-fuel-barra i {
    display: block;
    height: 12px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--surface) 0 var(--w), transparent var(--w)),
        var(--card-2);
    box-shadow: inset 0 0 0 1px var(--line);
}

:root:not([data-tema="claro"]) .ah-fuel-barra i {
    background:
        linear-gradient(90deg, rgba(214, 240, 222, 0.28) 0 var(--w), transparent var(--w)),
        var(--card-2);
}

.ah-fuel-barra.ganha i,
:root:not([data-tema="claro"]) .ah-fuel-barra.ganha i {
    background:
        linear-gradient(90deg, var(--ah-lima-forte) 0 var(--w), transparent var(--w)),
        var(--card-2);
}

.ah-fuel-barra b {
    min-width: 62px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ah-fuel-barra.ganha b {
    color: var(--green-texto);
}

/* Categorias em barras ----------------------------------------------- */
.ah-catbar {
    display: grid;
    gap: 10px;
}

.ah-catbar-linha {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.84rem;
}

.ah-catbar-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.ah-catbar-nome small {
    color: var(--muted);
    font-weight: 600;
}

.ah-catbar-trilho {
    height: 10px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.ah-catbar-trilho i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 999px;
}

.ah-catbar-trilho i.es { background: var(--ah-es); }
.ah-catbar-trilho i.pt { background: var(--ah-pt); }

.ah-catbar-linha b {
    min-width: 58px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Postos ---------------------------------------------------------------- */
.ah-postos,
.ah-lista {
    display: grid;
    gap: 10px;
}

@media (min-width: 720px) {
    .ah-postos,
    .ah-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .ah-postos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ah-posto,
.ah-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px 12px 12px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.ah-posto:hover,
.ah-linha:hover {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

.ah-posto .marca-chip {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
}

.ah-posto-info,
.ah-linha-info {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.ah-posto-info strong,
.ah-linha-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}

.ah-posto-info small,
.ah-linha-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.ah-posto-preco {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 2px;
}

.ah-posto-preco b {
    padding: 6px 10px;
    border-radius: 12px;
    background: var(--surface);
    font-family: var(--ah-titulo);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.ah-posto-preco em {
    color: var(--green-texto);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 800;
}

.ah-posto.is-melhor {
    background: var(--ah-floresta);
    border-color: transparent;
    color: #eef5ec;
}

.ah-posto.is-melhor small {
    color: rgba(238, 245, 236, 0.66);
}

.ah-posto.is-melhor .ah-posto-preco b {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.ah-posto.is-melhor .ah-posto-preco em {
    color: var(--ah-lima);
}

/* Desceram ------------------------------------------------------------- */
.ah-linha-foto {
    flex: 0 0 auto;
    width: 52px !important;
    height: 52px !important;
    padding: 4px;
    border-radius: 14px !important;
    background: var(--ah-foto) !important;
    object-fit: contain;
}

.ah-linha-info small b {
    color: var(--green-texto);
}

.ah-desceu {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    font-size: 0.8rem;
    font-weight: 800;
}

/* Simulador ------------------------------------------------------------ */
.ah-sim {
    display: grid;
    gap: 10px;
}

.ah-sim label {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.ah-sim-valor output {
    font-family: var(--ah-titulo);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.ah-sim input[type="range"] {
    width: 100%;
    height: 28px;
}

.ah-sim-res {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ah-sim-res div {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--surface);
}

.ah-sim-res span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.ah-sim-res b {
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}

.ah-sim-res .ah-sim-liq {
    background: var(--ah-floresta);
    color: var(--ah-lima);
}

.ah-sim-res .ah-sim-liq span {
    color: rgba(238, 245, 236, 0.7);
}

:root:not([data-tema="claro"]) .ah-sim-res .ah-sim-liq {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

:root:not([data-tema="claro"]) .ah-sim-res .ah-sim-liq span {
    color: rgba(15, 43, 32, 0.7);
}

.ah-sim-res .ah-sim-liq.negativo {
    background: var(--ah-coral);
    color: #fff;
}

.ah-sim-meter {
    height: 10px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.ah-sim-meter i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ah-lima-forte), var(--ah-lima));
    transition: width 0.25s ease;
}

.ah-sim-meter i.negativo {
    background: var(--ah-coral);
}

[data-ah-veredito] {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.9rem;
}

/* Viagem ------------------------------------------------------------- */
.ah-viagem {
    display: grid;
    gap: 14px;
}

.ah-rota {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 0.95rem;
}

.ah-rota span {
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
}

.ah-rota i {
    flex: 1 1 auto;
    height: 2px;
    min-width: 20px;
    background: repeating-linear-gradient(90deg, var(--green-strong) 0 6px, transparent 6px 11px);
    position: relative;
}

.ah-rota i::after {
    content: "🚗";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    font-size: 1.1rem;
}

.ah-rota-nums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ah-rota-nums div {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--surface);
}

.ah-rota-nums b {
    font-family: var(--ah-titulo);
    font-size: 1.05rem;
}

.ah-rota-nums span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.ah-editar summary {
    cursor: pointer;
    width: fit-content;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto);
    font-weight: 800;
    font-size: 0.86rem;
    list-style: none;
}

.ah-editar summary::-webkit-details-marker {
    display: none;
}

.ah-editar .location-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.ah-editar label {
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
}

/* Blog --------------------------------------------------------------- */
.ah-blog {
    grid-auto-columns: minmax(230px, 260px);
}

.app-home .ah-post {
    display: grid;
    align-content: space-between;
    gap: 16px;
    min-height: 170px;
    padding: 18px;
    border-radius: 24px;
    scroll-snap-align: start;
    background: var(--ah-floresta);
    color: #eef5ec;
}

.app-home .ah-post-1 {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.app-home .ah-post-2 {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
}

.ah-post-emoji {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.4rem;
}

.ah-post-2 .ah-post-emoji {
    background: var(--surface);
}

.ah-post strong {
    font-family: var(--ah-titulo);
    font-size: 1.1rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ah-post small {
    font-weight: 700;
    opacity: 0.7;
}

/* Convite ------------------------------------------------------------ */
.ah-convite {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 28px;
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(255, 255, 255, 0.45), transparent 60%),
        var(--ah-lima);
    color: var(--ah-floresta);
}

.ah-convite h2 {
    color: var(--ah-floresta);
}

.ah-convite p {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: rgba(15, 43, 32, 0.75);
}

.ah-convite-emoji {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--ah-floresta);
    font-size: 1.7rem;
}

.ah-convite .ah-btn-lima {
    grid-column: 1 / -1;
    background: var(--ah-floresta);
    color: var(--ah-lima) !important;
}

@media (min-width: 720px) {
    .ah-convite {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .ah-convite .ah-btn-lima {
        grid-column: auto;
    }
}

/* =========================================================================
   8. TELEMOVEL: TOPO COMPACTO E BARRA DE BAIXO FLUTUANTE
   ========================================================================= */

@media (max-width: 720px) {
    main {
        width: calc(100% - 28px);
        padding-bottom: 28px;
    }

    .topbar {
        padding: 8px 14px;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
    }

    .session .button {
        min-height: 36px;
        padding: 6px 14px;
        font-size: 0.82rem;
    }

    /* No telemovel o "Cadastrar" sai do topo: a home ja tem o convite e o
       avatar leva ao registo. O topo fica com a marca e tres controlos. */
    .session .button.primary {
        display: none;
    }

    .tema-botao {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .tabbar {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        align-items: end;
        gap: 0;
        padding: 8px 6px;
        border: 0;
        border-radius: 28px;
        background: rgba(15, 43, 32, 0.94);
        box-shadow: 0 16px 40px rgba(8, 23, 17, 0.38), inset 0 0 0 1px rgba(214, 240, 222, 0.08);
        backdrop-filter: saturate(160%) blur(16px);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
    }

    .tabbar a {
        position: relative;
        min-height: 50px;
        gap: 3px;
        border-radius: 18px;
        color: rgba(220, 233, 223, 0.62);
        font-size: 0.64rem;
        font-weight: 700;
        background: transparent;
    }

    .tabbar a span:first-child {
        font-size: 1.2rem;
        filter: grayscale(0.35);
        opacity: 0.85;
        transition: transform 0.15s ease;
    }

    .tabbar a.active {
        background: transparent !important;
        color: var(--ah-lima) !important;
    }

    .tabbar a.active span:first-child {
        filter: none;
        opacity: 1;
        transform: translateY(-1px) scale(1.08);
    }

    .tabbar a.active::after {
        content: "";
        position: absolute;
        bottom: 1px;
        left: 50%;
        width: 5px;
        height: 5px;
        margin-left: -2.5px;
        border-radius: 50%;
        background: var(--ah-lima);
    }

    /* O do meio e o botao principal: comparar e a razao de existir. */
    .tabbar a:nth-child(3) {
        color: #eef5ec;
    }

    .tabbar a:nth-child(3) span:first-child {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        margin-top: -30px;
        border-radius: 50%;
        background: var(--ah-lima);
        box-shadow: 0 10px 24px rgba(178, 224, 74, 0.45), 0 0 0 5px var(--paper);
        font-size: 1.55rem;
        filter: none;
        opacity: 1;
    }

    .tabbar a:nth-child(3).active::after {
        display: none;
    }

    .aviso-privacidade,
    .recomendacao {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .hero,
    .station-highlight {
        border-radius: 26px !important;
    }

    .ah-carteira {
        padding: 20px 18px 18px;
        border-radius: 28px;
    }

    .ah-card {
        padding: 16px;
    }

    .rodape {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 370px) {
    .ah-atalhos a > span {
        width: 54px;
        height: 54px;
        border-radius: 20px;
    }

    .ah-bento {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ah-local {
        display: none;
    }
}

/* Desktop: a home respira mais. */
@media (min-width: 900px) {
    .app-home {
        gap: 28px;
        padding-top: 14px;
    }

    .ah-ola-texto h1 {
        font-size: 2.4rem;
    }

    .ah-busca {
        max-width: 620px;
    }

    .ah-atalhos a > span {
        width: 72px;
        height: 72px;
        border-radius: 24px;
        font-size: 1.9rem;
    }

    .app-home h2 {
        font-size: 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ah-barra i {
        animation: none;
    }

    .ah-prod,
    .ah-posto,
    .ah-linha,
    .ah-atalhos a > span {
        transition: none;
    }
}

/* =========================================================================
   9. DESENHOS (STICKERS) E COMPONENTES DAS PAGINAS INTERNAS
   ========================================================================= */

.st {
    display: block;
    overflow: visible;
    filter:
        drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff)
        drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
        drop-shadow(0 8px 10px rgba(8, 23, 17, 0.22));
}

@keyframes st-flutua {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-6px) rotate(calc(var(--rot, 0deg) + 3deg)); }
}

@keyframes st-abana {
    0%, 100% { transform: rotate(var(--rot, 0deg)); }
    30% { transform: rotate(calc(var(--rot, 0deg) - 8deg)); }
    60% { transform: rotate(calc(var(--rot, 0deg) + 6deg)); }
}

h1, h2, h3 {
    font-family: var(--ah-titulo);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    font-size: 0.84rem;
    font-weight: 700;
}

/* --- Cabecalho de pagina ------------------------------------------- */
.cab {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 16px;
    margin: 6px 0 22px;
    padding: 22px 20px 24px;
    border-radius: 32px;
    color: var(--ah-floresta);
}

.cab-floresta {
    color: #eef5ec;
    background: linear-gradient(150deg, #1d4d39 0%, var(--ah-floresta) 60%, #0a2018 100%);
    box-shadow: 0 24px 50px rgba(15, 43, 32, 0.28);
}

.cab-lima {
    background: linear-gradient(150deg, #dcf98f, var(--ah-lima) 55%, #b6e653);
}

.cab-ceu {
    background: linear-gradient(150deg, #d8ebff, #a9d1ff 60%, #8ec5ff);
}

.cab-coral {
    background: linear-gradient(150deg, #ffc2b1, #ff9a80);
}

.cab-papel {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
}

.cab-fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cab-fundo i:first-child {
    position: absolute;
    right: -70px;
    top: -60px;
    width: 280px;
    height: 280px;
    background: currentColor;
    opacity: 0.07;
    clip-path: polygon(50% 0%, 57% 20%, 75% 7%, 71% 28%, 93% 25%, 80% 42%, 100% 50%, 80% 58%, 93% 75%, 71% 72%, 75% 93%, 57% 80%, 50% 100%, 43% 80%, 25% 93%, 29% 72%, 7% 75%, 20% 58%, 0% 50%, 20% 42%, 7% 25%, 29% 28%, 25% 7%, 43% 20%);
    animation: cab-gira 40s linear infinite;
}

.cab-fundo i:last-child {
    position: absolute;
    left: -60px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 28px solid currentColor;
    opacity: 0.06;
}

@keyframes cab-gira {
    to { transform: rotate(360deg); }
}

.cab-floresta .cab-fundo i:first-child {
    background: var(--ah-lima);
    opacity: 0.14;
}

.cab-texto {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.cab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 58%;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 43, 32, 0.1);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cab-floresta .cab-eyebrow,
.po-melhor-vazio .cab-eyebrow {
    background: rgba(200, 241, 105, 0.16);
    color: var(--ah-lima);
}

.cab-papel .cab-eyebrow {
    background: var(--ah-lima-suave);
    color: var(--green-texto);
}

.cab h1 {
    margin: 46px 0 0;
    max-width: 16em;
    color: inherit;
    font-size: clamp(1.45rem, 6.2vw, 2.7rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.cab-floresta h1 {
    color: var(--ah-lima);
}

.cab-lead {
    max-width: 60ch;
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.55;
    opacity: 0.82;
}

.cab-lead a {
    text-decoration: underline;
}

.cab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cab-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ah-floresta);
    font-size: 0.8rem;
    font-weight: 700;
}

.cab-chips b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    font-size: 0.85rem;
}

.cab-floresta .cab-chips span {
    background: rgba(255, 255, 255, 0.08);
    color: #eef5ec;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.cab-floresta .cab-chips b {
    background: rgba(255, 255, 255, 0.12);
}

.cab-papel .cab-chips span {
    background: var(--surface);
    color: var(--ink);
}

.cab-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.cab-arte {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 150px;
    height: 96px;
    pointer-events: none;
}

.cab-st {
    position: absolute;
    animation: st-flutua 5s ease-in-out infinite;
}

.cab-st-1 { --rot: -8deg; width: 84px; height: 84px; right: 8px; top: 4px; }
.cab-st-2 { --rot: 12deg; width: 50px; height: 50px; right: 84px; top: 40px; animation-delay: -1.5s; }
.cab-st-3 { --rot: 0deg; width: 30px; height: 30px; right: 100px; top: 4px; animation-delay: -3s; }

@media (min-width: 760px) {
    .cab {
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: center;
        min-height: 250px;
        padding: 34px 38px;
    }

    .cab h1 {
        margin-top: 4px;
    }

    .cab-eyebrow {
        max-width: none;
    }

    .cab-arte {
        position: relative;
        top: auto;
        right: auto;
        width: 280px;
        height: 210px;
    }

    .cab-st-1 { width: 170px; height: 170px; right: 30px; top: 16px; }
    .cab-st-2 { width: 92px; height: 92px; right: 180px; top: 106px; }
    .cab-st-3 { width: 54px; height: 54px; right: 10px; top: 0; }
}

/* --- Estado vazio --------------------------------------------------- */
.vazio {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 10px 0 24px;
    padding: 30px 22px;
    border-radius: 28px;
    border: 2px dashed var(--line-2);
    background: var(--card);
    text-align: center;
}

.vazio-st {
    width: 120px;
    height: 120px;
    margin-bottom: 6px;
    --rot: -6deg;
    animation: st-abana 3s ease-in-out infinite;
}

.vazio h2 {
    margin: 0;
    font-size: 1.1rem;
}

.vazio p {
    max-width: 46ch;
    margin: 0;
    color: var(--muted);
}

.vazio-acoes {
    margin-top: 10px;
}

/* --- Faixa a correr ------------------------------------------------ */
.faixa {
    overflow: hidden;
    margin: 0 -14px;
    padding: 12px 0;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    transform: rotate(-1.5deg);
    box-shadow: 0 10px 24px rgba(15, 43, 32, 0.12);
}

.faixa > div {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: faixa-anda 28s linear infinite;
}

.faixa span {
    font-family: var(--ah-titulo);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.faixa i {
    font-style: normal;
}

@keyframes faixa-anda {
    to { transform: translateX(-33.333%); }
}

/* --- Catalogo ------------------------------------------------------ */
.cat-busca {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.cat-filtros summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    list-style: none;
}

.cat-filtros summary::-webkit-details-marker { display: none; }

.cat-filtros summary b {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--ah-coral);
    color: #fff;
    font-size: 0.72rem;
}

.cat-filtros-corpo {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 16px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
}

@media (min-width: 760px) {
    .cat-filtros-corpo {
        grid-template-columns: 1fr 1fr auto auto;
        align-items: end;
    }
}

.cat-filtros-corpo label {
    display: grid;
    gap: 6px;
    font-size: 0.8rem;
}

.cat-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
}

.cat-check input {
    width: 20px;
    height: 20px;
}

.cat-filtros-acoes {
    display: flex;
    gap: 8px;
}

.cat-lista a.on {
    background: var(--ah-floresta);
    color: var(--ah-lima);
}

.cat-lista a.on span {
    background: var(--ah-lima);
}

.cat-contagem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: 0.84rem;
}

.cat-contagem p {
    margin: 0;
}

.cat-contagem b {
    color: var(--ink);
    font-family: var(--ah-titulo);
}

.cat-comparar {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
    font-weight: 800;
    font-size: 0.8rem;
}

/* --- Cartao de produto --------------------------------------------- */
.pc-grelha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 720px) {
    .pc-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1040px) {
    .pc-grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pc {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px 8px 14px;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc:hover {
    transform: translateY(-3px);
    border-color: var(--green-strong);
    box-shadow: 0 16px 34px rgba(15, 43, 32, 0.14);
}

.pc-foto {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 18px;
    background: var(--ah-foto);
    overflow: hidden;
}

.pc-foto img {
    width: 100%;
    height: 100%;
    padding: 14px;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: transform 0.25s ease;
}

.pc:hover .pc-foto img {
    transform: scale(1.05);
}

.pc-pct,
.pc-so {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ah-coral);
    color: #fff;
    font-family: var(--ah-titulo);
    font-size: 0.72rem;
    font-weight: 800;
    transform: rotate(-4deg);
    box-shadow: 0 4px 0 rgba(15, 43, 32, 0.2);
}

.pc-so {
    background: var(--ah-floresta);
    font-family: var(--ah-fonte);
    transform: none;
}

.pc-bandeira {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(15, 43, 32, 0.14);
}

.pc-tend {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: normal;
}

.pc-tend-desceu { background: var(--ah-lima); color: var(--ah-floresta); }
.pc-tend-subiu { background: #ffe0d8; color: #9b2c14; }

.pc-corpo {
    display: grid;
    gap: 5px;
    padding: 10px 4px 0;
    flex: 1 1 auto;
    align-content: start;
}

.pc-cat {
    margin: 0;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pc h3 {
    margin: 0;
    min-height: 2.5em;
    font-family: var(--ah-fonte);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-marca {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-precos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.pc-precos strong {
    font-family: var(--ah-titulo);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.pc-precos s {
    color: var(--muted);
    font-size: 0.74rem;
}

.pc-paises {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pc-paises span {
    padding: 3px 7px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.pc-paises span.on {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.pc-poupa {
    width: fit-content;
    margin: 2px 0 0;
    padding-right: 42px;
    color: var(--green-texto);
    font-size: 0.72rem;
    font-weight: 700;
}

.pc-nota {
    margin: 0;
    padding-right: 42px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.pc-add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
}

.pc-add button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 13px;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(15, 43, 32, 0.25);
    transition: transform 0.12s ease;
}

:root:not([data-tema="claro"]) .pc-add button {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.pc-add button:active {
    transform: translateY(3px);
    box-shadow: none;
}

.pc-promo {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    align-content: end;
    gap: 6px;
    min-height: 150px;
    padding: 20px;
    padding-right: 130px;
    border-radius: 24px;
    background: var(--ah-floresta);
    color: #eef5ec;
    overflow: hidden;
}

.pc-promo strong {
    font-family: var(--ah-titulo);
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--ah-lima);
    text-transform: uppercase;
}

.pc-promo span {
    font-weight: 700;
    font-size: 0.84rem;
}

.pc-promo-st {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 110px;
    height: 110px;
    margin-top: -55px;
    --rot: 8deg;
    animation: st-flutua 4s ease-in-out infinite;
}

@media (min-width: 720px) {
    .pc-promo {
        grid-column: span 2;
    }
}

/* --- Ficha do produto ----------------------------------------------- */
.fp-topo {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
}

@media (min-width: 900px) {
    .fp-topo {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
        gap: 30px;
    }

    .fp-foto {
        position: sticky;
        top: 90px;
    }
}

.fp-foto {
    position: relative;
    aspect-ratio: 1;
    border-radius: 32px;
    background:
        radial-gradient(60% 60% at 50% 45%, #fff, var(--ah-foto));
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
}

.fp-foto > img {
    width: 100%;
    height: 100%;
    padding: 12%;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent !important;
    border: 0 !important;
}

.fp-selo {
    position: absolute;
    top: -10px;
    left: -6px;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    transform: rotate(-12deg);
}

.fp-selo-st {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: cab-gira 18s linear infinite;
}

.fp-selo b {
    position: relative;
    font-family: var(--ah-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ah-floresta);
}

.fp-foto .pc-tend {
    left: auto;
    right: 14px;
    bottom: 14px;
    font-size: 0.8rem;
}

.fp-info {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.fp-info h1 {
    margin: 0;
    font-size: clamp(1.35rem, 5.4vw, 2.2rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.fp-ident {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fp-ident span {
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.fp-ident b {
    color: var(--ink);
}

.fp-nota {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.fp-fresco {
    font-size: 0.76rem;
}

.duelo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.duelo-lado {
    position: relative;
    display: grid;
    gap: 4px;
    align-content: start;
    min-height: 118px;
    padding: 16px;
    border-radius: 24px;
    background: var(--card);
    border: 1.5px solid var(--line-2);
}

.duelo-lado:last-of-type {
    text-align: right;
    justify-items: end;
}

.duelo-pais {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.duelo-lado strong {
    font-family: var(--ah-titulo);
    font-size: clamp(1.3rem, 6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.duelo-lado em {
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 700;
    color: var(--muted);
}

.duelo-lado.vence {
    background: var(--ah-lima);
    border-color: var(--ah-floresta);
    color: var(--ah-floresta);
    box-shadow: 0 6px 0 var(--ah-floresta);
}

.duelo-lado.vence .duelo-pais,
.duelo-lado.vence em {
    color: var(--ah-floresta);
}

.duelo-lado.falta {
    border-style: dashed;
    opacity: 0.75;
}

.duelo-lado.falta strong {
    font-size: 1rem;
}

.duelo-coroa {
    position: absolute;
    top: -30px;
    right: 12px;
    width: 52px;
    height: 52px;
    --rot: 14deg;
    animation: st-abana 3.5s ease-in-out infinite;
}

.duelo-lado:last-of-type .duelo-coroa {
    right: auto;
    left: 12px;
    --rot: -14deg;
}

.duelo-vs {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-family: var(--ah-titulo);
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 0 0 4px var(--paper);
}

.duelo-largo {
    margin: 0 0 12px;
}

.historia {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 26px;
    background: var(--ah-floresta);
    color: #eef5ec;
    overflow: hidden;
}

.historia::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(200, 241, 105, 0.12);
}

.historia-st {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    --rot: -8deg;
    animation: st-flutua 4s ease-in-out infinite;
}

.historia > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.historia span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(238, 245, 236, 0.7);
}

.historia strong {
    font-family: var(--ah-titulo);
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ah-lima);
}

.historia p {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: rgba(238, 245, 236, 0.78);
}

.historia-grande {
    margin: 0 0 20px;
    padding: 24px 22px;
    border-radius: 30px;
    align-items: flex-start;
}

.historia-grande .historia-st {
    width: 110px;
    height: 110px;
}

.historia-grande .ah-btn-lima {
    width: fit-content;
    margin-top: 12px;
}

.historia-grande .car-contas {
    margin-top: 12px;
}

.historia-nao strong {
    color: #ffb4a3;
}

.historia-mini {
    font-size: 0.78rem !important;
}

.historia-mini b {
    color: #fff;
}

@media (max-width: 520px) {
    .historia-grande {
        flex-direction: column;
    }
}

.aviso-cartao {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--warn-bg);
    border: 1px solid rgba(244, 180, 0, 0.35);
    font-size: 1.2rem;
}

.aviso-cartao > div {
    display: grid;
    gap: 4px;
    font-size: 0.86rem;
}

.aviso-cartao p {
    margin: 0;
    color: var(--muted);
}

.aviso-cartao .button {
    width: fit-content;
    margin-top: 6px;
}

.fp-carrinho {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.fp-carrinho .button {
    flex: 1 1 200px;
    min-height: 52px;
}

.passo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--card);
    border: 1.5px solid var(--line-2);
}

.passo button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.passo button:last-child {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.passo input {
    width: 44px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 800;
    -moz-appearance: textfield;
}

.passo input::-webkit-outer-spin-button,
.passo input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fp-blocos {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

@media (min-width: 900px) {
    .fp-blocos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .bloco-largo {
        grid-column: 1 / -1;
    }
}

.bloco {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
}

.bloco > h2 {
    margin: 0;
    font-size: 1.05rem;
}

.bloco-cab {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bloco-cab h2 {
    margin: 0 0 4px;
    font-size: 1.02rem;
    line-height: 1.2;
}

.bloco-cab p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.bloco-st {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    --rot: -6deg;
    transform: rotate(var(--rot));
}

.bloco:hover .bloco-st {
    animation: st-abana 0.8s ease-in-out;
}

.bloco-nota {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.bloco-nota a {
    color: var(--green-texto);
    font-weight: 700;
    text-decoration: underline;
}

/* Lojas */
.lojas {
    display: grid;
    gap: 8px;
}

.loja {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--card-2);
    border: 1.5px solid transparent;
}

.loja-melhor {
    border-color: var(--ah-lima-forte);
    background: var(--ah-lima-suave);
}

.loja-falta {
    opacity: 0.6;
}

.loja-logo,
.loja > img {
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px !important;
    padding: 4px;
    border-radius: 14px !important;
    background: #fff !important;
    object-fit: contain;
    border: 1px solid var(--line) !important;
}

.loja-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-family: var(--ah-titulo);
    font-weight: 800;
}

.loja-info {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.loja-info strong {
    font-size: 0.9rem;
}

.loja-info span,
.loja-info em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
}

.loja-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
    font-size: 0.68rem !important;
    font-weight: 800;
}

.loja-preco {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 2px;
}

.loja-preco b {
    font-family: var(--ah-titulo);
    font-size: 1rem;
    font-weight: 800;
}

.loja-preco a,
.loja-preco small {
    color: var(--green-texto);
    font-size: 0.72rem;
    font-weight: 700;
}

.loja-preco small {
    color: var(--muted);
}

/* Alternativas */
.alts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 180px);
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.alts::-webkit-scrollbar { display: none; }

.alt {
    position: relative;
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 8px 8px 12px;
    border-radius: 20px;
    background: var(--card-2);
    border: 1.5px solid var(--line);
    scroll-snap-align: start;
}

.alt-barata {
    border-color: var(--ah-lima-forte);
}

.alt-img {
    display: block;
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--ah-foto);
    overflow: hidden;
}

.alt-img img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent !important;
    border: 0 !important;
}

.alt-menos {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    font-size: 0.7rem;
    font-weight: 800;
}

.alt strong {
    font-size: 0.8rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.alt small,
.alt em {
    color: var(--muted);
    font-size: 0.7rem;
    font-style: normal;
}

.alt b {
    font-family: var(--ah-titulo);
    font-size: 0.95rem;
}

.alt b span {
    font-family: var(--ah-fonte);
    font-size: 0.68rem;
    color: var(--muted);
}

/* Seguir o preco */
.seguir {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(150deg, #fff4c8, #ffe89a);
    border-color: transparent;
    color: var(--ah-floresta);
}

:root:not([data-tema="claro"]) .seguir {
    background: linear-gradient(150deg, #3b3514, #2a2610);
    color: #fff4c8;
}

.seguir-st {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    --rot: 10deg;
    animation: st-abana 2.4s ease-in-out infinite;
}

.seguir-txt {
    display: grid;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.seguir-txt h2 {
    margin: 0;
    font-size: 1rem;
}

.seguir-txt p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

.seguir-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seguir-campos input,
.seguir-campos select {
    flex: 1 1 180px;
    background: #fff !important;
    color: var(--ah-floresta) !important;
}

@media (max-width: 480px) {
    .seguir {
        flex-direction: column;
    }
}

/* --- Carrinho ------------------------------------------------------- */
.car-layout {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

@media (min-width: 900px) {
    .car-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
        align-items: start;
    }

    .car-total {
        position: sticky;
        top: 88px;
    }
}

.car-lista {
    display: grid;
    gap: 10px;
    align-content: start;
}

.car-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
}

.car-foto {
    flex: 0 0 auto;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: var(--ah-foto);
    overflow: hidden;
}

.car-foto img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent !important;
    border: 0 !important;
}

.car-info {
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.car-info h2 {
    margin: 0;
    font-family: var(--ah-fonte);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.car-linha .passo {
    flex: 0 0 auto;
    flex-direction: column-reverse;
    border-radius: 22px;
}

.car-linha .passo input {
    width: 36px !important;
    min-height: 28px !important;
}

.car-linha .passo button {
    width: 32px;
    height: 32px;
}

.car-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.car-total {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 24px 22px;
    border-radius: 30px;
    background: linear-gradient(160deg, #1d4d39, var(--ah-floresta) 60%);
    color: #eef5ec;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 43, 32, 0.3);
}

.car-total-st {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 96px;
    height: 96px;
    --rot: 8deg;
    animation: st-flutua 4s ease-in-out infinite;
}

.car-total-rotulo {
    margin: 0;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.car-total-valor {
    margin: 0;
    font-family: var(--ah-titulo);
    font-size: clamp(2.2rem, 10vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--ah-lima);
}

.car-total.nao .car-total-valor {
    color: #ffb4a3;
}

.car-total-sub {
    margin: 0 0 8px;
    color: rgba(238, 245, 236, 0.66);
    font-size: 0.8rem;
}

.car-barras {
    display: grid;
    gap: 8px;
}

.car-barra {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.car-barra i {
    height: 12px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(238, 245, 236, 0.35) 0 var(--w), transparent var(--w)),
        rgba(255, 255, 255, 0.08);
}

.car-barra.ganha i {
    background:
        linear-gradient(90deg, var(--ah-lima) 0 var(--w), transparent var(--w)),
        rgba(255, 255, 255, 0.08);
}

.car-barra b {
    font-variant-numeric: tabular-nums;
}

.car-contas {
    display: grid;
    gap: 0;
    margin: 6px 0 0;
    border-top: 1px dashed rgba(238, 245, 236, 0.2);
}

.car-contas div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(238, 245, 236, 0.2);
    font-size: 0.86rem;
}

.car-contas dt {
    color: rgba(238, 245, 236, 0.72);
}

.car-contas dd {
    margin: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.car-contas .fim dd {
    color: var(--ah-lima);
    font-family: var(--ah-titulo);
}

.car-aviso {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 212, 71, 0.14);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* --- Gasolineiras --------------------------------------------------- */
.po-topo {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

@media (min-width: 900px) {
    .po-topo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.po-melhor {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: 30px;
    background: linear-gradient(150deg, #dcf98f, var(--ah-lima) 60%, #b6e653);
    color: var(--ah-floresta);
    overflow: hidden;
}

.po-melhor-st {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 88px;
    height: 88px;
    --rot: 10deg;
    animation: st-flutua 4s ease-in-out infinite;
}

.po-melhor .cab-eyebrow {
    max-width: 60%;
}

.po-melhor h2 {
    margin: 26px 0 0;
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    padding-right: 60px;
}

.po-melhor h2 small {
    display: block;
    margin-top: 4px;
    font-family: var(--ah-fonte);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.po-melhor-nums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.po-melhor-nums div {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
}

.po-melhor-nums b {
    font-family: var(--ah-titulo);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.po-melhor-nums span {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.7;
}

.po-melhor-txt {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.85;
}

.po-melhor .ah-btn-lima {
    width: fit-content;
    background: var(--ah-floresta);
    color: var(--ah-lima) !important;
}

.po-melhor-vazio {
    background: var(--ah-floresta);
    color: #eef5ec;
}

.po-form .location-form {
    display: grid;
    gap: 12px;
}

.po-form label {
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
}

.form-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.po-fronteira {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(150deg, #d8ebff, #a9d1ff);
    color: var(--ah-floresta);
}

.po-fronteira h2 {
    margin: 8px 0;
    font-size: 1.15rem;
}

.po-fronteira p {
    margin: 0 0 8px;
    font-size: 0.84rem;
    line-height: 1.5;
}

.po-fronteira-nao {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
}

.po-fronteira-st {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    --rot: -6deg;
    animation: st-flutua 5s ease-in-out infinite;
}

.po-nota {
    opacity: 0.75;
    font-size: 0.76rem !important;
}

@media (max-width: 520px) {
    .po-fronteira {
        flex-direction: column;
        align-items: flex-start;
    }
}

.po-escala {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
    font-weight: 800;
}

.po-escala i {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ah-lima-forte), var(--ah-sol), var(--ah-coral));
}

.po-lista {
    display: grid;
    gap: 10px;
}

@media (min-width: 760px) {
    .po-lista-seccao .po-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.po-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px 12px 12px;
    border-radius: 22px;
    background: var(--card);
    border: 1.5px solid var(--line);
    box-shadow: var(--ah-sombra);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.po-linha:hover {
    transform: translateY(-2px);
    border-color: var(--green-strong);
}

.po-linha .marca-logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

.po-linha .marca-chip {
    width: 48px;
    height: 48px;
}

.po-info {
    display: grid;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.po-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}

.po-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.po-medidor {
    position: relative;
    display: block;
    height: 5px;
    margin-top: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ah-lima-forte), var(--ah-sol), var(--ah-coral));
    opacity: 0.55;
}

.po-medidor i {
    position: absolute;
    top: 50%;
    left: var(--pos, 0%);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--card);
}

.po-preco {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 3px;
}

.po-preco b {
    padding: 6px 10px;
    border-radius: 12px;
    background: var(--surface);
    font-family: var(--ah-titulo);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.po-preco small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.po-preco em {
    color: var(--muted);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
}

.po-preco em.ok {
    color: var(--green-texto);
}

.po-linha.is-melhor {
    background: var(--ah-floresta);
    border-color: transparent;
    color: #eef5ec;
}

.po-linha.is-melhor small,
.po-linha.is-melhor .po-preco small {
    color: rgba(238, 245, 236, 0.66);
}

.po-linha.is-melhor .po-preco b {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.po-linha.is-melhor .po-preco em {
    color: var(--ah-lima);
}

.po-linha.is-melhor .po-medidor i {
    background: var(--ah-lima);
    border-color: var(--ah-floresta);
}

.po-linha.is-poupa {
    border-color: var(--ah-lima-forte);
}

/* Ficha do posto */
.ps-marca {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-cab .marca-logo--grande,
.ps-cab .marca-chip {
    width: 56px;
    height: 56px;
}

.ps-cab h1 {
    margin-top: 18px;
}

.ps-cab .cab-arte {
    top: 60px;
}

@media (min-width: 760px) {
    .ps-cab .cab-arte {
        top: auto;
    }
}

.ps-precos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

@media (min-width: 900px) {
    .ps-precos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ps-preco {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: 24px;
    color: var(--ah-floresta);
    box-shadow: 0 5px 0 rgba(15, 43, 32, 0.22);
}

.ps-sol { background: var(--ah-sol); }
.ps-lima { background: var(--ah-lima); }
.ps-ceu { background: var(--ah-ceu, #8ec5ff); }
.ps-lilas { background: #c9c0ff; }

.ps-preco > span {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ps-preco strong {
    font-family: var(--ah-titulo);
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.ps-preco strong small {
    font-family: var(--ah-fonte);
    font-size: 0.8rem;
    letter-spacing: 0;
}

.ps-preco p {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    opacity: 0.8;
}

.ps-preco .pc-tend {
    position: static;
    width: fit-content;
    background: rgba(255, 255, 255, 0.7);
}

/* --- Comparador ---------------------------------------------------- */
.modos {
    display: inline-flex;
    gap: 4px;
    margin: 4px 0 12px;
    padding: 5px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
}

.modos a {
    padding: 9px 16px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 800;
    font-size: 0.86rem;
}

.modos a.on {
    background: var(--ah-floresta);
    color: var(--ah-lima);
}

.cmp-cidades,
.cmp-picker {
    margin-bottom: 18px;
}

.cmp-cidades label,
.cmp-picker label {
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
}

@media (min-width: 900px) {
    .cmp-cidades {
        grid-template-columns: 1fr auto 1fr 0.8fr auto;
        align-items: end;
    }
}

.cmp-vs {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    font-family: var(--ah-titulo);
    font-size: 0.72rem;
    font-weight: 800;
    transform: rotate(-8deg);
}

.cmp-letra {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-family: var(--ah-titulo);
    font-size: 0.9rem;
    font-weight: 800;
    vertical-align: middle;
}

.cmp-slot {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.cmp-nome {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
}

.cmp-qtd {
    flex: 0 0 76px;
}

.cmp-decisao {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 20px;
    background: var(--ah-lima-suave);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.45;
}

.cmp-colunas,
.cmp-grelha {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

@media (min-width: 760px) {
    .cmp-colunas,
    .cmp-grelha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cmp-cartao {
    position: relative;
    justify-items: center;
    text-align: center;
}

.cmp-cartao .cmp-letra {
    position: absolute;
    top: 14px;
    left: 14px;
}

.cmp-foto {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 24px;
    background: var(--ah-foto);
    overflow: hidden;
}

.cmp-foto img {
    width: 100%;
    height: 100%;
    padding: 12px;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent !important;
    border: 0 !important;
}

.cmp-cartao h2 {
    margin: 0;
    font-size: 1rem;
}

.cmp-paises {
    justify-content: center;
}

.cmp-paises span {
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 12px;
}

.cmp-vazio-st {
    width: 90px;
    height: 90px;
}

.cmp-fuel {
    display: grid;
    gap: 8px;
}

.cmp-fuel-linha {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--card-2);
    font-size: 0.84rem;
}

.cmp-fuel-linha > span {
    font-weight: 700;
}

.cmp-fuel-linha > span.ganha {
    padding: 4px 8px;
    border-radius: 10px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.cmp-fuel-linha small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.cmp-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* --- Conta, contacto, legal ---------------------------------------- */
.auth {
    display: grid;
    gap: 16px;
    margin: 6px 0 24px;
}

@media (min-width: 900px) {
    .auth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }
}

.auth-arte {
    position: relative;
    display: grid;
    align-content: end;
    gap: 12px;
    min-height: 300px;
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(150deg, #1d4d39, var(--ah-floresta) 60%);
    color: #eef5ec;
    overflow: hidden;
}

.auth-arte h1 {
    margin: 0;
    color: var(--ah-lima);
    font-size: clamp(1.5rem, 6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.auth-arte p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    opacity: 0.82;
}

.auth-lima {
    background: linear-gradient(150deg, #dcf98f, var(--ah-lima) 60%);
    color: var(--ah-floresta);
}

.auth-lima h1 {
    color: var(--ah-floresta);
}

.auth-lima .cab-eyebrow {
    background: rgba(15, 43, 32, 0.1);
    color: var(--ah-floresta);
}

.auth-st {
    position: absolute;
    animation: st-flutua 5s ease-in-out infinite;
}

.auth-st-1 { --rot: -10deg; width: 120px; height: 120px; top: 18px; right: 18px; }
.auth-st-2 { --rot: 14deg; width: 74px; height: 74px; top: 40px; right: 146px; animation-delay: -2s; }
.auth-st-3 { width: 40px; height: 40px; top: 18px; left: 22px; animation-delay: -1s; }

.auth-lista {
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-weight: 700;
    font-size: 0.86rem;
}

.auth-lista li {
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
}

.auth-form {
    align-content: start;
}

.auth-form h2 {
    margin: 0 0 4px;
    font-size: 1.3rem;
}

.form label,
.auth-form label,
.settings-grid label,
.ct-layout label {
    display: grid;
    gap: 6px;
    font-size: 0.84rem;
}

.ct-layout {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

@media (min-width: 900px) {
    .ct-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
        align-items: start;
    }
}

.ct-ajuda .bloco-st {
    width: 70px;
    height: 70px;
}

.texto-legal {
    margin-bottom: 20px;
    line-height: 1.65;
}

.texto-legal h2 {
    margin: 12px 0 0;
    font-size: 1.05rem;
}

.settings-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

@media (min-width: 900px) {
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Blog ------------------------------------------------------------ */
.blog-destaque,
.blog-cartao {
    border-radius: 28px !important;
    overflow: hidden;
}

.blog-destaque {
    background: var(--ah-floresta) !important;
    color: #eef5ec !important;
    border: 0 !important;
}

.blog-destaque h2 {
    color: var(--ah-lima);
}

.blog-destaque p {
    color: rgba(238, 245, 236, 0.8) !important;
}

.blog-arte {
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: 22px;
    background: var(--ah-lima);
}

.blog-cartao:nth-child(3n+2) .blog-arte { background: var(--ah-sol); }
.blog-cartao:nth-child(3n) .blog-arte { background: #c9e2ff; }
.blog-destaque .blog-arte { background: rgba(200, 241, 105, 0.14); min-height: 200px; }

.blog-arte .st {
    width: 110px;
    height: 110px;
    --rot: -6deg;
    transform: rotate(var(--rot));
}

.blog-cartao:hover .blog-arte .st,
.blog-destaque:hover .blog-arte .st {
    animation: st-abana 0.9s ease-in-out;
}

.blog-cartao h2,
.blog-destaque h2 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.artigo {
    margin-bottom: 20px;
    line-height: 1.7;
}

.artigo h2 {
    margin: 16px 0 0;
    font-size: 1.15rem;
}

.artigo-cabecalho .cab-lead,
.artigo-cabecalho .lead,
.artigo-cabecalho .muted {
    color: inherit;
    opacity: 0.8;
}

.artigo-capa {
    margin: 8px 0 0;
}

.artigo-capa img {
    max-height: 260px;
    border-radius: 22px;
    background: #fff;
    object-fit: contain;
}

/* Paginacao */
.pager a,
.pager span {
    border-radius: 999px !important;
}

.pager .pager-current {
    background: var(--ah-floresta) !important;
    color: var(--ah-lima) !important;
}

/* Reportar */
.reportar-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.recomendacao {
    padding-top: 22px !important;
}

.reco-st {
    position: absolute;
    top: -34px;
    left: 16px;
    width: 64px;
    height: 64px;
    --rot: -10deg;
    animation: st-abana 2.5s ease-in-out infinite;
}

.recomendacao .eyebrow {
    margin-left: 60px;
}

@media (prefers-reduced-motion: reduce) {
    .st,
    .cab-st,
    .cab-fundo i,
    .faixa > div,
    .fp-selo-st {
        animation: none !important;
    }
}

/* --- Home: desenhos --------------------------------------------------- */
.ah-carteira-st {
    position: absolute;
    top: 44px;
    right: 10px;
    z-index: 1;
    width: 92px;
    height: 92px;
    --rot: 8deg;
    animation: st-flutua 4.5s ease-in-out infinite;
}

.ah-carteira-st2 {
    position: absolute;
    top: 118px;
    right: 96px;
    z-index: 1;
    width: 34px;
    height: 34px;
    --rot: -12deg;
    animation: st-flutua 3.5s ease-in-out infinite -1s;
}

.ah-carteira-valor,
.ah-carteira-nota {
    position: relative;
    z-index: 2;
    max-width: 72%;
}

.ah-atalhos a > span .st {
    width: 40px;
    height: 40px;
    filter: none;
}

.ah-atalhos a:nth-child(2) > span {
    background: var(--ah-lima);
}

.ah-atalhos a:hover > span .st {
    animation: st-abana 0.7s ease-in-out;
}

.ah-quem {
    position: relative;
}

.ah-quem-st {
    position: absolute;
    top: -14px;
    right: -8px;
    width: 46px;
    height: 46px;
    --rot: 16deg;
    transform: rotate(var(--rot));
}

.ah-mini-st {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.app-home h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ah-h2-st {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    --rot: -8deg;
    transform: rotate(var(--rot));
}

.ah-prateleira {
    grid-auto-columns: minmax(170px, 180px);
}

@media (min-width: 900px) {
    .ah-prateleira {
        grid-auto-columns: minmax(200px, 1fr);
    }
}

.ah-prateleira .pc {
    scroll-snap-align: start;
}

.ah-post-emoji {
    width: 64px !important;
    height: 64px !important;
    background: transparent !important;
}

.ah-post-emoji .st {
    width: 64px;
    height: 64px;
}

.ah-convite-st {
    width: 70px;
    height: 70px;
    --rot: 10deg;
    animation: st-abana 2.6s ease-in-out infinite;
}

.app-home .faixa {
    margin: 4px -14px;
}

@media (min-width: 900px) {
    .app-home .faixa {
        margin: 4px 0;
        border-radius: 18px;
    }
}

.ah-ola-texto h1 {
    font-size: clamp(1.25rem, 5vw, 2rem);
}

.ah-mini strong {
    font-size: 1.25rem;
}

.ah-donut-centro strong {
    font-size: 1.35rem;
}

/* --- Ajustes: botao + dos cartoes e barra de baixo com desenhos ------- */
.pc {
    container-type: inline-size;
}

.pc-add {
    top: calc(100cqw - 8px - 38px);
    bottom: auto;
    right: 14px;
}

.pc-poupa,
.pc-nota {
    padding-right: 0;
}

.pc-add button {
    box-shadow: 0 4px 0 rgba(15, 43, 32, 0.25), 0 0 0 3px #fff;
}

@media (max-width: 720px) {
    .tabbar a span:first-child {
        position: relative;
        filter: none;
        opacity: 1;
    }

    .tab-st {
        width: 26px;
        height: 26px;
        filter: none;
        opacity: 0.72;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .tabbar a.active .tab-st {
        opacity: 1;
        transform: translateY(-2px) scale(1.12) rotate(-6deg);
    }

    .tabbar a:nth-child(3) .tab-st {
        width: 32px;
        height: 32px;
        opacity: 1;
    }

    .tab-num {
        position: absolute;
        top: -4px;
        right: -10px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--ah-coral);
        color: #fff;
        font-size: 0.6rem;
        line-height: 18px;
        text-align: center;
    }
}

.ah-atalhos a > span .st {
    width: 48px;
    height: 48px;
}

.app-home .ah-post strong {
    font-size: 0.98rem;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.auth-arte {
    padding-top: 156px;
}

@media (min-width: 900px) {
    .auth-arte {
        padding-top: 170px;
    }
}

/* --- Desenho no lugar da foto que falta ------------------------------- */
img.photo-missing,
:root:not([data-tema="claro"]) img.photo-missing,
:root[data-tema="escuro"] img.photo-missing {
    opacity: 1 !important;
    background: #f7f9f4 !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
    object-fit: cover !important;
}

.pc-foto img.photo-missing,
.fp-foto > img.photo-missing,
.alt-img img.photo-missing,
.cmp-foto img.photo-missing,
.car-foto img.photo-missing {
    padding: 0 !important;
}

/* =========================================================================
   10. COMUNIDADE, GUIAS, RADAR E CARTOES CLASSICOS
   ========================================================================= */

.avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--av, var(--ah-lima));
    color: var(--ah-floresta);
    font-family: var(--ah-titulo);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--av, var(--ah-lima));
}

.pc-com {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--ah-floresta);
    font-size: 0.68rem;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(15, 43, 32, 0.15);
}

/* Resumo e formulario */
.com-resumo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.com-resumo div {
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: 18px;
    background: var(--surface);
}

.com-resumo div.lima {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.com-resumo b {
    font-family: var(--ah-titulo);
    font-size: 1.05rem;
    font-weight: 800;
}

.com-resumo span {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.75;
}

.com-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background: var(--card-2);
    border: 1.5px dashed var(--line-2);
}

.com-form label {
    display: grid;
    gap: 6px;
    font-size: 0.8rem;
}

.com-form-eu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.com-form-eu > div {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.com-form-eu span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.com-ganha {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
    font-weight: 800 !important;
    animation: st-abana 2.5s ease-in-out infinite;
}

.com-form-linha {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 0.9fr;
    gap: 8px;
}

@media (max-width: 560px) {
    .com-form-linha {
        grid-template-columns: 1fr 1fr;
    }

    .com-form-linha label:nth-child(2) {
        grid-column: 1 / -1;
        order: 3;
    }
}

.com-euro {
    position: relative;
    display: block;
}

.com-euro input {
    width: 100%;
    padding-right: 30px;
    font-weight: 800;
}

.com-euro i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-weight: 800;
    color: var(--muted);
}

.com-convite {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: var(--ah-lima-suave);
}

.com-convite p {
    margin: 4px 0 10px;
    font-size: 0.84rem;
    color: var(--muted);
}

.com-convite-st {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    --rot: -8deg;
    animation: st-flutua 4s ease-in-out infinite;
}

.com-convite-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Cartao de comentario */
.com-lista {
    display: grid;
    gap: 10px;
}

.com-grelha {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.com {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    min-width: 0;
}

.com-exemplo {
    border-style: dashed;
}

.com-cab {
    display: flex;
    align-items: center;
    gap: 10px;
}

.com-quem {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.com-quem strong {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-quem span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.com-tag-exemplo {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.com-produto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 14px;
    background: var(--card-2);
    font-size: 0.78rem;
    font-weight: 700;
}

.com-produto img {
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    object-fit: contain;
    background: #fff !important;
}

.com-produto span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-pago {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.com-pago > span {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.74rem;
    font-weight: 700;
}

.com-pago-valor {
    background: var(--ah-floresta) !important;
    color: #eef5ec;
}

.com-pago-valor b {
    color: var(--ah-lima);
    font-family: var(--ah-titulo);
}

.com-val-ok { background: var(--ah-lima-suave) !important; color: var(--green-texto); }
.com-val-menos { background: var(--ah-lima) !important; color: var(--ah-floresta); }
.com-val-mais { background: var(--warn-bg) !important; }

.com-texto {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

.com-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.com-pe form {
    margin: 0;
}

.com-util,
.com-apagar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1.5px solid var(--line-2);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.com-util.on {
    background: var(--ah-lima);
    border-color: var(--ah-lima);
    color: var(--ah-floresta);
}

.com-util.is-off {
    cursor: default;
    opacity: 0.7;
}

.com-apagar {
    color: var(--danger-texto);
}

/* Home: comunidade + podio */
.ah-comunidade {
    display: grid;
    gap: 12px;
}

@media (min-width: 900px) {
    .ah-comunidade {
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
    }
}

.ah-podio {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 26px;
    background: linear-gradient(150deg, #1d4d39, var(--ah-floresta));
    color: #eef5ec;
    overflow: hidden;
}

.ah-podio strong {
    font-family: var(--ah-titulo);
    color: var(--ah-lima);
    font-size: 1rem;
    padding-right: 70px;
}

.ah-podio span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.82rem;
    font-weight: 700;
}

.ah-podio em {
    font-style: normal;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--ah-lima);
}

.ah-podio-st {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 64px;
    height: 64px;
    --rot: 10deg;
    animation: st-flutua 4s ease-in-out infinite;
}

.ah-atalhos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

@media (max-width: 400px) {
    .ah-atalhos a > span {
        width: 54px;
        height: 54px;
        border-radius: 19px;
    }

    .ah-atalhos a > span .st {
        width: 40px;
        height: 40px;
    }
}

/* Guias */
.gu-topo {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

@media (min-width: 900px) {
    .gu-topo {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
    }
}

.gu-eu {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: 30px;
    background: linear-gradient(150deg, #dcf98f, var(--ah-lima) 60%, #b6e653);
    color: var(--ah-floresta);
    overflow: hidden;
    margin-bottom: 18px;
}

.gu-topo .gu-eu {
    margin-bottom: 0;
}

.gu-eu-fora {
    background: linear-gradient(150deg, #1d4d39, var(--ah-floresta));
    color: #eef5ec;
}

.gu-eu-fora h2 {
    color: var(--ah-lima);
}

.gu-eu-st {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 92px;
    height: 92px;
    --rot: 8deg;
    animation: st-flutua 4s ease-in-out infinite;
}

.gu-eu h2 {
    margin: 18px 0 0;
    padding-right: 90px;
    font-size: clamp(1.3rem, 5.6vw, 1.8rem);
    text-transform: uppercase;
    line-height: 1.05;
}

.gu-eu p {
    margin: 0;
    font-size: 0.86rem;
}

.gu-pontos b {
    font-family: var(--ah-titulo);
    font-size: 2rem;
    font-weight: 800;
}

.gu-barra {
    height: 12px;
    border-radius: 999px;
    background: rgba(15, 43, 32, 0.15);
    overflow: hidden;
}

.gu-barra i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ah-floresta);
}

.gu-falta {
    font-weight: 700;
}

.gu-insignias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gu-insignias span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.45;
    filter: grayscale(1);
}

.gu-insignias span.on {
    background: #fff;
    opacity: 1;
    filter: none;
}

.gu-insignias b {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ah-lima);
    font-size: 0.75rem;
}

.gu-regras {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gu-regras li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--card-2);
    font-size: 0.84rem;
    font-weight: 600;
}

.gu-regras b {
    min-width: 44px;
    padding: 4px 0;
    border-radius: 10px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    font-family: var(--ah-titulo);
    text-align: center;
}

.gu-niveis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.gu-niveis div {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 16px;
    background: var(--card-2);
    text-align: center;
}

.gu-niveis div.on {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.gu-niveis .st {
    width: 40px;
    height: 40px;
}

.gu-niveis b {
    font-family: var(--ah-titulo);
}

.gu-niveis span {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
}

.gu-niveis small {
    font-size: 0.6rem;
    opacity: 0.7;
}

.gu-ranking {
    margin-bottom: 18px;
}

.gu-lista {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gu-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 18px;
    background: var(--card-2);
}

.gu-lista li.pod-1 {
    background: linear-gradient(90deg, #fff1bf, #ffe38a);
    color: var(--ah-floresta);
}

.gu-lista li.pod-2,
.gu-lista li.pod-3 {
    background: var(--ah-lima-suave);
}

.gu-lista li.eu {
    outline: 2px solid var(--ah-lima-forte);
}

.gu-pos {
    flex: 0 0 34px;
    font-family: var(--ah-titulo);
    font-weight: 800;
    text-align: center;
}

.gu-nome {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.gu-nome strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.gu-nome small {
    color: inherit;
    opacity: 0.7;
    font-size: 0.72rem;
    font-weight: 600;
}

.gu-pts {
    flex: 0 0 auto;
    font-family: var(--ah-titulo);
    font-size: 1.05rem;
}

.gu-pts small {
    font-family: var(--ah-fonte);
    font-size: 0.66rem;
}

.gu-recentes {
    margin-bottom: 20px;
}

/* Radar */
.rd-menu {
    margin-bottom: 10px;
}

.rd-dias {
    margin-bottom: 16px;
}

.rd-subiu {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffe0d8;
    color: #9b2c14;
    font-size: 0.8rem;
    font-weight: 800;
}

.rd-subiu-txt {
    color: #c2410c !important;
}

.rd-lista {
    grid-template-columns: 1fr !important;
}

.fp-blocos > .ah-seccao {
    min-width: 0;
}

.rd-min {
    position: relative;
    display: grid;
    scroll-snap-align: start;
}

.rd-min-tag {
    position: absolute;
    z-index: 2;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ah-sol);
    color: var(--ah-floresta);
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 3px 0 rgba(15, 43, 32, 0.2);
}

.rd-cesta-totais {
    display: grid;
    gap: 8px;
}

.rd-cesta-totais div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--card-2);
    font-weight: 700;
    font-size: 0.86rem;
}

.rd-cesta-totais b {
    font-family: var(--ah-titulo);
}

.rd-cesta-totais i {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--muted) 0 var(--w), var(--surface) var(--w));
    opacity: 0.6;
}

.rd-cesta-totais div.ganha i {
    background: linear-gradient(90deg, var(--ah-es) 0 var(--w), var(--surface) var(--w));
    opacity: 1;
}

.rd-cesta-totais div.mix {
    background: var(--ah-floresta);
    color: #eef5ec;
}

.rd-cesta-totais div.mix b {
    color: var(--ah-lima);
}

.rd-cesta-totais div.mix i {
    background: linear-gradient(90deg, var(--ah-lima) 0 var(--w), rgba(255, 255, 255, 0.1) var(--w));
    opacity: 1;
}

.rd-cesta-itens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.rd-item {
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 8px 8px 12px;
    border-radius: 18px;
    background: var(--card-2);
    border: 1px solid var(--line);
}

.rd-item img {
    width: 100%;
    aspect-ratio: 1.4;
    padding: 8px;
    border-radius: 12px !important;
    object-fit: contain;
    background: var(--ah-foto) !important;
}

.rd-item img.photo-missing {
    object-fit: cover !important;
}

.rd-item-tipo {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--green-texto);
}

.rd-item strong {
    font-size: 0.78rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rd-cesta-poupa b {
    color: var(--green-texto);
    font-family: var(--ah-titulo);
    font-size: 1.05rem;
}

.rd-cadeias {
    display: grid;
    gap: 8px;
}

.rd-cadeia {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 70px auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--card-2);
}

.rd-cadeia.top {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.rd-pos {
    font-family: var(--ah-titulo);
    font-weight: 800;
    text-align: center;
}

.rd-cad-nome {
    display: grid;
    min-width: 0;
}

.rd-cad-nome strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}

.rd-cad-nome small {
    font-size: 0.68rem;
    opacity: 0.75;
}

.rd-cad-barra {
    height: 8px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.18);
    overflow: hidden;
}

.rd-cad-barra i {
    display: block;
    width: var(--w);
    height: 100%;
    background: var(--ah-coral);
    border-radius: 999px;
}

.rd-cadeia b {
    font-family: var(--ah-titulo);
    font-size: 0.86rem;
}

.rd-so {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rd-so > div {
    display: grid;
    gap: 6px;
    align-content: start;
}

.rd-so-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--ah-floresta);
    color: #eef5ec;
    font-size: 0.8rem;
}

.rd-so-cab span {
    font-family: var(--ah-titulo);
    color: var(--ah-lima);
}

.rd-so-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    padding: 6px;
    border-radius: 12px;
    background: var(--card-2);
    font-size: 0.72rem;
}

.rd-so-item img {
    grid-row: span 2;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    object-fit: contain;
    background: #fff !important;
}

.rd-so-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.rd-mais {
    width: fit-content;
    color: var(--green-texto) !important;
    font-weight: 800;
    font-size: 0.82rem;
}

.rd-fuel {
    display: grid;
    gap: 10px;
}

.rd-fuel-linha {
    display: grid;
    gap: 6px;
}

.rd-fuel-linha strong {
    font-size: 0.86rem;
}

.rd-fuel-linha a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--card-2);
    font-size: 0.78rem;
}

.rd-fuel-linha a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-fuel-linha a.ganha {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.rd-fuel-linha a b {
    font-family: var(--ah-titulo);
    flex: 0 0 auto;
}

.cmp-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* --- Os cartoes classicos do inicio, com a pele nova ------------------- */
.ah-classico {
    display: grid;
    gap: 18px;
}

.ah-classico .quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.ah-classico .quick-stats a {
    display: grid;
    gap: 4px;
    padding: 16px 14px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    min-width: 0;
}

.ah-classico .quick-stats a:first-child {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.ah-classico .quick-stats a:nth-child(2) {
    background: var(--ah-floresta);
    color: #eef5ec;
}

.ah-classico .quick-stats strong {
    font-family: var(--ah-titulo);
    font-size: clamp(1.1rem, 5vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: inherit !important;
}

.ah-classico .quick-stats span {
    font-size: 0.72rem;
    font-weight: 700;
    color: inherit !important;
    opacity: 0.8;
}

.ah-classico .compare-layout {
    display: grid;
    gap: 16px;
    margin: 0;
}

@media (min-width: 980px) {
    .ah-classico .compare-layout {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        align-items: start;
    }

    .ah-classico .calculator {
        position: sticky;
        top: 88px;
    }
}

.ah-classico .calculator {
    display: grid;
    gap: 10px;
    padding: 20px !important;
    border-radius: 28px !important;
    background: linear-gradient(160deg, #1d4d39, var(--ah-floresta) 60%) !important;
    color: #eef5ec;
    border: 0 !important;
}

.ah-classico .calculator h2 {
    margin: 0;
    color: var(--ah-lima);
    font-size: 1.1rem;
}

.ah-classico .calculator label,
.ah-classico .calculator .muted,
.ah-classico .calculator .range-output span {
    color: rgba(238, 245, 236, 0.75) !important;
    font-size: 0.8rem;
}

.ah-classico .calculator .range-output {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ah-classico .calculator .range-output strong {
    font-family: var(--ah-titulo);
    color: #eef5ec;
}

.ah-classico .calculator .trip-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    border: 0;
}

.ah-classico .calculator .trip-box strong {
    font-family: var(--ah-titulo);
}

.ah-classico .calculator .button.dark {
    background: var(--ah-lima);
    color: var(--ah-floresta);
}

.ah-classico .section-stack {
    display: grid;
    gap: 16px;
}

.ah-classico .compare-section {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--ah-sombra);
    margin: 0;
}

.ah-classico .section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ah-classico .section-head h2 {
    margin: 4px 0;
    font-size: 1.15rem;
}

.ah-classico .section-head p.muted {
    margin: 0;
    font-size: 0.8rem;
}

.ah-classico .section-head .button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.8rem;
}

.ah-classico .station-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.ah-classico .station-mini {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background: var(--card-2) !important;
    border: 1px solid var(--line) !important;
}

.ah-classico .station-mini > div {
    flex: 1 1 auto;
    min-width: 0;
}

.ah-classico .station-mini b {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 12px;
    background: var(--ah-lima) !important;
    color: var(--ah-floresta) !important;
    font-family: var(--ah-titulo);
    font-size: 0.82rem;
}

.ah-classico .section-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.ah-classico .compact-price-card {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: start;
    gap: 10px 12px;
    padding: 12px !important;
    border-radius: 22px !important;
    background: var(--card-2) !important;
}

.ah-classico .compact-price-card .result-photo {
    grid-row: span 1;
    width: 76px !important;
    height: 76px !important;
    padding: 6px;
    object-fit: contain;
}

.ah-classico .compact-price-card .result-photo.photo-missing {
    padding: 0 !important;
    object-fit: cover !important;
}

.ah-classico .compact-price-card h2 {
    margin: 2px 0;
    font-family: var(--ah-fonte);
    font-size: 0.86rem;
    letter-spacing: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ah-classico .compact-price-card .category {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted);
}

.ah-classico .compact-price-card .muted {
    margin: 0;
    font-size: 0.68rem;
}

.ah-classico .compact-price-card .price-grid,
.ah-classico .compact-price-card .decision-line,
.ah-classico .compact-price-card .card-actions {
    grid-column: 1 / -1 !important;
}

.ah-classico .compact-price-card .price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.ah-classico .compact-price-card .price-grid > div {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    font-size: 0.72rem;
}

.ah-classico .compact-price-card .price-grid strong {
    font-family: var(--ah-titulo);
    font-size: 0.95rem;
}

.ah-classico .compact-price-card .decision-line {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    font-size: 0.74rem;
}

.ah-classico .compact-price-card .card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0;
}

.ah-classico .compact-price-card .card-actions .button {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.ah-classico .selo-tendencia {
    position: absolute;
    top: 10px;
    right: 10px;
}

.ah-classico .faixa-origem {
    margin: 0;
    font-size: 0.8rem;
}


.ah-podio strong {
    min-height: 52px;
}

.com-grelha {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.com-grelha > *,
.com-produto span,
.com-quem {
    min-width: 0;
}

.ah-seccao-cab h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.12rem;
}

.gu-lista li.pod-1,
.gu-lista li.pod-1 small,
.gu-lista li.pod-1 .gu-pts {
    color: var(--ah-floresta);
}

.gu-lista .com-tag-exemplo {
    font-size: 0.56rem;
    padding: 2px 6px;
    vertical-align: middle;
}

.gu-eu-fora .cab-eyebrow {
    background: rgba(200, 241, 105, 0.16);
    color: var(--ah-lima);
}

.ah-seccao,
.com-lista,
.bloco {
    grid-template-columns: minmax(0, 1fr);
}

.com-lista.com-grelha {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.com,
.pc-corpo,
.rd-item,
.alt,
.gu-eu,
.po-melhor,
.historia > div {
    grid-template-columns: minmax(0, 1fr);
}



/* --- Logotipos dos postos (correcao) ------------------------------------
   O logotipo real aparece POR CIMA das iniciais, no mesmo quadrado. Antes a
   regra antiga ".station-mini span/img" dava 54px ao logotipo e punha-o por
   baixo das iniciais, a sair do cartao. */
.marca-logo {
    position: relative;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 14px;
}

.marca-logo > .marca-chip,
.marca-logo > img {
    grid-area: 1 / 1;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.marca-logo > .marca-chip {
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    line-height: 1;
}

.marca-logo > img {
    padding: 5px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    object-fit: contain;
}

.marca-logo > [hidden] {
    display: none !important;
}

.ah-classico .station-mini {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.ah-classico .station-mini .marca-logo {
    width: 44px !important;
    height: 44px !important;
}

.ah-classico .station-mini > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 0;
}

.ah-classico .station-mini strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 0.92rem;
}

.ah-classico .station-mini > div > span {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.ah-classico .station-mini b {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
}

.ah-classico .station-strip {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.ah-classico .station-mini b {
    grid-column: auto !important;
    justify-self: end;
    width: auto !important;
}

/* --- 13. TALOES (enviar foto da compra) ------------------------------- */

.tl-cta {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 18px 14px 14px;
    border-radius: var(--ah-raio);
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
    text-decoration: none;
    box-shadow: var(--ah-sombra);
    transition: transform .18s ease;
}
.tl-cta:hover { transform: translateY(-2px) rotate(-.4deg); }
.tl-cta-home { margin-top: 0; padding: 18px 22px 18px 16px; }
.tl-cta-st { width: 64px; height: 64px; animation: st-abana 3.4s ease-in-out infinite; }
.tl-cta span { display: grid; gap: 2px; min-width: 0; }
.tl-cta strong { font-family: var(--ah-titulo); font-size: 1rem; letter-spacing: -.01em; }
.tl-cta small { font-size: .82rem; font-weight: 600; opacity: .78; }
.tl-cta > b {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-size: .8rem;
    white-space: nowrap;
}

.tl-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}
@media (min-width: 960px) {
    .tl-grelha { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
.tl-lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tl-lado h2 { font-size: 1rem; margin: 0 0 12px; }

.tl-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.tl-passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tl-passos li {
    display: grid;
    justify-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}
.tl-passos li b {
    display: grid;
    place-items: center;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--line-2);
    font-size: 0;
    transition: background .3s;
}
.tl-passos li.on { color: var(--ink); }
.tl-passos li.on b { background: var(--ah-lima); box-shadow: inset 0 0 0 1px rgba(15, 43, 32, .15); }

.tl-bloco {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.tl-bloco legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-family: var(--ah-titulo);
    font-size: 1.02rem;
    font-weight: 700;
}
.tl-bloco legend span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-size: .8rem;
}

.tl-lojas { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-loja { position: relative; cursor: pointer; }
.tl-loja input { position: absolute; opacity: 0; pointer-events: none; }
.tl-loja span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1.5px solid var(--line-2);
    border-radius: 999px;
    background: var(--card-2);
    font-weight: 700;
    font-size: .88rem;
    transition: all .15s;
}
.tl-loja input:checked + span {
    border-color: var(--ah-floresta);
    background: var(--ah-lima);
    color: var(--ah-floresta);
    transform: scale(1.03);
}
.tl-loja input:focus-visible + span { outline: 3px solid var(--ah-lima); outline-offset: 2px; }

.tl-outra, .tl-data, .tl-cidade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 10px;
}
.tl-outra[hidden] { display: none; }
.tl-outra label, .tl-data, .tl-cidade { gap: 6px; font-weight: 700; font-size: .86rem; }
.tl-data, .tl-cidade { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.tl-data input, .tl-cidade input, .tl-outra input, .tl-outra select { width: 100%; }

.tl-foto {
    display: grid;
    place-items: center;
    min-height: 220px;
    max-height: 420px;
    overflow: hidden;
    border: 2px dashed var(--contorno);
    border-radius: var(--ah-raio);
    background:
        repeating-linear-gradient(-45deg, transparent 0 14px, var(--ah-lima-suave) 14px 16px),
        var(--card-2);
}
.tl-foto img { width: 100%; max-height: 420px; object-fit: contain; background: #fff; }
.tl-foto-vazia { display: grid; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: var(--muted); font-weight: 600; }
.tl-foto-vazia[hidden], .tl-foto img[hidden] { display: none; }
.tl-foto-st { width: 92px; height: 92px; animation: st-flutua 4s ease-in-out infinite; }

.tl-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tl-botoes .button { justify-content: center; cursor: pointer; text-align: center; }
@media (min-width: 700px) {
    .tl-camara { display: none !important; }
    .tl-botoes { grid-template-columns: minmax(0, 1fr); }
}
.tl-enviar { font-size: 1rem; padding-block: 16px; }
.tl-enviar:disabled { opacity: .7; cursor: progress; }
.tl-erro {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--ah-raio-p);
    background: var(--warn-bg);
    color: var(--danger-texto);
    font-weight: 700;
}
.tl-como { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-weight: 600; }

.tl-meus { display: grid; gap: 8px; }
.tl-meu {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--ah-raio-p);
    background: var(--card-2);
    color: var(--ink) !important;
    text-decoration: none;
}
.tl-meu-icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface);
    font-size: 1.2rem;
}
.tl-meu-info { display: grid; min-width: 0; }
.tl-meu-info strong, .tl-meu-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meu-info small { color: var(--muted); font-weight: 600; }
.tl-meu em { font-style: normal; font-weight: 800; font-size: .8rem; color: var(--green-texto); }
.tl-pronto { border-color: var(--ah-lima); box-shadow: 0 0 0 2px var(--ah-lima-suave); }
.tl-pronto .tl-meu-icone { background: var(--ah-lima); }
.tl-a_ler .tl-meu-icone, .tl-na_fila .tl-meu-icone { animation: st-abana 1.6s ease-in-out infinite; }

/* Espera */
.tl-espera {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin: 8px auto 0;
    max-width: 640px;
    padding: 34px 22px 28px;
    border-radius: 32px;
    background: var(--ah-floresta);
    color: #eef5ec;
    text-align: center;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.tl-espera h2 { margin: 6px 0 0; color: #fff; font-size: clamp(1.1rem, 4vw, 1.5rem); min-height: 2.6em; display: grid; place-items: center; }
.tl-espera-sub { margin: 0; color: var(--ah-lima); font-weight: 700; }
.tl-espera .bloco-nota { color: rgba(238, 245, 236, .72); }
.tl-frase-in { animation: tl-frase .45s ease both; }
@keyframes tl-frase { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tl-orbita { position: relative; width: 210px; height: 210px; }
.tl-orbita::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px dashed rgba(200, 241, 105, .35);
    border-radius: 50%;
}
.tl-orbita-centro {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
    animation: tl-pulsa 1.8s ease-in-out infinite;
}
.tl-orbita i {
    position: absolute;
    inset: 0;
    animation: tl-gira 5s linear infinite;
}
.tl-orbita i:nth-of-type(2) { animation-duration: 7s; animation-direction: reverse; }
.tl-orbita i:nth-of-type(3) { animation-duration: 9s; animation-delay: -3s; }
.tl-orbita i .st { position: absolute; top: 0; left: 50%; width: 40px; height: 40px; margin-left: -20px; }
@keyframes tl-gira { to { transform: rotate(360deg); } }
@keyframes tl-pulsa { 50% { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); } }

.tl-barra {
    width: min(100%, 360px);
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}
.tl-barra i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--ah-lima);
    animation: tl-barra 1.6s ease-in-out infinite;
}
@keyframes tl-barra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.tl-espera .button.ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
    .tl-orbita i, .tl-orbita-centro, .tl-barra i, .tl-cta-st, .tl-foto-st { animation: none !important; }
}

/* Confirmacao */
.tl-confirmar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.tl-itens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 14px;
}
.tl-item {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--ah-raio);
    background: var(--card);
    box-shadow: var(--ah-sombra);
    transition: opacity .2s;
}
.tl-item-ignorado { opacity: .62; }
.tl-item-cab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: end;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line-2);
}
.tl-lido { margin: 0; font-size: .84rem; color: var(--muted); }
.tl-lido b {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}
.tl-qtd { margin: 4px 0 0; font-weight: 700; font-size: .84rem; }
.tl-preco { display: grid; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--muted); }

.tl-cands { display: grid; gap: 8px; }
.tl-cand { position: relative; display: block; cursor: pointer; }
.tl-cand > input { position: absolute; opacity: 0; pointer-events: none; }
.tl-cand-caixa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--ah-raio-p);
    background: var(--card-2);
    transition: border-color .15s, background .15s;
}
.tl-cand-caixa > img {
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: 12px;
    background: var(--ah-foto);
    object-fit: contain;
}
.tl-cand-caixa > .tl-cand-info:first-child { grid-column: 1 / -1; }
.tl-cand-info { display: grid; gap: 2px; min-width: 0; }
.tl-cand-info strong { font-size: .88rem; line-height: 1.25; overflow-wrap: anywhere; }
.tl-cand-info small { color: var(--muted); font-weight: 600; font-size: .76rem; }
.tl-cand > input:checked + .tl-cand-caixa {
    border-color: var(--ah-floresta);
    background: var(--ah-lima-suave);
    box-shadow: inset 0 0 0 1px var(--ah-floresta);
}
:root:not([data-tema="claro"]) .tl-cand > input:checked + .tl-cand-caixa,
:root[data-tema="escuro"] .tl-cand > input:checked + .tl-cand-caixa { border-color: var(--ah-lima); box-shadow: inset 0 0 0 1px var(--ah-lima); }
.tl-cand > input:focus-visible + .tl-cand-caixa { outline: 3px solid var(--ah-lima); outline-offset: 2px; }
.tl-cand-ignorar .tl-cand-caixa { background: transparent; border-style: dashed; }
.tl-picker { margin-top: 6px; }
.tl-picker input[type=text] { width: 100%; }

.tl-conf {
    padding: 4px 8px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 800;
    font-size: .74rem;
}
.tl-conf-alta { background: var(--ah-lima); color: var(--ah-floresta); }
.tl-conf-media { background: var(--ah-sol); color: #3b2c00; }
.tl-conf-baixa { background: var(--surface); color: var(--muted); }

.tl-rodape {
    position: sticky;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 999px;
    background: var(--barra);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}
@media (min-width: 1024px) { .tl-rodape { bottom: 16px; } }
.tl-rodape .button b {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ah-floresta);
    color: var(--ah-lima);
}

.tl-toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(92vw, 420px);
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--ah-lima);
    color: var(--ah-floresta) !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow);
    transform: translateX(-50%);
    animation: tl-toast .4s ease both;
}
@keyframes tl-toast { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tl-toast b { font-size: 1.6rem; }

.loja-comunidade {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto) !important;
    font-style: normal;
    font-weight: 700;
    font-size: .74rem;
}
.gu-regras a { font-weight: 800; margin-left: 4px; }
@media (max-width: 520px) {
    .tl-espera { padding: 24px 16px 22px; }
    .tl-orbita { width: 160px; height: 160px; }
    .tl-orbita-centro { width: 76px; height: 76px; }
    .tl-orbita i .st { width: 32px; height: 32px; margin-left: -16px; }
    .tl-cta { grid-template-columns: 52px minmax(0, 1fr); }
    .tl-cta-st { width: 52px; height: 52px; }
    .tl-cta > b { grid-column: 2; justify-self: start; }
}
.tl-cta small { color: rgba(15, 43, 32, .74) !important; }
.tl-cta strong { color: var(--ah-floresta) !important; }
.gu-eu .tl-cta { background: var(--ah-floresta); box-shadow: none; }
.gu-eu .tl-cta strong { color: #fff !important; }
.gu-eu .tl-cta small { color: rgba(238, 245, 236, .75) !important; }
.gu-eu .tl-cta > b { background: var(--ah-lima); color: var(--ah-floresta); }
.gu-eu .ah-btn-vidro { color: var(--ah-floresta) !important; border: 1.5px solid rgba(15, 43, 32, .35) !important; background: rgba(255, 255, 255, .35) !important; }
.gu-eu .ah-btn-lima { background: var(--ah-floresta) !important; color: var(--ah-lima) !important; }
/* O body tem overflow-x escondido (sticky nao pega): a barra fica fixa. */
.tl-confirmar { padding-bottom: 96px; }
.tl-rodape {
    position: fixed;
    left: 50%;
    width: min(calc(100% - 28px), 560px);
    transform: translateX(-50%);
    flex-wrap: nowrap;
    padding: 8px;
    z-index: 40;
}
.tl-rodape .button { flex: 1 1 auto; min-width: 0; padding-inline: 12px; white-space: nowrap; font-size: .86rem; }
.tl-rodape .button.ghost { flex: 0 0 auto; }
@media (max-width: 400px) { .tl-rodape .tl-rot { display: none; } }

/* --- 14. PAINEL ADMIN -------------------------------------------------- */

.ad-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
    padding: 22px;
    border-radius: var(--ah-raio);
    background: var(--ah-floresta);
    color: #eef5ec;
}
@media (min-width: 760px) { .ad-topo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.ad-topo h1 { margin: 4px 0 6px; color: #fff; font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
.ad-topo .cab-eyebrow { color: var(--ah-lima); }
.ad-topo .lead { margin: 0; color: rgba(238, 245, 236, .76); font-size: .92rem; max-width: 60ch; }
.ad-topo .button.ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }

.ad-abas {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--paper);
}
.ad-abas::-webkit-scrollbar { display: none; }
.ad-abas a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border: 1.5px solid var(--line-2);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink) !important;
    font-weight: 700;
    font-size: .86rem;
    text-decoration: none;
    white-space: nowrap;
}
.ad-abas a.on { border-color: var(--ah-floresta); background: var(--ah-lima); color: var(--ah-floresta) !important; }
.ad-abas a span { font-size: 1rem; }

.ad-painel { position: relative; min-height: 40vh; }
.ad-painel.ad-a-carregar { opacity: .45; pointer-events: none; }
.ad-painel.ad-a-carregar::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--ah-lima), transparent);
    animation: ad-barra 1s linear infinite;
}
@keyframes ad-barra { from { transform: translateX(-40%); } to { transform: translateX(140%); } }

.ad-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.ad-subnav button {
    padding: 8px 14px;
    border: 1.5px solid var(--line-2);
    border-radius: 999px;
    background: var(--card-2);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: .84rem;
    cursor: pointer;
}
.ad-subnav button.on { border-color: var(--ah-floresta); background: var(--ah-floresta); color: var(--ah-lima); }

.ad-grupo { display: none; }
.ad-grupo.on {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    align-items: start;
    gap: 14px;
}
.ad-grupo > .panel,
.ad-grupo > form.panel { margin: 0; min-width: 0; }
.ad-grupo > .table-panel { grid-column: 1 / -1; }

.ad-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ad-cab h2 { margin: 0; }
.ad-procura { display: flex; gap: 6px; }
.ad-procura input[type="search"] { min-width: 180px; }

.ad-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.ad-user {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--ah-raio-p);
    background: var(--card-2);
}
.ad-user-admin { border-color: var(--ah-lima); box-shadow: 0 0 0 2px var(--ah-lima-suave); }
.ad-user header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ad-user-av {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ah-floresta);
    color: var(--ah-lima);
    font-weight: 800;
}
.ad-user header strong { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-user header small { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.ad-tag { padding: 3px 8px; border-radius: 999px; background: var(--ah-lima); color: var(--ah-floresta); font-size: .7rem; font-weight: 800; }
.ad-user-dados { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.ad-user-dados b { font-size: .92rem; }
.ad-user-edit summary { cursor: pointer; font-weight: 700; font-size: .84rem; }
.ad-user-edit[open] summary { margin-bottom: 8px; }
.ad-form label { display: grid; gap: 4px; margin-bottom: 8px; font-size: .8rem; font-weight: 700; }
.ad-form input { width: 100%; }
.ad-linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-perigo { color: var(--danger-texto) !important; border-color: var(--danger-texto) !important; }
.ad-a-confirmar { background: var(--danger-texto) !important; color: #fff !important; }
.ad-a-gravar { opacity: .6; }
.ad-a-correr { box-shadow: 0 0 0 2px var(--ah-lima); }

.ad-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    display: grid;
    gap: 8px;
    width: min(92vw, 460px);
    transform: translateX(-50%);
}
.ad-toast {
    margin: 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    font-weight: 700;
    box-shadow: var(--shadow);
    cursor: pointer;
    animation: tl-toast .3s ease both;
}
.ad-toast-erro { background: var(--danger-texto); color: #fff; }
.ad-toast.a-sair { opacity: 0; transition: opacity .4s; }
@media (min-width: 1024px) { .ad-toasts { bottom: 20px; } }
.admin-atalho { display: grid; place-items: center; min-width: 42px; height: 42px; text-decoration: none; font-size: 1.05rem; }
.admin-atalho.active { background: var(--ah-lima) !important; color: var(--ah-floresta) !important; }
.tl-arrastar-dica { display: none; color: var(--muted); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .tl-arrastar-dica { display: block; } }
.tl-foto.a-arrastar {
    border-color: var(--ah-lima);
    border-style: solid;
    background: var(--ah-lima-suave);
    transform: scale(1.01);
}
.tl-foto.a-arrastar .tl-foto-st { animation: st-abana .8s ease-in-out infinite; }

/* FOTO DA FICHA: a regra generica .fp-foto vinha DEPOIS da media query e
   repunha position:relative — com o top:90px a caixa descia 90px e tapava o
   bloco seguinte. Aqui fica a ordem certa, com especificidade suficiente. */
.fp-topo > .fp-foto { position: relative; top: auto; }

@media (min-width: 900px) {
    .fp-topo > .fp-foto {
        position: sticky;
        top: 90px;
        align-self: start;
    }
}

/* --- 15. O BOTAO DA PESSOA (topo) e a FOTO DE PERFIL ------------------- */

.eu-menu { position: relative; }
.eu-menu > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--ah-sombra);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: .84rem;
    color: var(--ink);
}
.eu-menu > summary::-webkit-details-marker { display: none; }
.eu-menu > summary:hover { background: var(--card-2); }
.eu-menu[open] > summary { background: var(--ah-lima); color: var(--ah-floresta); }
.eu-nome { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .eu-nome { display: none; } .eu-menu > summary { padding: 4px; } }

.avatar.eu-av, .avatar.eu-av-g {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--av, var(--ah-lima));
    color: var(--ah-floresta);
    font-weight: 800;
    font-size: .9rem;
    overflow: hidden;
}
img.avatar.av-foto { object-fit: cover; padding: 0 !important; border: 0 !important; background: var(--surface); }
.avatar.eu-av-g { width: 46px; height: 46px; font-size: 1.1rem; }

.eu-caixa {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    display: grid;
    gap: 2px;
    min-width: 230px;
    padding: 10px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow);
    /* Animacao propria: a do aviso flutuante leva um translate(-50%) que
       empurrava este menu 115px para a esquerda do botao. */
    animation: eu-abre .18s ease both;
}
@keyframes eu-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.eu-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line-2);
}
.eu-topo span { display: grid; min-width: 0; }
.eu-topo b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-topo small { color: var(--muted); font-weight: 700; }
.eu-caixa a, .eu-caixa button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink) !important;
    font: inherit;
    font-weight: 700;
    font-size: .86rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.eu-caixa a:hover, .eu-caixa button:hover { background: var(--card-2); }
.eu-caixa form { margin: 0; }

/* Foto na conta */
.pf-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pf-foto .avatar { width: 92px; height: 92px; font-size: 2rem; }
.pf-foto-acoes { display: grid; gap: 8px; }
.pf-foto-acoes .button { cursor: pointer; }
.pf-hist { display: grid; gap: 8px; margin-top: 12px; }
.pf-hist-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--ah-raio-p);
    background: var(--card-2);
    font-size: .85rem;
}
.pf-hist-dia { font-weight: 800; color: var(--muted); }
.pf-hist-loja { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-hist-n { color: var(--muted); font-weight: 600; white-space: nowrap; }
.pf-hist-pts {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ah-lima-suave);
    color: var(--green-texto);
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 520px) {
    .pf-hist-item { grid-template-columns: 46px minmax(0, 1fr) auto; }
    .pf-hist-n { grid-column: 2 / -1; }
}

/* Precos confirmados por quem comprou (inicio) */
.cf-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
@media (min-width: 900px) { .cf-fila { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); grid-auto-columns: auto; overflow: visible; } }
.cf-cartao {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    scroll-snap-align: start;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--ah-raio-p);
    background: var(--card);
    color: var(--ink) !important;
    text-decoration: none;
    box-shadow: var(--ah-sombra);
    transition: transform .15s ease;
}
.cf-cartao:hover { transform: translateY(-2px); }
.cf-cartao > img { width: 56px; height: 56px; padding: 4px; border-radius: 14px; background: var(--ah-foto); object-fit: contain; }
.cf-info { display: grid; gap: 2px; min-width: 0; }
.cf-info strong { font-size: .86rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cf-info small { color: var(--muted); font-weight: 600; font-size: .75rem; }
.cf-preco { display: grid; justify-items: end; gap: 2px; }
.cf-preco b { font-family: var(--ah-titulo); font-size: 1rem; }
.cf-preco em { font-style: normal; font-weight: 800; font-size: .72rem; }
.cf-desce { color: var(--green-texto); }
.cf-sobe { color: var(--danger-texto); }
.cf-selo {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ah-lima);
    color: var(--ah-floresta);
    font-size: .66rem;
    font-weight: 800;
}
.ah-avatar-foto { padding: 0 !important; overflow: hidden; }
.ah-avatar-foto img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ad-user-av-foto { padding: 0; overflow: hidden; }
.ad-user-av-foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- 16. AVISOS -------------------------------------------------------- */

.sino { position: relative; display: grid; place-items: center; min-width: 42px; height: 42px; text-decoration: none; font-size: 1.05rem; }
.sino b {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ah-coral);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
}
.sino-tem { background: var(--ah-lima) !important; }

.av-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
@media (min-width: 980px) {
    .av-grelha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
    .av-caixa { grid-row: span 2; }
}
.av-lidos { margin: 0 0 10px; }
.av-lista { display: grid; gap: 8px; }
.av-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--ah-raio-p);
    background: var(--card-2);
    color: var(--ink) !important;
    text-decoration: none;
}
.av-novo { border-color: var(--ah-lima); background: var(--ah-lima-suave); }
.av-emoji { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); font-size: 1.1rem; }
.av-texto { display: grid; gap: 2px; min-width: 0; }
.av-texto strong { font-size: .9rem; }
.av-texto small { color: var(--ink-2); font-size: .82rem; }
.av-texto em { color: var(--muted); font-style: normal; font-size: .72rem; font-weight: 700; }

.av-grupo { margin: 16px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.av-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line-2);
}
.av-linha-nome strong { display: block; font-size: .88rem; }
.av-linha-nome small { color: var(--muted); font-size: .76rem; }
.av-canais { display: flex; gap: 6px; }
.av-canal {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 34px;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    background: var(--card-2);
    cursor: pointer;
    font-size: .95rem;
}
.av-canal input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.av-canal:has(input:checked) { border-color: var(--ah-floresta); background: var(--ah-lima); }
.av-canal-off, .av-canal-na { opacity: .38; cursor: not-allowed; }
.push-estado { margin: 8px 0 0; font-weight: 700; font-size: .85rem; }
.push-sim { color: var(--green-texto); }
.push-nao { color: var(--danger-texto); }

/* Tabela de avisos no painel */
.not-tabela { display: grid; gap: 4px; margin: 12px 0; }
.not-cab, .not-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 44px);
    align-items: center;
    gap: 6px;
}
.not-cab { padding-bottom: 6px; border-bottom: 1px solid var(--line-2); font-size: .72rem; font-weight: 800; color: var(--muted); text-align: center; }
.not-cab span:first-child { text-align: left; }
.not-linha { padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.not-nome strong { display: block; font-size: .86rem; }
.not-nome small { color: var(--muted); font-size: .74rem; }
.not-caixa { display: grid; place-items: center; }
.not-na { color: var(--muted); }
@media (max-width: 620px) {
    .not-cab, .not-linha { grid-template-columns: minmax(0, 1fr) repeat(4, 34px); }
    .not-nome small { display: none; }
}