@font-face {
  font-family: "Sloop Script";
  src: url("../assets/fonts/Sloop Script Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root{
  --sage:#6E5F54;
  --sage-dark:#594C43;
  --sage-soft:#A9978A;

  /* Nueva paleta cálida */
  --warm-bg:#F7EDE6;
  --warm-soft:#F5EAE6;
  --cream:#F5EAE6;
  --white:#fffaf7;

  --text:#6E5F54;
  --max:1366px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--warm-bg);
  color:var(--text);
  font-family:"Montserrat",Arial,sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}

.invitation{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  background:var(--warm-bg);
  overflow:hidden;
  box-shadow:0 0 35px rgba(0,0,0,.04);
}
.inner{
  width:min(100% - 56px, 1060px);
  margin:0 auto;
  position:relative;
  z-index:2;
}
.inner--narrow{max-width:850px}
.section{
  position:relative;
  padding:clamp(82px,10vw,150px) 0;
  text-align:center;
  background:var(--warm-bg);
}
.script-title{
  margin:0 0 42px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(4rem,9vw,8rem);
  line-height:.9;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--sage);
}
.script-title--smaller{font-size:clamp(3.7rem,8vw,6.7rem)}
.small-script{
  margin:80px 0 30px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.6rem,6vw,4.6rem);
  font-weight:400;
}
.paragraph{
  margin:0px auto;
  max-width:760px;
  font-size:clamp(1rem,1.7vw,1.35rem);
  line-height:1.75;
  letter-spacing:.03em;
}
.mini-heading{
  margin:80px 0 35px;
  text-transform:none;
  letter-spacing:.03em;
  font-size:clamp(1rem,1.7vw,1.35rem);
}
.mini-heading--date{margin-top:90px}

/* PARTE 2 · desde el mensaje hasta NOV 28 2026 */
.part-two{
  margin-top:0;
  padding-top:clamp(42px,5vw,68px);
  padding-bottom:clamp(55px,6vw,86px);
  font-family:"The Seasons","Cormorant Garamond",Georgia,serif;
  font-weight:450;
  z-index:2;
}

/* Etapa 2: una vez terminada la foto, el color liso recién empieza
   a desaparecer y deja aparecer gradualmente la textura del papel. */
.part-two::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:clamp(170px,18vw,250px);
  background:linear-gradient(
    to bottom,
    var(--warm-bg) 0%,
    var(--warm-bg) 15%,
    rgba(247,237,230,.94) 28%,
    rgba(247,237,230,.76) 44%,
    rgba(247,237,230,.48) 62%,
    rgba(247,237,230,.20) 80%,
    rgba(247,237,230,0) 100%
  );
  pointer-events:none;
  z-index:0;
}

.part-two > .inner{
  position:relative;
  z-index:1;
}

/* En escritorio, la fase 2 necesita más ancho útil para respetar
   los dos saltos de línea previstos sin crear líneas adicionales. */
.part-two .inner--narrow{
  width:min(calc(100% - 72px), 1160px);
  max-width:1160px;
}

.part-two .paragraph{
  max-width:1120px;
  font-family:inherit;
  font-size:clamp(1rem,3.5vw,2.8rem);
  line-height:1.10;
  letter-spacing:.02em;
  font-weight:450;
  color:rgb(110,95,84);
}

.part-two .mini-heading,
.part-two .parents__group h3,
.part-two .parents__group p{
  margin:2px 0;
  font-size:clamp(1.4rem,2.25vw,2rem);
  line-height:1.30;
  font-weight:450;
}

.part-two .mini-heading{  margin:46px 0 22px;
  font-size:clamp(1.65rem,2.55vw,2.8rem);
  line-height:1.30;
  font-weight:500;
}

.part-two .mini-heading--date{
  margin-top:48px;
  margin-bottom:25px;
}


.part-two .date-lockup__side strong,
.part-two .date-lockup__day{
  font-weight:550;
}

