:root {
  --cream: #fdf1e4;
  --blush: #ffd8c8;
  --apricot: #ffb676;
  --lightpink: #ffc0d2;
  --fuchsia: #dc7ea8;
  --butter: #ddcf74;
  --olive: #a8ab4a;
  --ink: #2A2A2A;
  --bg: #FAF7F2;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 18px; }

.header {
  position: sticky; top:0; z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(250,247,242,.78);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 12px;
}
.brand {
  display:flex; align-items:baseline; gap:10px;
}
.brand .logo {
  width:12px; height:12px; border-radius:50%;
  background: linear-gradient(135deg, var(--apricot), var(--fuchsia));
  box-shadow: 0 8px 18px rgba(239,141,193,.35);
}
.brand .title { font-weight: 700; letter-spacing: .4px; }
.brand .subtitle { font-size: 12px; opacity:.7; }

.menu {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap: 10px;
}
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  border-radius:999px;
}
.chip {
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  font-size: 14px;
}
.chip.primary {
  background: linear-gradient(135deg, var(--apricot), var(--lightpink));
}
.chip.olive {
  background: linear-gradient(135deg, var(--butter), var(--olive));
}
.hero {
  position:relative;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
  margin: 20px 0 26px;
  min-height: 420px;
  background: #120f10;
}
.hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .92;
  filter: saturate(1.16) contrast(1.1) brightness(.92);
  transform: scale(1.02);
}
.hero .overlay {
  position:absolute; inset:0;
  background: radial-gradient(circle at 25% 18%, rgba(255,182,118,.58), transparent 52%),
              radial-gradient(circle at 78% 70%, rgba(220,126,168,.36), transparent 48%),
              linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62));
}
.hero .content {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 26px;
  color: white;
}
.hero-top {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.kicker {
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  width: fit-content;
  margin-bottom: 10px;
}
.kicker .dot {
  width:10px; height:10px; border-radius:50%;
  background: var(--apricot);
}
.h1 {
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: .95;
  margin: 0 0 12px;
  letter-spacing: 1px;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
  background: linear-gradient(135deg, #fffaf5 12%, #ffd6e4 48%, #ffe7b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 20px rgba(0,0,0,.30);
}
.lead {
  font-size: 17px;
  max-width: 760px;
  opacity: .96;
  margin: 0;
  color: #fff7ef;
}
.by-fede {
  margin: -2px 0 12px;
  font-size: clamp(24px, 3.2vw, 40px);
  font-style: italic;
  font-weight: 700;
  color: #ffe2c4;
  text-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.btnrow { display:flex; flex-wrap:wrap; gap: 10px; padding-bottom: 8px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: white;
  font-weight: 600;
}
.btn:hover { text-decoration:none; background: rgba(255,255,255,.16); }

.grid {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card {
  grid-column: span 12;
  background: white;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;
}
.card .pad { padding: 18px; }
.card h2 { margin:0 0 8px; font-size: 20px; }
.card p { margin:0; opacity: .9; line-height:1.5; }
.badge {
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid rgba(0,0,0,.05);
  font-size: 13px;
  gap:8px;
}
.badge b { font-weight:700; }

@media (min-width: 900px) {
  .span6 { grid-column: span 6; }
  .span4 { grid-column: span 4; }
  .span8 { grid-column: span 8; }
}

.form {
  display:grid;
  gap: 12px;
}
.label { font-size: 13px; opacity: .8; margin-bottom: 6px; display:block; }
.input, .textarea, .select {
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  outline: none;
}
.textarea { min-height: 110px; resize: vertical; }
.row {
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) {
  .row { grid-template-columns: 1fr 1fr; }
}
.submit {
  width: fit-content;
  border: none;
  background: linear-gradient(135deg, var(--apricot), var(--fuchsia));
  color: white;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(239,141,193,.25);
}
.submit:hover { filter: brightness(1.02); }

.notice {
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(254,230,215,.6);
}

.footer {
  margin: 26px 0 36px;
  opacity: .8;
  font-size: 13px;
}
hr.sep { border:0; border-top:1px solid rgba(0,0,0,.08); margin: 18px 0; }

.gallery {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
.thumb {
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: white;
}
.thumb img {
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.small { font-size: 12px; opacity: .8; }

/* Countdown */
.countdown{display:flex;gap:10px;flex-wrap:wrap;margin:14px auto 10px;justify-content:center}
.countdown .cd-item{background:rgba(255,255,255,.88);backdrop-filter: blur(4px);border-radius:14px;padding:10px 12px;min-width:78px;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.10)}
.countdown .cd-num{font-size:22px;font-weight:800;line-height:1;color:var(--ink)}
.countdown .cd-lab{font-size:12px;opacity:.8;margin-top:6px}
@media (max-width:520px){.countdown .cd-item{min-width:70px;padding:9px 10px}}

@media (max-width: 820px) {
  .nav { position:relative; flex-wrap:nowrap; }
  .brand { min-width: 0; flex: 1; }
  .brand .title { font-size: 19px; font-weight: 800; letter-spacing: .6px; }
  .brand .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero { min-height: 470px; }
  .hero img {
    width:100%;
    height:100%;
    object-position: 50% 30%;
  }
  .hero .content { padding: 18px 16px 20px; }
  .h1 { font-size: clamp(32px, 11vw, 52px); }
  .lead { font-size: 15px; }
  .by-fede { font-size: clamp(26px, 8vw, 36px); }
  .menu-toggle { display:inline-flex; flex: 0 0 auto; margin-left: 8px; }
  .menu {
    display:none;
    position:absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 50;
    padding: 12px;
    background: rgba(250,247,242,.98);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    gap: 8px;
    justify-content:flex-start;
  }
  .menu.open { display:flex; }
}