:root {
  --cream: #F4EFE6;
  --cream-deep: #EAE2D4;
  --earth: #4A3728;
  --earth-soft: #7A6555;
  --moss: #5E6B4E;
  --terracotta: #C06A3E;
  --gold: #B8924A;

  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Brush Script MT", cursive;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(96px, 16vh, 180px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--earth);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }

.kicker {
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--moss);
}

.title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
}

/* ---------- Selector de idioma ---------- */
.lang {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(244, 239, 230, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--earth-soft);
}
.lang button {
  border: 0;
  background: none;
  padding: 2px 2px;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { color: var(--earth); font-weight: 500; }
.lang button:hover { color: var(--terracotta); }

/* ---------- Portada ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--earth);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroZoom 18s ease-out both;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.25) 0%, rgba(40, 28, 18, 0.45) 100%);
}
.hero__content { position: relative; z-index: 1; padding: 0 var(--gutter); }
.hero .kicker { color: var(--cream); opacity: 0.9; }
.hero__names {
  font-size: clamp(3.4rem, 12vw, 8.5rem);
  line-height: 0.95;
  font-weight: 400;
}
.hero__names em { font-style: italic; color: #F2C9A6; }
.hero__date {
  margin: 1.75rem 0 0.25rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  letter-spacing: 0.12em;
}
.hero__place {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 40px;
  background: currentColor;
  animation: scrollLine 2.2s ease-in-out infinite;
  transform-origin: top;
}

/* ---------- Vídeo ---------- */
.video {
  padding: calc(var(--section) / 2) var(--gutter);
  text-align: center;
}
.story {
  padding: var(--section) var(--gutter) calc(var(--section) / 2);
  text-align: center;
  font-family: var(--serif);
}
.story .kicker { font-family: var(--sans); }
.story__intro {
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.3;
}
.story__body {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(32px, 4vw, 56px);
  align-items: stretch; /* las tres columnas miden lo mismo */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-size: 1.05rem;
  line-height: 1.6;
}
.story__col p { margin: 0 0 1em; }
.story__col > p:last-child,
.story__col--last > div > p:last-child { margin-bottom: 0; }
/* Foto + firma al pie de la última columna, alineadas con la base de las otras */
.story__col--last { display: flex; flex-direction: column; }
.story__signoff {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.story__outro {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--moss);
}
.story__photo {
  width: 88px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  filter: saturate(0.9);
}
.story__signoff .story__sign {
  margin: 0.9rem 0 0;
  font-family: var(--script);
  font-size: 2.1rem;
  line-height: 1.2;
  text-align: center;
  color: var(--earth);
}
.story__days {
  color: var(--terracotta);
  font-weight: 500;
  font-variant-numeric: lining-nums;
}
.video__frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--earth);
}
.video__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: rgba(40, 28, 18, 0.18);
  cursor: pointer;
  transition: background 0.4s ease;
}
.video__play svg {
  width: clamp(72px, 12vw, 120px);
  transition: transform 0.4s ease;
}
.video__play circle { fill: rgba(244, 239, 230, 0.15); stroke: var(--cream); stroke-width: 1.5; }
.video__play path { fill: var(--cream); }
.video__play:hover { background: rgba(40, 28, 18, 0.32); }
.video__play:hover svg { transform: scale(1.06); }
.video__play:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -6px; }

/* ---------- Cuenta atrás ---------- */
.countdown {
  padding: calc(var(--section) / 2) var(--gutter) var(--section);
  text-align: center;
}
.countdown__grid {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 6vw, 72px);
}
.countdown__grid div { display: flex; flex-direction: column; align-items: center; }
.countdown__grid span {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__grid small {
  margin-top: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--earth-soft);
}
.countdown__done { font-family: var(--serif); font-size: 2.4rem; margin: 0; }

.calendar {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--earth);
  border-radius: 999px;
  background: var(--earth);
  color: var(--cream);
  font: 400 0.62rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover { background: var(--terracotta); border-color: var(--terracotta); }
.btn--ghost { background: transparent; color: var(--earth); }
.btn--ghost:hover { color: var(--cream); }

