/* Sofi & Benja — ejemplo */
:root {
  --orange: #FF7A3D;
  --lilac: #CBB8FF;
  --butter: #FFE58A;
  --mint: #A5E8C6;
  --cherry: #FF5D73;
  --cream: #FFF6E9;
  --ink: #161210;
  --paper: #FFFCF6;

  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(16px, 3vw, 40px);
  --top: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--top); }
body {
  margin: 0;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* espacio para la barra fija */
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.c-orange { background: var(--orange); }
.c-lilac { background: var(--lilac); }
.c-butter { background: var(--butter); }
.c-mint { background: var(--mint); }
.c-cherry { background: var(--cherry); }
.c-cream { background: var(--cream); }
.c-ink { background: var(--ink); color: var(--cream); }

.center { text-align: center; }
.wrap { max-width: 1040px; margin: 0 auto; }
.wrap--narrow { max-width: 760px; }

.ico { width: .9em; height: .9em; vertical-align: -.08em; flex: none; }
.ico--lg { width: 1.05em; height: 1.05em; vertical-align: -.14em; }

.accent { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; font-size: 1.12em; line-height: .9; }
.heavy { font-family: var(--display); font-weight: 800; }
.small-label { text-transform: uppercase; font-weight: 500; font-size: 15px; letter-spacing: .02em; }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  background: var(--orange);
  border-bottom: 1.5px solid var(--ink);
}
.brand { font-size: 22px; font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.brand .ico { color: var(--ink); }
.menu { display: flex; gap: clamp(14px, 3vw, 44px); text-transform: uppercase; font-size: 14px; font-weight: 500; }
.menu a { text-decoration: none; white-space: nowrap; }
.menu a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Portada ---------- */
.hero {
  position: relative;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(56px, 8vw, 112px);
  border-top: 1.5px solid var(--ink);
  margin: 0 var(--gutter);
  border-top: 0;
}
.spark { position: absolute; width: clamp(28px, 3.4vw, 44px); height: clamp(28px, 3.4vw, 44px); animation: spin 14s linear infinite; }
.spark--tr { top: 40px; right: 0; width: clamp(64px, 9vw, 130px); height: clamp(64px, 9vw, 130px); }
.spark--bl { bottom: 40px; right: 18%; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.kicker { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 40px); margin-bottom: 8px; }

.mega {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.035em;
}
.hero .mega { font-size: clamp(64px, 16vw, 230px); display: grid; justify-items: start; }
.hero .mega span:last-child { margin-left: 12vw; }
.mega--section { font-size: clamp(38px, 7vw, 96px); margin-bottom: clamp(24px, 4vw, 48px); }
.mega--section .ico { width: .8em; height: .8em; vertical-align: -.06em; }
.mega--footer { font-size: clamp(44px, 11vw, 160px); text-align: center; }

/* Óvalo dibujado alrededor de una palabra */
.ring { position: relative; display: inline-block; padding: 0 .12em; }
.ring::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: .16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' fill='none' stroke='%23161210' stroke-width='3'/%3E%3C/svg%3E") repeat-x 0 50% / auto 100%;
  pointer-events: none;
}
.ring--fill::after { top: 18%; bottom: 4%; height: auto; background: var(--butter); border-radius: 999px; transform: rotate(-2deg); z-index: -1; }
.where .mega { position: relative; z-index: 0; }
.spark { color: var(--ink); --center: var(--butter); }

.hero__sub { max-width: 820px; margin: clamp(20px, 3vw, 36px) 0 0; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.1; text-transform: uppercase; font-weight: 500; }

.hero__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  max-width: 900px;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--ink);
}
.hero__date { font-size: clamp(32px, 5vw, 60px); font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; }

.hero__lineup { max-width: 900px; margin: 18px 0 0; }
.hero__lineup ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.hero__lineup li { font-size: clamp(24px, 3.4vw, 40px); font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: -.02em; }
.blob { position: relative; z-index: 0; }
.blob::before { content: ""; position: absolute; inset: -18% -14%; background: var(--butter); border-radius: 50%; z-index: -1; }

