:root{
  --blush:#F6E7E7;
  --sage:#CCD5C0;
  /* --champagne:#E0E4BA; */
  --champagne:#F7F1E3;
  /* --charcoal:#2F2A2A; */
  --gold:#C9A95A;
  --gold-dark:#BD9754;
  --maxw:1100px;
  --hero-image: url('fotos_convite_web/large/IMG_9448.jpg');
}

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; /* use the light weight as requested */
  font-style: normal;
  font-size: 100px;
}


html, body { margin:0; padding:0; min-height:100%; height:100%; }

body{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:var(--charcoal);
  background: var(--champagne);
  line-height:1.6;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1{ letter-spacing:.06em; margin:0 0 16px }
/* h1,h2{font-family:"Playfair Display",serif; letter-spacing:.06em; margin:0 0 16px} */
h2{font-family:"Playfair Display",serif; letter-spacing:.06em; margin:0 0 16px}
/* h1{font-size: clamp(42px, 7vw, 84px);}  */
h2{font-size: clamp(28px, 4vw, 44px);} 
p{margin:0 0 14px; font-size: clamp(16px, 1.8vw, 19px);} 
.btn{
  display:inline-block; border:1px solid var(--gold); color:var(--charcoal);
  padding:12px 22px; border-radius:999px; text-decoration:none; font-weight:600;
  background:linear-gradient(180deg,#fff, #fff0);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); background:#fff}

.hero{
  position:relative;
  min-height:100vh;
  height:100vh;
  display:block;
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.34)),
    var(--hero-image);
  background-size: cover; background-position:center;
  color:#fff;
  isolation:isolate;
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(201,169,90,.06), transparent 12%),
  radial-gradient(900px 500px at 90% 80%, rgba(220,232,223,.06), transparent 12%);
  mix-blend-mode:overlay; opacity:.95;
}
.hero h1{color:#fff; text-shadow: 0 6px 20px rgba(0,0,0,.35)}
.hero .sub, .hero .place{color:#fff; opacity:.95}
.hero .cta{margin-top:22px}
.chip{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background: rgba(246,231,231,.85); border:1px solid rgba(201,169,90,.7); color:#4a3d3d;
  font-weight:600; margin-bottom:12px;
}

/* Hero top / bottom layout */
.hero-top,
.hero-bottom{
  position:absolute; left:0; right:0; display:flex; justify-content:center; pointer-events:none;
}
/* .hero-top{ top:28px } */
.hero-bottom{ bottom:0px }

/* keep .wrap interactive inside those absolute containers */
.hero-top .wrap, .hero-bottom .wrap{ pointer-events:auto; text-align:center }

.hero-bottom .sub{ font-family: 'Cormorant Garamond', serif;
  font-weight: 300; /* use the light weight as requested */
  font-style: normal;font-size:50px; opacity:.95; margin-bottom: 40px; }
.hero-bottom .place{ font-family: 'Cormorant Garamond', serif;
  font-weight: 300; /* use the light weight as requested */
  font-style: normal;font-size:30px; opacity:.9 }

@media(max-width:520px){
  .hero-top{ top:18px }
  .hero-bottom{ bottom:18px }
  .hero-bottom .sub{ font-size:40px }
  .hero-bottom .place{ font-size:13px }
}

  /* Keep forms visually static inside reveal containers to avoid input focus
     surprises and layout jitter on mobile. Authors can still opt-out with
     `form.no-reveal` if they want different behaviour. */
  .reveal form,
  .reveal .form{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
/* Keep the top/bottom hero layout on all screen sizes.
   Provide small adjustments on very narrow screens so text doesn't get clipped. */
@media(max-width:420px){
  .hero-top{ top:6vh }
  .hero-bottom{ bottom:6vh }
  .hero h1{ font-size: 70px; line-height: 1; }
  .hero .sub{ font-size:40px; margin-bottom: 0px; }
  .hero .place{ font-size:13px }
}

.section{scroll-margin-top:80px}
.sec{padding:90px 0}
.sec.announce{ padding:72px 0; background: var(--champagne); color:var(--charcoal); position:relative; overflow:visible }
/* Bleed images sit absolutely at left/right so they can touch viewport corners */
.announce-bleed{ position:absolute; top:0; bottom:0; width:22vw; display:flex; align-items:center; justify-content:center; pointer-events:none }
.announce-bleed img{ width:100%; height:auto; max-height:100%; object-fit:contain; pointer-events:auto }
.announce-bleed.announce-left{ left:0 }
.announce-bleed.announce-right{ right:0 }
.wrap.announce-center{ position:relative; max-width:var(--maxw); margin:0 auto; padding:0 24px; text-align:center; z-index:2 }
.announce-title{ font-family: 'Cormorant Garamond', serif; font-weight:300; font-size: clamp(28px, 6vw, 48px); margin:0 0 6px }
.announce-sub{ font-weight:600; margin:0 0 25px }
.sec.announce .lead{ max-width:820px; margin:0 auto 12px; }

@media(min-width:1200px){ .announce-bleed{ width:20vw } }
/* Ensure announce side images are vertically centered on desktop */
@media(min-width:900px){
  .announce-bleed{ top:50%; bottom:auto; transform:translateY(-50%); }
}
@media(max-width:900px){
  /* stack naturally on mobile: show images inline above/below text (no bleed) */
  .announce-bleed{ position:static; width:auto; display:block; padding:0 }
  .announce-bleed img{ width:100%; height:auto; max-height:none; border-radius:12px }
  .wrap.announce-center{ padding:0 12px }
}

/* Mobile fingerprint: keep images small, not cropped, and pinned to corners
  (apply mobile-like announce image logic already below desktop widths) */
@media(max-width:900px){
  .sec.announce{ padding-top:92px; padding-bottom:92px }
  /* increase corner floral size so details are clearer on mobile.
    To crop the left image's empty left margin (which is part of the source image),
    we make the corner container square and let the left img use cover +
    an object-position that shifts the visible area to the right. The right
    floral remains non-cropped (contain). */
  .announce-bleed{ position:absolute; width:160px; height:160px; display:block; pointer-events:none; z-index:1 }
  .announce-bleed img{ width:100%; height:100%; pointer-events:auto; border-radius:8px }

  /* Left floral: crop visually to hide whitespace on the left and show the right side */
  .announce-bleed.announce-left img{ object-fit:cover !important; object-position:86% center !important }

  /* Right floral: keep non-cropped, contained behavior */
  .announce-bleed.announce-right img{ object-fit:cover !important; object-position:0% center !important }

  /* explicitly unset the opposite inset values so they don't inherit top:0/bottom:0
    from the desktop rule and accidentally stretch/position the image wrong */
  .announce-bleed.announce-left{ left:16px; top:16px; bottom:auto }
    /* raise the right floral so it sits higher on the mobile viewport */
    .announce-bleed.announce-right{ right:16px; bottom:64px; top:auto }
  .wrap.announce-center{ padding:0 16px; z-index:2 }
}

/* Festa-specific: smaller, uncropped side images that keep their aspect ratio */
/* Ensure festa is a positioned container and clips overflow so bleed images cannot leave it */
#festa{ position:relative; overflow:hidden }

#festa .announce-bleed{
  width:16vw;
  align-items:center;
  /* keep bleed inside the festa section bounds */
  top:0; bottom:0; transform:none;
  max-height: calc(100% - 32px);
}
@media(min-width:1200px){ #festa .announce-bleed{ width:14vw } }

/* ensure images never exceed their section's height and preserve aspect ratio */
#festa .announce-bleed img{ max-height: min(420px, calc(100% - 32px)); width:auto; height:auto; object-fit:contain; object-position:center }

@media(max-width:900px){
  /* mobile: badges sized but constrained to the section height */
  #festa .announce-bleed{ width: min(120px, calc(100% - 24px)); height: auto; align-items:center }
  #festa .announce-bleed.announce-left{ left:12px; top:12px; bottom:auto }
  #festa .announce-bleed.announce-right{ right:12px; bottom:48px; top:auto }
  #festa .announce-bleed img{ width:100%; height:100%; max-height: calc(100% - 8px); object-fit:contain !important; object-position:center center !important }
}

/* announce: left image | centered text | right image */
/* .sec.announce .wrap{
  display:grid;
  grid-template-columns: 1fr minmax(320px, 640px) 1fr;
  gap:28px;
  align-items:center;
  box-sizing:border-box;
  padding:0 24px;
  max-width:var(--maxw);
  margin:0 auto;
} */
.announce-left, .announce-right{ display:block }
.announce-left img, .announce-right img{ width:100%; height:280px; object-fit:cover; border-radius:12px; display:block }
@media(min-width:900px){ .announce-left img, .announce-right img{ height:420px } }
@media(max-width:900px){
  .sec.announce .wrap{ grid-template-columns: 1fr; padding:0 18px; gap:18px }
  .announce-left{ order:1 }
  .announce-center{ order:2 }
  .announce-right{ order:3 }
  .announce-left img, .announce-right img{ height:220px }
}

.sec.alt{background:var(--champagne); padding:90px 0px 45px}
@media(max-width:600px){
  .sec.alt{ padding:60px 0px 30px }
}
/* .sec.alt{background:#fff} */
.sec.soft{background:var(--sage)}
/* .sec.soft{background:var(--champagne)} */

/* Center paragraphs in the 'A NOSSA HISTÓRIA' section */
#historia .card p{ text-align:center }
#historia .card h2{ text-align:center;     font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(28px, 6vw, 48px);} 

/* Make the historia text section visually match the carousels on desktop:
   target only the non-carousel card (the centered story text) so carousel
   cards keep their padding/background. */
#historia > .wrap .card:not(.carousel-card){
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 520px;
  margin: 0 auto 18px;
}
@media(max-width:900px){
  /* restore card visuals on mobile for spacing and contrast */
  #historia > .wrap .card:not(.carousel-card){
    background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 30px rgba(0,0,0,.06);
    padding:22px; max-width:none; margin-bottom:0;
  }
}

/* Increase vertical spacing between the three #historia wraps so carousels
   and the text have more breathing room. Smaller on mobile, larger on desktop. */
#historia > .wrap{ margin-bottom: 28px; }
@media(min-width:900px){
  #historia > .wrap{ margin-bottom: 56px; }
}

/* increase vertical spacing between the historia text card and the carousel grid */
#historia > .wrap + .wrap.grid.two{
  margin-top: 36px;
}
@media(min-width:900px){
  /* slightly more breathing room on wider screens */
  #historia > .wrap + .wrap.grid.two{
    margin-top: 56px;
  }
}