.part-two .parents{
  gap:28px;
}

.part-two .parents__group h3{
  margin:0 0 10px;
  font-size:clamp(1.6rem,2.5vw,2.2rem);
  font-weight:550;
  letter-spacing:.02em;
}

.part-two .parents__group p{
  margin:2px 0;
  font-size:clamp(1.4rem,2.25vw,2rem);
  line-height:1.30;
}

.countdown-section{
  padding-top:clamp(55px,7vw,90px);
}

.countdown-section .small-script{
  margin-top:0;
}

/* HERO */
.hero{
  position:relative;
  height:min(100svh,980px);
  min-height:680px;
  overflow:hidden;
  /* Etapa 1: la foto se funde primero contra un color liso. */
  background:var(--warm-bg);
}
.hero__photo{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 23%;

  /* Etapa 1: foto -> color liso.
     La textura todavía NO aparece durante este degradado. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0,0,0,.90) 68%,
    rgba(0,0,0,.65) 76%,
    rgba(0,0,0,.35) 84%,
    rgba(0,0,0,.12) 90%,
    rgba(0,0,0,0) 96%,
    rgba(0,0,0,0) 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0,0,0,.90) 68%,
    rgba(0,0,0,.65) 76%,
    rgba(0,0,0,.35) 84%,
    rgba(0,0,0,.12) 90%,
    rgba(0,0,0,0) 96%,
    rgba(0,0,0,0) 100%
  );
}
.hero__shade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.06) 42%,rgba(0,0,0,.1) 72%,rgba(255,255,255,.06) 100%);

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0,0,0,.90) 68%,
    rgba(0,0,0,.65) 76%,
    rgba(0,0,0,.35) 84%,
    rgba(0,0,0,.12) 90%,
    rgba(0,0,0,0) 96%,
    rgba(0,0,0,0) 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0,0,0,.90) 68%,
    rgba(0,0,0,.65) 76%,
    rgba(0,0,0,.35) 84%,
    rgba(0,0,0,.12) 90%,
    rgba(0,0,0,0) 96%,
    rgba(0,0,0,0) 100%
  );
}
.hero__fade{
  display:none;
}
.hero__content{
  position:absolute;
  left:50%;bottom:8%;
  transform:translateX(-50%);
  width:min(96%,1100px);
  text-align:center;
}
.hero__content--simple{
  bottom:8%;
  z-index:20;
}
.hero h1{
  margin:0 auto;
  font-family:"Sloop Script", cursive;
  font-weight:400;
  font-style:normal;

  /* Siempre una sola línea y centrado */
  white-space:nowrap;
  width:max-content;
  max-width:100%;
  text-align:center;

  font-size:clamp(96px, 11vw, 160px);
  line-height:.90;
  letter-spacing:-0.002em;

  color:rgb(110,95,84);
  font-kerning:none;
  text-shadow:none;
  font-synthesis:none;
}

/* BOTÁNICA */
.botanical{overflow:hidden}
.botanical__art{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.88;
  width:clamp(190px,28vw,390px);
}
.botanical__art--right{right:-100px;top:80px;transform:rotate(-18deg)}
.botanical__art--left{left:-100px;top:80px;transform:rotate(142deg)}
.botanical__art--schedule{top:auto;bottom:-60px}

/* PADRES */
.parents{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:44px;
  align-items:center;
  margin:0 auto;
  max-width:900px;
}
.parents__group h3{
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:400;
  font-size:1rem;
}
.parents__group p{
  margin:5px 0;
  font-size:clamp(1rem,1.7vw,1.25rem);
}
.parents__ornament{
  font-family:Georgia,serif;
  color:var(--sage-soft);
  font-size:2.5rem;
}

