/* ═══════════════════════════════════════════════════════════
   IRA INTEGRA TEA — Estilos globais
   Compartilhado por todas as páginas do site
   ═══════════════════════════════════════════════════════════ */

/* ── Variáveis ────────────────────────────────────────────── */
:root {
  /* Cores da marca */
  --color-blue:   #3d65d9;
  --color-sky:    #51a8f8;
  --color-pink:   #ef89ad;
  --color-green:  #d3e15b;
  --color-dark:   #0f1e50;

  /* Hover da cor primária */
  --color-blue-hover: #2f53b8;

  /* Texto */
  --color-text:     #1e293b;
  --color-muted:    #475569;
  --color-subtle:   #64748b;
  --color-label:    #94a3b8;

  /* Bordas */
  --color-border:       #e2e8f0;
  --color-border-hover: #cbd5e1;

  /* Fundos */
  --color-bg-light:     #f1f5f9;
  --color-bg-hover:     #f8fafc;
  --color-bg-blue-tint: #EFF4FF;

  /* Doação (vermelho) */
  --color-red:          #e23030;
  --color-red-hover:    #c01a1a;
  --color-red-bg:       #fff0f3;
  --color-red-bg-hover: #ffe0e5;

  /* Texto de títulos e cards */
  --color-heading:   #0f172a;
  --color-text-card: #334155;

  /* Texto em fundo escuro */
  --color-on-dark:         rgba(255,255,255,.88);
  --color-on-dark-soft:    rgba(255,255,255,.80);
  --color-on-dark-label:   rgba(255,255,255,.60);
  --color-on-dark-address: rgba(255,255,255,.55);
  --color-on-dark-caption: rgba(255,255,255,.50);

  /* Grid e beams */
  --grid-color:      rgba(0,0,0,0.04);
  --grid-color-dark: rgba(255,255,255,0.06);
  --beam-color:      var(--color-sky);

  /* Gradiente da marca (reutilizado em brand-bar, timeline, etc.) */
  --brand-gradient: linear-gradient(90deg,
    var(--color-blue)  45%,
    var(--color-green) 45% 70%,
    var(--color-pink)  70% 90%,
    var(--color-sky)   90%
  );
}

/* ── Reset & Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  font-family: 'Libre Franklin', sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: 'Libre Franklin', sans-serif; }
h2 { font-size: 2rem; font-weight: 400; }
p  { font-size: 1.125rem; font-weight: 400; }

/* ── Grid lines ───────────────────────────────────────────── */
.grid-line-v      { position:absolute; top:0; bottom:0; width:1px; background:var(--grid-color); z-index:0; }
.grid-line-v-dark { position:absolute; top:0; bottom:0; width:1px; background:var(--grid-color-dark); z-index:0; }
.grid-line-h      { position:absolute; left:0; right:0; height:1px; background:var(--grid-color); z-index:0; }

/* ── Animações ────────────────────────────────────────────── */
@keyframes reveal-up {
  0%   { clip-path:inset(100% 0 0 0); transform:translateY(20px); opacity:0; }
  100% { clip-path:inset(0 0 0 0);    transform:translateY(0);    opacity:1; }
}
@keyframes fade-in { 0%{opacity:0} 100%{opacity:1} }
@keyframes beam-h {
  0%{left:-200px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0}
}
@keyframes beam-v {
  0%{top:-200px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0}
}

.animate-reveal { opacity:0; animation:reveal-up 1.0s cubic-bezier(0.16,1,0.3,1) forwards; }
.scroll-reveal  { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
.scroll-reveal.is-visible { opacity:1; transform:translateY(0); }

.delay-100 { animation-delay:.1s; transition-delay:.1s; }
.delay-200 { animation-delay:.2s; transition-delay:.2s; }
.delay-300 { animation-delay:.3s; transition-delay:.3s; }
.delay-400 { animation-delay:.4s; transition-delay:.4s; }

.beam-h { position:absolute; height:1px; width:200px; background:linear-gradient(90deg,transparent,var(--beam-color),transparent); z-index:10; opacity:0; }
.beam-v { position:absolute; width:1px; height:200px; background:linear-gradient(180deg,transparent,var(--beam-color),transparent); z-index:10; opacity:0; }

/* ── Labels de seção ──────────────────────────────────────── */
.section-label {
  display:block; font-family:'Libre Franklin',sans-serif; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--color-label); margin-bottom:.875rem;
}
.section-label-colored {
  display:inline-flex; align-items:center; gap:.375rem; font-family:'Libre Franklin',sans-serif;
  font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem;
}

