:root {
   --champagne: #f5eee7;
   --paper: #fffaf4;
   --rose: #c58f91;
   --rose-dark: #a96f75;
   --gold: #b4935b;
   --goldlght:#cfa051;
   --newgold: #e2bb58;
   --winelght: #bc5662;
   --wine: #722F37; 
   --gold-light: #d9c49d;
   --melon: #FDBCB4;
   --melon-light: #E2C5B4;
   --melon-mid: #D9B6A5;
   --melon-dark: #cc7463;
   --ink: #51433d;
   --muted: #8b7770;
   --cream: #f8f5ef;
   --serif: "Cormorant Garamond", Georgia, serif;
  --sans: 'Lato', system-ui, sans-serif;
   --font-heading: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
   --font-script: 'Great Vibes', cursive;
 }

.mt-n3{
  margin-top: -1rem !important;
}

.lh-13{
 line-height: 1.3 !important;
}


.vers{
  font-family: var(--sans) !important;
  color: var(--newgold);
}

 .section-pending {
   display: none;
 }

 .section-revealing {
   display: block;
   animation: zoomIn 1s cubic-bezier(.2, .7, .2, 1) both;
 }

 @keyframes zoomIn {
   from {
     opacity: 0;
     transform: scale(.85);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   overflow-y: scroll !important;
 }

 body {
   margin: 0;
   color: var(--ink);
   background: var(--champagne);
   font-family: var(--sans);
 }

 .section-pending {
   display: none;
 }

 .section-revealing {
   display: block;
   animation: zoomIn 1s cubic-bezier(.2, .7, .2, 1) both;
 }

 @keyframes zoomIn {
   from {
     opacity: 0;
     transform: scale(.85);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 .midopcty {
   opacity: .8;
   font-size: .75rem !important;
 }

 button {
   font: inherit;
 }

 .cover {
   min-height: 100svh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px 20px 30px;
   position: relative;
   overflow: hidden;
   text-align: center;
   background: radial-gradient(ellipse at 50% 44%, #fffaf5 0%, #f7eee7 48%, #eadbd4 100%);
 }

 .cover::before,
 .cover::after {
   content: "";
   position: absolute;
   width: 280px;
   height: 280px;
   border: 1px solid rgba(180, 147, 91, .23);
   border-radius: 50%;
 }

 .cover::before {
   top: -170px;
   left: -150px;
 }

 .cover::after {
   bottom: -190px;
   right: -130px;
 }

 .cover-glow {
   position: absolute;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .48);
   filter: blur(45px);
 }

 .eyebrow2 {
   font-size: 1.3rem;
   letter-spacing: .28em;
   color: var(--newgold);
   font-weight: 500;
   margin: 0 0 15px;
   position: relative;
   z-index: 1;
 }

 .eyebrow {
   font-size: .85rem;
   letter-spacing: .28em;
   color: var(--newgold);
   font-weight: 500;
   margin: 0 0 15px;
   position: relative;
   z-index: 1;
 }

 .eyebrow.eybrw1 {
  font-size: 1.8rem !important;
  letter-spacing: .2em;
 }

 .lspcngn {
   font-size: 1.85rem !important;
   font-weight: lighter !important;
   color: var(--winelght);
   font-weight: 500;
   margin: 0 0 15px;
   position: relative;
   z-index: 1;
   letter-spacing: 0em !important;
   font-family: var(--font-script);
 }

 .envelope-scene {
   width: min(86vw, 510px);
   aspect-ratio: 2;
   perspective: 1200px;
   position: relative;
   z-index: 2;
   margin: 12px 0 24px;
   cursor: pointer;
 }

 .envelope-shadow {
   position: absolute;
   inset: 12% 4% 0;
   background: rgba(94, 67, 55, .17);
   filter: blur(25px);
   border-radius: 12px;
   transform: translateY(18px);
 }

 .envelope {
   position: absolute;
   inset: 0;
   transform-style: preserve-3d;
 }

 .envelope-back {
   position: absolute;
   z-index: 1;
   inset: 0;
   background: linear-gradient(135deg, #fffaf3, #eadbce);
   border: 1px solid #f6d5d6;
   border-radius: 5px;
   box-shadow: 0 18px 42px rgba(89, 65, 55, .13);
 }

 .letter {
   position: absolute;
   z-index: 2;
   left: 8%;
   right: 8%;
   bottom: 5%;
   height: 90%;
   background: linear-gradient(145deg, #fffdf8, #f8eee5);
   border: 1px solid rgba(213, 184, 133, 0.45);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   padding: 18px;
   transition: transform 1.25s cubic-bezier(.2, .75, .2, 1), bottom 1.25s;
   box-shadow: 0 4px 18px rgba(89, 65, 55, .08);
 }

 .letter-kicker {
   font-size: clamp(6px, 1.5vw, 9px);
   letter-spacing: .18em;
   color: var(--muted);
 }

 .letter-names {
   font: italic clamp(28px, 7vw, 45px) var(--serif);
   color: var(--winelght);
 }

 .letter-date {
   font-size: clamp(8px, 1.8vw, 11px);
   letter-spacing: .2em;
   color: var(--newgold);
 }

 .letter-hint {
   font-size: 8px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #a9958b;
   margin-top: 5px;
 }

 .envelope-front {
   position: absolute;
   inset: 0;
   z-index: 3;

   background: linear-gradient(135deg,
       #f8eee5 0%,
       #ead9cb 100%);

   clip-path: polygon(0 0,
       50% 57%,
       100% 0,
       100% 100%,
       0 100%);

   border-radius: 5px;
 }

 .envelope-front::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(35deg, #e9d7ca, #fff8ef);
   clip-path: polygon(0 100%, 50% 47%, 100% 100%);
   border-bottom: 1px solid rgba(180, 147, 91, 0.4);
 }

 .envelope-flap {
   position: absolute;
   z-index: 5;
   inset: 0 0 auto;
   height: 61%;
   background: linear-gradient(145deg, #fffaf3, #e9d8cb);
   clip-path: polygon(0 0, 100% 0, 50% 100%);
   transform-origin: top center;
   backface-visibility: visible;
   transition: transform .9s cubic-bezier(.2, .7, .2, 1);
   filter: drop-shadow(0 2px 2px rgba(219, 98, 16, 0.08));
 }

 .monogram {
   position: absolute;
   z-index: 6;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90px;
   height: 90px;
   border: 1px solid var(--newgold);
   border-radius: 50%;
   background: radial-gradient(circle, #fffaf2, #ffeccc66);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 3px 12px rgba(115, 84, 55, .13);
   transition: opacity .85s, transform .65s;
 }

 .monogram-initials {
   font: italic 25px var(--font-script);
   color: var(--goldlght);
   white-space: nowrap;
 }

 .monogram-initials.minavb{
  color: var(--melon-dark);
 }

 .monogram-initials i {
   font-size: 17px;
   font-weight: 400;
 }

 .monogram-rule {
   width: 25px;
   border-top: 1px solid var(--gold-light);
   margin-top: 2px;
 }

 .cover-instruction {
   color: var(--muted);
   font: italic 18px var(--serif);
   margin: 0 0 14px;
   position: relative;
   z-index: 2;
 }

 .open-button {
   border: 1px solid var(--wine);
   color: var(--wine);
   background: rgba(255, 250, 244, .55);
   padding: 13px 22px;
   letter-spacing: .15em;
   font-size: 13px;
   cursor: pointer;
   transition: background .25s, color .25s;
   position: relative;
   z-index: 2;
 }

 .open-button:hover {
   background: var(--winelght);
   color: white;
 }

 .open-button span {
   margin-left: 12px;
   font-size: 13px;
 }

 .cover-footnote {
   font: italic 16px var(--serif);
   color: var(--goldlght);
   margin: 10px 0 0px 0;
   position: relative;
   z-index: 2;
 }

 .cover.is-opening .envelope-flap {
   transform: rotateX(180deg);
   z-index: 1;
 }

 .cover.is-opening .monogram {
   opacity: 0;
   transform: translate(-50%, -30%) scale(.7);
 }

 .cover.is-open {
   /*min-height:470px;*/
   height: 75svh;
   max-height: 720px;
   transition: height 1.2s ease, min-height 1.2s ease;
 }

 .cover.is-open .envelope-scene {
   transform: translateY(-12px) scale(.78);
   transition: transform 1.1s ease;
 }

 .cover.is-open .cover-instruction,
 .cover.is-open .open-button,
 .cover.is-open .cover-footnote {
   opacity: 0;
   pointer-events: none;
   transition: opacity .4s;
 }

 .cover.is-sliding .letter {
   z-index: 2;
   transform: translateY(-55%);
 }

 /* Salida de la portada */
 .cover.is-exiting {
   opacity: 0;
   transform: scale(0.92);
   pointer-events: none;
   transition:
     opacity .8s ease,
     transform .8s ease;
 }

 .invitation {
   opacity: 0;
   transform: scale(0.85);
   transform-origin: center center;
   transition:
     opacity 1s ease,
     transform 1s cubic-bezier(.2, .7, .2, 1)
 }

 .invitation.is-visible {
   opacity: 1;
   transform: scale(1);
 }

 @keyframes fadeIn {
   to {
     opacity: 1;
   }
 }

 .hero {
  position: relative;
  text-align: center;
  padding: 50px 40px 90px 40px;
  background: var(--wine);
}

.hero-divider {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
}

.hero-divider svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

 .hero-ornament {
   display: block;
   color: var(--newgold);
   font-size: 35px;
   /*argin-bottom: 25px;*/
 }

  .hero-ornament2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 1.5rem;
  line-height: 1;
   display: block;
   color: var(--wine);
   font-size: 55px;
   /*argin-bottom: 25px;*/
 }



.hero-divider2 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    overflow: hidden;
    pointer-events: none;
}

.hero-divider2 svg {
    position: relative;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}




 .hero h1 {
   margin: 0;
   display: flex;
   flex-direction: column;
   color: #fdf8e8;
   font-style: italic !important;
   letter-spacing: .05em !important;
   font-family: var(--font-heading);
 }

 .lttrspcng25{
  letter-spacing: .25em !important;
 }

 
 .hero h1 em {
   font-size: 1.1em  !important;
   font-family: var(--font-script) !important ;
   font-style: italic !important;
   color: var(--newgold);
   font-weight: 400;
   margin: 40px 30px 0;
 }

 .name-couple{
  font-family: var(--font-heading) !important;
  font-size: calc(2.375rem + 1.5vw) !important;
  font-weight: 400 !important;
 }

 
 .hero-date {
   color: var(--paper);
   letter-spacing: .25em;
   font-size: 11px;
   margin: 24px 0;
 }

 .fine-line {
   width: 70px;
   border-top: 1px solid var(--newgold);
   margin: 0 auto 22px;
 }

 .hero-message {
   color: #eaeaea;
   font: italic 21px/1.5 var(--serif);
 }

 .countdown-section{
  background-color: var(--cream) !important;
 }

 .countdown-section,
 .detail-section {
   text-align: center;
   padding: 40px 20px 30px 20px;
 }

 h3.date-b{
  font-size: 23px !important;
  font-weight: 300 !important;
  color: var(--melon-dark) !important;
 }

 .countdown {
   display: flex;
   justify-content: center;
   gap: clamp(15px, 5vw, 55px);
   flex-wrap: wrap;
 }

 .countdown div {
   min-width: 55px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .countdown strong {
   color: var(--rose-dark);
   font: 500 42px var(--serif);
 }

 .countdown span {
   font-size: 8px;
   letter-spacing: .18em;
   color: var(--gold);
 }

 .detail-section {
   background-color: #F8F4EE !important; 
 }

 .detail-section h2 {
   font: 500 42px var(--serif);
   color: #645752;
   margin: 0 0 15px;
 }

 .detail-copy {
   color: var(--muted);
   font: italic 19px/1.6 var(--serif);
 }

 .detail-card {
   max-width: 420px;
   margin: 25px auto;
   padding: 28px 18px;
   border: 1px solid rgba(180, 147, 91, .35);
   background: rgba(255, 250, 245, .6);
 }

 .detail-icon {
   color: var(--gold);
   font-size: 20px;
 }

 .detail-card h3 {
   font: 500 27px var(--serif);
   color: var(--rose-dark);
   margin: 8px 0;
 }

 .detail-card p {
   font-size: 12px;
   color: var(--muted);
 }

 .closing {
   text-align: center;
   padding: 45px 20px;
   background: #eee0d9;
   color: var(--rose-dark);
   font: italic 22px var(--serif);
 }

 .closing p {
  font-family: var(--font-script);
   font-size: 42px;
   font-style: italic;
   color: var(--winelght);
   margin: 10px;
 }

 .closing p i {
   font-family: var(--font-script);
   color: var(--newgold);
   font-size: 28px;
 }
 .endl{
  color: #7f3940 !important;
 }




 @media (max-width:768px) { /*Antes 520px*/

  .detail-section h2 {
  font-size: 30px !important;
  margin-bottom: 0 !important;
}


  .eybrw1{
    font-size: .8rem !important;
  }

  .h3.date-b{
    font-size: 22px !important;
    font-weight: 300 !important;
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
  }

  .location-title{
    margin-top: 3rem !important;
    font-size: 33px !important;
  }

  .room-illustration{
    height: 165px !important;
  }

  .message{
  font-size: 1.15rem !important;
  }

   .cover {
     padding-top: 35px;
   }

   .envelope-scene {
     width: 92vw;
   }

   .monogram {
     width: 90px;
     height: 90px;
   }

   .monogram-initials {
     font-size: 20px;
   }

   .vers{
    font-size: 15px !important;
   }

   .hero {
     padding: 45px 18px 60px;
   }

   .hero-divider{
    height: 80px !important ;
   }

   .countdown-section,
   .detail-section {
     padding: 55px 16px;
   }
 }

 @media (prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
     scroll-behavior: auto !important;
     animation-duration: .01ms !important;
     transition-duration: .01ms !important;
   }
 }

 
/* ==============================
   LLUVIA DE PÉTALOS
============================== */

.petals-container {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: petals-fade-in 3s ease forwards;
}

.petal {
  position: absolute;
  top: -8vh;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 1.45);
  border-radius: 100% 0 100% 0;
  background: var(--petal-color);
  opacity: 0;
  filter: blur(0.15px);
  transform: rotate(var(--rotation));
  animation: petal-fall var(--duration) linear var(--delay) infinite;
  will-change: transform;
}

@keyframes petal-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -5vh, 0) rotate(var(--rotation));
  }

  10% {
    opacity: var(--opacity);
  }

  85% {
    opacity: var(--opacity);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 115vh, 0)
      rotate(calc(var(--rotation) + 720deg));
  }
}

@keyframes petals-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .petals-container {
    display: none;
  }
}