/* Center all content in the 'festa' section */
#festa .wrap{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#festa h2{
  font-family: 'Cormorant Garamond', serif;
    font-weight: 300; /* use the light weight as requested */
    font-style: normal;
    font-size: clamp(28px, 6vw, 48px);
    margin-bottom: 16px;
}

#rsvp h2{
  font-family: 'Cormorant Garamond', serif;
    font-weight: 300; /* use the light weight as requested */
    font-style: normal;
    font-size: clamp(28px, 6vw, 48px);
    margin-top: 0px;
    margin-bottom: 40px;
}
.sec.sage{background: var(--sage)}
.lead{font-size: clamp(18px, 2vw, 20px)}
.grid{display:grid; gap:28px}
@media(min-width:900px){ .grid.two{grid-template-columns: 1fr 1fr } }
.card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.carousel-card{
  padding:10px;
  padding-bottom: 0px;
}
.card{transition:transform .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(16,16,16,.08)}
.muted{opacity:.8}

.form{display:grid; gap:14px}
.row{display:grid; gap:14px}
@media(min-width:680px){ .row.two{grid-template-columns:1fr 1fr} }
label{font-weight:600; font-size:14px}
input,select,textarea{
  box-sizing: border-box; /* ensure padding/border are included in width to prevent overflow */
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12); font-size:16px; background:#fff;
}
textarea{min-height:75px; resize:vertical; margin-top: 10px;max-width: 100%;}
.ibanBox{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center;
  /* Provide a solid fallback colour first, then vendor-prefixed and standard gradients
     to maximise compatibility across older or picky mobile browsers. */
  background-color: var(--gold-dark);
  background-image: -webkit-linear-gradient(top, var(--gold-dark), rgba(0,0,0,0.04));
  background-image: linear-gradient(to bottom, var(--gold-dark), rgba(0,0,0,0.04));
  border:1px solid rgba(0,0,0,0.08);
  color: #fff;
  padding:14px; border-radius:14px;
}

