:root {
  --bg: #f7efe3;
  --panel: rgba(255, 250, 242, 0.92);
  --panel-2: rgba(251, 242, 229, 0.96);
  --text: #3d2d20;
  --muted: #735a45;
  --line: rgba(123, 92, 62, 0.18);
  --accent: #bf7b30;
  --accent-2: #7f9b6f;
  --shadow: 0 22px 52px rgba(88, 59, 32, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(180deg, #fbf6ee 0%, #f6eddc 48%, #f3e7d4 100%);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
.wrap { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.section { padding: 88px 0; position: relative; }
.section-dark {
  background: linear-gradient(180deg, rgba(251,242,229,.86) 0%, rgba(246,234,216,.96) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { text-align: center; margin-bottom: 34px; }
.section-head.left { text-align: left; }
.eyebrow {
  display: inline-block;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--accent);
  margin-bottom: 14px;
}
h1, h2, h3, .brand { font-family: "Cormorant Garamond", serif; }
h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .96; margin: 0 0 18px; }
h2 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; margin: 0; }
h3 { font-size: 1.75rem; margin: 0 0 8px; }
p { margin: 0 0 18px; color: var(--muted); }
.hero {
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,248,239,.32), rgba(245,233,214,.78)),
    radial-gradient(circle at 20% 20%, rgba(191,123,48,.18), transparent 30%),
    url('https://commons.wikimedia.org/wiki/Special:FilePath/Lagoa%20de%20Parangaba%2C%20Fortaleza-%20CE.jpg') center/cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,249,241,.06) 0%, rgba(249,239,225,.22) 45%, rgba(247,239,227,.94) 100%);
}
.hero-overlay { position: absolute; inset: 0; backdrop-filter: saturate(.9); }
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
}
.brand { font-size: 1.8rem; letter-spacing: .12em; }
.nav-links { display: flex; gap: 1.4rem; font-size: .95rem; }
.nav-links a { color: #4e3826; opacity: .9; }
.nav-links a:hover { opacity: 1; }
.hero-content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}
.lead { font-size: 1.15rem; max-width: 680px; color: #5b4533; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: .25s ease;
  font-weight: 600;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #f1c892); color: #1f1712; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(215,168,110,.2); }
.btn-ghost { border-color: rgba(95,64,39,.18); background: rgba(255,255,255,.58); }
.btn-ghost:hover { background: rgba(255,255,255,.82); }
.intro-grid, .stats, .cards, .visit-grid, .footer-grid, .map-grid { display: grid; gap: 24px; }
.intro-grid { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(4, 1fr); }
.stat-card, .panel, .info-card, .visit-step, .map-frame, .gallery-card, .quote-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,248,240,.66));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stat-card {
  border-radius: 24px;
  padding: 24px;
  text-align: center;
}
.stat-card strong { display: block; font-size: 1.7rem; font-family: "Cormorant Garamond", serif; margin-bottom: 8px; }
.stat-card span { color: var(--muted); font-size: .95rem; }
.timeline {
  position: relative;
  display: grid;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(215,168,110,.35);
}
.timeline-item {
  position: relative;
  margin-left: 44px;
  padding: 18px 22px 18px 24px;
  border-radius: 20px;
  background: rgba(255,252,247,.88);
  border: 1px solid var(--line);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 30px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(215,168,110,.13);
}
.year { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-auto-flow: dense;
}
.gallery-card {
  border-radius: 24px;
  overflow: hidden;
}
.gallery-card img { height: 100%; object-fit: cover; min-height: 300px; }
.gallery-card.tall { grid-row: span 2; }
.gallery-card.wide { grid-column: span 2; }
.gallery-card figcaption { padding: 16px 18px 18px; font-size: .95rem; color: var(--muted); }
.section-image {
  background:
    linear-gradient(180deg, rgba(9,7,5,.55), rgba(9,7,5,.55)),
    url('https://commons.wikimedia.org/wiki/Special:FilePath/Igreja%20Matriz%20do%20Bom%20Jesus%20dos%20Aflitos%20-%20panoramio.jpg') center/cover fixed no-repeat;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quote-panel { border-radius: 32px; padding: 38px; backdrop-filter: blur(4px); }
.quote { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; color: #fff0dd; text-align: center; margin: 0; }
.two-col { display: grid; grid-template-columns: 1.25fr .85fr; gap: 28px; align-items: start; }
.panel { border-radius: 28px; padding: 28px; }
.panel ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.cards { grid-template-columns: repeat(3, 1fr); }
.info-card { border-radius: 26px; padding: 28px; }
.visit-grid { grid-template-columns: repeat(4, 1fr); }
.visit-step {
  border-radius: 26px;
  padding: 24px;
  position: relative;
}
.visit-step span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(215,168,110,.12);
  border: 1px solid rgba(215,168,110,.28);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 16px;
}
.map-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.map-frame {
  border-radius: 26px;
  overflow: hidden;
  min-height: 420px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }
.footer {
  padding: 42px 0 60px;
  border-top: 1px solid var(--line);
  background: #0b0907;
}
.footer-grid { grid-template-columns: 1.3fr .7fr .8fr; }
.footer h4 { margin: 0 0 12px; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.footer ul { list-style: none; margin: 0; padding: 0; color: var(--muted); }
.footer-brand { margin-bottom: 12px; }
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.film-grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .08;
  z-index: 999;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.32) 0.7px, transparent 1px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,.2) 0.7px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.18) 0.7px, transparent 1px);
  background-size: 6px 6px, 7px 7px, 8px 8px;
  mix-blend-mode: soft-light;
}
@media (max-width: 1024px) {
  .stats, .cards, .visit-grid, .footer-grid, .map-grid, .two-col, .intro-grid { grid-template-columns: 1fr 1fr; }
  .masonry { grid-template-columns: 1fr 1fr; }
  .gallery-card.wide { grid-column: span 2; }
}
@media (max-width: 720px) {
  .nav { flex-direction: column; gap: 14px; }
  .nav-links { flex-wrap: wrap; justify-content: center; }
  .stats, .cards, .visit-grid, .footer-grid, .map-grid, .two-col, .intro-grid, .masonry { grid-template-columns: 1fr; }
  .gallery-card.wide, .gallery-card.tall { grid-column: auto; grid-row: auto; }
  .timeline-item { margin-left: 28px; }
  .timeline::before { left: 12px; }
  .timeline-item::before { left: -22px; }
  .section { padding: 72px 0; }
  .quote-panel { padding: 24px; }
}


