/* Pósters tipográficos de los 10 estilos · DISENO §8.7 (copiados tal cual del prototipo)
   Viene del prototipo (app/prototipo/index.html); la referencia de diseño es app/DISENO.md. */
.po{--pad:7cqi;container-type:inline-size;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:22px;isolation:isolate;text-align:left;-webkit-font-smoothing:antialiased;letter-spacing:normal}
.po>*{position:absolute}
.po p,.po h3{margin:0}
.po-nav{left:var(--pad);right:var(--pad);top:6cqi;display:flex;align-items:center;gap:3cqi;font:700 3.6cqi/1 var(--fs);z-index:3}
.po-links{display:flex;gap:2.2cqi;margin-left:auto}
.po-links i{width:6cqi;height:.9cqi;border-radius:1cqi;background:currentColor;opacity:.32}
.po-pill{font:600 2.5cqi/1 var(--fs);padding:1.7cqi 3cqi;border-radius:99px;white-space:nowrap}
.po-cu{left:var(--pad);right:var(--pad);z-index:2}
.po-eb{font:600 2.4cqi/1.25 var(--fs);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3.2cqi}
.po-t{font-size:9cqi;line-height:1.04;text-wrap:balance;overflow-wrap:normal;word-break:keep-all}
.po-t .b{display:block}
.po-cta{display:inline-flex;margin-top:5cqi;font:600 2.7cqi/1 var(--fs);padding:2.5cqi 4.6cqi;border-radius:99px;white-space:nowrap}
.clip{-webkit-background-clip:text;background-clip:text;color:transparent}
/* e01 Titanio */
.po-e01{background:#f5f5f7;color:#1d1d1f;font-family:Inter,-apple-system,sans-serif}
.po-e01 .po-pill{background:#1d1d1f;color:#fff}
.po-e01 .po-cu{top:21cqi;text-align:center}
.po-e01 .po-eb{color:#6e6e73;letter-spacing:.04em}
.po-e01 .po-t{font-weight:600;letter-spacing:-.035em;font-size:10cqi;--lim:33}
.po-e01 .po-t .b{background:linear-gradient(100deg,#7d7d82,#b9b9be 20%,#8e8e93 40%,#cdcdd2 58%,#86868b 78%,#a5a5aa);-webkit-background-clip:text;background-clip:text;color:transparent}
.po-e01 .po-cta{background:#0a66d6;color:#fff}
.po-e01 .po-foto{left:7cqi;right:7cqi;top:83cqi;height:60cqi;border-radius:6cqi;background:radial-gradient(90% 80% at 30% 18%,#e4e4e8,#a3a3a9 55%,#6e6e73);box-shadow:0 6cqi 14cqi -6cqi rgba(0,0,0,.35)}
.po-e01 .po-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%)}
/* e02 Obsidiana */
.po-e02{background:#050507;color:#f4f4f5;font-family:Geist,Inter,sans-serif}
.po-e02 .po-luz{inset:-30% -20% auto;height:95%;background:radial-gradient(45% 45% at 50% 45%,rgba(143,211,255,.42),rgba(91,124,255,.16) 50%,transparent 72%);filter:blur(5cqi);animation:luz 9s ease-in-out infinite alternate}
@keyframes luz{to{transform:translate3d(14%,6%,0)}}
.po-e02 .po-pill{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.po-e02 .po-cu{top:27cqi}
.po-e02 .po-eb{color:#8fd3ff}
.po-e02 .po-t{font-weight:500;letter-spacing:-.045em;font-size:10cqi;--lim:40}
.po-e02 .po-t .b{background:linear-gradient(90deg,#fff 10%,#8fd3ff 55%,#5b7cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.po-e02 .po-cta{background:#f4f4f5;color:#050507}
.po-e02 .po-panel{left:7cqi;right:7cqi;bottom:7cqi;height:27cqi;border-radius:5cqi;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.14);padding:5cqi;display:grid;gap:2.4cqi;align-content:start}
.po-e02 .po-panel i{display:block;height:1.4cqi;border-radius:1cqi;background:rgba(255,255,255,.14);width:var(--w)}
.po-e02 .po-panel i:first-child{background:linear-gradient(90deg,#8fd3ff,#5b7cff);height:1.8cqi}
/* e03 Cristal */
.po-e03{background:#101216;color:#fff;font-family:Manrope,Inter,sans-serif}
.po-e03 .po-fondo{inset:-12%;background:radial-gradient(38% 32% at 22% 22%,#e2a06f,transparent 72%),radial-gradient(45% 38% at 82% 30%,#4b86a8,transparent 72%),radial-gradient(52% 44% at 42% 86%,#2f5d4f,transparent 72%),radial-gradient(32% 30% at 88% 88%,#c9b38f,transparent 72%),#1b2026;filter:blur(5cqi) saturate(125%)}
.po-e03 .po-nav{color:#fff}
.po-e03 .po-pill{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.po-e03 .po-ventana{left:8cqi;right:8cqi;top:25cqi;z-index:2;padding:7cqi 6.5cqi 7.5cqi;border-radius:6.5cqi;background:rgba(12,12,16,.5);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2),0 10cqi 22cqi -10cqi rgba(0,0,0,.7)}
.po-e03 .po-ventana .po-cu{position:static}
.po-e03 .po-eb{color:#9ad8ff}
.po-e03 .po-t{font-weight:600;letter-spacing:-.03em;font-size:8.6cqi;--lim:34}
.po-e03 .po-t .b{color:rgba(255,255,255,.6)}
.po-e03 .po-cta{background:#fff;color:#101216}
/* e04 Suizo */
.po-e04{background:#fbfbfa;color:#0b0b0b;font-family:Inter,sans-serif;border-radius:0}
.po-e04 .po-reticula{inset:0;background:repeating-linear-gradient(90deg,rgba(11,11,11,.075) 0 1px,transparent 1px calc(100% / 12))}
.po-e04 .po-nav{padding-bottom:3cqi;border-bottom:.35cqi solid #0b0b0b}
.po-e04 .po-pill{background:#0b0b0b;color:#fbfbfa;border-radius:0}
.po-e04 .po-cu{top:21cqi}
.po-e04 .po-eb{font-family:"Space Grotesk";font-weight:500;letter-spacing:.01em;text-transform:none;font-size:2.8cqi}
.po-e04 .po-t{font-weight:700;letter-spacing:-.06em;line-height:.94;font-size:11.5cqi;--lim:44}
.po-e04 .po-t .b{color:#0a3dff}
.po-e04 .po-cta{background:#0b0b0b;color:#fff;border-radius:0}
.po-e04 .po-num{right:5cqi;bottom:15cqi;font:700 34cqi/.78 Inter;letter-spacing:-.07em;color:#0b0b0b}
.po-e04 .po-cinta{left:0;right:0;bottom:0;height:11cqi;background:#0a3dff;color:#fff;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font:500 3.3cqi/1 "Space Grotesk"}
.po-e04 .po-cinta span{display:inline-block;padding-left:4cqi;animation:cinta 14s linear infinite}
@keyframes cinta{to{transform:translate3d(-50%,0,0)}}
/* e05 Aurora */
.po-e05{background:#041519;color:#eafff6;font-family:Inter,sans-serif}
.po-e05 .po-cielo{inset:-25%;background:radial-gradient(32% 28% at 28% 30%,rgba(95,217,174,.8),transparent 70%),radial-gradient(36% 28% at 76% 24%,rgba(26,150,150,.65),transparent 70%),radial-gradient(38% 32% at 62% 84%,rgba(244,180,106,.6),transparent 70%);filter:blur(7cqi);animation:respira 13s ease-in-out infinite alternate}
@keyframes respira{to{transform:translate3d(5%,-4%,0) scale(1.1)}}
.po-e05 .po-pill{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.po-e05 .po-cu{top:30cqi}
.po-e05 .po-eb{color:#5fd9ae}
.po-e05 .po-t{font-family:Syne,Inter,sans-serif;font-weight:600;letter-spacing:-.025em;font-size:9.6cqi;--lim:40}
.po-e05 .po-t .b{background:linear-gradient(90deg,#5fd9ae,#f4b46a);-webkit-background-clip:text;background-clip:text;color:transparent}
.po-e05 .po-cta{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.po-e05 .po-flota{right:7cqi;bottom:9cqi;padding:4cqi 5cqi;border-radius:5cqi;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:600 3cqi/1.3 Syne,Inter;animation:flota 6s ease-in-out infinite alternate}
.po-e05 .po-flota small{display:block;font:400 2.3cqi/1.3 Inter;opacity:.7}
@keyframes flota{to{transform:translate3d(0,-3cqi,0)}}
/* e06 Monolito */
.po-e06{background:#efece6;color:#0e0e0e;font-family:"Bricolage Grotesque",Inter,sans-serif;border-radius:0}
.po-e06 .po-nav{font-weight:800}
.po-e06 .po-pill{background:#0e0e0e;color:#efece6;border-radius:0}
.po-e06 .po-cu{top:17cqi;left:4.5cqi;right:4.5cqi}
.po-e06 .po-t{font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.035em;font-size:17cqi;--lim:72}
.po-e06 .po-t .b{color:transparent;-webkit-text-stroke:.32cqi #0e0e0e}
.po-e06 .po-num{right:4.5cqi;bottom:4cqi;font:800 30cqi/.78 "Bricolage Grotesque";letter-spacing:-.05em;color:#e63b1f}
.po-e06 .po-pie{left:4.5cqi;bottom:6cqi;font:800 2.8cqi/1 "Bricolage Grotesque";letter-spacing:.04em;text-transform:uppercase;border-bottom:.4cqi solid #0e0e0e;padding-bottom:1cqi}
/* e07 Cómputo */
.po-e07{background:#121316;color:#e8ebe9;font-family:"Space Grotesk",Inter,sans-serif;border-radius:12px}
.po-e07 .po-grid{inset:0;background-image:linear-gradient(rgba(92,242,197,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(92,242,197,.075) 1px,transparent 1px);background-size:8.33cqi 8.33cqi}
.po-e07 .po-nav{font-family:"JetBrains Mono";font-weight:600}
.po-e07 .po-pill{box-shadow:inset 0 0 0 1px #5cf2c5;color:#5cf2c5;border-radius:2px;font-family:"JetBrains Mono"}
.po-e07 .po-cu{top:23cqi}
.po-e07 .po-eb{font-family:"JetBrains Mono";color:#5cf2c5;letter-spacing:.06em;font-weight:500}
.po-e07 .po-t{font-weight:500;letter-spacing:-.035em;font-size:9.4cqi;--lim:38}
.po-e07 .po-t .b{color:#5cf2c5}
.po-e07 .po-t .b::after{content:"_";animation:parpadeo 1.1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.po-e07 .po-cta{background:#5cf2c5;color:#0b0c0e;border-radius:3px;font-family:"JetBrains Mono";font-weight:600}
.po-e07 .po-graf{left:7cqi;right:7cqi;bottom:7cqi;height:28cqi;border-top:1px solid rgba(92,242,197,.25)}
.po-e07 .po-graf svg{position:absolute;inset:0;width:100%;height:100%}
.po-e07 .po-graf span{position:absolute;right:0;top:2.4cqi;font:500 2.3cqi/1 "JetBrains Mono";color:#5cf2c5}
/* e08 Lumen */
.po-e08{background:#fff;color:#0b1220;font-family:Manrope,Inter,sans-serif;border-radius:28px}
.po-e08 .po-malla{inset:-12%;background:radial-gradient(40% 34% at 14% 12%,rgba(155,220,255,.85),transparent 70%),radial-gradient(42% 36% at 90% 28%,rgba(217,201,255,.9),transparent 70%),linear-gradient(#fff,#eef1f6);filter:blur(3cqi)}
.po-e08 .po-pill{background:#1f4fd8;color:#fff}
.po-e08 .po-cu{top:22cqi;text-align:center}
.po-e08 .po-eb{color:#1f4fd8;letter-spacing:.04em}
.po-e08 .po-t{font-weight:600;letter-spacing:-.035em;font-size:9.6cqi;--lim:34}
.po-e08 .po-t .b{background:linear-gradient(90deg,#1f4fd8,#7b5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.po-e08 .po-cta{background:#1f4fd8;color:#fff;box-shadow:0 2cqi 5cqi -1cqi rgba(31,79,216,.5)}
.po-e08 .po-hoja{left:6cqi;right:6cqi;top:84cqi;height:50cqi;border-radius:7cqi;background:#fff;box-shadow:0 -2cqi 8cqi -2cqi rgba(31,79,216,.14),0 0 0 1px rgba(11,18,32,.05);padding:6cqi;display:grid;gap:2.6cqi;align-content:start}
.po-e08 .po-hoja i{display:block;height:1.6cqi;border-radius:2cqi;background:#eef1f6;width:var(--w)}
.po-e08 .po-dock{left:50%;bottom:4.5cqi;transform:translateX(-50%);display:flex;gap:3cqi;padding:2.4cqi 4cqi;border-radius:99px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2cqi 6cqi -2cqi rgba(11,18,32,.2),0 0 0 1px rgba(11,18,32,.05);z-index:3}
.po-e08 .po-dock i{width:3.4cqi;height:3.4cqi;border-radius:50%;background:#dfe5ef}
.po-e08 .po-dock i:first-child{background:#1f4fd8}
/* e09 Película */
.po-e09{background:#0d0b0a;color:#f3ece4;font-family:Inter,sans-serif;border-radius:16px}
.po-e09 .po-escena{inset:0;background:radial-gradient(65% 50% at 62% 46%,rgba(150,98,56,.6),transparent 72%),radial-gradient(45% 36% at 18% 78%,rgba(217,167,101,.2),transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 50%,rgba(0,0,0,.65));animation:zoom 18s ease-in-out infinite alternate}
@keyframes zoom{to{transform:scale(1.12)}}
.po-e09 .po-grano{inset:0;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");z-index:4;pointer-events:none}
.po-e09 .po-barra-s,.po-e09 .po-barra-i{left:0;right:0;height:9.5cqi;background:#000;z-index:3}
.po-e09 .po-barra-s{top:0}.po-e09 .po-barra-i{bottom:0}
.po-e09 .po-nav{top:13.5cqi;font-weight:600;letter-spacing:.02em}
.po-e09 .po-pill{background:#d9a765;color:#0d0b0a;border-radius:2px;letter-spacing:.14em;text-transform:uppercase;font-size:2.1cqi}
.po-e09 .po-cu{top:40cqi}
.po-e09 .po-eb{color:#d9a765;letter-spacing:.34em;font-weight:500;font-size:2.2cqi}
.po-e09 .po-t{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1;font-size:11.5cqi;--lim:42}
.po-e09 .po-t .b{font-style:italic;color:#d9a765}
.po-e09 .po-cta{background:transparent;box-shadow:inset 0 0 0 1px rgba(243,236,228,.45);color:#f3ece4;border-radius:2px;letter-spacing:.22em;text-transform:uppercase;font-size:2.1cqi}
.po-e09 .po-toma{right:6cqi;bottom:2.8cqi;z-index:5;font:500 2.1cqi/1 Inter;letter-spacing:.3em;color:rgba(243,236,228,.6)}
/* e10 Órbita */
.po-e10{background:#0a0812;color:#f1ecff;font-family:"Space Grotesk",Inter,sans-serif;border-radius:22px;perspective:120cqi}
.po-e10 .po-neb{inset:-18%;background:radial-gradient(34% 30% at 30% 30%,rgba(179,136,255,.6),transparent 70%),radial-gradient(34% 30% at 78% 58%,rgba(94,231,255,.38),transparent 70%),radial-gradient(40% 30% at 45% 96%,rgba(255,122,217,.4),transparent 70%);filter:blur(5cqi)}
.po-e10 .po-pill{background:rgba(179,136,255,.18);box-shadow:inset 0 0 0 1px rgba(179,136,255,.4)}
.po-e10 .po-cu{top:20cqi}
.po-e10 .po-eb{color:#b388ff}
.po-e10 .po-t{font-weight:500;letter-spacing:-.04em;font-size:9.8cqi;--lim:40}
.po-e10 .po-t .b{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.02em;background:linear-gradient(90deg,#b388ff,#5ee7ff 50%,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.po-e10 .po-cta{background:#f1ecff;color:#0a0812}
.po-e10 .po-anillos{left:50%;top:96cqi;width:118cqi;height:118cqi;margin:-59cqi 0 0 -59cqi;transform:rotateX(74deg);transform-style:preserve-3d}
.po-e10 .po-anillos i{position:absolute;inset:var(--in,0);border-radius:50%;box-shadow:inset 0 0 0 .35cqi rgba(241,236,255,.32);animation:gira var(--t,24s) linear infinite}
.po-e10 .po-anillos i::after{content:"";position:absolute;left:50%;top:-1.2cqi;width:2.4cqi;height:2.4cqi;border-radius:50%;background:var(--c,#5ee7ff);box-shadow:0 0 3cqi var(--c,#5ee7ff)}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.po *{animation:none!important}}