* {
  box-sizing: border-box;
}

@property --stage-wrap-a {
  syntax: '<color>';
  inherits: true;
  initial-value: #2b241e;
}

@property --stage-wrap-b {
  syntax: '<color>';
  inherits: true;
  initial-value: #090807;
}

@property --stage-main {
  syntax: '<color>';
  inherits: true;
  initial-value: #806b4e;
}

@property --stage-dark {
  syntax: '<color>';
  inherits: true;
  initial-value: #17120f;
}

:root {
  --stage-wrap-a: #2b241e;
  --stage-wrap-b: #090807;
  --stage-main: #806b4e;
  --stage-dark: #17120f;
  --stage-glow-rgb: 255, 226, 170;
  --polaroid-padding: 10px;
  --pulse-duration: 2.7s;
  --scene-top-offset: clamp(16px, 2.3cqh, 25px);
  --hero-top-offset: clamp(-28px, -2.6cqh, -12px);
  --qr-slot-size: clamp(60px, 4.8125cqw, 139px);
  --video-darkness: .5;
  --visual-pulse-intensity: .55;
  --memory-duration: 36s;
  --rise-distance: -104cqh;
  transition:
    --stage-wrap-a 4s ease-in-out,
    --stage-wrap-b 4s ease-in-out,
    --stage-main 4s ease-in-out,
    --stage-dark 4s ease-in-out;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  background: #061426;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  overflow-x: hidden;
}

body {
  font-family: "Libre Baskerville", Georgia, 'Times New Roman', serif;
  color: #f4f0ea;
}

.app {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 100vh;
}

.panel {
  background: #181512;
  border-right: 1px solid rgba(255,255,255,.12);
  padding: 22px;
  max-height: 100vh;
  overflow-y: auto;
}

.panel h1 {
  margin: 0 0 20px;
  font-size: 24px;
}

.panel h2 {
  margin-top: 26px;
  font-size: 18px;
}

label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 14px;
  opacity: .85;
}

input,
textarea,
select,
button {
  width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 10px;
  background: #27221e;
  color: #fff;
  font-size: 14px;
}

input[type="color"] {
  height: 42px;
  padding: 4px;
}

.color-preview {
  position: relative;
  height: 82px;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, var(--stage-main), var(--stage-dark) 62%),
    radial-gradient(circle at center, var(--stage-wrap-a), var(--stage-wrap-b) 72%);
  box-shadow: inset 0 0 28px rgba(0,0,0,.38), 0 10px 24px rgba(0,0,0,.22);
  overflow: hidden;
}

