/* =====================================================
   BEECARE · MOTION + LAYOUT SYSTEM (compartilhado)
   Abelha-guia · Revelação em favo · Célula de mel
   Favo (hive) · Timeline · Lista editorial · Acordeão
   ===================================================== */

:root {
  --hexclip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* =====================================================
   1 · REVELAÇÃO EM FAVO
   Substitui o fade-in-up: o conteúdo entra por máscara
   hexagonal. O gatilho continua sendo .reveal.in.
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: none;
    clip-path: polygon(50% 34%, 64% 42%, 64% 58%, 50% 66%, 36% 58%, 36% 42%);
    transition: clip-path 1s var(--ease, ease), opacity .55s ease;
  }
  .reveal.in {
    opacity: 1;
    clip-path: polygon(50% -130%, 200% -40%, 200% 140%, 50% 230%, -100% 140%, -100% -40%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* =====================================================
   2 · CÉLULA DE MEL (eyebrows)
   O ponto do eyebrow vira um hexágono que se preenche
   de mel quando a seção entra em vista.
   ===================================================== */
.eyebrow.eyebrow::before {
  border-radius: 0;
  width: 9px;
  height: 10.4px;
  clip-path: var(--hexclip);
  background-color: rgba(201, 146, 29, 0.28);
  background-image: linear-gradient(var(--mel, #F5B83D), var(--mel, #F5B83D));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
}
.eyebrow.honey-filled::before { background-size: 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .eyebrow.eyebrow::before { transition: background-size .9s var(--ease, ease) .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow.eyebrow::before { background-size: 100% 100% !important; }
}

/* =====================================================
   3 · ABELHA-GUIA + RASTRO DE MEL
   Construída via JS (beecare.js). Lane na margem esquerda,
   nunca sobre o texto. Some em telas estreitas e em
   prefers-reduced-motion.
   ===================================================== */
#beeGuide {
  position: absolute;
  top: 0; left: 0;
  width: 120px;
  pointer-events: none;
  z-index: 60;
}
#beeGuide svg { position: absolute; top: 0; left: 0; display: block; }
#beeGuide .trail {
  fill: none;
  stroke: var(--mel, #F5B83D);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .55;
}
#beeGuide .bee {
  position: absolute;
  top: 0; left: 0;
  width: 34px;
  height: auto;
  will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(31, 27, 23, 0.18));
}
@media (max-width: 1199px) { #beeGuide .bee { width: 26px; } }
@media (max-width: 767px) { #beeGuide .bee { width: 20px; } }
@media (prefers-reduced-motion: reduce) { #beeGuide { display: none !important; } }

/* =====================================================
   4 · GRADE DE FAVO (.hive)
   ===================================================== */
.hive {
  --hex-w: clamp(150px, 16.5vw, 226px);
  --hex-gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hive-row { display: flex; gap: var(--hex-gap); }
.hive-row + .hive-row { margin-top: calc(var(--hex-w) * -0.289 + var(--hex-gap)); }
.hive-row.shift { transform: translateX(calc((var(--hex-w) + var(--hex-gap)) / 2)); }

.hex {
  position: relative;
  width: var(--hex-w);
  aspect-ratio: 0.866;
  clip-path: var(--hexclip);
  background: rgba(31, 27, 23, 0.14);
  display: block;
  flex: 0 0 auto;
}
.hex-in {
  position: absolute;
  inset: 1.5px;
  clip-path: var(--hexclip);
  background: var(--branco, #FFFCF5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14% 16%;
  text-align: center;
  transition: background .25s var(--ease, ease);
}
.hex:hover .hex-in, .hex:focus-visible .hex-in { background: var(--mel, #F5B83D); }
.hex .ico-w {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mel, #F5B83D);
  color: var(--colmeia, #1F1B17);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: background .25s var(--ease, ease);
}
.hex:hover .ico-w { background: var(--branco, #FFFCF5); }
.hex .num {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mel-escuro, #C9921D);
}
.hex:hover .num { color: rgba(31, 27, 23, 0.6); }
.hex .name {
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  font-size: clamp(13px, 1.15vw, 16.5px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--colmeia, #1F1B17);
}
@media (max-width: 759px) {
  .hive { --hex-w: clamp(140px, 43vw, 200px); }
  .hive-row { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .hive-row + .hive-row { margin-top: 10px; }
  .hive-row.shift { transform: none; }
}

/* =====================================================
   5 · TIMELINE CONECTADA (.bc-timeline)
   Nós hexagonais + linha de mel tracejada.
   --cols define o nº de etapas; --tline a cor da linha.
   ===================================================== */
.bc-timeline {
  --tline: rgba(201, 146, 29, 0.4);
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 0 20px;
}
.bc-tstep { position: relative; padding-top: 36px; }
.bc-tstep::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 15px; height: 17.3px;
  clip-path: var(--hexclip);
  background: var(--mel, #F5B83D);
}
.bc-tstep::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 27px;
  right: -14px;
  height: 0;
  border-top: 2px dashed var(--tline);
}
.bc-tstep:last-child::after { display: none; }
.bc-tstep .n {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.bc-tstep h4 {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.bc-tstep p { font-size: 14.5px; line-height: 1.55; }
@media (max-width: 820px) {
  .bc-timeline { grid-template-columns: 1fr; gap: 0; }
  .bc-tstep { padding: 0 0 30px 36px; }
  .bc-tstep::before { top: 2px; }
  .bc-tstep::after {
    top: 24px;
    left: 6.5px;
    right: auto;
    bottom: 4px;
    height: auto;
    border-top: 0;
    border-left: 2px dashed var(--tline);
  }
  .bc-tstep:last-child { padding-bottom: 0; }
}

/* =====================================================
   6 · LISTA EDITORIAL NUMERADA (.edit-list)
   ===================================================== */
.edit-list { border-top: 1px solid var(--rule, rgba(31,27,23,0.12)); }
.edit-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--rule, rgba(31,27,23,0.12));
  align-items: start;
}
@media (max-width: 720px) { .edit-row { grid-template-columns: 1fr; gap: 10px; } }
.edit-row .lab {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mel-escuro, #C9921D);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 5px;
}
.edit-row .lab::before {
  content: "";
  width: 9px; height: 10.4px;
  clip-path: var(--hexclip);
  background: var(--mel, #F5B83D);
  flex: 0 0 auto;
}
.edit-row h3 {
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 10px;
}
.edit-row p { color: var(--muted, rgba(31,27,23,0.62)); font-size: 15.5px; line-height: 1.6; max-width: 62ch; }

/* =====================================================
   7 · ACORDEÃO (.bc-acc) — mitos vs verdades
   ===================================================== */
details.bc-acc {
  background: var(--branco, #FFFCF5);
  border: 1px solid var(--rule, rgba(31,27,23,0.12));
  border-radius: var(--rad-md, 20px);
  overflow: hidden;
}
details.bc-acc + details.bc-acc { margin-top: 10px; }
details.bc-acc summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px);
}
details.bc-acc summary::-webkit-details-marker { display: none; }
details.bc-acc summary .tag {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(31, 27, 23, 0.5);
  white-space: nowrap;
}
details.bc-acc summary .q {
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
details.bc-acc summary .chev {
  width: 30px; height: 34.6px;
  clip-path: var(--hexclip);
  background: var(--polen-2, #F4E6C7);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--colmeia, #1F1B17);
  transition: background .25s var(--ease, ease), transform .3s var(--ease, ease);
  flex: 0 0 auto;
}
details.bc-acc[open] summary .chev { background: var(--mel, #F5B83D); transform: rotate(45deg); }
details.bc-acc summary:hover .chev { background: var(--mel, #F5B83D); }
details.bc-acc .truth {
  padding: 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 26px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
details.bc-acc .truth .t-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mel-escuro, #C9921D);
  white-space: nowrap;
  padding-top: 3px;
}
details.bc-acc .truth p { color: var(--muted, rgba(31,27,23,0.62)); font-size: 15.5px; line-height: 1.6; max-width: 60ch; }
@media (prefers-reduced-motion: no-preference) {
  details.bc-acc[open] .truth { animation: bc-acc-in .35s var(--ease, ease); }
}
@keyframes bc-acc-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  details.bc-acc summary { grid-template-columns: minmax(0, 1fr) auto; }
  details.bc-acc summary .tag { grid-column: 1 / -1; order: -1; }
  details.bc-acc .truth { grid-template-columns: 1fr; gap: 8px; }
}