/* Estilo de estabelecimentos_info.
 *
 * NASCEU DE DENTRO DO HTML. Eram 13 KB dentro de um <style> no
 * template -- peso que viajava de novo a cada abertura da página, por
 * cada visitante e por cada robô de busca, e que o navegador não tinha
 * como guardar: estilo dentro do HTML não tem endereço para cachear.
 *
 * Aqui tem. Baixado uma vez e guardado por um ano; o endereço leva a
 * impressão digital do conteúdo, então mudar o arquivo muda o endereço e
 * o navegador busca a versão nova sozinho.
 */

/* =========================================================
   TOKENS LOCAIS (herdam a paleta do base.html)
========================================================= */
.est-page {
    --est-azul: #004AAD;
    --est-azul-claro: #007BFF;
    --est-vermelho: #E63946;
    --est-amarelo: #FFD700;
    --est-navy: #0b2a5b;
    --est-radius: 22px;
}

/* =========================================================
   HERO / HEADER UNIFORME
========================================================= */
.est-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 20px 74px;
    background:
        radial-gradient(circle at 88% 12%, rgba(230, 57, 70, 0.35), transparent 40%),
        radial-gradient(circle at 8% 88%, rgba(0, 123, 255, 0.40), transparent 42%),
        linear-gradient(135deg, #041a3d 0%, #004AAD 55%, #0069d9 100%);
    color: #fff;
}

/* textura sutil de pontos por cima do gradiente */
.est-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .35;
    pointer-events: none;
}

.est-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- BREADCRUMB DENTRO DO HERO ---------- */
.est-breadcrumb {
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 26px;
}

.est-breadcrumb a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    opacity: .9;
    transition: opacity .2s ease;
}

.est-breadcrumb a:hover { opacity: 1; text-decoration: underline; }

.est-breadcrumb span { margin: 0 8px; opacity: .55; }

.est-breadcrumb strong { color: var(--est-amarelo); font-weight: 700; }

/* ---------- BADGE ---------- */
.est-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--est-vermelho);
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    box-shadow: 0 12px 26px rgba(230, 57, 70, 0.35);
    margin-bottom: 20px;
}

/* ---------- TÍTULO ---------- */
.est-hero-title {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 16px;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.est-hero-title span { color: var(--est-amarelo); }

.est-hero-sub {
    font-size: 1.08rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
    max-width: 640px;
    margin-bottom: 30px;
}

/* ---------- STATS ---------- */
.est-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.est-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    font-size: .95rem;
    font-weight: 600;
}

.est-stat i { color: var(--est-amarelo); }

.est-stat b { font-weight: 800; }

/* ---------- ONDA DE TRANSIÇÃO ---------- */
.est-wave {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

/* =========================================================
   SEÇÃO DOS CARDS
========================================================= */
.est-section {
    padding: 20px 20px 80px;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 74, 173, 0.10), transparent 45%),
        radial-gradient(circle at 92% 30%, rgba(230, 57, 70, 0.08), transparent 40%),
        linear-gradient(180deg, #eaf2ff 0%, #dde9fb 100%);
}

.est-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 26px;
    align-items: stretch;
}

/* =========================================================
   CARD
========================================================= */
.est-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: var(--est-radius);
    background: linear-gradient(160deg, #0b2a5b 0%, #113670 55%, #08214d 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 16px 34px rgba(4, 26, 61, 0.28);
    overflow: hidden;
    transition: transform .28s var(--ease-out, ease), box-shadow .28s ease;
}

/* faixa de destaque no topo */
.est-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--est-azul-claro), var(--est-vermelho));
    opacity: .9;
}

.est-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 52px rgba(4, 26, 61, 0.42);
}

/* ---------- CARD DESTAQUE (TODOS OS BRINQUEDOS) ---------- */
.est-card--todos {
    background: linear-gradient(160deg, #6d0f1c 0%, #b81e30 50%, #7d1220 100%);
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow: 0 16px 34px rgba(140, 20, 35, 0.35);
}

.est-card--todos::before {
    background: linear-gradient(90deg, var(--est-amarelo), #ff9d3c);
}

.est-card--todos:hover {
    box-shadow: 0 26px 52px rgba(140, 20, 35, 0.48);
}

.est-card--todos .est-btn {
    background: linear-gradient(135deg, var(--est-amarelo), #ffb300);
    color: #3a2a00;
    box-shadow: 0 12px 26px rgba(255, 179, 0, 0.35);
}

/* ---------- TAG NO CANTO ---------- */
.est-tag {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 3;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* =========================================================
   ÁREA DE MÍDIA — IMAGEM SEMPRE INTEIRA (SEM ZOOM/CORTE)
========================================================= */
.est-media {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: #f2f6ff;
    isolation: isolate;
}

/* fundo desfocado só para preencher as sobras — a foto real fica inteira em cima */
.est-media-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(22px) saturate(1.35);
    transform: scale(1.25);
    opacity: .55;
    z-index: 0;
}

/* AQUI está a correção principal: contain = imagem completa, sem zoom */
.est-media-fg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 12px;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
    transition: transform .35s var(--ease-out, ease);
}

.est-card:hover .est-media-fg { transform: scale(1.05); }

/* =========================================================
   CARROSSEL
========================================================= */
.est-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .9s ease-in-out;
    pointer-events: none;
}

.est-slide.ativo { opacity: 1; }

.est-slide-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 12px 8px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* pontinhos do carrossel */
.est-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.est-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: all .3s ease;
}