.color-preview span {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  letter-spacing: .02em;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.toggle-row input {
  width: auto;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.custom-phrases-panel textarea {
  min-height: 180px;
  line-height: 1.35;
}

.key-config-panel {
  margin-top: 24px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.key-config-panel:not(#keyConfigPanel) {
  display: none;
}

.key-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.key-grid label {
  margin: 0;
  font-size: 12px;
  color: #d8cbb7;
}

.key-grid input {
  margin-top: 5px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}

audio {
  width: 100%;
  margin-top: 8px;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

button {
  cursor: pointer;
  background: linear-gradient(180deg, #7a694f, #4d4031);
  font-weight: bold;
}

button:hover {
  filter: brightness(1.12);
}

button:disabled {
  cursor: wait;
  opacity: .62;
}

.secondary-btn {
  margin-top: 10px;
  background: #332c25;
  font-weight: normal;
}

.hint,
.status {
  font-size: 13px;
  line-height: 1.4;
}

.hint {
  opacity: .7;
}

.status {
  min-height: 18px;
  margin: 8px 0 0;
  color: #d8c79d;
}

.stage-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px;
  background: radial-gradient(circle at center, var(--stage-wrap-a), var(--stage-wrap-b) 72%);
  transition: background 4s ease-in-out;
  overflow: hidden;
}

.stage {
  position: relative;
  width: min(100%, calc((100vh - 48px) * 16 / 9), clamp(1200px, calc(1200px + (100vw - 1920px) * .7083), 2560px));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.58)),
    radial-gradient(circle at 50% 22%, var(--stage-main), var(--stage-dark) 66%);
  box-shadow: 0 28px 80px rgba(0,0,0,.6);
  isolation: isolate;
  container-type: size;
  transform-origin: center center;
  transition: background 4s ease-in-out;
}

.vertical-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app:fullscreen .panel {
  display: none;
}

.app.viewer-only .panel {
  display: none;
}

.app:fullscreen {
  display: block;
  background: #050403;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.app.viewer-only {
  display: block;
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #050403;
}

.app:fullscreen .stage-wrap {
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

.app.viewer-only .stage-wrap {
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

.app:fullscreen .stage {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}

.app.viewer-only .stage {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}

.stage.intro-active .funeral-brand,
.stage.intro-active .photo-frame,
.stage.intro-active .hero h2,
.stage.intro-active .stage-dates,
.stage.intro-active .premium-separator,
.stage.intro-active .long-phrase,
.stage.intro-active .memory-author-line,
.stage.intro-active .qr-slot,
.stage.intro-active .powered-logo,
.stage.intro-active .background-glow,
.stage.intro-active .ash-layer,
.stage.intro-active .music-layer,
.stage.intro-active .religious-layer,
.stage.intro-active .soft-phrase-layer,
.stage.intro-active .memory-layer {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 2.7s ease, filter 2.7s ease, transform 2.7s ease;
}

.stage.intro-blanking .funeral-brand,
.stage.intro-blanking .photo-frame,
.stage.intro-blanking .hero h2,
.stage.intro-blanking .stage-dates,
.stage.intro-blanking .premium-separator,
.stage.intro-blanking .long-phrase,
.stage.intro-blanking .memory-author-line,
.stage.intro-blanking .qr-slot,
.stage.intro-blanking .powered-logo,
.stage.intro-blanking .background-glow,
.stage.intro-blanking .ash-layer,
.stage.intro-blanking .music-layer,
.stage.intro-blanking .religious-layer,
.stage.intro-blanking .soft-phrase-layer,
.stage.intro-blanking .memory-layer {
  opacity: 0 !important;
  filter: blur(8px) !important;
  transition: none !important;
}

.stage.intro-logo .funeral-brand {
  opacity: .92;
  filter: blur(0);
}

.stage.intro-obituary .photo-frame {
  opacity: .98;
  filter: blur(0);
}

.stage.intro-text .hero h2,
.stage.intro-text .stage-dates,
.stage.intro-text .premium-separator,
.stage.intro-text .long-phrase,
.stage.intro-text .memory-author-line {
  opacity: 1;
  filter: blur(0);
}

.stage.intro-effects .qr-slot,
.stage.intro-effects .powered-logo,
.stage.intro-effects .background-glow,
.stage.intro-effects .ash-layer,
.stage.intro-effects .music-layer,
.stage.intro-effects .religious-layer,
.stage.intro-effects .soft-phrase-layer,
.stage.intro-effects .memory-layer {
  opacity: 1;
  filter: blur(0);
}

.stage.intro-effects .qr-slot {
  opacity: .72;
}

.stage.remote-mode {
  background: #000;
}

.stage.remote-mode .funeral-brand,
.stage.remote-mode .photo-frame,
.stage.remote-mode .hero h2,
.stage.remote-mode .stage-dates,
.stage.remote-mode .premium-separator,
.stage.remote-mode .long-phrase,
.stage.remote-mode .memory-author-line,
.stage.remote-mode .qr-slot,
.stage.remote-mode .background-glow,
.stage.remote-mode .ash-layer,
.stage.remote-mode .music-layer,
.stage.remote-mode .religious-layer,
.stage.remote-mode .soft-phrase-layer,
.stage.remote-mode .memory-layer {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.8s ease, filter 1.8s ease;
}

.stage.remote-mode .powered-logo {
  opacity: .64;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.58));
}

.stage.remote-obituary {
  background:
    linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.58)),
    radial-gradient(circle at 50% 22%, var(--stage-main), var(--stage-dark) 66%);
}

.stage.remote-obituary .photo-frame,
.stage.remote-name .hero h2,
.stage.remote-dates .stage-dates,
.stage.remote-dates .premium-separator,
.stage.remote-dates .long-phrase,
.stage.remote-dates .qr-slot,
.stage.remote-logo .funeral-brand {
  opacity: 1;
  filter: blur(0);
}

.stage.remote-dates .qr-slot {
  opacity: .72;
}

.stage.remote-control-qr-visible .qr-slot {
  opacity: .72 !important;
  filter: blur(0) !important;
}

.stage.remote-qr-hidden .qr-slot {
  opacity: 0 !important;
  filter: blur(8px) !important;
}

.stage.remote-powered-hidden .powered-logo {
  opacity: 0 !important;
  filter: blur(8px) !important;
}

.stage.central-phrase-visible .long-phrase:not(.phrase-fade-out) {
  opacity: 1;
  filter: blur(0);
}

.stage.central-phrase-visible .memory-author-line.visible:not(.phrase-fade-out) {
  opacity: 1;
  filter: blur(0);
}

.stage.orientation-vertical.central-phrase-visible .qr-slot {
  opacity: .72 !important;
  filter: blur(0) !important;
}

.stage.orientation-vertical.central-phrase-visible .powered-logo {
  opacity: .64 !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.58)) !important;
}

.stage.orientation-vertical.remote-dates .qr-slot,
.stage.orientation-vertical.intro-effects .qr-slot {
  opacity: .72 !important;
  filter: blur(0) !important;
}

.stage.orientation-vertical.remote-mode .powered-logo,
.stage.orientation-vertical.intro-effects .powered-logo {
  opacity: .64 !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.58)) !important;
}

.stage.remote-mode .music-layer,
.stage.remote-mode .ash-layer,
.stage.remote-mode .soft-phrase-layer {
  filter: none;
}

