:root {

  --cream: #fffaf6;
  --cream-soft: #fff5f1;

  --pink-light: #f9dce5;
  --pink: #f1afc2;
  --pink-medium: #df8eaa;
  --pink-dark: #bd6684;

  --text: #382c31;

}


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  width: 100%;

  overflow-x: clip;

  scroll-behavior: smooth;

}


body {

  width: 100%;

  min-height: 100%;

  overflow-x: clip;

  background:
    var(--cream);

  color:
    var(--text);

  font-family:
    "Montserrat",
    sans-serif;

}


body.locked {

  height: 100vh;

  overflow: hidden;

}


button {

  font: inherit;

}



/* =========================================================
   APERTURA
========================================================= */

.intro {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 50% 40%,
      rgba(255,255,255,.98),
      rgba(255,245,248,.82) 36%,
      transparent 68%
    ),

    linear-gradient(
      160deg,
      #fffaf7,
      #fce8ef 55%,
      #f8d6e1
    );

  transition:

    opacity .9s ease,

    visibility .9s ease;

}


.intro.hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}


.ambient-glow {

  position: absolute;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(255,255,255,.95),
      rgba(255,214,228,.38) 52%,
      transparent 72%
    );

  filter:
    blur(25px);

  animation:
    ambientPulse
    5.5s
    ease-in-out
    infinite;

}


@keyframes ambientPulse {

  0%,
  100% {

    transform:
      scale(.95);

    opacity: .75;

  }


  50% {

    transform:
      scale(1.06);

    opacity: 1;

  }

}



/* =========================================================
   PORTADA
========================================================= */

.intro-copy {

  position: absolute;

  top: 8vh;

  left: 20px;

  right: 20px;

  z-index: 20;

  text-align: center;

  transition:
    opacity .5s ease,
    transform .5s ease;

}


.intro-copy.hide {

  opacity: 0;

  transform:
    translateY(-10px);

}


.intro-copy h1 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      11vw,
      5rem
    );

  font-weight: 500;

}


.intro-copy p {

  margin-top: 6px;

  font-size: .72rem;

  letter-spacing: .2em;

  text-transform: uppercase;

  opacity: .48;

}



/* =========================================================
   SOBRE
========================================================= */

.envelope-scene {

  position: relative;

  z-index: 10;

  width:
    min(
      94vw,
      450px
    );

  height: 450px;

  display: flex;

  justify-content: center;

  align-items: center;

  perspective: 1400px;

  transform:
    translateY(35px);

}


.envelope-shadow {

  position: absolute;

  bottom: 50px;

  width: 285px;

  height: 45px;

  border-radius: 50%;

  background:
    rgba(112,59,78,.18);

  filter:
    blur(20px);

}


.envelope {

  position: absolute;

  bottom: 70px;

  width: 340px;

  height: 220px;

  max-width: 86vw;

  transform-style:
    preserve-3d;

  animation:
    envelopeFloat
    4s
    ease-in-out
    infinite;

  transition:
    opacity .7s ease,
    transform .7s ease;

}


@keyframes envelopeFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }


  50% {

    transform:
      translateY(-7px);

  }

}


.envelope-back {

  position: absolute;

  inset: 0;

  border-radius: 10px;

  background:

    linear-gradient(
      145deg,
      #f3b4c6,
      #e994ae
    );

  box-shadow:

    0 30px 75px
    rgba(110,63,81,.18),

    inset
    0 0 0 1px
    rgba(255,255,255,.3);

}



/* =========================================================
   CARTA APERTURA
========================================================= */

.letter {

  position: absolute;

  left: 50%;

  bottom: 16px;

  z-index: 3;

  width: 88%;

  height: 185px;

  overflow: hidden;

  transform:
    translateX(-50%);

  border-radius: 8px;

  background:

    linear-gradient(
      #fffdfb,
      #fff8f5
    );

  box-shadow:

    0 25px 60px
    rgba(80,50,60,.18);

  transition:

    transform 1.35s
    cubic-bezier(.17,.84,.32,1),

    opacity .5s ease;

}


.letter-content {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 25px;

  opacity: 0;

  transform:
    translateY(14px);

  transition:

    opacity .9s ease .65s,

    transform .9s ease .65s;

}


.letter-content .mini {

  margin-bottom: 11px;

  color:
    var(--pink-dark);

  font-size: .65rem;

  letter-spacing: .2em;

  text-transform: uppercase;

}