/* ── Botões ───────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--color-blue); color:#fff; font-family:'Libre Franklin',sans-serif;
  font-weight:600; font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.75rem .75rem .75rem 1.5rem; border-radius:999px; border:none; cursor:pointer;
  text-decoration:none; transition:background .2s, box-shadow .2s, transform .15s;
  box-shadow:0 2px 8px rgba(61,101,217,.25);
}
.btn-primary:hover  { background:var(--color-blue-hover); box-shadow:0 4px 20px rgba(61,101,217,.4); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.btn-icon-circle {
  width:32px; height:32px; background:rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s;
}
.btn-primary:hover .btn-icon-circle { background:rgba(255,255,255,.28); }

.btn-outline {
  display:inline-flex; align-items:center; gap:.625rem;
  border:1.5px solid var(--color-blue); color:var(--color-blue); background:transparent;
  font-family:'Libre Franklin',sans-serif; font-weight:600; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.08em; padding:.625rem 1.25rem;
  border-radius:999px; cursor:pointer; text-decoration:none;
  transition:background .15s, color .15s;
}
.btn-outline:hover { background:var(--color-blue); color:#fff; }

.btn-nav-pill {
  display:inline-flex; align-items:center; gap:.625rem;
  padding:.5rem .5rem .5rem 1.125rem; background:#fff; border:1px solid var(--color-border);
  border-radius:999px; color:var(--color-text); font-family:'Libre Franklin',sans-serif;
  font-weight:500; font-size:1rem; text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06); transition:box-shadow .15s, background .15s; cursor:pointer;
}
.btn-nav-pill:hover { background:var(--color-bg-hover); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.btn-nav-pill .btn-icon-circle { background:var(--color-bg-light); color:var(--color-subtle); }
.btn-nav-pill:hover .btn-icon-circle { background:var(--color-bg-blue-tint); color:var(--color-blue); }
.btn-nav-pill.btn-donate .btn-icon-circle { background:var(--color-red-bg); color:var(--color-red); }
.btn-nav-pill.btn-donate:hover .btn-icon-circle { background:var(--color-red-bg-hover); color:var(--color-red-hover); }

/* ── Navegação ────────────────────────────────────────────── */
.nav-link {
  font-family:'Libre Franklin',sans-serif; font-weight:500; font-size:1rem;
  color:var(--color-subtle); text-decoration:none; padding:.375rem .75rem; border-radius:6px;
  transition:color .15s, background .15s; white-space:nowrap;
}
.nav-link:hover  { color:var(--color-blue); background:var(--color-bg-blue-tint); }
.nav-link.active { color:var(--color-blue); background:var(--color-bg-blue-tint); font-weight:600; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background:#fff; border:1px solid var(--color-border); border-radius:6px;
  transition:border-color .2s, box-shadow .2s; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.card:hover { border-color:var(--color-border-hover); box-shadow:0 2px 8px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.05); }

.card-dark {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; backdrop-filter:blur(12px); transition:background .2s, border-color .2s;
}
.card-dark:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); }