/* IBAN copy button and layout */
.iban-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center }
.copy-iban{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:6px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.copy-iban svg{ display:block; width:18px; height:18px }
.copy-iban:focus{ outline:2px solid rgba(201,169,90,0.2); box-shadow:0 0 0 4px rgba(201,169,90,0.07) }
.ibanBox .copy-feedback{ margin-left:6px; font-size:13px; color:rgba(255,255,255,0.95); opacity:0; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease }
.ibanBox.copied .copy-feedback{ opacity:1; transform:none }

.mini{font-size:clamp(14px, 1.6vw, 18px); margin-left:8px}
.caption{margin-top:10px}

/* Fix caption height in the historia carousel so card doesn't change height
   when captions have different line counts. Reserve space for 3 lines on
   desktop and 2 lines on small screens. This keeps the card height stable. */
/* Vertically center caption content inside fixed-height container.
   Keep a fixed height prepared for the max lines, but center the text
   vertically so short captions sit nicely in the middle. */
#historia .caption{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.45;
  /* reserve 4 lines by default to accommodate larger captions */
  height: calc(1.45em * 4);
  max-height: calc(1.45em * 4);
  overflow: hidden;
  white-space: normal;
}

@media(max-width:520px){
  #historia .caption{
    /* reserve 3 lines on small screens */
    height: calc(1.45em * 3);
    max-height: calc(1.45em * 3);
    /* Increase caption type on small screens for readability */
    font-size: clamp(15px, 3.2vw, 18px);
    padding: 0 12px;
  }
}
.footer{
  /* remove bottom gap so the decorative background can meet the viewport bottom */
  padding:48px 0 0; /* keep top breathing, remove bottom padding */
  text-align:center;
  background-image: url('fotos_convite_web/rodape.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto; /* make the footer background span the full viewport width */
  background-color: var(--champagne); /* ensure a pleasant backdrop if image has transparency */
}

/* Ensure footer content sits above decorative background image */
.footer > .wrap{ position:relative; z-index:2 }

/* Slight tweaks for narrow screens so the footer image scales down and spacing increases */
@media(max-width:520px){
  /* On narrow screens, slightly zoom the footer background and shift its vertical focus
     so the decorative details appear closer to the user. This makes the image feel
     "aproximada" without changing layout or padding. */
  /* make the image even more 'aproximada' on very narrow screens and pin to the page bottom */
  .footer{ background-size:300% auto; background-position: center 100%; padding-bottom:5px }
}
.divider{
  height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
  margin:22px 0 12px;
}

/* Additions from cleanup: move former inline styles into CSS */
.ibanBox{margin:18px 0}
.site-root{width:100%; min-height:100vh; overflow:visible; display:flex; flex-direction:column}
/* push footer to the bottom when page content is short */
.site-root > footer{ margin-top: auto }
.visual-wrap{border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,.08)}
.visual{height:100%; min-height:260px; background-image:
  radial-gradient(ellipse at 20% 10%, rgba(201,169,90,.18), transparent 40%),
  radial-gradient(ellipse at 80% 80%, rgba(220,232,223,.6), transparent 42%),
  radial-gradient(ellipse at 0% 100%, rgba(246,231,231,.8), transparent 45%),
  var(--svg);
  background-size:100% 100%,100% 100%,100% 100%,600px 600px;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
}

