/* Estilos por escena. Estado final = estilo estático; la entrada es transición. */

/* salida genérica de cualquier contenedor con data-x */
[data-b].off { opacity: 0 !important; pointer-events: none; transition-property: opacity, transform, filter !important; transition-duration: calc(.6s * var(--t)) !important; transition-delay: 0s !important; }

/* grano de pigmento */
#grain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .35  0 0 0 1.1 -.2'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); }

/* ---------- 1 portada ---------- */
.portada-veil { position: absolute; inset: 0; background:
  radial-gradient(ellipse 900px 420px at 520px 290px, rgba(6,10,40,.62), rgba(6,10,40,0) 75%); }
.mapa .lbl { margin-bottom: 18px; font-size: 30px; }
.mapa-row { display: flex; gap: 70px; }
.mapa figure { width: 200px; text-align: center; }
.tondo.mini { width: 170px; height: 170px; margin: 0 auto; box-shadow: 0 0 0 4px rgba(228,181,85,.9), 0 0 0 10px rgba(228,181,85,.16), 0 16px 40px rgba(0,0,0,.5); }
.mapa figcaption { font-family: var(--f-sc); font-weight: 700; font-size: 38px; letter-spacing: .06em; margin-top: 18px; color: var(--ivory); text-shadow: 0 2px 10px rgba(0,0,0,.8); }

/* ---------- 2 deseo ---------- */
.medlbl { font-family: var(--f-sc); font-weight: 700; font-size: 40px; letter-spacing: .08em; color: var(--ivory); }
#deseo .threads line { filter: drop-shadow(0 0 6px rgba(255,90,54,.7)); }

/* ---------- 3 edén ---------- */
.tondo.big { box-shadow: 0 0 0 7px rgba(228,181,85,.95), 0 0 0 22px rgba(228,181,85,.14), 0 40px 120px rgba(0,0,0,.6); }
.flip { position: relative; height: 150px; perspective: 1400px; margin-top: 6px; }
.flip span { position: absolute; left: 0; top: 0; font-family: var(--f-display); font-weight: 700; font-style: italic; font-size: 68px; line-height: 1.05; transform-origin: 50% 60%; backface-visibility: hidden;
  transition: transform calc(2.4s * var(--t)) var(--ease-io), opacity calc(1.8s * var(--t)) var(--ease-io); }
.flip .f1 { color: var(--gold-hi); }
.flip .f2 { color: var(--verm-hi); transform: rotateX(-90deg); opacity: 0; }
#eden.ph-flip .flip .f1 { transform: rotateX(90deg); opacity: 0; }
#eden.ph-flip .flip .f2 { transform: none; opacity: 1; transition-delay: calc(.8s * var(--t)); }