/* ---------- Planning ---------- */
.plan {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section) var(--gutter);
  background: var(--cream-deep);
  text-align: center;
}
/* Contorno de Andorra muy difuminado de fondo */
.plan__map {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(886px, 97%); /* +15% */
  max-width: none;
  transform: translate(-50%, -50%);
  fill: rgba(184, 146, 74, 0.04);
  stroke: var(--gold);
  stroke-width: 2.875; /* +15% */
  stroke-linejoin: round;
  opacity: 0.45;
  filter: blur(1.5px);
  pointer-events: none;
}
.route {
  max-width: 900px;
  margin: clamp(32px, 6vh, 64px) auto 0;
  padding-top: 56px; /* espacio para los marcadores sobre los pins */
}
.route__box { position: relative; }
.route__svg { width: 100%; overflow: visible; }
.route__line,
.route__walk {
  fill: none;
  stroke: var(--earth);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.route__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.route__walk {
  stroke: var(--terracotta);
  stroke-dasharray: 2 7;
  opacity: 0;
  transition: opacity 1s ease 2.1s;
}
.route__pin {
  fill: var(--cream-deep);
  stroke: var(--earth);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(-8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.route__pin--3 { stroke: var(--terracotta); }
.route__label {
  font: italic 400 15px var(--serif);
  fill: var(--terracotta);
  opacity: 0;
  transition: opacity 1s ease 2.6s;
}

/* Foto + nombre encima de cada pin */
.marker {
  position: absolute;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  opacity: 0;
  transform: translate(-50%, calc(-100% + 10px));
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.marker img {
  width: 104px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--cream);
  box-shadow: 0 4px 14px rgba(74, 55, 40, 0.15);
  filter: saturate(0.8) sepia(0.12);
}
.marker span {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--earth);
}
/* Posición = punta superior del pin, en % del viewBox (x/600, (y-32)/240) */
.marker--1 { left: 11.67%; top: 70.4%; }
.marker--2 { left: 66.67%; top: 30.4%; }
.marker--3 { left: 90%; top: 61.7%; }
.route__pin--1, .marker--1 { transition-delay: 0.1s; }
.route__pin--2, .marker--2 { transition-delay: 1.6s; }
.route__pin--3, .marker--3 { transition-delay: 2.6s; }

.route.is-drawn .route__line { stroke-dashoffset: 0; }
.route.is-drawn .route__walk,
.route.is-drawn .route__label { opacity: 1; }
.route.is-drawn .route__pin { opacity: 1; transform: none; }
.route.is-drawn .marker { opacity: 1; transform: translate(-50%, -100%); }

.stops {
  list-style: none;
  margin: clamp(40px, 8vh, 72px) auto 0;
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
.stop { display: flex; flex-direction: column; align-items: center; }
.stop__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 0.9rem;
  fill: none;
  stroke: var(--earth);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stop__num {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--terracotta);
}
.stop h3 { font-size: 1.9rem; line-height: 1.15; }
.stop p { margin: 0.4rem 0 1rem; color: var(--earth-soft); max-width: 24ch; }
.stop__maps {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--earth);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}
.stop__maps:hover { color: var(--terracotta); }
.plan__more {
  margin: clamp(48px, 8vh, 80px) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  color: var(--moss);
}

/* ---------- Portada de cierre ---------- */
.closing-cover {
  /* a todo el ancho aunque esté dentro del cierre (que tiene márgenes laterales) */
  width: 100vw;
  margin: 3.5rem 0 0 calc(50% - 50vw);
  aspect-ratio: 2.17; /* banda panorámica */
  overflow: hidden;
}
.closing-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%; /* la pareja sobre la cresta */
}

/* ---------- Cierre ---------- */
.closing {
  padding: var(--section) var(--gutter);
  text-align: center;
}
.closing__photo {
  width: min(320px, 70vw);
  aspect-ratio: 4 / 5;
  margin: 0 auto 2.5rem;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
}
.closing__planner {
  margin: -0.5rem auto 3.5rem;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.35;
}
.closing__planner em { color: var(--terracotta); }
.closing__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
}

.closing__sign {
  margin: 3rem 0 0.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--moss);
}
.closing__date {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--earth-soft);
}

.credits {
  margin: 4rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--earth-soft);
  opacity: 0.7;
}

.credits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.credits a:hover { color: var(--terracotta); }

/* ---------- Animaciones ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.stops .reveal:nth-child(2) { transition-delay: 0.15s; }
.stops .reveal:nth-child(3) { transition-delay: 0.3s; }

@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes scrollLine {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Móvil ---------- */
@media (max-width: 1000px) {
  .story__body { grid-template-columns: 1fr; max-width: 36rem; }
  .story__col + .story__col { margin-top: 1em; }
  .story__signoff { padding-top: 2rem; }
  .story__photo { width: 140px; }
}

@media (max-width: 720px) {
  .stops { grid-template-columns: 1fr; }
  .countdown__grid { gap: 18px; }
  .countdown__grid small { letter-spacing: 0.14em; }
  .route__label { font-size: 24px; }
  .route { padding-top: 84px; }
  .plan__map { top: 26%; width: 100%; stroke-width: 4.6; }
  .closing-cover { aspect-ratio: auto; height: 408px; }
  .closing-cover img { object-position: 50% 50%; }
  .marker { width: 96px; gap: 4px; padding-bottom: 4px; }
  .marker img { width: 66px; border-width: 2px; }
  .marker span { font-size: 0.85rem; max-width: 76px; }
}

/* Movimiento reducido (p. ej. Windows con "Efectos de animación" desactivado):
   se quitan solo los movimientos continuos; los fundidos y la ruta se mantienen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__img, .hero__scroll::after { animation: none; }
}