.letter-content h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2rem;

  font-weight: 500;

  line-height: 1.05;

}



/* =========================================================
   SOBRE FRENTE
========================================================= */

.front-left,
.front-right,
.front-bottom {

  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;

}


.front-left {

  clip-path:
    polygon(
      0 0,
      53% 58%,
      0 100%
    );

  background:
    #efa9bd;

}


.front-right {

  clip-path:
    polygon(
      100% 0,
      47% 58%,
      100% 100%
    );

  background:
    #e794ae;

}


.front-bottom {

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

  background:

    linear-gradient(
      #f0aec1,
      #df8ca6
    );

}


.flap {

  position: absolute;

  top: 0;

  left: 0;

  z-index: 8;

  width: 100%;

  height: 62%;

  transform-origin:
    top center;

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

  background:

    linear-gradient(
      150deg,
      #f8c7d4,
      #eca4b8
    );

  backface-visibility:
    hidden;

  transition:

    transform 1s
    cubic-bezier(.6,.04,.22,.96),

    z-index .01s
    linear .5s;

}



/* =========================================================
   SELLO
========================================================= */

.seal {

  position: absolute;

  left: 50%;

  top: 49%;

  z-index: 20;

  width: 70px;

  height: 70px;

  border: 0;

  border-radius: 50%;

  cursor: pointer;

  transform:
    translate(-50%, -50%);

  background:

    radial-gradient(
      circle at 35% 25%,
      #f4c6d5,
      #d77f9c 46%,
      #b85b79 85%
    );

  box-shadow:

    0 10px 25px
    rgba(100,45,65,.30);

  animation:
    sealPulse
    2.3s
    ease-in-out
    infinite;

  transition:
    opacity .3s ease,
    transform .3s ease;

}


.seal::before {

  content: "♡";

  color: white;

  font-family: serif;

  font-size: 2rem;

}


@keyframes sealPulse {

  50% {

    box-shadow:

      0 13px 32px
      rgba(100,45,65,.34),

      0 0 0 10px
      rgba(215,127,156,.09);

  }

}


.open-label {

  position: absolute;

  bottom: -38px;

  width: 100%;

  text-align: center;

  font-size: .7rem;

  letter-spacing: .17em;

  text-transform: uppercase;

  opacity: .45;

}



/* =========================================================
   FLORES APERTURA
========================================================= */

.flower {

  position: absolute;

  width: 42px;

  height: 42px;

  opacity: .5;

}


.flower::before,
.flower::after {

  content: "";

  position: absolute;

  left: 10px;

  top: 4px;

  width: 20px;

  height: 34px;

  border-radius: 70%;

  background:

    linear-gradient(
      #fff,
      #f6c4d3
    );

  transform-origin:
    50% 90%;

}


.flower::before {

  transform:
    rotate(-40deg);

}


.flower::after {

  transform:
    rotate(40deg);

}


.flower-one {

  left: 2%;

  bottom: 75px;

}


.flower-two {

  right: 4%;

  bottom: 120px;

}



/* =========================================================
   SOBRE ABIERTO
========================================================= */

.envelope.open {

  animation: none;

}


.envelope.open .flap {

  z-index: 2;

  transform:
    rotateX(180deg);

}


.envelope.open .seal {

  opacity: 0;

  pointer-events: none;

  animation: none;

  transform:
    translate(-50%, -50%)
    scale(.5);

}


.envelope.open .open-label {

  opacity: 0;

}


.envelope.open .letter {

  transform:

    translateX(-50%)

    translateY(-145px);

}


.envelope.open .letter-content {

  opacity: 1;

  transform:
    translateY(0);

}


.envelope.leave {

  opacity: 0;

  transform:

    translateY(100px)

    scale(.92);

}



/* =========================================================
   EXPANSIÓN
========================================================= */

.letter-transition {

  position: fixed;

  z-index: 5000;

  overflow: hidden;

  background:

    linear-gradient(
      #fffdfb,
      #fff8f5
    );

  box-shadow:

    0 30px 80px
    rgba(80,45,60,.24);

  transition:

    left 1.1s
    cubic-bezier(.15,.75,.2,1),

    top 1.1s
    cubic-bezier(.15,.75,.2,1),

    width 1.1s
    cubic-bezier(.15,.75,.2,1),

    height 1.1s
    cubic-bezier(.15,.75,.2,1),

    transform 1.1s
    cubic-bezier(.15,.75,.2,1),

    opacity .6s ease;

}


