/* ============================================================
   DermoClub · Brand System (dashboard + carrosséis)
   Estética: editorial de beleza refinado.
   Tipografia: Fraunces (display serifada) + Hanken Grotesk (UI/labels).
   Paleta oficial: Brick Red / Scarlet Rush / Alabaster / Ink Black.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..700&display=swap');

:root {
  /* Principais */
  --brick:    #a91c1e;
  --scarlet:  #d83c3d;
  /* Complementares */
  --alabaster:#dedde2;
  --ink:      #070112;
  /* Secundárias (degradê/uso pontual) */
  --midnight: #16142c;
  --grape:    #5b589a;
  --flame:    #ff4d00;
  --pumpkin:  #f67615;

  /* Neutros derivados (família alabaster, para respiro premium) */
  --paper:    #f3f2f5;  /* fundo claro principal dos slides */
  --paper-2:  #eae9ee;
  --line:     #c9c7d0;

  /* Tokens semânticos */
  --bg:       var(--paper);
  --fg:       var(--ink);
  --accent:   var(--scarlet);

  --grad-primary: linear-gradient(150deg, var(--brick), var(--scarlet));
  --grad-deep:    linear-gradient(160deg, #6f0f12, var(--brick) 55%, var(--scarlet));
  --grad-ink:     linear-gradient(160deg, var(--ink), var(--midnight));

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;

  /* dimensões nativas do slide (feed Instagram 4:5) */
  --slide-w: 1080px;
  --slide-h: 1350px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-ui);
  color: var(--fg);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(216,60,61,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(169,28,30,.08), transparent 55%),
    #0c0a12;
}

/* textura de grão sutil reutilizável (data-uri SVG) */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .5;
  pointer-events: none;
}

/* ============================================================
   FRAMEWORK DE SLIDE (canvas nativo 1080x1350 + escala de preview)
   ============================================================ */

.deck {
  --s: 0.46;                 /* escala de preview */
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 32px clamp(16px, 6vw, 120px) 48px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(16px, 6vw, 120px);
}
.deck::-webkit-scrollbar { height: 10px; }
.deck::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.deck::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }

@media (min-width: 1500px) { .deck { --s: 0.56; } }
@media (max-width: 760px)  { .deck { --s: 0.78; gap: 16px; } }
@media (max-width: 480px)  { .deck { --s: 0.86; } }

.frame {
  flex: 0 0 auto;
  width:  calc(var(--slide-w) * var(--s));
  height: calc(var(--slide-h) * var(--s));
  scroll-snap-align: center;
  border-radius: 18px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.slide {
  width: var(--slide-w);
  height: var(--slide-h);
  transform: scale(var(--s));
  transform-origin: top left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* badge com número do slide (fora do canvas exportável) */
.frame .tag {
  position: absolute; z-index: 5; top: 14px; left: 14px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(7,1,18,.55); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 99px;
}

/* ============================================================
   ESTILOS INTERNOS DO SLIDE (compartilhados)
   ============================================================ */

.slide__pad { padding: 96px 92px; flex: 1; display: flex; flex-direction: column; }

.kicker {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-weight: 700;
  font-size: 24px;
}

.serif { font-family: var(--font-display); font-optical-sizing: auto; line-height: .98; }

.rule { width: 88px; height: 6px; border-radius: 99px; background: var(--scarlet); }

.dot-logo { display: inline-flex; align-items: center; gap: 14px; }

.foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-ui); font-size: 22px; letter-spacing: .04em;
}
.foot img { height: 40px; }

.hl { color: var(--scarlet); }
.hl-brick { color: var(--brick); }

/* marca d'água tipográfica gigante */
.ghost {
  position: absolute; font-family: var(--font-display); font-weight: 600;
  color: rgba(7,1,18,.04); line-height: .8; pointer-events: none; user-select: none;
}

/* destaque "marca-texto" sob palavra */
.mark {
  background: linear-gradient(transparent 58%, rgba(216,60,61,.30) 58%);
  padding: 0 .06em;
}
.strike { text-decoration: line-through; text-decoration-color: var(--scarlet); text-decoration-thickness: 5px; }