:root{
  --bg0:#070711;
  --bg1:#13061b;
  --ink:#fff7fb;
  --muted:rgba(255, 247, 251, .78);
  --muted2:rgba(255, 247, 251, .62);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.14);
  --stroke2:rgba(255,255,255,.22);
  --accent:#ff4f87;
  --accent2:#ffcc70;
  --accent3:#7c5cff;
  --shadow: 0 30px 80px rgba(0,0,0,.5);
  --shadow2: 0 18px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --radius2: 28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,79,135,.26), transparent 60%),
    radial-gradient(1000px 700px at 85% 15%, rgba(124,92,255,.18), transparent 58%),
    radial-gradient(900px 650px at 60% 85%, rgba(255,204,112,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.aurora{
  position:absolute;
  width:70vmax;
  height:70vmax;
  filter: blur(40px);
  opacity:.75;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: drift 18s ease-in-out infinite;
}
.a1{
  left:-18vmax;
  top:-24vmax;
  background: radial-gradient(circle at 30% 30%, rgba(255,79,135,.9), transparent 60%),
              radial-gradient(circle at 70% 55%, rgba(255,204,112,.6), transparent 58%);
  animation-duration: 20s;
}
.a2{
  right:-22vmax;
  top:-16vmax;
  background: radial-gradient(circle at 35% 35%, rgba(124,92,255,.9), transparent 62%),
              radial-gradient(circle at 75% 55%, rgba(255,79,135,.55), transparent 60%);
  animation-duration: 24s;
  animation-direction: reverse;
}
.a3{
  left:10vmax;
  bottom:-30vmax;
  background: radial-gradient(circle at 45% 35%, rgba(255,204,112,.75), transparent 60%),
              radial-gradient(circle at 65% 55%, rgba(124,92,255,.5), transparent 62%);
  animation-duration: 28s;
}
@keyframes drift{
  0%{transform: translate(-2%, -1%) scale(1) rotate(0deg)}
  50%{transform: translate(3%, 2%) scale(1.06) rotate(16deg)}
  100%{transform: translate(-2%, -1%) scale(1) rotate(0deg)}
}

.grain{
  position:absolute;
  inset:-30%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.10;
  transform: rotate(3deg);
}
.fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.9;
}

.page{
  min-height:100%;
  padding: clamp(18px, 3.5vw, 42px);
  display:flex;
  flex-direction:column;
  gap: clamp(18px, 3vw, 34px);
}

.top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  padding-top: 10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.badge__dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle, var(--accent2), var(--accent));
  box-shadow: 0 0 0 5px rgba(255,79,135,.12), 0 0 30px rgba(255,79,135,.35);
}

.music{
  appearance:none;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,247,251,.88);
  padding: 8px 14px;
  font-size: 13px;
  cursor:pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.music:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.music.is-playing{
  background: linear-gradient(90deg, rgba(255,79,135,.70), rgba(255,204,112,.55));
  color: #13061b;
  border-color: rgba(255,255,255,.30);
}

.player{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(360px, calc(100vw - 32px));
  z-index: 50;
}
.player.is-hidden{
  display:none;
}
.player__glass{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(700px 360px at 20% 10%, rgba(255,79,135,.18), transparent 55%),
    radial-gradient(600px 340px at 80% 20%, rgba(124,92,255,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: 12px 12px 12px;
}
.player__top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}
.player__label{
  font-size: 11px;
  color: rgba(255,247,251,.62);
  letter-spacing:.22em;
  text-transform: uppercase;
}
.player__title{
  font-weight: 800;
  letter-spacing:.1px;
  color: rgba(255,247,251,.92);
  line-height: 1.2;
}
.player__artist{
  font-size: 12px;
  color: rgba(255,247,251,.72);
}
.player__x{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,247,251,.86);
  width: 36px;
  height: 36px;
  border-radius: 14px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.player__x:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}
