/* Discernir (nº 03) · estilos de escena. Estado final = estilo estático; la entrada es transición. */
#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>"); }

/* pintura corrida a la derecha con borde izquierdo desvanecido (deja aire para el texto) */
.paint.r55 img { inset: auto; right: 0; top: 28px; width: 1520px; height: 1013px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.paint.noimg-veil::after { content: ''; position: absolute; inset: 0; background: rgba(6,9,30,.4); }

.chips { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.chip { display: inline-block; font-family: var(--f-sc); font-weight: 700; font-size: 38px; letter-spacing: .06em; padding: 8px 26px 12px;
  border: 2px solid var(--gold); border-radius: 44px; color: var(--gold-hi); background: rgba(9,13,42,.78); }
.chip.verm { border-color: var(--verm); color: var(--verm-hi); }
.chip.emer { border-color: var(--emerald-hi); color: var(--emerald-hi); }
.chip.ivory { border-color: rgba(246,238,219,.7); color: var(--ivory); }
.plate { display: inline-block; padding: 16px 32px 18px; background: rgba(9,13,42,.82); border: 2px solid rgba(228,181,85,.8); outline: 1px solid rgba(228,181,85,.35); outline-offset: 6px; border-radius: 6px; }
.plate.verm { border-color: rgba(227,71,42,.85); outline-color: rgba(227,71,42,.35); }
.small { font-family: var(--f-body); font-weight: 500; font-size: 38px; line-height: 1.22; }
.dim { color: var(--ivory-dim); }
.strike.on::after, .on .strike::after { background: var(--verm); }

/* ---------- 4 loyola y 15 indiferencia: balanza ---------- */
.bal .beam { transform-box: view-box; transform-origin: 1410px 350px; transition: transform calc(3.6s * var(--t)) var(--ease-io); }
.bal .panL, .bal .panR { transition: transform calc(3.6s * var(--t)) var(--ease-io); }
.bal .wt { transition: transform calc(2.4s * var(--t)) var(--ease), opacity calc(1.6s * var(--t)) var(--ease); transform: translateY(-260px); opacity: 0; }
#loyola.ph-peso .bal .beam { transform: rotate(9deg); }
#loyola.ph-peso .bal .panL { transform: translateY(-44px); }
#loyola.ph-peso .bal .panR { transform: translateY(44px); }
#indiferencia.ph-sesgo .bal .beam { transform: rotate(-9deg); }
#indiferencia.ph-sesgo .bal .panL { transform: translateY(44px); }
#indiferencia.ph-sesgo .bal .panR { transform: translateY(-44px); }
#indiferencia.ph-sesgo .bal .wt { transform: none; opacity: 1; }
#indiferencia.ph-libre .bal .beam { transform: none; }
#indiferencia.ph-libre .bal .panL, #indiferencia.ph-libre .bal .panR { transform: none; }
#indiferencia.ph-libre .bal .wt { transform: translateY(-260px); opacity: 0; transition-duration: calc(3s * var(--t)); }
.glowpan { opacity: 0; transition: opacity calc(2.4s * var(--t)) var(--ease); }
#loyola.ph-peso .glowpan.gr { opacity: 1; }
#indiferencia.ph-libre .glowpan.gr { opacity: .8; }

/* ---------- 9 conclusiones ---------- */
.pair .lhs, .pair .rhs { position: absolute; height: 112px; display: flex; align-items: center; padding: 0 30px; border-radius: 6px; font-size: 42px; line-height: 1.12; }
.pair .lhs { left: 96px; width: 760px; border: 2px solid rgba(228,181,85,.75); background: rgba(9,13,42,.8); font-family: var(--f-body); font-weight: 500; }
.pair .rhs { left: 1040px; width: 784px; border: 2px solid rgba(227,71,42,.75); background: rgba(40,12,24,.78); font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 48px; color: var(--verm-hi); }
.pair .rhs .strike::after { top: 50%; }
.pair .lbl2 { position: absolute; font-family: var(--f-sc); font-weight: 700; font-size: 26px; letter-spacing: .14em; }

/* ---------- 11 consolación: brújula ---------- */
.needle { transform-box: view-box; transform-origin: 1410px 500px; transform: rotate(-135deg); transition: transform calc(4.4s * var(--t)) var(--ease-io); }
#consolacion.ph-gira .needle { transform: rotate(3deg); }
.dial-verm { transition: opacity calc(2s * var(--t)) var(--ease-io); }
#consolacion.ph-gira .dial-verm { opacity: .3; }

/* ---------- 13 cadena ---------- */
.nodeR { transition: fill calc(2s * var(--t)) var(--ease), stroke calc(2s * var(--t)) var(--ease); }

/* ---------- 16 mudanza ---------- */
.nube { filter: blur(0); }
#mudanza .gline { filter: drop-shadow(0 0 8px rgba(228,181,85,.6)); }

/* ---------- 15 tres tiempos ---------- */
.col3 { position: absolute; top: 240px; width: 540px; height: 470px; }
.col3 .ico { height: 110px; display: flex; align-items: center; }
.col3 .ico svg, .col3 .ico img { height: 100px; width: auto; }
.col3.hi { transition: box-shadow calc(2.4s * var(--t)) var(--ease), border-color calc(2.4s * var(--t)) var(--ease); }
#tres.ph-hi .col3.hi { box-shadow: 0 0 0 4px rgba(251,227,160,.5), 0 0 70px rgba(228,181,85,.55), 0 20px 60px rgba(0,0,0,.45); border-color: var(--gold-hi); }
#tres.ph-hi .col3.lo { opacity: .55; transition: opacity calc(2s * var(--t)) var(--ease); }

/* ---------- 20 examen ---------- */
.step { position: absolute; left: 100px; width: 900px; display: flex; gap: 28px; align-items: flex-start; }
.num { flex: none; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--gold); display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 54px; color: var(--gold-hi); background: rgba(9,13,42,.85); box-shadow: 0 0 0 7px rgba(228,181,85,.15); }
.step .lbl { color: var(--gold); font-size: 40px; }
.step p { font-family: var(--f-body); font-weight: 500; font-size: 40px; line-height: 1.22; margin-top: 4px; }

/* ---------- 22 cierre ---------- */
.medal { position: absolute; top: 120px; width: 330px; height: 330px; }
.medal .tondo { width: 330px; height: 330px; }
.medcap { position: absolute; top: 480px; width: 520px; text-align: center; }
.medcap b { display: block; font-family: var(--f-sc); font-weight: 700; font-size: 42px; letter-spacing: .06em; color: var(--ivory); }
.medcap span { display: block; margin-top: 8px; font-family: var(--f-body); font-size: 34px; line-height: 1.2; color: var(--ivory-dim); }
.alba-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 1200px 560px at 50% 38%, rgba(255,247,226,.6), rgba(255,247,226,0) 75%); }
.title.ink { color: #1c1438; font-size: 100px; line-height: 1.02; text-shadow: 0 0 40px rgba(255,248,230,.85); }
.quote.ink { color: #1c1438; text-shadow: 0 0 30px rgba(255,248,230,.9); }
.oracion .quote { font-size: 44px; line-height: 1.12; color: var(--ivory); }
.oracion .amen { font-family: var(--f-display); font-weight: 700; font-style: italic; font-size: 56px; color: var(--gold-hi); margin-top: 10px; }

/* aliento del oro en objetos */
.breath { animation: breath 7s ease-in-out infinite; }
@keyframes breath { 0%,100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,210,120,0)); } 50% { filter: brightness(1.12) drop-shadow(0 0 18px rgba(255,210,120,.45)); } }
.cam { position: absolute; inset: 0; animation: cam 70s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes cam { from { transform: scale(1) translate(0,0); } to { transform: scale(1.045) translate(-.8%, -.5%); } }
@media (prefers-reduced-motion: reduce) { .cam, .breath { animation: none !important; } }

/* 9 conclusiones: tachado en la fase final; rótulos sin partir */
.pair .lbl2 { white-space: nowrap; }
#conclusiones .strike::after { transform: scaleX(0); transition-delay: 0s; }
#conclusiones.ph-tacha .strike::after { transform: scaleX(1); }
#conclusiones.ph-tacha .pair .r:nth-child(n+4) .strike::after { transition-delay: .4s; }
#conclusiones.ph-tacha .pair .r:nth-child(n+6) .strike::after { transition-delay: .8s; }
#conclusiones.ph-tacha .pair .r:nth-child(n+8) .strike::after { transition-delay: 1.2s; }
.pair .lhs { font-size: 46px; }
.pair .rhs { font-size: 52px; }

/* ---------- balanza pintada (sprites): loyola e indiferencia ---------- */
.bal3 { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.bal3 img { position: absolute; display: block; }
.bal3 .b-col { filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.bal3 .b-beam { position: absolute; left: 1105px; top: 255px; width: 640px; height: 235px; transform-origin: 50% 50%; transform: rotate(-7deg);
  transition: transform calc(2.8s * var(--t)) cubic-bezier(.3,1.7,.45,1); z-index: 3; filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.bal3 .b-beam img { left: 0; top: 0; width: 640px; height: 235px; }
.bal3.on .b-beam { transform: rotate(0); }
.bal3 .b-pan { position: absolute; width: 226px; height: 421px; transition: transform calc(2.8s * var(--t)) cubic-bezier(.3,1.7,.45,1); z-index: 2; }
.bal3 .b-panL { transform: translateY(40px); } .bal3 .b-panR { transform: translateY(-40px); }
.bal3.on .b-panL, .bal3.on .b-panR { transform: none; }
.bal3 .b-pimg { left: 0; top: 0; width: 226px; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.bal3 .props img { filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); transition: filter calc(2.8s * var(--t)) var(--ease), opacity calc(1s * var(--t)) linear var(--d,0ms), transform calc(1.4s * var(--t)) cubic-bezier(.3,1.6,.45,1) var(--d,0ms); }
.bal3 .prop.r { transform: translateY(-300px) rotate(-10deg); filter: none; }
.bal3 .prop.r.on { transform: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.bal3 .b-glow { position: absolute; left: 1420px; top: 330px; width: 600px; height: 600px; border-radius: 50%; opacity: 0; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,226,150,.5), rgba(255,226,150,0)); transition: opacity calc(3s * var(--t)) var(--ease); }
.bal3 .sparks i { position: absolute; bottom: 150px; width: 7px; height: 7px; border-radius: 50%; background: #fff2bd; box-shadow: 0 0 12px 3px rgba(255,220,140,.9); opacity: 0; }
.bal3 .sparks i:nth-child(1){left:20px;animation-delay:0s}.bal3 .sparks i:nth-child(2){left:62px;animation-delay:.7s}.bal3 .sparks i:nth-child(3){left:104px;animation-delay:1.3s}
.bal3 .sparks i:nth-child(4){left:146px;animation-delay:.3s}.bal3 .sparks i:nth-child(5){left:188px;animation-delay:1s}.bal3 .sparks i:nth-child(6){left:40px;animation-delay:1.8s}
.bal3 .sparks i:nth-child(7){left:126px;animation-delay:2.2s}.bal3 .sparks i:nth-child(8){left:170px;animation-delay:2.6s}
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-190px) scale(1.1); opacity: 0; } }
/* loyola: gana el lado de la vida entregada */
#loyola.ph-peso .bal3 .b-beam { transform: rotate(9deg); }
#loyola.ph-peso .bal3 .b-panL { transform: translateY(-46px); }
#loyola.ph-peso .bal3 .b-panR { transform: translateY(46px); }
#loyola.ph-peso .bal3 .gl img { filter: grayscale(.9) brightness(.55) saturate(.5) drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
#loyola.ph-peso .bal3 .sa img { filter: brightness(1.15) drop-shadow(0 0 16px rgba(255,220,140,.9)); }
#loyola.ph-peso .bal3 .b-glow { opacity: 1; }
#loyola.ph-peso .bal3 .sparks i { animation: rise 2.8s ease-out infinite; }
#stage.snap .bal3 .sparks i { animation-play-state: paused; }

/* prop con rotación propia (variable) */
.bal3 .prop.r { transform: translateY(-300px) rotate(var(--rot0, -10deg)); }
.bal3 .prop.r.on { transform: rotate(var(--rot, 0deg)); }
/* indiferencia: sesgo y liberación */
#indiferencia.ph-sesgo .bal3 .b-beam { transform: rotate(-9deg); }
#indiferencia.ph-sesgo .bal3 .b-panL { transform: translateY(46px); }
#indiferencia.ph-sesgo .bal3 .b-panR { transform: translateY(-46px); }
#indiferencia.ph-libre .bal3 .b-beam { transform: rotate(0); }
#indiferencia.ph-libre .bal3 .b-panL, #indiferencia.ph-libre .bal3 .b-panR { transform: none; }
#indiferencia .bal3 .prop.stone.on { transition: opacity calc(1s * var(--t)) linear, transform calc(1.4s * var(--t)) cubic-bezier(.3,1.6,.45,1); }
#indiferencia.ph-libre .bal3 .prop.stone { transform: translateY(-340px) rotate(14deg); opacity: 0; transition: transform calc(2.6s * var(--t)) var(--ease-io), opacity calc(2s * var(--t)) var(--ease-io); }
#indiferencia.ph-libre .bal3 .sa img { filter: brightness(1.15) drop-shadow(0 0 16px rgba(255,220,140,.9)); }
#indiferencia.ph-libre .bal3 .b-glow { opacity: 1; }
#indiferencia.ph-libre .bal3 .sparks i { animation: rise 2.8s ease-out infinite; }
/* consolación: brújula pintada */
.comp { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.comp img { position: absolute; display: block; }
.comp .c-halo { position: absolute; left: 1050px; top: 140px; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,226,150,.28), rgba(255,226,150,0)); transition: opacity calc(3s * var(--t)); }
#consolacion.ph-gira .comp .c-halo { background: radial-gradient(closest-side, rgba(255,226,150,.6), rgba(255,226,150,0)); }
.comp .c-dial { filter: drop-shadow(0 18px 28px rgba(0,0,0,.5)); }
.comp .c-star { animation: starpulse 4s ease-in-out infinite; }
@keyframes starpulse { 0%,100% { filter: drop-shadow(0 0 6px rgba(255,226,150,.6)); } 50% { filter: drop-shadow(0 0 20px rgba(255,236,170,1)); } }
.comp .c-needle { position: absolute; left: 1369px; top: 300px; width: 81px; height: 400px; }
.comp .c-needle img { left: 0; top: 0; width: 81px; height: 400px; transform-origin: 50% 50%; transform: rotate(-135deg); transition: transform calc(4.6s * var(--t)) cubic-bezier(.3,1.5,.42,1); filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
#consolacion.ph-gira .comp .c-needle img { transform: rotate(3deg); }

/* ---------- pulido global: esquineros dorados pintados ---------- */
.card::before, .plate::before, .card::after, .plate::after { content: ''; position: absolute; width: 64px; height: 78px; background: url(../assets/sp/esquina.webp) center/contain no-repeat; pointer-events: none; z-index: 2; }
.card::before, .plate::before { left: -16px; top: -16px; }
.card::after, .plate::after { right: -16px; bottom: -16px; transform: rotate(180deg); }
/* iconos pintados en tarjetas */
.cico { position: absolute; right: 26px; bottom: 26px; width: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.col3 .ico { height: 130px; }
.col3 .ico img { height: 124px !important; width: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
/* examen: icono en lugar de número */
.step .num { width: 104px; height: 112px; border: none; background: none; box-shadow: none; font-size: 0; }
.step .num img { height: 108px; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
/* pregunta */
.swing { transform-origin: 50% 0%; animation: swing 5s ease-in-out infinite; }
@keyframes swing { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.door-glow { background: radial-gradient(closest-side, rgba(255,226,150,.45), rgba(255,226,150,0)); }
/* mudanza */
.nube { animation: drift2 18s ease-in-out infinite alternate; }
@keyframes drift2 { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
.faro { animation: faro 4s ease-in-out infinite; }
@keyframes faro { 0%,100% { filter: drop-shadow(0 0 14px rgba(255,226,150,.5)); } 50% { filter: drop-shadow(0 0 34px rgba(255,236,170,1)); } }
/* cadena y ruta */
.med { filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
.med2 { filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
#stage.snap .swing, #stage.snap .nube { animation-play-state: paused; }

/* teléfono: sin capas de grano/polvo (rendimiento) */
@media (pointer: coarse) and (max-width: 900px) { #grain, #dust { display: none; } }