@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {

  color-scheme: dark;

  --wine: #160b12;

  --gold: #dec397;

  --blush: #edb9c7;

  --paper: #fffaf5;

  --paperText: #573d47;

  --serif: 'Cormorant Garamond', Georgia, serif;

  --sans: 'DM Sans', system-ui, Arial, sans-serif;

}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

  margin: 0;

  overflow-x: hidden;

  background: var(--wine);

  color: var(--paper);

  font-family: var(--sans);

  -webkit-font-smoothing: antialiased;

}

button, input { font: inherit; }

button, a, input { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }

button:disabled { cursor: wait; }

a { color: inherit; }

img { max-width: 100%; }

button:focus-visible,

a:focus-visible,

input:focus-visible {

  outline: 3px solid var(--gold);

  outline-offset: 5px;

}

[hidden] { display: none !important; }

::selection {

  background: #e9b6c6;

  color: #321522;

}

main { position: relative; z-index: 2; }

h1, h2, h3, p { overflow-wrap: break-word; }

.film-grain {

  position: fixed;

  inset: 0;

  z-index: 9;

  pointer-events: none;

  opacity: .035;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

.gold-specks {

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .2;

  background-image:

    radial-gradient(circle at 13% 28%, #f4dcb5 0 1px, transparent 2px),

    radial-gradient(circle at 85% 58%, #f4dcb5 0 1px, transparent 2px);

  background-size: 290px 360px;

}

.petal-stage {

  position: fixed;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 6;

}

.petal {

  position: absolute;

  top: -12vh;

  left: var(--x);

  width: var(--size);

  height: calc(var(--size) * 1.4);

  border-radius: 65% 35% 65% 35%;

  background: linear-gradient(135deg, #f6bfce, #ac4667 70%, #712a45);

  box-shadow: inset 1px 1px 3px #ffffff35;

  opacity: 0;

}

.is-blooming .petal {

  animation: petalfall var(--dur) linear var(--delay) infinite;

}

@keyframes petalfall {

  0% {

    opacity: 0;

    transform: translate3d(0, 0, 0) rotate(0);

  }

  15% { opacity: .48; }

  80% { opacity: .35; }

  100% {

    opacity: 0;

    transform: translate3d(var(--drift), 125vh, 0) rotate(290deg);

  }

}

/* PORTADA */

.intro {

  position: relative;

  display: grid;

  grid-template-columns: 1.05fr 1fr;

  min-height: 100svh;

  overflow: hidden;

  isolation: isolate;

  background: #190d15;

}

.opening-art {

  position: relative;

  min-height: 800px;

  overflow: hidden;

  background: #1c0d15;

}

.bloom-scene {

  position: absolute;

  inset: 0;

  overflow: hidden;

}

.rose-photo {

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 50% 44%;

  filter: saturate(.86) brightness(.82);

  clip-path: circle(34% at 50% 46%);

  transform: scale(1.02);

  transition:

    clip-path 2s ease,

    transform 2.4s ease,

    filter 2s ease;

}

.is-blooming .rose-photo {

  clip-path: circle(90% at 50% 50%);

  transform: scale(1.1);

  filter: saturate(1.05) brightness(1);

}

.bloom-veil {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg,

    #190d1520 40%,

    #190d15c9 100%

  );

}

.rose-halo {

  position: absolute;

  inset: 15% 9%;

  border: 1px solid #dec39745;

  border-radius: 50% 50% 46% 46%;

  transform: rotate(-12deg);

  box-shadow: 0 0 80px #d589a00b;

  transition: transform 2s ease, opacity 2s ease;

}

.rose-halo::after {

  content: "";

  position: absolute;

  inset: 16px;

  border: 1px solid #dec39720;

  border-radius: inherit;

}

.is-blooming .rose-halo {

  transform: rotate(0) scale(1.18);

  opacity: 0;

}

.art-label {

  position: absolute;

  bottom: 42px;

  width: 100%;

  text-align: center;

  font-size: 10px;

  letter-spacing: .36em;

  color: #e9cfb0;

}

.opening-text {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-width: 0;

  padding: 56px 38px;

  text-align: center;

  border-left: 1px solid #dec39718;

  background:

    radial-gradient(ellipse at 60% 15%, #73334d38, transparent 60%),

    linear-gradient(160deg, #26121e, #160c13);

}

.eyebrow {

  margin: 0 0 20px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .3em;

  line-height: 1.8;

  color: var(--gold);

}

.fine-line {

  display: inline-block;

  width: 19px;

  height: 1px;

  margin: 0 7px;

  background: #dec39780;

  vertical-align: middle;

}

.year-stamp {

  margin-bottom: 22px;

  padding: 8px 15px;

  border: 1px solid #dec39730;

  border-radius: 30px;

  background: #ffffff04;

  font-size: 9px;

  letter-spacing: .24em;

  color: #e7ceab;

}

.intro-caption {

  margin: 0;

  font: italic 24px var(--serif);

  color: #dcb8c3;

}

h1 {

  margin: 14px 0 22px;

  font-family: var(--serif);

  font-size: clamp(60px, 6.7vw, 108px);

  font-weight: 400;

  line-height: .95;

  letter-spacing: -.045em;

}

h1 em {

  color: var(--blush);

  font-weight: 400;

}

.intro-description {

  margin: 0 0 22px;

  font: 24px/1.45 var(--serif);

  color: #d7b9c5;

}

.ring-container { margin: 3px 0 14px; }

.ring {

  display: block;

  width: 78px;

  height: 78px;

  margin: auto;

  object-fit: cover;

  border: 1px solid #dec39790;

  border-radius: 50%;

  box-shadow: 0 0 0 6px #dec39708, 0 12px 30px #00000025;

}

/* SOBRE ANIMADO */

.envelope-scene {

  display: grid;

  place-items: center;

  width: 270px;

  height: 175px;

  margin: 10px auto 4px;

  perspective: 900px;

}

.envelope {

  position: relative;

  width: 225px;

  height: 140px;

  transform-style: preserve-3d;

  filter: drop-shadow(0 20px 25px #00000035);

}

.envelope-back,

.envelope-front,

.envelope-flap,

.envelope-sheet {

  position: absolute;

  inset: 0;

  border-radius: 5px;

}

.envelope-back { background: #e1bfc4; }

.envelope-sheet {

  z-index: 1;

  inset: 7px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: linear-gradient(#fffaf3, #f0dfdb);

  color: #986679;

  font-size: 9px;

  letter-spacing: .26em;

  transition: transform .9s ease .25s;

}

.mini-heart {

  margin-top: 5px;

  font-size: 26px;

  color: #b96381;

}

.envelope-front {

  z-index: 2;

  background: linear-gradient(135deg, #ebcbd0, #c88d9f);

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

}

.envelope-flap {

  z-index: 3;

  background: linear-gradient(180deg, #f6e3df, #d8a8b4);

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

  transform-origin: top;

  transition: transform .9s ease;

}

.envelope-seal {

  position: absolute;

  z-index: 4;

  top: 64px;

  left: 50%;

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border: 1px solid #f5deb3;

  border-radius: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, #f0d7a5, #b78548);

  color: #654628;

  font: 600 20px var(--serif);

  box-shadow: 0 4px 12px #00000025;

  transition: opacity .3s ease;

}

.opened .envelope-flap { transform: rotateX(180deg); }

.opened .envelope-sheet { transform: translateY(-65px); }

.opened .envelope-seal { opacity: 0; }

/* BOTONES */

.primary-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  min-height: 56px;

  min-width: 245px;

  padding: 15px 27px;

  border: 1px solid #f7dfbd;

  border-radius: 100px;

  background: linear-gradient(115deg, #f5e4c9, #dfbd8c);

  color: #38202b;

  font-size: 13px;

  font-weight: 700;

  box-shadow: 0 12px 38px #00000028;

  transition: transform .25s ease, box-shadow .25s ease;

}

.primary-btn span { font-size: 21px; }

.primary-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 16px 40px #d6a17320;

}

.quiet-btn {

  margin-top: 15px;

  padding: 8px;

  border: 0;

  background: transparent;

  color: #e4c6d1;

  font-size: 12px;

  text-decoration: underline;

  text-underline-offset: 5px;

}

.privacy-notice {

  max-width: 370px;

  margin: 12px auto 0;

  color: #d9bbc6;

  font-size: 11px;

  line-height: 1.7;

}

.small-note {

  margin: 18px 0 0;

  color: #c7a6b6;

  font-size: 10px;

  line-height: 1.6;

  letter-spacing: .08em;

}

/* EXPERIENCIA */

.experience {

  min-height: 100svh;

  padding: 85px 28px 50px;

  background:

    radial-gradient(ellipse at 5% 10%, #72304b32, transparent 45%),

    radial-gradient(ellipse at 95% 65%, #67324a30, transparent 45%),

    #180d15;

  animation: reveal .8s ease both;

}

@keyframes reveal {

  from { opacity: 0; transform: translateY(16px); }

  to { opacity: 1; transform: translateY(0); }

}

.experience-header {

  max-width: 800px;

  margin: 0 auto 58px;

  text-align: center;

}

.experience-header h2 {

  margin: 0 0 24px;

  font: 400 clamp(70px, 9vw, 112px)/.95 var(--serif);

  letter-spacing: -.04em;

}

.experience-header h2 em {

  font-weight: 400;

  color: var(--blush);

}

.experience-header p:last-child {

  margin: 18px 0 0;

  font: italic 25px var(--serif);

  color: #d9b8c7;

}

.hairline {

  width: 160px;

  height: 1px;

  margin: auto;

  background: linear-gradient(90deg, transparent, #dec397, transparent);

}

.experience-grid {

  display: grid;

  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);

  align-items: start;

  gap: 36px;

  max-width: 1160px;

  margin: auto;

}

.section-index {

  margin-bottom: 22px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .24em;

  color: #dec397;

}

/* MÚSICA */

.music-panel {

  position: sticky;

  top: 28px;

  min-width: 0;

  padding: 27px;

  border: 1px solid #e7c4d026;

  border-radius: 28px;

  background: linear-gradient(145deg, #ffffff09, #ffffff02);

  box-shadow: 0 25px 70px #00000020;

}

.photo-record {

  position: relative;

  height: 330px;

  overflow: hidden;

  border: 1px solid #ffffff0d;

  border-radius: 18px;

  background: #23101a;

}

.photo-record img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 50% 42%;

  transition: transform 1.2s ease;

}

.photo-record:hover img { transform: scale(1.04); }

.photo-record::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, #180d1580, transparent 65%);

}

.vinyl {

  position: absolute;

  z-index: 2;

  bottom: 18px;

  left: 18px;

  display: grid;

  place-items: center;

  width: 66px;

  height: 66px;

  border: 7px double #efd5c275;

  border-radius: 50%;

  background: #291523;

  color: #f0d7b4;

  font: 24px var(--serif);

  animation: spin 14s linear infinite;

  animation-play-state: paused;

}

.music-playing .vinyl { animation-play-state: running; }

@keyframes spin { to { transform: rotate(360deg); } }

.music-panel h3 {

  margin: 25px 0 6px;

  font: 400 47px/1.05 var(--serif);

  letter-spacing: -.02em;

}

.music-subtitle {

  margin: 0 0 25px;

  color: #c8a8b7;

  font-size: 12px;

  line-height: 1.6;

}

.audio-controls {

  display: flex;

  align-items: center;

  gap: 13px;

  padding-top: 23px;

  border-top: 1px solid #ffffff14;

}

.play-btn, .sound-btn {

  display: grid;

  place-items: center;

  flex: none;

  width: 49px;

  height: 49px;

  padding: 0;

  border: 1px solid #e7c4d044;

  border-radius: 50%;

  background: #efd7b5;

  color: #341e2a;

  transition: transform .2s ease;

}

.play-btn:hover, .sound-btn:hover { transform: scale(1.06); }

.sound-btn {

  width: 40px;

  height: 40px;

  background: transparent;

  color: #efd7b5;

}

.timeline { flex: 1; min-width: 0; }

#seek {

  appearance: none;

  -webkit-appearance: none;

  display: block;

  width: 100%;

  height: 5px;

  margin: 0;

  border-radius: 5px;

  background: linear-gradient(

    90deg,

    #e4b4c6 var(--pct, 0%),

    #ffffff20 var(--pct, 0%)

  );

  cursor: pointer;

}

#seek::-webkit-slider-thumb {

  appearance: none;

  width: 13px;

  height: 13px;

  border: 2px solid #f5dce5;

  border-radius: 50%;

  background: #d9a0b4;

}

#seek::-moz-range-thumb {

  width: 11px;

  height: 11px;

  border: 2px solid #f5dce5;

  border-radius: 50%;

  background: #d9a0b4;

}

.times {

  display: flex;

  justify-content: space-between;

  margin-top: 9px;

  font-size: 10px;

  font-variant-numeric: tabular-nums;

  color: #c5aab7;

}

.audio-hint {

  min-height: 34px;

  margin: 19px 0;

  color: #c5aab7;

  font-size: 11px;

  line-height: 1.7;

}

.download-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  min-height: 44px;

  padding: 12px 19px;

  border: 1px solid #dec39745;

  border-radius: 100px;

  color: #eed8b7;

  font-size: 11px;

  text-decoration: none;

  transition: background .2s ease, border-color .2s ease;

}

.download-link:hover {

  border-color: #dec39795;

  background: #dec3970d;

}

.download-link span { font-size: 18px; }

/* CARTA */

.letter-panel { min-width: 0; }

.letter-panel .section-index { padding-left: 8px; }

.letter-paper {

  position: relative;

  overflow: hidden;

  padding: 48px 48px 42px;

  border: 1px solid #f4dfcf;

  border-radius: 20px;

  background: linear-gradient(145deg, #fffcf7, #f5e8e6);

  color: var(--paperText);

  box-shadow: 0 30px 80px #00000028;

}

.letter-paper::before {

  content: "";

  position: absolute;

  inset: 13px;

  border: 1px solid #c8a98775;

  border-radius: 11px;

  pointer-events: none;

}

.letter-rose {

  position: absolute;

  top: -48px;

  right: -50px;

  width: 210px;

  height: 210px;

  overflow: hidden;

  border-radius: 50%;

  opacity: .75;

}

.letter-rose img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.letter-ring {

  position: relative;

  z-index: 1;

  width: 76px;

  height: 76px;

  margin: 0 0 30px;

}

.salutation {

  position: relative;

  z-index: 1;

  margin: 0 0 25px;

  color: #944b66;

  font: italic 35px/1.1 var(--serif);

}

.letter-paper p:not(.salutation) {

  position: relative;

  z-index: 1;

  margin: 0 0 21px;

  font: 24px/1.5 var(--serif);

}

.letter-paper strong {

  color: #903c5c;

  font-weight: 600;

}

.letter-signature {

  position: relative;

  margin-top: 30px;

  color: #805266;

  text-align: right;

  font: 24px/1.4 var(--serif);

}

.letter-signature strong {

  display: block;

  font-weight: 500;

  font-style: italic;

}

.pdf-link { margin: 18px 0 0 7px; }

/* CIERRE Y RESPUESTA */

.end-footer {

  max-width: 700px;

  margin: 65px auto 0;

  padding-top: 30px;

  border-top: 1px solid #dec3971a;

  text-align: center;

}

.end-footer p {

  margin: 0 auto 26px;

  color: #e0bfcc;

  font: italic 28px/1.35 var(--serif);

}

/* RESPONDER POR WHATSAPP */
.restart-btn,
.whatsapp-link,
.email-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin: 7px;
  padding: 13px 24px;
  border: 1px solid #dec39745;
  border-radius: 100px;
  background: transparent;
  color: #eed8bd;
  font-size: 12px;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

/* .email-link se mantiene solo como compatibilidad visual con HTML previo. */
.whatsapp-link,
.email-link {
  min-width: 176px;
  border-color: #b3e6c8;
  background: linear-gradient(115deg, #dbf8e9, #a8e5c0);
  color: #174d36;
  font-weight: 700;
  box-shadow: 0 9px 26px #36c17820;
}

.whatsapp-link svg,
.email-link svg {
  flex: none;
  width: 19px;
  height: 19px;
  transition: transform .25s ease;
}

.whatsapp-link:hover,
.email-link:hover {
  transform: translateY(-3px);
  background: linear-gradient(115deg, #e6fff0, #baf0ce);
  box-shadow: 0 14px 34px #36c17836;
}

.whatsapp-link:hover svg,
.email-link:hover svg { transform: rotate(-8deg) scale(1.06); }

.restart-btn:hover { background: #ffffff07; }

/* CAJA DE COMENTARIOS (solo presentación; almacenamiento requiere lógica propia) */
.comments-panel,
.comment-panel {
  width: 100%;
  max-width: 620px;
  margin: 30px auto 0;
  padding: 27px;
  border: 1px solid #dec3973d;
  border-radius: 23px;
  background: linear-gradient(150deg, #ffffff0b, #ffffff04);
  box-shadow: 0 18px 50px #00000019;
  text-align: left;
}

.comments-panel h3,
.comment-panel h3 {
  margin: 0 0 7px;
  color: #f5decb;
  font: 400 35px/1.1 var(--serif);
}

.comments-panel > p,
.comment-panel > p {
  margin: 0 0 17px;
  color: #d5b7c4;
  font-size: 12px;
  line-height: 1.7;
}

.comment-form {
  display: grid;
  gap: 12px;
}

.comment-form label {
  display: block;
  color: #e4c9d3;
  font-size: 12px;
  font-weight: 600;
}

.comment-form input,
.comment-form textarea,
.comment-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #dec39751;
  border-radius: 13px;
  background: #160b12cc;
  color: var(--paper);
  font: 13px/1.6 var(--sans);
  outline: none;
  resize: vertical;
}

.comment-form textarea,
.comment-textarea { min-height: 116px; }

.comment-form input:focus,
.comment-form textarea:focus,
.comment-textarea:focus {
  border-color: #e4cda8;
  box-shadow: 0 0 0 3px #dec3971b;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder,
.comment-textarea::placeholder { color: #b996a8; }

.comment-submit {
  justify-self: start;
  min-height: 44px;
  padding: 11px 23px;
  border: 1px solid #f5dfbd;
  border-radius: 100px;
  background: linear-gradient(115deg, #f5e4c9, #dfbd8c);
  color: #38202b;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 9px 26px #0000001f;
  transition: transform .2s ease;
}

.comment-submit:hover { transform: translateY(-2px); }
.comment-submit:disabled { opacity: .65; cursor: wait; }

.comment-status { min-height: 17px; color: #e6ceb8; font-size: 11px; line-height: 1.6; }

.end-footer small {

  display: block;

  margin-top: 30px;

  color: #bda0af;

  font-size: 9px;

  line-height: 1.8;

  letter-spacing: .22em;

}

/* TABLET Y TELÉFONO */

@media (max-width: 1050px) {

  .opening-text { padding: 48px 24px; }

  .opening-art { min-height: 770px; }

  .experience-grid {

    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

    gap: 23px;

  }

  .music-panel { padding: 20px; }

  .letter-paper { padding: 42px 30px 35px; }

  .letter-paper p:not(.salutation) { font-size: 22px; }

  .photo-record { height: 280px; }

}

@media (max-width: 800px) {

  .intro { grid-template-columns: 1fr; }

  .opening-art {

    min-height: 0;

    height: 44svh;

    max-height: 450px;

  }

  .rose-photo { clip-path: circle(30% at 50% 46%); }

  .rose-halo {

    inset: 8% 25%;

    border-radius: 50%;

  }

  .art-label { bottom: 22px; font-size: 8px; }

  .opening-text {

    padding: 34px 20px 43px;

    border-left: 0;

    border-top: 1px solid #dec39718;

  }

  h1 { font-size: clamp(65px, 12vw, 92px); }

  .intro-caption { font-size: 22px; }

  .intro-description { font-size: 23px; }

  .experience { padding: 55px 18px 40px; }

  .experience-grid {

    grid-template-columns: minmax(0, 1fr);

    max-width: 620px;

    gap: 34px;

  }

  .music-panel { position: static; padding: 25px; }

  .photo-record { height: 330px; }

  .letter-paper { padding: 45px 38px 38px; }

  .letter-paper p:not(.salutation) { font-size: 24px; }

  .experience-header { margin-bottom: 40px; }

  .end-footer { margin-top: 45px; }

}

@media (max-width: 440px) {
  .comments-panel, .comment-panel { padding: 20px 17px; border-radius: 18px; }
  .comments-panel h3, .comment-panel h3 { font-size: 30px; }
  .restart-btn, .whatsapp-link, .email-link { width: min(100%, 290px); margin: 7px auto; }

  .opening-art { height: 34svh; min-height: 235px; }

  .eyebrow { font-size: 8px; letter-spacing: .22em; }

  .fine-line { width: 12px; margin: 0 5px; }

  .intro-caption { font-size: 20px; }

  h1 { font-size: clamp(57px, 15vw, 69px); }

  .envelope-scene {

    height: 150px;

    width: 250px;

  }

  .envelope { transform: scale(.9); }

  .experience { padding-inline: 13px; }

  .experience-header h2 { font-size: 65px; }

  .experience-header p:last-child { font-size: 22px; }

  .music-panel { padding: 19px; border-radius: 23px; }

  .photo-record { height: 260px; }

  .music-panel h3 { font-size: 43px; }

  .letter-paper { padding: 39px 26px 32px; }

  .letter-paper p:not(.salutation) { font-size: 22px; }

  .salutation { font-size: 31px; }

  .letter-signature { font-size: 22px; }

  .letter-rose { width: 165px; height: 165px; }

  .end-footer p { font-size: 25px; }

}

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

  *, *::before, *::after {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

  }

  .petal-stage { display: none; }

  .rose-photo { clip-path: none; }

}