:root{
  --brand:#1E5F5A;
  --brand2:#2B7C73;

  --cream:#F6F1EA;
  --cream2:#EFE7DC;

  --ink:#13201E;
  --muted:#50615E;

  --glass: rgba(246,241,234,.62);
  --glass2: rgba(246,241,234,.40);
  --stroke: rgba(19,32,30,.14);

  --shadow: 0 18px 60px rgba(0,0,0,.12);
  --shadow2: 0 16px 34px rgba(0,0,0,.10);

  --r: 26px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

:root.dark{
  --cream:#0F1413;
  --cream2:#121917;
  --ink:#ECF3F2;
  --muted:#B7C6C3;

  --glass: rgba(20,26,25,.62);
  --glass2: rgba(20,26,25,.42);
  --stroke: rgba(255,255,255,.12);

  --shadow: 0 18px 70px rgba(0,0,0,.40);
  --shadow2: 0 16px 44px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink);
  background: var(--cream);
  overflow-x:hidden;
}

.container{
  width:100%;
  max-width: 1160px;
  padding: 0 18px;
  margin: 0 auto;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 560px at 20% 10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 560px at 90% 0%, color-mix(in srgb, var(--brand2) 16%, transparent), transparent 62%),
    radial-gradient(820px 520px at 70% 90%, rgba(0,0,0,.06), transparent 65%),
    linear-gradient(180deg, var(--cream), var(--cream2));
}
.bg__blob{
  position:absolute;
  width: 560px;
  height: 560px;
  border-radius: 999px;
  filter: blur(40px);
  opacity:.30;
  mix-blend-mode: multiply;
  animation: float 10s var(--ease) infinite;
}
:root.dark .bg__blob{ opacity:.24; mix-blend-mode: screen; }
.bg__blob--a{
  left:-160px; top: 120px;
  background: radial-gradient(circle at 30% 30%, var(--brand2), transparent 60%);
}
.bg__blob--b{
  right:-220px; top: -120px;
  background: radial-gradient(circle at 30% 30%, var(--brand), transparent 60%);
  animation-delay: -3s;
}
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,18px,0) scale(1.02); }
}
.bg__grid{
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:
    linear-gradient(to right, rgba(19,32,30,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19,32,30,.10) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 30% 20%, #000 0 55%, transparent 70%);
}
:root.dark .bg__grid{
  opacity:.10;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
}
.bg__noise{
  position:absolute;
  inset:0;
  opacity:.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
:root.dark .bg__noise{ mix-blend-mode: screen; opacity:.08; }

.h1{
  font-family: Fraunces, serif;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.04;
  margin: 12px 0 12px;
  letter-spacing: -.03em;
}
.h1__accent{
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.h2{
  font-family: Fraunces, serif;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.12;
  margin: 10px 0 10px;
  letter-spacing:-.02em;
}
.kicker{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 80%, var(--ink) 0%);
}
.muted{ color: var(--muted); line-height: 1.7; }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  border: 1px solid var(--stroke);
  padding: 2px 6px;
  border-radius: 10px;
}

.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
}
.lift{
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background: color-mix(in srgb, var(--cream) 76%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}
.header__inner{
  height: 68px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--ink);
}
.brand__mark{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, var(--brand2), var(--brand));
  box-shadow: var(--shadow2);

  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.brand__icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

.brand__mark::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: rotate(25deg) translateX(-40%);
  animation: brandSheen 3.4s ease-in-out infinite;
  opacity: .8;
}

.brand__text{ font-weight: 900; letter-spacing:-.02em; }
.brand__text b{ color: var(--brand); }

@keyframes brandSheen{
  0%{ transform: rotate(25deg) translateX(-60%); opacity:0; }
  25%{ opacity:.55; }
  55%{ opacity:.20; }
  100%{ transform: rotate(25deg) translateX(60%); opacity:0; }
}

.nav{ display:flex; align-items:center; gap: 18px; }
.nav__link{
  color: var(--muted);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  position:relative;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; bottom:-10px;
  width:0;
  height:2px;
  background: var(--brand);
  transition: width .25s var(--ease);
  border-radius: 99px;
}
.nav__link:hover{ color: var(--ink); }
.nav__link:hover::after{ width: 100%; }