.card-brand-bottom {
  background: linear-gradient(#fff,#fff) padding-box,
              var(--brand-gradient) border-box;
  border-bottom:3px solid transparent;
}

.icon-box { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── Brand bar ────────────────────────────────────────────── */
.brand-bar {
  height:3px; width:100%;
  background:var(--brand-gradient);
  border-radius:999px; flex-shrink:0;
}

/* ── Top bar ──────────────────────────────────────────────── */
.top-bar { background:var(--color-dark); border-bottom:1px solid rgba(255,255,255,.06); }
.top-bar a { color:rgba(255,255,255,.65); font-size:.75rem; text-decoration:none; transition:color .15s; }
.top-bar a:hover { color:var(--color-sky); }

/* ── Hero slider (home) ───────────────────────────────────── */
.hero-slider { position:relative; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.slide.active { opacity:1; position:relative; }
.slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(140deg,rgba(15,30,80,.75) 0%,rgba(15,30,80,.35) 100%); }

@media (max-width: 767px) {
  .hero-slider,
  .hero-slider .slide.active { min-height: unset !important; height: auto; }
  .hero-slider .slide picture { position: relative !important; inset: unset !important; display: block; }
  .hero-slider .slide picture img { height: auto !important; object-fit: unset !important; }
}

/* ── Acordeão de projetos (home) ──────────────────────────── */
.proj-accordion { display:flex; gap:12px; height:480px; }
.proj-item {
  flex:1; min-width:60px; border-radius:8px; overflow:hidden; cursor:pointer;
  transition:flex .5s cubic-bezier(0.4,0,0.2,1); position:relative;
}
.proj-item.open { flex:4; }
.proj-item-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s; }
.proj-item:hover .proj-item-bg { transform:scale(1.03); }
.proj-item-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,30,80,.88) 0%,rgba(15,30,80,.2) 60%,transparent 100%); }
.proj-item-label {
  position:absolute; writing-mode:vertical-rl; text-orientation:mixed;
  bottom:1.5rem; left:50%; transform:translateX(-50%) rotate(180deg);
  color:rgba(255,255,255,.8); font-size:.75rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; transition:opacity .3s;
}
.proj-item.open .proj-item-label { opacity:0; }
.proj-item-content {
  position:absolute; bottom:0; left:0; right:0; padding:2rem;
  opacity:0; transform:translateY(12px); transition:opacity .4s .1s, transform .4s .1s;
}
.proj-item.open .proj-item-content { opacity:1; transform:translateY(0); }

/* ── Carrossel de parceiros (home) ────────────────────────── */
.carousel-track { display:flex; gap:4rem; align-items:center; will-change:transform; }
.carousel-wrap { overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); }

/* ── Dots do slider (home) ────────────────────────────────── */
.slider-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:background .2s, transform .2s; }
.slider-dot.active { background:#fff; transform:scale(1.3); }

/* ── Tipografia do corpo ──────────────────────────────────── */
.text-body    { color:var(--color-muted); line-height:1.85; }
.text-closing { font-size:1.125rem; color:var(--color-muted); line-height:1.9; }

/* ── Ícones ───────────────────────────────────────────────── */
.card-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mvp-icon  { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; }

/* ── Texto dos cards ──────────────────────────────────────── */
.card-text { font-size:.9375rem; color:var(--color-text-card); line-height:1.65; margin:0; }
.card-body { font-size:.9375rem; color:var(--color-muted); line-height:1.75; margin:0; }

/* ── MVP (missão, visão, propósito) ───────────────────────── */
.mvp-title { font-weight:700; font-size:1.25rem; color:var(--color-heading); margin-bottom:.875rem; }

/* ── Bullet dot ───────────────────────────────────────────── */
.bullet-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:8px; }

/* ── Timeline (instituto) ─────────────────────────────────── */
.timeline-item { position:relative; padding-left:2.5rem; }
.timeline-item::before {
  content:''; position:absolute; left:0; top:8px; bottom:-2rem;
  width:2px;
  background:linear-gradient(180deg,
    var(--color-blue)  0%,
    var(--color-green) 33%,
    var(--color-pink)  66%,
    var(--color-sky)   100%
  );
}
.timeline-item:last-child::before { display:none; }
.timeline-num   { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5rem; }
.timeline-title { font-weight:700; font-size:1.125rem; color:#fff; margin-bottom:.625rem; }
.timeline-body  { font-size:.9375rem; color:var(--color-on-dark); line-height:1.75; margin:0; }
.timeline-dot {
  position:absolute; left:-5px; top:6px; width:12px; height:12px;
  border-radius:50%; background:var(--color-blue); border:2px solid #fff;
  box-shadow:0 0 0 2px var(--color-blue);
}