*{box-sizing:border-box}
body{margin:0}

/* Layout: una tarjeta vertical tipo historia (9:16) centrada, acuarela rosa, osito animado abajo */
:root {
  --paper: #fbeeee;
  --paper-deep: #f3d3d3;
  --wine: #8e3b3b;
  --rose: #c98d8d;
  --blush: #f2b8c0;
  --ink: #6e5555;
  --script: "Great Vibes", "Brush Script MT", cursive;
  --caps: "Josefin Sans", "Trebuchet MS", sans-serif;
  --body: "Lato", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
html, body { background: #ead3d3; color: var(--ink); }
body {
  min-height: 100%;
  padding-inline: 16px;
  padding-block: 24px;
  display: flex; justify-content: center;
  font-family: var(--body);
}
.card {
  position: relative;
  width: 100%; max-width: 420px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 60% 30% at 0% 8%, rgba(230,170,175,.45), transparent 70%),
    radial-gradient(ellipse 50% 28% at 100% 14%, rgba(230,170,175,.40), transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(225,160,170,.55), transparent 70%),
    linear-gradient(180deg, #fdf3f2 0%, var(--paper) 55%, var(--paper-deep) 100%);
  box-shadow: 0 30px 60px -30px rgba(120,50,60,.45);
  text-align: center;
  padding-block: 44px 0;
}
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; }
.content { position: relative; z-index: 2; padding-inline: 24px; display: grid; gap: 10px; justify-items: center; }

.eyebrow { font-family: var(--caps); font-weight: 600; letter-spacing: .22em; color: var(--rose); font-size: .95rem; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--script); font-weight: 400; color: var(--wine); font-size: clamp(3.4rem, 15vw, 4.4rem); line-height: 1; text-wrap: balance; }
.name { font-family: var(--caps); font-weight: 600; font-size: clamp(2rem, 10vw, 2.6rem); letter-spacing: .16em; padding-left: .16em; line-height: 1.1; margin-top: 2px;
  background: linear-gradient(90deg, #d4607a, #e8907a 35%, #b77ad0 70%, #d4607a); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: brillo 6s linear infinite; }
@keyframes brillo { to { background-position: -200% 0 } }
.when { font-family: var(--caps); font-weight: 600; letter-spacing: .14em; color: var(--rose); text-transform: uppercase; font-size: 1.02rem; line-height: 1.6; }
.when strong { color: var(--wine); font-weight: 600; }
.note { font-size: .9rem; line-height: 1.55; max-width: 32ch; color: var(--ink); margin: 0; }
.hope { font-family: var(--script); color: var(--wine); font-size: 2rem; margin: 4px 0 0; }

.countdown { display: flex; gap: 8px; justify-content: center; font-variant-numeric: tabular-nums; }
.countdown div { --c: #d4607a; --f: #fde3ea; background: linear-gradient(160deg, #fff 0%, var(--f) 100%); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  border-radius: 14px; padding: 7px 8px 6px; min-width: 60px; box-shadow: 0 6px 14px -8px var(--c); }
.countdown div:nth-child(2) { --c: #e07b5a; --f: #ffe8dc; }
.countdown div:nth-child(3) { --c: #a86bc4; --f: #f1e4fa; }
.countdown div:nth-child(4) { --c: #3f9e8c; --f: #ddf4ee; }
.countdown b { display: block; font-family: var(--caps); font-size: 1.4rem; font-weight: 600; color: var(--c); }
.countdown span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); opacity: .8; }
#cd-s.tic { animation: tic .5s ease-out; }
@keyframes tic { from { opacity: .35; transform: translateY(-3px) } to { opacity: 1; transform: none } }
.today { font-family: var(--caps); color: var(--wine); letter-spacing: .1em; }

.dots { display: flex; gap: 8px; margin-top: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); opacity: .5; animation: pulse 2.4s infinite ease-in-out; }
.dots i:nth-child(1){ background: var(--wine); opacity: .8 }
.dots i:nth-child(2){ animation-delay: .2s } .dots i:nth-child(3){ animation-delay: .4s }
.dots i:nth-child(4){ animation-delay: .6s } .dots i:nth-child(5){ animation-delay: .8s }

/* ---------- Burbuja de ubicación estilo WhatsApp iPhone ---------- */
.chat { width: 100%; display: grid; justify-items: center; margin-top: 4px; padding-right: 8px; }
.chat-label { font-family: var(--caps); letter-spacing: .16em; text-transform: uppercase; font-size: .62rem; color: var(--rose); margin-bottom: 6px; }
.bubble {
  position: relative; display: block; width: 172px; max-width: 70%;
  background: #d9fdd3; border-radius: 12px; padding: 3px;
  text-decoration: none; color: #111b21; text-align: left;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.bubble::after { /* colita iOS */
  content: ""; position: absolute; right: -7px; bottom: 0; width: 16px; height: 18px;
  background: #d9fdd3; border-bottom-left-radius: 14px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.bubble:hover, .bubble:focus-visible { transform: translateY(-2px); }
.bubble:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
.map { position: relative; height: 74px; border-radius: 9px; overflow: hidden; background: #e9efe4; }
.map svg { width: 100%; height: 100%; display: block; }
.map .pin { position: absolute; height: auto; left: 50%; top: 50%; width: 18px; transform: translate(-50%, -92%); animation: drop 1.6s .9s both cubic-bezier(.3,1.6,.5,1); }
.map .pin-shadow { position: absolute; left: 50%; top: 50%; width: 9px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); transform: translate(-50%, -30%); }
.loc-row { display: flex; align-items: center; gap: 6px; padding: 5px 5px 0; line-height: 1.2; }
.loc-icon { width: 20px; height: 20px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.loc-icon svg { width: 11px; height: 11px; }
.loc-text { min-width: 0; }
.loc-title { font-weight: 700; font-size: .8rem; color: #027eb5; }
.loc-sub { font-size: .64rem; color: #54656f; }
.meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: .58rem; color: #667781; padding: 0 5px 2px; }
.meta svg { width: 13px; height: 9px; }

.scene { position: relative; z-index: 1; height: 360px; margin-top: 4px; }
.bear { position: absolute; left: 50%; bottom: 6px; width: 290px; max-width: 80%; transform-origin: 50% 95%; animation: sway 5s ease-in-out infinite; translate: -50% 0; }
.eyes { transform-origin: 150px 118px; animation: blink 4.5s infinite; }
.butterfly { position: absolute; width: 38px; animation: flutter-path 9s ease-in-out infinite; }
.butterfly .wing-l, .butterfly .wing-r { transform-box: fill-box; animation: flap .35s ease-in-out infinite alternate; }
.butterfly .wing-l { transform-origin: right center; }
.butterfly .wing-r { transform-origin: left center; }
.b1 { left: 8%; top: 120px; }
.b2 { right: 6%; top: 175px; animation-delay: -4s; width: 30px; }
.float { position: absolute; border-radius: 50%; background: var(--wine); opacity: .7; animation: drift 7s ease-in-out infinite; }
.heart { position: absolute; color: var(--blush); font-size: 18px; animation: rise 8s linear infinite; opacity: 0; }

/* Entrada escalonada (desde estado visible) */
.reveal { animation: up .9s both ease-out; }
.reveal:nth-child(2){ animation-delay: .1s } .reveal:nth-child(3){ animation-delay: .2s }
.reveal:nth-child(4){ animation-delay: .3s } .reveal:nth-child(5){ animation-delay: .4s }
.reveal:nth-child(6){ animation-delay: .5s } .reveal:nth-child(7){ animation-delay: .6s }
.reveal:nth-child(8){ animation-delay: .7s } .reveal:nth-child(9){ animation-delay: .8s }

.name.reveal { animation: up .9s .1s both ease-out, brillo 6s linear infinite; }

@keyframes up { from { transform: translateY(14px); opacity: .25 } to { transform: none; opacity: 1 } }
@keyframes sway { 0%,100% { rotate: -2.5deg } 50% { rotate: 2.5deg } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
@keyframes flap { from { transform: scaleX(1) } to { transform: scaleX(.25) } }
@keyframes flutter-path { 0%,100% { transform: translate(0,0) rotate(-8deg) } 25% { transform: translate(14px,-22px) rotate(6deg) } 50% { transform: translate(-6px,-38px) rotate(-4deg) } 75% { transform: translate(-16px,-12px) rotate(8deg) } }
@keyframes drift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0 } 15% { opacity: .9 } 100% { transform: translateY(-300px) scale(1.1); opacity: 0 } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.35) } }
@keyframes drop { from { transform: translate(-50%, -260%); } to { transform: translate(-50%, -92%); } }

/* ---------- Sobre de apertura ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; gap: 18px; align-content: center;
  background: radial-gradient(circle at 50% 40%, #fbe9ea, #ecc9cc); cursor: pointer; transition: opacity .8s ease .9s, visibility 0s 1.7s; }
.intro.open { opacity: 0; visibility: hidden; pointer-events: none; }
.env { position: relative; width: 270px; height: 180px; max-width: 80vw; perspective: 900px; filter: drop-shadow(0 18px 24px rgba(142,59,59,.25)); animation: drift 3s ease-in-out infinite; }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; }
.env-back { background: #e7b7bd; border-radius: 6px; }
.env-letter { position: absolute; left: 8%; right: 8%; top: 10%; height: 85%; background: #fff8f7; border-radius: 4px; display: grid; place-items: center;
  font-family: var(--script); color: var(--wine); font-size: 2rem; transition: transform .8s ease .35s; }
.env-front { background: linear-gradient(135deg, #f3cdd1 50%, transparent 50%) left / 50% 100% no-repeat,
                          linear-gradient(225deg, #f3cdd1 50%, transparent 50%) right / 50% 100% no-repeat,
                          linear-gradient(0deg, #f0c3c8 0 55%, transparent 55%); border-radius: 6px; }
.env-flap { height: 60%; background: #e9b4bb; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .6s ease; z-index: 3; border-radius: 6px 6px 0 0; }
.seal { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: 50px; height: 50px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 35%, #b4555a, #7d2e33); color: #f8dfe0; display: grid; place-items: center;
  font-family: var(--script); font-size: 1.7rem; box-shadow: 0 3px 6px rgba(0,0,0,.25); transition: opacity .3s; }
.intro.open .seal { opacity: 0; }
.intro.open .env-flap { transform: rotateX(180deg); z-index: 0; }
.intro.open .env-letter { transform: translateY(-55%); }
.intro-hint { font-family: var(--caps); letter-spacing: .25em; text-transform: uppercase; font-size: .8rem; color: var(--wine); animation: pulse 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}