/* Portales & Lisboa – só o que o Bootstrap não faz: paleta, fontes e animações */

/* Paleta aplicada nas variáveis do próprio Bootstrap (tema claro e escuro) */
:root {
  --bs-body-font-family: 'Jost', system-ui, sans-serif;
  --bs-body-bg: #fbf8f1;   --bs-body-bg-rgb: 251, 248, 241;
  --bs-body-color: #1b1410; --bs-body-color-rgb: 27, 20, 16;
  --bs-secondary-bg: #f3ecdd; --bs-secondary-bg-rgb: 243, 236, 221;
  --bs-primary: #a8741a;   --bs-primary-rgb: 168, 116, 26;
  --bs-dark: #1b1410;      --bs-dark-rgb: 27, 20, 16;
  --bs-border-radius-xl: 1.25rem;
  scroll-padding-top: 5.5rem;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #1b1410;   --bs-body-bg-rgb: 27, 20, 16;
  --bs-body-color: #fbf8f1; --bs-body-color-rgb: 251, 248, 241;
  --bs-secondary-bg: #120d09; --bs-secondary-bg-rgb: 18, 13, 9;
  --bs-tertiary-bg: #2a1f17;  --bs-tertiary-bg-rgb: 42, 31, 23;
  --bs-border-color: rgba(217, 173, 91, .25);
  --bs-primary: #d9ad5b;   --bs-primary-rgb: 217, 173, 91;
}
h1, h2, h3, h4, .font-serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-script { font-family: 'Great Vibes', cursive; }

/* Botões: usa os botões do Bootstrap, só troca as cores */
.btn-primary { --bs-btn-bg: #a8741a; --bs-btn-border-color: #a8741a; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8a5f12; --bs-btn-hover-border-color: #8a5f12; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8a5f12; --bs-btn-active-border-color: #8a5f12; --bs-btn-active-color: #fff; }
.btn-outline-primary { --bs-btn-color: #a8741a; --bs-btn-border-color: #a8741a;
  --bs-btn-hover-bg: #a8741a; --bs-btn-hover-border-color: #a8741a; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8a5f12; --bs-btn-active-border-color: #8a5f12; --bs-btn-active-color: #fff; }
/* Link ativo (o Bootstrap marca .active conforme a rolagem): sublinhado dourado animado */
.navbar .nav-link { position: relative; transition: color .3s; }
.navbar .nav-link::after { content: ''; position: absolute; left: 50%; bottom: .1rem; width: 0; height: 2px; border-radius: 2px; background: #a8741a; transform: translateX(-50%); transition: width .3s ease; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: 40%; }
.navbar { --bs-navbar-color: #2a241d; --bs-navbar-hover-color: #a8741a; --bs-navbar-active-color: #a8741a; backdrop-filter: blur(16px) saturate(170%); }

/* Hero */
.hero { background: radial-gradient(60% 50% at 85% 0%, rgba(168, 116, 26, .3), transparent 70%),
                    radial-gradient(50% 50% at 0% 100%, rgba(217, 173, 91, .15), transparent 70%), #1b1410; }
.hero-mark { width: min(78vw, 760px); fill: rgba(217, 173, 91, .07); animation: float 10s ease-in-out infinite; pointer-events: none; }
.bounce { display: inline-block; animation: bounce 1.6s ease-in-out infinite; }
@keyframes float  { 50% { translate: 0 -16px; } }
@keyframes bounce { 50% { translate: 0 6px; } }

/* Entrada ao rolar: rápida e curta (o JS põe .reveal e depois .in) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.reveal[data-reveal="left"]  { transform: translateX(-32px); }
.reveal[data-reveal="right"] { transform: translateX(32px); }
.reveal.in { opacity: 1; transform: none; }

/* Hover dos cards */
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: var(--bs-box-shadow) !important; }

/* Carrossel */
.slide { height: clamp(380px, 60vh, 560px); }
.slide-photo { width: auto; height: auto; max-width: 100%; max-height: min(340px, 78%); }
.carousel-control-prev, .carousel-control-next { width: 3rem; }
.carousel-item.active .slide-img { animation: zoom 7s ease-out both; }
.carousel-item.active .carousel-caption > * { animation: rise .7s .25s cubic-bezier(.2, .8, .2, 1) both; }
.carousel-caption { left: 0; right: 0; bottom: 0; padding: 4rem 2rem 3.2rem; text-align: start; background: linear-gradient(transparent, rgba(20, 12, 6, .8)); }
@media (max-width: 575.98px) { .carousel-caption { padding: 3rem 1.25rem 2.8rem; } }
@keyframes zoom { from { scale: 1.06; } }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
}