/* ---------- 4 grieta ---------- */
.goldpanel-wrap { perspective: 1600px; }
.goldpanel { position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(118deg, #a8741f 0%, #e9c56e 18%, #f8e2a0 30%, #d9a441 46%, #f1d185 63%, #c28a2e 80%, #eed08a 100%);
  box-shadow: inset 0 0 0 3px rgba(120,80,20,.7), inset 0 0 0 12px rgba(255,240,200,.18), 0 30px 90px rgba(0,0,0,.55);
  transition: transform calc(3.5s * var(--t)) var(--ease-io) calc(2s * var(--t)); }
.goldpanel::before { content: ''; position: absolute; inset: 0; border-radius: 4px; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.02 .05' numOctaves='3'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .4  0 0 0 0 .15  0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"); }
.goldpanel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,240,.65) 50%, transparent 65%); background-size: 300% 100%; background-position: 110% 0; mix-blend-mode: soft-light; transition: background-position calc(3s * var(--t)) var(--ease) .4s; }
#grieta.started .goldpanel::after { background-position: -10% 0; }
.half-a { clip-path: polygon(0 0, 560px 0, 532px 70px, 580px 128px, 526px 196px, 572px 258px, 514px 330px, 558px 430px, 0 430px); }
.half-b { clip-path: polygon(560px 0, 1500px 0, 1500px 430px, 558px 430px, 514px 330px, 572px 258px, 526px 196px, 580px 128px, 532px 70px); }
#grieta.ph-grieta .half-a { transform: translate(-9px, 5px) rotate(-.5deg); }
#grieta.ph-grieta .half-b { transform: translate(9px, -3px) rotate(.4deg); }
.gp-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #2a1706; }
.gp-in .lbl { color: #6a410b; font-size: 28px; }
.gp-q { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 66px; line-height: 1.12; margin-top: 12px; }
.gp-q b { font-weight: 700; color: #7a1d08; }
.crack { position: absolute; left: 0; top: 0; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.crack polyline { transition-duration: calc(3s * var(--t)); }
.seq { display: flex; align-items: center; justify-content: center; gap: 40px; }
.seq-node { display: flex; flex-direction: column; align-items: center; padding: 18px 40px 22px; border: 2px solid rgba(228,181,85,.6); border-radius: 100px; background: rgba(8,12,40,.6); min-width: 400px; }
.seq-node .lbl { color: var(--gold); font-size: 26px; }
.seq-node .h3 { font-size: 70px; }

/* ---------- 5 al revés ---------- */
.coin-wrap { perspective: 2600px; }
.coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform calc(4s * var(--t)) var(--ease-io); }
#reves.ph-flip .coin { transform: rotateY(180deg); }
.coin .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin .face.back { transform: rotateY(180deg); }
.tondo.violet { box-shadow: 0 0 0 7px rgba(201,166,255,.85), 0 0 0 22px rgba(201,166,255,.14), 0 40px 120px rgba(0,0,0,.6); }
.caveat { background: rgba(10,8,30,.86); border: 2px solid rgba(228,181,85,.7); border-radius: 60px; padding: 20px 34px 22px; text-align: center; font-family: var(--f-body); font-weight: 500; font-size: 38px; line-height: 1.25; color: var(--ivory); box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.caveat.wide { border-radius: 16px; font-size: 40px; }

/* ---------- 6 dos lecturas ---------- */
.lect-l { position: absolute; left: 0; top: 0; width: 960px; height: 1080px; background: radial-gradient(ellipse at 60% 55%, rgba(29,122,92,.45), transparent 70%); }
.lect-r { position: absolute; right: 0; top: 0; width: 960px; height: 1080px; background: radial-gradient(ellipse at 40% 55%, rgba(110,60,190,.45), transparent 70%); }
.row { position: absolute; left: 0; width: 1920px; height: 120px; }
.rq { position: absolute; left: 710px; width: 500px; top: 0; text-align: center; }
.rq { font-family: var(--f-sc); font-weight: 700; font-size: 36px; letter-spacing: .08em; color: var(--gold); }
.rq::before { content: ''; position: absolute; left: 110px; right: 110px; top: -6px; bottom: -8px; background: #0a0e2c; border-radius: 30px; z-index: -1; }
.ra { position: absolute; top: 42px; font-family: var(--f-display); font-weight: 700; font-size: 62px; line-height: 1; white-space: nowrap; }
.ra.l { right: 1010px; text-align: right; }
.ra.rr { left: 1010px; }
.cartouche { background: rgba(8,10,34,.82); border: 2px solid rgba(228,181,85,.85); outline: 1px solid rgba(228,181,85,.35); outline-offset: 8px; border-radius: 10px; padding: 22px 40px 26px 190px; }

/* ---------- 7 idioma ---------- */
.promesa { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px 30px 20px; border-top: 2px solid rgba(228,181,85,.6); border-bottom: 2px solid rgba(228,181,85,.6); background: linear-gradient(90deg, transparent, rgba(8,12,44,.7) 20%, rgba(8,12,44,.7) 80%, transparent); }
.promesa .pq { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 56px; line-height: 1.05; color: var(--gold-hi); }
.station { position: absolute; top: 435px; width: 420px; margin-left: -210px; text-align: center; }
.station svg { display: block; margin: 0 auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.st-n { font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 1.05; margin-top: 16px; }
.st-d { font-family: var(--f-sc); font-weight: 700; font-size: 36px; letter-spacing: .08em; color: var(--gold); margin-top: 6px; }
.st-w { font-family: var(--f-body); font-style: italic; font-weight: 500; font-size: 42px; line-height: 1.2; margin-top: 10px; color: var(--ivory); }

/* ---------- 8 receta ---------- */
.formula { position: absolute; inset: 0; }
.fx { position: absolute; top: 290px; width: 300px; text-align: center; }
.fx-c { width: 230px; height: 230px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(255,250,235,.9), rgba(236,222,188,.9)); border: 3px solid #8f6118; box-shadow: 0 0 0 10px rgba(143,97,24,.12); }
.fx-t { font-family: var(--f-display); font-weight: 700; font-size: 52px; line-height: 1.05; margin-top: 24px; color: var(--ink); }
.fx-t .rn { display: block; font-family: var(--f-sc); font-size: 30px; letter-spacing: .1em; color: #b8321a; margin-bottom: 4px; }
.fx-ar { position: absolute; top: 375px; }
.duo { display: flex; justify-content: space-around; }
.duo-c { width: 700px; text-align: center; }
.duo-c svg { display: block; margin: 0 auto 10px; }
.duo-c .ps { margin-top: 10px; color: #3a2d22; }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- 9 the secret ---------- */
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 520px; transform: translateY(105%); transition: transform calc(8s * var(--t)) var(--ease-io); pointer-events: none; }
.water svg { display: block; width: 100%; height: 80px; }
.water-body { height: 440px; background: linear-gradient(180deg, rgba(12,28,110,.82), rgba(6,12,50,.94)); }
#secret.ph-agua .water { transform: translateY(0); }
.wave { animation: wave 6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.claim { margin-bottom: 34px; padding: 22px 30px 26px; background: rgba(6,10,36,.78); border-left: 4px solid var(--gold); border-radius: 4px; }
.claim + .claim { border-left-color: var(--verm); }
.cl-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-family: var(--f-body); font-weight: 500; font-size: 44px; line-height: 1.2; margin-top: 8px; }
.cl-row i { font-style: normal; color: var(--gold); }

/* ---------- 10 tres ---------- */
.panel { position: absolute; top: 262px; width: 500px; height: 590px; padding: 0 36px; text-align: center; background: radial-gradient(ellipse at 50% 30%, rgba(40,60,170,.28), transparent 75%); }
.panel svg { display: block; margin: 0 auto; }
.pn-n { font-family: var(--f-display); font-weight: 700; font-size: 52px; line-height: 1.02; margin-top: 12px; }
.pn-k { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 46px; line-height: 1.05; margin-top: 4px; }
.pn-t { font-family: var(--f-body); font-weight: 500; font-size: 42px; line-height: 1.24; margin-top: 16px; }
.pn-s { font-family: var(--f-body); font-style: italic; font-size: 26px; line-height: 1.25; margin-top: 12px; color: var(--ivory-dim); }

/* ---------- 11 suelta ---------- */
.veil-t.strong { background: linear-gradient(180deg, rgba(6,9,30,.92) 0%, rgba(6,9,30,.78) 28%, rgba(6,9,30,.2) 48%, rgba(6,9,30,0) 60%); }
.chips { display: flex; align-items: center; gap: 18px; }
.chip { font-family: var(--f-body); font-weight: 700; font-size: 44px; padding: 10px 30px 14px; border: 2px solid rgba(228,181,85,.8); border-radius: 60px; background: rgba(6,9,30,.7); }
.gold-chip { background: rgba(228,181,85,.2); color: var(--gold-hi); }
.plus { font-family: var(--f-display); font-weight: 700; font-size: 64px; color: var(--gold); }
.threadlbl { display: flex; flex-direction: column; padding: 12px 22px 16px; background: rgba(6,9,30,.78); border-radius: 10px; }
.threadlbl .lbl { font-size: 30px; }
.thread-glow { filter: drop-shadow(0 0 8px rgba(255,90,54,.95)); stroke-dasharray: 1 1; }


/* ---------- 12 entrego ---------- */
.objlbl { display: flex; flex-direction: column; }
.objlbl .lbl { font-size: 32px; color: var(--gold-deep); }
.objlbl .lbl.verm { color: #b8321a; }
.contrato { padding-right: 190px; }
.seal { position: absolute; right: 36px; top: 50%; width: 130px; height: 130px; margin-top: -65px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ff7a57, #b8321a 55%, #7a1608); box-shadow: 0 6px 16px rgba(80,10,0,.5), inset 0 0 0 10px rgba(255,255,255,.08);
  transform: scale(1.8) rotate(-20deg); opacity: 0; transition: transform calc(1.2s * var(--t)) cubic-bezier(.5,0,.2,1.4) calc(3s * var(--t)), opacity calc(.5s * var(--t)) linear calc(3s * var(--t)); }
.seal::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; border: 3px dashed rgba(255,220,200,.5); }
#entrego .contrato.on .seal { transform: none; opacity: 1; }

/* ---------- 13 getsemaní ---------- */
.getse-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 1150px 760px at 380px 360px, rgba(4,7,28,.86), rgba(4,7,28,.5) 55%, rgba(4,7,28,0) 80%), linear-gradient(0deg, rgba(4,7,28,.7), rgba(4,7,28,0) 30%); }
.halo-pulse { position: absolute; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,220,140,.35), rgba(255,220,140,0) 65%); animation: halo 5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes halo { 0%,100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
.vs { margin-bottom: 26px; }
.vs .lbl { color: var(--gold); }
.vs .ps { margin-top: 4px; }
.vref { font-family: var(--f-sc); font-style: normal; font-size: 26px; color: var(--gold); letter-spacing: .06em; margin-left: 8px; }
.sleepers { padding: 12px 24px 14px; background: rgba(4,7,28,.8); border-radius: 10px; border-left: 4px solid var(--gold); }
.sleepers .lbl { color: var(--gold); margin-right: 10px; }

/* ---------- 14 cáliz ---------- */
.caliz-glow { position: absolute; left: 960px; top: 520px; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,120,.28), rgba(255,210,120,0) 62%); animation: halo 6s ease-in-out infinite; }
.nosi .big { font-family: var(--f-display); font-weight: 700; font-style: italic; font-size: 240px; line-height: .8; }
.nosi .ps { font-size: 40px; margin-top: 20px; }

/* ---------- 15 jardines ---------- */
.pair { font-family: var(--f-display); font-weight: 700; font-size: 58px; line-height: 1.05; text-align: center; }

/* ---------- 16–19 Teresita ---------- */
.candle-glow { position: absolute; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,110,.42), rgba(255,170,80,.12) 35%, rgba(255,170,80,0) 65%); mix-blend-mode: screen; animation: flicker 3.2s ease-in-out infinite; pointer-events: none; }
.candle-glow.small { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
.candle-glow.big { width: 900px; height: 900px; margin: -450px 0 0 -450px; }
@keyframes flicker { 0%,100% { opacity: .85; transform: scale(1); } 30% { opacity: 1; transform: scale(1.04); } 55% { opacity: .75; transform: scale(.98); } 80% { opacity: .95; transform: scale(1.02); } }
.timeline .tl { position: relative; padding: 0 0 0 38px; margin-bottom: 26px; border-left: 3px solid rgba(228,181,85,.55); }
.timeline .tl::before { content: ''; position: absolute; left: -11px; top: 8px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(228,181,85,.8); }
.tl-d { font-family: var(--f-sc); font-weight: 700; font-size: 38px; letter-spacing: .08em; color: var(--gold); }
.tl .ps { margin-top: 2px; }
.dark-rise { position: absolute; left: 0; right: 0; bottom: 0; height: 1080px; background: linear-gradient(0deg, rgba(3,4,16,.96) 0%, rgba(3,4,16,.9) 55%, rgba(3,4,16,.55) 80%, rgba(3,4,16,0) 100%); transform: translateY(62%); transition: transform calc(10s * var(--t)) var(--ease-io); }
#noche.ph-oscuro .dark-rise { transform: translateY(12%); }
.cmp { display: flex; gap: 60px; }
.cmp > div { flex: 1; padding-top: 14px; border-top: 3px solid rgba(228,181,85,.5); }
.cmp > div:first-child { border-top-color: rgba(255,122,87,.6); }

/* ---------- 20 pregunta ---------- */
.paint.slowzoom { transition: transform calc(12s * var(--t)) var(--ease-io); }
#pregunta.ph-silencio .paint.slowzoom { transform: scale(1.06) translateY(-1%); }

/* ---------- 21 cierre ---------- */
.trio figure { position: absolute; top: 200px; width: 420px; text-align: center; }
.trio .tondo { width: 300px; height: 300px; margin: 0 auto; }
.trio figcaption { margin-top: 34px; display: flex; flex-direction: column; gap: 6px; }
.trio figcaption b { font-family: var(--f-display); font-weight: 700; font-size: 60px; line-height: 1; color: var(--gold-hi); }
.trio figcaption span { font-family: var(--f-body); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1.2; }
.paint.alba img { animation: drift 38s ease-in-out infinite alternate; }
.alba-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 1100px 520px at 50% 40%, rgba(255,247,226,.55), rgba(255,247,226,0) 75%); }
.title.ink { color: #1c1438; font-size: 122px; line-height: 1.02; text-shadow: 0 0 40px rgba(255,248,230,.8); }
.oracion .quote { color: #1c1438; font-size: 64px; text-shadow: 0 0 30px rgba(255,248,230,.9); }
.oracion .amen { font-family: var(--f-display); font-weight: 700; font-style: italic; font-size: 64px; color: #7a4a0c; margin-top: 12px; text-shadow: 0 0 30px rgba(255,248,230,.9); }

/* ajustes tras revisión */
.fx { width: 420px; }
.pregunta-veil { background: linear-gradient(180deg, rgba(6,9,30,.92) 0%, rgba(6,9,30,.82) 30%, rgba(6,9,30,.55) 46%, rgba(6,9,30,0) 64%) !important; }
.dark-rise { background: linear-gradient(0deg, rgba(3,4,16,.9) 0%, rgba(3,4,16,.8) 50%, rgba(3,4,16,.4) 80%, rgba(3,4,16,0) 100%); }
#noche.ph-oscuro .dark-rise { transform: translateY(30%); }
.water svg { width: calc(100% + 120px); margin-left: -60px; }

/* ================= B2 ================= */
.pista-s { font-family: var(--f-body); font-weight: 500; font-size: 46px; line-height: 1.2; }
.paint img { animation: none; }
/* edén: el tondo nace al centro y luego se aparta */
.eden-mover { transition: transform calc(6s * var(--t)) var(--ease-io); }
#eden.ph-side .eden-mover { transform: translateX(440px); }
.slowspin img { animation: slowzoomImg 40s ease-in-out infinite alternate; }
@keyframes slowzoomImg { from { transform: scale(1); } to { transform: scale(1.08) translateY(1.5%); } }
.slowspin-s { animation: slowspinS 120s linear infinite; }
@keyframes slowspinS { to { rotate: 360deg; } }
.breath-soft { animation: breath 9s ease-in-out infinite; }
/* deseo: el orbe se atenúa cuando llega la llave */
#deseo .orbe-d { transition-property: opacity, transform, filter; }
#deseo.ph-llave .orbe-d.on { opacity: .45; transform: scale(.7); }
.llave-d { opacity: 0; transform: translateY(-620px) rotate(-80deg) scale(.6); transition: transform calc(5s * var(--t)) var(--ease-io), opacity calc(2s * var(--t)); }
.llave-d.on { opacity: 1; transform: rotate(-20deg); filter: drop-shadow(0 0 24px rgba(255,210,120,.6)); }
/* grieta: azulejos 398 */
.tiles { display: flex; justify-content: center; gap: 36px; }
.tile { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 66px; color: var(--gold-hi); padding: 10px 36px 16px; border: 2px solid rgba(228,181,85,.7); border-radius: 80px; background: rgba(8,12,40,.65); }
.gp-q { font-size: 80px !important; }
.gp-in .lbl { font-size: 34px !important; }
/* receta con imágenes reales */
.fx-c img { display: block; }
/* entrego: la llave viaja a la mandorla */
.ek { transition: transform calc(5s * var(--t)) var(--ease-io), opacity calc(2s * var(--t)), filter calc(2s * var(--t)); }
#entrego.ph-llave .ek.on { transform: translate(1090px, 20px) rotate(20deg) scale(.9); }
/* cáliz: sube desde la luz */
.chal { opacity: 0; transform: translate(300px, -380px) scale(.2); transition: transform calc(6s * var(--t)) var(--ease-io), opacity calc(3s * var(--t)); }
.chal.on { opacity: 1; transform: none; }
#caliz.ph-nosi .chal.on { transform: translateY(40px) scale(.8); }
.nosi .big { font-size: 220px !important; }
/* canto → cáliz de Teresita */
.vela-c, .cal-c { opacity: 0; transition: transform calc(5s * var(--t)) var(--ease-io), opacity calc(2.5s * var(--t)); }
.vela-c.on { opacity: 1; }
#canto.ph-caliz .vela-c.on { transform: translate(1010px, 10px) scale(.8); }
.cal-c { transform: translateY(40px) scale(.7); }
.cal-c.on { opacity: 1; transform: none; }
.candle-move { transition: transform calc(5s * var(--t)) var(--ease-io); }
#canto.ph-caliz .candle-move { transform: translateX(1010px) scale(.7); }
.canto-q .quote { font-size: 64px; line-height: 1.12; }
.canto-q .big-q { font-size: 84px; margin-top: 8px; }
/* dejar que las pinturas vivan con la cámara */
.cam .paint { position: absolute; inset: 0; }