/* ============================================================
   ESPERANDO A LUCA — álbum de bebé
   Crema, menta, dorado suave. Sacramento (script) + Quicksand.
   Plano, redondo y aireado: nada de sombras duras. Diseño propio.
   ============================================================ */
:root {
  --crema: #FBF6EC; --crema-osc: #F1E7D3;
  --menta: #BFE3D3; --menta-cl: #E6F3ED; --menta-osc: #7FBFA6; --menta-prof: #3B7560;
  --oro: #D9B97A; --oro-cl: #F0E2BF; --oro-osc: #A07F41;
  --cafe: #6B4F3A; --cafe-cl: #7A6554;
  --wa: #0E7A3B;
  --f-script: 'Sacramento', cursive;
  --f-texto: 'Quicksand', system-ui, sans-serif;
  --t-xs: clamp(11px, 3vw, 12.5px); --t-sm: clamp(13px, 3.5vw, 15px); --t-md: clamp(15.5px, 4.2vw, 17.5px);
  --t-lg: clamp(19px, 5.2vw, 23px); --t-xl: clamp(24px, 6.8vw, 32px); --t-2xl: clamp(34px, 9.5vw, 46px);
  --t-script: clamp(44px, 13vw, 72px); --t-script-lg: clamp(56px, 16vw, 92px); --t-num: clamp(30px, 9vw, 46px);
  --ancho: 560px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-texto); font-weight: 500; color: var(--cafe); background: var(--crema); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.cerrado { overflow: hidden; height: 100dvh; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.script { font: 400 var(--t-script)/1 var(--f-script); color: var(--oro-osc); }

/* ============================================================ PORTADA */
.portada { position: fixed; inset: 0; z-index: 50; background: var(--crema); overflow: hidden; }
.portada__escena { position: absolute; left: 50%; top: 50%; width: calc(var(--w, 752) * 1px); height: calc(var(--h, 1344) * 1px); will-change: transform; }
.portada__fondo { width: 100%; height: 100%; object-fit: cover; }
/* La caja: la tapa es una capa aparte que se levanta. Medidas en px del arte (ver JS: colocar) */
.regalo { position: absolute; }
.regalo__caja { position: absolute; left: 0; top: 0; width: 100%; }
.regalo__tapa { position: absolute; left: 0; top: -37%; width: 84.5%; transform-origin: 50% 90%; will-change: transform; }
.regalo__luz { position: absolute; left: 32%; top: 8%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: radial-gradient(circle, #FFF7DC 0%, #F7E7B8 30%, rgba(191,227,211,.95) 60%, rgba(251,246,236,0) 100%); transform: scale(0); opacity: 0; will-change: transform; z-index: 3; }
.regalo__chispas { position: absolute; left: 32%; top: 8%; width: 0; height: 0; z-index: 4; }
.regalo__chispas span { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 10px 2px rgba(217,185,122,.7); }
.regalo__chispas span.estrella { border-radius: 0; background: none; box-shadow: none; width: 16px; height: 16px; clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 75%, 20% 100%, 31% 60%, 0 38%, 38% 38%); background: var(--oro); }

.portada__cabecera { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 0; right: 0; display: grid; justify-items: center; gap: 2px; z-index: 3; pointer-events: none; text-align: center; padding: 0 20px; }
.portada__script { font: 400 var(--t-script-lg)/1 var(--f-script); color: var(--oro-osc); }
.portada__nombre { font: 600 var(--t-lg)/1.2 var(--f-texto); color: var(--cafe); }
.portada__nombre b { display: block; font-size: var(--t-2xl); line-height: 1; color: var(--menta-prof); font-weight: 700; margin-top: 4px; }
.portada__tap { position: absolute; inset: 0; z-index: 5; }
.portada__cta { position: absolute; left: 0; right: 0; bottom: max(30px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 6px; z-index: 3; pointer-events: none; }
.portada__cta-texto { font: 700 var(--t-sm)/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--cafe); }
.portada__cta-mano { color: var(--menta-prof); animation: toca 1.6s ease-in-out infinite; }
@keyframes toca { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(.92); } }

/* ============================================================ ÁLBUM */
.album { position: relative; z-index: 1; }
body.cerrado .album { visibility: hidden; }
.pagina { position: relative; padding: clamp(60px, 12vh, 110px) clamp(20px, 6vw, 40px); overflow-x: hidden; overflow-x: clip; }
.pagina--crema { background: var(--crema); }
.pagina--menta { background: var(--menta-cl); }
.pagina__ancho { position: relative; max-width: var(--ancho); margin: 0 auto; text-align: center; }
/* la ola separa las páginas menta de las crema */
.pagina__ola { position: absolute; left: 0; right: 0; top: -1px; height: clamp(26px, 6vw, 48px); }
.pagina__ola svg { width: 100%; height: 100%; display: block; fill: var(--crema); }
/* nubecita decorativa sobre la primera página */
.pagina__nube { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: -6px; }
.pagina__nube span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--menta); }
.pagina__nube span:nth-child(2) { width: 50px; height: 50px; margin: 0 -10px; }
/* estrellitas que titilan en las páginas menta */
.pagina--menta::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: radial-gradient(circle at 12% 30%, var(--oro) 1.2px, transparent 2px), radial-gradient(circle at 88% 22%, var(--oro) 1.5px, transparent 2.4px), radial-gradient(circle at 78% 78%, var(--oro) 1.2px, transparent 2px), radial-gradient(circle at 18% 84%, var(--oro) 1px, transparent 1.8px), radial-gradient(circle at 50% 12%, var(--oro) 1px, transparent 1.8px);
  animation: titila 3.6s ease-in-out infinite; }
