/* Motor de presentaciones 3D — presentacionesconia.com
   Escenario lógico 1920×1080 (horizontal) o 1080×1920 (celular parado), escalado al contenedor.
   Detrás: un canvas WebGL con la cámara que vuela entre objetos 3D. Encima: el texto. */

.pia {
  --pia-bg1: #070b18; --pia-bg2: #18204a; --pia-tx: #eef1ff; --pia-tx2: #a9b1d6;
  --pia-ac: #ffb547; --pia-ac2: #ff7a59; --pia-card: rgba(255,255,255,.055); --pia-line: rgba(255,255,255,.12);
  --pia-disp: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --pia-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pia-dispw: 700; --pia-track: -0.035em;
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 78% 18%, var(--pia-bg2) 0%, var(--pia-bg1) 62%);
  color: var(--pia-tx); font-family: var(--pia-body);
  -webkit-user-select: none; user-select: none; touch-action: pan-y;
  outline: none;
}
.pia[data-tema="estudio"] {
  --pia-bg1: #dfe3ea; --pia-bg2: #f6f7f9; --pia-tx: #11151d; --pia-tx2: #4b5466;
  --pia-ac: #2747ff; --pia-ac2: #00a37a; --pia-card: rgba(17,21,29,.05); --pia-line: rgba(17,21,29,.14);
  --pia-disp: 'Instrument Serif', Georgia, serif; --pia-dispw: 400; --pia-track: -0.02em;
}
.pia[data-tema="aurora"] {
  --pia-bg1: #04121a; --pia-bg2: #2a0f3d; --pia-tx: #ecfffa; --pia-tx2: #9cc9c0;
  --pia-ac: #5cf2c4; --pia-ac2: #ff5fc8; --pia-card: rgba(92,242,196,.06); --pia-line: rgba(92,242,196,.18);
  --pia-disp: 'Unbounded', 'Hanken Grotesk', sans-serif; --pia-dispw: 600; --pia-track: -0.04em;
}
.pia[data-tema="brasa"] {
  --pia-bg1: #160604; --pia-bg2: #4a140c; --pia-tx: #fff4ea; --pia-tx2: #e0b7a1;
  --pia-ac: #ff8a3d; --pia-ac2: #ffd166; --pia-card: rgba(255,138,61,.07); --pia-line: rgba(255,209,102,.18);
  --pia-disp: 'Syne', 'Hanken Grotesk', sans-serif; --pia-dispw: 700; --pia-track: -0.03em;
}

.pia-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.pia.gl-listo .pia-gl { opacity: 1; }
.pia-plano::after { transition: opacity .8s; }
.pia-grano { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: overlay; }
.pia[data-tema="estudio"] .pia-grano { opacity: .07; mix-blend-mode: multiply; }
.pia-escena { position: absolute; inset: 0; z-index: 2; perspective: 1800px; perspective-origin: 50% 50%; }
.pia-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform-style: preserve-3d; }
.pia.v .pia-stage { width: 1080px; height: 1920px; }

/* ---------- láminas ---------- */
.pia-l {
  position: absolute; inset: 0; padding: 130px 150px 150px; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translate3d(0, 40px, -700px); pointer-events: none; visibility: hidden;
  transition: opacity .32s ease, transform .5s cubic-bezier(.5,0,.75,0), visibility 0s linear .5s;
}
.pia-l.pasada { transform: translate3d(0, -30px, 520px); }
.pia-l.on {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .7s ease .22s, transform 1.15s cubic-bezier(.16,.84,.24,1) .12s, visibility 0s;
}
.pia.v .pia-l { padding: 120px 90px 210px; justify-content: flex-end; }

