/*
 * base/12-marca.css
 * Identidade Monetize Mentoring and Consulting aplicada ao portal, e a vitrine de Recomendações.
 * Assinatura visual: o hexágono do símbolo (avatares e numerações) e o degradê marfim → ouro do logotipo.
 */

/* ---------- Marca no menu ---------- */

.side {
  border-right-color: #23211d;
}

.brand {
  gap: 12px;
  padding: 20px 18px 16px;
}

.brand .mk {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand b {
  font: 800 17px/1 var(--dp);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--gg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fdd982;
}

.brand span {
  color: #8d8778;
  font-weight: 500;
  margin-top: 5px;
}

.ctx {
  border-color: #2b2925;
  background: #151412;
}

.grp {
  color: #6f6a5e;
  letter-spacing: .02em;
}

.nv {
  color: #aaa493;
  border-radius: 8px;
}

.nv:hover {
  background: #191816;
  color: #fdfbee;
}

.nv.on {
  background: #1f1b12;
  color: #fdfbee;
}

.nv.on svg {
  color: #fdb621;
}

.nv.on::before {
  background: linear-gradient(180deg,#fdd982,#fdb621);
}

.bd {
  background: #fdb621;
  color: #0e0e0e;
}

.top .tt h2 {
  font-size: 20px;
}

/* ---------- Hexágono: avatares e numerações ---------- */

.av {
  border: 0;
  border-radius: 0;
  clip-path: var(--hex);
  background: linear-gradient(160deg,#3a2f17,#1d190f);
  color: #fdd982;
  width: 36px;
  height: 38px;
  font: 700 12px var(--dp);
}

.av.big {
  width: 64px;
  height: 68px;
  font-size: 20px;
}

.avs .av {
  width: 32px;
  height: 34px;
}

.hexn,.mod .mn,.rk {
  display: grid;
  place-items: center;
  width: 36px;
  height: 38px;
  flex: none;
  clip-path: var(--hex);
  border-radius: 0;
  background: var(--gg);
  color: #0e0e0e;
  font: 800 14px/1 var(--dp);
}

/* ---------- Superfícies e controles ---------- */

.card,.kpi,.tw,.mod {
  border-radius: 12px;
}

.card.gold {
  background: linear-gradient(180deg,var(--gds),transparent 60%),var(--sf);
}

.btn {
  border-radius: 8px;
  background: linear-gradient(100deg,#fdd982,#fdb621);
  color: #0e0e0e;
  font-family: var(--dp);
  font-weight: 700;
  letter-spacing: -.005em;
}

.btn.s,.btn.q,.btn.d {
  font-family: var(--ui);
}

.btn.s {
  background: var(--sf2);
}

.btn.q {
  background: none;
}

.btn.d {
  background: var(--ers);
}

@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) .btn:not(.s):not(.q):not(.d) {
    background: #0e0e0e;
    color: #fdd982;
  }
}

:root[data-theme="light"] .btn:not(.s):not(.q):not(.d) {
  background: #0e0e0e;
  color: #fdd982;
}

.hero .btn:not(.s):not(.q),.lg .btn:not(.s) {
  background: linear-gradient(100deg,#fdd982,#fdb621)!important;
  color: #0e0e0e!important;
}

.bar i {
  background: linear-gradient(90deg,#fdd982,#fdb621);
}

:root[data-theme="light"] .bar i {
  background: linear-gradient(90deg,#d9a021,#b57c00);
}

@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) .bar i {
    background: linear-gradient(90deg,#d9a021,#b57c00);
  }
}

.tabs button {
  font-family: var(--dp);
  font-weight: 600;
}

.ch h3,h3 {
  font-family: var(--dp);
  font-weight: 700;
  letter-spacing: -.01em;
}

.num.gold,.kpi .num .gold {
  background: var(--gg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root[data-theme="light"] .num.gold,:root[data-theme="light"] .kpi .num .gold {
  background: none;
  -webkit-text-fill-color: currentColor;
}

@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) .num.gold,:root:not([data-theme="dark"]) .kpi .num .gold {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.dbox b {
  font: 700 19px/1.1 var(--dp);
}

/* ---------- Login ---------- */

.lg {
  background: #0e0e0e;
}

.lg input {
  background: #171716;
  border-color: #33302a;
}

.lg a {
  color: #fdb621;
}

/* ---------- Recomendações: vitrine ---------- */

.rprog {
  min-width: 190px;
  font-size: 12.5px;
  color: var(--t2);
}

.rprog b {
  font: 700 17px var(--dp);
  color: var(--tx);
}

.rprog .bar {
  margin-top: 6px;
}

.rfe {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 30px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid var(--ln);
  border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%,var(--gds),transparent 55%),var(--sf);
  margin-bottom: 22px;
}

.rfe-c {
  cursor: pointer;
}

.rfe-c .rcv.p {
  width: 168px;
}

.rfe-c .rcv.w {
  width: 320px;
}

.rfe-c .rcv.q {
  width: 190px;
}

.rfe-b h1 {
  margin: 12px 0 6px;
  max-width: 22ch;
}

.rfe-d {
  max-width: 60ch;
  margin: 12px 0 0;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.6;
}

.rca {
  margin: 0;
  color: var(--t2);
  font-size: 13px;
}

.rfil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.rfil button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 99px;
  padding: 8px 14px;
  font: 600 13px var(--dp);
  color: var(--t2);
  cursor: pointer;
}

.rfil button svg {
  width: 15px;
  height: 15px;
}

.rfil button i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--t3);
}

.rfil button.on {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--bg);
}

.rfil button.on i {
  color: inherit;
  opacity: .6;
}

.rsec {
  margin-top: 28px;
}

.rsec h2 {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rsec h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ln);
}

.rgrid {
  display: grid;
  gap: 20px 18px;
}

.rgrid.p {
  grid-template-columns: repeat(auto-fill,minmax(158px,1fr));
}

.rgrid.w {
  grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
}

.rgrid.q {
  grid-template-columns: repeat(auto-fill,minmax(330px,1fr));
}

.rgrid.mix {
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  margin-top: 20px;
}

.rc {
  cursor: pointer;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-radius: 10px;
}

.rc:focus-visible {
  outline: 2px solid var(--gd);
  outline-offset: 4px;
}

.rc .rcv {
  transition: transform .18s ease;
}

.rc:hover .rcv {
  transform: translateY(-3px);
}

.rc h3 {
  font-size: 14.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.rcd {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--t2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  flex-wrap: wrap;
}

/* Podcast: cartão horizontal */

.rgrid.q .rc {
  flex-direction: row;
  gap: 16px;
  padding: 14px;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 12px;
  align-items: stretch;
}

.rgrid.q .rcv {
  width: 104px;
  flex: none;
  align-self: flex-start;
}

/* Capas */

.rcv {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #1b1915;
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}

.rcv.p {
  aspect-ratio: 2 / 3;
  border-radius: 3px 7px 7px 3px;
}

.rcv.w {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.rcv.q {
  aspect-ratio: 1;
  border-radius: 10px;
}

.rcv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rcv.img .rcg {
  display: none;
}

/* Lombada do livro */

.rcv.p::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  background: linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.1) 70%,transparent);
}

.rcg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 11% 10% 10% 13%;
  container-type: inline-size;
}

.rct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 10.5px/1 var(--dp);
  letter-spacing: .04em;
  opacity: .8;
}

.rct svg {
  width: 13px;
  height: 13px;
}

