/* ===== Miacatlán · H. Ayuntamiento 2025-2027 ===== */

:root{
  --gold: #c79a52;
  --gold-light: #e2c587;
  --gold-deep: #9c7531;
  --wine: #9c1f44;
  --wine-deep: #6f1530;
  --olive: #74795a;
  --olive-deep: #4f5440;
  --cream: #faf6ee;
  --cream-2: #f2ead9;
  --ink: #2b2620;
  --paper: #fffdf9;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  cursor: default;
}

::selection{ background: var(--gold); color: var(--paper); }

/* film grain overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow{
  position: fixed; width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(199,154,82,.10) 0%, rgba(199,154,82,0) 70%);
  transform: translate(-50%,-50%);
  left: 50%; top: 50%;
  transition: left .25s ease-out, top .25s ease-out;
}

/* ===== nav dots ===== */
.nav{
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 60; display:flex; flex-direction: column; gap: 16px;
}
.nav__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(43,38,32,.18);
  border: 1px solid rgba(43,38,32,.25);
  transition: background .3s, transform .3s;
}
.nav__dot:hover{ background: var(--wine); transform: scale(1.4); }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(199,154,82,.22), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(156,31,68,.16), transparent 55%),
    linear-gradient(180deg, #fffdf9 0%, #faf6ee 55%, #f3ead9 100%);
}

.hero__arch{
  position:absolute; left:50%; top:8%; bottom:18%;
  transform: translateX(-50%);
  width: min(78vw, 620px);
  pointer-events: none;
}
.hero__arch svg{ width:100%; height:100%; }
.hero__arch path{
  fill: none;
  stroke: url(#none);
  stroke: var(--wine);
  stroke-width: 1.4;
  opacity: .35;
  filter: drop-shadow(0 0 18px rgba(156,31,68,.15));
}

.hero__rings{ position:absolute; inset:0; pointer-events:none; }
.hero__rings span{
  position:absolute; left:50%; top:42%;
  border-radius:50%;
  border: 1px solid rgba(199,154,82,.35);
  transform: translate(-50%,-50%);
  animation: pulse 7s ease-in-out infinite;
}
.hero__rings span:nth-child(1){ width: 360px; height:360px; animation-delay: 0s; }
.hero__rings span:nth-child(2){ width: 540px; height:540px; animation-delay: 1.2s; border-color: rgba(116,121,90,.3); }
.hero__rings span:nth-child(3){ width: 720px; height:720px; animation-delay: 2.4s; border-color: rgba(156,31,68,.18); }

@keyframes pulse{
  0%,100%{ opacity:.5; transform: translate(-50%,-50%) scale(1); }
  50%{ opacity:.9; transform: translate(-50%,-50%) scale(1.035); }
}

.hero__content{
  position: relative; z-index: 5;
  display:flex; flex-direction:column; align-items:center;
  animation: rise 1.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise{
  from{ opacity:0; transform: translateY(36px); }
  to{ opacity:1; transform: translateY(0); }
}

.hero__logo{
  width: min(58vw, 300px);
  filter: drop-shadow(0 18px 40px rgba(111,21,48,.18));
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

.hero__ridges{
  position:absolute; left:0; right:0; bottom:0; width:100%; height: 18vh; min-height: 110px;
}
.hero__ridges svg{ width:100%; height:100%; }
.ridge{ }
.ridge--1{ fill: var(--olive); opacity:.22; }
.ridge--2{ fill: var(--olive-deep); opacity:.32; }
.ridge--3{ fill: var(--ink); opacity:.85; }

.scrollcue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  width: 22px; height: 36px; border: 1.5px solid rgba(43,38,32,.4); border-radius: 12px;
  z-index: 6;
}
.scrollcue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; border-radius: 2px;
  background: var(--wine); transform: translateX(-50%);
  animation: scrolldown 1.8s ease-in-out infinite;
}
@keyframes scrolldown{
  0%{ opacity:1; top:6px; }
  70%{ opacity:0; top:18px; }
  100%{ opacity:0; top:6px; }
}

/* ============ STRIP DIVIDER ============ */
.strip{
  position: relative;
  background: var(--ink);
  height: 130px;
  overflow: hidden;
}
.strip__svg{ width:100%; height:100%; }
.strip__svg path{
  fill:none; stroke: var(--gold); stroke-width: 1.2; opacity:.45;
}
.strip__diamond{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg);
  width: 14px; height:14px;
  background: var(--wine);
  box-shadow: 0 0 0 6px rgba(156,31,68,.15), 0 0 24px rgba(199,154,82,.4);
}