.letter-transition.expanded {

  left: 50% !important;

  top: 50% !important;

  width:
    min(
      92vw,
      650px
    ) !important;

  height:
    76vh !important;

  transform:
    translate(-50%, -50%);

  border-radius: 24px;

}


.letter-transition.fade-away {

  opacity: 0;

}



/* =========================================================
   PÉTALOS
========================================================= */

.petal,
.final-petal {

  position: fixed;

  z-index: 7000;

  width: 11px;

  height: 18px;

  opacity: 0;

  border-radius:
    75% 15% 70% 20%;

  background:

    linear-gradient(
      #ffdbe5,
      #df86a2
    );

  pointer-events: none;

  animation:

    petalFall

    var(--duration)

    ease-in

    forwards;

}


@keyframes petalFall {

  10% {

    opacity: .8;

  }


  100% {

    opacity: 0;

    transform:

      translate3d(
        var(--drift),
        105vh,
        0
      )

      rotate(
        var(--rotation-end)
      );

  }

}



/* =========================================================
   GENERAL
========================================================= */

main {

  position: relative;

  width: 100%;

  overflow: visible;

  background:
    var(--cream);

}


section {

  width: 100%;

}


.story-kicker {

  display: block;

  margin-bottom: 24px;

  color:
    var(--pink-dark);

  font-size: .68rem;

  letter-spacing: .23em;

  text-transform: uppercase;

}



/* =========================================================
   INTRO HISTORIA
========================================================= */

.story-intro {

  min-height: 110svh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    100px 25px;

  text-align: center;

  background:

    linear-gradient(
      #fffaf6,
      #fdf3f5
    );

}


.story-intro-content {

  max-width: 680px;

  margin: auto;

}


.story-main-title {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.8rem,
      11vw,
      5rem
    );

  line-height: 1;

  font-weight: 500;

}


.story-emphasis {

  margin-top: 30px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.55rem,
      6vw,
      2.4rem
    );

  line-height: 1.28;

}


.scroll-line {

  position: relative;

  width: 1px;

  height: 70px;

  margin:
    60px auto 0;

  overflow: hidden;

  background:
    rgba(100,60,70,.1);

}


.scroll-line span {

  position: absolute;

  left: 0;

  top: -100%;

  width: 100%;

  height: 100%;

  background:

    linear-gradient(
      transparent,
      var(--pink-dark),
      transparent
    );

  animation:
    scrollLine
    2s
    linear
    infinite;

}


@keyframes scrollLine {

  100% {

    top: 100%;

  }

}



/* =========================================================
   JÓVENES
========================================================= */

.young-section {

  position: relative;

  min-height: 145svh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    95px 20px 110px;

  text-align: center;

  background:

    linear-gradient(
      #fdf3f5,
      #fbe8ef,
      #f7e4ea
    );

}


.young-glow {

  position: absolute;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  background:
    rgba(244,190,208,.18);

  filter:
    blur(75px);

}


.young-copy {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 390px;

  margin:
    0 auto 45px;

}


.young-line {

  margin:
    10px 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2rem,
      8vw,
      3.2rem
    );

  line-height: 1.08;

  opacity: .76;

}


.young-line-special {

  color:
    var(--pink-dark);

  opacity: 1;

}


.young-image-wrapper {

  position: relative;

  z-index: 2;

  width:
    calc(100% - 42px);

  max-width: 350px;

  margin:
    0 auto 45px;

}


.image-halo {

  position: absolute;

  inset: 8%;

  border-radius: 34px;

  background:
    rgba(239,169,189,.22);

  filter:
    blur(38px);

}


.young-image {

  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  height: auto;

  margin: auto;

  border-radius: 28px;

  box-shadow:

    0 24px 60px
    rgba(84,51,61,.14);

}


.young-description {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 305px;

  margin: auto;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.38rem;

  line-height: 1.43;

  opacity: .82;

}



/* =========================================================
   RECUERDOS
========================================================= */

.memories-section {

  position: relative;

  padding:
    120px 18px 150px;

  overflow: hidden;

  background:

    linear-gradient(
      #f7e4ea,
      #f7dfe8,
      #faeef1
    );

}


.memories-background-word {

  position: absolute;

  top: 420px;

  left: 50%;

  transform:
    translateX(-50%);

  color:
    rgba(188,102,132,.04);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 9rem;

}