.rcg b {
  margin-top: auto;
  font: 800 clamp(14px,13cqw,26px)/1.08 var(--dp);
  letter-spacing: -.025em;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

.rcg small {
  margin-top: 8px;
  font: 600 11px/1.3 var(--ui);
  opacity: .78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcv.w .rcg,.rcv.q .rcg {
  padding: 8% 9%;
}

.rcv.w .rcg b {
  font-size: clamp(15px,7.4cqw,26px);
  max-width: 78%;
}

.rcv.q .rcg b {
  font-size: clamp(11px,13cqw,24px);
  -webkit-line-clamp: 4;
}

.rgrid.q .rcv .rcg small,.rgrid.q .rcv .rct {
  display: none;
}

/* Três capas geradas, todas na paleta da marca */

.rcv.g1 {
  background: linear-gradient(150deg,#fdd982,#fdb621 62%,#d18d00);
  color: #0e0e0e;
}

.rcv.g2 {
  background: #0e0e0e;
  color: #fdd982;
  box-shadow: inset 0 0 0 1px #55432a,0 10px 26px rgba(0,0,0,.38);
}

.rcv.g2::before {
  content: "";
  position: absolute;
  right: -22%;
  top: -12%;
  width: 78%;
  aspect-ratio: 1 / 1.08;
  clip-path: var(--hex);
  background: linear-gradient(160deg,rgba(253,217,130,.2),rgba(253,182,33,.03));
}

.rcv.g3 {
  background: #fdfbee;
  color: #0e0e0e;
}

.rcv.g3::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 10%;
  top: 27%;
  height: 3px;
  background: #fdb621;
}

.rpl {
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(14,14,14,.82);
  color: #fdd982;
  backdrop-filter: blur(4px);
}

.rpl svg {
  width: 20px;
  height: 20px;
}

/* Salvar / concluir */

.rmk {
  display: inline-flex;
  gap: 4px;
}

.rmk button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--ln);
  border-radius: 99px;
  padding: 5px 10px 5px 8px;
  font: 600 11.5px var(--ui);
  color: var(--t2);
  cursor: pointer;
}

.rmk button svg {
  width: 13px;
  height: 13px;
}

.rmk button:hover {
  border-color: var(--gdl);
  color: var(--tx);
}

.rmk button.on {
  background: var(--gds);
  border-color: var(--gdl);
  color: var(--gd);
}

.rmk button.on.ok {
  background: var(--oks);
  border-color: transparent;
  color: var(--ok);
}

.rgrid.p .rmk button span {
  display: none;
}

.rgrid.p .rmk button {
  padding: 6px;
}

.rgrid.p .rmk button.on span {
  display: inline;
}

.rgrid.p .rmk button.on {
  padding: 5px 10px 5px 8px;
}

/* Detalhe */

.rdt {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  gap: 26px;
  align-items: start;
}

.rdt.w {
  grid-template-columns: 340px minmax(0,1fr);
}

.rwhy {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--gd);
}

.rwhy p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

/* Formulário do mentor */

.rform {
  display: grid;
  grid-template-columns: minmax(0,1fr) 220px;
  gap: 26px;
  align-items: start;
}

.rtp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rtp button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 8px;
  border: 1px solid var(--ln2);
  background: var(--sf2);
  color: var(--t2);
  font: 600 13px var(--ui);
  cursor: pointer;
}

.rtp button svg {
  width: 16px;
  height: 16px;
}

.rtp button.on {
  border-color: var(--gd);
  background: var(--gds);
  color: var(--tx);
}

.rtp button.on svg {
  color: var(--gd);
}

.drop.sm {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}

.drop.sm svg {
  width: 18px;
  height: 18px;
}

@media (max-width:760px) {
  .rfe {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 18px;
  }
  .rfe-c .rcv.p {
    width: 120px;
  }
  .rfe-c .rcv.w {
    width: 100%;
  }
  .rgrid.p {
    grid-template-columns: repeat(auto-fill,minmax(132px,1fr));
    gap: 18px 12px;
  }
  .rgrid.q {
    grid-template-columns: 1fr;
  }
  .rdt,.rdt.w,.rform {
    grid-template-columns: 1fr;
  }
  .rdt .rcv.p {
    width: 150px;
  }
}

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