.player__controls{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
}
.pbtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,247,251,.92);
  width: 44px;
  height: 44px;
  border-radius: 16px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
}
.pbtn--play{
  width: 56px;
  height: 56px;
  border-radius: 20px;
  border-color: rgba(255,79,135,.42);
  background: linear-gradient(180deg, rgba(255,79,135,.22), rgba(255,79,135,.10));
}
.player__seek{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 46px 1fr 46px;
  gap: 8px;
  align-items:center;
}
.player__time{
  font-size: 12px;
  color: rgba(255,247,251,.72);
  font-variant-numeric: tabular-nums;
}
.player__range{
  width: 100%;
  accent-color: rgba(255,79,135,.90);
}
.player__vol{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items:center;
}
.player__volIcon{
  font-size: 14px;
  opacity:.85;
}

.track.is-playing{
  border-color: rgba(255,204,112,.45);
}
.track.is-playing .track__title::after{
  content:" • sonando";
  color: rgba(255,204,112,.92);
  font-weight: 800;
}

.hero{
  width:min(1120px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(16px, 2.5vw, 26px);
  align-items:stretch;
}

.hero__card{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: clamp(18px, 3.6vw, 36px);
  isolation:isolate;
}
.hero__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(800px 380px at 20% 15%, rgba(255,79,135,.25), transparent 60%),
              radial-gradient(700px 340px at 70% 35%, rgba(124,92,255,.20), transparent 62%),
              radial-gradient(700px 340px at 60% 85%, rgba(255,204,112,.15), transparent 58%);
  filter: blur(8px);
  z-index:-2;
}
.hero__card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-120%);
  animation: sheen 7.5s ease-in-out infinite;
  opacity:.35;
  z-index:-1;
}
@keyframes sheen{
  0%, 55%{transform: translateX(-120%)}
  75%{transform: translateX(120%)}
  100%{transform: translateX(120%)}
}

.kicker{
  margin:0 0 10px;
  color: var(--muted2);
  font-weight: 500;
  letter-spacing: .2px;
}
.kicker__shine{
  position:relative;
  color: rgba(255, 247, 251, .92);
}
.kicker__shine::after{
  content:"";
  position:absolute;
  left:-20%;
  top:55%;
  width:140%;
  height: 10px;
  background: radial-gradient(closest-side, rgba(255,79,135,.55), transparent);
  filter: blur(6px);
  transform: translateY(-50%);
  z-index:-1;
}

.title{
  margin:0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: -.6px;
  line-height: 1.05;
  font-size: clamp(34px, 4.3vw, 62px);
}
.title__accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 20px 60px rgba(255,79,135,.22);
}
.subtitle{
  margin: 14px 0 0;
  min-height: 2.8em;
  color: var(--muted);
  font-size: clamp(15px, 1.65vw, 18px);
  line-height: 1.55;
}

.question{
  margin: 10px 0 0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: -.25px;
  font-size: clamp(18px, 2.15vw, 26px);
  color: rgba(255, 247, 251, .90);
}
.question__accent{
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 18px 60px rgba(255,79,135,.18);
}

.actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}
.btn{
  position:relative;
  appearance:none;
  border:1px solid var(--stroke);
  color: rgba(255, 247, 251, .92);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  font-weight: 600;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  overflow:hidden;
  user-select:none;
}
.btn:focus-visible{
  outline: 3px solid rgba(255,79,135,.35);
  outline-offset: 2px;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: var(--stroke2);
  background: rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.btn:active{transform: translateY(0px) scale(.98)}
.btn--primary{
  border-color: rgba(255,79,135,.42);
  background: linear-gradient(180deg, rgba(255,79,135,.22), rgba(255,79,135,.12));
}
.btn--primary:hover{
  border-color: rgba(255,79,135,.62);
  box-shadow: 0 18px 55px rgba(255,79,135,.16);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
}
.btn--no{
  border-color: rgba(124,92,255,.38);
  background: linear-gradient(180deg, rgba(124,92,255,.20), rgba(124,92,255,.08));
  position:relative;
}
.btn__spark{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,204,112,.55), transparent 38%),
    radial-gradient(circle at 70% 55%, rgba(255,79,135,.65), transparent 42%),
    radial-gradient(circle at 52% 80%, rgba(124,92,255,.55), transparent 45%);
  filter: blur(14px);
  opacity: .0;
  transition: opacity .2s ease;
}
.btn--primary:hover .btn__spark{opacity:.8}

