/* ————— Sofi & Luis · Golden hour, editorial ————— */

:root {
  --ivory: #FAF6EF;
  --ivory-2: #F3EDE2;
  --ink: #2E2419;
  --ink-soft: #5C4F3F;
  --rust: #B4653A;
  --olive: #7A7A52;
  --gold: #C99B5F;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, Helvetica, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

.amp { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--rust); }

h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 1.4rem;
}

/* ————— Nav ————— */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: background .5s ease, border-color .5s ease;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
nav a { color: var(--ink); text-decoration: none; transition: color .5s ease; }
/* sobre el hero: transparente y con texto claro */
nav.over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
nav.over-hero a { color: #FFF9EF; text-shadow: 0 1px 18px rgba(46,36,25,.45); }
nav.over-hero .amp, nav.over-hero .nav-links a.active { color: #F5D9A8; }
.nav-mono { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .08em; }
.nav-links { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }
.nav-links a {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  transition: opacity .25s;
}
.nav-links a:hover { opacity: 1; }
@media (max-width: 640px) {
  nav { padding: .9rem 1.1rem; }
  .nav-links { gap: .85rem; }
  .nav-links a { font-size: .64rem; letter-spacing: .08em; }
}

/* ————— Hero ————— */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; }
.hero-media img {
  object-fit: cover;
  animation: kenburns 22s ease-out forwards;
  transform-origin: 40% 60%;
}
/* en vertical, encuadre con las siluetas centradas */
@media (orientation: portrait) {
  .hero-media img { object-position: 14% 70%; transform-origin: 14% 70%; }
}
@keyframes kenburns {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(46,36,25,.18), transparent 30%, transparent 62%, rgba(46,36,25,.34));
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #FFF9EF;
  padding: 0 1.4rem;
  text-shadow: 0 1px 30px rgba(46,36,25,.35);
}
.hero-eyebrow {
  font-size: .8rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero-title .amp { color: #F5D9A8; font-size: .82em; }
.hero-sub {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  letter-spacing: .06em;
}

/* staged title entrance */
.t1, .t2, .t3, .t4 { opacity: 0; animation: rise 1.2s cubic-bezier(.22,.8,.3,1) forwards; }
.t1 { animation-delay: .5s; }
.t2 { animation-delay: .95s; }
.t3 { animation-delay: 1.55s; }
.t4 { animation-delay: 2.4s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ————— Sections base ————— */
section { padding: clamp(5rem, 11vw, 9.5rem) clamp(1.4rem, 6vw, 4rem); }

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.22,.8,.3,1), transform 1s cubic-bezier(.22,.8,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .12s; }
.d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; }
.d4 { transition-delay: .48s; }
.d5 { transition-delay: .6s; }

/* ————— La invitación ————— */
.invitacion { max-width: 1200px; margin: 0 auto; }
.inv-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.inv-text h2 { margin-bottom: 1.8rem; }
.inv-text p { max-width: 34rem; color: var(--ink-soft); }
.inv-text p + p { margin-top: 1.1rem; }
.inv-text strong { color: var(--ink); font-weight: 500; }
.inv-close {
  margin-top: 2rem !important;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink) !important;
}
.inv-close em { color: var(--rust); }
.inv-photo {
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 24px 24px 0 -1px var(--ivory-2);
}
@media (max-width: 860px) {
  .inv-grid { grid-template-columns: 1fr; }
  .inv-photo { order: -1; max-width: 480px; }
}

/* ————— Full-bleed banners ————— */
.bleed {
  height: clamp(340px, 70vh, 720px);
  overflow: hidden;
  position: relative;
}
.bleed img { height: 118%; width: 100%; object-fit: cover; will-change: transform; }

/* panorámica a ancho completo, altura natural */
.bleed-pano { width: 100%; }
.bleed-pano img { width: 100%; height: auto; display: block; }
/* en móvil, recorte con zoom hacia la pareja */
@media (max-width: 640px) {
  .bleed-pano { height: 320px; overflow: hidden; }
  .bleed-pano img { height: 100%; object-fit: cover; object-position: 46% 62%; }
}

/* ————— El gran día ————— */
.dia { max-width: 760px; margin: 0 auto; }
.dia-nota {
  font-style: italic;
  color: var(--olive);
  font-size: .95rem;
  margin-top: .8rem;
}
.timeline {
  list-style: none;
  margin-top: 4rem;
  position: relative;
  padding-left: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: clamp(74px, 12vw, 96px);
  top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--rust) 45%, transparent) 8%, color-mix(in srgb, var(--rust) 45%, transparent) 92%, transparent);
}
.tl-item {
  display: grid;
  grid-template-columns: clamp(74px, 12vw, 96px) 1fr;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  padding: 1.6rem 0;
  position: relative;
}
.tl-item::after {
  content: "";
  position: absolute;
  left: clamp(74px, 12vw, 96px);
  top: 2.35rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid var(--rust);
  transform: translateX(-4.5px);
}
.tl-time {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rust);
  text-align: right;
  padding-right: 1.6rem;
  padding-top: .35rem;
  white-space: nowrap;
}
.tl-body { padding-left: 1.2rem; }
.tl-body h3 {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.35rem;
  margin-bottom: .35rem;
}
.tl-body p { color: var(--ink-soft); max-width: 30rem; }
.tbc {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--olive);
  border: 1px solid color-mix(in srgb, var(--olive) 40%, transparent);
  border-radius: 99px;
  padding: .1rem .6rem;
  white-space: nowrap;
}