/* ---------- Botones ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 14px 24px;
  font: 500 18px/1 var(--sans);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
}
.pill:hover { transform: translateY(-2px) rotate(-1deg); }
.pill--light { background: var(--paper); color: var(--ink); }
.pill--line { background: transparent; color: var(--ink); }
.pill--line:hover { background: var(--ink); color: var(--paper); }
.pill--orange { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.pill[disabled] { opacity: .5; cursor: wait; }

/* ---------- Cintas de texto ---------- */
.ticker { overflow: hidden; border-block: 1.5px solid var(--ink); padding: 12px 0; }
.ticker.c-ink .ico { color: var(--orange); }
.ticker__track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  animation: ticker 24s linear infinite;
}
.ticker__track--slow { animation-duration: 36s; }
.ticker__track span { letter-spacing: -.01em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
section:not(.hero) { padding: clamp(64px, 9vw, 128px) var(--gutter); }

.story__text {
  max-width: 1000px;
  margin: 28px auto;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(26px, 3.9vw, 50px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.02em;
}
.story__text .heavy { font-weight: 800; }
.story { color: var(--ink); }

/* Tarjetas del finde */
.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 7vw, 100px);
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1.5px solid var(--ink);
  align-items: start;
}
.card:nth-child(odd) .card__media { order: -1; }
.card__when { font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; margin-bottom: 14px; }
.card__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 4.6vw, 60px); line-height: .95; letter-spacing: -.02em; }
.card__title .accent { display: block; font-size: .95em; margin-top: 4px; text-transform: none; }
.card hr { border: 0; border-top: 1.5px solid var(--ink); margin: clamp(28px, 5vw, 64px) 0 18px; }
.card p + p { margin-top: 14px; }
.card__text p:not(.card__when) { font-size: clamp(18px, 1.8vw, 22px); }
.card__media {
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink);
  border-radius: 999px 999px 18px 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.card__media svg { width: 46%; height: 46%; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.card:hover .card__media svg { transform: rotate(-8deg) scale(1.06); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Dónde */
.where { text-align: center; }
.where__text { max-width: 860px; margin: 0 auto; font-size: clamp(22px, 3vw, 36px); text-transform: uppercase; font-weight: 500; line-height: 1.1; }
.where__meta { margin: 24px auto 32px; font-size: 16px; }

/* Dress code */
.dress__grid, .sleep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; padding: clamp(24px, 3vw, 36px); }
.box__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 16px; }
.box__icon { width: 48px; height: 48px; margin-bottom: 16px; }
.box__icon--center { display: block; margin: 0 auto 20px; width: 64px; height: 64px; }
.box p { font-size: 19px; margin-bottom: 22px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { font-size: clamp(18px, 2vw, 24px); text-transform: uppercase; font-weight: 500; padding: 10px 0; border-top: 1.5px solid var(--ink); }
.list li:last-child { border-bottom: 1.5px solid var(--ink); }
.dress__tip { margin-top: clamp(32px, 5vw, 56px); font-size: clamp(24px, 3.6vw, 44px); text-transform: uppercase; font-weight: 500; text-align: center; line-height: 1.1; }
.dress__note { text-align: center; margin-top: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 10px; }

/* Preguntas */
.faq details { border-top: 1.5px solid var(--ink); }
.faq details:last-child { border-bottom: 1.5px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; font-size: clamp(22px, 2.8vw, 32px); font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 60ch; }
.faq .small-label { margin-bottom: 24px; }

/* RSVP */
.rsvp__intro { font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; font-weight: 500; margin-bottom: 40px; }
.form { display: grid; gap: 24px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 22px; padding: clamp(24px, 4vw, 44px); }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { text-transform: uppercase; font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 8px; }
.field input { font: inherit; border: 0; border-bottom: 1.5px solid var(--ink); background: transparent; padding: 8px 0; border-radius: 0; }
.field input:focus { outline: none; border-bottom-color: var(--orange); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-block; border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 20px; cursor: pointer; text-transform: uppercase; font-weight: 500; }
.choice input:checked + span { background: var(--butter); }
.choice input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.if-yes { display: grid; gap: 24px; }
.if-yes[hidden] { display: none; }
.form .pill { justify-self: start; background: var(--ink); color: var(--paper); }
.form__status { min-height: 1.4em; font-weight: 500; }

/* Regalos */
.gifts__text { font-size: clamp(20px, 2.4vw, 28px); margin: 0 auto 32px; max-width: 40ch; }
.bank summary { list-style: none; }
.bank summary::-webkit-details-marker { display: none; }
.bank[open] summary .ico { transform: rotate(90deg); }
.bank dl { margin: 24px auto 0; max-width: 460px; text-align: left; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; padding: 8px 24px; }
.bank dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(11, 11, 11, .2); }
.bank dl div:last-child { border-bottom: 0; }
.bank dt { text-transform: uppercase; font-weight: 600; font-size: 14px; }
.bank dd { margin: 0; }

/* Pie */
.footer .small-label .ico { color: var(--orange); }
.footer { padding: clamp(72px, 10vw, 140px) var(--gutter) 40px; text-align: center; border-top: 1.5px solid var(--ink); }
.footer__quote { font-size: clamp(22px, 3vw, 36px); text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
.footer .small-label { margin-top: 32px; }

/* Barra fija inferior */
.stickybar {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px var(--gutter);
  border-top: 1.5px solid var(--ink);
  font-size: clamp(15px, 2vw, 22px);
  text-transform: uppercase;
  font-weight: 500;
  transition: transform .3s;
}
.stickybar.is-hidden { transform: translateY(110%); }
.stickybar .pill { padding: 10px 18px; font-size: 15px; }

/* Aparición al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .menu { display: none; }
  .hero { margin: 0 12px; }
  .spark--bl { display: none; }
  .spark--tr { top: 24px; width: 56px; height: 56px; }
  .card:nth-child(odd) .card__media { order: -1; }
  .hero__lineup ul { grid-template-columns: 1fr; }
  .card { grid-template-columns: 1fr; }
  .card__media { aspect-ratio: 16 / 10; order: -1; }
  .dress__grid, .sleep__grid { grid-template-columns: 1fr; }
  .stickybar p .ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spark, .ticker__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}