/* ============================================================
   VIA ENERGIA · pele da marca do Rapha sobre as telas antigas

   As telas de dentro desta conta foram feitas no sistema visual da
   Kalema. Aqui os tokens viram os dele, em MODO CLARO, e a barra de
   abas vira estante de cartoes. Quando cada tela for refeita no
   padrao novo, esta pele sai.
   ============================================================ */

@import url('fonts/marca-fonts.css');

:root {
  --bg: #F6F5F9;
  --bg-2: #FFFFFF;
  --bg-3: #EFEDF5;
  --card: #FFFFFF;
  --navy: #2F3363;
  --line: rgba(47, 51, 99, .14);
  --gold: #7C5696;
  --gold-deep: #49176A;
  --gold-light: #7C8ECA;
  --tinta: #2A2C4A;
  --ouro: #7C5696;
  --ouro-claro: #7C8ECA;

  --kal-navy-950: #E9E7F1;
  --kal-navy-900: #F6F5F9;
  --kal-navy-800: #FFFFFF;
  --kal-navy-700: #EFEDF5;
  --kal-navy-600: #E3E0EE;
  --kal-gold-deep: #49176A;
  --kal-gold: #7C5696;
  --kal-gold-light: #7C8ECA;
  --kal-ink: #2A2C4A;
  --kal-ink-soft: #55597F;
  --kal-ink-mute: #8B8FAC;
  --kal-font-title: 'EB Garamond', Georgia, serif;
  --kal-font-body: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
}

body { background: var(--bg); color: var(--tinta); font-weight: 300; }

/* ── A estante de entrada ──────────────────────────────────── */
.estante-cliente { margin: 26px 0 10px; }
.ecab { margin-bottom: 14px; }
.ecab .ekick {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: #7C5696; margin-bottom: 6px;
}
.ecab h2 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 30px;
  margin: 0; color: #2F3363;
}
.ecarrossel {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
}
.ecard {
  position: relative; flex: 0 0 250px; min-height: 190px; display: flex;
  flex-direction: column; justify-content: space-between; text-decoration: none;
  background: #FFFFFF; border: 1px solid rgba(47,51,99,.14);
  background-size: cover; background-position: center; overflow: hidden;
  scroll-snap-align: start; transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.ecard:hover { transform: translateY(-5px); border-color: #7C5696; }
.ecard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #7C5696; z-index: 3; }
.ecard.com-img {
  background-size: 100% 120px; background-position: top center; background-repeat: no-repeat;
  padding-top: 120px;
}
.ecard.com-img::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.8) 88%, #FFF 100%);
}
.ecard .eb { background: #FFF; position: relative; z-index: 2; }
.ecard .et { position: absolute; top: 12px; left: 16px; margin: 0; z-index: 3; }
.ecard > * { position: relative; z-index: 2; }
.ecard .et {
  align-self: flex-start; margin: 12px 0 0 16px; font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #2F3363;
  background: rgba(255,255,255,.86); border: 1px solid rgba(47,51,99,.14); padding: 3px 9px;
}
.ecard .eb { padding: 14px 18px 16px; }
.ecard .eb b {
  display: block; font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: 21px; line-height: 1.2; color: #2F3363; margin-bottom: 6px;
}
.ecard .eb i { font-style: normal; font-size: 12.5px; line-height: 1.5; color: #55597F; }

/* a barra de abas antiga continua funcionando, mas discreta */
nav.tabs { opacity: .55; font-size: 12px; }
nav.tabs:hover { opacity: 1; }