.stage.remote-mode .music-layer:has(.music-note),
.stage.remote-mode .ash-layer:has(.ash-particle),
.stage.remote-mode .soft-phrase-layer:has(.soft-phrase) {
  opacity: 1;
}

.stage.effects-visible .music-layer,
.stage.effects-visible .ash-layer,
.stage.effects-visible .soft-phrase-layer,
.stage.effects-visible .religious-layer {
  opacity: 1 !important;
  filter: none !important;
}

.stage.effects-visible .light-pulse {
  z-index: 28;
}

.stage.effects-visible .music-layer,
.stage.effects-visible .ash-layer,
.stage.effects-visible .religious-layer {
  z-index: 27;
}

.stage.effects-visible .soft-phrase-layer {
  z-index: 80;
}

.stage.remote-memories-hidden .memory-layer,
.stage.remote-memories-hidden .memory-card,
.stage.remote-memories-hidden .memory-connector {
  opacity: 0 !important;
  filter: blur(8px);
  transition: opacity 3s ease, filter 3s ease;
}

.stage.remote-mode:not(.remote-memories-hidden) .memory-layer {
  opacity: 1;
  filter: none;
  transition: opacity 3s ease, filter 3s ease;
}

.stage.remote-mode .memory-card,
.stage.remote-mode .memory-connector {
  transition: opacity 3s ease, filter 3s ease;
}

.stage.memory-fade-hidden .memory-layer,
.stage.memory-fade-hidden .memory-card,
.stage.memory-fade-hidden .memory-connector {
  opacity: 0 !important;
  filter: blur(8px);
  transition: opacity 3s ease, filter 3s ease;
}

.stage.memory-fade-visible .memory-layer,
.stage.memory-fade-visible .memory-card,
.stage.memory-fade-visible .memory-connector {
  transition: opacity 3s ease, filter 3s ease;
}

.stage.remote-portrait-focus .funeral-brand,
.stage.remote-portrait-focus .hero h2,
.stage.remote-portrait-focus .stage-dates,
.stage.remote-portrait-focus .premium-separator,
.stage.remote-portrait-focus .long-phrase,
.stage.remote-portrait-focus .memory-author-line,
.stage.remote-portrait-focus .qr-slot,
.stage.remote-portrait-focus .powered-logo,
.stage.remote-portrait-focus .background-glow,
.stage.remote-portrait-focus .ash-layer,
.stage.remote-portrait-focus .music-layer,
.stage.remote-portrait-focus .religious-layer,
.stage.remote-portrait-focus .soft-phrase-layer,
.stage.remote-portrait-focus .memory-layer,
.stage.remote-portrait-focus .memory-connector {
  opacity: 0 !important;
  filter: blur(8px);
}

.stage.remote-portrait-focus .photo-frame {
  opacity: .98 !important;
  filter: blur(0) !important;
}

.remote-fade-out {
  opacity: 0 !important;
  filter: blur(10px) !important;
  transition: opacity .8s ease, filter .8s ease;
}

.background-glow {
  display: none;
  pointer-events: none;
}

.video-background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 5s ease;
}

.video-background-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--video-darkness, .5));
}

.video-background-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.video-background-layer video.is-active {
  opacity: 1;
}

.stage.video-background-visible .video-background-layer {
  opacity: 1;
}

.stage.video-background-ending .video-background-layer {
  opacity: 0;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle, transparent 38%, rgba(0,0,0,.78) 100%);
  pointer-events: none;
}

.funeral-brand {
  position: absolute;
  top: var(--scene-top-offset);
  left: 50%;
  z-index: 22;
  display: none;
  width: clamp(107px, 10.302cqw, 197px);
  transform: translateX(-50%);
  pointer-events: none;
}

.funeral-brand.visible {
  display: block;
}

.funeral-brand img {
  display: block;
  width: 100%;
  max-height: clamp(67px, 11.6cqh, 126px);
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.58));
  opacity: .92;
}

.soft-phrase-layer,
.ash-layer,
.music-layer,
.religious-layer,
.photo-motion-layer,
.memory-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.soft-phrase-layer {
  z-index: 80;
}

.ash-layer,
.music-layer,
.religious-layer {
  z-index: 17;
}

.photo-motion-layer,
.memory-layer {
  z-index: 5;
}

.stage.orientation-vertical .memories-layer {
  position: absolute;
  top: 240px;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 420px;
  overflow: visible;
  pointer-events: none;
  contain: none;
  z-index: 24;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(86px, 13cqh, 225px) clamp(20px, 3.33cqw, 96px) clamp(20px, 3.33cqw, 96px);
  pointer-events: none;
  transform: translateY(var(--hero-top-offset));
}

.stage.orientation-vertical {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vh;
  height: 100vw;
  width: 100dvh;
  height: 100dvw;
  aspect-ratio: auto;
  border-radius: 0;
  max-width: none;
  max-height: none;
  overflow: hidden;
  box-shadow: none;
  z-index: 20;
  transform-origin: center center;
  --rise-distance: -170cqh;
}