/* FECHA */
.date-lockup{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:center;
  max-width:700px;
  margin:0 auto;
}
.date-lockup__side{
  display:grid;
  grid-template-rows:1px auto 1px;
  gap:18px;
  align-items:center;
}
.date-lockup__side span{display:block;height:1px;background:var(--sage)}
.date-lockup__side strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.9rem);
  font-weight:400;
  letter-spacing:.04em;
}
.date-lockup__day{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(5rem,12vw,9rem);
  line-height:.8;
}

/* COUNTDOWN */
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  max-width:760px;
  margin:0 auto;
}
.countdown div{
  border-top:1px solid rgba(110,95,84,.6);
  border-bottom:1px solid rgba(110,95,84,.6);
  padding:26px 5px 20px;
}
.countdown strong{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.7rem,7vw,5.5rem);
  line-height:.9;
}
.countdown span{
  display:block;
  margin-top:12px;
  font-size:.63rem;
  letter-spacing:.18em;
}

/* FOTO HORIZONTAL */
.photo-divider{
  width:100%;
  height:clamp(340px,60vw,790px);
  overflow:hidden;
}
.photo-divider img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}

/* LUGARES */
.places{padding-top:120px;padding-bottom:120px}
.place{max-width:760px;margin:0 auto}
.place__icon{
  font-size:1.6rem;
  color:var(--sage-soft);
  margin-bottom:18px;
}
.place__type{
  margin:0 0 15px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.88rem;
}
.place h2{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(3.5rem,8vw,6rem);
  line-height:.98;
}
.place__time{
  margin:24px 0 26px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1rem;
}
.place-separator{
  margin:65px 0;
  font-size:2rem;
  color:var(--sage-soft);
}
.pill{
  display:inline-flex;
  min-width:185px;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:0 28px;
  border-radius:999px;
  color:#fff;
  background:var(--sage);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  border:0;
  cursor:pointer;
  transition:.2s ease;
}
.pill:hover{background:var(--sage-dark);transform:translateY(-1px)}
.pill--button{margin-top:28px}

/* DETALLES */
.details-section{padding-top:100px;padding-bottom:100px}
.details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.detail-card{position:relative;padding:25px 10px}
.detail-card__ornament{
  height:86px;
  max-width:250px;
  object-fit:contain;
  margin:0 auto 30px;
  opacity:.9;
}
.detail-card h2{
  margin:0 0 28px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(3rem,6vw,5rem);
}
.detail-card p{
  margin:10px auto;
  max-width:520px;
  line-height:1.7;
  font-size:1rem;
}
.detail-card strong{
  display:block;
  margin-top:18px;
  font-size:.95rem;
}

/* FOTO VERTICAL */
.couple-photo{
  width:100%;
  height:clamp(480px,75vw,920px);
  overflow:hidden;
}
.couple-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
}