.meta{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.meta__pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: rgba(255, 247, 251, .86);
}
.meta__icon{
  width: 26px;
  height: 26px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.photo{
  display:flex;
  align-items:stretch;
}
.photo__frame{
  position:relative;
  width:100%;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.photo__glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,79,135,.35), transparent 55%),
    radial-gradient(circle at 65% 70%, rgba(255,204,112,.22), transparent 55%);
  filter: blur(22px);
  opacity:.9;
  animation: glow 7.2s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{transform: translate(-1%, -1%) scale(1)}
  50%{transform: translate(2%, 1%) scale(1.05)}
}
.photo__inner{
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--radius2) - 14px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.photo__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 8px;
  padding: 22px;
  text-align:center;
  color: rgba(255, 247, 251, .82);
  transition: opacity .25s ease;
}
.photo__placeholder.is-hidden{
  opacity: 0;
  pointer-events:none;
}
.photo__line{
  margin:0;
  font-weight: 700;
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  font-size: 22px;
}
.photo__hint{
  margin:0;
  font-size: 13px;
  color: rgba(255, 247, 251, .68);
}
.photo__hint code{
  padding:2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.photo__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  /* opacity: 0; */
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.02);
  transition: opacity .4s ease, transform 1.4s ease;
}
.photo__img.is-loaded{
  opacity: 1;
  transform: scale(1);
}
.photo__ribbon{
  position:absolute;
  top:18px;
  right:-38px;
  transform: rotate(12deg);
  padding: 10px 46px;
  background: linear-gradient(90deg, rgba(255,79,135,.75), rgba(255,204,112,.55));
  color: rgba(13, 8, 20, .92);
  font-weight: 800;
  letter-spacing:.9px;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 999px;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.timeline{
  width:min(1120px, 100%);
  margin: 0 auto;
}
.timeline__card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: clamp(18px, 3.2vw, 30px);
}
.h2{
  margin: 0 0 14px;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: clamp(22px, 2.7vw, 30px);
  letter-spacing: -.3px;
}
.reasons{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap: 12px;
}
.reason{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.reason:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
}
.reason__num{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: rgba(255,79,135,.12);
  border: 1px solid rgba(255,79,135,.28);
  color: rgba(255, 247, 251, .92);
  font-weight: 800;
}
.reason__text{
  color: rgba(255, 247, 251, .86);
  font-weight: 600;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.reason__sub{
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 247, 251, .70);
}
.reason--gold{
  border-color: rgba(255,204,112,.60);
  background:
    radial-gradient(600px 260px at 10% 0%, rgba(255,204,112,.20), transparent 60%),
    rgba(255,255,255,.05);
}

.divider{
  height: 1px;
  margin: 18px 0 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.small{
  margin:0;
  color: rgba(255, 247, 251, .64);
  font-size: 13px;
}
.small code{
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.gallery{
  width:min(1120px, 100%);
  margin: 0 auto;
}
.gallery__card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: clamp(18px, 3.2vw, 30px);
  overflow:hidden;
}
.gallery__sub{
  margin: -6px 0 16px;
  color: rgba(255, 247, 251, .64);
  font-size: 13px;
  line-height: 1.55;
}
.gallery__sub code{
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.shot{
  margin:0;
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  aspect-ratio: 1 / 1;
}
.shot:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.shot__img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s ease, filter .6s ease, opacity .25s ease;
  filter: saturate(1.06) contrast(1.02);
}
.shot:hover .shot__img{
  transform: scale(1.06);
  filter: saturate(1.10) contrast(1.05);
}
.shot__cap{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  color: rgba(255, 247, 251, .88);
  font-weight: 700;
  font-size: 12px;
  letter-spacing:.2px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  text-wrap: balance;
}
.shot:hover .shot__cap{
  transform: translateY(0);
  opacity: 1;
}
.shot.is-missing{
  background:
    radial-gradient(500px 260px at 30% 20%, rgba(255,79,135,.14), transparent 55%),
    radial-gradient(500px 260px at 70% 60%, rgba(124,92,255,.12), transparent 58%),
    rgba(255,255,255,.03);
}
.shot.is-missing .shot__img{
  opacity: 0;
}
.shot.is-missing::after{
  content:"Agrega la foto";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color: rgba(255,247,251,.72);
  font-weight: 800;
  letter-spacing:.2px;
  font-size: 12px;
}

.lightbox{
  width: min(980px, calc(100vw - 28px));
  border: 0;
  padding: 0;
  background: transparent;
}
.lightbox::backdrop{
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}
.lightbox__paper{
  position:relative;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,79,135,.18), transparent 55%),
    radial-gradient(800px 480px at 80% 20%, rgba(124,92,255,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 60px 140px rgba(0,0,0,.60);
  padding: 14px;
  overflow:hidden;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  animation: lightIn .22s ease forwards;
}
@keyframes lightIn{
  to{transform: translateY(0) scale(1); opacity: 1}
}
.lightbox__close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,247,251,.88);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  z-index: 2;
}
.lightbox__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}
.lightbox__figure{
  margin:0;
  display:grid;
  gap: 10px;
}
.lightbox__img{
  width: 100%;
  height: min(70vh, 620px);
  object-fit: contain;
  border-radius: 18px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.12);
}
.lightbox__cap{
  color: rgba(255,247,251,.86);
  font-weight: 800;
  letter-spacing:.2px;
  padding: 2px 6px 6px;
  text-align:center;
}