.header__actions{ display:flex; align-items:center; gap: 10px; }
.hide-sm{ display:inline-flex; }

.icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 80%, transparent);
  box-shadow: var(--shadow2);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .2s var(--ease);
  color: var(--ink);
}
.icon-btn:hover{ transform: translateY(-1px); }

@media (max-width: 820px){
  .nav--desktop{ display:none; }
  .hide-sm{ display:none; }
}

.mobile{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.32);
  opacity:0;
  pointer-events:none;
  transition: .2s var(--ease);
}
.mobile.is-open{ opacity:1; pointer-events:auto; }
.mobile__panel{
  position:absolute;
  right: 12px;
  top: 78px;
  width: min(92vw, 360px);
  border-radius: 22px;
  overflow:hidden;
}
.mobile__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--stroke);
}
.mobile__title{ font-weight: 950; }
.mobile__links{ display:grid; gap: 6px; padding: 12px 14px; }
.mobile__link{
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration:none;
  color: var(--ink);
  font-weight: 900;
}
.mobile__link:hover{ background: color-mix(in srgb, var(--glass) 85%, transparent); }
.mobile__footer{
  border-top: 1px solid var(--stroke);
  padding: 12px 14px;
  display:grid;
  gap: 10px;
}

.btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  text-decoration:none;
  font-weight: 950;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor:pointer;
  transition: transform .2s var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  background: radial-gradient(circle at 30% 30%, var(--brand2), var(--brand));
  color: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: var(--shadow2);
}
.btn--soft{
  background: color-mix(in srgb, var(--glass) 82%, transparent);
  color: var(--ink);
}
.w-100{ width:100%; }

.section{ padding: 74px 0; }
.row{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; }
.title{ max-width: 860px; }

.hero{ padding: 32px 0 44px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
}

.pill{
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 12px;
}
.pill i{ color: var(--brand); }

.stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  max-width: 560px;
}
@media (max-width: 560px){ .stats{ grid-template-columns: 1fr; } }

.stat{
  border-radius: 20px;
  padding: 12px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.stat__icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 12%, var(--glass) 88%);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--stroke) 78%);
  display:grid;
  place-items:center;
  box-shadow: var(--shadow2);
}
.stat__icon i{ color: var(--brand); font-size: 18px; }
.stat__num{ font-weight: 980; font-size: 22px; letter-spacing:-.02em; }
.stat__label{ font-weight: 900; font-size: 12px; color: var(--muted); margin-top: 2px; }

.hero__right{ display:grid; gap: 12px; }

.hero-card{ border-radius: var(--r); padding: 16px; }
.hero-card__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.hero-card__title{ display:flex; align-items:center; gap: 10px; }
.badge{
  width: 42px; height: 42px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 14%, var(--glass) 86%);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--stroke) 76%);
  display:grid;
  place-items:center;
}
.badge i{ color: var(--brand); font-size: 18px; }
.small{ font-weight: 900; font-size: 12px; color: var(--muted); }
.big{ font-weight: 980; font-size: 18px; letter-spacing:-.02em; }
.chip{
  text-decoration:none;
  color: var(--ink);
  font-weight: 950;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.count{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--stroke) 82%);
  background: color-mix(in srgb, var(--glass) 88%, transparent);
}
.count__item{ flex:1; text-align:center; }
.count__num{ font-weight: 980; font-size: 30px; letter-spacing:-.03em; }
.count__label{ font-weight: 900; font-size: 12px; color: var(--muted); }
.count__sep{
  width:1px;
  height: 34px;
  background: color-mix(in srgb, var(--brand) 18%, var(--stroke) 82%);
}

.hero-card__hint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--brand) 30%, var(--stroke) 70%);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.hero-photo{
  border-radius: 32px;
  overflow:hidden;
  position:relative;
  min-height: 270px;
}
.hero-photo img{
  width:100%;
  height: 320px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s var(--ease);
}
.hero-photo:hover img{ transform: scale(1.06); }