/* ————— Galería ————— */
.galeria { padding-left: 0; padding-right: 0; text-align: center; background: var(--ivory-2); }
.galeria .kicker, .galeria h2 { padding: 0 1.4rem; }
.g { margin-top: 4.5rem; display: grid; gap: clamp(.8rem, 2vw, 1.6rem); }
.g figure { overflow: hidden; }
.g-full {
  height: clamp(380px, 88vh, 860px);
}
.g-full img { transition: transform 1.2s ease; }
.g-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.8rem, 2vw, 1.6rem);
  padding: 0 clamp(1rem, 6vw, 6rem);
}
.g-pair figure { aspect-ratio: 3 / 4; }
@media (max-width: 640px) {
  .g-pair { grid-template-columns: 1fr; padding: 0 1rem; }
  .g-full { height: 60vh; }
  /* encuadres ajustados para el recorte vertical del móvil */
  .g-full img[src*="img-430"] { object-position: 15% 50%; }
  .g-full:has(img[src*="img-430"]) { height: 40vh; }
}

.photo-credit {
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  padding: 0 1.4rem;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.photo-credit strong { color: var(--ink); font-weight: 500; }
.photo-credit em { color: var(--rust); }

/* ————— Cierre ————— */
.cierre {
  position: relative;
  height: clamp(520px, 96vh, 900px);
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.cierre-media { position: absolute; inset: 0; overflow: hidden; }
.cierre-media img { height: 118%; will-change: transform; }
.cierre-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(46,36,25,.45));
}
.cierre-content {
  position: relative; z-index: 2;
  text-align: center;
  color: #FFF9EF;
  text-shadow: 0 1px 26px rgba(46,36,25,.4);
  align-self: end;
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
.cierre-mono {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 320;
  letter-spacing: .1em;
}
.cierre-mono .amp { color: #F5D9A8; }
.cierre-date {
  margin-top: .8rem;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.cierre-line {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
}

/* ————— Subpáginas ————— */
.subpage nav { position: sticky; }
.nav-links a.active { opacity: 1; color: var(--rust); }
.page-head {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 7rem) clamp(1.4rem, 6vw, 4rem) 0;
  text-align: left;
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
.page-head .kicker { margin-bottom: 1.2rem; }
.page-intro {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
}
.subpage-dia { padding-top: clamp(2rem, 5vw, 3.5rem); }

.prep {
  max-width: 760px;
  margin: 0 auto;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.prep-item {
  padding: 2.2rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.prep-item:last-child { border-bottom: none; }
.prep-item h3 {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.5rem;
  margin-bottom: .7rem;
}
.prep-item p { color: var(--ink-soft); max-width: 36rem; }
.prep-item p + p { margin-top: .6rem; }
.prep-item .check li { color: var(--ink-soft); font-size: .95rem; }
.prep-item strong { color: var(--ink); font-weight: 500; }

/* ————— Página "El día" detallada ————— */
.detail-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.4rem, 6vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.keyfacts, .cheat {
  background: var(--ivory-2);
  border-radius: 4px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  margin-bottom: 2rem;
}
.cheat { margin-top: 2rem; margin-bottom: 0; }
.kf-title {
  font-size: 1.3rem;
  font-weight: 450;
  margin-bottom: 1.2rem;
}
.kf-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.6rem;
}
.kf-grid li {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.45;
  padding: .35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
.kf-grid strong {
  display: block;
  color: var(--rust);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
}
@media (max-width: 560px) { .kf-grid { grid-template-columns: 1fr; } }

/* acordeones */
.acc {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 1.35rem .2rem;
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  transition: color .25s;
}
.acc summary:hover { color: var(--rust); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+";
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--rust);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 1rem;
  transition: transform .3s ease;
}
.acc[open] summary::after { content: "–"; }
.acc-body { padding: .2rem .2rem 1.8rem; }
.acc-sub {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--rust);
  margin: 1.6rem 0 .8rem;
}
.acc-sub:first-child { margin-top: .4rem; }
.acc-note {
  font-style: italic;
  color: var(--olive);
  font-size: .95rem;
  margin: .4rem 0 1rem;
}

/* mini-timeline dentro de acordeones */
.mini { list-style: none; }
.mini > li {
  position: relative;
  padding: .7rem 0 .7rem 112px;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 9%, transparent);
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.mini > li:last-child { border-bottom: none; }
.mini > li > span:first-child {
  position: absolute;
  left: 0;
  top: .78rem;
  width: 96px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--rust);
}
.mini > li > p { margin-top: .4rem; }
.mini strong { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .mini > li { padding-left: 0; padding-top: .6rem; }
  .mini > li > span:first-child { position: static; display: block; width: auto; margin-bottom: .15rem; }
}

/* sublistas de tareas */
.check {
  list-style: none;
  margin: .5rem 0 .3rem;
}
.check li {
  position: relative;
  padding-left: 1.3rem;
  margin: .3rem 0;
}
.check li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* lista numerada de fotos */
.shots {
  margin: .6rem 0 .3rem 1.4rem;
}
.shots li { margin: .25rem 0; }

/* casas / grupos */
.houses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: .6rem 0 1rem;
}
@media (max-width: 560px) { .houses { grid-template-columns: 1fr; } }
.house {
  background: var(--ivory-2);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
}
.house h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: .6rem;
}
.house ul { list-style: none; }
.house ul li {
  padding: .22rem 0;
  color: var(--ink-soft);
  font-size: .95rem;
}
.house-note {
  margin-top: .7rem;
  font-size: .84rem;
  font-style: italic;
  color: var(--olive);
}

/* ————— Footer ————— */
footer {
  text-align: center;
  padding: 2.4rem 1rem;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

/* ————— Motion preferences ————— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img { animation: none; }
  .t1, .t2, .t3, .t4 { animation-duration: .01s; animation-delay: 0s; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .scroll-cue i { animation: none; }
}