/* === Upgrade documental + divertido === */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(215,168,110,.06), transparent 20%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.04), transparent 18%),
    radial-gradient(circle at 70% 80%, rgba(215,168,110,.05), transparent 22%);
  z-index:0;
}
main, .nav, .hero-content, .footer { position: relative; z-index: 1; }

.floating-orb{
  position: fixed;
  border-radius: 50%;
  pointer-events:none;
  filter: blur(14px);
  opacity:.22;
  z-index:0;
  animation: drift 16s ease-in-out infinite;
}
.orb-1{ width:170px; height:170px; background: rgba(215,168,110,.16); top:14%; left:3%; }
.orb-2{ width:220px; height:220px; background: rgba(255,255,255,.08); top:55%; right:4%; animation-duration: 22s; }
.orb-3{ width:120px; height:120px; background: rgba(143,103,68,.22); bottom:12%; left:12%; animation-duration: 18s; }

.nav-links a,
.btn,
.brand,
.gallery-card,
.timeline-item,
.stat-card,
.info-card,
.visit-step,
.author-credit a{
  transition: transform .35s ease, box-shadow .35s ease, color .35s ease, background-color .35s ease, border-color .35s ease, opacity .35s ease;
}

.nav-links a{
  position:relative;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s ease;
}
.nav-links a:hover{
  transform:translateY(-1px);
  color:#8c5520;
}
.nav-links a:hover::after{ transform:scaleX(1); }

.brand{
  text-shadow: 0 0 18px rgba(215,168,110,.08);
  animation: glowBreath 5s ease-in-out infinite;
}

h1{
  animation: titleRise 1.15s cubic-bezier(.2,.8,.2,1) both;
}
.lead{
  animation: fadeSlide 1.5s .18s ease both;
}
.hero-actions{
  animation: fadeSlide 1.7s .32s ease both;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.03), transparent 25%, transparent 75%, rgba(255,255,255,.03));
  mix-blend-mode: screen;
  animation: softPan 18s linear infinite;
}
.hero-content{
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

.playful-card:hover,
.lift-card:hover{
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 28px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(215,168,110,.10) inset;
}
.tilt-card:hover{
  transform: rotate(-.5deg) translateY(-6px);
}
.gallery-card img{
  transition: transform .9s ease, filter .6s ease;
}
.gallery-card:hover img{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.03);
}
.gallery-card figcaption{
  position: relative;
  overflow:hidden;
}
.gallery-card figcaption::before{
  content:"";
  position:absolute;
  inset:auto -40% 0 -40%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,168,110,.6), transparent);
  animation: shimmerLine 4s linear infinite;
}