/* ============ BENTO ============ */
.bento{
  background: var(--cream-2);
  padding: clamp(40px, 8vw, 100px) clamp(20px, 6vw, 80px);
}
.bento__grid{
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  gap: 18px;
}
.card{
  position: relative;
  border-radius: 22px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--paper), #f4ecdc);
  border: 1px solid rgba(43,38,32,.06);
  box-shadow: 0 10px 30px rgba(43,38,32,.06);
  color: var(--wine-deep);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, color .45s;
}
.card:nth-child(odd){ color: var(--olive-deep); }
.card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 44px rgba(43,38,32,.14);
  color: var(--wine);
}
.card__icon{ width: 38%; height: 38%; transition: transform .5s; }
.card:hover .card__icon{ transform: scale(1.15) rotate(-3deg); }

.card--big{ grid-column: span 2; grid-row: span 2; background: linear-gradient(155deg, #fffdf9, #f0e4c8); }
.card--big .card__icon{ width: 30%; height:30%; }
.card--tall{ grid-row: span 2; }

.card__glow{
  position:absolute; width: 220px; height: 220px; border-radius:50%;
  background: radial-gradient(circle, rgba(156,31,68,.16), transparent 70%);
  top: -60px; right: -60px;
}

@media (max-width: 780px){
  .bento__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .card--big{ grid-column: span 2; grid-row: span 1; aspect-ratio: 2/1; height:auto; }
  .card--tall{ grid-row: span 1; }
}

/* ============ MOTTO ============ */
.motto{
  background: var(--paper);
  padding: clamp(70px, 12vw, 140px) 24px;
  text-align: center;
  position: relative;
}
.motto__text{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  display:flex; flex-direction: column; align-items:center; gap: 6px;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  color: var(--ink);
}
.motto__text span:nth-child(1){ color: var(--wine); }
.motto__text span:nth-child(3){ color: var(--olive-deep); }
.motto__accent{
  font-family: var(--sans); font-style: normal; font-weight: 300;
  font-size: .5em; color: var(--gold-deep) !important;
  margin: 6px 0;
}
.motto__line{
  width: 70px; height: 3px; margin: 36px auto 0;
  background: linear-gradient(90deg, var(--wine), var(--gold));
  border-radius: 3px;
}

/* ============ PANORAMA ============ */
.panorama{
  position: relative;
  height: 70vh; min-height: 460px;
  background: linear-gradient(180deg, #fbf3e0 0%, #f4e3c2 55%, #eccf9e 100%);
  overflow: hidden;
}
.panorama__svg{ position:absolute; inset:0; width:100%; height:100%; }
.layer--1{ fill: var(--gold-light); opacity:.55; }
.layer--2{ fill: var(--gold); opacity:.7; }
.layer--3{ fill: var(--gold-deep); }
.rows path{ fill:none; stroke: var(--olive); stroke-width: 2; opacity:.5; }

.panorama__emblem{
  position:absolute; left:50%; top:38%; transform: translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
}
.panorama__ring{
  position:absolute; width: 230px; height:230px; border-radius:50%;
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(43,38,32,.25), 0 0 0 10px rgba(255,253,249,.5);
}
.panorama__mark{
  position:relative; width: 130px; filter: drop-shadow(0 6px 10px rgba(43,38,32,.18));
}

@media (max-width: 600px){
  .panorama__ring{ width: 170px; height:170px; }
  .panorama__mark{ width: 96px; }
}

/* ============ FOOTER ============ */
.foot{
  background: var(--ink);
  padding: clamp(50px, 8vw, 90px) 24px clamp(30px,5vw,50px);
  display:flex; flex-direction:column; align-items:center; gap: 30px;
}
.foot__logo{ width: min(80vw, 360px); filter: brightness(0) invert(1) opacity(.92); }
.foot__rule{ width: 50%; max-width: 360px; height:1px; background: rgba(255,255,255,.15); }
.foot__dots{ display:flex; gap: 10px; }
.foot__dots span{ width:6px; height:6px; border-radius:50%; background: var(--gold); opacity:.7; }
.foot__dots span:nth-child(2){ background: var(--wine); }
.foot__dots span:nth-child(3){ background: var(--olive); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }