:root{ 
  --bg: #ffffff;
  --text: #111;
  --muted: #555;
  --alt: #f5f5f7;
  --card: #ffffff;
  --border: rgba(0,0,0,.08);
  --shadow: 0 8px 30px rgba(0,0,0,.06);
  --radius: 18px;
  --max: 1040px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* Top bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--border);
}
.topbar__inner{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand{
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.nav{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a{
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
}
.nav a:hover{ background: rgba(0,0,0,.05); color: var(--text); }

.section{
  padding: 84px 0;
}
.section--alt{
  background: var(--alt);
}
.section--hero{
  padding: 110px 0 90px;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0));
}

h1{ font-size: clamp(34px, 5vw, 56px); margin: 8px 0 10px; }
h2{ font-size: clamp(24px, 3vw, 34px); margin: 0 0 14px; }
h3{ margin: 0 0 8px; }
.lead{ font-size: 18px; color: var(--muted); max-width: 60ch; }
.muted{ color: var(--muted); max-width: 75ch; }

.kicker{
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.hero__cta{
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.btn--ghost{
  background: transparent;
  color: var(--text);
}
.btn:hover{ opacity: .92; }

.grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card--link{
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.timeline{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.timeline li{
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.timeline span{
  font-weight: 700;
  min-width: 64px;
}

.form{
  display: grid;
  gap: 14px;
  max-width: 520px;
  margin-top: 18px;
}
label{
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
input, select{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 16px;
}
.fineprint{ font-size: 12px; color: var(--muted); margin: 0; }

.footer{
  padding: 32px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* ===== Canva block replica ===== */

/* ===== Section 1 (Hero) ===== */
.hero{
  background:#efefef;
  padding: clamp(36px, 5vw, 64px) 16px;
}

.hero__inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align:center;
}

/* 1) Title sizing */
.hero__title{
  width: min(700px, 78vw);  /* adjust if needed */
  height:auto;
  display:block;
  margin: 0 auto clamp(18px, 2.4vw, 28px);
}

/* 2) The main row: left | center | right */
.hero__row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap: clamp(18px, 4vw, 56px);
}

/* 3) Side blocks (text + highlight UNDER it) */
.hero__side{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.hero__sideText{
  font-family:"Core Bandi Face", sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.12em;
  color:#6f7b8b;
  line-height:1.5;
}

/* 1) Highlights too large -> make them smaller */
.hero__highlight{
  display: block;
  width: clamp(80px, 18vw, 190px); /* smaller + responsive */
  height: auto;
  margin: 6px auto 0;             /* closer to the text */
}

/* 4) Middle PNG too small -> make it bigger */
.hero__center{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero__middle{
  width: min(220px, 22vw);   /* BIGGER */
  height:auto;
  display:block;
  margin-bottom: 10px;
}

/* Countdown */
.hero__count{
  font-family:"Core Bandi Face", sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.12em;
  color:#6f7b8b;
  line-height:1.5;
}

/* 3) Boat too large -> make it smaller + slightly overlap the countdown */
.hero__boat{
  width: min(170px, 18vw);   /* SMALLER */
  height:auto;
  display:block;
  margin-top: -10px;         /* overlap */
}

/* Mobile */
@media (max-width: 860px){
  .hero__row{
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .hero__center{
    order: 2;
  }

  .hero__side--left{ order: 1; }
  .hero__side--right{ order: 3; }

  .hero__highlight{
    width: min(220px, 70vw);
  }

  .hero__middle{
    width: min(200px, 44vw);
  }

  .hero__boat{
    width: min(160px, 40vw);
  }
}

/* ===== Section 2 (Paraty) ===== */

.paraty-section {
  background: #e3e8f1;
  padding: 100px 20px;
  text-align: center;
}

.paraty-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Title */
.paraty-title{
  font-family: "Madelyn", cursive;  /* ← corrected */
  font-weight: 400;                 /* lighter look */
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.2;
  color: #6f8087;

  margin-bottom: 70px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.paraty-title span{
  color: #2f8a5a; /* your green Paraty */
}

.paraty-banner{
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 10px;
}

.paraty-banner img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-width: 980px;              /* tweak: controls size on desktop */
}

/* Paragraph Text Block */
.paraty-text {
  max-width: 1400px;          /* wider than container */
  margin: 40px auto 0 auto;   /* center but wide */
  padding: 0 40px;            /* breathing space */
  text-align: center;
}

.paraty-text p {
  font-family: "Core Bandi Face", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #6f7b8b;
  margin-bottom: 18px;
}


.paraty-highlight-text {
  margin-top: 20px;
  font-weight: 500;
  color: #4f9664;
}

/* MOBILE */
/* MOBILE */
@media (max-width: 860px){
  .paraty-section{
    padding: 70px 16px;          /* slightly tighter on mobile */
  }

  .paraty-title{
    margin-bottom: 36px;
  }

  .paraty-banner{
    margin-bottom: 44px;
    padding: 0;
  }

  .paraty-banner img{
    max-width: 100%;
  }

  .paraty-text{
    padding: 0 16px;
    margin-top: 24px;
  }

  .paraty-text p{
    line-height: 1.45;           /* slightly tighter like Canva */
  }
}

/* ===== Section 3 (Itinerário) ===== */

.itinerary-section{
  background: #ebe7ed;
  padding: clamp(70px, 8vw, 120px) 20px;
}

.itinerary-container{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(40px, 6vw, 100px);
}

/* LEFT SIDE */
.itinerary-left{
  position: relative;
}

.itinerary-title{
  font-family: "Themysion", "Madelyn", serif;
  font-weight: 400; 
  font-size: clamp(60px, 5vw, 80px);
  color: #b99cc9;
  margin: 0 0 18px;
}

.itinerary-intro{
  font-family: "Core Bandi Face", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: #6f7b8b;
  max-width: 260px;
}

.itinerary-flip{
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: clamp(160px, 20vw, 240px);
}

/* RIGHT SIDE */
.itinerary-right{
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.itinerary-day{
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
}

.itinerary-icon{
  width: 100px;
  height: auto;
}

.itinerary-content {
  font-family: "Core Bandi Face", sans-serif;
  color: #6f7b8b;
  font-size: 15px;
  line-height: 1.45;
}

.itinerary-content p {
  margin-bottom: 12px;
}

.itinerary-content strong {
  font-weight: 600;
}


/* dotted divider */
.itinerary-divider{
  border-top: 1px dashed #b8c2cf;
  margin: 10px 0 0;
}

.itinerary-bottom-note{
  font-family: "Core Bandi Face", sans-serif;
  color: #b99cc9;               /* lavender like the reference */
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.55;
  text-align: center;

  max-width: 760px;
  margin: 16px auto 0;          /* keeps it centered under the 3 blocks */
}

@media (max-width: 860px){

  .itinerary-container{
    grid-template-columns: 1fr;
  }

  .itinerary-left{
    text-align: center;
  }

  .itinerary-intro{
    margin: 0 auto;
  }

  .itinerary-flip{
    position: static;
    margin: 40px auto 0;
    display: block;
  }

  .itinerary-day{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .itinerary-icon{
    margin: 0 auto 10px;
  }

}

/* ===== Section 4 (Hospedagem + Dicas) ===== */

/* Add to the section wrapper of Section 4 */
.stay-section{
  background: #efefef;
  padding: clamp(80px, 9vw, 120px) 24px clamp(70px, 8vw, 110px);
}

.section4-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.section4-divider{
  width: 0;
  height: 100%;
  border-left: 2px dotted rgba(111,123,139,0.55); /* dotted */
  margin-top: 34px; /* pushes divider down from the very top */
}

/* ===== Column headers (image + title side by side) ===== */
.section4-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 28px; /* more space before content */
  padding-top: 14px;   /* keeps header away from top edge */
}

.section4-topimg{
  height: clamp(105px, 10vw, 150px); /* bigger like reference */
  width: auto;
  display: block;
}

.section4-title{
  font-family: "Themysion", cursive;
  font-size: clamp(50px, 4.8vw, 74px); /* bigger like reference */
  font-weight: 400;
  color: #6f7b8b;
  margin: 0;
  line-height: 1;
}

/* ===== Left column centered text ===== */
.section4-col--left{
  position: relative;
}

.section4-lefttext{
  text-align: center;
  font-family: "Core Bandi Face", sans-serif;
  color: #6f7b8b;
  letter-spacing: 0.06em;
  line-height: 1.55;
  font-size: 15px;
}

.section4-lefttext p{ margin: 0 0 16px; }

.stay-links p{ margin: 6px 0; }

/* Swan ABOVE note */
.section4-swans{
  width: clamp(60px, 8vw, 80px);
  height: auto;
  position: absolute;
  left: -20px;
  bottom: 80px;
}

.section4-note{
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.9;
  margin-top: 0;
}

/* ===== Right column text ===== */
.section4-righttext{
  font-family: "Core Bandi Face", sans-serif;
  color: #6f7b8b;
  letter-spacing: 0.06em;
  line-height: 1.55;
  font-size: 15px;
}

.section4-righttext ul{
  margin: 8px 0 18px;
  padding-left: 18px;
}

/* Right column subtitles: different color */
.section4-subtitle{
  margin: 14px 0 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #b99cc9;
  font-weight: 600;
}

/* Fruits bottom-right */
.section4-fruits{
  width: clamp(80px, 10vw, 110px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-top: 18px;
  opacity: 0.95;
}

/* Links colors (normal + WhatsApp) */
.stay-links a{
  color: #280f91;         /* blue-ish like reference */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stay-links a.whatsapp-link{
  color: #ab86b8;         /* purple like reference */
}

/* ===== Mobile ===== */
@media (max-width: 860px){
  .section4-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section4-divider{ display: none; }

  .section4-header{
    justify-content: center;
  }

  .section4-fruits{
    margin: 14px auto 0;
  }
}

/* ===== Section 5 (Gifts) ===== */
.gifts-section{
  background: #e3e8f1;
  padding: clamp(70px, 8vw, 120px) 20px;
  text-align: center;
}

.gifts-container{
  max-width: 1100px;
  margin: 0 auto;
}

.gifts-illustration{
  width: min(300px, 48vw);
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.gifts-title{
  font-family: "Themysion", "Madelyn", serif;
  font-size: clamp(42px, 4.6vw, 62px);
  font-weight: 400;
  color: #9b7263;
  margin: 0 0 14px;
  line-height: 1.05;
}

.gifts-subtitle{
  font-family: "Core Bandi Face", sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #9b7263;
  margin: 0 auto 26px;
  max-width: 760px;
}

.gifts-button{
  display: inline-block;
  background: #9b7263;
  color: #ffffff;
  text-decoration: none;
  font-family: "Core Bandi Face", sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  padding: 14px 26px;
  border-radius: 6px;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.gifts-button:hover{
  transform: translateY(-1px);
  opacity: 0.92;
}

.gifts-hearts{
  width: clamp(28px, 3vw, 40px);  /* super tiny */
  height: auto;
  display: block;
  margin: 18px auto 0;
  opacity: 0.9;
}

/* Mobile fine-tuning */
@media (max-width: 560px){
  .gifts-illustration{ width: min(360px, 80vw); }
  .gifts-subtitle{ padding: 0 6px; }
  .gifts-button{ width: auto; }
}

/* ===== Section 6 (RSVP) ===== */
.rsvp-section{
  background: #ebe7ed;
  position: relative;            /* KEY: anchors absolute elements */
  overflow: hidden;              /* hides extra image edges */
  /* big “page padding” like your itinerary section */
  padding: clamp(80px, 9vw, 140px) clamp(28px, 6vw, 90px);
}

.rsvp-container{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 3;                    /* keep content above decorations */
  text-align: center;
}

.rsvp-title{
  font-family: "Themysion", "Madelyn", serif;
  font-weight: 400;
  font-size: clamp(48px, 4vw, 70px);
  line-height: 1.15;
  color: #7a6f6b;
  text-align: center;
  margin: 0 auto clamp(26px, 4vw, 44px);
  max-width: 900px;
}

/* Center block (cheers + overlapping button) */
.rsvp-center{
  position: relative;
  z-index: 2;
  max-width: 390px;   /* controls whole center block */
  margin: 0 auto;
}

.rsvp-cheers{
  width: 100%;
  height: auto;
  display: block;
}

/* Button overlapping the cheers image */
.rsvp-button{
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  background: #4f9664;
  color: #ffffff;
  font-family: "Core Bandi Face", sans-serif;
  letter-spacing: 0.12em;
  font-size: 14px;
  padding: 14px 46px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 5;
}

/* optional: match Canva-ish sizing */
.rsvp-button a{
  display: inline-block;
  background: #4f9664;
  color: #fff;
  padding: 14px 44px;
  border-radius: 6px;
  font-family: "Core Bandi Face", sans-serif;
  letter-spacing: 0.18em;
  font-size: 12px;
  text-decoration: none;
}

.rsvp-button:hover{ filter: brightness(0.95); }

/* ===== Decorative assets pinned to section edges ===== */
.rsvp-mirrorball{
  position: absolute;
  top: clamp(10px, 2vw, 24px);

  /* bring inward from edge */
  right: max(6vw, calc((100vw - 1200px)/2 + 40px));

  width: clamp(90px, 11vw, 135px);
  z-index: 1;
}

.rsvp-palm{
  position: absolute;
  bottom: clamp(10px, 2vw, 24px);

  right: max(6vw, calc((100vw - 1200px)/2 + 60px));

  width: clamp(120px, 14vw, 180px);
  z-index: 1;
}

.rsvp-mico{
  position: absolute;
  bottom: clamp(10px, 2vw, 24px);

  left: max(6vw, calc((100vw - 1200px)/2 + 60px));

  width: clamp(180px, 18vw, 240px);
  z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 640px){

  /* --- core layout sizing knobs (tweak these first) --- */
  .rsvp-section{
    padding: 70px 16px 80px;
  }

  /* The “center card” width becomes the reference */
  .rsvp-center{
    width: min(55vw, 200px);
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }

  /* Make cheers smaller and centered */
  .rsvp-cheers{
    width: 100%;
    height: auto;
    display: block;
  }

  /* Button overlaps consistently */
  .rsvp-button{
    position: absolute;
    left: 50%;
    top: 73%;                 /* tweak 50–58% */
    transform: translate(-50%, -50%);
    padding: 8px 22px;
    font-size: 12px;
    border-radius: 6px;
    z-index: 4;
  }

  /* --- decor: anchor around the center line (50%) --- */
  .rsvp-mirrorball,
  .rsvp-palm,
  .rsvp-mico{
    position: absolute;
    pointer-events: none;
    z-index: 2;
  }

  /* Mirrorball: top-right but “near the card”, not the screen edge */
  .rsvp-mirrorball{
    width: min(20vw, 100px);              /* smaller */
    top: 26px;
    left: calc(50% + 160px);              /* center + distance */
  }

  /* Palm: bottom-right near the card */
  .rsvp-palm{
    width: min(24vw, 120px);              /* smaller */
    bottom: 30px;
    left: calc(50% + 150px);
  }

  /* Monkey: bottom-left near the card */
  .rsvp-mico{
    width: min(24vw, 120px);              /* smaller */
    bottom: 26px;
    left: calc(50% - 200px);
  }

  /* If anything still clips, soften with transforms instead of changing the layout */
  .rsvp-mirrorball{ transform: translateX(-35%); }
  .rsvp-palm{ transform: translateX(-35%); }
  .rsvp-mico{ transform: translateX(-10%); }

  .rsvp-title{
    font-size: clamp(32px, 6.5vw, 40px);
    line-height: 1.2;
  }
}




/* ===== Goodbye Section (Final) ===== */

.goodbye{
  background: #efefef;
  padding: clamp(70px, 8vw, 120px) 20px;
  text-align: center;
}

.goodbye__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  row-gap: clamp(18px, 2.6vw, 28px);
}

/* Title */
.goodbye__title{
  font-family: "Themysion", "Madelyn", serif;
  font-weight: 400;
  color: #6f7b8b;
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1;
  margin: 0;
}

/* Cupids image (1080x460) */
.goodbye__cupids{
  width: min(860px, 92vw);
  height: auto;
  display: block;
}

/* Caption */
.goodbye__caption{
  font-family: "Core Bandi Face", sans-serif;
  color: #6f7b8b;
  letter-spacing: 0.06em;
  line-height: 1.45;
  font-size: clamp(12px, 1.2vw, 14px);
  margin: 0;
  max-width: 880px;
}

/* Signature */
.goodbye__signature{
  width: min(480px, 70vw);
  height: auto;
  display: block;
  opacity: 0.95;
}

/* Boat */
.goodbye__boat{
  width: min(180px, 36vw);
  height: auto;
  display: block;
  margin-top: clamp(4px, 1.2vw, 10px);
}

/* Mobile adjustments */
@media (max-width: 600px){
  .goodbye{
    padding: 56px 16px;
  }

  .goodbye__cupids{
    width: 96vw;
  }

  .goodbye__signature{
    width: 82vw;
  }

  .goodbye__boat{
    width: 58vw;
  }
}

/* Responsive */
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
  .nav{ display: none; } /* keep simple; can add mobile menu later */
}

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

@font-face {
  font-family: "Themysion";
  src: url("assets/fonts/Themysion.woff2") format("woff2");
  font-display: swap;
}

.themysion{
  font-family: "Themysion", "Madelyn", "Times New Roman", serif;
}


@font-face {
  font-family: "Core Bandi Face";
  src: url("assets/fonts/CoreBandiFace.woff2") format("woff2");
  font-display: swap;
}