/* ==============================
   SECCIÓN CON IMAGEN RASGADA
============================== */

.torn-section {
  position: relative;
  width: 100%;
  background: var(--cream);
  padding: 20px 0;
  isolation: isolate;
}



.torn-image {
  position: relative;
  width: 100%;
  height: 500px;
  isolation: isolate;
}

/* Capa inferior: simula el borde oscuro del papel */
.torn-image::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgb(193, 189, 186);

  -webkit-mask-image: url("../assets/images/torn-mask.svg");
  mask-image: url("../assets/images/torn-mask.svg");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  filter: drop-shadow(0 13px 13px rgba(193, 189, 186, 0.644));

  z-index: 0;
}

/* Capa superior: fotografía ligeramente retraída */
.torn-image img {
  position: absolute;
  inset: 4px 0;

  display: block;
  width: 100%;
  height: calc(100% - 8px);

  object-fit: cover;
  object-position: center;

  -webkit-mask-image: url("../assets/images/torn-mask.svg");
  mask-image: url("../assets/images/torn-mask.svg");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  z-index: 1;
}

@media (max-width: 768px) {
  .torn-image {
    height: 350px;
  }
}



.location-section {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 20px 20px 75px;
    overflow: hidden;
}

/* Tarjeta principal */
.location-card {
    position: relative;
    isolation: isolate;
    width: min(100%, 340px);
    min-height: 570px;
    padding: 0 25px 65px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(145deg, #FBF8EF, #F5EFDF);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 170px 170px 12px 12px;
    box-shadow:
        0 8px 25px rgba(84, 66, 37, 0.309),
        inset 0 0 20px rgba(255,255,255,.2);
}

/* Ilustración */
.room-illustration {
    position: relative;
    z-index: 1;
    width: calc(100% + 50px);
    margin: 0 -25px;
    height: 185px;
}

.chapel-illustration svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Contenido */
.location-content {
    position: relative;
    z-index: 2;
}

.location-time {
    margin: 17px 0 10px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 3px;
    color: #53665A;
}

h2 .location-title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(27px, 7vw, 32px);
    font-weight: 400;
    line-height: 1.05;
    color: #455e52 !important;
}