@keyframes titila { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

.titulo { display: grid; justify-items: center; gap: 2px; margin-bottom: 18px; }
.titulo .script { font-size: var(--t-script); }
.titulo__sub { font: 600 var(--t-sm)/1.3 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--menta-prof); }
.parrafo { font-size: var(--t-md); line-height: 1.75; max-width: 44ch; margin: 12px auto 0; color: var(--cafe); }
.parrafo b { font-weight: 700; color: var(--menta-prof); }
.parrafo--capitular { text-align: left; }
.parrafo--capitular::first-letter { font: 400 3.4em/.9 var(--f-script); color: var(--oro-osc); float: left; margin: 6px 8px 0 0; }
.firma { margin-top: 18px; font: 400 var(--t-xl)/1 var(--f-script); color: var(--cafe-cl); }
.pies { width: clamp(70px, 18vw, 96px); margin: 18px auto 0; opacity: .9; }

.fig { position: absolute; pointer-events: none; z-index: 2; will-change: transform; }
.fig--osito { right: -3%; bottom: -8px; width: clamp(90px, 26vw, 140px); }
.fig--chupon { left: 2%; top: 14px; width: clamp(54px, 15vw, 80px); transform: rotate(-16deg); }
.fig--biberon { right: 3%; bottom: -6px; width: clamp(60px, 16vw, 86px); transform: rotate(12deg); }

/* ---------- 1 · CIELO ---------- */
.cielo { position: relative; min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 70px 20px 60px; overflow: hidden; background: var(--crema); }
.cielo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cielo__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,246,236,.1), rgba(251,246,236,.45) 55%, var(--crema) 96%); }
.cielo__texto { position: relative; z-index: 3; display: grid; justify-items: center; }
.cielo__nombre { font: 700 var(--t-2xl)/1.05 var(--f-texto); color: var(--cafe); margin-top: -6px; }
.cielo__nombre span { display: block; font-size: var(--t-script-lg); font-family: var(--f-script); font-weight: 400; color: var(--menta-prof); line-height: 1; margin-top: 2px; }
.cielo__fecha { margin-top: 12px; font: 600 var(--t-sm)/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cafe-cl); }
.cielo__hilo { display: block; width: 1px; height: 48px; margin-top: 26px; background: linear-gradient(180deg, var(--oro), transparent); }
.fig--nube { z-index: 1; opacity: .9; }
.fig--nube-a { left: -6%; top: 16%; width: clamp(140px, 40vw, 260px); }
.fig--nube-b { right: -8%; top: 58%; width: clamp(120px, 34vw, 220px); }
.fig--luna { right: 6%; top: 7%; width: clamp(80px, 22vw, 120px); }
.fig--estrella { width: clamp(28px, 8vw, 44px); }
.fig--estrella-a { left: 10%; top: 9%; }
.fig--estrella-b { left: 22%; top: 70%; width: clamp(20px, 6vw, 32px); }
.fig--ciguena { left: 100%; top: 26%; width: clamp(120px, 34vw, 200px); opacity: 0; }

/* ---------- 3 · CUBOS ---------- */
.cubos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.cubo { display: grid; gap: 4px; padding: 14px 4px 12px; border-radius: 18px; border: 3px solid var(--cafe); border-bottom-width: 8px; background: var(--crema); color: var(--cafe); }
.cubo--menta { background: var(--menta); } .cubo--oro { background: var(--oro-cl); }
.cubo:nth-child(1) { transform: rotate(-3deg); } .cubo:nth-child(2) { transform: rotate(2deg); } .cubo:nth-child(3) { transform: rotate(-1.5deg); } .cubo:nth-child(4) { transform: rotate(3deg); }
.cubo b { font: 700 var(--t-num)/1 var(--f-texto); font-variant-numeric: tabular-nums; }
.cubo span { font: 700 var(--t-xs)/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; }
.hoy { margin-top: 18px; font: 400 var(--t-2xl)/1 var(--f-script); color: var(--menta-prof); }

