/* =============================================================
   PILAR ONLINE | Categorias inteligentes – ícones editoriais v5
   Apenas apresentação: não modifica o ranking, o limite do
   Admin Master, os links, as imagens ou o scroll.
   Destaque sutil, sem fundo/tarja/adesivo sobre as fotos.
============================================================= */

.po-home-section--categorias .po-home-category {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: #17263b;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 18px;
    box-shadow: 0 3px 12px rgba(16, 36, 65, .05);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

@media (hover: hover) {
    .po-home-section--categorias .po-home-category:hover {
        transform: translateY(-3px);
        border-color: #d5dee9;
        box-shadow: 0 12px 28px rgba(16, 36, 65, .105);
    }
}

.po-home-section--categorias .po-home-category:focus-visible {
    outline: 3px solid #C1272D;
    outline-offset: 3px;
}

.po-home-section--categorias .po-home-category-img {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 1.18 / 1;
    overflow: hidden;
    border-radius: 12px;
    margin: 0;
    background: #f3f5f8;
}

.po-home-section--categorias .po-home-category-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

@media (hover: hover) {
    .po-home-section--categorias .po-home-category:hover .po-home-category-img img {
        transform: scale(1.03);
    }
}

.po-home-section--categorias .po-home-category-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 96px;
    padding: 12px 6px 11px;
    background: transparent;
}

.po-home-section--categorias .po-home-category-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -.018em;
    color: #14233c;
    text-wrap: balance;
}

/* O texto do status permanece limpo, sem pílulas e sem caixas. */
.po-home-section--categorias .po-home-category-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    min-height: 25px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* SVG existente é o fallback para navegadores antigos. */
.po-home-section--categorias .po-home-category-signal svg {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: currentColor;
    stroke: none;
    transition: transform .22s ease;
}

.po-home-section--categorias .po-home-category-signal--novidades { color: #B51F2C; }
.po-home-section--categorias .po-home-category-signal--alta      { color: #DF5D13; }
.po-home-section--categorias .po-home-category-signal--olho      { color: #087E88; }
.po-home-section--categorias .po-home-category-signal--explorar  { color: #60738C; }

/* Vetores próprios para cada status (sem fontes ou bibliotecas externas). */
.po-home-section--categorias .po-home-category-signal--novidades {
    --po-signal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22m12%202.3%202.27%206.43L20.7%2011l-6.43%202.27L12%2019.7l-2.27-6.43L3.3%2011l6.43-2.27L12%202.3ZM19.25%201.3l.83%202.35%202.35.83-2.35.83-.83%202.35-.83-2.35-2.35-.83%202.35-.83.83-2.35ZM4.2%2016.2l.97%202.65%202.65.97-2.65.97-.97%202.65-.97-2.65-2.65-.97%202.65-.97.97-2.65Z%22%2F%3E%3C%2Fsvg%3E");
}
.po-home-section--categorias .po-home-category-signal--alta {
    --po-signal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12.93%201.4c.14%203.35-2.13%204.64-2.13%207.61%200%201.13.5%202.3%201.07%202.93-2.24-.57-3.59-2.71-3.71-5.24C5.35%209.28%203.77%2012.3%203.77%2015.28A8.23%208.23%200%200%200%2012%2023.51a8.23%208.23%200%200%200%208.23-8.23c0-5.6-2.79-10.13-7.3-13.88Z%22%2F%3E%3C%2Fsvg%3E");
}
.po-home-section--categorias .po-home-category-signal--olho {
    --po-signal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.2%2012s3.4-6.2%209.8-6.2%209.8%206.2%209.8%206.2-3.4%206.2-9.8%206.2S2.2%2012%202.2%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.15%22%2F%3E%3C%2Fsvg%3E");
}
.po-home-section--categorias .po-home-category-signal--explorar {
    --po-signal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.2%22%2F%3E%3Cpath%20d%3D%22m15.85%208.15-2.35%205.35-5.35%202.35%202.35-5.35%205.35-2.35Z%22%2F%3E%3C%2Fsvg%3E");
}

/* Máscaras vetoriais: mesma escala, melhor nitidez e traço consistente.
   A chama usa gradiente próprio da marca, sem virar um emoji. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .po-home-section--categorias .po-home-category-signal::before {
        content: "";
        display: block;
        flex: 0 0 21px;
        width: 21px;
        height: 21px;
        background: currentColor;
        -webkit-mask-image: var(--po-signal-icon);
        mask-image: var(--po-signal-icon);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        transition: transform .22s ease, filter .22s ease;
    }
    .po-home-section--categorias .po-home-category-signal svg {
        display: none;
    }
    .po-home-section--categorias .po-home-category-signal--alta::before {
        background: linear-gradient(165deg, #C1272D 6%, #EA511B 48%, #F47016 76%, #F9A23B 100%);
        filter: drop-shadow(0 1px 1px rgba(193, 39, 45, .14));
    }
    @media (hover: hover) {
        .po-home-section--categorias .po-home-category:hover .po-home-category-signal::before {
            transform: translateY(-1px) scale(1.07);
        }
    }
}

@media (max-width: 680px) {
    .po-home-section--categorias .po-home-category {
        padding: 6px;
        border-radius: 15px;
    }
    .po-home-section--categorias .po-home-category-img { border-radius: 10px; }
    .po-home-section--categorias .po-home-category-content {
        gap: 5px;
        min-height: 86px;
        padding: 10px 5px 11px;
    }
    .po-home-section--categorias .po-home-category-name {
        font-size: 15px;
        min-height: 39px;
    }
    .po-home-section--categorias .po-home-category-signal {
        font-size: 12px;
        gap: 5px;
        min-height: 22px;
    }
    .po-home-section--categorias .po-home-category-signal svg {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
    @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
        .po-home-section--categorias .po-home-category-signal::before {
            width: 19px;
            height: 19px;
            flex-basis: 19px;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .po-home-section--categorias .po-home-category,
    .po-home-section--categorias .po-home-category-img img,
    .po-home-section--categorias .po-home-category-signal svg,
    .po-home-section--categorias .po-home-category-signal::before {
        transition: none;
    }
}