.memories-header {

  position: relative;

  z-index: 3;

  max-width: 620px;

  margin:
    0 auto 100px;

  text-align: center;

}


.memories-header h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.7rem,
      10vw,
      4.8rem
    );

  font-weight: 500;

  line-height: 1;

}


.memories-list {

  position: relative;

  z-index: 3;

  width:
    min(
      100%,
      680px
    );

  margin: auto;

  display: flex;

  flex-direction: column;

  gap: 76px;

}


.memory-block {

  display: flex;

  flex-direction: column;

  width: 100%;

}


.memory-left {

  align-items: flex-start;

}


.memory-right {

  align-items: flex-end;

}


.polaroid {

  position: relative;

  display: block;

  width:
    min(
      78vw,
      330px
    );

  padding:
    12px 12px 46px;

  border: 0;

  background:
    #fffdfb;

  cursor: pointer;

  box-shadow:

    0 22px 55px
    rgba(66,40,50,.15);

}


.memory-left .polaroid {

  rotate: -3deg;

}


.memory-right .polaroid {

  rotate: 3deg;

}


.polaroid img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 70svh;

  object-fit: contain;

}


.polaroid span {

  position: absolute;

  left: 10px;

  right: 10px;

  bottom: 13px;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1rem;

}


.memory-caption {

  align-self: flex-end;

  margin-top: 28px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2rem,
      9vw,
      3rem
    );

}


.memory-story {

  max-width: 550px;

  margin: auto;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2rem,
      8vw,
      3rem
    );

  line-height: 1.12;

}


.memory-story strong {

  display: block;

  margin-top: 12px;

  color:
    var(--pink-dark);

  font-weight: 500;

}


.memory-pair {

  display: flex;

  justify-content: center;

  gap: 10px;

}


.memory-pair .polaroid {

  width: 41vw;

  padding:
    8px 8px 26px;

}


.memory-pair .polaroid:first-child {

  rotate: -4deg;

  margin-top: 20px;

}


.memory-pair .polaroid:last-child {

  rotate: 4deg;

}


.memory-last-line {

  max-width: 520px;

  margin:
    25px auto 0;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.75rem,
      7vw,
      2.5rem
    );

  line-height: 1.28;

}


.memory-last-line span {

  display: block;

  margin-top: 10px;

  color:
    var(--pink-dark);

}



/* =========================================================
   BESO
========================================================= */

.kiss-section {

  min-height: 120svh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 55px;

  padding:
    110px 25px;

  background:

    linear-gradient(
      #faeef1,
      #fffaf7
    );

}


.kiss-photo-wrapper {

  width:
    min(
      82vw,
      400px
    );

}


.kiss-photo {

  display: block;

  width: 100%;

  height: auto;

  border:
    10px solid white;

  border-bottom-width: 40px;

  rotate: -2deg;

  box-shadow:

    0 30px 75px
    rgba(66,42,50,.18);

}


.kiss-content {

  max-width: 650px;

  text-align: center;

}


.kiss-decoration {

  color:
    var(--pink-medium);

  font-size: 2rem;

  margin-bottom: 20px;

}


.kiss-small {

  margin-bottom: 18px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.5rem;

}


.kiss-title {

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.8rem,
      11vw,
      5rem
    );

  line-height: 1;

  font-weight: 500;

}


.memory-date {

  display: block;

  margin-top: 40px;

  font-size: .68rem;

  letter-spacing: .2em;

  text-transform: uppercase;

  opacity: .4;

}



/* =========================================================
   TIEMPO
========================================================= */

.time-intro {

  min-height: 100svh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    100px 25px;

  text-align: center;

  background:

    linear-gradient(
      #fffaf7,
      #f3e4e9
    );

}


.time-intro h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3.7rem,
      15vw,
      7rem
    );

  font-weight: 500;

}


.time-intro-line {

  width: 1px;

  height: 110px;

  margin-top: 45px;

  background:

    linear-gradient(
      transparent,
      var(--pink-dark),
      transparent
    );

}



/* =========================================================
   CAMINOS
========================================================= */

.time-section {

  position: relative;

  width: 100%;

  height: 420vh;

  background:

    #20191c
    url("assets/Caminos_Cruzados.png")
    center center
    / cover
    no-repeat;

}


.time-visual {

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  background:

    #20191c
    url("assets/Caminos_Cruzados.png")
    center center
    / cover
    no-repeat;

}