/* Modal nota música */
.tip-music{
  width: min(420px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 20px;
}
.tip-music::backdrop{
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}
.tip-music__paper{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  padding: 22px 20px 18px;
}
.tip-music__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,247,251,.9);
  cursor: pointer;
  font-size: 14px;
  transition: transform .15s ease, background .15s ease;
}
.tip-music__close:hover{
  background: rgba(255,255,255,.12);
  transform: scale(1.05);
}
.tip-music__title{
  margin: 0 0 12px;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,247,251,.95);
  letter-spacing: -.2px;
}
.tip-music__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,247,251,.85);
}
.tip-music__text strong{
  color: rgba(255,247,251,.98);
  font-weight: 600;
}

.playlist{
  width:min(1120px, 100%);
  margin: 0 auto;
}
.playlist__card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: clamp(18px, 3.2vw, 30px);
  overflow:hidden;
}
.playlist__sub{
  margin: -6px 0 16px;
  color: rgba(255, 247, 251, .64);
  font-size: 13px;
  line-height: 1.55;
}
.playlist__list{
  display:grid;
  gap: 10px;
}
.track{
  text-align:left;
  width:100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
  cursor:pointer;
  display:grid;
  gap: 6px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.track:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 46px rgba(0,0,0,.30);
}
.track.is-active{
  border-color: rgba(255,79,135,.60);
  background: linear-gradient(180deg, rgba(255,79,135,.18), rgba(124,92,255,.12));
}
.track__header{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}
.track__title{
  font-weight: 700;
  color: rgba(255, 247, 251, .92);
}
.track__artist{
  font-size: 12px;
  color: rgba(255, 247, 251, .74);
}
.track__desc{
  margin:0;
  font-size: 13px;
  color: rgba(255, 247, 251, .78);
}

.flowers{
  width:min(520px, 100%);
  margin: 0 auto;
}
.flowers__card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: clamp(26px, 3.6vw, 38px) clamp(22px, 3.2vw, 34px);
  overflow:hidden;
  text-align:center;
  min-height: 490px;
}
.flowers__sub{
  margin: -4px auto 22px;
  max-width: 50rem;
  color: rgba(255,247,251,.70);
  font-size: 13px;
  line-height: 1.6;
}
/* flores amarillas integradas */
.flowers-amarillas{
  position:relative;
  margin: 0 auto;
  width:min(210px, 100%);
  height:180px;
  transform: scale(.46) translateY(490px);
  filter: blur(.03vmin);
  overflow: visible;
}