.rotated-tv-stage {
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}

.app:fullscreen .stage.orientation-vertical {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vh !important;
  height: 100vw !important;
  width: 100dvh !important;
  height: 100dvw !important;
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
}

.app.viewer-only .stage.orientation-vertical {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vh !important;
  height: 100vw !important;
  width: 100dvh !important;
  height: 100dvw !important;
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
}

.stage.orientation-vertical .hero {
  transform: translateY(clamp(70px, 9cqh, 190px));
}

.stage.orientation-vertical .qr-box,
.stage.orientation-vertical .qr-slot {
  left: 50%;
  bottom: clamp(78px, 7cqw, 130px);
  width: clamp(104px, 6.4cqh, 150px);
  height: clamp(104px, 6.4cqh, 150px);
  z-index: 33;
  transform: translateX(-50%);
}

.stage.orientation-vertical .powered-by-tellmebye,
.stage.orientation-vertical .powered-logo {
  left: 50%;
  bottom: 42px;
  z-index: 34;
  transform: translateX(-50%);
  text-align: center;
}

/* ============================================================
   VERTICAL: agrandar el bloque hero + QR (jul-2026, Carlos).
   En vertical el contenedor mide 1080 de ancho (cqw), la mitad
   que en horizontal (1920), por eso todo lo dimensionado en
   `cqw` salía ~56% mas pequeño ("todo muy pequeño"). Reescalamos
   con `cqh` (alto = 1920 en vertical) usando los MISMOS
   coeficientes que el horizontal -> se ve al mismo tamaño.
   Solo afecta a `.orientation-vertical`; el horizontal NO se toca.
   ============================================================ */
.stage.orientation-vertical .photo-frame {
  width: clamp(300px, 19.17cqh, 552px);
  height: clamp(300px, 19.17cqh, 552px);
}
.stage.orientation-vertical .hero h2 {
  font-size: clamp(52px, 3.854cqh, 111px);
  max-width: min(92cqw, 1000px);
}
.stage.orientation-vertical .stage-dates {
  font-size: clamp(20px, 1.25cqh, 36px);
}
.stage.orientation-vertical .premium-separator {
  width: min(64cqw, 640px);
}
.stage.orientation-vertical .long-phrase {
  max-width: min(92cqw, 1000px);
  font-size: clamp(
    calc(30px * var(--central-phrase-scale, 1)),
    calc(2.188cqh * var(--central-phrase-scale, 1)),
    calc(63px * var(--central-phrase-scale, 1))
  );
}
.stage.orientation-vertical .memory-author-line {
  font-size: clamp(19px, 1.146cqh, 33px);
}
.stage.orientation-vertical .funeral-brand {
  width: clamp(150px, 10.302cqh, 200px);
}
.stage.orientation-vertical .funeral-brand img {
  max-height: clamp(96px, 11.6cqh, 150px);
}
.stage.orientation-vertical .powered-logo {
  width: clamp(120px, 7.188cqh, 210px);
  max-height: clamp(30px, 4.07cqh, 66px);
}

.photo-frame {
  position: relative;
  z-index: 2;
  width: clamp(208px, 19.17cqw, 552px);
  height: clamp(208px, 19.17cqw, 552px);
  border-radius: 50%;
  padding: 10px;
  background: linear-gradient(145deg, #fff9ea, #b8a276);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 45px rgba(255,220,160,.18);
  overflow: hidden;
  opacity: .98;
  transform-style: preserve-3d;
}

.photo-frame.fade-change {
  animation: portraitFadeChange 2.25s ease-in-out;
}

.photo-frame img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 50%;
  object-fit: cover;
  opacity: 1;
  will-change: opacity, filter, transform;
}

.photo-frame img.portrait-next {
  opacity: 0;
  filter: blur(8px) brightness(1.08);
  transform: scale(1.018);
  animation: none;
}

.photo-frame img.portrait-next.portrait-enter {
  animation: portraitImageIn 2.6s ease forwards;
}

.photo-frame img.portrait-exit {
  animation: portraitImageOut 2.6s ease forwards;
}

.photo-placeholder {
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
  font-size: 15px;
  opacity: .8;
  padding: 18px;
}

.hero h2 {
  margin: 12px 0 2px;
  max-width: min(86cqw, clamp(900px, 46.875cqw, 1350px));
  color: #fff8e9;
  font-family: "Playfair Display", "Libre Baskerville", Georgia, serif;
  font-size: clamp(34px, 3.854cqw, 111px);
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 5px 24px rgba(0,0,0,.82), 0 0 18px rgba(255,232,186,.22);
  animation: titleDrift 10s ease-in-out infinite;
}

.stage-dates {
  margin-top: clamp(3px, .7cqh, 8px);
  color: rgba(255,244,220,.86);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(15px, 1.25cqw, 36px);
  line-height: 1.2;
  letter-spacing: .04em;
  text-shadow: 0 4px 16px rgba(0,0,0,.78);
}