/* RSVP layout helpers (moved from inline styles) */
.rsvp-row{
  display:flex;
  gap:32px;
  align-items:center; /* vertically centre content with the image on wide screens */
  flex-wrap:wrap;
}
.rsvp-row{ box-sizing:border-box; max-width:var(--maxw); margin:0 auto; width:100%; }
.rsvp-row{ box-sizing:border-box; max-width:100%; }

.rsvp-image{
  /* allow the image to scale responsively but avoid forcing a min-width that creates overflow */
  flex:0 0 52%;
  max-width:52%;
  width:100%;
  min-width:0; /* critical: allow shrinking to prevent horizontal scroll */
  max-width:720px;
  height:auto;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  display:block;
  transition:transform .28s ease, box-shadow .28s ease;
}

/* RSVP section title centered across the whole section */
.rsvp-title{
  text-align:center;
  font-family: 'Cormorant Garamond', serif;
  font-weight:700;
  font-size: clamp(28px, 6vw, 44px);
  margin: 6px 0 18px;
}
.rsvp-image:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 20px 44px rgba(16,16,16,0.10) }
.rsvp-content{ flex:1; min-width:280px; }
.rsvp-content .lead{ text-align:center; font-weight: 700; }


/* Stack on smaller screens and make the image full-width */
@media(max-width:900px){
  .rsvp-row{ align-items:stretch }
  .rsvp-image{ width:100%; max-width:100%; flex:0 0 auto }
}