.hero-photo__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.22), transparent 60%);
  pointer-events:none;
}
.hero-photo__cap{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  color:#fff;
}
.cap-title{ font-weight: 950; letter-spacing:.02em; }
.cap-sub{ opacity:.86; font-weight: 800; font-size: 12px; margin-top: 2px; }

.cards{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){ .cards{ grid-template-columns: 1fr; } }
.card{
  border-radius: var(--r);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
.card__icon{
  width: 48px; height: 48px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand) 14%, var(--glass) 86%);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--stroke) 76%);
  display:grid;
  place-items:center;
  box-shadow: var(--shadow2);
  position:relative;
}
.card__icon i{ color: var(--brand); font-size: 20px; }
.card__title{ margin-top: 12px; font-weight: 980; font-size: 18px; position:relative; }
.card__text{ margin-top: 6px; color: var(--muted); font-weight: 700; line-height:1.6; position:relative; }
.card__link{
  margin-top: 12px;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  text-decoration:none;
  font-weight: 950;
  color: var(--brand);
  position:relative;
}

.carousel-wrap{ margin-top: 16px; position:relative; }
.carousel{
  display:flex;
  gap: 14px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 8px 6px 18px;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }

.slide{
  flex:0 0 auto;
  width: min(78vw, 360px);
  height: 240px;
  border-radius: 26px;
  overflow:hidden;
  position:relative;
  scroll-snap-align: start;
  box-shadow: var(--shadow);
  border: 1px solid var(--stroke);
  background: #000;
}
.slide img{ width:100%; height:100%; object-fit: cover; display:block; }
.slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent 60%);
  pointer-events:none;
}
.slide__cap{
  position:absolute;
  left: 12px; top: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  background: rgba(246,241,234,.78);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}
.slide__cap i{ color: var(--brand); margin-right: 6px; }

.car-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  cursor:pointer;
  display:grid;
  place-items:center;
}
#carPrev{ left: -10px; }
#carNext{ right: -10px; }
@media (max-width: 820px){ .car-btn{ display:none; } }

.toolbar{
  margin-top: 14px;
  padding: 12px;
  border-radius: 22px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.search{
  flex: 1 1 340px;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
}
.search i{ color: var(--brand); }
.search input{
  width:100%;
  border:0;
  outline:none;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}

.tools{ display:flex; gap: 10px; align-items:center; }
.toolbtn{
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(30,95,90,.55), rgba(30,95,90,.35));
  backdrop-filter: blur(12px);
  cursor:pointer;
  font-weight: 950;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.toolbtn i{ color:#fff; }
.toolbtn:hover{ filter: brightness(1.05); transform: translateY(-1px); transition: .2s var(--ease); }

.gallery{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){ .gallery{ grid-template-columns: repeat(8, minmax(0,1fr)); } }
@media (max-width: 820px){ .gallery{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 560px){ .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.tile{
  grid-column: span 3;
  border-radius: 22px;
  overflow:hidden;
  position:relative;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.tile--wide{ grid-column: span 6; }
@media (max-width: 560px){
  .tile, .tile--wide{ grid-column: span 2; }
}
.tile img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s var(--ease);
}
.tile:hover img{ transform: scale(1.07); }
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.38), transparent 60%);
  pointer-events:none;
}
.tile__cap{
  position:absolute;
  left: 12px; right: 12px; bottom: 12px;
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 10px;
  color:#fff;
}
.tile__title{ font-weight: 980; letter-spacing:-.02em; }
.tile__sub{ font-weight: 800; font-size: 12px; opacity:.85; margin-top: 2px; }
.tile__pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.members{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){ .members{ grid-template-columns: repeat(8, minmax(0,1fr)); } }
@media (max-width: 820px){ .members{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 560px){ .members{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.member{
  grid-column: span 4;
  border-radius: 26px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
@media (max-width: 820px){ .member{ grid-column: span 6; } }
@media (max-width: 560px){ .member{ grid-column: span 2; } }

.member__media{
  height: 220px;
  background:#000;
  overflow:hidden;
  position:relative;
}
.member__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s var(--ease);
}
.member:hover .member__media img{ transform: scale(1.07); }
.member__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 62%);
}
.member__body{ padding: 14px; }

.member__top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:flex-start;
}
.member__name{ font-weight: 980; font-size: 18px; letter-spacing:-.02em; }
.member__nick{ font-weight: 900; font-size: 12px; color: var(--muted); margin-top: 2px; }
.member__pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  font-weight: 950;
  font-size: 12px;
  display:inline-flex;
  gap: 8px;
  align-items:center;
}

