/* ============================================================
   Olivia & Liam — wedding invitation landing
   Recreación en HTML/CSS estático de kindlyrsvp.my.canva.site/demo28
   Canvas de diseño original: 1366px de ancho (1u = 0.0732vw)
   ============================================================ */

@font-face {
  font-family: 'Madelyn Rough';
  src: url('../assets/fonts/madelyn-rough.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Core Bandi';
  src: url('../assets/fonts/core-bandi.woff2') format('woff2');
  font-display: swap;
}

:root {
  --ink: #23140d;        /* texto principal */
  --brown: #82411a;      /* acento marrón (guest info, botones) */
  --terra: #cf7f60;      /* borde terracota (hero) */
  --terra-dark: #ad5139; /* borde pastillas FAQ */
  --shell: #c28155;      /* ostra */
  --cream: #e9e7e2;      /* fondo crema */
  --cream-hero: #f5ebe8;
  --sand: #e5e0d4;       /* botón RSVP NOW */
  --pill: #e9dacf;       /* relleno pastillas FAQ */
  --blue: #b5c8d6;       /* secciones azules */
  --tan: #e1c9b8;        /* secciones rosadas/tan */

  /* 1 unidad del canvas de 1366px */
  --u: 0.0732vw;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Core Bandi', 'Comic Sans MS', cursive;
  overflow-x: hidden;
}

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

.script {
  font-family: 'Madelyn Rough', cursive;
  font-weight: normal;
  line-height: 0.7;
}

.caps {
  font-family: 'Core Bandi', 'Comic Sans MS', cursive;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-weight: normal;
}

section, header { position: relative; }

/* ===================== HERO ===================== */

.hero {
  min-height: 63.4vw;
  background: var(--cream-hero) url('../assets/img/bg-hero-stripes.png') center / cover no-repeat;
  display: grid;
  place-items: center;
  padding: calc(60 * var(--u)) calc(90 * var(--u));
}

.hero-card {
  position: relative;
  width: calc(977 * var(--u));
  min-height: calc(617 * var(--u));
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(70 * var(--u)) calc(60 * var(--u)) calc(55 * var(--u));
}

.hero-frame {
  position: absolute;
  inset: calc(19 * var(--u));
  border: max(2px, calc(4 * var(--u))) solid var(--terra);
  pointer-events: none;
}

.hero-names {
  font-family: 'Madelyn Rough', cursive;
  font-weight: normal;
  font-size: calc(234 * var(--u));
  line-height: 0.62;
  transform: rotate(-5.3deg);
  text-align: center;
  margin-top: calc(20 * var(--u));
}

.hero-names span { display: block; }
.hero-names .line-2 { margin-left: calc(55 * var(--u)); }

.hero-dove {
  position: absolute;
  left: 19%;
  top: 36%;
  width: calc(145 * var(--u));
  transform: rotate(-10.1deg);
}

.hero-cupid {
  position: absolute;
  right: 10%;
  top: 33%;
  width: calc(189 * var(--u));
  transform: rotate(6.4deg);
}

.hero-sub {
  font-size: calc(54 * var(--u));
  line-height: 1;
  margin-top: calc(55 * var(--u));
}

.btn-rsvp-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(196 * var(--u));
  height: calc(56 * var(--u));
  margin-top: calc(35 * var(--u));
  background: var(--sand);
  border: max(2px, calc(3 * var(--u))) solid var(--terra);
  border-radius: 100px;
  color: var(--ink);
  text-decoration: none;
  font-size: calc(32 * var(--u));
  line-height: 1;
}

/* ===================== DATE ===================== */

.date {
  background: var(--cream);
  min-height: 62.6vw;
  display: grid;
  place-items: center;
  padding: calc(90 * var(--u)) calc(100 * var(--u));
}

.date-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(120 * var(--u));
  width: 100%;
}

.date-vase { width: calc(437 * var(--u)); flex-shrink: 0; }

.date-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: calc(560 * var(--u));
}

.date-intro {
  font-size: calc(27 * var(--u));
  line-height: 1.2;
}

.date-title {
  font-size: calc(97 * var(--u));
  line-height: 1.1;
  margin-top: calc(30 * var(--u));
}

.date-oyster {
  width: calc(93 * var(--u));
  margin-top: calc(40 * var(--u));
}

.date-venue {
  font-size: calc(37.5 * var(--u));
  line-height: 1.2;
  margin-top: calc(30 * var(--u));
}

/* ===================== LOVE STORY ===================== */

.story {
  background: var(--blue);
  min-height: 63.3vw;
  display: grid;
  place-items: center;
  padding: calc(90 * var(--u)) calc(100 * var(--u));
}

.story-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(60 * var(--u));
  width: 100%;
}

.story-text {
  width: calc(510 * var(--u));
  text-align: center;
  flex-shrink: 0;
}

.story-title {
  font-size: calc(112 * var(--u));
  line-height: 0.7;
}

.story-body {
  font-size: calc(21.3 * var(--u));
  line-height: 1.35;
  margin-top: calc(60 * var(--u));
}

.story-photos {
  position: relative;
  width: calc(620 * var(--u));
  height: calc(700 * var(--u));
  flex-shrink: 0;
}

.photo { position: absolute; }

.photo-left {
  width: calc(304 * var(--u));
  left: 0;
  top: calc(20 * var(--u));
  transform: rotate(-8.9deg);
  z-index: 1;
}

.photo-right {
  width: calc(293 * var(--u));
  right: calc(10 * var(--u));
  top: calc(70 * var(--u));
  transform: rotate(3.3deg);
  z-index: 2;
}

.photo-bottom {
  width: calc(315 * var(--u));
  left: calc(150 * var(--u));
  top: calc(330 * var(--u));
  transform: rotate(9.6deg);
  z-index: 3;
}

/* ===================== THE WEDDING DAY ===================== */

.schedule {
  background: var(--tan);
  min-height: 62.8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(90 * var(--u)) calc(60 * var(--u));
  text-align: center;
}

.schedule-bow { width: calc(180 * var(--u)); }

.schedule-title {
  font-size: calc(85 * var(--u));
  line-height: 0.7;
  margin-top: calc(10 * var(--u));
}

.schedule-items {
  list-style: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(55 * var(--u));
  margin-top: calc(90 * var(--u));
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(160 * var(--u));
}

.item-icon {
  align-self: center;
  margin-bottom: calc(30 * var(--u));
}

.icon-ceremony { width: calc(172 * var(--u)); }
.icon-cocktail { width: calc(115 * var(--u)); }
.icon-dinner   { width: calc(160 * var(--u)); }
.icon-cake     { width: calc(122 * var(--u)); }
.icon-party    { width: calc(150 * var(--u)); }
.icon-sendoff  { width: calc(158 * var(--u)); }

.item-time {
  font-size: calc(26.7 * var(--u));
  line-height: 1.39;
}

.item-label {
  font-size: calc(48 * var(--u));
  line-height: 0.7;
  margin-top: calc(12 * var(--u));
  white-space: nowrap;
}

/* ===================== GUEST INFORMATION ===================== */

.guests {
  background: var(--cream);
  min-height: 63.3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(90 * var(--u)) calc(60 * var(--u));
  color: var(--brown);
}

.guests-title {
  font-size: calc(99 * var(--u));
  line-height: 0.7;
  text-align: center;
}

.guests-cards {
  display: flex;
  justify-content: center;
  gap: calc(37 * var(--u));
  margin-top: calc(90 * var(--u));
}

.guest-card {
  width: calc(359 * var(--u));
  aspect-ratio: 359 / 467;
  background: url('../assets/img/frame-wavy.png') center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(40 * var(--u)) calc(48 * var(--u));
}

.guest-icon { margin-top: calc(8 * var(--u)); }
.icon-hotel   { height: calc(120 * var(--u)); }
.icon-bird    { height: calc(125 * var(--u)); }
.icon-flowers { height: calc(110 * var(--u)); margin-top: calc(18 * var(--u)); }

.guest-card-title {
  font-size: calc(48 * var(--u));
  line-height: 0.7;
  margin-top: calc(35 * var(--u));
}

.guest-card-body {
  font-size: calc(18.7 * var(--u));
  line-height: 1.28;
  margin-top: calc(22 * var(--u));
}

.guest-card-body + .guest-card-body { margin-top: calc(18 * var(--u)); }

.guest-card-links {
  font-size: calc(18.7 * var(--u));
  line-height: 1.4;
  margin-top: calc(20 * var(--u));
}

.guest-card-links a { color: inherit; }

/* ===================== FURTHER DETAILS ===================== */

.details {
  background: var(--sand) url('../assets/img/bg-wallpaper-tan.png') center / cover no-repeat;
  min-height: 62.7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(90 * var(--u)) calc(120 * var(--u));
}

.details-title {
  font-size: calc(99 * var(--u));
  line-height: 0.7;
  text-align: center;
}

.details-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(60 * var(--u));
  margin-top: calc(80 * var(--u));
  width: 100%;
}

.details-card {
  width: calc(352 * var(--u));
  aspect-ratio: 350 / 449;
  background: url('../assets/img/frame-ornate.png') center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(55 * var(--u)) calc(58 * var(--u));
  flex-shrink: 0;
}

.details-table {
  width: calc(371 * var(--u));
  align-self: flex-end;
  margin-bottom: calc(-20 * var(--u));
}

.details-card-title {
  font-size: calc(48 * var(--u));
  line-height: 0.7;
}

.details-card-body {
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  margin-top: calc(24 * var(--u));
}

.details-accent {
  font-size: calc(51.5 * var(--u));
  line-height: 0.9;
  margin-top: calc(28 * var(--u));
}

.details-accent-sm {
  font-size: calc(46 * var(--u));
  margin-top: calc(20 * var(--u));
  margin-bottom: calc(4 * var(--u));
}

/* ===================== FAQ ===================== */

.faq {
  background: var(--blue);
  min-height: 63vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(90 * var(--u)) calc(150 * var(--u));
}

.faq-title {
  font-size: calc(103 * var(--u));
  line-height: 0.9;
  text-align: center;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(85 * var(--u));
  row-gap: calc(95 * var(--u));
  margin-top: calc(100 * var(--u));
  width: 100%;
  max-width: calc(1150 * var(--u));
}

.faq-pill {
  background: url('../assets/img/pill-terracotta.png') center / 100% 100% no-repeat;
  padding: calc(28 * var(--u)) calc(55 * var(--u)) calc(34 * var(--u));
  text-align: center;
  filter: drop-shadow(calc(-10 * var(--u)) calc(12 * var(--u)) rgba(236, 224, 213, 0.85));
}

.faq-pill-dark { background-image: url('../assets/img/pill-brown.png'); }

.faq-q {
  font-size: calc(20 * var(--u));
  line-height: 1.2;
}

.faq-a {
  font-size: calc(18 * var(--u));
  line-height: 1.35;
  margin-top: calc(10 * var(--u));
}

/* ===================== RSVP ===================== */

.rsvp {
  background: var(--cream);
  min-height: 62.8vw;
  display: grid;
  place-items: center;
  padding: calc(90 * var(--u)) calc(100 * var(--u)) 0;
  overflow: hidden;
}

.rsvp-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: calc(40 * var(--u));
}

.rsvp-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: calc(640 * var(--u));
}

.rsvp-title {
  font-size: calc(112 * var(--u));
  line-height: 0.7;
}

.rsvp-deadline {
  font-size: calc(30.4 * var(--u));
  line-height: 1.1;
  margin-top: calc(25 * var(--u));
}

