/* ========================================
   FILOSOFÍA — Manifesto / Pilares
   ======================================== */

.bb-manifesto { padding-top: 128px; position: relative; }
.bb-manifesto::before {
  content: ''; position: absolute; top: 30%; right: -8%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(181,101,29,0.08) 0%, transparent 60%);
  border-radius: 999px; filter: blur(80px); pointer-events: none;
}
.bb-manifesto::after {
  content: ''; position: absolute; bottom: 5%; left: -12%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(232,146,84,0.06) 0%, transparent 60%);
  border-radius: 999px; filter: blur(80px); pointer-events: none;
}
.bb-pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.bb-pillars__visual {
  position: sticky; top: 120px;
  aspect-ratio: 4/5; overflow: hidden;
  border: 1px solid var(--bb-hairline);
}
.bb-pillars__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 900ms var(--bb-ease), transform 1800ms var(--bb-ease);
}
.bb-pillars__img.is-active { opacity: 1; transform: scale(1); }
@media (min-width: 901px) {
  .bb-pillars__img[data-pillar="0"] { background-image: url('../../uploads/ref/7d6bc1f9-2e06-477d-8a51-dc706e49496e.webp'); }
  .bb-pillars__img[data-pillar="1"] { background-image: url('../../uploads/ref/IMG_2758.webp'); }
  .bb-pillars__img[data-pillar="2"] { background-image: url('../../uploads/ref/L1163646.webp'); }
  .bb-pillars__img[data-pillar="3"] { background-image: url('../../uploads/ref/cf1e5a9f-e3a2-48dd-869c-98ac7978e016.webp'); }
}
.bb-pillars__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.75) 100%);
}
.bb-pillars__counter {
  position: absolute; bottom: 32px; left: 32px;
  font-family: 'Playfair Display', serif; font-weight: 700;
  color: var(--bb-bone); display: flex; align-items: baseline; gap: 8px;
}
.bb-pillars__counter-n { font-size: 64px; color: var(--bb-copper-lo); }
.bb-pillars__counter-total { font-size: 16px; opacity: 0.6; }

.bb-pillars__list { list-style: none; }
.bb-pillars__item {
  padding: 28px 0 28px 0;
  border-bottom: 1px solid var(--bb-hairline);
  border-left: 2px solid transparent;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 600ms var(--bb-ease), border-left-color 600ms var(--bb-ease), padding-left 600ms var(--bb-ease);
}
.bb-pillars__item.is-active {
  opacity: 1; border-left-color: var(--bb-copper); padding-left: 24px;
}
.bb-pillars__item:hover { opacity: 0.85; }
.bb-pillars__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bb-pillars__title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 8px; letter-spacing: 0.01em; }
.bb-pillars__desc { color: var(--bb-fg-2); font-size: 16px; }

@media (max-width: 900px) {
  .bb-pillars { grid-template-columns: 1fr; gap: 0; }
  .bb-pillars__visual { display: none !important; }
  .bb-pillars__img { background-image: none; }
  .bb-pillars__item { padding-left: 0; border-left: none; opacity: 1; }
  .bb-pillars__item.is-active { padding-left: 0; border-left: none; }
  .bb-pillars__item-img {
    width: 100%; aspect-ratio: 16/10; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--bb-hairline);
  }
  .bb-pillars__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

@media (max-width: 640px) {
  .bb-manifesto::before, .bb-manifesto::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-pillars__img { transition: none; }
}