.pia-col { max-width: 1000px; display: flex; flex-direction: column; gap: 34px; }
.pia.v .pia-col { max-width: none; }
.pia-eye { font: 600 26px/1 var(--pia-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pia-ac); }
.pia-h1, .pia-h2 { font-family: var(--pia-disp); font-weight: var(--pia-dispw); letter-spacing: var(--pia-track); line-height: .98; margin: 0; text-wrap: balance; }
.pia-h1 { font-size: 150px; }
.pia-h2 { font-size: 96px; }
.pia[data-tema="estudio"] .pia-h1 { font-size: 172px; line-height: .92; }
.pia[data-tema="estudio"] .pia-h2 { font-size: 112px; line-height: .95; }
.pia[data-tema="aurora"] .pia-h1 { font-size: 118px; line-height: 1.02; }
.pia[data-tema="aurora"] .pia-h2 { font-size: 76px; line-height: 1.04; }
.pia-h2.pia-medio { font-size: 74px; }
.pia-h2.pia-chico { font-size: 64px; }
.pia-h1.pia-fin { font-size: 124px; }
.pia[data-tema="estudio"] .pia-h2.pia-medio { font-size: 88px; } .pia[data-tema="estudio"] .pia-h2.pia-chico { font-size: 76px; } .pia[data-tema="estudio"] .pia-h1.pia-fin { font-size: 140px; }
.pia[data-tema="aurora"] .pia-h2.pia-medio { font-size: 58px; } .pia[data-tema="aurora"] .pia-h2.pia-chico { font-size: 52px; } .pia[data-tema="aurora"] .pia-h1.pia-fin { font-size: 96px; }
.pia.v .pia-h1.pia-fin { font-size: 112px; } .pia.v[data-tema="aurora"] .pia-h1.pia-fin { font-size: 84px; }
.pia-p { font-size: 40px; line-height: 1.38; color: var(--pia-tx2); margin: 0; max-width: 900px; text-wrap: pretty; }
.pia-sub { font-size: 46px; line-height: 1.3; color: var(--pia-tx2); margin: 0; max-width: 980px; }
.pia.v .pia-h1 { font-size: 132px; } .pia.v .pia-h2 { font-size: 92px; }
.pia.v[data-tema="aurora"] .pia-h1 { font-size: 96px; } .pia.v[data-tema="aurora"] .pia-h2 { font-size: 70px; }

/* palabras que entran */
.pia-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pia-w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,.84,.24,1); transition-delay: calc(var(--d) * 70ms + 380ms); }
.pia-l.on .pia-w > span { transform: none; }
.pia-l:not(.on) .pia-w > span { transition-delay: 0s; transition-duration: .2s; }

/* fragmentos: entran uno por uno */
.pia-l .f { opacity: .0; transform: translateY(26px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,.84,.24,1); }
.pia-l .f.vis { opacity: 1; transform: none; }
.pia-fade { opacity: 0; transform: translateY(18px); transition: opacity .7s ease .75s, transform .9s cubic-bezier(.16,.84,.24,1) .75s; }
.pia-l.on .pia-fade { opacity: 1; transform: none; }

/* portada */
.pia-l[data-tipo="portada"] { justify-content: flex-end; padding-bottom: 170px; }
.pia-l[data-tipo="portada"] .pia-col { max-width: 1300px; }
.pia-firma { display: flex; gap: 22px; align-items: center; font-size: 26px; color: var(--pia-tx2); letter-spacing: .02em; }
.pia-firma i { width: 54px; height: 2px; background: var(--pia-ac); display: block; }

/* lista */
.pia-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.pia-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 26px; align-items: baseline; font-size: 42px; line-height: 1.3; }
.pia-lista li::before { content: ''; width: 34px; height: 4px; background: var(--pia-ac); transform: translateY(-12px); border-radius: 2px; }
.pia-lista li b { color: var(--pia-tx); font-weight: 650; }
.pia-lista li span { color: var(--pia-tx2); }

/* número grande */
.pia-num { font-family: var(--pia-disp); font-weight: var(--pia-dispw); font-size: 330px; line-height: .82; letter-spacing: -0.06em; color: var(--pia-ac); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 18px; }
.pia-num small { font-size: 120px; letter-spacing: -0.03em; color: var(--pia-tx); }
.pia[data-tema="aurora"] .pia-num { font-size: 250px; }
.pia.v .pia-num { font-size: 280px; }