.anuario-cta{
  margin-top: 14px;
  border-radius: var(--r);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.anuario-cta__left{ display:flex; align-items:center; gap: 12px; }
.anuario-cta__badge{
  width: 48px; height: 48px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--brand) 16%, var(--glass) 84%);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--stroke) 74%);
  box-shadow: var(--shadow2);
}
.anuario-cta__badge i{ color: var(--brand); font-size: 20px; }
.anuario-cta__title{ font-weight: 980; letter-spacing:-.02em; }

@media (max-width: 560px){
  .anuario-cta{ flex-direction: column; align-items: stretch; }
  .anuario-cta .btn{ width:100%; }
}

[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
[data-reveal].is-in{ opacity: 1; transform: translateY(0); }

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

.member__line{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}
.member__line i{ color: var(--brand); margin-top: 2px; }

.member__tags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.tag{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  font-weight: 950;
  font-size: 12px;
}

.modal{
  position:fixed;
  inset:0;
  z-index: 80;
  opacity:0;
  pointer-events:none;
  transition: .2s var(--ease);
}
.modal.is-open{ opacity:1; pointer-events:auto; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(92vw, 920px);
  border-radius: 26px;
  overflow:hidden;
  padding: 14px;
}
.modal__close{ position:absolute; right: 14px; top: 14px; z-index:2; }
.modal img{
  width:100%;
  max-height: 70vh;
  object-fit: contain;
  display:block;
  border-radius: 18px;
  background: rgba(0,0,0,.25);
}
.modal__cap{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
}
.modal__title{ font-weight: 980; }
.modal__sub{ font-weight: 800; font-size: 13px; }

.mural{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 12px;
  align-items:start;
}
@media (max-width: 980px){ .mural{ grid-template-columns: 1fr; } }

.note{ border-radius: var(--r); padding: 16px; }
.note__title{ display:flex; gap: 10px; align-items:center; font-weight: 980; }
.note__title i{ color: var(--brand); }

.label{
  display:block;
  margin-top: 12px;
  font-weight: 950;
  font-size: 12px;
  color: var(--muted);
}
.input,.textarea{
  width:100%;
  margin-top: 6px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  color: var(--ink);
  padding: 12px;
  outline:none;
  font-weight: 800;
}
.textarea{ min-height: 120px; resize: vertical; }
.input:focus,.textarea:focus{
  border-color: color-mix(in srgb, var(--brand) 40%, var(--stroke) 60%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}

.hint{
  margin-top: 10px;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  display:flex;
  gap: 8px;
  align-items:center;
}
.hint i{ color: var(--brand); }

.notes{ display:grid; gap: 12px; }
.post{ border-radius: 22px; padding: 14px; }
.post__top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.post__name{ font-weight: 980; }
.post__date{ font-weight: 800; font-size: 12px; color: var(--muted); margin-top: 2px; }
.post__text{ margin-top: 10px; line-height:1.7; white-space: pre-wrap; }
.post__btn{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  cursor:pointer;
  font-weight: 950;
  padding: 8px 10px;
}
.post__btn i{ color: var(--brand); }

.contact{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 12px;
  align-items:start;
}
@media (max-width: 980px){ .contact{ grid-template-columns: 1fr; } }

.contact__form, .contact__info{ border-radius: var(--r); padding: 16px; }
.field{ display:grid; gap: 8px; margin-top: 10px; }

.info-row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  margin-top: 10px;
}
.info-ico{
  width: 44px; height: 44px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--brand) 14%, var(--glass) 86%);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--stroke) 76%);
}
.info-ico i{ color: var(--brand); font-size: 18px; }
.info-title{ font-weight: 980; letter-spacing:-.02em; }

.footer{
  border-top: 1px solid var(--stroke);
  padding: 22px 0;
  background: color-mix(in srgb, var(--cream) 75%, transparent);
}
.footer__inner{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap:wrap;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}