/* CRONOGRAMA */
.timeline-section{
  padding-top:104px;
  padding-bottom:112px;
}
.inner--timeline{
  width:min(100% - 54px, 1080px);
}
.timeline-title{
  margin:0 0 48px;
  font-family:"Sloop Script", cursive;
  font-size:clamp(5rem, 9vw, 8.2rem);
  line-height:.82;
  font-weight:400;
  letter-spacing:0;
  color:var(--sage);
}
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(6, minmax(122px, auto));
  column-gap:0;
  row-gap:4px;
  max-width:900px;
  margin:0 auto;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:64px;
  bottom:64px;
  width:2px;
  transform:translateX(-50%);
  background:rgba(114,128,113,.68);
}
.timeline-item{
  position:relative;
  display:flex;
  align-items:center;
  min-height:122px;
}
.timeline-item:nth-child(1){grid-column:1;grid-row:1}
.timeline-item:nth-child(2){grid-column:2;grid-row:2}
.timeline-item:nth-child(3){grid-column:1;grid-row:3}
.timeline-item:nth-child(4){grid-column:2;grid-row:4}
.timeline-item:nth-child(5){grid-column:1;grid-row:5}
.timeline-item:nth-child(6){grid-column:2;grid-row:6}
.timeline-item--left{
  justify-content:flex-end;
  padding-right:72px;
}
.timeline-item--right{
  justify-content:flex-start;
  padding-left:72px;
}
.timeline-item::before{
  content:"";
  position:absolute;
  top:50%;
  width:52px;
  border-top:2px solid rgba(114,128,113,.68);
}
.timeline-item--left::before{
  right:0;
  transform:translateY(-50%);
}
.timeline-item--right::before{
  left:0;
  transform:translateY(-50%);
}
.timeline-card{
  width:min(100%, 285px);
  text-align:center;
  color:var(--sage);
  font-family:"The Seasons","Cormorant Garamond",Georgia,serif;
  font-weight:450;
}
.timeline-card__icon{
  width:96px;
  height:96px;
  margin:0 auto 14px;
  color:rgba(114,128,113,.72);
}
.timeline-card__icon svg{
  width:100%;
  height:100%;
  display:block;
}
.timeline-card__name{
  margin:0;
  color:var(--text);
  font-family:inherit;
  font-size:clamp(1.25rem, 2.05vw, 1.75rem);
  line-height:1.12;
  letter-spacing:.025em;
  text-transform:uppercase;
  font-weight:500;
}
.timeline-card__time{
  margin:7px 0 0;
  color:var(--text);
  font-family:inherit;
  font-size:clamp(1.55rem, 2.8vw, 2.05rem);
  line-height:1;
  font-weight:450;
}

/* REGALOS */
.gifts{background:var(--cream)}
.gift-icon{
  font-family:Georgia,serif;
  font-size:3rem;
  margin-top:34px;
}
.bank-panel{
  margin:25px auto 0;
  max-width:570px;
  padding:24px;
  border:1px solid rgba(110,95,84,.28);
  border-radius:18px;
  background:var(--warm-soft);
  line-height:1.6;
}

/* CIERRE */
.closing{
  position:relative;
  min-height:2020px;
  height:150svh;
  overflow:hidden;
  background:#ddd;
}
.closing__photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.closing__shade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.5));
}
.closing__content{
  position:absolute;
  left:50%;bottom:9%;
  transform:translateX(-50%);
  width:min(90%,980px);
  text-align:center;
  color:#fff;
}
.closing__content h2{
  margin:0 0 34px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.9rem,7vw,5.6rem);
  line-height:1.04;
  font-weight:400;
}
.rsvp-button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:58px;
  padding:0 34px;
  border-radius:999px;
  background:var(--sage);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.75rem;
  transition:.2s ease;
}
.rsvp-button:hover{background:var(--sage-dark)}
.closing__names{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:2.4rem;
  margin:38px 0 0;
}
.footer{
  padding:22px;
  text-align:center;
  background:var(--warm-bg);
  color:var(--sage);
  font-size:.75rem;
}

@media (max-width:900px){
  .closing{min-height:600px;height:100svh;}
}
  

