/* ==========================
   Haras Mini Bichos - v4 (FULL)
   Estilo: Instagram / Marketplace

   Correções incluídas:
   ✅ Pills: texto NÃO some (ex: "Mini Pôneis")
      - Suporte a <span class="pill-text"> dentro do pill
      - Proteção contra overlay/pseudo-elemento por cima
      - Proteção contra -webkit-text-fill-color transparente
   ✅ Botão Instagram no topo (.btn.ig) + opção ícone (.btn.icon)
   ✅ Mantém seu visual atual (hero, cards, badges, etc.)
   ========================== */

:root{
  --bg0:#070a08;
  --bg1:#0b0f0d;
  --bg2:#0f1512;

  --card:#111815;
  --card2:#0d1310;

  --text:#f3f2ee;
  --muted:#c9c4b8;

  --gold:#d2a84b;
  --gold2:#c8952f;

  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);

  --shadow: 0 12px 30px rgba(0,0,0,.55);
  --shadow2: 0 10px 24px rgba(0,0,0,.45);

  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;

  --max:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(210,168,75,.18), transparent 55%),
    radial-gradient(900px 500px at 92% 0%, rgba(210,168,75,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, #050705);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:20px}
@media (max-width: 700px){.container{padding:16px}}

.hr{height:1px;background:var(--line);margin:18px 0}

/* ==========================
   Buttons
   ========================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  transition:transform .15s ease, background .15s ease, filter .15s ease;
  gap:10px;
  cursor:pointer;
  user-select:none;
  line-height:1;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.11)}
.btn:active{transform:translateY(0px)}
.btn.gold{
  background:linear-gradient(180deg, #e2bf66, var(--gold2));
  color:#1b140a;
  border:none;
}
.btn.gold:hover{filter:brightness(1.03)}
.btn.whats{
  background:linear-gradient(180deg, #2bd46a, #12a84f);
  color:#07170d;
  border:none;
}

/* ✅ Botão Instagram */
.btn.ig{
  background:linear-gradient(180deg, #ffdc80, #f56040 30%, #fd1d1d 60%, #c13584 85%, #5851db);
  color:#0b0f0d;
  border:none;
}
.btn.ig:hover{filter:brightness(1.03)}

/* ✅ opção: botão só ícone */
.btn.icon{
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
}

/* ==========================
   Top Nav
   ========================== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(10,13,11,.78), rgba(10,13,11,.55));
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.brand img{
  width:52px;
  height:52px;
  object-fit:contain;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:8px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.brand b{font-size:18px;letter-spacing:.3px}
.brand small{color:var(--muted)}
.nav-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
@media (max-width: 700px){
  .brand b{font-size:16px}
  .brand small{display:none}
}

/* ==========================
   Hero Full Width
   ========================== */
.hero-full{
  position:relative;
  width:100%;
  min-height:78vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02) brightness(.78);
  transform:scale(1.03);
}
.hero-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(210,168,75,.18), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.88) 75%, rgba(0,0,0,.96));
}
.hero-content{
  position:relative;
  width:100%;
  max-width:var(--max);
  padding:22px 20px 26px;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.30);
  color:#efe6d1;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:12px;
}
.hero-title{
  margin:14px 0 10px;
  font-size:52px;
  line-height:1.04;
  text-shadow: 0 10px 26px rgba(0,0,0,.65);
}
.hero-sub{
  margin:0 0 18px;
  color:rgba(243,242,238,.88);
  max-width:62ch;
  font-size:16px;
}
.hero-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.26);
  color:rgba(243,242,238,.92);
  font-weight:800;
}
.chip i{
  width:10px;height:10px;border-radius:99px;background:var(--gold);
  box-shadow: 0 0 0 3px rgba(210,168,75,.16);
}
@media (max-width: 900px){.hero-title{font-size:40px}}
@media (max-width: 700px){
  .hero-full{min-height:72vh}
  .hero-title{font-size:34px}
}

/* ==========================
   Section
   ========================== */
.section{margin:24px 0 0}
.section h2{margin:0 0 12px;font-size:22px;letter-spacing:.2px}

/* ==========================
   Filter Pills (FIX DEFINITIVO)
   ========================== */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* Base do pill */
.pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:rgba(243,242,238,.92);
  font-weight:900;
  transition: background .15s ease, transform .15s ease, filter .15s ease;
  line-height:1.1;
  isolation:isolate; /* garante camada própria */
  opacity:1;
  visibility:visible;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  -webkit-text-fill-color: rgba(243,242,238,.92); /* mata bug de fill transparente */
}

/* Hover */
.pill:hover{background:rgba(255,255,255,.10)}

/* Active */
.pill.active{
  background:linear-gradient(180deg, #e2bf66, var(--gold2));
  color:#1b140a;
  border:none;
  -webkit-text-fill-color: #1b140a;
}

/* ✅ Se usar <span class="pill-text">, o texto fica blindado */
.pill .pill-text{
  position:relative;
  z-index:3;
  opacity:1;
  visibility:visible;
  color:inherit;
  -webkit-text-fill-color: currentColor;
  white-space:nowrap;
}

/* ✅ Caso NÃO use span, ainda garante que o texto não “desapareça” */
.pill{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ✅ Se algum ::before/::after de outro CSS estiver cobrindo, joga pra trás */
.pill::before,
.pill::after{
  position:relative;
  z-index:0;
  pointer-events:none;
}

/* ==========================
   Gallery Wrap
   ========================== */
.gallery-wrap{
  margin-top:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  border-radius:var(--r24);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.gallery-head{padding:14px 16px 0}
.gallery-head h3{margin:0;font-size:18px}
.gallery-head small{display:block;margin-top:6px;color:var(--muted)}

.gallery-grid{
  padding:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){.gallery-grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 700px){.gallery-grid{grid-template-columns: 1fr}}

/* ==========================
   Post Card
   ========================== */
.post{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.post:hover{
  transform: translateY(-2px);
  border-color: rgba(210,168,75,.35);
  filter: brightness(1.02);
}

.post-media{
  position:relative;
  aspect-ratio: 16 / 10;
  background: #070a08;
  display:block;
}

/* placeholder se falhar */
.post-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  background: #070a08;
}

/* Overlay gradient */
.post-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.72));
  pointer-events:none;
}

/* Badges */
.ribbon{
  position:absolute;
  top:12px;
  left:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(210,168,75,.92);
  color:#1b140a;
  font-weight:1000;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
.badge-age{
  position:absolute;
  top:12px;
  right:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.55);
  border:1px solid var(--line2);
  color:rgba(243,242,238,.96);
  font-weight:900;
  font-size:12px;
  backdrop-filter: blur(6px);
}
.price{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:1000;
  font-size:18px;
  backdrop-filter: blur(6px);
}

/* Body */
.post-body{
  padding:12px 12px 14px;
  background:linear-gradient(180deg, rgba(10,13,11,.0), rgba(10,13,11,.38));
}
.post-title{margin:0;font-size:15px;font-weight:950;letter-spacing:.2px}
.post-meta{margin-top:6px;color:var(--muted);font-size:12px}
.post-desc{
  margin-top:8px;
  color:rgba(201,196,184,.95);
  font-size:13px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-actions{display:flex;gap:10px;margin-top:12px}
.post-actions .btn{flex:1;padding:10px 12px;border-radius:12px}

/* ==========================
   Footer
   ========================== */
.footer{
  margin:26px 0 12px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:18px;
}

/* ==========================
   Floating Whats
   ========================== */
.whats-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, #2bd46a, #12a84f);
  color:#07170d;
  font-weight:1000;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
}
.whats-float:hover{filter:brightness(1.03)}
@media (max-width: 700px){.whats-float span{display:none}}

/* ==========================
   Debug visual (opcional)
   ========================== */
/* .post-media img{outline:2px solid red} */