.rsvp-body {
  font-size: calc(22.7 * var(--u));
  line-height: 1.35;
  margin-top: calc(45 * var(--u));
}

.rsvp-body + .rsvp-body { margin-top: calc(30 * var(--u)); }

.btn-rsvp-here {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(257 * var(--u));
  height: calc(70 * var(--u));
  margin-top: calc(55 * var(--u));
  background: url('../assets/img/pill-button.png') center / 100% 100% no-repeat;
  color: var(--brown);
  text-decoration: none;
  font-size: calc(30 * var(--u));
  line-height: 1;
  filter: drop-shadow(calc(7 * var(--u)) calc(9 * var(--u)) var(--brown));
}

.rsvp-vase {
  width: calc(437 * var(--u));
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: calc(-60 * var(--u));
}

/* ===================== CONTACT ===================== */

.contact {
  background: var(--tan);
  min-height: calc(660 * var(--u));
  display: grid;
  place-items: center;
  padding: calc(100 * var(--u)) calc(60 * var(--u));
}

.contact-card {
  width: calc(327 * var(--u));
  aspect-ratio: 326 / 425;
  background: url('../assets/img/card-contact.png') center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(50 * var(--u)) calc(45 * var(--u));
}

.contact-title {
  font-size: calc(58 * var(--u));
  line-height: 0.7;
}

.contact-body {
  font-size: calc(18.7 * var(--u));
  line-height: 1.3;
  margin-top: calc(22 * var(--u));
}

/* ===================== MOBILE ===================== */