.premium-separator {
  position: relative;
  width: min(58cqw, clamp(520px, 27.084cqw, 780px));
  height: 8px;
  margin: clamp(12px, 1.8cqh, 24px) 0 clamp(10px, 1.6cqh, 20px);
}

.premium-separator::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,245,220,.18) 18%, rgba(255,255,255,.72) 50%, rgba(255,245,220,.18) 82%, transparent);
  box-shadow: 0 0 14px rgba(255,228,170,.28);
}

.premium-separator::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255,248,226,.72);
  background: rgba(255,236,190,.28);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 18px rgba(255,230,180,.42);
}

.memory-connector {
  position: absolute;
  z-index: 4;
  height: 1px;
  pointer-events: none;
  transform-origin: left center;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,244,218,.12), rgba(255,244,218,.62) 50%, rgba(255,244,218,.12));
  background-size: auto;
  box-shadow: 0 0 7px rgba(255,236,190,.18);
  transform: rotate(var(--connector-angle, 0deg)) scaleX(1);
  transition: none;
  will-change: left, top, width, transform, opacity;
}

.memory-connector.visible {
  opacity: .56;
}

.memory-connector.active {
  height: 1px;
  opacity: .72 !important;
  background: linear-gradient(90deg, rgba(255,244,218,.14), rgba(255,244,218,.72) 50%, rgba(255,244,218,.14));
  box-shadow: 0 0 8px rgba(255,236,190,.22);
  overflow: visible;
  transition: height .6s ease, box-shadow .6s ease;
}

.stage.central-phrase-visible .memory-connector.active {
  height: 3px;
  background: linear-gradient(90deg, rgba(255,244,218,.2), rgba(255,247,224,.92) 50%, rgba(255,244,218,.2));
  box-shadow: 0 0 14px rgba(255,236,190,.4);
}

.memory-connector.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(255,235,188,.86) 42%, rgba(255,220,150,.18) 72%, transparent 100%);
  box-shadow: 0 0 12px rgba(255,255,255,.66), 0 0 24px rgba(255,226,150,.36);
  transform: translate(-50%, -50%);
  animation: connectorLightDot 2.5s ease-in-out infinite;
}

.memory-connector.fade-out {
  opacity: 0;
  transition: opacity 1.8s ease;
}

.long-phrase {
  max-width: min(92cqw, clamp(1080px, 56.25cqw, 1620px));
  text-shadow: 0 4px 18px rgba(0,0,0,.84);
}

.long-phrase {
  display: block;
  height: clamp(100px, 11.2cqh, 182px);
  min-height: clamp(100px, 11.2cqh, 182px);
  max-height: clamp(100px, 11.2cqh, 182px);
  color: #f9edcf;
  font-family: "Playfair Display", "Libre Baskerville", Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(
    calc(21px * var(--central-phrase-scale, 1)),
    calc(2.188cqw * var(--central-phrase-scale, 1)),
    calc(63px * var(--central-phrase-scale, 1))
  );
  line-height: 1.08;
  letter-spacing: .01em;
  opacity: .94;
  text-wrap: balance;
  overflow: hidden;
  transition: opacity 4.2s ease, filter 4.2s ease, transform 4.2s ease;
}

.long-phrase.phrase-fade-out {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
}

.memory-author-line {
  min-height: 1.4em;
  margin-top: clamp(6px, .8cqh, 10px);
  color: rgba(255,244,220,.86);
  font-family: "Playfair Display", "Libre Baskerville", Georgia, serif;
  font-weight: 600;
  font-size: clamp(14px, 1.146cqw, 33px);
  line-height: 1.25;
  text-shadow: 0 4px 16px rgba(0,0,0,.8);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition: opacity 4.2s ease, filter 4.2s ease, transform 4.2s ease;
}

.memory-author-line.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.stage.remote-mode .memory-author-line.visible {
  opacity: 1;
  filter: blur(0);
}

.powered-logo {
  position: absolute;
  left: 50%;
  bottom: clamp(4px, .9cqh, 16px);
  z-index: 34;
  display: block;
  width: clamp(82px, 7.188cqw, 207px);
  max-height: clamp(22px, 4.07cqh, 66px);
  object-fit: contain;
  opacity: .64;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.58));
  transform: translateX(-50%);
  pointer-events: none;
}