.time-image {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform:
    scale(1.025);

  filter:
    saturate(.8)
    brightness(.72);

}


.time-overlay {

  position: absolute;

  inset: 0;

  z-index: 2;

  background:

    linear-gradient(
      180deg,
      rgba(25,15,20,.25),
      rgba(25,15,20,.10),
      rgba(25,15,20,.30)
    );

}


.time-copy {

  position: absolute;

  inset: 0;

  z-index: 4;

}


.time-text {

  position: absolute;

  left: 50%;

  top: 50%;

  width:
    min(
      88vw,
      650px
    );

  transform:
    translate(-50%, -50%);

  opacity: 0;

  color: white;

  text-align: center;

  text-shadow:
    0 3px 20px
    rgba(0,0,0,.5);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.3rem,
      9vw,
      4.7rem
    );

  line-height: 1.05;

}


.time-text span {

  display: block;

  margin-top: 8px;

}


.time-text-3 span,
.time-text-5 {

  color:
    #ffe0e9;

}


.time-text-5 {

  font-size:
    clamp(
      3rem,
      13vw,
      6rem
    );

}


.time-glow {

  position: absolute;

  z-index: 3;

  left: 50%;

  top: 25%;

  width: 120px;

  height: 120px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(255,255,255,.8),
      rgba(250,181,204,.25),
      transparent 70%
    );

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(.2);

}



/* =========================================================
   REENCUENTRO
========================================================= */

.reencounter-section {

  min-height: 150svh;

  padding:
    180px 22px 130px;

  text-align: center;

  background:

    linear-gradient(
      180deg,
      #20191c 0,
      #715760 65px,
      #bea3ad 130px,
      #ecdae0 195px,
      #fff9f6 285px,
      #f9e8ee 100%
    );

}


.reencounter-content {

  max-width: 650px;

  margin: auto;

}


.reencounter-title {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      12vw,
      5.5rem
    );

  line-height: .98;

}


.reencounter-intro {

  margin-top: 45px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.7rem;

  line-height: 1.4;

}


.reencounter-intro span {

  display: block;

}


.reencounter-image-wrapper {

  position: relative;

  width:
    min(
      86vw,
      430px
    );

  margin:
    80px auto;

}


.reencounter-halo {

  position: absolute;

  inset: 8%;

  background:
    rgba(237,153,183,.28);

  filter:
    blur(50px);

}


.reencounter-image {

  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  border-radius: 30px;

  box-shadow:

    0 30px 80px
    rgba(74,43,55,.16);

}


.floating-petal {

  position: absolute;

  z-index: 3;

  width: 18px;

  height: 29px;

  border-radius:
    80% 15% 70% 20%;

  background:

    linear-gradient(
      #ffdce7,
      #d9829e
    );

}


.petal-a {

  top: 3%;

  left: -3%;

}


.petal-b {

  right: -2%;

  top: 35%;

}


.petal-c {

  left: 8%;

  bottom: 2%;

}


.reencounter-final {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.7rem;

}


.reencounter-highlight {

  margin-top: 25px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.5rem,
      10vw,
      4.4rem
    );

}



/* =========================================================
   HABLAR
========================================================= */

.talk-section {

  padding:
    120px 22px 140px;

  background:

    linear-gradient(
      #f9e8ee,
      #fff9f7,
      #f9e7ee
    );

}


.talk-heading {

  max-width: 620px;

  margin:
    0 auto 90px;

  text-align: center;

}


.talk-heading h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      12vw,
      5.5rem
    );

}


.talk-heading p {

  margin-top: 30px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.5rem;

}


.chat-zone {

  width:
    min(
      100%,
      500px
    );

  margin: auto;

  display: flex;

  flex-direction: column;

  gap: 18px;

}


.chat-bubble {

  max-width: 72%;

  padding:
    15px 20px;

  border-radius: 24px;

  font-size: .9rem;

  box-shadow:

    0 12px 30px
    rgba(90,55,68,.08);

}


.chat-left {

  align-self: flex-start;

  background: white;

}


.chat-right {

  align-self: flex-end;

  background:
    #f2c7d5;

}


.good-morning {

  max-width: 480px;

  margin:
    110px auto 0;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2rem,
      8vw,
      3rem
    );

}


.good-morning strong {

  display: block;

  margin:
    12px 0;

  color:
    var(--pink-dark);

}



/* =========================================================
   DÍA
========================================================= */

