/* Identidade visual IPBL 2026 — fontes de apoio e texturas da marca */

@font-face {
  font-family: 'Inge';
  src: url('fonts/inge.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Balneario';
  src: url('fonts/balneario-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ipbl-teal: #1A4450;
  --ipbl-teal-deep: #0F2C35;
  --ipbl-verde: #69B17D;
  --ipbl-marrom: #91715C;
  --ipbl-areia: #BCAF92;
  --ipbl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gradiente teal → verde (capa do YouTube / avatar) */
.ipbl-grad-teal {
  background:
    radial-gradient(60% 70% at 92% 18%, rgba(105,177,125,0.85), rgba(105,177,125,0) 70%),
    radial-gradient(45% 55% at 6% 0%, rgba(105,177,125,0.55), rgba(105,177,125,0) 70%),
    radial-gradient(70% 80% at 30% 100%, #0F2C35, rgba(15,44,53,0) 70%),
    linear-gradient(135deg, #16404B 0%, #1A4450 45%, #24605F 100%);
}

/* Gradiente areia → teal (thumbnail de culto) */
.ipbl-grad-areia {
  background:
    radial-gradient(55% 80% at 100% 100%, rgba(26,68,80,0.95), rgba(26,68,80,0) 75%),
    linear-gradient(110deg, #E6D9BC 0%, #CFC2A2 40%, #8E9C8A 72%, #2E5C64 100%);
}

/* Granulado da marca — aplicar em seções com gradiente */
.ipbl-grain { position: relative; isolation: isolate; }
.ipbl-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ipbl-grain);
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.ipbl-grain > * { position: relative; z-index: 1; }

/* Árvore do ícone em traço, usada como marca d'água (como nas thumbnails) */
.ipbl-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.09;
  z-index: 0;
}