.qr-slot {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 3.8cqh, 64px);
  z-index: 33;
  width: var(--qr-slot-size);
  height: var(--qr-slot-size);
  border: 1px solid rgba(255,244,220,.46);
  border-radius: 6px;
  background:
    radial-gradient(circle, #111 0 34%, transparent 35%) 22% 78% / 24% 24% no-repeat,
    linear-gradient(#111 0 0) 12% 12% / 24% 24% no-repeat,
    linear-gradient(#111 0 0) 88% 12% / 24% 24% no-repeat,
    linear-gradient(#111 0 0) 12% 88% / 24% 24% no-repeat,
    repeating-linear-gradient(90deg, #111 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, rgba(17,17,17,.92) 0 6px, transparent 6px 12px),
    #f7f2e6;
  background-blend-mode: normal, normal, normal, multiply, normal, normal;
  box-shadow: inset 0 0 0 7px #f7f2e6, 0 8px 24px rgba(0,0,0,.22);
  transform: translateX(-50%);
  opacity: .72;
  pointer-events: none;
}

.qr-slot::before,
.qr-slot::after {
  content: "";
  position: absolute;
  background: #f7f2e6;
  border: 3px solid #111;
  box-shadow: inset 0 0 0 5px #111, inset 0 0 0 10px #f7f2e6;
}

.qr-slot::before {
  left: 10%;
  top: 10%;
  width: 24%;
  height: 24%;
}

.qr-slot::after {
  right: 10%;
  top: 10%;
  width: 24%;
  height: 24%;
}

.qr-slot.has-remote-qr {
  padding: 6px;
  background: #f7f2e6;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.qr-slot.has-remote-qr::before,
.qr-slot.has-remote-qr::after {
  display: none;
}

.qr-slot.has-remote-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.memory-author-line.phrase-fade-out {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
}

.long-word {
  display: inline-block;
  line-height: 1.16;
  opacity: 0;
  filter: blur(8px);
  transition: opacity .62s ease, filter .62s ease;
}

.long-word.visible {
  opacity: 1;
  filter: blur(0);
}

.light-pulse {
  position: absolute;
  left: var(--pulse-x, 50%);
  top: var(--pulse-y, 42%);
  width: var(--pulse-size, 230px);
  height: var(--pulse-size, 230px);
  margin-left: calc(var(--pulse-size, 230px) / -2);
  margin-top: calc(var(--pulse-size, 230px) / -2);
  z-index: 28;
  background:
    radial-gradient(circle, rgba(255,255,255,.78), rgba(255,238,198,.5) 15%, transparent 31%),
    radial-gradient(circle, transparent 35%, rgba(255,255,255,.72) 38%, rgba(255,226,170,.34) 44%, transparent 54%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(255,255,255,.18), 0 0 58px rgba(255,220,150,.16);
}

.light-pulse.active {
  animation: pulse var(--pulse-duration) ease-out;
}

.soft-phrase {
  position: absolute;
  max-width: min(40cqw, 560px);
  color: rgba(255,248,230,.92);
  font-size: var(--size);
  line-height: .92;
  white-space: normal;
  overflow-wrap: normal;
  text-align: center;
  filter: blur(var(--blur));
  opacity: 0;
  text-shadow: 0 0 24px rgba(255,255,255,.58), 0 0 52px rgba(255,225,170,.56), 0 4px 22px rgba(0,0,0,.72);
  animation: softPhraseDrift var(--duration) ease-in-out forwards;
  will-change: transform, opacity, filter;
}

.soft-phrase.stacked-soft-phrase {
  max-width: min(22cqw, 300px);
  max-height: 72cqh;
  font-size: clamp(64px, 7cqw, var(--size));
  line-height: 1.02;
  padding-top: .16em;
  overflow: visible;
  white-space: pre-line;
  overflow-wrap: normal;
  word-break: normal;
}

.stage.orientation-vertical .soft-phrase.stacked-soft-phrase {
  max-width: 280px;
  max-height: 62cqh;
  font-size: clamp(58px, 6.4cqh, var(--size));
}

.soft-phrase.soft-phrase-exit {
  animation: none !important;
  opacity: 0 !important;
  filter: blur(10px) !important;
  transform: translate3d(var(--drift-x-end), -28px, 0) scale(1.04) !important;
  transition: opacity 4.2s ease, filter 4.2s ease, transform 4.2s ease;
}

.religious-symbol {
  position: absolute;
  bottom: -48px;
  color: rgba(255,238,202,.62);
  font-size: var(--size);
  text-shadow: 0 0 18px rgba(255,232,180,.28);
  opacity: 0;
  animation: noteRise var(--duration) ease-in-out forwards;
}

/* Corazones que suben (antes puntos redondos). Mismo sistema: ashRise + sparkle, --size, --drift.
   El punto era un círculo con radial-gradient; ahora es el carácter ♥ con font-size y glow por
   text-shadow. font-size = --size * 2.2 para que el corazón se lea (el punto de 2px valía; el corazón no). */
.ash-particle {
  position: absolute;
  bottom: -18px;
  font-size: calc(var(--size) * 2.2);
  line-height: 1;
  color: rgba(255,250,238,.96);
  text-shadow: 0 0 8px rgba(255,255,255,.82), 0 0 20px rgba(255,255,255,.42), 0 0 34px rgba(255,232,190,.24);
  opacity: 0;
  animation:
    ashRise var(--duration) linear forwards,
    ashSparkle var(--sparkle-duration) ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.ash-particle.foreground {
  z-index: 3;
  color: rgba(255,255,255,1);
  text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.64), 0 0 46px rgba(255,255,255,.28);
  mix-blend-mode: screen;
  animation:
    ashRise var(--duration) linear forwards,
    foregroundSparkle var(--sparkle-duration) ease-in-out infinite;
}

.music-note {
  position: absolute;
  bottom: -52px;
  color: rgba(245,226,184,.78);
  font-size: var(--size);
  text-shadow: 0 0 18px rgba(255,222,164,.32);
  opacity: 0;
  animation: noteRise var(--duration) ease-in-out forwards;
  will-change: transform, opacity;
}

.music-note.manual-note {
  bottom: var(--staff-bottom, 12cqh);
  color: rgba(255,244,220,.9);
  text-shadow: 0 0 22px rgba(255,244,220,.44), 0 0 46px rgba(255,224,160,.25);
  animation-name: manualNoteRise;
}

@keyframes manualNoteRise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-2deg) scale(.96); }
  12% { opacity: .98; transform: translate3d(0, -1.2cqh, 0) rotate(-2deg) scale(1); }
  58% { opacity: .9; transform: translate3d(calc(var(--drift) * .12), -5.2cqh, 0) rotate(calc(var(--rotate-end) * .18)) scale(1); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift) * .18), -8.5cqh, 0) rotate(calc(var(--rotate-end) * .25)) scale(.98); }
}