.flowers-amarillas .flower{
  position:absolute;
  bottom:0;
  transform-origin: bottom center;
  z-index:10;
  --fl-speed:.8s;
}
/* flor izquierda extremo: pequeña, baja, inclinada */
.flowers-amarillas .flower--1{
  left:-2%;
  transform-origin: bottom center;
  transform: translateY(22px) scaleX(.65) scaleY(.70) rotate(-20deg);
  animation:moving-flower-1 4s linear infinite;
}
/* flor izquierda media: mediana, un poco baja */
.flowers-amarillas .flower--2{
  left:18%;
  transform-origin: bottom center;
  transform: translateY(8px) scaleX(.80) scaleY(.85) rotate(-8deg);
  animation:moving-flower-2 4s linear infinite;
}
/* flor central: la más alta y grande */
.flowers-amarillas .flower--3{
  left:42%;
  transform-origin: bottom center;
  zoom: 0.9;
  transform: translateY(-4px) scaleX(1) scaleY(1.05) rotate(0deg);
  animation:moving-flower-3 4s linear infinite;
}
/* flor derecha media: mediana, un poco baja */
.flowers-amarillas .flower--4{
  left:64%;
  transform-origin: bottom center;
  transform: translateY(8px) scaleX(.80) scaleY(.85) rotate(8deg);
  animation:moving-flower-2 4s linear infinite;
}
/* flor derecha extremo: mucho más pequeña (40%+ menos) */
.flowers-amarillas .flower--5{
  right:-4%;
  transform-origin: bottom center;
  zoom: 0.9;
  transform: translateY(18px) rotate(20deg);
  animation:moving-flower-3 4s linear infinite;
}