@media (max-width: 768px) {
  :root { --u: 0.26vw; } /* canvas mobile ≈ 385px */

  .hero {
    min-height: 100svh;
    padding: calc(40 * var(--u)) calc(14 * var(--u));
  }

  .hero-card {
    width: calc(360 * var(--u));
    max-width: calc(100vw - 28px);
    min-width: 0;
    overflow: hidden;
    min-height: calc(500 * var(--u));
    padding: calc(60 * var(--u)) calc(20 * var(--u)) calc(45 * var(--u));
  }

  .hero-names { font-size: calc(70 * var(--u)); max-width: 100%; }
  .hero-names .line-2 { margin-left: calc(40 * var(--u)); }
  .hero-dove  { width: calc(60 * var(--u)); left: 7%; top: 44%; }
  .hero-cupid { width: calc(78 * var(--u)); right: 4%; top: 42%; }
  .hero-sub { font-size: calc(28 * var(--u)); margin-top: calc(45 * var(--u)); }

  .btn-rsvp-now {
    width: calc(120 * var(--u));
    height: calc(36 * var(--u));
    font-size: calc(19 * var(--u));
    margin-top: calc(28 * var(--u));
  }

  .date, .story, .schedule, .guests, .details, .faq, .rsvp {
    min-height: 0;
    padding: calc(70 * var(--u)) calc(24 * var(--u));
  }

  .date-inner { flex-direction: column; gap: calc(50 * var(--u)); }
  .date-vase { width: calc(260 * var(--u)); }
  .date-info { max-width: none; }
  .date-intro { font-size: calc(15 * var(--u)); }
  .date-title { font-size: calc(52 * var(--u)); }
  .date-oyster { width: calc(55 * var(--u)); margin-top: calc(28 * var(--u)); }
  .date-venue { font-size: calc(20 * var(--u)); }

  .story-inner { flex-direction: column; align-items: center; gap: calc(60 * var(--u)); }
  .story-text { width: 100%; }
  .story-title { font-size: calc(62 * var(--u)); }
  .story-body { font-size: calc(14 * var(--u)); margin-top: calc(35 * var(--u)); }
  .story-photos { width: calc(330 * var(--u)); height: calc(560 * var(--u)); }
  .photo-left { width: calc(210 * var(--u)); }
  .photo-right { width: calc(200 * var(--u)); right: 0; top: calc(60 * var(--u)); }
  .photo-bottom { width: calc(215 * var(--u)); left: calc(60 * var(--u)); top: calc(280 * var(--u)); }

  .schedule-bow { width: calc(100 * var(--u)); }
  .schedule-title { font-size: calc(48 * var(--u)); }

  .schedule-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(55 * var(--u));
    column-gap: calc(30 * var(--u));
    margin-top: calc(60 * var(--u));
    justify-items: center;
  }

  .item { width: auto; }
  .icon-ceremony { width: calc(120 * var(--u)); }
  .icon-cocktail { width: calc(80 * var(--u)); }
  .icon-dinner   { width: calc(115 * var(--u)); }
  .icon-cake     { width: calc(88 * var(--u)); }
  .icon-party    { width: calc(105 * var(--u)); }
  .icon-sendoff  { width: calc(112 * var(--u)); }
  .item-time { font-size: calc(16 * var(--u)); }
  .item-label { font-size: calc(30 * var(--u)); }

  .guests-title { font-size: calc(48 * var(--u)); }
  .guests-cards { flex-direction: column; align-items: center; gap: calc(45 * var(--u)); margin-top: calc(55 * var(--u)); }
  .guest-card { width: calc(320 * var(--u)); padding: calc(36 * var(--u)) calc(42 * var(--u)); }
  .icon-hotel { height: calc(105 * var(--u)); }
  .icon-bird { height: calc(110 * var(--u)); }
  .icon-flowers { height: calc(95 * var(--u)); }
  .guest-card-title { font-size: calc(40 * var(--u)); margin-top: calc(28 * var(--u)); }
  .guest-card-body, .guest-card-links { font-size: calc(15.5 * var(--u)); }

  .details-title { font-size: calc(52 * var(--u)); }
  .details-row { flex-direction: column; gap: calc(45 * var(--u)); margin-top: calc(55 * var(--u)); }
  .details-card { width: calc(320 * var(--u)); padding: calc(48 * var(--u)) calc(52 * var(--u)); }
  .details-table { width: calc(260 * var(--u)); align-self: center; margin-bottom: 0; }
  .details-card-title { font-size: calc(42 * var(--u)); }
  .details-card-body { font-size: calc(17 * var(--u)); }
  .details-accent { font-size: calc(44 * var(--u)); }
  .details-accent-sm { font-size: calc(40 * var(--u)); }

  .faq-title { font-size: calc(52 * var(--u)); }
  .faq-grid { grid-template-columns: 1fr; row-gap: calc(45 * var(--u)); margin-top: calc(55 * var(--u)); }
  .faq-pill {
    padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u));
    filter: drop-shadow(calc(-7 * var(--u)) calc(9 * var(--u)) rgba(236, 224, 213, 0.85));
  }
  .faq-q { font-size: calc(17 * var(--u)); }
  .faq-a { font-size: calc(15 * var(--u)); }

  .rsvp { padding-bottom: 0; }
  .rsvp-inner { flex-direction: column; gap: calc(30 * var(--u)); }
  .rsvp-title { font-size: calc(64 * var(--u)); }
  .rsvp-deadline { font-size: calc(20 * var(--u)); margin-top: calc(18 * var(--u)); }
  .rsvp-body { font-size: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }
  .btn-rsvp-here {
    width: calc(180 * var(--u));
    height: calc(52 * var(--u));
    font-size: calc(21 * var(--u));
    margin-top: calc(40 * var(--u));
  }
  .rsvp-vase { width: calc(280 * var(--u)); margin-bottom: calc(-40 * var(--u)); align-self: center; }

  .contact { min-height: 0; padding: calc(80 * var(--u)) calc(24 * var(--u)); }
  .contact-card { width: calc(300 * var(--u)); }
  .contact-title { font-size: calc(48 * var(--u)); }
  .contact-body { font-size: calc(16 * var(--u)); }
}