/* ==========================================================================
   Boda Jose y Cindy — hoja de estilos
   Paleta: verde oliva #688236 sobre crema #fcf7f4 (el tono del papel del hero)
   ========================================================================== */

:root {
  --verde: #688236;
  --verde-osc: #4d6127;
  --verde-10: rgba(104, 130, 54, .10);
  --verde-14: rgba(104, 130, 54, .14);
  --verde-22: rgba(104, 130, 54, .22);
  --verde-30: rgba(104, 130, 54, .30);
  /* Es exactamente el tono del papel de la acuarela del hero (muestreado
     del archivo). Al coincidir, la ilustración no recorta ningún rectángulo
     contra el fondo. Si se cambia la imagen, hay que volver a muestrearlo. */
  --crema: #fcf7f4;
  --tinta: #161616;
  --texto: #3d3d3d;
  --texto-suave: #6b6b6b;
  --panel: rgba(255, 255, 255, .50);
  --wrap: min(1160px, calc(100% - 36px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--verde); }
a:hover { color: var(--verde-osc); }
input, select, textarea, button { font: inherit; }

.wrap { width: var(--wrap); margin-inline: auto; }
.narrow { max-width: 840px; }
.center { text-align: center; }

.script { font-family: "Tangerine", cursive; font-weight: 700; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* ─────────────────────────────── Navegación ─────────────────────────────── */

#nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 248, 244, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(104, 130, 54, .2);
}

.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}

.nav-brand {
  font-family: "Tangerine", cursive; font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.4rem); line-height: 1;
  color: var(--verde); text-decoration: none; white-space: nowrap;
}

.nav-links { display: flex; gap: clamp(14px, 3vw, 24px); align-items: center; }
.nav-links a {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; color: #222; white-space: nowrap;
}
.nav-links a:hover { color: var(--verde); }

.nav-toggle {
  display: none;
  width: 48px; height: 48px; padding: 0 10px;
  flex-direction: column; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--verde-30);
  border-radius: 3px; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1.5px; background: var(--verde); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-menu .wrap { display: flex; flex-direction: column; padding-bottom: 14px; }
.nav-menu a {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none; color: #222; padding: 14px 4px;
  border-bottom: 1px solid var(--verde-14);
  min-height: 48px; display: flex; align-items: center;
}

@media (max-width: 759px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* ────────────────────────────────── Hero ────────────────────────────────── */

.hero { padding: 56px 0 72px; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 48px; align-items: center;
}

.hero-text { text-align: center; padding: 8px; }

.eyebrow {
  letter-spacing: .18em; text-transform: uppercase;
  font-size: .76rem; color: var(--verde);
}

.hero-title {
  line-height: .9; font-size: clamp(4.4rem, 9vw, 8.4rem);
  margin: 16px 0 22px; color: #111;
}

.hero-date {
  display: flex; justify-content: center; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  font-family: "Tangerine", cursive; font-weight: 700;
  font-size: 2.4rem; line-height: 1.1; color: var(--verde);
}
.hero-date .dot { color: rgba(104, 130, 54, .5); }

.hero-place {
  margin: 24px auto 18px; max-width: 510px; color: var(--verde);
  letter-spacing: .16em; text-transform: uppercase;
  font-size: .78rem; line-height: 1.9;
}

.hero-lede { max-width: 480px; margin: 0 auto 26px; color: var(--texto); text-wrap: pretty; }

.hero-img { display: flex; justify-content: center; }
.hero-img img {
  width: min(100%, 560px); height: auto;
  /* Sin `multiply`: el fondo de la web ya es el tono del papel, así que la
     ilustración funde sola. El archivo trae además un margen blanco puro
     por fuera (~90px); la máscara llega a transparente antes de alcanzarlo,
     así que ese margen no llega a verse. */
  --fundido: radial-gradient(ellipse 41% 44% at 50% 47%,
              #000 62%, rgba(0, 0, 0, .45) 86%, transparent 100%);
  -webkit-mask-image: var(--fundido);
          mask-image: var(--fundido);
}

.btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .1em; font-size: .7rem;
  text-decoration: none; border: 1px solid var(--verde); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn-solid { background: var(--verde); color: #fff; }
.btn-solid:hover { background: var(--verde-osc); border-color: var(--verde-osc); color: #fff; }
.btn-ghost { background: transparent; color: var(--verde); }
.btn-ghost:hover { background: var(--verde-10); color: var(--verde-osc); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ─────────────────────────────── Cuenta atrás ───────────────────────────── */

.band { padding: 38px 0; border-top: 1px solid var(--verde-14); }

.countdown-grid {
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: center; justify-content: center;
}

.countdown-title {
  font-size: 3rem; line-height: 1; color: var(--verde);
  flex: 1 1 300px; text-align: center;
}

.countdown { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.unit {
  min-width: 104px; padding: 18px; text-align: center;
  border: 1px solid var(--verde-22); background: rgba(255, 255, 255, .55);
}
.unit strong {
  display: block; font-family: Georgia, serif; font-weight: 400;
  color: var(--verde); font-size: 2rem; font-variant-numeric: tabular-nums;
}
.unit span { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }

.tz-note {
  margin: 14px 0 0; text-align: center;
  font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave);
}

/* ───────────────────────────────── Secciones ────────────────────────────── */

.section { padding: 88px 0; border-top: 1px solid var(--verde-14); }

.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2,
.narrow h2,
.gift-grid h2 {
  line-height: .95; font-size: clamp(3.2rem, 6vw, 4.4rem);
  margin: 0 0 10px; color: var(--verde);
}
.section-head p, .narrow p { max-width: 640px; margin-inline: auto; color: #494949; text-wrap: pretty; }

.rule { width: 84px; height: 1px; background: var(--verde); margin: 16px auto; }

.note-center {
  text-align: center; margin: 34px auto 0; max-width: 560px;
  font-size: .82rem; letter-spacing: .06em; color: var(--texto-suave);
}

/* ─────────────────────────────────── Cards ──────────────────────────────── */

.card { border: 1px solid var(--verde-22); background: var(--panel); }

.cards-4 {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.card-step {
  text-align: center; padding: 26px 12px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.card-step img { width: auto; height: 130px; margin: 0 auto 14px; mix-blend-mode: multiply; }
.step-n { letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; color: var(--verde); }
.card-step h3 {
  font-size: 1rem; letter-spacing: .06em; margin: 14px 0 4px;
  font-weight: 600; width: 100%; text-wrap: balance;
}
.card-step time { font-family: Georgia, serif; font-size: 1.5rem; color: var(--verde); }

.cards-3 {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cards-3 .card { padding: 28px; }
.card-title { color: var(--verde); margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
.cards-3 p { font-size: .86rem; color: #555; margin: 0 0 16px; }

.link-caps {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  background: none; border: 0; padding: 0; color: var(--verde);
  cursor: pointer; text-decoration: underline;
}

/* ──────────────────────────────── Historia ──────────────────────────────── */

.story { display: grid; gap: 44px; }

.story-row {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.story-row img {
  aspect-ratio: 4 / 3; min-width: 0; width: 100%; object-fit: cover;
  border: 1px solid var(--verde-22);
  box-shadow: 0 16px 40px rgba(78, 68, 54, .1);
  /* Fotos de la historia en monocromático. Los archivos de assets/ siguen
     estando a color: basta con quitar esta línea para recuperarlos. */
  filter: grayscale(1);
}
/* Cada foto usa el marco que le corresponde, para no recortar a nadie:

   · historia-1  4:3 apaisada  → marco 4:3  (encaja exacta, sin recorte)
   · historia-2  3:4 vertical  → marco 1:1  (recorta 25%, no el 44% del 4:3)
   · historia-3  3:4 vertical  → marco 1:1
   · pedida     16:9 apaisada  → marco 16:9 (encaja exacta, sin recorte)          */

.story-row img.vertical { aspect-ratio: 1 / 1; }
.story-row img.wide     { aspect-ratio: 16 / 9; }

/* Y dentro del marco, el encuadre va ajustado a mano a cada foto.
   `encuadre-alto`: las caras están arriba (11% y 19%) → deja aire por encima.
   `encuadre-bajo`: los protagonistas están del 30% al 80% → baja el recorte. */
.story-row img.encuadre-alto { object-position: center 15%; }
.story-row img.encuadre-bajo { object-position: center 55%; }

.story-n { color: var(--verde); font-family: Georgia, serif; font-size: 1rem; }
.story-row h3 { font-size: 3.2rem; line-height: 1; margin: 6px 0 16px; color: #111; }
.story-row h3.big { font-size: 3.6rem; margin: 0 0 16px; }
.story-row p { color: #333; max-width: 560px; text-wrap: pretty; }

.story-highlight {
  gap: 44px; background: rgba(255, 255, 255, .45);
  border: 1px solid var(--verde-22); padding: 32px;
}

/* En móvil el recuadro se comía el ancho de la foto: lo ajustamos. */
@media (max-width: 640px) {
  .story-highlight { padding: 20px 14px; gap: 28px; }
}

/* ────────────────────────────────── Form ────────────────────────────────── */

.rsvp { max-width: 940px; margin-inline: auto; }

.rsvp fieldset {
  border: 1px solid var(--verde-22); background: rgba(255, 255, 255, .45);
  padding: 30px; margin: 0 0 22px;
}
.rsvp legend { padding: 0 12px; font-size: 2.6rem; color: var(--verde); }
.fs-note { margin: -4px 0 22px; color: #555; font-size: .88rem; }

.grid-2 {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.full { grid-column: 1 / -1; }
.stack { display: grid; gap: 18px; }

label, .label {
  display: block; font-size: .76rem; letter-spacing: .04em; margin-bottom: 8px;
}

.rsvp input[type="text"], .rsvp input:not([type]), .rsvp select, .rsvp textarea {
  width: 100%; border: 1px solid var(--verde-30);
  background: rgba(251, 248, 244, .8);
  padding: 13px 14px; border-radius: 3px; outline: none;
  color: inherit;
}
.rsvp textarea { min-height: 96px; resize: vertical; }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { border-color: var(--verde); }
.rsvp [aria-invalid="true"] { border-color: #b23a3a; }

/* Aviso del menú único, dentro del bloque de alimentación. */
.aviso-menu {
  border-left: 2px solid var(--verde);
  background: rgba(104, 130, 54, .06);
  padding: 14px 18px;
}
.aviso-menu p { margin: 0; font-size: .88rem; color: #444; text-wrap: pretty; }
.aviso-menu strong { color: var(--verde); font-weight: 600; }

.choices { display: flex; gap: 20px; flex-wrap: wrap; }
.choice {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; margin-bottom: 0; cursor: pointer;
}
.choice input { width: auto; accent-color: var(--verde); }

[data-when-attending][hidden] { display: none; }

.submit-row {
  text-align: center; margin-top: 24px;
  display: grid; justify-items: center; gap: 14px;
}
.status { margin: 0; font-size: .82rem; color: var(--verde); min-height: 1.4em; max-width: 46ch; }
.status.is-error { color: #a33; }

/* ────────────────────────────────── Regalo ──────────────────────────────── */

.gift-grid {
  display: grid; gap: 44px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.gift-grid h2 { margin: 0 0 16px; }
.gift-grid p { color: var(--texto); max-width: 560px; text-wrap: pretty; }

.gift-card { padding: 34px; text-align: center; }
.gift-card strong { display: block; font-size: 1rem; letter-spacing: .06em; }
.iban {
  display: block; color: var(--verde); font-size: 1.3rem;
  margin-top: 10px; letter-spacing: .05em;
}
.copy-btn { margin-top: 16px; }

/* ────────────────────────────────── Footer ──────────────────────────────── */

footer { text-align: center; padding: 70px 20px 46px; border-top: 1px solid var(--verde-22); }
.footer-title { font-size: 3.6rem; line-height: 1; color: var(--verde); }
footer small {
  display: block; margin-top: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde); font-size: .7rem;
}

/* ───────────────────────────── Aparición suave ──────────────────────────── */

/* El contenido es visible por defecto. Solo cuando el JS confirma que puede
   animar añade `js-anim` al <html>, y entonces se parte de opacidad 0. Así,
   si el JS falla o está bloqueado, la página se ve entera igualmente. */
.js-anim .reveal { opacity: 0; transform: translateY(10px); }
.js-anim .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}