/* Remove wrap centering/margins inside #rsvp so the section can use the full horizontal space
   but keep internal padding so content doesn't touch the viewport edges. Also prevent
   horizontal scrolling from this section. */
#rsvp{ overflow-x:hidden }
#rsvp > .wrap{
  max-width: none;
  margin: 0; /* remove auto-centering */
  padding-left: 24px;
  padding-right: 24px;
  width:100%;
  box-sizing:border-box;
}

/* Slight breathing for the form inside the content column */
.rsvp-content .form.card{ margin-top:14px; padding-top: 10px; }

/* Embed helpers for map/iframe */
.embed-wrap{position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden}
.embed-iframe{border:0; position:absolute; inset:0; width:100%; height:100%}

/* Carousel styles for 'A Nossa História' */
.carousel{
  position:relative; display:block; width:100%; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.carousel-track{display:flex; transition:transform .45s cubic-bezier(.22,.9,.32,1); will-change:transform}
/* .carousel-slide{min-width:100%; flex:0 0 100%; display:flex; align-items:center; justify-content:center;} */
.carousel-slide{min-width:100%; flex:0 0 100%; display:block; align-items:center; justify-content:center; position:relative;
  /* make each slide a square box so photos of different aspect ratios are cropped consistently */
  aspect-ratio: 1 / 1;
}
/* reserve square space even if image fails to load */
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block}
.carousel-slide.broken img{visibility:hidden} /* hide broken img but keep layout */

/* Moment grid (cerimonia) - three columns: left image, center details, right image
   Add padding and max-width so the grid doesn't span the full viewport and
   give each item a contained card-like feel. */
.moment-grid{
  display:grid;
  grid-template-columns: 1fr minmax(300px, 1fr) 1fr;
  gap:28px;
  align-items:center;
  padding:28px 24px; /* internal padding to stop it touching the viewport edges */
  /* max-width:var(--maxw); constrain width like other sections */
  margin:0 auto; /* center */
  box-sizing:border-box;
}
.moment-grid-item{
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  display:flex;           /* allow children to stretch to the grid row height */
  flex-direction:column;
}
.moment-grid img{width:100%; height:100%; object-fit:cover; display:block}
.moment-grid .moment-center{
  text-align:center;
  padding:20px; /* breathing room for the centre column */
  /* background:#fff; light card background to separate it from section */
  /* border:1px solid rgba(0,0,0,.04);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.04); */
  display:flex;           /* centre column becomes a flex container */
  align-items:center;     /* horizontally centre content */
  justify-content:center; /* vertically centre content and match image height */
}

.moment-grid .moment-center h2{font-size: 34px;     font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 6vw, 48px);}