.location-separator {
    width: 50px;
    height: 1px;
    margin: 14px auto 15px;
    background: #C5A36B;
}

.location-address {
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: .3px;
    color: #53665A;
}

span.location-address {
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: .3px;
    color: var(--rose-dark);
}

.location-address0 {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 1.8px;
    color: var(--rose-dark);
}


/* Botón */
.location-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 37px;
    border: 1px solid #D99B8D;
    border-radius: 30px;
    color: #A74D3C;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all .3s ease;
}

.location-button:hover {
    color: #fff;
    background: #A74D3C;
    border-color: #A74D3C;
}

.location-button span {
    font-size: 15px;
}


/* Hierbas decorativas inferiores */
.location-grass {
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    height: 75px;
    z-index: 3;
    pointer-events: none;
}

.location-grass span {
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 70px;
    border-radius: 100% 0 100% 0;
    border-left: 8px solid #d8b64fb8;
    transform: rotate(-15deg);
}

.location-grass span:nth-child(1) {
    left: 8%;
    height: 65px;
}

.location-grass span:nth-child(2) {
    left: 25%;
    height: 85px;
    border-color: var(--melon-light);
    transform: rotate(15deg);
}

.location-grass span:nth-child(3) {
    left: 55%;
    height: 75px;
    transform: rotate(20deg);
}

