/* ============================================================
   BELLAIA — Sistema de marca central
   Identitat definida per Dätil Studios
   ------------------------------------------------------------
   Tota la paleta es defineix UNA sola vegada aquí.
   Canviar un color de marca = editar només aquest bloc.
   ============================================================ */

/* ---- Tipografies de marca (Dätil Studios) ---- */
@font-face {
  font-family: 'Neue Montreal';
  src: url('/assets/fonts/NeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('/assets/fonts/NeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('/assets/fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Awesome Serif Italic';
  src: url('/assets/fonts/AwesomeSerifItalic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Awesome Serif Italic';
  src: url('/assets/fonts/AwesomeSerifItalic-MedRegular.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Awesome Serif';
  src: url('/assets/fonts/AwesomeSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Sistema cromàtic Dätil ---- */
  --brand:          #4B9EF0;   /* atzul base del sistema */
  --brand-strong:   #2F7FCB;   /* atzul fosc — hover / estats actius */
  --brand-tint:     #EAF3FD;   /* atzul molt clar — fons suaus */
  --brand-tint-2:   #D7E8FA;   /* atzul clar — fons / vores */
  --brand-soft:     #98B2CB;   /* gris atzulat — secundari, calma */
  --brand-soft-tint:#EDF1F6;   /* gris atzulat clar — fons suaus */

  --ink:            #000000;   /* negre marca */
  --ink-soft:       #1A1A1A;   /* negre suau — titulars */
  --ink-mid:        #444444;   /* text cos */
  --ink-muted:      #6E6E6E;   /* text secundari */
  --ink-light:      #999999;   /* text terciari / captions */
  --ink-faint:      #BBBBBB;   /* línies subtils */
  --ink-ghost:      #F0F0F0;   /* separadors */

  --surface:        #FFFFFF;   /* fons base */
  --surface-2:      #FAFAFA;   /* fons alternatiu */
  --surface-3:      #F5F5F5;   /* targetes / blocs */

  /* ---- Semàntics (es deriven de la marca) ---- */
  --accent:         var(--brand);        /* accent principal = atzul */
  --accent-on:      #FFFFFF;             /* text sobre accent */
  --link-hover:     var(--brand-strong);

  /* ---- Estats funcionals (no de marca) ---- */
  --ok:             #10B981;
  --warn:           #F59E0B;
  --err:            #EF4444;

  /* ---- Radi i tipografia ---- */
  --font: 'Neue Montreal', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif-italic: 'Awesome Serif Italic', Georgia, serif;
}

/* ---- Base ---- */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: 'Neue Montreal', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
  color: var(--ink-soft);
  background: var(--surface);
}

::selection { background: var(--brand); color: #FFFFFF; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   UTILITATS DE MARCA
   Classes reutilitzables que substitueixen colors hardcoded.
   ============================================================ */

.brand-bg      { background: var(--brand); }
.brand-bg-soft { background: var(--brand-tint); }
.brand-text    { color: var(--brand); }
.brand-border  { border-color: var(--brand); }

.ink-text      { color: var(--ink); }
.ink-soft-text { color: var(--ink-soft); }

/* ---- Botó primari (substitueix .cg / .btn-salmon) ---- */
.btn-brand {
  background: var(--brand);
  color: var(--accent-on) !important;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.btn-brand:hover  { background: var(--brand-strong); }
.btn-brand:active { transform: translateY(1px); }
.btn-brand svg    { color: currentColor !important; }

/* Alias de compatibilitat: les classes antigues passen a marca
   sense haver d'editar tots els HTML alhora. */
.cg, .btn-salmon {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  position: relative;
  overflow: hidden;
}
.cg:hover, .btn-salmon:hover { background: var(--brand-strong) !important; }
.cg svg { color: #FFFFFF !important; }

/* ============================================================
   ANIMACIONS I COMPONENTS (heretats de la home, neutres de color)
   ============================================================ */

.glass   { backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.glass-h { backdrop-filter: blur(32px) saturate(1.8); -webkit-backdrop-filter: blur(32px) saturate(1.8); }
.img-ed  { filter: contrast(1.08) brightness(.95) saturate(.88); }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .016;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr   { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.sr.v { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .sr { opacity: 1; transform: none; } }
.sr-d1 { transition-delay: .07s; } .sr-d2 { transition-delay: .14s; }
.sr-d3 { transition-delay: .21s; } .sr-d4 { transition-delay: .28s; }

@keyframes hIn { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ha  { animation: hIn 1s cubic-bezier(.16,1,.3,1) both; }
.hd1 { animation-delay: .15s; } .hd2 { animation-delay: .25s; }
.hd3 { animation-delay: .35s; } .hd4 { animation-delay: .45s; } .hd5 { animation-delay: .55s; }

@keyframes barIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bar-in { animation: barIn .6s cubic-bezier(.16,1,.3,1) 1.4s both; }

@keyframes mrq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mrq { animation: mrq 45s linear infinite; }

@keyframes pDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } }
.pd { animation: pDot 2.5s ease-in-out infinite; background: var(--brand); }

.gc { position: relative; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.gc::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: transparent; opacity: 0; transition: opacity .5s, background .5s; z-index: -1; filter: blur(14px); }
.gc:hover { transform: translateY(-3px); box-shadow: 0 24px 64px rgba(0,0,0,.06); }
.gc:hover::after { opacity: 1; background: linear-gradient(135deg, rgba(75,158,240,.12), rgba(75,158,240,.04)); }

.ps { transition: all .35s cubic-bezier(.16,1,.3,1); border: 1.5px solid rgba(0,0,0,.06); }
.ps.act { background: var(--ink); color: var(--brand); border-color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.15); }

.de { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1), opacity .45s; }
.de.open { grid-template-rows: 1fr; opacity: 1; }
.de > div { overflow: hidden; }

.fb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
.fb > div { overflow: hidden; }
.fq.open .fb { grid-template-rows: 1fr; }
.fq.open .fi  { transform: rotate(180deg); background: var(--brand-tint); color: var(--ink); border-color: var(--brand-tint-2); }
.fq.open .fq-row { background: rgba(75,158,240,.06); border-radius: 12px; margin: 0 -8px; padding: 0 8px; }
.fi { transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s, color .25s, border-color .25s; }

.ns::-webkit-scrollbar { display: none; }
.ns { -ms-overflow-style: none; scrollbar-width: none; }

.photo-bg { background-size: cover; background-position: center; }
.avatar { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar svg { width: 55%; height: 55%; opacity: .5; }
.rewards-image-container { flex: 1; min-height: 450px; width: auto; display: block; overflow: hidden; border-radius: 24px; }

/* ---- Responsive (heretat de la home) ---- */
@media (max-width: 767px) {
  .rewards-flex { flex-direction: column !important; }
  .rewards-flex .rewards-image-container { min-height: 260px; width: 100%; border-radius: 16px; }
  .rewards-flex img { width: 100% !important; height: auto !important; }
  #about .sr { grid-template-columns: 1fr !important; }
  #about .sr > div:last-child { aspect-ratio: 16/9; border-radius: 20px; }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
  #hero-section { padding-top: 0 !important; padding-bottom: 0 !important; }
  section .sr.text-center.mb-14 { margin-bottom: 28px !important; }
  #faqSection .sr { padding: 24px !important; }
  #ctaBar { font-size: 12px !important; padding: 12px 16px !important; }
}
#ctaBar { z-index: 40; }
#hero-wrap { height: auto; min-height: 0; }
@media (min-width: 768px) { #hero-wrap { height: 520px; min-height: unset; } }


/* ============================================================
   SISTEMA TIPOGRÀFIC (Dätil Studios)
   ------------------------------------------------------------
   Base: Neue Montreal a tot el text (per defecte i forçat per
   sobreescriure Tailwind CDN i estils heretats).
   Excepcions semàntiques:
     .font-serif         → Awesome Serif Regular
     .font-serif-italic  → Awesome Serif Italic
   També suporta style inline (retrocompatibilitat amb HTML existent).
   ============================================================ */

html, body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea,
select, span, div, li, ul, ol, label, td, th, blockquote {
  font-family: 'Neue Montreal', system-ui, -apple-system, sans-serif !important;
}

/* Awesome Serif Regular (no italic) */
.font-serif,
[style*="font-family:'Awesome Serif',"],
[style*="font-family: 'Awesome Serif',"] {
  font-family: 'Awesome Serif', Georgia, serif !important;
  font-style: normal !important;
}

/* Awesome Serif Italic */
.font-serif-italic,
[style*="Awesome Serif Italic"] {
  font-family: 'Awesome Serif Italic', Georgia, serif !important;
  font-style: italic !important;
}

/* ============================================================
   KICKERS — etiquetes de secció (punt blau + text serif)
   ============================================================ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Awesome Serif', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
@media (min-width: 768px) {
  .kicker { font-size: 20px; }
}
.kicker .pd {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 1px; /* ajust òptic per centrar amb la serif */
}