.flowers-amarillas .flower__leafs{
  position:relative;
  animation:blooming-flower 2s backwards;
}
.flowers-amarillas .flower__leafs--1{animation-delay:1.1s;}
.flowers-amarillas .flower__leafs--2{animation-delay:1.4s;}
.flowers-amarillas .flower__leafs--3{animation-delay:1.7s;}
.flowers-amarillas .flower__leafs::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-100%);
  width:8vmin;
  height:8vmin;
  background-color:#f9fd25;
  filter:blur(10vmin);
}
.flowers-amarillas .flower__leaf{
  position:absolute;
  bottom:0;
  left:50%;
  width:8vmin;
  height:11vmin;
  border-radius:51% 49% 47% 53% / 44% 45% 55% 69%;
  background-color:#fddd25;
  transform-origin:bottom center;
  opacity:.9;
  box-shadow:inset 0 0 2vmin rgba(255,255,255,.5);
}
.flowers-amarillas .flower__leaf--1{transform:translate(-10%,1%) rotateY(40deg) rotateX(-50deg);}
.flowers-amarillas .flower__leaf--2{transform:translate(-50%,-4%) rotateX(40deg);}
.flowers-amarillas .flower__leaf--3{transform:translate(-90%,0) rotateY(45deg) rotateX(50deg);}
.flowers-amarillas .flower__leaf--4{
  width:8vmin;
  height:8vmin;
  transform-origin:bottom left;
  border-radius:4vmin 10vmin 4vmin 4vmin;
  transform:translate(0,18%) rotateX(70deg) rotate(-43deg);
  background-color:#7c6901;
  z-index:1;
  opacity:.8;
}
.flowers-amarillas .flower__white-circle{
  position:absolute;
  left:-3.5vmin;
  top:-3vmin;
  width:9vmin;
  height:4vmin;
  border-radius:50%;
  background-color:#fff;
}
.flowers-amarillas .flower__white-circle::after{
  content:"";
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  width:60%;
  height:60%;
  border-radius:inherit;
  background-image:
    repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(67.5deg,rgba(0,0,0,.03) 0 1px,transparent 1px 12px),
    linear-gradient(90deg,rgb(255,235,18),rgb(255,206,0));
}
.flowers-amarillas .flower__line{
  height:55vmin;
  width:1.5vmin;
  background-image:
    linear-gradient(to left,rgba(0,0,0,.2),transparent,rgba(255,255,255,.2)),
    linear-gradient(to top,transparent 10%,#14757a,#39c6d6);
  box-shadow:inset 0 0 2px rgba(0,0,0,.5);
  animation:grow-flower-tree 4s backwards;
}
.flowers-amarillas .flower__line__leaf{
  --w:7vmin;
  --h:calc(var(--w) + 2vmin);
  position:absolute;
  top:20%;
  left:90%;
  width:var(--w);
  height:var(--h);
  border-top-right-radius:var(--h);
  border-bottom-left-radius:var(--h);
  background-image:linear-gradient(to top,rgba(20,117,122,.4),#5ed639);
}
.flowers-amarillas .flower__line__leaf--1,
.flowers-amarillas .flower__line__leaf--2{
  transform:rotate(70deg) rotateY(30deg);
}
.flowers-amarillas .flower__line__leaf--2{top:45%;}
.flowers-amarillas .flower__line__leaf--3,
.flowers-amarillas .flower__line__leaf--4,
.flowers-amarillas .flower__line__leaf--6{
  border-top-right-radius:0;
  border-bottom-left-radius:0;
  border-top-left-radius:var(--h);
  border-bottom-right-radius:var(--h);
  left:-460%;
  top:12%;
  transform:rotate(-70deg) rotateY(30deg);
}
.flowers-amarillas .flower__line__leaf--4{top:40%;}
.flowers-amarillas .flower__line__leaf--5{
  top:0;
  transform-origin:left;
  transform:rotate(70deg) rotateY(30deg) scale(.6);
}
.flowers-amarillas .flower__line__leaf--6{
  top:-2%;
  left:-450%;
  transform-origin:right;
  transform:rotate(-70deg) rotateY(30deg) scale(.6);
}
.flowers-amarillas .flower__light{
  position:absolute;
  bottom:0;
  width:1vmin;
  height:1vmin;
  background-color:rgb(255,251,0);
  border-radius:50%;
  filter:blur(.2vmin);
  animation:light-ans 4s linear infinite backwards;
}
.flowers-amarillas .flower__light:nth-child(odd){background-color:#23f0ff;}
.flowers-amarillas .flower__light--1{left:-2vmin; animation-delay:1s;}
.flowers-amarillas .flower__light--2{left:3vmin; animation-delay:.5s;}
.flowers-amarillas .flower__light--3{left:-6vmin; animation-delay:.3s;}
.flowers-amarillas .flower__light--4{left:6vmin; animation-delay:.9s;}
.flowers-amarillas .flower__light--5{left:-1vmin; animation-delay:1.5s;}
.flowers-amarillas .flower__light--6{left:-4vmin; animation-delay:3s;}
.flowers-amarillas .flower__light--7{left:3vmin; animation-delay:2s;}
.flowers-amarillas .flower__light--8{left:-6vmin; animation-delay:3.5s;}
.flowers-amarillas .flower__grass{
  --c:#159faa;
  --line-w:1.5vmin;
  position:absolute;
  bottom:-4vmin;
  left:50%;
  width:16vmin;
  transform:translateX(-50%) rotate(-48deg) rotateY(40deg);
  transform-origin:bottom center;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  animation:moving-grass 2s linear infinite;
}
.flowers-amarillas .flower__grass--top{
  width:7vmin;
  height:10vmin;
  border-top-right-radius:100%;
  border-right:var(--line-w) solid var(--c);
  transform-origin:bottom center;
}
.flowers-amarillas .flower__grass--bottom{
  margin-top:-2px;
  width:var(--line-w);
  height:20vmin;
  background-image:linear-gradient(to top,transparent,var(--c));
}
.flowers-amarillas .flower__grass__leaf{
  --size:8vmin;
  position:absolute;
  width:calc(var(--size) * 2.1);
  height:var(--size);
  border-top-left-radius:var(--size);
  border-top-right-radius:var(--size);
  background-image:linear-gradient(to top,transparent,transparent 30%,var(--c));
}
.flowers-amarillas .flower__grass__leaf--1{top:-6%; left:30%; transform:rotate(-20deg);}
.flowers-amarillas .flower__grass__leaf--2{top:-5%; left:-90%; transform:rotate(10deg);}
.flowers-amarillas .flower__grass__overlay{
  display:none;
}

@keyframes light-ans{
  0%{opacity:0; transform:translateY(0);}
  25%{opacity:1; transform:translateY(-5vmin) translateX(-2vmin);}
  50%{opacity:1; transform:translateY(-15vmin) translateX(2vmin); filter:blur(.2vmin);}
  75%{transform:translateY(-20vmin) translateX(-2vmin); filter:blur(.2vmin);}
  100%{transform:translateY(-30vmin); opacity:0; filter:blur(1vmin);}
}
@keyframes moving-flower-1{0%,100%{transform:rotate(2deg);}50%{transform:rotate(-2deg);}}
@keyframes moving-flower-2{0%,100%{transform:rotate(18deg);}50%{transform:rotate(14deg);}}
@keyframes moving-flower-3{0%,100%{transform:rotate(-18deg);}50%{transform:rotate(-20deg) rotateY(-10deg);}}
@keyframes grow-flower-tree{0%{height:0; border-radius:1vmin;}}
@keyframes blooming-flower{0%{transform:scale(0);}}
@keyframes moving-grass{
  0%,100%{transform:translateX(-50%) rotate(-48deg) rotateY(40deg);}
  50%{transform:translateX(-50%) rotate(-50deg) rotateY(40deg);}
}

.footer{
  width:min(1120px, 100%);
  margin: 0 auto;
  padding-bottom: 10px;
  opacity: .9;
}
.footer__text{
  margin: 0;
  color: rgba(255, 247, 251, .58);
  text-align:center;
  font-size: 13px;
}

.letter{
  width: min(720px, calc(100vw - 28px));
  border: 0;
  padding: 0;
  background: transparent;
}
.letter::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.letter__paper{
  position:relative;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,79,135,.20), transparent 55%),
    radial-gradient(800px 480px at 80% 20%, rgba(124,92,255,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  /* box-shadow: 0 50px 120px rgba(0,0,0,.55); */
  padding: clamp(18px, 3.2vw, 32px);
  overflow:hidden;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  animation: letterIn .26s ease forwards;
}
@keyframes letterIn{
  to{transform: translateY(0) scale(1); opacity: 1}
}
.letter__close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,247,251,.88);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.letter__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}
.letter__to{
  margin: 0 0 10px;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 22px;
}
.letter__p{
  margin: 0;
  color: rgba(255,247,251,.86);
  font-size: 16px;
  line-height: 1.7;
}
.letter__from{
  margin: 18px 0 0;
  color: rgba(255,247,251,.84);
  font-weight: 600;
}
.sig{
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
}
.letter__seal{
  position:absolute;
  right: 18px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  display:grid;
  place-items:center;
  border-radius: 24px;
  background: rgba(255,79,135,.14);
  border: 1px solid rgba(255,79,135,.30);
  box-shadow: 0 20px 60px rgba(255,79,135,.12);
}
.seal__heart{
  font-size: 26px;
  filter: drop-shadow(0 10px 22px rgba(255,79,135,.25));
  animation: beat 1.2s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{transform: scale(1)}
  30%{transform: scale(1.12)}
  55%{transform: scale(.98)}
}

.hearts{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.heart{
  position:absolute;
  left: var(--x, 50%);
  top: 110%;
  width: var(--s, 18px);
  height: var(--s, 18px);
  transform: translate(-50%, 0) rotate(45deg);
  opacity: var(--o, .75);
  background: linear-gradient(135deg, rgba(255,79,135,.95), rgba(255,204,112,.75));
  border-radius: 4px;
  filter: blur(.1px);
  box-shadow: 0 14px 40px rgba(255,79,135,.18);
  animation: floatUp var(--d, 9s) linear forwards;
}
.heart::before,
.heart::after{
  content:"";
  position:absolute;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: inherit;
}
.heart::before{
  left:-50%;
  top:0;
}
.heart::after{
  left:0;
  top:-50%;
}
@keyframes floatUp{
  0%{transform: translate(-50%, 0) rotate(45deg) scale(.95); opacity: 0}
  8%{opacity: var(--o, .75)}
  100%{transform: translate(calc(-50% + var(--dx, 0px)), -130vh) rotate(45deg); opacity: 0}
}

@media (max-width: 920px){
  .hero{grid-template-columns: 1fr; }
  .photo{min-height: 320px;}
  .photo__frame{min-height: 320px;}
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media (max-width: 520px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (prefers-reduced-motion: reduce){
  .aurora, .hero__card::after, .seal__heart, .heart{animation: none !important;}
  .btn, .reason, .shot{transition:none !important;}
}