@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baskerville Web";
  src: url("fonts/Baskerville-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lucida Bright Web";
  src: url("fonts/LucidaBright-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --crema: #f6efe6;
  --dorado: #a88654;
  --dorado-oscuro: #6e5530;
  --blanco: #f9f6f2;
  --cafe: #5f3903;
  --oro: #ad8955;

  --serif: "Playfair Display", Georgia, serif;
}

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

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

body {
  background: var(--crema);
  color: var(--dorado-oscuro);
  font-family: var(--serif);
  overflow-x: hidden;
  /* En Mac el navegador engrosa el texto; así se parece más a Illustrator */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

/* ---------- HERO ----------
   Medidas tomadas del diseño (frame de 1108 × 1160 px).
   --u = 1 px del diseño, escalado al tamaño real del hero. */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1108 / 1160;
  max-height: 100vh;
  max-height: 100svh;
  overflow: hidden;
  container-type: size;
}

.hero__media {
  position: absolute;
  inset: -10% 0 -10% 0; /* margen extra para el parallax */
  will-change: transform;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Igual que en Illustrator: degradado negro → transparente, capa al 65 % */
  background: linear-gradient(to top, #000 0%, transparent 100%);
  opacity: 0.65;
}

/* Monograma arriba a la izquierda, como en una barra de navegación */
.hero__logo {
  --u: min(100cqw / 1108, 100cqh / 1160);
  position: absolute;
  z-index: 1;
  top: calc(53 * var(--u));
  left: calc(32 * var(--u));
  width: calc(123 * var(--u));
}

.hero__content {
  --u: min(100cqw / 1108, 100cqh / 1160);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(69 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--blanco);
  font-family: var(--serif);
  font-weight: 400;
  /* Tracking 25 de Illustrator = 25/1000 em */
  letter-spacing: 0.025em;
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  line-height: 1;
}

.hero__name {
  font-size: calc(93 * var(--u));
  text-transform: uppercase;
  line-height: 0.8;
  margin-right: -0.025em;
}

.hero__amp {
  display: flex;
  align-items: center;
  gap: calc(31 * var(--u));
  font-size: calc(96 * var(--u));
  line-height: 0.7;
  margin: calc(17 * var(--u)) 0 calc(8 * var(--u));
}

.hero__amp::before,
.hero__amp::after {
  content: "";
  width: calc(125 * var(--u));
  height: max(1px, calc(2 * var(--u)));
  background: currentColor;
}

.hero__date {
  margin-top: calc(30 * var(--u));
  font-size: calc(38 * var(--u));
  line-height: 1;
  font-variant-numeric: lining-nums;
  margin-right: -0.025em;
}

.hero__ornament {
  width: calc(110 * var(--u));
  margin-top: calc(20 * var(--u));
}

/* ---------- CUENTA REGRESIVA ----------
   Medidas tomadas del diseño (composición de 1636 px de ancho).
   --u = 1 px del diseño; en pantallas grandes se limita para que no crezca sin fin. */
.countdown {
  container-type: inline-size;
  z-index: 2; /* las polaroids sobresalen por encima del bloque siguiente */
}

/* Fondo de papel compartido (cuenta regresiva y lugar) */
.papel {
  position: relative;
  background-color: #f3e7d8;
}
.papel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/papel.jpg") center / cover no-repeat;
  opacity: 0.6;
  pointer-events: none;
}
.papel > * { position: relative; }

.countdown__inner {
  --escala: 0.9; /* tamaño de la cuenta regresiva respecto al diseño */
  --u: calc(min(100cqw / 1636, 0.55px) * var(--escala));
  position: relative;
  width: calc(1636 * var(--u));
  margin: 0 auto;
  padding: calc(82 * var(--u)) 0 calc(57 * var(--u));
  color: var(--cafe);
}

.countdown__divider {
  width: calc(939 * var(--u));
  margin: 0 auto;
}

.countdown__row {
  position: relative;
  height: calc(353 * var(--u));
}

.countdown__leaf {
  position: absolute;
  top: calc(84 * var(--u));
  width: calc(127 * var(--u));
}
.countdown__leaf--izq { left: calc(77 * var(--u)); }
.countdown__leaf--der { left: calc(1433 * var(--u)); }

.countdown__item {
  position: absolute;
  top: calc(55 * var(--u));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Baskerville Web", Baskerville, Georgia, serif;
  line-height: 1;
  white-space: nowrap;
}
.countdown__item--dias     { left: calc(337 * var(--u)); }
.countdown__item--horas    { left: calc(657 * var(--u)); }
.countdown__item--minutos  { left: calc(978 * var(--u)); }
.countdown__item--segundos { left: calc(1298 * var(--u)); }

.countdown__num {
  font-size: calc(154 * var(--u));
  font-variant-numeric: lining-nums tabular-nums; /* que los segundos no "bailen" */
}

.countdown__label {
  margin-top: calc(-6 * var(--u));
  font-size: calc(47 * var(--u));
  text-transform: uppercase;
}

/* ---------- POLAROIDS ----------
   Medidas tomadas del diseño original (ancho de referencia 1000 px).
   --p = 1 px de esa referencia; en escritorio se limita a 900 px de composición. */
.polaroids {
  --p: min(100cqw / 1000, 0.9px);
  --s: 1.1; /* tamaño de las polaroids respecto al diseño */
  position: relative;
  width: calc(1000 * var(--p));
  height: calc(373 * var(--s) * var(--p)); /* aquí termina el papel */
  margin: calc(41 * var(--p)) auto 0;
}

.polaroid {
  position: absolute;
  width: calc(325 * var(--s) * var(--p));
  aspect-ratio: 490 / 624;
}
.polaroid--izq    { left: calc((500 + (86.5 - 500) * var(--s)) * var(--p)); top: calc(77.5 * var(--s) * var(--p)); transform: rotate(-10deg); }
.polaroid--der    { left: calc((500 + (563.5 - 500) * var(--s)) * var(--p)); top: calc(73.5 * var(--s) * var(--p)); transform: rotate(5deg); }
.polaroid--centro { left: calc((500 + (321 - 500) * var(--s)) * var(--p)); top: 0; }

/* ---------- INVITAR ----------
   Medidas tomadas del diseño (frame de 1300 px de ancho).
   --r = 1 px del diseño; mismo tope que las polaroids en escritorio. */
.invitar {
  --r: min(100cqw / 1300, 0.6923px);
  position: relative;
  z-index: 1;
  container-type: inline-size;
  background: #f9f0e8;
  color: var(--oro);
  text-align: center;
  padding: calc(258 * var(--r)) 0 calc(74 * var(--r));
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* las unidades cq necesitan un contenedor por encima: se calculan en los hijos */
.invitar > * {
  --r: min(100cqw / 1300, 0.6923px);
  --t: 0.9; /* tamaño del texto y botón respecto al diseño */
}

.invitar__titulo {
  font-family: "Lucida Bright Web", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(72.7 * var(--t) * var(--r));
  line-height: 1.155;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.invitar__divider {
  width: calc(725 * var(--r));
  margin-top: calc(24 * var(--r));
}

.invitar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(717 * var(--t) * var(--r));
  height: calc(110 * var(--t) * var(--r));
  margin-top: calc(54 * var(--r));
  border-radius: 999px;
  background: var(--oro);
  color: var(--blanco);
  font-family: "Lucida Bright Web", Georgia, serif;
  font-style: italic;
  font-size: calc(49 * var(--t) * var(--r));
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.invitar__btn:hover { background: #9a7745; }
.invitar__btn:active { transform: scale(0.98); }

.invitar__nota {
  margin-top: calc(18 * var(--r));
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: calc(33 * var(--t) * var(--r));
  line-height: 1;
}

/* ---------- FECHA ----------
   Medidas del diseño (frame de 1300 px), al mismo 90 % que la sección anterior. */
.fecha {
  --r: min(100cqw / 1300, 0.6923px);
  --t: 0.9;
  container-type: inline-size;
  background: var(--oro);
  color: #f3e7d8;
  text-align: center;
  font-family: "Lucida Bright Web", Georgia, serif;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: calc(108.5 * var(--t) * var(--r)) 0 calc(80 * var(--t) * var(--r));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fecha > * {
  --r: min(100cqw / 1300, 0.6923px);
  --t: 0.9;
}

.fecha__dia {
  display: flex;
  align-items: center;
  gap: calc(23 * var(--t) * var(--r));
  font-size: calc(48.4 * var(--t) * var(--r));
}
.fecha__dia::before,
.fecha__dia::after {
  content: "";
  width: calc(153 * var(--t) * var(--r));
  height: max(1px, calc(2 * var(--t) * var(--r)));
  background: currentColor;
}

.fecha__fecha {
  margin-top: calc(21 * var(--t) * var(--r));
  font-size: calc(72.7 * var(--t) * var(--r));
}

.fecha__hora {
  margin-top: calc(58 * var(--t) * var(--r));
  font-size: calc(66.2 * var(--t) * var(--r));
}

.fecha__divider {
  width: calc(1010 * var(--t) * var(--r));
  margin-top: calc(52 * var(--t) * var(--r));
  opacity: 0.5;
}

/* ---------- LUGAR ----------
   Medidas del diseño (frame de 1300 px). Textos, icono y botones al 90 % como el resto. */
.lugar {
  --r: min(100cqw / 1300, 0.6923px);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--oro);
  font-family: "Lucida Bright Web", Georgia, serif;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  padding: calc(84 * var(--r)) 0 calc(113 * var(--t) * var(--r));
  --t: 0.9;
}
.lugar > * {
  --r: min(100cqw / 1300, 0.6923px);
  --t: 0.9;
}

/* En móvil el bloque de texto no crea caja propia: sus hijos siguen la columna de .lugar */
.lugar picture,
.lugar__info { display: contents; }

.lugar__foto {
  position: relative; /* por encima de la textura de papel (va dentro de <picture>) */
  width: calc(1134 * var(--r));
  aspect-ratio: 2000 / 1427;
  object-fit: cover;
}

.lugar__icono {
  width: calc(139 * var(--t) * var(--r));
  margin-top: calc(86 * var(--t) * var(--r));
}

.lugar__etiqueta {
  display: flex;
  align-items: center;
  gap: calc(64 * var(--t) * var(--r));
  margin-top: calc(57 * var(--t) * var(--r));
  font-size: calc(46 * var(--t) * var(--r));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lugar__etiqueta::before,
.lugar__etiqueta::after {
  content: "";
  width: calc(166 * var(--t) * var(--r));
  height: max(1px, calc(2 * var(--t) * var(--r)));
  background: currentColor;
  opacity: 0.35;
}

.lugar__nombre {
  margin-top: calc(25 * var(--t) * var(--r));
  font-weight: 400;
  font-size: calc(76.6 * var(--t) * var(--r));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lugar__botones {
  display: flex;
  gap: calc(120 * var(--t) * var(--r));
  margin-top: calc(44 * var(--t) * var(--r));
}

.lugar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--t) * var(--r));
  width: calc(287 * var(--t) * var(--r));
  height: calc(65 * var(--t) * var(--r));
  border-radius: 999px;
  background: var(--oro);
  color: #f9f0e8;
  font-size: calc(48 * var(--t) * var(--r));
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lugar__btn img { width: calc(33 * var(--t) * var(--r)); }
.lugar__btn:hover { background: #9a7745; }
.lugar__btn:active { transform: scale(0.97); }

.lugar__direccion {
  margin-top: calc(81 * var(--t) * var(--r));
  font-size: calc(26.8 * var(--t) * var(--r));
  color: #6e5a40;
}

/* ---------- WEDDING TIMELINE ----------
   Medidas del diseño (frame de 1300 px), toda la sección al 90 % como las anteriores.
   Coordenadas de cada momento: --y = altura del corazón en la línea,
   --dx/--dy = desplazamiento del icono respecto al corazón, --w = ancho del icono. */
.timeline {
  --r: min(100cqw / 1300, 0.6923px);
  --t: 0.9;
  container-type: inline-size;
  background: #f9f0e8;
  color: var(--oro);
  font-family: "Lucida Bright Web", Georgia, serif;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: calc(118 * var(--t) * var(--r)) 0 calc(169 * var(--t) * var(--r));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline > * {
  --r: min(100cqw / 1300, 0.6923px);
  --t: 0.9;
  --k: calc(var(--t) * var(--r));
}

.timeline__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  font-size: calc(76.6 * var(--k));
}
/* línea bajo el título */
.timeline__titulo::after {
  content: "";
  width: calc(302 * var(--k));
  height: max(1px, calc(3 * var(--k)));
  margin-top: calc(36 * var(--k));
  background: currentColor;
}

.timeline__mapa {
  position: relative;
  width: calc(1300 * var(--k));
  height: calc(1557 * var(--k));
  margin-top: calc(149 * var(--k));
}

.timeline__linea {
  position: absolute;
  left: calc((710 - 24.6) * var(--k));
  top: 0;
  width: calc(49.2 * var(--k));
}

.timeline__lista { list-style: none; }

.tl-label,
.tl-icono {
  position: absolute;
  top: calc(var(--y) * var(--k));
  transform: translateY(-50%);
}

.tl-label { font-size: calc(43 * var(--k)); }
.tl-label--izq { right: calc((1300 - 710 + 85) * var(--k)); }
.tl-label--der { left: calc((710 + 68) * var(--k)); }

.tl-icono {
  width: calc(var(--w) * var(--k));
  left: calc((710 + var(--dx) - var(--w) / 2) * var(--k));
  top: calc((var(--y) + var(--dy)) * var(--k));
}

/* ---------- CIERRE Y FOOTER ----------
   Medidas del diseño (frame de 1300 px), al 90 % como el resto. */
.cierre,
.footer {
  --r: min(100cqw / 1300, 0.6923px);
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cierre > *,
.footer > * {
  --r: min(100cqw / 1300, 0.6923px);
  --k: calc(0.9 * var(--r));
}

.cierre {
  background: var(--oro);
  min-height: calc(160 * 0.9 * var(--r));
}

.cierre__texto {
  color: #f3e7d8;
  font-family: "Lucida Bright Web", Georgia, serif;
  font-style: italic;
  font-size: calc(68 * var(--k));
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer {
  background: var(--cafe);
  padding: calc(54 * 0.9 * var(--r)) 0 calc(56 * 0.9 * var(--r));
}

.footer__logo {
  width: calc(189 * var(--k));
}

/* ---------- ANIMACIONES DE ENTRADA ----------
   Solo se activan si hay JS (clase .anim en <html>). Se usa la propiedad
   `translate` para no pisar los `transform` que ya tienen algunos elementos
   (giro de las polaroids, centrado de la cuenta regresiva y del timeline). */
.anim .reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.9s ease,
    translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}
.anim .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ---------- ESCRITORIO ---------- */
@media (min-width: 900px) {
  /* Hero más bajo y con foto horizontal */
  .hero {
    aspect-ratio: auto;
    height: 82vh;
    height: 82svh;
  }
  .hero__media picture { display: contents; }
  .hero__img { object-position: center 55%; }
  /* Título del hero un 15 % más grande */
  .hero__content { --u: calc(min(100cqw / 1108, 100cqh / 1160) * 1.15); }

  /* Lugar en horizontal: foto a la izquierda y datos a la derecha.
     Medidas del diseño de escritorio (frame de 2000 px). */
  .lugar {
    display: grid;
    grid-template-columns: 55.9% 1fr;
    grid-template-rows: 100%;
    aspect-ratio: 2000 / 789;
    padding: 0;
  }
  /* --d = 1 px del diseño; el 0.8 reduce textos, icono y botones para que respiren */
  .lugar > * { --d: calc(100cqw / 2000 * 0.8); }
  .lugar__foto {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 67% center;
    grid-area: 1 / 1;
  }
  .lugar__info {
    grid-area: 1 / 2;
    padding-inline: 4cqw; /* aire respecto a la foto y al borde derecho */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .lugar__icono { width: calc(112 * var(--d)); margin-top: 0; }
  .lugar__etiqueta {
    margin-top: calc(41 * var(--d));
    gap: calc(50 * var(--d));
    font-size: calc(48 * var(--d));
  }
  .lugar__etiqueta::before,
  .lugar__etiqueta::after { width: calc(133 * var(--d)); opacity: 1; }
  .lugar__nombre { margin-top: calc(15 * var(--d)); font-size: calc(61.3 * var(--d)); }
  .lugar__botones { margin-top: calc(34 * var(--d)); gap: calc(96 * var(--d)); }
  .lugar__btn {
    width: calc(230 * var(--d));
    height: calc(52 * var(--d));
    gap: calc(8 * var(--d));
    font-size: calc(38 * var(--d));
  }
  .lugar__btn img { width: calc(30 * var(--d)); }
  .lugar__direccion { margin-top: calc(64 * var(--d)); font-size: calc(21.5 * var(--d)); }

  /* Wedding Timeline en horizontal: 6 columnas en zigzag sobre una línea con corazones.
     --e = 1 px de una composición de 1440 px (se limita para pantallas grandes). */
  .timeline__linea { display: none; }
  .timeline__mapa {
    --e: min(100cqw / 1440, 1px);
    width: calc(1200 * var(--e));
    height: auto;
    margin-top: calc(80 * var(--e));
  }
  .timeline__lista {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .timeline__lista li {
    display: grid;
    grid-template-rows: calc(150 * var(--e)) calc(40 * var(--e)) calc(150 * var(--e));
    justify-items: center;
  }
  /* Tramo de línea + corazón de cada momento */
  .timeline__lista li::before {
    content: "";
    grid-row: 2;
    width: 100%;
    height: 100%;
    background:
      url("img/corazon.svg") center / auto 80% no-repeat,
      linear-gradient(currentColor, currentColor) left center / calc(50% - 22 * var(--e)) 2px no-repeat,
      linear-gradient(currentColor, currentColor) right center / calc(50% - 22 * var(--e)) 2px no-repeat;
  }
  .tl-label,
  .tl-icono {
    position: static;
    transform: none;
  }
  .tl-label { font-size: calc(24 * var(--e)); }
  .tl-icono { width: calc(var(--w) * 0.55 * var(--e)); }
  /* Impares: icono arriba y texto abajo; pares: al revés */
  .timeline__lista li:nth-child(odd) .tl-icono  { grid-row: 1; align-self: end;   margin-bottom: calc(22 * var(--e)); }
  .timeline__lista li:nth-child(odd) .tl-label  { grid-row: 3; align-self: start; margin-top: calc(26 * var(--e)); }
  .timeline__lista li:nth-child(even) .tl-label { grid-row: 1; align-self: end;   margin-bottom: calc(26 * var(--e)); }
  .timeline__lista li:nth-child(even) .tl-icono { grid-row: 3; align-self: start; margin-top: calc(22 * var(--e)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media { transform: none !important; }
  .anim .reveal { opacity: 1; translate: none; transition: none; }
}