/* cita */
.pia-l[data-tipo="cita"] { align-items: center; text-align: center; }
.pia-l[data-tipo="cita"] .pia-col { max-width: 1400px; align-items: center; }
.pia-q { font-family: var(--pia-disp); font-weight: var(--pia-dispw); font-size: 84px; line-height: 1.08; letter-spacing: var(--pia-track); margin: 0; text-wrap: balance; }
.pia-q::before { content: '“'; display: block; font-size: 200px; line-height: .6; color: var(--pia-ac); }
.pia[data-tema="aurora"] .pia-q { font-size: 64px; }
.pia-autor { font-size: 32px; color: var(--pia-tx2); letter-spacing: .04em; }

/* comparación */
.pia-l[data-tipo="comparacion"] .pia-col, .pia-l[data-tipo="pasos"] .pia-col, .pia-l[data-tipo="pregunta"] .pia-col { max-width: 1620px; width: 100%; }
.pia-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 16px; }
.pia.v .pia-comp { grid-template-columns: 1fr; gap: 28px; }
.pia-caja { background: var(--pia-card); border: 1px solid var(--pia-line); border-radius: 28px; padding: 46px 50px; display: flex; flex-direction: column; gap: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pia-caja h3 { margin: 0; font: 600 30px/1 var(--pia-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pia-tx2); }
.pia-caja.der h3 { color: var(--pia-ac); }
.pia-caja.der { border-color: color-mix(in srgb, var(--pia-ac) 55%, transparent); }
.pia-caja ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.pia-caja li { font-size: 36px; line-height: 1.3; padding-left: 34px; position: relative; }
.pia-caja li::before { content: ''; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--pia-tx2); }
.pia-caja.der li::before { background: var(--pia-ac); border-color: var(--pia-ac); }

/* pasos */
.pia-pasos { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 30px; margin-top: 20px; counter-reset: paso; }
.pia.v .pia-pasos { grid-template-columns: 1fr; gap: 22px; }
.pia-paso { background: var(--pia-card); border: 1px solid var(--pia-line); border-radius: 26px; padding: 40px 40px 44px; display: flex; flex-direction: column; gap: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pia-paso::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); font: 600 30px/1 var(--pia-body); color: var(--pia-ac); letter-spacing: .08em; }
.pia-paso h3 { margin: 0; font-family: var(--pia-disp); font-weight: var(--pia-dispw); font-size: 46px; line-height: 1.05; letter-spacing: var(--pia-track); }
.pia[data-tema="aurora"] .pia-paso h3 { font-size: 36px; }
.pia-paso p { margin: 0; font-size: 30px; line-height: 1.38; color: var(--pia-tx2); }

/* pregunta */
.pia-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.pia.v .pia-ops { grid-template-columns: 1fr; }
.pia-op { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: center; padding: 30px 36px; border-radius: 24px; background: var(--pia-card); border: 2px solid var(--pia-line); font-size: 38px; line-height: 1.25; transition: border-color .3s, background .3s, opacity .3s, transform .3s; }
.pia-op:hover { border-color: var(--pia-tx2); }
.pia-op:focus-visible { outline: 4px solid var(--pia-ac); outline-offset: 4px; }
.pia-op i { font-style: normal; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 28px/1 var(--pia-body); border: 2px solid var(--pia-line); color: var(--pia-tx2); }
.pia-l.resuelta .pia-op { opacity: .38; }
.pia-l.resuelta .pia-op.ok { opacity: 1; border-color: var(--pia-ac); background: color-mix(in srgb, var(--pia-ac) 16%, transparent); transform: scale(1.02); }
.pia-l.resuelta .pia-op.ok i { background: var(--pia-ac); color: var(--pia-bg1); border-color: var(--pia-ac); }
.pia-pista { font-size: 28px; color: var(--pia-tx2); }
.pia-explica { font-size: 34px; line-height: 1.35; color: var(--pia-tx); opacity: 0; transition: opacity .5s; max-width: 1400px; }
.pia-l.resuelta .pia-explica { opacity: 1; }

