/* ──────────────────────────────────────────────────────────────
   Projeto Fênix / Natura in Natura — collage theme layer
   Works on top of colors_and_type.css. Provides cork-board,
   green paper, magenta brush, hexagon pebble, sticky-note vibes.
   ────────────────────────────────────────────────────────────── */

:root {
  /* deep textured paper colors lifted from collage assets */
  --paper-green-deep:   #1F3A1A;   /* the dark green textured bg */
  --paper-green-darker: #15290F;
  --paper-red:          #C44539;
  --paper-cream:        #F2E5C8;   /* warm tape / aged paper */
  --paper-ivory:        #ECDFC1;
  --cork:               #B58A52;
  --cork-shadow:        #7E5A2C;

  --hex-pink:           #F2B7B0;
  --hex-peach:          #F2C28B;
  --hex-yellow:         #F0CB5E;
  --hex-lavender:       #C9B8E4;

  --magenta:            #E62FD3;
  --magenta-deep:       #B71BA8;

  --hand-blue:          #1B3A6F;
  --hand-red:           #C44539;
  --tape-yellow:        rgba(240, 203, 94, 0.75);
}

/* ── Slide chrome ──────────────────────────────────────────────── */
.slide {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--ink);
}
.slide.size-hd { width: 1920px; height: 1080px; }

/* Backgrounds */
.bg-green {
  background: #1F3A1A;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.18), transparent 60%);
}
.bg-cream {
  background: var(--cream);
}
.bg-red {
  background: #C44539;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.18), transparent 65%);
}
.bg-cork {
  background: #B58A52;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.14) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 85% 20%, rgba(0,0,0,0.18) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 10% 70%, rgba(0,0,0,0.16) 0 0.8px, transparent 1.2px),
    linear-gradient(135deg, #C19660, #A37840);
  background-size: 60px 60px, 80px 80px, 70px 70px, 40px 40px, 50px 50px, 100% 100%;
}

/* Subtle paper noise — applied as overlay */
.noise::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ── Display lockup (PP Hatton, mixed serif/italic feel) ─────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--cream);
}
.display .ital { font-style: italic; font-weight: 500; }
.display .accent { color: var(--natura-orange); }
.display .magenta { color: var(--magenta); }
.display .hand { font-family: 'Caveat', 'Kalam', cursive; font-weight: 700; }