.daily-section {

  min-height: 120svh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    100px 25px;

  text-align: center;

  background:

    linear-gradient(
      #f9e7ee,
      #fffaf7
    );

}


.daily-content {

  max-width: 600px;

}


.daily-main {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.5rem,
      10vw,
      4.5rem
    );

}


.daily-small {

  margin-top: 55px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.8rem;

}



/* =========================================================
   IMPORTANCIA
========================================================= */

.importance-section {

  position: relative;

  min-height: 150svh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

  background:

    linear-gradient(
      #fffaf7,
      #fae4ec,
      #fff8f6
    );

}


.soft-flower {

  position: absolute;

  color:
    rgba(199,105,138,.14);

  font-size: 8rem;

}


.flower-decoration-left {

  left: -40px;

}


.flower-decoration-right {

  right: -40px;

  bottom: 13%;

}


.importance-content {

  max-width: 600px;

}


.importance-line {

  margin: 45px 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2rem;

}


.importance-main {

  margin-top: 100px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.6rem,
      10vw,
      4.5rem
    );

}


.importance-final {

  margin-top: 50px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3.2rem,
      13vw,
      6rem
    );

}



/* =========================================================
   LIKES
========================================================= */

.likes-section {

  position: relative;

  padding:
    120px 20px 150px;

  overflow: hidden;

  background:

    linear-gradient(
      #fff8f6,
      #f8e3ea,
      #fff9f7
    );

}


.likes-floral-corner {

  position: absolute;

  color:
    rgba(202,111,143,.14);

  font-size: 10rem;

}


.corner-top {

  right: -45px;

}


.corner-bottom {

  bottom: 2%;

  left: -50px;

}


.likes-heading {

  max-width: 600px;

  margin:
    0 auto 70px;

  text-align: center;

}


.likes-heading h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.9rem,
      11vw,
      5rem
    );

}


.likes-heading p {

  margin-top: 25px;

  font-size: .78rem;

  opacity: .55;

}


.likes-grid {

  width:
    min(
      100%,
      600px
    );

  margin: auto;

  display: flex;

  flex-direction: column;

  gap: 16px;

}


.like-card {

  width: 100%;

  border: 0;

  border-radius: 24px;

  padding: 24px;

  text-align: left;

  color:
    var(--text);

  background:
    rgba(255,255,255,.72);

  box-shadow:

    0 12px 35px
    rgba(87,51,66,.08);

}


.like-symbol {

  display: block;

  color:
    var(--pink-dark);

}


.like-title {

  display: block;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2rem;

}


.like-detail {

  display: block;

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.3rem;

  transition: .5s ease;

}


.like-card.open
.like-detail {

  max-height: 200px;

  margin-top: 18px;

  opacity: 1;

}


.like-card-special {

  background:
    #f8dce6;

}



/* =========================================================
   FEEL
========================================================= */

.feel-section {

  position: relative;

  min-height: 145svh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background:

    linear-gradient(
      #fff9f7,
      #fae5ed,
      #fff8f6
    );

}


.feel-content {

  max-width: 620px;

}


.feel-small {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.5rem;

}


.feel-content h2 {

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      12vw,
      5.4rem
    );

}


.feel-lines {

  margin-top: 80px;

}


.feel-lines p {

  margin:
    35px 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2rem;

}


.feel-closing {

  margin-top: 100px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.6rem;

}


.feel-flower {

  position: absolute;

  color:
    rgba(195,100,134,.13);

  font-size: 9rem;

}


.feel-flower-one {

  left: -45px;

}


.feel-flower-two {

  right: -40px;

  bottom: 8%;

}


.feel-flower-three {

  right: 5%;

  top: 40%;

  font-size: 4rem;

}



/* =========================================================
   MÚSICA
========================================================= */

.music-section {

  position: relative;

  min-height: 110svh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background:

    linear-gradient(
      #fff8f6,
      #f7dfe8,
      #fff8f6
    );

}


.music-content {

  max-width: 560px;

}


.music-note {

  color:
    var(--pink-dark);

  font-size: 3rem;

}


.music-content h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      12vw,
      5.3rem
    );

}


.music-content > p {

  margin: 30px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.45rem;

}


.music-start-button {

  width: 92px;

  height: 92px;

  border: 0;

  border-radius: 50%;

  background:
    var(--pink-dark);

  color: white;

}


.music-play-icon {

  display: block;

  font-size: 1.6rem;

}


