/* Landing. Los valores salen de las reglas del tema de cumpleaños de la referencia (docs/ingenieria-inversa.md, sección 9). */
a { color: inherit; }
.centro-texto { text-align: center; }
.js [data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-revelar].visto { opacity: 1; transform: none; }

/* Cabecera fija. */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--cabecera); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--margen); background: #fff8f1; box-shadow: 0 16px 40px -28px rgba(51, 32, 61, 0.45); }
.marca { display: inline-flex; align-items: center; gap: 8px; font: 400 1.4rem/1 var(--f-titulo); text-decoration: none; color: var(--tinta); }
.marca em, .pie-marca em { font-style: normal; color: var(--vino); }
.marca-vela { height: 1.9rem; width: auto; flex: none; }
.pie-copy { max-width: 560px; line-height: 1.5; }
.pie-marca { display: inline-flex; align-items: center; gap: 8px; font: 400 1.2rem/1 var(--f-titulo); color: var(--tinta); }
.pie-marca .marca-vela { height: 1.6rem; }
.menu { display: none; gap: 28px; }
.menu a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--tinta); }
.menu a:hover { color: var(--vino); }
.cabecera-acciones { display: flex; align-items: center; gap: 18px; }
.cabecera-acciones .boton { display: none; }

/* Portada. */
.portada { position: relative; isolation: isolate; overflow: hidden; min-height: max(640px, 100svh); padding: calc(var(--cabecera) + 12px) 0 72px; background: radial-gradient(ellipse 60% 55% at 72% 46%, #fff6f9, #f9e9ee 62%), #f9e9ee; }
.portada-rejilla { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
.portada-texto { position: relative; z-index: 3; display: grid; justify-items: center; gap: 18px; text-align: center; }
.portada-texto .titulo { display: grid; font-size: clamp(2.4rem, 4.3vw, 4.1rem); }
.portada-texto .entradilla { max-width: 520px; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.acciones { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.acciones .boton { width: 100%; }
.confianza { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 0; list-style: none; font-size: 13px; color: var(--suave); }
.confianza li { display: inline-flex; align-items: center; gap: 6px; }
.confianza svg { width: 14px; height: 14px; fill: none; stroke: var(--verde); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.escenario { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: min(340px, 84vw); margin: 22px auto 0; }
.escenario .edad { position: absolute; z-index: 4; top: -2%; left: 50%; translate: -50% 0; }
.portada-pastel { position: relative; z-index: 2; width: 94%; aspect-ratio: 1 / 1; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.portada-pastel img, .portada-pastel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* El póster se ve de inmediato; el video aparece encima cuando empieza a reproducirse. */
.portada-pastel video { opacity: 0; transition: opacity 0.6s var(--ease); }
.portada-pastel.reproduciendo video { opacity: 1; }
.flotante { position: absolute; z-index: 1; height: auto; filter: drop-shadow(0 16px 18px rgba(51, 32, 61, 0.16)); animation-duration: 7s; }
.regalos { left: 6%; bottom: 14%; width: 15%; animation-delay: -1.2s; }
.frasco { right: 4%; bottom: 20%; width: 13%; animation-delay: -3.4s; }
.mensaje-flotante { position: absolute; z-index: 4; left: 50%; bottom: 0; display: grid; gap: 2px; padding: 9px 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 40px -24px rgba(51, 32, 61, 0.45); text-align: center; width: max-content; max-width: 88%; transform: translateX(-50%) rotate(-1.5deg); }
.mensaje-flotante strong { font: 400 clamp(1.1rem, 1.7vw, 1.45rem)/1.2 var(--f-titulo); color: var(--tinta); }
.mensaje-flotante span { font: 400 13px/1.2 var(--f-nota); color: var(--vino); }

/* Secciones. */
.fiesta, .opciones, .mensajes { padding: clamp(84px, 11vw, 140px) 0; background: #fff7f9; }
.escenas { display: flex; gap: 12px; margin: clamp(40px, 5vw, 64px) calc(var(--margen) * -1) 0; padding: 4px var(--margen) 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); scrollbar-width: none; }
.escenas::-webkit-scrollbar { display: none; }
.escenas .escena { flex: 0 0 76%; scroll-snap-align: start; }
.escena .objeto { height: 130px; }
.nota.centro-texto { margin-top: 28px; font-size: 1.25rem; }

.velas-seccion { position: relative; overflow: hidden; padding: clamp(84px, 11vw, 140px) 0; background: linear-gradient(180deg, #f9e9ee, #fdeff3); transition: background-color 0.8s; }
.velas-seccion[data-estado="apagadas"] { background: #f1e7f3; }
.velas-rejilla, .cuenta-rejilla { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.velas-texto, .cuenta-texto { display: grid; justify-items: start; gap: 18px; }
.velas-pastel { order: -1; width: min(420px, 100%); margin-inline: auto; }
.velas-texto .acciones { flex-direction: row; flex-wrap: wrap; width: auto; }
.velas-texto .acciones .boton { width: auto; }
.nota-hecho { min-height: 1.4em; font: 400 1.6rem/1.2 var(--f-titulo); color: var(--vino); }

.cuenta { padding: clamp(84px, 11vw, 140px) 0; background: linear-gradient(180deg, #fdeff3, #f9e9ee); }
.calendario { position: relative; width: min(300px, 80%); margin-inline: auto; aspect-ratio: 1082 / 1200; }
.calendario img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(209, 38, 79, 0.16)); animation: balanceo 6s ease-in-out infinite; }
.calendario-hoja { position: absolute; inset: 33% 20% 22% 22%; display: grid; place-items: center; animation: balanceo 6s ease-in-out infinite; }
.calendario-hoja strong { font: 400 clamp(4rem, 12vw, 8.5rem)/1 var(--f-titulo); color: var(--vino); font-variant-numeric: tabular-nums; }
.cuenta-texto .campo { width: min(100%, 280px); }
.resultado { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 var(--f-titulo); color: var(--tinta); }
@keyframes balanceo { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-10px); } }

.mensajes-rejilla { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 560px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; }
.mensaje { display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; padding: 26px 24px 22px; border-radius: var(--radio); background: var(--tinte); box-shadow: var(--sombra-tarjeta); }
.mensaje .quien { font: 700 12px/1.3 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vino); }
.mensaje blockquote { position: relative; margin: 0; padding-top: 26px; font-size: 1.03rem; line-height: 1.62; color: var(--tinta); }
.mensaje blockquote::before { content: "“"; position: absolute; top: -6px; left: -2px; font: 400 3.2rem/1 var(--f-titulo); color: var(--vino); opacity: 0.85; }
.mensaje .cambia { font-size: 13.5px; line-height: 1.5; color: var(--suave); }
.copiar { justify-self: start; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(51, 32, 61, 0.16); border-radius: 999px; background: var(--blanco); color: var(--tinta); font: 600 13.5px/1 var(--f-ui); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.copiar:hover { border-color: var(--vino); }
.copiar[data-copiado] { background: #e2f7ef; border-color: var(--verde); }

.opciones-rejilla { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 560px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; align-items: stretch; }
.opcion { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 26px 26px; border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px); background: var(--blanco); box-shadow: 0 24px 50px -40px rgba(51, 32, 61, 0.5); }
.opcion.destacada { box-shadow: 0 36px 70px -40px rgba(209, 38, 79, 0.55); }
.destacada .opcion-objeto { position: absolute; top: 18px; right: 18px; height: 86px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(51, 32, 61, 0.16)); }
.opcion h3 { margin-top: 18px; padding-right: 64px; font: 400 1.85rem/1.05 var(--f-titulo); color: var(--tinta); }
.opcion-cuerpo { font-size: 14.5px; line-height: 1.55; color: var(--suave); }
.opcion-precio { display: grid; gap: 2px; min-height: 70px; }
.opcion-precio span { font: 400 clamp(1.6rem, 2.6vw, 2rem)/1.1 var(--f-titulo); color: var(--tinta); }
.opcion-precio small { font-size: 13px; color: var(--suave); }
.opcion-lista { display: grid; gap: 9px; margin: 0; padding: 14px 0 6px; list-style: none; border-top: 1px solid var(--linea); }
.opcion-lista li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; }
.opcion-lista svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--verde); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.opcion-gratis { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--vino) 7%, var(--blanco)); font-size: 14px; line-height: 1.45; color: var(--tinta); }
.opcion .boton { width: 100%; }

.empresas { padding: clamp(84px, 10vw, 140px) 0; }
.paquetes-rejilla { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; }
.paquetes-rejilla .opcion h3 { margin-top: 0; padding-right: 0; }
.paquetes-rejilla .opcion-precio { min-height: 0; }
.paquetes-nota { max-width: 520px; margin: 28px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--suave); }
.paquetes-nota a, .pie-copy a { color: inherit; }
@media (min-width: 900px) { .paquetes-rejilla { grid-template-columns: repeat(3, 1fr); max-width: 1040px; } }

.faq { padding: clamp(84px, 10vw, 140px) 0; background: #fff7f9; }
.faq-rejilla { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-cabeza { display: grid; gap: 18px; }
.faq-adorno { display: none; }
.faq-lista { border-top: 1px solid var(--linea); }
.faq-lista details { border-bottom: 1px solid var(--linea); }
.faq-lista summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none; font-size: clamp(1rem, 1.3vw, 1.075rem); font-weight: 600; line-height: 1.4; color: var(--tinta); }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--vino); stroke-width: 1.8; stroke-linecap: round; transition: transform 0.35s var(--ease); }
.faq-lista details[open] summary svg { transform: rotate(45deg); }
.faq-lista p { padding: 0 40px 22px 0; font-size: 15.5px; line-height: 1.7; color: var(--suave); }

.cierre { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 150px) 0 clamp(48px, 6vw, 72px); background: radial-gradient(ellipse 70% 60% at 50% 40%, #fff6f9, #f9e9ee 70%); text-align: center; }
.cierre-interior { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; max-width: 640px; margin-inline: auto; padding-inline: var(--margen); }
.cierre-pastel { width: 120px; height: auto; filter: drop-shadow(0 16px 16px rgba(209, 38, 79, 0.18)); }
.cierre-precio { min-height: 1.5em; font-size: 14px; font-weight: 600; color: var(--suave); }
.cierre-globos, .cierre-regalos { position: absolute; z-index: 1; height: auto; filter: drop-shadow(0 18px 18px rgba(51, 32, 61, 0.14)); }
.cierre-globos { top: 4%; left: 6%; width: 74px; }
.cierre-regalos { bottom: 30%; right: 7%; width: 64px; }

.pie { display: grid; justify-items: center; gap: 4px; padding: 28px var(--margen) 36px; background: #f9e9ee; font-size: 13px; color: var(--suave); text-align: center; }

/* Páginas cortas: crear y entrar. */
.corta { min-height: 100svh; display: grid; grid-template-rows: 1fr; background: radial-gradient(ellipse 60% 55% at 72% 46%, #fff6f9, #f9e9ee 62%), #f9e9ee; }
.corta main { display: grid; align-content: center; justify-items: start; gap: 22px; padding: calc(var(--cabecera) + 40px) var(--margen) 64px; width: min(760px, 100%); margin-inline: auto; }

@media (min-width: 40rem) {
  .acciones { flex-direction: row; width: auto; }
  .acciones .boton { width: auto; }
  .mensajes-rejilla { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .escenas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .escenas .escena { flex: none; }
}
@media (min-width: 62rem) {
  .menu { display: flex; }
  .cabecera-acciones .boton { display: inline-flex; }
  .portada { padding: calc(var(--cabecera) + 36px) 0 92px; }
  .portada-rejilla { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); min-height: calc(max(640px, 100svh) - var(--cabecera) - 128px); }
  .portada-texto { justify-items: start; text-align: left; }
  .confianza { justify-content: flex-start; }
  .escenario { aspect-ratio: 1 / 1; max-height: 78svh; width: 100%; margin: 0; }
  .escenario .edad { top: 0; padding-left: 14px; }
  .mensaje-flotante { bottom: 3%; padding: 12px 20px 13px; }
  .mensaje-flotante span { font-size: 15px; }
  .velas-rejilla, .cuenta-rejilla { grid-template-columns: 1fr 1fr; }
  .velas-pastel { order: 0; width: min(560px, 100%); }
  .calendario { width: min(440px, 100%); }
  .escenas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .escena .objeto { height: 150px; }
  .faq-rejilla { grid-template-columns: 0.8fr 1.2fr; }
  .faq-cabeza { position: sticky; top: calc(var(--cabecera) + 32px); }
  .faq-adorno { display: block; width: min(220px, 40%); height: auto; margin-top: 12px; filter: drop-shadow(0 10px 10px rgba(74, 48, 32, 0.14)); }
  .opcion.destacada { transform: translateY(-10px); }
  .cierre-globos { top: 8%; width: clamp(90px, 12vw, 170px); }
  .cierre-regalos { width: clamp(80px, 10vw, 150px); }
}
/* Cómo funciona. */
.pasos { padding: clamp(60px, 8vw, 100px) 0; background: var(--lino); }
.pasos-lista { display: grid; gap: 28px; max-width: 560px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; list-style: none; }
.pasos-lista li { display: grid; gap: 8px; }
.pasos-lista h3 { font: 400 1.4rem/1.15 var(--f-titulo); }
.pasos-lista p { font-size: 15px; line-height: 1.6; color: var(--suave); }
@media (min-width: 40rem) { .pasos-lista { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
@media (prefers-reduced-motion: reduce) { .js [data-revelar] { opacity: 1; transform: none; } .calendario img, .calendario-hoja { animation: none; } }

/* «Ver un ejemplo»: una guía corta según el dispositivo y, en pantallas grandes, un código para abrirlo en el celular. */
.ejemplo-guia { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.ejemplo-guia[hidden], .ejemplo-qr[hidden] { display: none; }
.ejemplo-guia p { margin: 0; max-width: 34ch; font: 600 14px/1.45 var(--f-ui); color: var(--suave); }
.ejemplo-qr { display: grid; justify-items: center; gap: 4px; margin: 0; }
.ejemplo-qr > div { width: 92px; height: 92px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(51, 32, 61, 0.1), 0 12px 22px -16px rgba(51, 32, 61, 0.5); }
.ejemplo-qr svg { display: block; width: 100%; height: 100%; }
.ejemplo-qr figcaption { font: 600 11px/1.2 var(--f-ui); color: var(--suave); }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 2px; }
.pie-legal a { color: var(--vino); font-weight: 600; text-underline-offset: 3px; }