/* RESPONSIVE */
@media (max-width:760px){

  .part-two{
    margin-top:-70px;
    padding-top:0px;
    padding-bottom:58px;
  }

  .part-two .inner--narrow{
    width:min(100% - 36px, 850px);
    max-width:850px;
  }

  .part-two .paragraph{
    margin-top:0px;
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-right:-10px;
    font-size:min(1.50rem,4.7vw);
    line-height:1.29;
    letter-spacing:.01em;
  }

  /* Solo esta frase: conservar exactamente los 2 saltos definidos en el HTML,
     para que el párrafo quede en 3 líneas también en celular. */
  .part-two .paragraph .desktop-only{
    display:initial;
  }

  .part-two .mini-heading{
    margin:38px 0 18px;
    font-size:1.55rem;
    line-height:1.25;
  }

  .part-two .mini-heading--date{
    margin-top:38px;
    margin-bottom:18px;
  }

  .part-two .parents{
    gap:16px;
  }

  .part-two .parents__group h3{
    margin-bottom:7px;
    font-size:1.5rem;
    font-weight:550;
  }

  .part-two .parents__group p{
    margin:1px 0;
    font-size:1.38rem;
    line-height:1.25;
    font-weight:450;
  }


  .invitation{box-shadow:none}
  .hero{height:100svh;min-height:620px}

  /* TRANSICIÓN RESPONSIVA · Fase 1 -> Fase 2
     La foto termina ANTES de la zona del nombre. El tramo inferior
     del hero queda completamente en color liso; la textura aparece
     recién en la fase 2. */
  .hero__photo,
  .hero__shade{
    -webkit-mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 52%,
      rgba(0,0,0,.96) 57%,
      rgba(0,0,0,.82) 62%,
      rgba(0,0,0,.62) 67%,
      rgba(0,0,0,.40) 72%,
      rgba(0,0,0,.20) 77%,
      rgba(0,0,0,.07) 80%,
      rgba(0,0,0,0) 83%,
      rgba(0,0,0,0) 100%
    );
    mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 52%,
      rgba(0,0,0,.96) 57%,
      rgba(0,0,0,.82) 62%,
      rgba(0,0,0,.62) 67%,
      rgba(0,0,0,.40) 72%,
      rgba(0,0,0,.20) 77%,
      rgba(0,0,0,.07) 80%,
      rgba(0,0,0,0) 83%,
      rgba(0,0,0,0) 100%
    );
  }

  /* Los primeros 70px corresponden al solapamiento con el hero.
     Se mantienen 100% lisos. La textura empieza DESPUÉS del hero. */
  .part-two::before{
    height:calc(70px + clamp(180px,30vw,240px));
    background:linear-gradient(
      to bottom,
      var(--warm-bg) 0,
      var(--warm-bg) 0px,
      rgba(247,237,230,.96) 30px,
      rgba(247,237,230,.84) 55px,
      rgba(247,237,230,.64) 85px,
      rgba(247,237,230,.42) 105px,
      rgba(247,237,230,.20) 115px,
      rgba(247,237,230,0) 100%
    );
  }

  .hero h1{
    font-size:clamp(58px,16vw,112px);
    white-space:nowrap;
  }
  .section{padding:78px 0}
  .inner{width:min(100% - 34px,1060px)}
  .script-title{font-size:clamp(3.9rem,16vw,6rem)}
  .paragraph{font-size:.96rem;line-height:1.75}
  .desktop-only{display:none}

  .parents{
    grid-template-columns:1fr;
    gap:25px;
  }
  .parents__ornament{transform:none}
  .parents__group h3{font-size:.8rem}
  .parents__group p{font-size:1rem}

  .date-lockup{
    grid-template-columns:1fr auto 1fr;
    gap:14px;
  }
  .date-lockup__side strong{font-size:1.55rem}
  .date-lockup__day{font-size:5.7rem}

  .countdown{gap:6px}
  .countdown div{padding:18px 2px 14px}
  .countdown strong{font-size:2.7rem}
  .countdown span{font-size:.52rem;letter-spacing:.1em}

  .photo-divider{height:52svh;min-height:360px}
  .botanical__art{width:210px;opacity:.55}
  .botanical__art--right{right:-120px}
  .botanical__art--left{left:-120px}

  .place h2{font-size:4rem}
  .place-separator{margin:52px 0}

  .details-grid{
    grid-template-columns:1fr;
    gap:55px;
  }
  .detail-card{
    padding:0 6px;
  }
  .detail-card h2{font-size:3.8rem}

  .couple-photo{height:70svh;min-height:500px}

  .timeline-section{
    padding-top:84px;
    padding-bottom:88px;
  }

  .inner--timeline{
    width:min(100% - 30px, 1080px);
  }

  .timeline-title{
    margin-bottom:38px;
    font-size:clamp(5rem, 24vw, 7.1rem);
  }

  .timeline{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
    max-width:350px;
  }

  .timeline::before{
    display:none;
  }

  .timeline-item,
  .timeline-item--left,
  .timeline-item--right{
    width:100%;
    justify-content:center;
    padding:0;
    min-height:auto;
  }

  .timeline-item::before{
    display:none;
  }

  .timeline-card{
    width:min(100%, 310px);
    margin:0 auto;
  }

  .timeline-card__icon{
    width:84px;
    height:84px;
    margin-bottom:12px;
  }

  .timeline-card__name{
    font-size:1.5rem;
    line-height:1.1;
  }

  .timeline-card__time{
    margin-top:7px;
    font-size:1.9rem;
  }

  .closing{min-height:500px;height:100svh;}
  .closing__content h2{font-size:3rem}
  .rsvp-button{
    width:min(100%,340px);
    padding:12px 22px;
    line-height:1.35;
    min-height:64px;
  }
}