.location-grass span:nth-child(4) {
    left: 78%;
    height: 90px;
    transform: rotate(-10deg);
     border-color: var(--melon-mid);
}

.location-grass span:nth-child(5) {
    left: 95%;
    height: 60px;
}

/* Navbar base */
.wedding-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    background-color: transparent;
    transition:
        background-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Estado transparente */
.wedding-navbar.nav-transparent {
    background-color: transparent !important;
    box-shadow: none;
}

.wedding-navbar.nav-transparent .navbar-brand,
.wedding-navbar.nav-transparent .monogram-initials,
.wedding-navbar.nav-transparent .monogram-initials i {
    color: #fff !important;
}

/* Estado sólido */
.wedding-navbar.nav-solid {
    background-color: var(--bs-tertiary-bg) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.wedding-navbar.nav-solid .navbar-brand,
.wedding-navbar.nav-solid .monogram-initials,
.wedding-navbar.nav-solid .monogram-initials i {
    color: var(--bs-body-color) !important;
}

/* ==============================
   NUESTRA HISTORIA
============================== */

.story-section {
    position: relative;
    padding: 90px 0;
    background-color: #F8F4EE;
}

/* Imagen */
.story-image-wrap {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.story-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Contenido */
.story-content {
    max-width: 520px;
    margin: 0 auto;
    padding: 15px 10px;
}

.story-eyebrow {
    margin-bottom: 15px;
    color: var(--newgold);
    font-family: var(--sans);
    font-size: 1rem;
    letter-spacing: 3px;
    font-weight: 600;
}

.story-title {
    margin-bottom: 25px;
    color: #645752;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
}

.story-text {
    color: #655750;
    font-family: var(--serif);
    font-size: clamp(1.08rem, 2.5vw, 1.25rem);
    font-style: italic;
    line-height: 1.85;
}

.story-text p {
    margin-bottom: 18px;
}

.story-text p:last-child {
    margin-bottom: 0;
}

/* Adaptación para móviles */
@media (max-width: 991.98px) {
    .story-section {
        padding: 65px 0;
    }

    .story-image-wrap {
        aspect-ratio: 5 / 4;
    }

    .story-content {
        padding: 15px 5px 0;
    }

    .story-eyebrow {
      text-align: center !important;
    }

    .story-title {
      text-align: center !important;
        margin-bottom: 25px;
    }

    .story-text {
        font-size: 1.05rem;
    }
}

.photo-banner {
    width: 100%;
    height: 650px;
    background-image: url('../assets/images/2.jpeg');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    background-color: #F8F4EE;
}

/* Pantallas grandes */
@media (min-width: 1200px) {
    .photo-banner {
        background-position: center 25%;
    }
}

/* Pantallas muy grandes */
@media (min-width: 1600px) {
    .photo-banner {
        background-position: center 20%;
    }
}


.event-guidelines {
    padding: 80px 0;
    background-color: var(--wine);
}

.guideline-card {
    height: 100%;
    padding: 35px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guideline-icon {
    width: 105px;
    height: 90px;
    margin-bottom: 20px;
}

.guideline-icon svg {
    width: 100%;
    height: 100%;
}

.guideline-title {
    font-family: var(--serif);
    font-size: 30px;
    color: #ffd27e;
    margin-bottom: 12px;
}

.guideline-subtitle {
    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;
    color: var(--cream);
    margin-bottom: 12px;
}

.guideline-text {
    max-width: 430px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.8;
    color: var(--cream);
    margin: 0;
}

.guideline-text strong {
    color: #ffd27e;
    font-weight: 600;
}

.guideline-frame{
  border: 5px #ffefcf57 solid;
}

@media (max-width: 767.98px) {
    .event-guidelines {
        padding: 55px 0;
    }

    .guideline-card {
        padding: 25px 15px;
    }

    .guideline-title {
        font-size: 26px;
    }
}

.section-regalos {
            background-color: var(--cream);
            color: var(--ink);
            padding: 5rem 1rem;
            position: relative;
            overflow: hidden;
        }

        /* Estilos tipográficos inspirados en la invitación */
        .text-subtitle-gold {
            color: var(--newgold);
            font-size: 0.85rem;
            letter-spacing: 0.25rem;
            text-transform: uppercase;
            font-weight: 600;
        }

        .text-main-title {
            color: var(--rose-dark);
            font-family: serif; /* O puedes cambiarlo por tu tipografía cursiva/elegante */
            font-weight: 400;
            font-size: 2.2rem;
            line-height: 1.3;
        }

        .text-body-custom {
           color: #655750;
    font-family: var(--serif);
    font-size: clamp(1.08rem, 2.5vw, 1.25rem);
            font-style: italic;
            line-height: 1.6;
            letter-spacing: .04em;
            max-width: 600px;
            margin: 0 auto;
        }

        .text-accent-wine {
            color: var(--winelght);
        }

        /* Separadores decorativos sutiles */
        .divider-diamond {
            width: 8px;
            height: 8px;
            background-color: var(--newgold);
            transform: rotate(45deg);
            display: inline-block;
            margin: 0.5rem 0 1.5rem 0;
        }

        .line-deco {
            display: inline-block;
            width: 40px;
            height: 1px;
            background-color: var(--newgold);
            vertical-align: middle;
            margin: 0 10px;
        }

        /* Icono de sobre personalizado o estilizado */
        .envelope-icon {
            max-width: 120px;
            height: auto;
            opacity: 0.85;
            margin: 1.5rem 0;
        }

        .hero-ornament.clsng{
          color: var(--rose) !important;
        }



.family-invite {
    padding: 80px 0;
    background-color: var(--wine);
}

.attendance-members {
    max-width: 520px;
    margin: 0 auto;
}

.attendance-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 20px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(220, 196, 154, 0.35);
    border-radius: 5px;
    color: #fffaf4;
}

.attendance-member label {
    margin: 0;
    cursor: pointer;
}

.attendance-button {
    padding: 13px 28px;
    border: 1px solid var(--newgold);
    background: var(--newgold);
    color: var(--wine);
    font-size: 0.75rem;
    letter-spacing: 0.12rem;
    transition: all 0.3s ease;
}

.attendance-button:hover {
    background: transparent;
    color: var(--newgold);
}

.attendance-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}