.song-info {

  margin-top: 28px;

  display: flex;

  flex-direction: column;

}


.song-info strong {

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.5rem;

}


.song-info span {

  font-size: .72rem;

  opacity: .45;

}



/* =========================================================
   MUSIC DOCK
========================================================= */

.music-dock {

  position: fixed;

  right: 14px;

  bottom: 18px;

  z-index: 8000;

  display: flex;

  gap: 11px;

  align-items: center;

  padding:
    10px 15px;

  border: 0;

  border-radius: 30px;

  background:
    rgba(56,44,49,.9);

  color: white;

  opacity: 0;

  visibility: hidden;

}


.music-dock.visible {

  opacity: 1;

  visibility: visible;

}


.music-dock-info {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}



/* =========================================================
   TIEMPOS / INTENSIDAD / CONOCER
========================================================= */

.times-section,
.intensity-section,
.knowing-section,
.unknown-section,
.today-section {

  min-height: 150svh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    130px 25px;

  text-align: center;

  background:

    linear-gradient(
      #fff8f6,
      #f9e7ed,
      #fffaf7
    );

}


.times-content,
.intensity-content,
.knowing-content,
.unknown-content,
.today-content {

  max-width: 620px;

}


.times-content h2,
.intensity-content h2,
.knowing-content h2,
.unknown-content h2 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      12vw,
      5rem
    );

}


.times-text,
.intensity-intro,
.knowing-text,
.unknown-text {

  margin-top: 65px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.7rem;

  line-height: 1.4;

}


.times-highlight,
.intensity-highlight,
.unknown-highlight,
.today-special {

  margin-top: 75px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.3rem,
      9vw,
      4rem
    );

}


.times-divider,
.unknown-divider {

  width: 1px;

  height: 100px;

  margin:
    90px auto;

  background:
    var(--pink-dark);

}


.times-important {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 3rem;

}


.intensity-list {

  margin:
    100px 0;

}


.intensity-item {

  margin-top: 18px;

  padding: 25px;

  border-radius: 25px;

  background:
    white;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.45rem;

}


.intensity-final {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2.5rem;

}


.knowing-words {

  margin-top: 100px;

  display: flex;

  flex-direction: column;

  gap: 45px;

}


.knowing-words span {

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2.5rem;

}


.knowing-final {

  margin-top: 100px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2.8rem;

}


.unknown-small {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.7rem;

}


.today-line {

  margin:
    60px 0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2.5rem;

}



/* =========================================================
   CARTA FINAL INTERACTIVA
========================================================= */

.illustrated-section {

  position: relative;

  min-height: 100svh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    110px 22px;

  overflow: hidden;

  text-align: center;

  background:

    linear-gradient(
      #fff9f6,
      #f8e2ea,
      #fff8f6
    );

}


.illustrated-content {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 600px;

}


.illustrated-intro {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.6rem,
      10vw,
      4.4rem
    );

}


.illustrated-image-button {

  position: relative;

  display: block;

  width:
    min(
      88vw,
      450px
    );

  margin:
    70px auto 0;

  padding: 0;

  border: 0;

  border-radius: 30px;

  background: transparent;

  cursor: pointer;

  transition:

    transform .65s
    cubic-bezier(.2,.8,.2,1),

    filter .65s ease;

}


.illustrated-image-button:active {

  transform:
    scale(.97);

}


.illustrated-image-button.opened {

  transform:
    scale(1.035)
    rotate(-1deg);

}


.illustrated-halo {

  position: absolute;

  inset: 10%;

  border-radius: 40%;

  background:
    rgba(223,142,170,.28);

  filter:
    blur(55px);

}


.illustrated-image {

  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  border-radius: 30px;

  box-shadow:

    0 30px 80px
    rgba(75,43,55,.15);

}


.illustrated-tap-hint {

  position: absolute;

  z-index: 5;

  left: 50%;

  bottom: 18px;

  transform:
    translateX(-50%);

  width:
    calc(100% - 36px);

  padding:
    12px 16px;

  border-radius: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  background:
    rgba(54,37,44,.76);

  color: white;

  backdrop-filter:
    blur(10px);

  font-size: .65rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  transition:
    opacity .4s ease,
    transform .4s ease;

}


.illustrated-heart {

  font-size: 1.2rem;

}


.illustrated-image-button.opened
.illustrated-tap-hint {

  opacity: 0;

  transform:
    translateX(-50%)
    translateY(10px);

}