/* cierre */
.pia-l[data-tipo="cierre"] { align-items: center; text-align: center; }
.pia-l[data-tipo="cierre"] .pia-col { align-items: center; max-width: 1450px; }
.pia-accion { display: inline-flex; align-items: center; gap: 18px; padding: 26px 46px; border-radius: 999px; background: var(--pia-ac); color: var(--pia-bg1); font: 650 36px/1 var(--pia-body); }
.pia[data-tema="estudio"] .pia-accion { color: #fff; }

/* ---------- interfaz encima ---------- */
.pia-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); font: 500 13px/1 var(--pia-body); color: var(--pia-tx2); opacity: .0; transition: opacity .4s; }
.pia:hover .pia-hud, .pia.hud-on .pia-hud, .pia:focus-within .pia-hud { opacity: 1; }
.pia-hud button { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--pia-tx); background: color-mix(in srgb, var(--pia-bg1) 55%, transparent); border: 1px solid var(--pia-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pia-hud button:hover { border-color: var(--pia-ac); }
.pia-hud button:focus-visible { outline: 2px solid var(--pia-ac); outline-offset: 2px; }
.pia-hud svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pia-cont { font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
.pia-hud .esp { flex: 1; }
.pia-barra { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pia-ac); z-index: 6; transition: width .8s cubic-bezier(.16,.84,.24,1); }
.pia-marca { position: absolute; right: 16px; top: 14px; z-index: 6; font: 600 12px/1 var(--pia-body); letter-spacing: .04em; color: var(--pia-tx2); padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pia-bg1) 60%, transparent); border: 1px solid var(--pia-line); text-decoration: none; }
.pia-notas { position: absolute; left: 16px; right: 16px; bottom: 62px; z-index: 6; max-height: 34%; overflow: auto; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--pia-bg1) 88%, transparent); border: 1px solid var(--pia-line); font: 400 16px/1.5 var(--pia-body); color: var(--pia-tx); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pia-notas b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pia-ac); margin-bottom: 6px; }

/* escena a la medida (plan Ultra): ocupa el lugar del objeto 3D */
.pia-libre { position: absolute; left: 1030px; top: 120px; width: 780px; height: 840px; opacity: 0; transform: translate3d(40px, 0, -120px) scale(.96); transition: opacity .6s ease, transform .9s cubic-bezier(.16,.84,.24,1); }
.pia-l.on .pia-libre { opacity: 1; transform: none; transition-delay: .45s; }
.pia-l.con-escena .pia-col { max-width: 840px; }
.pia-l.con-escena[data-tipo="portada"] .pia-col { max-width: 860px; }
.pia.v .pia-libre { left: 90px; top: 110px; width: 900px; height: 800px; }
.pia.v .pia-l.con-escena .pia-col { max-width: none; }
.pia-plano.con-escena::after { display: none; }
.pia.a-la-medida .pia-accion { color: var(--pia-acTx, var(--pia-bg1)); }

/* actualizar sin animar (al editar) */
.pia.sin-trans .pia-l, .pia.sin-trans .pia-w > span, .pia.sin-trans .f, .pia.sin-trans .pia-fade { transition: none !important; }

/* miniatura (sin WebGL) */
.pia.mini { pointer-events: none; }
.pia.mini .pia-l { transition: none !important; }
.pia.mini .pia-w > span, .pia.mini .f, .pia.mini .pia-fade { transition: none !important; transform: none !important; opacity: 1 !important; }
.pia.mini .pia-hud, .pia.mini .pia-barra, .pia.mini .pia-marca, .pia.mini .pia-grano { display: none; }
.pia-plano::after { content: ''; position: absolute; right: 9%; top: 50%; width: 30%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--pia-ac) 0%, transparent 62%); opacity: .55; filter: blur(2px); }
.pia.v.pia-plano::after { right: 20%; top: 26%; width: 60%; }
.pia-plano[data-tipo-actual="comparacion"]::after, .pia-plano[data-tipo-actual="pasos"]::after, .pia-plano[data-tipo-actual="pregunta"]::after { opacity: .18; }

@media (prefers-reduced-motion: reduce) {
  .pia-l, .pia-l.on, .pia-w > span, .pia-l .f, .pia-fade { transition-duration: .01s !important; transition-delay: 0s !important; }
}