/* ---------- 4 · FAMILIA ---------- */
.familia { display: grid; gap: 18px; margin-top: 6px; }
.familia__par span { display: block; font: 700 var(--t-xs)/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--menta-prof); margin-bottom: 6px; }
.familia__par b { font: 600 var(--t-lg)/1.3 var(--f-texto); color: var(--cafe); }
.familia__par i { font: 400 1.3em/1 var(--f-script); color: var(--oro-osc); padding: 0 4px; }

/* ---------- 5 · CALENDARIO ---------- */
.calendario { display: inline-grid; justify-items: center; margin: 4px auto 14px; padding: 0 0 12px; width: min(210px, 62vw); border-radius: 22px; background: var(--crema); border: 3px solid var(--menta-osc); overflow: hidden; }
.calendario__mes { width: 100%; padding: 10px; background: var(--menta-osc); color: #fff; font: 700 var(--t-sm)/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; }
.calendario__dia { font: 700 clamp(64px, 20vw, 92px)/1 var(--f-texto); color: var(--cafe); margin-top: 6px; }
.calendario__sem { font: 600 var(--t-sm)/1 var(--f-texto); color: var(--cafe-cl); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; text-decoration: none; font: 700 var(--t-md)/1 var(--f-texto); transition: transform .15s ease, background-color .25s ease, color .25s ease; }
.boton:active { transform: scale(.97); }
.boton--mapa { margin-top: 16px; background: var(--cafe); color: var(--crema); }
.boton--si { margin-top: 8px; padding: 18px 36px; font-size: var(--t-lg); background: var(--menta-prof); color: #fff; }
.boton--wa { background: var(--wa); color: #fff; }
.ico { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ico--boton { width: 24px; height: 24px; }

/* ---------- 6 · ÁLBUM DE FOTOS ---------- */
.album__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; margin: 10px auto 0; }
.album__fotos figure { margin: 0; padding: 8px 8px 10px; border-radius: 24px; background: #fff; border: 2px dashed var(--menta); }
.album__fotos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 18px; }
.album__fotos figcaption { margin-top: 8px; font: 400 var(--t-xl)/1 var(--f-script); color: var(--cafe-cl); text-align: center; }

/* ---------- 7 · LISTA ---------- */
.lista { list-style: none; display: grid; gap: 10px; margin-top: 4px; text-align: left; }
.lista__item { display: grid; grid-template-columns: 48px 1fr 30px; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 18px; border: 2px solid var(--menta); background: var(--crema); color: var(--cafe); font: inherit; cursor: pointer; text-align: left; transition: background-color .25s ease, border-color .25s ease, transform .2s ease; }
.lista__item b { display: block; font: 700 var(--t-md)/1.2 var(--f-texto); }
.lista__item small { display: block; margin-top: 2px; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--cafe-cl); }
.lista__check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--menta-osc); display: grid; place-items: center; background: #fff; transition: background-color .25s ease, border-color .25s ease; }
.lista__check::after { content: ''; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); margin-top: -3px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.lista__item.elegido { background: var(--menta); border-color: var(--menta-osc); }
.lista__item.elegido .lista__check { background: var(--menta-prof); border-color: var(--menta-prof); }
.lista__item.elegido .lista__check::after { transform: rotate(45deg) scale(1); }
.lista__nota { margin-top: 16px; font-size: var(--t-sm); line-height: 1.6; color: var(--cafe-cl); }
.lista__nota b { color: var(--cafe); }

/* ---------- 8 · CONFIRMAR ---------- */
.cuantos { display: inline-grid; grid-template-columns: 48px auto 48px; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 6px; border-radius: 999px; background: var(--menta-cl); border: 2px solid var(--menta); }
.cuantos__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--menta-prof); color: #fff; cursor: pointer; transition: background-color .22s ease, color .22s ease, transform .15s ease; }
.cuantos__btn svg { display: block; }
.cuantos__btn:active { transform: scale(.92); }
.cuantos__num { display: grid; justify-items: center; min-width: 90px; }
.cuantos__num b { font: 700 var(--t-xl)/1 var(--f-texto); color: var(--cafe); }
.cuantos__num small { font: 700 var(--t-xs)/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--cafe-cl); margin-top: 2px; }