@media (max-width:420px){
  .hero__content{
    bottom:7.5%;
    width:96%;
  }
  .closing{min-height:500px;height:80svh;}

  .hero h1{
    font-size:15.5vw;
    white-space:nowrap;
  }
  .date-lockup__day{font-size:5rem}
  .countdown strong{font-size:2.25rem}
  .place h2{font-size:3.45rem}
  .detail-card h2{font-size:3.25rem}
  .timeline{
    max-width:320px;
    row-gap:28px;
  }

  .timeline-card__icon{
    width:76px;
    height:76px;
  }

  .timeline-card__name{
    font-size:1.36rem;
  }

  .timeline-card__time{
    font-size:1.78rem;
  }
}

/* TEXTURA ORGÁNICA · PAPEL DE INVITACIÓN
   Un solo fondo continuo para toda la invitación.
   Se reemplaza el SVG por una versión uniforme y repetible, sin cortes. */
body{
  background-color:var(--warm-bg);
}

.invitation{
  background-color:var(--warm-bg);
  background-image:url("../assets/textures/papel-organico.svg");
  background-repeat:repeat-y;
  background-position:center top;
  background-size:100% auto;
}

/* Todas las fases beige usan el MISMO papel de .invitation. */
.section,
.footer,
.gifts{
  background-color:transparent;
  background-image:none;
}

/* Panel interno se mantiene ligeramente diferenciado,
   pero sin volver a cargar otra textura distinta. */
.bank-panel{
  background-color:rgba(245,234,230,.86);
  background-image:none;
}

/* Ajuste del degradado para móviles más angostos.
   Se amplía la zona inferior de color limpio a medida que el título
   ocupa una proporción mayor de la pantalla. */
@media (max-width:520px){
  .hero__photo,
  .hero__shade{
    -webkit-mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.94) 54%,
      rgba(0,0,0,.76) 60%,
      rgba(0,0,0,.52) 66%,
      rgba(0,0,0,.28) 71%,
      rgba(0,0,0,.10) 75%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,0) 100%
    );
    mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.94) 54%,
      rgba(0,0,0,.76) 60%,
      rgba(0,0,0,.52) 66%,
      rgba(0,0,0,.28) 71%,
      rgba(0,0,0,.10) 75%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,0) 100%
    );
  }
}

@media (max-width:390px){
  .hero__photo,
  .hero__shade{
    -webkit-mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0,0,0,.92) 52%,
      rgba(0,0,0,.72) 58%,
      rgba(0,0,0,.46) 64%,
      rgba(0,0,0,.24) 69%,
      rgba(0,0,0,.08) 73%,
      rgba(0,0,0,0) 77%,
      rgba(0,0,0,0) 100%
    );
    mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0,0,0,.92) 52%,
      rgba(0,0,0,.72) 58%,
      rgba(0,0,0,.46) 64%,
      rgba(0,0,0,.24) 69%,
      rgba(0,0,0,.08) 73%,
      rgba(0,0,0,0) 77%,
      rgba(0,0,0,0) 100%
    );
  }
}