.est-dot.ativo {
    width: 18px;
    border-radius: 999px;
    background: var(--est-amarelo);
}

/* =========================================================
   CONTEÚDO DO CARD
========================================================= */
.est-conteudo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
    padding: 16px 6px 4px;
}

.est-nome {
    font-size: 1.18rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}

.est-desc {
    font-size: .92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    flex-grow: 1;
}

.est-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--est-amarelo);
    margin-top: 2px;
}

/* ---------- BOTÃO ---------- */
.est-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 13px 0;
    border-radius: 999px;
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--est-vermelho), #ff5c6a);
    box-shadow: 0 12px 26px rgba(230, 57, 70, 0.30);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.est-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 16px 32px rgba(230, 57, 70, 0.42);
}

.est-btn i { transition: transform .22s ease; }
.est-btn:hover i { transform: translateX(3px); }

/* =========================================================
   ESTADO VAZIO
========================================================= */
.est-vazio {
    max-width: 620px;
    margin: 40px auto;
    padding: 46px 30px;
    text-align: center;
    border-radius: var(--est-radius);
    background: linear-gradient(160deg, #0b2a5b, #113670);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 34px rgba(4, 26, 61, 0.28);
}

.est-vazio i {
    font-size: 2.6rem;
    color: var(--est-amarelo);
    margin-bottom: 14px;
    display: block;
}

/* =========================================================
   ENTRADA SUAVE
========================================================= */
@keyframes estSobe {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.est-card {
    animation: estSobe .5s var(--ease-out, ease) backwards;
}

.est-card:nth-child(1) { animation-delay: .00s; }
.est-card:nth-child(2) { animation-delay: .06s; }
.est-card:nth-child(3) { animation-delay: .12s; }
.est-card:nth-child(4) { animation-delay: .18s; }
.est-card:nth-child(5) { animation-delay: .24s; }
.est-card:nth-child(6) { animation-delay: .30s; }
.est-card:nth-child(n+7) { animation-delay: .36s; }

/* Loja de cupons: pertence à mesma página, sem parecer um sistema colado. */
.cup-vitrine{padding:32px 20px 42px;background:#eaf2ff}
.cup-vitrine-inner{max-width:1200px;margin:0 auto;padding:clamp(22px,4vw,38px);border-radius:28px;color:#fff;background:linear-gradient(135deg,#071f49,#004aad 62%,#063776);box-shadow:0 22px 52px rgba(4,26,61,.20)}
.cup-vitrine-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.cup-vitrine-head h2{margin:5px 0 7px;font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:850}
.cup-vitrine-head p{max-width:680px;margin:0;color:rgba(255,255,255,.78);line-height:1.6}
.cup-app-selo{flex:0 0 auto;padding:10px 15px;border:1px solid rgba(255,215,0,.36);border-radius:999px;color:#ffe774;background:rgba(255,215,0,.11);font-size:.78rem;font-weight:850}
.cup-grupo-titulo{margin:25px 0 12px;font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#a8cfff}
.cup-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.cup-card{min-width:0;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:19px;background:rgba(255,255,255,.09);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.cup-card strong,.cup-card span{display:block}.cup-card strong{font-size:1.02rem}.cup-card span{margin-top:5px;color:rgba(255,255,255,.72);font-size:.82rem}
.cup-codigo{display:inline-flex!important;margin-top:14px!important;padding:8px 11px;border-radius:9px;color:#092653!important;background:#ffd700!important;font-weight:900;letter-spacing:.08em}
.cup-pontos{display:inline-flex!important;align-items:center;gap:6px;margin-top:14px!important;color:#ffe774!important;font-weight:850}
.cup-pessoal{border-color:rgba(89,221,178,.38);background:rgba(27,173,126,.13)}
@media(max-width:800px){.cup-grade{grid-template-columns:1fr 1fr}.cup-vitrine-head{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.cup-grade{grid-template-columns:1fr}.cup-vitrine{padding-inline:14px}.cup-vitrine-inner{border-radius:22px}}

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width: 768px) {
    .est-hero { padding: 38px 18px 64px; }
    .est-hero-sub { font-size: 1rem; }
    .est-section { padding: 16px 16px 60px; }
    .est-grid { grid-template-columns: 1fr; gap: 20px; }
    .est-media { height: 220px; }
    .est-stat { font-size: .88rem; padding: 10px 16px; }
}