@media(min-width:900px){
  /* keep left/right images visually balanced by capping their height */
  .moment-grid .moment-left img,
  .moment-grid .moment-right img{ max-height:420px }
}

@media(max-width:900px){
  .moment-grid{ grid-template-columns: 1fr; padding:20px 18px; gap:18px }
  .moment-grid .moment-center{ order:2 }
  .moment-grid .moment-left{ order:1 }
  .moment-grid .moment-right{ order:3 }
}

/* Fallback shown when an image fails to load */
.slide-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:linear-gradient(0deg, rgba(0,0,0,.52), rgba(0,0,0,.32)); color:#fff; font-weight:600; text-align:center}

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.44); color:#fff; border:1px solid rgba(255,255,255,0.08);
  width:52px; height:52px; border-radius:999px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,0.18); font-size:22px; z-index:6; backdrop-filter: blur(6px);
  transition:transform .15s ease, box-shadow .18s ease, background .15s ease, opacity .12s ease;
}
.carousel-btn.prev{left:14px}
.carousel-btn.next{right:14px}
.carousel-btn:hover{box-shadow:0 10px 30px rgba(0,0,0,0.22)}
/* .carousel-btn:active{transform:translateY(-50%) scale(.98)} */
.carousel-btn svg{display:block; width:18px; height:18px}

/* ensure buttons are always visible and comfortably tappable on mobile */
@media(max-width:520px){
  /* make controls and slides smaller on narrow screens (more compact) */
  .carousel-btn{ width:36px; height:36px; font-size:16px }
  .carousel-btn.prev{ left:6px }
  .carousel-btn.next{ right:6px }
  .carousel-btn svg{ width:12px; height:12px }
  /* mobile: force square slides so images appear as a crop inside a square */
  .carousel-slide{ min-height:unset; aspect-ratio: 1 / 1 }
  .carousel-slide img{ width:100%; height:100%; object-fit:cover }
}

.carousel-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px}
.carousel-dots button{width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.6); cursor:pointer}
.carousel-dots button.active{background:var(--gold)}

/* Reveal animation helpers for section entrance */
.reveal{ opacity:0; transform:translateY(8px); transition:opacity .36s cubic-bezier(.2,.9,.22,1), transform .36s cubic-bezier(.2,.9,.22,1); will-change:opacity,transform }
.reveal.in-view{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none; transform:none; opacity:1 } }

/* Mobile: enable faster, cheaper reveal transitions rather than disabling them.
   Use smaller translateY and shorter duration so animations feel snappy and
   avoid visible layout jitter on low-end devices. */
@media(max-width:700px){
  .reveal{
    transition: opacity .20s cubic-bezier(.2,.9,.22,1), transform .28s cubic-bezier(.2,.9,.22,1) !important;
    transform: translateY(6px) !important;
    will-change: opacity, transform;
  }
  .reveal.in-view{ opacity:1; transform:none }
}

/* remove fixed pixel heights so slides remain perfectly square on all breakpoints */
/* Keep slides 1:1 but constrain the carousel width in #historia so they don't
   grow to full-viewport width on large desktop screens. This preserves the
   square crop while keeping visual balance. */
#historia .carousel-card{ max-width: 520px; margin: 0 auto; padding: 6px }
#historia .carousel{ width:100%; }
@media(min-width:1200px){
  #historia .carousel-card{ max-width: 520px; }
}


.floral{
  --svg: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">\
    <rect width="600" height="600" fill="%23F6E7E7"/>\
    <g fill="%23DCE8DF" stroke="%23C9A95A" stroke-width="0.5">\
      <circle cx="100" cy="100" r="30"/>\
      <circle cx="200" cy="250" r="25"/>\
      <circle cx="400" cy="150" r="20"/>\
      <circle cx="500" cy="400" r="35"/>\
      <circle cx="300" cy="500" r="28"/>\
    </g>\
    <g fill="%23C9A95A" opacity="0.18">\
      <path d="M110 110c20 10 40 10 60 0-20 20-40 20-60 0z"/>\
      <path d="M210 260c15 8 30 8 45 0-15 15-30 15-45 0z"/>\
      <path d="M410 160c10 5 20 5 30 0-10 10-20 10-30 0z"/>\
    </g>\
  </svg>');
  background-image: var(--svg);
  background-size: 600px 600px;
}