.memory-card {
  position: absolute;
  top: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  color: rgba(255, 255, 255, .94);
  box-shadow: none;
  opacity: 0;
  transform-origin: center bottom;
}

.memory-card.left {
  left: clamp(12px, 3cqw, 52px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.memory-card.right {
  right: clamp(12px, 3cqw, 52px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.stage.orientation-vertical .memory-card.vertical,
.stage.orientation-vertical .memory-card.vertical-memory {
  top: 34px;
  left: calc(100% + 220px);
  right: auto;
  width: 320px;
  transform-origin: center center;
  z-index: 24;
}

.stage.orientation-vertical .memory-card.vertical .memory-photo-frame,
.stage.orientation-vertical .memory-card.vertical-memory .memory-photo-frame {
  padding: max(5px, calc(var(--polaroid-padding) * .72));
}

.stage.orientation-vertical .memory-card.vertical img,
.stage.orientation-vertical .memory-card.vertical .memory-img,
.stage.orientation-vertical .memory-card.vertical-memory img,
.stage.orientation-vertical .memory-card.vertical-memory .memory-img {
  max-width: min(76cqw, 560px);
  max-height: min(48cqh, 460px);
}

.memory-photo-frame {
  display: inline-block;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: var(--polaroid-padding);
  background: #f5efe2;
  box-sizing: content-box;
  box-shadow: 0 20px 44px rgba(0,0,0,.42);
}

.memory-card img,
.memory-img {
  display: block;
  width: auto;
  height: auto !important;
  max-width: 23.8cqw;
  max-height: 49.3cqh;
  object-fit: unset !important;
  filter: grayscale(1) saturate(.15);
  transition: filter .8s ease;
}

.memory-card.active img,
.memory-card.active .memory-img {
  filter: grayscale(0) saturate(1.08);
}

.memory-caption {
  display: block;
  width: auto;
  max-width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
  background: transparent;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.72), 0 0 22px rgba(0,0,0,.45);
}

.memory-condolence {
  width: 100%;
  margin: 0;
  color: rgba(255,255,255,.96);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(14px, 1.18cqw, 17px);
  line-height: 1.25;
  font-style: normal;
  font-weight: 300;
}

.memory-author {
  width: 100%;
  margin: 0;
  color: rgba(255,255,255,.92);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(12px, .95cqw, 14px);
  font-style: normal;
  font-weight: 300;
}

.memory-date {
  width: 100%;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(10px, .8cqw, 12px);
}

.legacy-mode .soft-phrase-layer,
.legacy-mode .ash-layer,
.legacy-mode .music-layer,
.legacy-mode .religious-layer {
  display: none;
}

.legacy-mode .photo-frame,
.legacy-mode .memory-card,
.legacy-mode .long-word,
.legacy-mode .long-phrase,
.legacy-mode .memory-author-line {
  animation: none !important;
  transition: opacity .3s ease !important;
  filter: none !important;
}

.legacy-mode .long-phrase {
  text-wrap: normal;
}

.exit-fullscreen-btn {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 60;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(14,12,10,.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transition: opacity .24s ease;
}

.app:fullscreen .exit-fullscreen-btn {
  display: block;
}

.app:fullscreen .exit-fullscreen-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

@keyframes portraitFadeChange {
  0% { opacity: .98; filter: blur(0) brightness(1); }
  44% { opacity: .16; filter: blur(10px) brightness(1.28); }
  56% { opacity: .16; filter: blur(10px) brightness(1.28); }
  100% { opacity: .98; filter: blur(0) brightness(1); }
}

@keyframes titleDrift {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-7px) scale(1.025); }
  70% { transform: translateY(3px) scale(.992); }
}

@keyframes pulse {
  0% { opacity: 0; transform: scale(.32); filter: blur(10px); }
  28% { opacity: calc(.46 * var(--visual-pulse-intensity, .55)); transform: scale(.72); filter: blur(5px); }
  100% { opacity: 0; transform: scale(calc(1.18 + (.32 * var(--visual-pulse-intensity, .55)))); filter: blur(22px); }
}

@keyframes connectorLightDot {
  0% {
    opacity: 0;
    left: 0;
    filter: brightness(1);
  }

  12% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    filter: brightness(1.9);
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: 100%;
    filter: brightness(1);
  }
}

@keyframes photoIn {
  from { opacity: 0; transform: scale(1.08); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes portraitImageIn {
  0% { opacity: 0; transform: scale(1.035); filter: blur(10px) brightness(1.08); }
  35% { opacity: .72; filter: blur(4px) brightness(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

@keyframes portraitImageOut {
  0% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
  45% { opacity: .42; filter: blur(4px) brightness(1.05); }
  100% { opacity: 0; transform: scale(.985); filter: blur(10px) brightness(.92); }
}

@keyframes softPhraseDrift {
  0% { opacity: 0; transform: translate3d(calc(var(--phrase-anchor-x, 0px) + var(--drift-x-start)), calc(var(--phrase-anchor-y, 0px) + 22px), 0) scale(.82); filter: blur(calc(var(--blur) + 1px)); }
  24% { opacity: .92; }
  72% { opacity: .76; }
  100% { opacity: 0; transform: translate3d(calc(var(--phrase-anchor-x, 0px) + var(--drift-x-end)), calc(var(--phrase-anchor-y, 0px) - 38px), 0) scale(1.08); filter: blur(calc(var(--blur) + 4px)); }
}

@keyframes ashRise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  16% { opacity: var(--opacity); }
  100% { opacity: 0; transform: translate3d(var(--drift), var(--rise-distance), 0) scale(1.22); }
}

@keyframes ashSparkle {
  0%, 100% { filter: blur(.35px) brightness(1.05); }
  22% { filter: blur(.1px) brightness(2.35); }
  36% { filter: blur(.45px) brightness(.95); }
  64% { filter: blur(0) brightness(2.75); }
}

@keyframes foregroundSparkle {
  0%, 100% { filter: blur(.2px) brightness(1.1); }
  30% { filter: blur(0) brightness(1.85); }
  58% { filter: blur(.32px) brightness(1.22); }
  78% { filter: blur(0) brightness(2.15); }
}

@keyframes noteRise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg) scale(.78); }
  14% { opacity: .82; }
  100% { opacity: 0; transform: translate3d(var(--drift), var(--rise-distance), 0) rotate(var(--rotate-end)) scale(1.2); }
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .panel {
    max-height: 46vh;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .stage-wrap {
    min-height: 54vh;
    padding: 12px;
  }

  .memory-card img,
  .memory-img {
    max-width: 30.6cqw;
  }
}

@media (max-width: 560px) {
  :root {
    --hero-top-offset: -72px;
    --qr-slot-size: clamp(50px, 16.1cqw, 73px);
  }

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

  .hero {
    padding: 72px 14px 118px;
  }

  .qr-slot {
    bottom: clamp(48px, 8cqh, 76px);
  }

  .photo-frame {
    width: clamp(144px, 38.4cqw, 224px);
    height: clamp(144px, 38.4cqw, 224px);
  }

  .long-phrase {
    max-width: 92cqw;
  }
}

/* MÓVIL EN HORIZONTAL (apaisado, poca altura): el hero no cabe y el logo se
   solapaba con la foto. Compactamos foto/logo/textos para que quepa el bloque.
   No afecta a TV (alto 1080) ni a escritorio; solo viewport bajo y apaisado. */
@media (max-height: 520px) and (orientation: landscape) {
  .funeral-brand {
    width: clamp(84px, 22cqh, 128px);
  }
  .funeral-brand img {
    max-height: clamp(40px, 13cqh, 66px);
  }
  .photo-frame {
    width: clamp(104px, 34cqh, 150px);
    height: clamp(104px, 34cqh, 150px);
  }
  .hero h2 {
    margin: 6px 0 2px;
    font-size: clamp(24px, 8.4cqh, 46px);
  }
  .stage-dates {
    font-size: clamp(13px, 3.6cqh, 22px);
  }
  .premium-separator {
    margin: clamp(4px, 1.4cqh, 10px) 0 clamp(4px, 1.2cqh, 8px);
  }
  .long-phrase {
    height: auto;
    min-height: 0;
    max-height: none;
    font-size: clamp(15px, 5cqh, 26px);
  }
  .qr-slot {
    bottom: clamp(14px, 4cqh, 30px);
    --qr-slot-size: clamp(52px, 15cqh, 84px);
  }
  .powered-logo {
    bottom: clamp(2px, .8cqh, 8px);
  }
}