/* ── Sticky-note / paper card ─────────────────────────────────── */
.note {
  background: var(--paper-cream);
  padding: 28px 32px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    0 18px 30px rgba(0,0,0,0.28),
    0 6px 12px rgba(0,0,0,0.18);
  position: relative;
}
.note.tilt-l { transform: rotate(-2.2deg); }
.note.tilt-r { transform: rotate(1.8deg); }
.note.torn-bottom {
  -webkit-mask-image:
    linear-gradient(#000 calc(100% - 18px), transparent 100%),
    radial-gradient(circle at 0 calc(100% - 12px), transparent 6px, #000 6.5px);
}

/* Tape strip */
.tape {
  position: absolute;
  width: 110px; height: 26px;
  background: var(--tape-yellow);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.tape.tl { top: -10px; left: 18px; transform: rotate(-6deg); }
.tape.tr { top: -10px; right: 18px; transform: rotate(5deg); }
.tape.tc { top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); }

/* Pin */
.pin {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd66b, #b6781a 60%, #6a3f08 100%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.35);
}
.pin.red    { background: radial-gradient(circle at 35% 35%, #ff7a6a, #b62828 60%, #6a0e0e 100%); }
.pin.yellow { background: radial-gradient(circle at 35% 35%, #ffe26b, #c89a1a 60%, #6a4f08 100%); }
.pin.green  { background: radial-gradient(circle at 35% 35%, #a6d987, #4a7a2a 60%, #1f3a10 100%); }
.pin.blue   { background: radial-gradient(circle at 35% 35%, #8cbcff, #2858b6 60%, #0e2d6a 100%); }
.pin.tl { top: 8px; left: 14px; }
.pin.tr { top: 8px; right: 14px; }
.pin.tc { top: -6px; left: 50%; transform: translateX(-50%); }

/* Paper clip */
.clip {
  position: absolute;
  width: 18px; height: 56px;
  border: 2px solid #8a8a8a;
  border-radius: 9px;
  background: linear-gradient(90deg, #c8c8c8 50%, #8a8a8a 50%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.25);
}

/* ── Sepia photo cutout ───────────────────────────────────────── */
.photo {
  background: var(--cream);
  padding: 8px 8px 36px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.28), 0 4px 8px rgba(0,0,0,0.16);
}
.photo img {
  display: block; width: 100%; height: auto;
  filter: sepia(0.55) contrast(0.95) saturate(0.85);
}

/* ── Hexagon pebble ───────────────────────────────────────────── */
.hex {
  width: 140px; aspect-ratio: 1.155;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(135deg, var(--hex-pink), #f3d6cd);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-family: var(--font-display); font-weight: 700;
  text-align: center; padding: 0 14px; line-height: 1.05;
}
.hex.peach    { background: linear-gradient(135deg, #f8b87e, var(--hex-peach)); }
.hex.yellow   { background: linear-gradient(135deg, #f3d666, var(--hex-yellow)); }
.hex.pink     { background: linear-gradient(135deg, #f2b7b0, #f7d8d4); }
.hex.lavender { background: linear-gradient(135deg, #b9a4dd, var(--hex-lavender)); }
.hex.orange   { background: linear-gradient(135deg, #e8702c, #f59a5e); color: var(--cream); }

/* ── Magenta brush stroke ─────────────────────────────────────── */
.brush {
  position: relative;
  display: inline-block;
  padding: 6px 24px;
  color: var(--cream);
  font-style: italic;
}
.brush::before {
  content: "";
  position: absolute; inset: -8px -16px;
  background: var(--magenta);
  z-index: -1;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'><path d='M5 80 Q40 30 120 50 T260 60 T420 70 T580 50 Q570 100 470 95 T280 100 T80 95 Q10 100 5 80Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'><path d='M5 80 Q40 30 120 50 T260 60 T420 70 T580 50 Q570 100 470 95 T280 100 T80 95 Q10 100 5 80Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ── Leaf-shape lozenge label (like "minha consultoria") ──────── */
.leaflet {
  background: #6f7a3a;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500; font-style: italic;
  padding: 18px 36px;
  text-align: center;
  border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
  display: inline-block;
  box-shadow: 0 8px 14px rgba(0,0,0,0.22);
}

/* ── Handwritten text / highlights ────────────────────────────── */
.hand {
  font-family: 'Caveat', 'Kalam', 'Patrick Hand', cursive;
  color: var(--hand-blue);
  font-weight: 600;
  transform: rotate(-2deg);
  display: inline-block;
}
.hand.red { color: var(--hand-red); }
.hand.green { color: #2a4a1a; }
.hand.scribble {
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

/* ── Eyebrow / stamp ──────────────────────────────────────────── */
.stamp {
  display: inline-block;
  border: 2px solid currentColor;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  transform: rotate(-3deg);
  color: var(--hand-red);
}

/* ── File-folder tab ──────────────────────────────────────────── */
.folder-tab {
  background: #d6b67c;
  padding: 6px 22px 8px;
  color: #3a2510;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  display: inline-block;
}

/* ── Page chrome ──────────────────────────────────────────────── */
.page-chrome {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 48px;
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250,245,236,0.55);
}
.page-chrome.dark { color: rgba(31,22,17,0.5); }
.page-chrome.top { top: 0; }
.page-chrome.bottom { bottom: 0; }
.page-chrome .num { font-family: var(--font-display); font-style: italic; font-size: 20px; letter-spacing: 0; text-transform: none; }