.illustrated-opened-message {

  margin-top: 50px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2rem;

  opacity: 0;

  transform:
    translateY(15px);

  transition:
    opacity .6s ease,
    transform .6s ease;

}


.illustrated-opened-message.visible {

  opacity: 1;

  transform:
    translateY(0);

}


.illustrated-flower {

  position: absolute;

  color:
    rgba(195,100,134,.12);

  font-size: 10rem;

}


.illustrated-flower-one {

  left: -50px;

  top: 8%;

}


.illustrated-flower-two {

  right: -50px;

  bottom: 5%;

}



/* =========================================================
   CONTENIDO BLOQUEADO
========================================================= */

.locked-ending {

  display: none;

}


.locked-ending.open {

  display: block;

}



/* =========================================================
   CIERRE
========================================================= */

.ending-section {

  position: relative;

  min-height: 230svh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    150px 25px;

  overflow: hidden;

  text-align: center;

  background:

    linear-gradient(
      #fff8f6,
      #f7e0e9,
      #fff9f6
    );

}


.ending-glow {

  position: absolute;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  background:
    rgba(235,155,182,.15);

  filter:
    blur(85px);

}


.ending-content {

  position: relative;

  z-index: 2;

  max-width: 620px;

}


.ending-small {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.7rem;

}


.ending-text {

  margin-top: 80px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2rem,
      8vw,
      3.2rem
    );

  line-height: 1.16;

}


.ending-line {

  width: 1px;

  height: 110px;

  margin:
    100px auto;

  background:
    var(--pink-dark);

}


.ending-calm {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2.7rem;

}


.ending-main {

  margin-top: 70px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      12vw,
      5.2rem
    );

}


.ending-extra {

  margin-top: 100px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.7rem;

  line-height: 1.65;

}


.ending-happy {

  margin-top: 110px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 3rem;

}


.ending-happy strong {

  display: block;

  color:
    var(--pink-dark);

}


.signature {

  margin-top: 120px;

  display: flex;

  flex-direction: column;

}


.signature span {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 3.5rem;

  font-style: italic;

}


.signature small {

  color:
    var(--pink-medium);

  font-size: 1.7rem;

}



/* =========================================================
   P.D.
========================================================= */

.postscript-button {

  margin-top: 120px;

  border: 0;

  background: transparent;

  color:
    var(--pink-dark);

}


.postscript-flower {

  display: block;

  font-size: 2.6rem;

}


.postscript-label {

  display: block;

  margin-top: 10px;

  font-size: .65rem;

  letter-spacing: .13em;

  text-transform: uppercase;

}


.postscript {

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    .8s ease;

}


.postscript.open {

  max-height: 300px;

  margin-top: 55px;

  opacity: 1;

}


.postscript p {

  margin-top: 20px;

  color:
    var(--pink-dark);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.3rem,
      9vw,
      3.8rem
    );

}



/* =========================================================
   PANTALLA FINAL
========================================================= */

.last-screen {

  min-height: 90svh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background:

    radial-gradient(
      circle,
      #fffdfb,
      #f8e3ea
    );

}


.last-flower {

  color:
    var(--pink-dark);

  font-size: 3rem;

}


.last-screen p {

  margin-top: 30px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 3rem;

}


.last-screen span {

  margin-top: 15px;

  font-size: .65rem;

  letter-spacing: .18em;

  opacity: .4;

}



/* =========================================================
   MODAL
========================================================= */

.photo-modal {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(35,24,28,.9);

  opacity: 0;

  visibility: hidden;

}


.photo-modal.open {

  opacity: 1;

  visibility: visible;

}


.photo-modal img {

  max-width: 95vw;

  max-height: 82vh;

}


.photo-modal-close {

  position: absolute;

  top: 18px;

  right: 18px;

  width: 46px;

  height: 46px;

  border: 0;

  border-radius: 50%;

  color: white;

  background:
    rgba(255,255,255,.12);

  font-size: 2rem;

}



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

@media
(max-width: 430px) {

  .envelope {

    width: 290px;

    height: 188px;

  }


  .seal {

    width: 60px;

    height: 60px;

  }


  .letter {

    height: 160px;

  }


  .letter-content h2 {

    font-size: 1.65rem;

  }


  .envelope.open .letter {

    transform:

      translateX(-50%)

      translateY(-128px);

  }


  .time-section {

    height: 420vh;

  }


  .time-visual {

    height: 100vh;

  }

}