/* Boda Lupita & Alex — sistema Classical
   Editorial, tipo libro. Color como trazo, nunca como relleno. */

/* ---------- Tokens ---------- */
:root {
  --bg:           #f3f2f2;
  --surface:      #faf9f8;
  --text:         #201f1d;
  --text-2:       #3d3b37;
  --text-3:       #5c5952;
  --text-4:       #6e6a62;
  --body:         #4a4741;
  --divider:      #dcd8d2;
  --border:       #e3dfd9;
  --accent:       #b68235;
  --accent-text:  #8a6228;
  --accent-press: #6f4e1f;

  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans:  'Lora', Georgia, 'Times New Roman', serif;

  --shadow: 0 1px 2px rgba(32, 31, 29, .05);
  --radius: 4px;
  --column: 560px;
  --gutter: 30px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: var(--text); }

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

::selection { background: rgba(182, 130, 53, .18); }

/* Todas las cifras alineadas en columna */
.num { font-variant-numeric: tabular-nums; }

/* ---------- Primitivas ---------- */
.section {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hairline {
  height: 1px;
  background: var(--divider);
  margin: 0 auto 60px;
}
.hairline--narrow  { max-width: 300px; margin-bottom: 64px; }
.hairline--180     { max-width: 180px; margin: 36px auto; }
.hairline--240     { max-width: 240px; margin: 38px auto 22px; }
.hairline--rsvp    { margin-bottom: 80px; }
.hairline--closing { margin-bottom: 64px; }

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.2;
  letter-spacing: .02em;
}
.h2--tracked      { line-height: 1.24; letter-spacing: .1em; }
.h2--tracked-wide { line-height: 1.24; letter-spacing: .11em; text-indent: .11em; }
.h2--closing      { line-height: 1.28; letter-spacing: .01em; text-wrap: pretty; }

.label {
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-3);
}

.phrase {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(27px, 7.4vw, 38px);
  line-height: 1.42;
  letter-spacing: .055em;
  text-wrap: pretty;
}
.phrase em { font-style: italic; color: var(--accent-text); }

.intro {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: .045em;
  color: var(--body);
  text-wrap: pretty;
}

.pending {
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Lámina de libro: paspartú + foto */
.plate {
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.plate img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  filter: saturate(.94) sepia(.05); /* tono cálido de archivo */
}
/* La foto ya está en B/N — sin filtro */
.plate--bw img { filter: none; }

/* Video en lámina, mismo tratamiento que las fotos */
.plate--video { line-height: 0; }
.video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  background: var(--divider);
  filter: saturate(.94) sepia(.05);
}

.link-rule {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
  transition: color .2s ease, border-color .2s ease;
}
.link-rule--sm { font-size: 10px; padding-bottom: 4px; }
.link-rule.is-pending { opacity: .55; cursor: default; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  padding: 22px 20px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.card--row,
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.card__head { margin-bottom: 14px; }
.card--link { transition: border-color .2s ease, background .2s ease; }
.card--hotel { padding: 24px 20px; }

.card__name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .06em;
}
.card__tag {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.card__data {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .14em;
  color: var(--body);
}
.card__hotel-name {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: .06em;
}
.card__hotel-info {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--body);
}
.code {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- 1 · Portada ---------- */
.cover {
  position: relative;
  height: 100svh;      /* svh: la barra de Safari iOS no recorta el hint */
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 32px 20px 26px;
  overflow: hidden;
}
.cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 42%;
}
/* Aclara arriba para el texto oscuro, oscurece abajo para el hint blanco */
.cover__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(243, 242, 242, .94) 0%,
    rgba(243, 242, 242, .55) 16%,
    rgba(32, 31, 29, 0)      34%,
    rgba(32, 31, 29, .12)    72%,
    rgba(32, 31, 29, .5)     100%
  );
}
.cover__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.cover__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 11vw, 62px);
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em; /* compensa el tracking de la última letra */
  color: var(--text);
}
.cover__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cover__rule {
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: .8;
}
.cover__hint {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #f6f4f1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.cover__hint-text {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1.7;
}
.cover__hint-line {
  display: block;
  width: 1px;
  height: 26px;
  background: currentColor;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ---------- 2 · Bienvenida ---------- */
.section--welcome { padding-top: 110px; padding-bottom: 96px; }

/* ---------- 3 · Cuenta regresiva ---------- */
.section--countdown {
  padding-bottom: 104px;
  text-align: center;
}
.count__days {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(76px, 25vw, 116px);
  line-height: .95;
  letter-spacing: .14em;
  text-indent: .14em;
}
.label--wide { margin-bottom: 26px; }
.count__days-label { margin: 14px 0 44px; }
.count__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 340px;
  margin: 0 auto;
}
.count__unit {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.count__value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .2em;
  text-indent: .2em;
}
.count__label {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-4);
}
.count__footer {
  margin-top: 52px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--body);
}

/* ---------- 4 · Todo comenzó aquí ---------- */
.section--story { padding-bottom: 104px; }
.section--story .h2 { margin-bottom: 44px; }

/* Zigzag: foto · texto / texto · foto. No colapsar a una columna. */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
  align-items: start;
}
.story__photo-a { grid-column: 1; grid-row: 1; }
.story__text-a  { grid-column: 2; grid-row: 1; margin-top: 2px; }
.story__photo-b { grid-column: 2; grid-row: 2; }
.story__text-b  { grid-column: 1; grid-row: 2; align-self: end; }
.story__text {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: .045em;
  text-align: justify;
  hyphens: auto;
}

/* ---------- 5 · Save the date ---------- */
.section--video { padding-bottom: 104px; }
.section--video .h2 { margin-bottom: 44px; }

/* ---------- 6 · 7 · Ceremonia y recepción ---------- */
.section--ceremony  { padding-bottom: 88px; }
.section--reception { padding-bottom: 104px; }
.section--ceremony .h2,
.section--reception .h2 { margin-bottom: 38px; }

.event__when {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 38px;
}
.event__date {
  font-size: 12.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.event__time {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  letter-spacing: .16em;
}
.event__where {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 34px;
  font-size: 13.5px;
  line-height: 1.75;
  letter-spacing: .13em;
  color: var(--text-2);
}

/* ---------- 8 · Código de vestimenta ---------- */
.section--dress {
  padding-bottom: 104px;
  text-align: center;
}
.section--dress .h2 { margin-bottom: 40px; }
.dress__code {
  margin-top: 32px;
  font-size: 13px;
  letter-spacing: .42em;
  text-transform: uppercase;
}
.label--palette {
  margin-bottom: 26px;
  font-size: 10.5px;
  letter-spacing: .32em;
}
.swatches {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.swatch {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--swatch);
}
.swatch--dark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dress__note {
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- 9 · 10 · Regalos y hospedaje ---------- */
.section--gifts,
.section--lodging { padding-bottom: 104px; }
.section--gifts .h2,
.section--lodging .h2 { margin-bottom: 20px; }
.section--gifts .intro,
.section--lodging .intro { margin-bottom: 42px; }

/* ---------- 11 · Confirmar asistencia ---------- */
.section--rsvp {
  padding-bottom: 110px;
  text-align: center;
}
.phrase--rsvp {
  margin-bottom: 76px;
  text-align: left;
}
.label--rsvp {
  margin-bottom: 28px;
  font-size: 12px;
  letter-spacing: .34em;
}

/* Perfilado, nunca relleno — regla del sistema Classical */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 18px 26px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-text);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.btn:active { background: rgba(182, 130, 53, .18); }

.rsvp__deadline {
  margin-top: 64px;
  font-size: 11px;
  line-height: 2;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- 12 · Cierre ---------- */
.section--closing { padding: 0; }
.closing__head { padding: 0 var(--gutter); }
.closing__head .h2 { margin-bottom: 48px; }
.closing__img {
  width: 100%;
  height: auto;
  filter: saturate(.94) sepia(.05);
}
.closing__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 44px var(--gutter) 64px;
}
.closing__sign {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: .06em;
}
.closing__date {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-3);
  white-space: nowrap;
}

/* ---------- Hover: solo con puntero real ----------
   En móvil un tap dejaría el estado pegado. */
@media (hover: hover) {
  a:hover { color: var(--accent-text); }

  .link-rule:hover {
    color: var(--accent-press);
    border-bottom-color: var(--accent-text);
  }
  .link-rule.is-pending:hover { color: var(--accent-text); }

  .card--link:hover {
    border-color: var(--accent);
    background: #f7f3ec;
  }

  .btn:hover {
    background: rgba(182, 130, 53, .09);
    color: var(--accent-press);
  }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover__hint-line { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}