/* ---------- 9 · CANCIÓN ---------- */
.movil { margin: 0 auto; width: 150px; height: 170px; border: none; background: transparent; cursor: pointer; display: grid; place-items: start center; transform-origin: 50% 0%; }
.movil img { width: 140px; transform-origin: 50% 0%; animation: mece 4s ease-in-out infinite; }
@keyframes mece { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.cancion.tocando .movil img { animation: giraMovil 6s linear infinite; }
@keyframes giraMovil { to { transform: rotateY(360deg); } }
.cancion__pista { margin-top: 8px; font: 600 var(--t-sm)/1.4 var(--f-texto); color: var(--cafe-cl); }
.yt-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- 10 · CIERRE + CRÉDITOS ---------- */
.cierre { padding: clamp(60px, 13vh, 110px) 20px clamp(40px, 8vh, 60px); text-align: center; background: var(--crema); }
.cierre__script { font-size: var(--t-script); }
.cierre__texto { font: 600 var(--t-sm)/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--cafe-cl); margin-top: -2px; }
.cierre__nombre { margin: 14px 0 26px; font: 700 var(--t-2xl)/1 var(--f-texto); color: var(--menta-prof); }
.enlace { position: relative; display: inline-block; padding-bottom: 5px; font: 700 var(--t-sm)/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--cafe); text-decoration: none; }
.enlace::after, .creditos__correo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.creditos { padding: clamp(44px, 8vh, 64px) 20px calc(36px + env(safe-area-inset-bottom)); text-align: center; background: var(--cafe); color: rgba(251,246,236,.9); }
.creditos p { font-size: var(--t-sm); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.creditos b { color: var(--oro-cl); }
.creditos__extras { display: none; }
.creditos__pregunta { margin: 0 auto 24px !important; font: 400 var(--t-xl)/1.3 var(--f-script) !important; color: var(--crema); }
.creditos__correo { position: relative; display: inline-block; margin-top: 24px; padding-bottom: 3px; font-size: var(--t-sm); color: var(--menta); text-decoration: none; }
.creditos__marca { margin: 36px auto 0 !important; padding-top: 18px; border-top: 1px solid rgba(251,246,236,.2); font-size: var(--t-xs) !important; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* ---------- volver fijo ---------- */
.volver-fijo { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--menta-osc); background: rgba(251,246,236,.9); color: var(--cafe); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .2s ease, background-color .2s ease, color .2s ease, opacity .3s ease; }
.volver-fijo:active { transform: scale(.94); }
body.cerrado .volver-fijo { opacity: 0; pointer-events: none; }

/* ---------- escritorio ---------- */
@media (min-width: 768px) {
  .album__fotos { grid-template-columns: repeat(4, 1fr); max-width: 900px; }
  .lista { grid-template-columns: 1fr 1fr; }
  .familia { grid-template-columns: 1fr 1fr 1fr; }
  .cubos { max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (hover: none) { .enlace::after, .creditos__correo::after { transform: scaleX(1); opacity: .45; } }
@media (hover: hover) and (pointer: fine) {
  .boton--mapa:hover { background: var(--menta-prof); color: #fff; }
  .boton--si:hover { background: var(--cafe); color: var(--oro-cl); }
  .boton--wa:hover { background: var(--crema); color: var(--wa); }
  .cuantos__btn:hover { background: var(--cafe); color: var(--oro-cl); }
  .lista__item:hover { transform: translateY(-3px); border-color: var(--menta-osc); }
  .album__fotos img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .album__fotos figure { transition: border-color .3s ease, transform .3s ease; }
  .album__fotos figure:hover { border-color: var(--oro); transform: rotate(-1.5deg); }
  .album__fotos figure:hover img { transform: scale(1.04); }
  .cubo { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .cubo:hover { transform: rotate(0deg) translateY(-6px) !important; }
  .calendario { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .calendario:hover { transform: rotate(-2deg) scale(1.03); }
  .familia__par b { display: inline-block; transition: color .25s ease, transform .3s ease; }
  .familia__par:hover b { color: var(--menta-prof); transform: translateY(-3px); }
  .movil:hover img { animation-play-state: paused; transform: rotate(0) scale(1.06); transition: transform .3s ease; }
  .enlace:hover::after, .creditos__correo:hover::after { transform: scaleX(1); }
  .volver-fijo:hover { background: var(--cafe); color: var(--crema); transform: translateX(-3px); }
  .pies { transition: transform .4s ease; } .pies:hover { transform: scale(1.1) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* pie: el correo va en su propia línea, 20 px debajo del botón de WhatsApp
   (en pantallas anchas quedaba pegado al lado del botón) */
.creditos__correo { display: table !important; margin: 20px auto 0 !important; }