/* Thank-you page helpers (avoid inline styles in obrigado.html) */
.thank-hero{ min-height:36vh; height:36vh; display:flex; align-items:flex-start; }
.thank-hero .wrap{ padding-top:6px }
.thank-main{ padding:48px 18px 64px; flex:1; display:flex; align-items:center; justify-content:center }
.thank-hero{ align-items:center; justify-content:center; min-height:20vh; background-position:center; background-size:cover; }

/* Thank-you page visual tweaks */
.thank-hero h1{ font-family: 'Cormorant Garamond', serif; font-weight:700; font-size: clamp(40px, 8vw, 72px); margin:0; color:#fff; text-shadow:0 6px 20px rgba(0,0,0,.45); letter-spacing:.06em }
.thank-card{ max-width:620px; margin: 0 auto; text-align:center; padding:28px 26px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.06); background:#fff; border:1px solid rgba(0,0,0,0.04) }
.thank-card h2{ font-family: 'Cormorant Garamond', serif; font-weight:700; font-size: clamp(22px, 3.2vw, 30px); margin:0 0 10px }
.thank-card p{ margin:0 0 12px; color: #333; line-height:1.45 }
.thank-actions{ margin-top:18px }

/* Primary button: simpler, slightly rounded and subtle shadow */
.thank-actions .btn{ background: var(--gold); color:#fff; border:0; padding:10px 20px; border-radius:999px; box-shadow:0 8px 20px rgba(201,169,90,0.14) }
.thank-actions .btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(201,169,90,0.18) }

@media(max-width:900px){
  .thank-card{ margin:0 16px 20px; padding:26px }
  .thank-hero h1{ font-size: clamp(32px, 10vw, 56px) }
}

@media(max-width:520px){
  .thank-card{ margin:0 12px 16px; padding:20px }
  .thank-hero{ min-height:28vh }
  .thank-hero .wrap{ padding-top:6px }
}

/* User request: force the historia text to NOT use a card background on any size.
   This removes the white panel look and keeps the text visually consistent
   with the carousels (plain, centered block). */
#historia > .wrap.hist-text,
#historia > .wrap .card:not(.carousel-card){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 520px;
  margin: 0 auto 18px;
  text-align: center;
}

/* DISABLE Reveal Animations: make `.reveal` a no-op globally
   The JS reveal logic has been removed; keep these defensive overrides
   so any remaining `reveal` classes in the markup won't animate or
   cause visual surprises. */
.reveal,
.reveal.in-view{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Reveal animations fully disabled per user request. */

/* Performance helpers: promote compositing layers and reduce costly effects on mobile
   These are conservative changes intended to improve scroll/animation smoothness
   on low-end devices by forcing compositing and reducing heavy shadows/backdrop. */
.carousel-track,
.carousel-slide,
.carousel-btn,
.card,
.rsvp-image,
.moment-grid img,
.announce-bleed img{
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media(max-width:900px){
  /* Remove or soften shadows and heavy backdrop-filter on smaller screens */
  .carousel-btn{ box-shadow: none !important; backdrop-filter: none !important; }
  .card{ box-shadow: none !important; }
  .rsvp-image{ transition: transform .18s ease !important; box-shadow: none !important; }
  /* Slightly shorten carousel track transitions on mobile for cheaper repaints */
  .carousel-track{ transition: transform .32s linear !important; }
  /* Make reveal transitions cheaper on mobile (already tuned elsewhere but reinforce here) */
  .reveal{ transition-duration: .18s !important; transform: translateZ(0) !important; }
}

@media(max-width:520px){
  /* Further disable some hover/transform transitions that can cause jank on very narrow devices */
  .rsvp-image{ transition: none !important; }
}