.stat-card strong{
  background: linear-gradient(180deg, #fff3de, #d9af78);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.quote-panel,
.pulse-frame{
  position:relative;
  overflow:hidden;
}
.quote-panel::after,
.pulse-frame::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  border:1px solid rgba(215,168,110,.12);
  animation: pulseBorder 3.5s ease-in-out infinite;
  pointer-events:none;
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:2;
  width:42px;
  height:68px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background: rgba(255,255,255,.035);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.scroll-cue span{
  width:6px;
  height:14px;
  border-radius:999px;
  background: linear-gradient(180deg, #f7e6ce, var(--accent));
  animation: scrollDot 1.7s ease-in-out infinite;
}

.author-credit{
  padding: 10px 0 0;
}
.credit-label{
  display:inline-block;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:.72rem;
  color: var(--accent);
  margin-bottom: 10px;
}
.credit-signature{
  margin:0 0 6px;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height:1;
}
.credit-signature a{
  color:#6a3b14;
  text-shadow: 0 0 20px rgba(215,168,110,.12);
}
.credit-signature a:hover{
  color:#fff7eb;
  transform: translateY(-1px);
}
.credit-note{
  color: var(--muted);
  opacity:.85;
  font-size:.92rem;
  display:block;
  max-width: 320px;
}

.reveal{
  opacity:0;
  transform: translateY(26px) scale(.985);
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@keyframes titleRise{
  from{ opacity:0; transform: translateY(36px) scale(.98); letter-spacing:.03em; }
  to{ opacity:1; transform:none; letter-spacing:0; }
}
@keyframes fadeSlide{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0); }
  33%{ transform:translate3d(18px,-14px,0); }
  66%{ transform:translate3d(-12px,16px,0); }
}
@keyframes glowBreath{
  0%,100%{ opacity:1; text-shadow:0 0 10px rgba(215,168,110,.08); }
  50%{ opacity:.96; text-shadow:0 0 24px rgba(215,168,110,.16); }
}
@keyframes softPan{
  0%{ transform:translateX(-10%); opacity:.35; }
  50%{ transform:translateX(6%); opacity:.15; }
  100%{ transform:translateX(-10%); opacity:.35; }
}
@keyframes shimmerLine{
  0%{ transform:translateX(-35%); opacity:.2; }
  50%{ opacity:.85; }
  100%{ transform:translateX(35%); opacity:.2; }
}
@keyframes pulseBorder{
  0%,100%{ opacity:.35; box-shadow: 0 0 0 0 rgba(215,168,110,0); }
  50%{ opacity:.85; box-shadow: 0 0 0 8px rgba(215,168,110,.03); }
}
@keyframes scrollDot{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(20px); opacity:.35; }
  100%{ transform:translateY(0); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


/* Clareza visual + imagens do bairro distribuídas pela página */
.intro,
.gallery-block,
.map-section,
.visit,
.curiosities {
  position: relative;
  overflow: hidden;
}
.intro::before,
.gallery-block::before,
.map-section::before,
.visit::before,
.curiosities::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  opacity: .08;
  filter: saturate(.95);
}
.intro::before {
  background-image: url('https://commons.wikimedia.org/wiki/Special:FilePath/Igreja%20Matriz%20do%20Bom%20Jesus%20dos%20Aflitos%20-%20panoramio.jpg');
}
.gallery-block::before {
  background-image: url('https://commons.wikimedia.org/wiki/Special:FilePath/Lagoa%20de%20Parangaba%20revitalizada%202012%20-%20panoramio.jpg');
}
.visit::before {
  background-image: url('https://commons.wikimedia.org/wiki/Special:FilePath/Pra%C3%A7a%20dos%20Caboclinhos%2C%20Lagoa%20de%20Parangaba%20-%20panoramio.jpg');
}
.map-section::before {
  background-image: url('https://commons.wikimedia.org/wiki/Special:FilePath/Terminal%20Parangaba%2003.jpg');
}
.curiosities::before {
  background-image: url('https://commons.wikimedia.org/wiki/Special:FilePath/Esta%C3%A7%C3%A3o%20Parangaba%20plataforma%20VLT%203.jpg');
}

p { color: var(--muted); }
.hero-content, .nav, .section > .wrap, .section.wrap, .footer .wrap { position: relative; z-index: 1; }

.gallery-card,
.info-card,
.visit-step,
.map-frame,
.quote-panel,
.stat-card,
.timeline-item {
  backdrop-filter: blur(3px);
}
.gallery-card figcaption {
  background: rgba(255, 248, 239, .92);
  color: #5f4633;
}
.footer {
  background: linear-gradient(180deg, rgba(246,234,216,.95), rgba(240,225,202,.98));
  border-top: 1px solid var(--line);
}
.footer p, .footer li, .footer h4 { color: #6a523e; }
.footer-brand { color: #5d3c23; }

body::before{
  background:
    radial-gradient(circle at 15% 20%, rgba(191,123,48,.07), transparent 20%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at 70% 80%, rgba(127,155,111,.08), transparent 22%);
}

.floating-orb{ opacity:.18; filter: blur(16px); }
.orb-1{ background: rgba(191,123,48,.18); }
.orb-2{ background: rgba(255,255,255,.22); }
.orb-3{ background: rgba(127,155,111,.18); }

.scroll-cue{
  border:1px solid rgba(115,90,69,.2);
  background: rgba(255,255,255,.55);
}

@media (max-width: 860px){
  #jacare-guide{ display:none; }
}


/* Jacaré cartoon flutuando pela tela */
#jacare-guide{
  position: fixed;
  left: 24px;
  top: 24px;
  width: 210px;
  height: 150px;
  pointer-events: auto;
  z-index: 9999;
  transform: translate3d(0,0,0);
  user-select: none;
}
.jacare-creature{
  position: absolute;
  inset: 18px 0 0 0;
  transform-origin: center center;
  transition: transform .2s ease;
  will-change: transform;
}
.jacare-svg{
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 16px rgba(62,45,25,.16));
}
.jacare-shadow{
  position:absolute;
  left: 42px;
  right: 42px;
  bottom: 18px;
  height: 20px;
  border-radius: 50%;
  background: rgba(59, 42, 27, .15);
  filter: blur(8px);
}
.jacare-bubble{
  position:absolute;
  top: -6px;
  left: 84px;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #5d3a1c;
  border: 1px solid rgba(95,64,39,.12);
  font-size: .76rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(85,56,30,.10);
  white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.jacare-bubble::after{
  content:"";
  position:absolute;
  left: 16px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.95);
  border-right: 1px solid rgba(95,64,39,.12);
  border-bottom: 1px solid rgba(95,64,39,.12);
  transform: rotate(45deg);
}
.jacare-eye{
  transform-origin: center;
  transition: transform .12s linear;
}
#jacare-guide.is-flipped .jacare-creature{
  transform: scaleX(-1);
}
#jacare-guide.is-dancing .jacare-creature{
  animation: jacareDance 1.2s ease-in-out 1;
}
#jacare-guide.is-dancing .jacare-arm-left{
  animation: jacareArmLeft .36s ease-in-out 3 alternate;
}
#jacare-guide.is-dancing .jacare-arm-right{
  animation: jacareArmRight .36s ease-in-out 3 alternate;
}
#jacare-guide.is-dancing .jacare-bubble{
  transform: translateY(-4px) scale(1.04);
}
@keyframes jacareDance{
  0%{ transform: translateY(0) rotate(0deg); }
  15%{ transform: translateY(-10px) rotate(-7deg); }
  30%{ transform: translateY(0) rotate(7deg); }
  45%{ transform: translateY(-10px) rotate(-6deg); }
  60%{ transform: translateY(0) rotate(6deg); }
  75%{ transform: translateY(-8px) rotate(-4deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}
@keyframes jacareArmLeft{
  from{ transform: rotate(0deg); transform-origin: 90px 104px; }
  to{ transform: rotate(-16deg); transform-origin: 90px 104px; }
}
@keyframes jacareArmRight{
  from{ transform: rotate(0deg); transform-origin: 150px 106px; }
  to{ transform: rotate(16deg); transform-origin: 150px 106px; }
}
@media (max-width: 860px){
  #jacare-guide{ display:none; }
}