/* Piezas de la propuesta de gráficos, ya dentro del sitio (8/11/2026). Todo vive dentro de .pz; las animaciones se llaman pz-*.
   La primera parte salió de muestras/propuesta-graficos.html; la segunda, de acá a mano. */
.pz .g{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; margin:4px 0 16px}
.pz .g svg{display:block; width:100%; height:auto; overflow:visible}
.pz .g-t{font-family:var(--serif); font-weight:700; font-size:17px; color:var(--navy); margin:0 0 10px}
.pz .g-n{font-size:13px; color:var(--ink-2); margin:10px 0 0 !important; text-align:left !important}
.pz.navy .g{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.pz .ico{fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.pz .num-b{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--navy); font-size:12px; font-weight:800; flex:none}
.pz .items{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pz .items li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px; text-align:justify; -webkit-hyphens:auto; hyphens:auto}
.pz .items li b{color:var(--navy)}
.pz .resalta{background:linear-gradient(transparent 58%, rgba(227,169,59,.38) 58%); padding:0 2px}
.pz .g-sol .ln{fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:220; stroke-dashoffset:220; animation:pz-dibuja 1s .4s forwards}
.pz .g-sol .ln.l2{animation-delay:.6s}
.pz .g-sol .prob circle{fill:#C2483A}
.pz .g-sol .prob{transform-box:fill-box; transform-origin:center; animation:pz-late 2.4s ease-in-out infinite}
.pz .g-sol .anillo{fill:none; stroke:#C2483A; stroke-width:2; transform-box:fill-box; transform-origin:center; animation:pz-anillo 2.4s ease-out infinite}
.pz .g-sol .prob text{fill:#fff; font:800 30px Fraunces,serif; text-anchor:middle}
.pz .g-sol .sol{transform-box:fill-box; transform-origin:center; animation:pz-pop .6s 1.3s both}
.pz .g-sol .sol.s2{animation-delay:1.5s}
.pz .g-sol .sol circle{fill:var(--gold)}
.pz .g-sol .sol path{fill:none; stroke:var(--navy); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.pz .g-sol .lbl{fill:#D8DFE8; font:600 13px Inter,sans-serif; text-anchor:middle}
.pz .g-sol .lbl.oro{fill:var(--gold)}
.pz .g-sol .viaja{fill:#fff}
.pz .sellos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pz .sello{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; animation:pz-sube .5s calc(var(--k)*.12s) both}
.pz .sello.ancho{grid-column:1 / -1}
.pz .sello svg{width:46px; height:46px; display:block; margin-bottom:8px}
.pz .sello .fondo{fill:var(--cream)}
.pz .sello .tacha{stroke:var(--no); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:42; stroke-dashoffset:42; animation:pz-dibuja .5s calc(.5s + var(--k)*.15s) forwards}
.pz .sello b{display:block; font-size:14px; line-height:1.25; text-transform:uppercase; letter-spacing:.03em; color:var(--navy); margin-bottom:4px}
.pz .sello span{font-size:14px; line-height:1.45; color:var(--ink-2); display:block}
.pz .sello span b{display:inline; text-transform:none; letter-spacing:0; font-size:inherit}
.pz .temas-mini{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.pz .temas-mini i{font-style:normal; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--navy); background:var(--cream); border-radius:20px; padding:4px 9px 4px 6px}
.pz .temas-mini svg{width:16px; height:16px; margin:0; display:inline}
.pz .tl{list-style:none; margin:0; padding:0 0 0 30px; position:relative}
.pz .tl::before{content:""; position:absolute; left:9px; top:8px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(var(--gold),var(--navy)); transform-origin:top; animation:pz-crece-y 2.2s .2s cubic-bezier(.3,.7,.2,1) both}
.pz .tl li{position:relative; padding:0 0 16px; animation:pz-sube .5s calc(.3s + var(--k)*.4s) both}
.pz .tl li::before{content:""; position:absolute; left:-27px; top:7px; width:15px; height:15px; border-radius:50%; background:var(--bg); border:3px solid var(--gold)}
.pz .tl li:last-child::before{background:var(--gold); box-shadow:0 0 0 6px rgba(227,169,59,.25); animation:pz-late 2s infinite}
.pz .tl .big{font-family:var(--serif); font-weight:800; font-size:28px; line-height:1; color:var(--navy)}
.pz .tl .big small{font-size:16px; color:var(--gold-d); margin-left:4px}
.pz .tl span{display:block; font-size:14.5px; color:var(--ink-2); margin-top:3px}
.pz .tl .big span{display:inline; font-size:inherit; color:inherit; margin:0}
.pz .aud{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pz .aud div{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 10px; text-align:center; animation:pz-sube .5s calc(var(--k)*.15s) both}
.pz .aud svg{width:40px; height:40px; color:var(--navy); display:block; margin:0 auto 6px}
.pz .aud b{display:block; font-family:var(--serif); font-size:18px; color:var(--navy)}
.pz .aud span{display:block; font-size:12.5px; line-height:1.35; color:var(--ink-2); margin-top:3px}
.pz .aud .luna{color:var(--gold-d); animation:pz-brilla 3s ease-in-out infinite}
.pz .aud .pin{animation:pz-rebota 1.6s ease-in-out infinite}
.pz .hub .linea{stroke:var(--line); stroke-width:3}
.pz .hub .linea-o{stroke:var(--gold); stroke-width:3; stroke-dasharray:80; stroke-dashoffset:80; animation:pz-dibuja .8s .4s forwards}
.pz .hub .nodo circle{fill:var(--cream); stroke:var(--gold); stroke-width:2}
.pz .hub .nodo{transform-box:fill-box; transform-origin:center; animation:pz-pop .5s calc(.9s + var(--k)*.2s) both}
.pz .hub .nodo use{color:var(--navy)}
.pz .hub .t{font:700 14px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .hub .s{font:500 12px Inter,sans-serif; fill:var(--ink-2); text-anchor:middle}
.pz .hub .centro-a{fill:none; stroke:var(--gold); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:pz-anillo 2.4s ease-out infinite}
.pz .hub .ida{fill:var(--gold)}
.pz .hub .vuelta{fill:var(--navy)}
.pz .hub .ok rect{fill:var(--ok-bg)}
.pz .hub .ok text{font:700 11.5px Inter,sans-serif; fill:var(--ok); text-anchor:middle}
.pz .hub .ok{animation:pz-sube .5s 1.8s both}
.pz .pasos{list-style:none; margin:0; padding:0; position:relative}
.pz .pasos::before{content:""; position:absolute; left:17px; top:18px; bottom:52px; width:2px; background:var(--gold); transform-origin:top; animation:pz-crece-y 1.4s .3s both}
.pz .pasos li{position:relative; display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center; margin-bottom:10px; animation:pz-sube .45s calc(.3s + var(--k)*.3s) both}
.pz .pasos li i{font-style:normal; width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--gold); font-weight:800; display:grid; place-items:center; position:relative; z-index:1}
.pz .pasos li div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-weight:600; font-size:14.5px; color:var(--navy)}
.pz .pasos li.no i{background:var(--cream); color:var(--ink-2)}
.pz .pasos li.no div{color:var(--ink-2); background:transparent; border-style:dashed; font-weight:500}
.pz .pasos li.no div s{text-decoration-color:var(--no); text-decoration-thickness:2px}
.pz .vs{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin-top:14px}
.pz .vs span{text-align:center; border-radius:12px; padding:10px 8px; font-weight:700; font-size:14px}
.pz .vs .a{background:var(--cream); color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--no)}
.pz .vs .b{background:var(--gold); color:var(--navy); animation:pz-late 2.4s 1.5s ease-in-out infinite}
.pz .vs svg{width:24px; height:24px; color:var(--gold-d)}
.pz .tres{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px}
.pz .tres span{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--navy); background:var(--cream); border-radius:12px; padding:8px 4px}
.pz .tres svg{width:26px; height:26px}
.pz .grupo{display:flex; flex-wrap:wrap; gap:10px 6px; justify-content:center}
.pz .av{width:74px; text-align:center; animation:pz-pop .45s calc(var(--k)*.1s) both}
.pz .av i{font-style:normal; display:grid; place-items:center; width:52px; height:52px; margin:0 auto 4px; border-radius:50%; background:var(--navy); color:#fff; font:700 17px Fraunces,serif}
.pz .av:nth-child(even) i{background:var(--gold); color:var(--navy)}
.pz .av span{display:block; font-size:11.5px; line-height:1.25; color:var(--ink-2)}
.pz .av.rol i{background:var(--cream); color:var(--navy)}
.pz .av.rol i svg{width:24px; height:24px}
.pz .av.vos i{background:transparent; border:2px dashed var(--gold-d); color:var(--gold-d); font-family:Inter; font-size:15px; animation:pz-late 1.8s ease-in-out infinite}
.pz .av.vos span{color:var(--gold-d); font-weight:700}
.pz .grupo-n{text-align:center !important; font-size:13px !important; color:var(--ink-2) !important; margin:12px 0 0 !important}
.pz .camino .base{stroke:var(--line); stroke-width:4; stroke-linecap:round}
.pz .camino .avance{stroke:var(--gold); stroke-width:4; stroke-linecap:round; stroke-dasharray:280; stroke-dashoffset:280; animation:pz-dibuja 2.4s .3s cubic-bezier(.3,.6,.3,1) forwards}
.pz .camino .nodo{transform-box:fill-box; transform-origin:center; animation:pz-pop .45s calc(.4s + var(--k)*.6s) both}
.pz .camino .nodo circle{fill:var(--card); stroke:var(--gold); stroke-width:2.5}
.pz .camino .nodo use{color:var(--navy)}
.pz .camino .nb circle{fill:var(--gold)}
.pz .camino .nb text{font:800 11px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .camino .t{font:700 13.5px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .camino .inr rect{fill:var(--navy)}
.pz .camino .inr text{font:700 12.5px Inter,sans-serif; fill:#fff; text-anchor:middle}
.pz .camino .inr{animation:pz-sube .5s 2.6s both}
.pz .camino .rama{stroke:var(--navy); stroke-width:2.5; stroke-dasharray:4 5; animation:pz-fluye 1s linear infinite reverse}
.pz .camino .s{font:500 11.5px Inter,sans-serif; fill:var(--ink-2); text-anchor:middle}
.pz .camino .persona{fill:var(--no)}
.pz .integral .lin{stroke:var(--line); stroke-width:2}
.pz .integral .lin-o{stroke:var(--gold); stroke-width:2; stroke-dasharray:4 6; animation:pz-fluye 1.2s linear infinite}
.pz .integral .c{fill:var(--navy)}
.pz .integral .ca{fill:none; stroke:var(--gold); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:pz-anillo 2.6s ease-out infinite}
.pz .integral .ct{font:800 13px Inter,sans-serif; fill:#fff; text-anchor:middle}
.pz .integral .e rect{fill:var(--cream); stroke:var(--line)}
.pz .integral .e{animation:pz-sube .4s calc(.3s + var(--k)*.2s) both}
.pz .integral .e text{font:600 12px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .pilares{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:4px 0 12px}
.pz .pilares span{text-align:center; font-size:12px; font-weight:700; color:var(--navy); background:var(--gold-l); border-radius:10px; padding:7px 2px}
.pz .escena svg{border-radius:14px}
.pz .esc-tog{display:flex; background:var(--cream); border-radius:30px; padding:4px; margin:0 0 12px}
.pz .esc-tog button{flex:1; border:0; background:transparent; font:700 14px Inter,sans-serif; color:var(--ink-2); padding:9px; border-radius:30px; cursor:pointer}
.pz .esc-tog button.on{background:var(--navy); color:#fff}
.pz .escena .copa{transform-box:view-box; transform-origin:0 0; transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.pz .escena[data-e="mejor"] .copa{transform:translate(160px,72px) scale(.62) translate(-140px,-75px)}
.pz .escena .luz{opacity:0; transition:opacity .9s .6s}
.pz .escena[data-e="mejor"] .luz{opacity:1}
.pz .escena .basura{transition:opacity .6s, transform .6s; transform-box:fill-box; transform-origin:center}
.pz .escena[data-e="mejor"] .basura{opacity:0; transform:scale(.3)}
.pz .escena .bano{opacity:.28; transition:opacity .8s .3s}
.pz .escena .bano rect{stroke-dasharray:5 4}
.pz .escena[data-e="mejor"] .bano{opacity:1}
.pz .escena[data-e="mejor"] .bano rect{stroke-dasharray:none}
.pz .escena .plaza-luz{opacity:0; transition:opacity .9s .9s}
.pz .escena[data-e="mejor"] .plaza-luz{opacity:1}
.pz .escena .velo{opacity:.35; transition:opacity 1s}
.pz .escena[data-e="mejor"] .velo{opacity:0}
.pz .escena .marca circle{fill:var(--gold)}
.pz .escena .marca text{font:800 11px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .escena .estrella{fill:#fff; animation:pz-brilla 2.6s ease-in-out infinite}
.pz .escena .estado{font:700 12px Inter,sans-serif; fill:#fff; letter-spacing:.08em}
.pz .sub-g{border-top:1px solid var(--line); padding-top:14px; margin-top:14px}
.pz .sub-g:first-of-type{border-top:0; padding-top:0; margin-top:0}
.pz .sub-g h5{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; color:var(--navy)}
.pz .reloj{display:flex; height:42px; border-radius:12px; overflow:hidden; font-size:13px; font-weight:700}
.pz .reloj .gr{flex:2; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; gap:6px; transform-origin:left; animation:pz-crece-x 1s .3s cubic-bezier(.2,.7,.2,1) both}
.pz .reloj .ta{flex:2; background:repeating-linear-gradient(135deg,var(--cream) 0 8px,#E8E0D0 8px 16px); color:var(--ink-2); display:flex; align-items:center; justify-content:center}
.pz .reloj svg{width:18px; height:18px}
.pz .ejes-r{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-2); margin:4px 2px 0}
.pz .badge{display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--ok-bg); color:var(--ok); font-size:13px; font-weight:700; border-radius:20px; padding:5px 11px; animation:pz-sube .4s 1.2s both}
.pz .badge svg{width:16px; height:16px}
.pz .calle .asf{fill:#5B6573}
.pz .calle .raya{stroke:#fff; stroke-width:2; stroke-dasharray:10 8; animation:pz-fluye 1s linear infinite}
.pz .calle .vereda{fill:var(--cream)}
.pz .calle .palma{color:#3F7A4E; transform-box:fill-box; transform-origin:bottom; animation:pz-crece-y .5s calc(.3s + var(--k)*.2s) both}
.pz .calle .auto{color:#fff; animation:pz-auto 5s linear infinite}
.pz .calle .auto2{color:var(--gold); animation:pz-auto 5s 2.5s linear infinite}
.pz .checks{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.pz .checks span{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--navy); background:var(--cream); border-radius:12px; padding:10px 2px 8px}
.pz .checks svg{width:24px; height:24px}
.pz .checks span::after{content:"✓"; position:absolute; top:-6px; right:-4px; width:18px; height:18px; border-radius:50%; background:var(--ok); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; animation:pz-pop .35s calc(.4s + var(--k)*.25s) both}
.pz .antes-despues{display:grid; grid-template-columns:1fr 26px 1.25fr; align-items:center; gap:6px}
.pz .antes-despues .an{background:var(--cream); border-radius:12px; padding:12px 8px; text-align:center; font-size:13px; color:var(--ink-2); font-weight:600}
.pz .antes-despues .de{display:grid; gap:5px}
.pz .antes-despues .de span{background:var(--ok-bg); color:var(--ok); border-radius:10px; padding:6px 9px; font-size:12.5px; font-weight:700; animation:pz-sube .4s calc(.5s + var(--k)*.25s) both}
.pz .antes-despues svg{width:26px; height:26px; color:var(--gold-d); animation:pz-rebota-x 1.4s ease-in-out infinite}
.pz .pob{display:flex; height:40px; border-radius:12px; overflow:hidden; font-size:13px; font-weight:700}
.pz .pob .h{flex:0 0 62%; background:var(--navy); color:#fff; display:flex; align-items:center; padding-left:12px; transform-origin:left; animation:pz-crece-x 1.1s .3s cubic-bezier(.2,.7,.2,1) both}
.pz .pob .t{flex:1; background:linear-gradient(90deg,var(--gold),rgba(227,169,59,0)); color:var(--navy); display:flex; align-items:center; padding-left:10px; transform-origin:left; animation:pz-crece-x 1.1s 1.2s cubic-bezier(.2,.7,.2,1) both}
.pz .ida-v .ruta{fill:none; stroke:var(--line); stroke-width:3}
.pz .ida-v .ruta-o{fill:none; stroke:var(--gold); stroke-width:3; stroke-dasharray:6 7; animation:pz-fluye 1s linear infinite}
.pz .ida-v .p{fill:var(--navy)}
.pz .ida-v .nd circle{fill:var(--cream); stroke:var(--gold); stroke-width:2}
.pz .ida-v use{color:var(--navy)}
.pz .ida-v text{font:600 12px Inter,sans-serif; fill:var(--ink-2); text-anchor:middle}
.pz .ida-v .esc-s{color:var(--ok); animation:pz-late 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.pz .mesa .tabla{fill:var(--cream); stroke:var(--gold); stroke-width:2}
.pz .mesa .giro{fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:6 8; transform-box:fill-box; transform-origin:center; animation:pz-gira 14s linear infinite}
.pz .mesa .silla{transform-box:fill-box; transform-origin:center; animation:pz-pop .45s calc(.4s + var(--k)*.3s) both}
.pz .mesa .silla circle{fill:var(--navy)}
.pz .mesa .silla use{color:#fff}
.pz .mesa text{font:700 12.5px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .mesa .tt{font:800 12.5px Fraunces,serif; fill:var(--navy)}
.pz .medalla{display:flex; align-items:center; gap:10px; background:var(--gold-l); border-radius:12px; padding:10px 12px; font-size:13.5px; font-weight:600; color:var(--navy)}
.pz .medalla svg{width:30px; height:30px; flex:none; animation:pz-late 2.4s ease-in-out infinite}
.pz .oir{display:flex; align-items:center; gap:12px; width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:10px 14px 10px 10px; margin:0 0 16px; color:#fff; font:600 14.5px Inter,sans-serif; cursor:pointer; text-align:left; transition:background .2s}
.pz .oir:hover{background:rgba(255,255,255,.13)}
.pz .oir .play{flex:none; width:42px; height:42px; border-radius:50%; background:var(--gold); color:var(--navy); display:grid; place-items:center; box-shadow:0 0 0 0 rgba(227,169,59,.6)}
.pz .oir.sonando .play{animation:pz-llama 1.8s ease-out infinite}
.pz .oir .play svg{width:18px; height:18px; fill:currentColor}
.pz .oir .play .ic-pausa, .pz .oir.sonando .play .ic-play{display:none}
.pz .oir.sonando .play .ic-pausa{display:block}
.pz .oir .txt{flex:1; min-width:0}
.pz .oir .txt small{display:block; font-weight:500; font-size:12px; color:#B9C4D2; margin-top:1px}
.pz .oir .barra{height:3px; border-radius:3px; background:rgba(255,255,255,.15); margin-top:7px; overflow:hidden}
.pz .oir .barra i{display:block; height:100%; width:0; background:var(--gold)}
.pz .ondas{display:flex; align-items:center; gap:3px; height:26px; flex:none}
.pz .ondas i{width:3px; height:5px; border-radius:2px; background:var(--gold); opacity:.45; transition:opacity .3s}
.pz .oir.sonando .ondas i{opacity:1; animation:pz-onda .9s ease-in-out infinite}
.pz .ondas i:nth-child(2){animation-delay:.12s}
.pz .ondas i:nth-child(3){animation-delay:.3s}
.pz .ondas i:nth-child(4){animation-delay:.05s}
.pz .ondas i:nth-child(5){animation-delay:.22s}
@keyframes pz-onda{50%{height:24px}}
@keyframes pz-llama{70%{box-shadow:0 0 0 12px rgba(227,169,59,0)} 100%{box-shadow:0 0 0 0 rgba(227,169,59,0)}}
.pz .postal .nube{fill:#fff; opacity:.9; animation:pz-nube 28s linear infinite}
.pz .postal .nube.n2{animation-duration:36s; animation-delay:-14s}
.pz .postal .fronda{fill:none; stroke:#3F7A4E; stroke-width:4; stroke-linecap:round; transform-box:fill-box; transform-origin:50% 100%; animation:pz-mece 4.5s ease-in-out infinite}
.pz .postal .fronda.f2{animation-delay:-2s}
.pz .postal .tronco{fill:none; stroke:#7A5A3E; stroke-width:5; stroke-linecap:round}
.pz .postal .local{animation:pz-pasea var(--t) ease-in-out infinite alternate}
.pz .postal .paso{animation:pz-bob .55s ease-in-out infinite}
.pz .postal .turista{animation:pz-llega 4.2s .6s ease-out both}
.pz .postal .turista .paso{animation:pz-bob .55s ease-in-out 8 .6s}
.pz .postal .pin{animation:pz-cae .8s .3s cubic-bezier(.3,1.5,.5,1) both}
.pz .postal .pin g{animation:pz-rebota 2.6s 1.4s ease-in-out infinite}
.pz .postal .pin text{font:700 12.5px Inter,sans-serif; fill:#fff; text-anchor:middle}
.pz .postal .etq{animation:pz-sube .5s calc(1.4s + var(--k)*.35s) both}
.pz .postal .etq rect{fill:#fff; stroke:var(--gold); stroke-width:1.2}
.pz .postal .etq text{font:700 11.5px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .postal .guia{stroke:var(--gold-d); stroke-width:1.3; stroke-dasharray:2 3; fill:none}
@keyframes pz-nube{from{transform:translateX(-130px)} to{transform:translateX(420px)}}
@keyframes pz-mece{50%{transform:rotate(5deg)}}
@keyframes pz-pasea{to{transform:translateX(var(--dx))}}
@keyframes pz-bob{50%{transform:translateY(-1.3px)}}
@keyframes pz-llega{from{transform:translateX(-90px)}}
@keyframes pz-cae{from{transform:translateY(-36px); opacity:0}}
@keyframes pz-saltito{50%{transform:translateY(-2.5px)}}
@keyframes pz-destello{50%{opacity:.35}}
@keyframes pz-barre{from{transform:rotate(-12deg)} to{transform:rotate(12deg)}}
@keyframes pz-polvo{from{opacity:.9; transform:translate(0,0) scale(1)} to{opacity:0; transform:translate(-4px,-3px) scale(1.8)}}
@keyframes pz-tambalea{25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)}}
@keyframes pz-avanza{to{stroke-dashoffset:-6}}
@keyframes pz-corazon{0%{opacity:0; transform:translateY(2px) scale(.5)} 30%{opacity:1; transform:translateY(0) scale(1.1)} 100%{opacity:0; transform:translateY(-6px) scale(1)}}
@keyframes pz-latido{0%,100%{transform:scale(1)} 15%{transform:scale(1.14)} 30%{transform:scale(1)} 45%{transform:scale(1.1)}}
@keyframes pz-respira{50%{transform:scale(1.04)}}
.pz .pil{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:2px 0 6px}
.pz .pil span{display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:700; color:var(--navy); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:6px 2px}
.pz .pil i{width:9px; height:9px; border-radius:50%; flex:none}
.pz .int2 .aro{fill:none; stroke-width:10; stroke-linecap:butt}
.pz .int2 .aros{transform-box:fill-box; transform-origin:center; animation:pz-gira 40s linear infinite}
.pz .int2 .aro{stroke-dasharray:0 365; animation:pz-arco 1s calc(.3s + var(--k)*.25s) cubic-bezier(.3,.7,.2,1) forwards}
.pz .int2 .nucleo{fill:var(--navy)}
.pz .int2 .halo{fill:none; stroke:var(--gold); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:pz-anillo 3s ease-out infinite}
.pz .int2 .ct{font:800 13.5px Inter,sans-serif; fill:#fff; text-anchor:middle}
.pz .int2 .rayo{stroke:var(--line); stroke-width:2}
.pz .int2 .flujo{stroke:var(--gold); stroke-width:2; stroke-dasharray:3 6; animation:pz-fluye 1.1s linear infinite reverse}
.pz .int2 .act circle{fill:#fff; stroke:var(--gold); stroke-width:2}
.pz .int2 .act use{color:var(--navy)}
.pz .int2 .act{transform-box:fill-box; transform-origin:center; animation:pz-pop .45s calc(1.2s + var(--k)*.15s) both}
.pz .int2 .at{font:700 12.5px Inter,sans-serif; fill:var(--navy); text-anchor:middle; animation:pz-sube .4s calc(1.4s + var(--k)*.15s) both}
@keyframes pz-arco{to{stroke-dasharray:85 280}}
.pz .escena .vent{fill:#F6D58A; transition:opacity .8s}
.pz .escena .vent.off{opacity:.12}
.pz .escena[data-e="mejor"] .vent.off{opacity:.9}
.pz .escena .foco{transition:fill .8s .5s}
.pz .escena[data-e="mejor"] .foco{fill:#FFE6A8}
.pz .escena .debil{animation:pz-titila 2.8s steps(1) infinite; transition:opacity .6s}
.pz .escena[data-e="mejor"] .debil{animation:none; opacity:0}
.pz .escena .gente{opacity:0; transition:opacity .8s 1.1s}
.pz .escena[data-e="mejor"] .gente{opacity:1}
.pz .escena .globo{transition:fill .8s .9s}
.pz .escena[data-e="mejor"] .globo{fill:#FFE3A3}
.pz .escena .bano .luzv{fill:#5BD08A; opacity:0; transition:opacity .5s 1s}
.pz .escena[data-e="mejor"] .bano .luzv{opacity:1; animation:pz-brilla 2s 1.6s ease-in-out infinite}
.pz .escena .autito{animation:pz-cruza 7s linear infinite}
.pz .escena .carril{stroke:#F2D392; stroke-width:2; stroke-dasharray:14 12; opacity:.45}
.pz .escena .marca circle{fill:#fff; stroke:var(--gold); stroke-width:2}
.pz .escena .marca text{font:800 10.5px Inter,sans-serif; fill:var(--navy); text-anchor:middle}
.pz .escena .rotulo{font:800 10.5px Inter,sans-serif; letter-spacing:.14em; fill:#fff; opacity:.85}
.pz .escena .rotulo.r2{opacity:0; transition:opacity .5s .4s}
.pz .escena .rotulo.r1{transition:opacity .4s}
.pz .escena[data-e="mejor"] .rotulo.r2{opacity:.9}
.pz .escena[data-e="mejor"] .rotulo.r1{opacity:0}
@keyframes pz-titila{0%,62%,70%,100%{opacity:.9} 64%,68%{opacity:.25}}
@keyframes pz-cruza{from{transform:translateX(-60px)} to{transform:translateX(470px)}}
.pz .tl .big span[data-gotea]{position:relative; display:inline-block; transition:color .4s}
.pz .tl .big span.gota{color:var(--gold-d)}
.pz .tl .big .mas1{position:absolute; left:100%; top:-6px; margin-left:4px; font:700 13px Inter,sans-serif; color:var(--ok); white-space:nowrap; pointer-events:none; animation:pz-mas1 1.4s ease-out forwards}
@keyframes pz-mas1{from{opacity:0; transform:translateY(6px)} 25%{opacity:1} to{opacity:0; transform:translateY(-14px)}}
.pz .subt-oir{margin:-6px 0 14px !important; min-height:1.4em; font-size:14.5px !important; line-height:1.4; color:#fff !important; font-style:italic; opacity:0; transition:opacity .3s}
.pz.narrando .subt-oir{opacity:.92}
.pz .g-sol .humo circle{fill:#E6ECF3; opacity:0; transform-box:fill-box; transform-origin:center}
.pz.narrando .g-sol .ln{stroke-dashoffset:0; animation:pz-esfuma .55s ease-out forwards}
.pz.narrando .g-sol .sol{animation:pz-puff .6s ease-out forwards}
.pz.narrando .g-sol .sol.s2{animation-delay:.08s}
.pz.narrando .g-sol .lbl.oro{animation:pz-esfuma .5s forwards}
.pz.narrando .g-sol .viaja{visibility:hidden}
.pz.narrando .g-sol .humo circle{animation:pz-humo-p .85s ease-out forwards}
.pz.narrando .g-sol.cue-on .ln{stroke-dashoffset:220; opacity:1; filter:none; animation:pz-dibuja .9s forwards}
.pz.narrando .g-sol.cue-on .ln.l2{animation-delay:.15s}
.pz.narrando .g-sol.cue-on .sol{opacity:1; filter:none; transform:none; animation:pz-pop .6s .5s both}
.pz.narrando .g-sol.cue-on .sol.s2{animation-delay:.75s}
.pz.narrando .g-sol.cue-on .lbl.oro{opacity:1; filter:none; animation:pz-sube .5s .9s both}
.pz.narrando .g-sol.cue-on .viaja{visibility:visible}
.pz.narrando .g-sol.cue-on .humo circle{animation:none; opacity:0}
@keyframes pz-puff{0%{opacity:1; transform:scale(1); filter:blur(0)} 35%{opacity:.9; transform:scale(1.2)} 100%{opacity:0; transform:scale(1.5); filter:blur(5px)}}
@keyframes pz-esfuma{to{opacity:0; filter:blur(3px)}}
@keyframes pz-humo-p{0%{opacity:0; transform:translate(0,0) scale(.3)} 25%{opacity:.85} 100%{opacity:0; transform:translate(var(--x),var(--y)) scale(1.7)}}
.pz.narrando .g-sol .prob.cue-on{animation:pz-late-fuerte .5s ease-in-out 3}
.pz.narrando b[data-cue]{transition:background .4s, box-shadow .4s; border-radius:4px}
.pz.narrando b[data-cue].cue-on{background:rgba(227,169,59,.28); box-shadow:0 0 0 3px rgba(227,169,59,.28)}
.pz.narrando em [data-cue].cue-on{animation:pz-brota 1s ease-out}
.pz.narrando .btn[data-cue].cue-on{animation:pz-llama-btn 1.1s ease-out 2}
.pz.narrando .btn-ghost[data-cue].cue-on{background:rgba(255,255,255,.2); border-color:#fff}
@keyframes pz-late-fuerte{50%{transform:scale(1.28)}}
@keyframes pz-brota{0%{text-shadow:0 0 0 rgba(227,169,59,0)} 35%{text-shadow:0 0 20px rgba(227,169,59,.95)} 100%{text-shadow:0 0 0 rgba(227,169,59,0)}}
@keyframes pz-llama-btn{from{box-shadow:0 0 0 0 rgba(227,169,59,.85)} to{box-shadow:0 0 0 16px rgba(227,169,59,0)}}
@keyframes pz-aparece{to{opacity:1}}
.pz .escena[data-e="hoy"] .vent.tit{animation:pz-amaga var(--d) steps(1) infinite; animation-delay:var(--r)}
.pz .escena .vig{fill:#FFE3A3}
.pz .escena[data-e="mejor"] .vig{filter:drop-shadow(0 0 3px #FFE3A3)}
@keyframes pz-amaga{0%,100%{opacity:.95} 46%{opacity:.15} 48%{opacity:.9} 51%{opacity:.1} 53%{opacity:.95} 80%{opacity:.4} 82%{opacity:.95}}
.pz .oir{display:inline-flex; width:auto; align-items:center; gap:8px; padding:4px 12px 4px 4px; margin:0 0 14px; background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:30px; font:500 12.5px Inter,sans-serif; color:#B9C4D2; cursor:pointer; transition:border-color .2s, color .2s}
.pz .oir:hover{background:transparent; border-color:rgba(227,169,59,.6); color:#fff}
.pz .oir .play{position:relative; width:26px; height:26px; border-radius:50%; box-shadow:none; background:conic-gradient(var(--gold) calc(var(--p,0) * 1%), rgba(255,255,255,.14) 0)}
.pz .oir .play::before{content:""; position:absolute; inset:2px; border-radius:50%; background:var(--navy)}
.pz .oir .play svg{position:relative; width:11px; height:11px; fill:var(--gold)}
.pz .oir.sonando .play{animation:none}
.pz .subt-oir{font-size:13px !important; opacity:0}
.pz .subt-oir:empty{display:none}
.pz .ruta3{position:relative; padding:6px 0 2px}
.pz .r3-pista{position:absolute; left:16.66%; right:16.66%; top:23px; height:2px; border-radius:2px; background:var(--line)}
.pz .r3-fill{position:absolute; inset:0; border-radius:2px; background:linear-gradient(90deg,var(--gold-l),var(--gold)); transform-origin:left; animation:pz-r3fill 6s ease-in-out infinite}
.pz .r3-punto{position:absolute; top:50%; left:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(227,169,59,.22); animation:pz-r3punto 6s ease-in-out infinite}
.pz .ruta3 ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.pz .ruta3 li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 8px 6px; animation:pz-sube .6s calc(.2s + var(--k) * .18s) both}
.pz .ruta3 li + li::before{content:""; position:absolute; left:0; top:58px; bottom:4px; width:1px; background:linear-gradient(var(--line), rgba(227,220,205,0))}
.pz .r3-n{position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:800 12.5px Fraunces,serif; color:var(--navy); background:var(--card); border:1.5px solid var(--gold); box-shadow:0 0 0 5px var(--card)}
.pz .ruta3 li:nth-child(2) .r3-n{background:var(--gold-l)}
.pz .ruta3 li:nth-child(3) .r3-n{background:var(--gold); border-color:var(--gold-d)}
.pz .r3-huellas{width:100%; max-width:118px; height:auto; margin:16px 0 12px; overflow:visible}
.pz .ruta3 b{display:block; font:700 16.5px/1.2 Fraunces,serif; color:var(--navy); letter-spacing:-.005em; min-height:2.4em}
.pz .ruta3 small{margin-top:6px; font:600 10px Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d)}
.pz .pie{opacity:0; transform-box:fill-box; transform-origin:center; animation:pz-pisada 6s var(--d) infinite}
.pz .pie.p1{fill:#8A93A0}
.pz .pie.p2{fill:#3D5A80}
.pz .pie.p3{fill:var(--gold-d)}
.pz .pie.estela{fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round}
@keyframes pz-pisada{0%{opacity:0; transform:scale(.4)} 5%{opacity:1; transform:scale(1)} 62%{opacity:1} 80%,100%{opacity:0}}
@keyframes pz-r3fill{0%{transform:scaleX(0); opacity:1} 62%,82%{transform:scaleX(1); opacity:1} 100%{transform:scaleX(1); opacity:0}}
@keyframes pz-r3punto{0%{left:0; opacity:1} 62%,82%{left:100%; opacity:1} 100%{left:100%; opacity:0}}
@keyframes pz-flamea{50%{transform:skewY(-5deg) scaleX(.94)}}
.pz .puf{transform-box:fill-box; transform-origin:center}
.pz.narrando .puf:not(.cue-on){animation:pz-puff .6s ease-out forwards !important}
.pz.narrando .puf.cue-on{animation:pz-vuelve .65s cubic-bezier(.2,.8,.2,1) calc(var(--k,0) * .05s) both !important}
.pz .realce{transform-box:fill-box; transform-origin:center}
.pz.narrando .realce.cue-on{animation:pz-realce 1.1s ease-out}
.pz.narrando .brillo.cue-on{animation:pz-brillo-c 1.6s ease-out}
.pz.narrando .resalta[data-cue].cue-on{background:rgba(227,169,59,.45)}
.pz:not(.navy) .oir{color:var(--ink-2); border-color:var(--line)}
.pz:not(.navy) .oir:hover{color:var(--navy); border-color:var(--gold)}
.pz:not(.navy) .oir .play{background:conic-gradient(var(--gold-d) calc(var(--p,0) * 1%), var(--line) 0)}
.pz:not(.navy) .oir .play::before{background:var(--bg)}
.pz:not(.navy) .oir .play svg{fill:var(--gold-d)}
.pz:not(.navy) .subt-oir{color:var(--navy) !important}
@keyframes pz-vuelve{from{opacity:0; transform:scale(.6); filter:blur(5px)} 60%{opacity:1; filter:blur(0)} to{opacity:1; transform:none; filter:none}}
@keyframes pz-realce{30%{transform:scale(1.18); filter:drop-shadow(0 0 8px rgba(227,169,59,.95))} 100%{transform:none; filter:none}}
@keyframes pz-brillo-c{25%{box-shadow:0 0 0 4px rgba(227,169,59,.55)} 100%{box-shadow:0 0 0 0 rgba(227,169,59,0)}}
@keyframes pz-dibuja{to{stroke-dashoffset:0}}
@keyframes pz-pop{from{transform:scale(0); opacity:0} 70%{transform:scale(1.12); opacity:1} to{transform:scale(1)}}
@keyframes pz-sube{from{opacity:0; transform:translateY(10px)}}
@keyframes pz-late{50%{transform:scale(1.07)}}
@keyframes pz-anillo{from{transform:scale(1); opacity:.7} to{transform:scale(1.7); opacity:0}}
@keyframes pz-crece-y{from{transform:scaleY(0)}}
@keyframes pz-crece-x{from{transform:scaleX(0)}}
@keyframes pz-rebota{50%{transform:translateY(-5px)}}
@keyframes pz-rebota-x{50%{transform:translateX(4px)}}
@keyframes pz-brilla{50%{opacity:.4}}
@keyframes pz-gira{to{transform:rotate(360deg)}}
@keyframes pz-fluye{to{stroke-dashoffset:-20}}
@keyframes pz-auto{from{transform:translateX(-50px)} to{transform:translateX(380px)}}
@keyframes pz-humo{0%{opacity:0; transform:translateY(4px)} 40%{opacity:1} 100%{opacity:0; transform:translateY(-10px)}}
@keyframes pz-salta{0%{transform:translate(60px,101px); opacity:0} 6%{opacity:1}
  22%{transform:translate(60px,101px)} 30%{transform:translate(115px,62px)} 38%{transform:translate(170px,71px)}
  54%{transform:translate(170px,71px)} 62%{transform:translate(225px,30px)} 70%{transform:translate(280px,41px)}
  92%{transform:translate(280px,41px); opacity:1} 100%{transform:translate(280px,41px); opacity:0}}

/* ================= encaje en el sitio ================= */
:root{--gold-l:#F2D392}
.ico{fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.pz{position:relative; scroll-margin-top:92px}
.pz + .pz, .pz + h3{margin-top:34px}
.pz p b, .pz li b{color:var(--navy)}
.pz.navy p b{color:#fff}
.pz.navy .hero-sol b{color:var(--gold)}
.pz .jus{text-align:justify; -webkit-hyphens:auto; hyphens:auto}
.pz h4{font-family:var(--serif); font-size:21px; line-height:1.2; color:var(--navy); margin:4px 0 12px}
.pz .g > svg, .pz .sub-g > svg{max-width:460px; margin-inline:auto}
.pz .g-hero{max-width:520px; margin:6px 0 22px}
.pz .datos{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px}
.pz .datos span{background:var(--cream); border-radius:10px; padding:7px 10px; font-size:13px; line-height:1.35; color:var(--ink-2); flex:1 1 30%}
.pz .datos b{display:block; font-family:var(--serif); font-size:21px; color:var(--navy); line-height:1.1}
.pz .q{margin-top:0}
/* ítems de los cuatro temas: el título en mayúscula y en su renglón (pedido de Sergio); el resto de las negritas, normales */
.pz .items li b{display:inline; text-transform:none; letter-spacing:0; font-size:inherit; margin:0; text-align:inherit}
.pz .items li > span:last-child > b:first-child{display:block; text-transform:uppercase; letter-spacing:.03em; font-size:.92em; margin-bottom:2px; text-align:left}
.pz .items li{margin:0}
/* reglas en escritorio: cuatro en fila y la quinta, entera, abajo */
@media(min-width:900px){ .reglas-bg .pz .sellos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.reglas-bg .pz .oir{margin-bottom:12px}
/* el reproductor de cada bloque, en fondo claro */
.pz .oir{margin:0 0 12px}
.pz.navy .oir{margin:2px 0 18px}

/* ================= 09 · Nuestra casa (v2) ================= */
.pz .temas9{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:6px 0 8px}
.pz .tema{--c:#0F2238; --c2:rgba(15,34,56,.14); position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; padding:14px 4px 12px; background:var(--card); border:1px solid var(--line); border-radius:16px; font:600 12.5px/1.2 Inter,system-ui,sans-serif; color:var(--navy); text-align:center; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; animation:pz-sube .5s calc(var(--k) * .06s) both}
.pz .tema .pozo{position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--cream); color:#7C8594; font-style:normal; transition:background .35s, color .35s, box-shadow .35s, opacity .35s, filter .35s; animation:pz-ola 9s calc(2.4s + var(--k) * .3s) ease-out infinite}
.pz .tema svg{width:26px; height:26px; overflow:visible}
:where(.pz .tema svg *){fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.pz .tema svg .lleno{fill:currentColor; stroke:none}
.pz .tema svg *{transform-box:fill-box}
.pz .tema:is(:hover,:focus-visible,.toca){transform:translateY(-4px); border-color:var(--c2); box-shadow:0 14px 26px rgba(15,34,56,.12)}
.pz .tema:is(:hover,:focus-visible,.toca) .pozo, .pz.narrando .tema.cue-on .pozo{background:var(--c); color:#fff; box-shadow:0 0 0 6px var(--c2); animation:none}
.pz.narrando .tema:not(.cue-on) .pozo{opacity:.5; filter:grayscale(1)}
@keyframes pz-ola{0%,9%,100%{box-shadow:0 0 0 0 rgba(227,169,59,0)} 3%{box-shadow:0 0 0 6px rgba(227,169,59,.32)}}
/* lamparita: se prende */
.pz .t-luz{--c2:rgba(242,193,78,.4)}
.pz .t-luz .vidrio{transition:fill .25s, stroke .25s}
.pz .t-luz .rayos{opacity:0; transition:opacity .25s}
.pz .t-luz:is(:hover,:focus-visible,.toca) .vidrio, .pz.narrando .t-luz.cue-on .vidrio{fill:#FFD86B; stroke:#FFD86B}
.pz .t-luz:is(:hover,:focus-visible,.toca) .rayos{opacity:1; stroke:#F2C14E; animation:pz-destello .9s ease-in-out infinite}
.pz .t-luz:is(:hover,:focus-visible,.toca) svg{filter:drop-shadow(0 0 6px rgba(255,210,100,.9))}
/* escoba: barre */
.pz .t-escoba{--c:#2F8F83; --c2:rgba(47,143,131,.22)}
.pz .t-escoba .escoba{transform-origin:100% 0}
.pz .t-escoba .polvo{opacity:0}
.pz .t-escoba:is(:hover,:focus-visible,.toca) .escoba{animation:pz-barre .45s ease-in-out infinite alternate}
.pz .t-escoba:is(:hover,:focus-visible,.toca) .polvo{animation:pz-polvo .9s ease-out infinite}
.pz .t-escoba .polvo:nth-of-type(2){animation-delay:.3s} .pz .t-escoba .polvo:nth-of-type(3){animation-delay:.6s}
/* tacho: se sacude y abre */
.pz .t-tacho{--c:#2F7A55; --c2:rgba(47,122,85,.22)}
.pz .t-tacho .tacho{transform-origin:50% 100%}
.pz .t-tacho .tapa{transform-origin:0 100%; transition:transform .25s}
.pz .t-tacho:is(:hover,:focus-visible,.toca) .tacho{animation:pz-tambalea .5s ease-in-out infinite}
.pz .t-tacho:is(:hover,:focus-visible,.toca) .tapa{transform:translateY(-2px) rotate(-16deg)}
/* baño: se enciende el cartel */
.pz .t-wc{--c:#3D5A80; --c2:rgba(61,90,128,.22)}
.pz .t-wc .wc-t{fill:currentColor; stroke:none; transition:fill .25s}
.pz .t-wc .caja{transition:fill .25s, stroke .25s}
.pz .t-wc:is(:hover,:focus-visible,.toca) .caja, .pz.narrando .t-wc.cue-on .caja{fill:#fff; stroke:#fff}
.pz .t-wc:is(:hover,:focus-visible,.toca) .wc-t, .pz.narrando .t-wc.cue-on .wc-t{fill:#3D5A80}
.pz .t-wc:is(:hover,:focus-visible,.toca) svg{animation:pz-late .6s ease-in-out infinite}
/* calles: avanza la línea */
.pz .t-calle{--c:#555E6B; --c2:rgba(85,94,107,.2)}
.pz .t-calle .linea{stroke-dasharray:3 3}
.pz .t-calle:is(:hover,:focus-visible,.toca) .linea{stroke:var(--gold); animation:pz-avanza .5s linear infinite}
/* estacionamiento: el cartel de la P */
.pz .t-park{--c:#1F6FB2; --c2:rgba(31,111,178,.2)}
.pz .t-park .caja, .pz .t-park .letra{transition:fill .25s, stroke .25s}
.pz .t-park:is(:hover,:focus-visible,.toca) .caja, .pz.narrando .t-park.cue-on .caja{fill:#fff; stroke:#fff}
.pz .t-park:is(:hover,:focus-visible,.toca) .letra, .pz.narrando .t-park.cue-on .letra{stroke:#1F6FB2}
.pz .t-park:is(:hover,:focus-visible,.toca) svg{animation:pz-rebota .5s ease-in-out infinite}
/* convivencia: saltitos y un corazón */
.pz .t-conv{--c:#E3A93B; --c2:rgba(227,169,59,.3)}
.pz .t-conv:is(:hover,:focus-visible,.toca) .pozo, .pz.narrando .t-conv.cue-on .pozo{color:var(--navy)}
.pz .t-conv .corazon{opacity:0; transform-origin:50% 100%; fill:#C2483A}
.pz .t-conv:is(:hover,:focus-visible,.toca) .p1{animation:pz-saltito .6s ease-in-out infinite}
.pz .t-conv:is(:hover,:focus-visible,.toca) .p2{animation:pz-saltito .6s .3s ease-in-out infinite}
.pz .t-conv:is(:hover,:focus-visible,.toca) .corazon{animation:pz-corazon 1.2s ease-out infinite}
/* seguridad: de rojo que late a verde calmo */
.pz .t-seg{--c:#1E7A4C; --c2:rgba(30,122,76,.22)}
.pz .t-seg .pozo{background:#F8E3E0}
.pz .t-seg .escudo{stroke:#B23B2E; transform-origin:50% 50%; animation:pz-latido 1.1s ease-in-out infinite; transition:stroke .4s, fill .4s}
.pz .t-seg .alerta{stroke:#B23B2E; transition:opacity .3s}
.pz .t-seg .check{stroke:#fff; stroke-dasharray:12; stroke-dashoffset:12; transition:stroke-dashoffset .5s .15s}
.pz .t-seg:is(:hover,:focus-visible,.toca) .escudo, .pz.narrando .t-seg.cue-on .escudo{stroke:#fff; fill:rgba(255,255,255,.14); animation:pz-respira 3.2s ease-in-out infinite}
.pz .t-seg:is(:hover,:focus-visible,.toca) .alerta, .pz.narrando .t-seg.cue-on .alerta{opacity:0}
.pz .t-seg:is(:hover,:focus-visible,.toca) .check, .pz.narrando .t-seg.cue-on .check{stroke-dashoffset:0}
.pz .pista9{display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 20px !important; font-size:13px !important; line-height:1.35 !important; color:var(--ink-2) !important; text-align:center !important}
.pz .pista9 svg{flex:none; width:17px; height:17px; color:var(--gold-d); transform-box:fill-box; transform-origin:50% 100%; animation:pz-toque 2.6s ease-in-out infinite}
@keyframes pz-toque{0%,58%,100%{transform:none} 68%{transform:translateY(-2px) rotate(-8deg)} 78%{transform:translateY(1px)}}

/* los cuatro verbos, como un recorrido */
.pz .cadena9{position:relative; margin:4px 0 14px; padding:18px 4px 16px; background:var(--card); border:1px solid var(--line); border-radius:18px}
.pz .c9-pista{position:absolute; left:12.5%; right:12.5%; top:40px; height:2px; border-radius:2px; background:var(--line)}
.pz .c9-fill{position:absolute; inset:0; border-radius:2px; background:linear-gradient(90deg,var(--gold-l),var(--gold)); transform-origin:left; animation:pz-c9fill 7s linear infinite}
.pz .c9-punto{position:absolute; top:50%; left:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(227,169,59,.22); animation:pz-c9punto 7s linear infinite}
.pz .cadena9 ol{position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.pz .cadena9 li{display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; animation:pz-sube .5s calc(.2s + var(--k) * .15s) both}
.pz .c9-n{position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold); box-shadow:0 0 0 5px var(--card); animation:pz-c9n 7s calc(var(--k) * 1.493s) ease-out infinite}
.pz .c9-n svg{width:22px; height:22px}
.pz .cadena9 li:last-child .c9-n{background:var(--gold); color:var(--navy)}
.pz .cadena9 b{margin-top:10px; font:700 15.5px/1.15 Fraunces,Georgia,serif; color:var(--navy)}
.pz .cadena9 small{margin-top:4px; font-size:11.5px; line-height:1.3; color:var(--ink-2)}
@keyframes pz-c9fill{0%{transform:scaleX(0); opacity:1} 64%,86%{transform:scaleX(1); opacity:1} 100%{transform:scaleX(1); opacity:0}}
@keyframes pz-c9punto{0%{left:0; opacity:1} 64%,86%{left:100%; opacity:1} 100%{left:100%; opacity:0}}
@keyframes pz-c9n{0%{transform:scale(1)} 5%{transform:scale(1.14); box-shadow:0 0 0 5px var(--card), 0 0 0 10px rgba(227,169,59,.4)} 16%,100%{transform:scale(1); box-shadow:0 0 0 5px var(--card)}}

/* la plaza de la Torre del Vigía, del día a la tardecita (26 s) */
.pz .casa9{margin:8px 0 18px}
.pz .c9-ante{margin:0 6px 12px; font:italic 600 17px/1.4 Fraunces,Georgia,serif; color:var(--navy); text-align:center; text-wrap:balance}
.pz .vigia{display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 18px 40px rgba(15,34,56,.16), 0 2px 6px rgba(15,34,56,.08)}
.pz .v-lema{font:800 25px Fraunces,Georgia,serif; fill:var(--navy); transform-box:fill-box; transform-origin:0 50%; animation:pz-sube .7s .3s both, pz-lema-t 26s ease-in-out infinite}
.pz .v-subraya{fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:160; stroke-dashoffset:160; animation:pz-dibuja 1.2s 1s cubic-bezier(.4,0,.2,1) forwards}
.pz .v-tarde{opacity:0; animation:pz-v-tarde 26s ease-in-out infinite}
.pz .v-velo{opacity:0; animation:pz-v-velo 26s ease-in-out infinite}
.pz .v-estrellas{fill:#fff; opacity:0; animation:pz-v-luces 26s ease-in-out infinite}
.pz .v-sol{animation:pz-v-sol 26s ease-in-out infinite}
.pz .v-nube{animation:pz-nube 40s linear infinite}
.pz .v-nube.n2{animation-duration:56s; animation-delay:-22s}
.pz .v-nube ellipse{fill:#fff; opacity:.92; animation:pz-nube-t 26s ease-in-out infinite}
.pz .v-aves{animation:pz-aves 24s linear infinite}
.pz .v-aves .ave{transform-box:fill-box; transform-origin:center; animation:pz-aleteo .8s ease-in-out infinite}
.pz .v-aves .a2{animation-delay:-.3s} .pz .v-aves .a3{animation-delay:-.55s}
.pz .v-fondo path{fill:#E6DACA} .pz .v-fondo path:nth-child(even){fill:#DCCCB8}
.pz .v-palmera{fill:none; stroke:#93B08C; stroke-width:2.6; stroke-linecap:round}
.pz .v-ventanas-d{fill:#BCB2A3}
.pz .v-ventanas-l{fill:#FFD98A; opacity:0; animation:pz-v-luces 26s ease-in-out infinite}
.pz .v-halo, .pz .v-charco{opacity:0; animation:pz-v-luces 26s ease-in-out infinite}
.pz .v-charco{fill-opacity:.5}
.pz .v-foco{animation:pz-foco 26s ease-in-out infinite}
.pz .v-mirador{animation:pz-mirador 26s ease-in-out infinite}
.pz .v-bandera{transform-box:fill-box; transform-origin:0 50%; animation:pz-flamea 2.4s ease-in-out infinite}
.pz .v-copa{transform-box:fill-box; transform-origin:50% 100%; animation:pz-copa 6s ease-in-out infinite}
.pz .v-copa.c2{animation-duration:5s; animation-delay:-2s}
.pz .v-paseo{animation:pz-pasea var(--t) ease-in-out infinite alternate}
.pz .v-paso{animation:pz-bob .55s ease-in-out infinite}
.pz .v-charla use:last-child{transform-box:fill-box; transform-origin:50% 100%; animation:pz-charla 3.4s ease-in-out infinite}
.pz .v-flores circle{transform-box:fill-box; transform-origin:center; animation:pz-flor 3.2s ease-in-out infinite}
.pz .v-flores.f2 circle{animation-delay:-1.6s}
@keyframes pz-v-tarde{0%,30%{opacity:0} 48%,72%{opacity:1} 90%,100%{opacity:0}}
@keyframes pz-v-velo{0%,30%{opacity:0} 48%,72%{opacity:.3} 90%,100%{opacity:0}}
@keyframes pz-v-luces{0%,40%{opacity:0} 50%,70%{opacity:1} 80%,100%{opacity:0}}
@keyframes pz-v-sol{0%,28%{transform:translateY(0); opacity:1} 50%,72%{transform:translateY(100px); opacity:0} 73%{transform:translateY(-24px); opacity:0} 92%,100%{transform:translateY(0); opacity:1}}
@keyframes pz-lema-t{0%,32%{fill:#0F2238} 46%,74%{fill:#FFF3DC} 88%,100%{fill:#0F2238}}
@keyframes pz-nube-t{0%,32%{fill:#fff} 46%,74%{fill:#F3C1A2} 88%,100%{fill:#fff}}
@keyframes pz-foco{0%,40%{fill:#F2E8C8} 50%,70%{fill:#FFF1C2} 80%,100%{fill:#F2E8C8}}
@keyframes pz-mirador{0%,40%{fill:#4A4D52} 50%,70%{fill:#FFD98A} 80%,100%{fill:#4A4D52}}
@keyframes pz-aves{from{transform:translate(-70px,74px)} to{transform:translate(450px,30px)}}
@keyframes pz-aleteo{50%{transform:scaleY(.35)}}
@keyframes pz-copa{50%{transform:rotate(1.2deg)}}
@keyframes pz-charla{50%{transform:rotate(-4deg)}}
@keyframes pz-flor{50%{transform:scale(1.3)}}

/* ================= Reproducir propuesta ================= */
.rep{display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1px solid rgba(255,255,255,.22); border-radius:30px; background:transparent; color:#C9D3DF; font:600 12.5px/1 Inter,system-ui,sans-serif; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s}
.rep:hover, .rep:focus-visible{border-color:rgba(227,169,59,.75); color:#fff; outline:none}
.rep i{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--gold); color:var(--navy)}
.rep svg{width:9px; height:9px; fill:currentColor; margin-left:1px}
.rep small{font-weight:500; font-size:11.5px; color:#8FA0B5}
.rep[hidden], .hero .rep[hidden]{display:none}
.cadena-ctl{position:fixed; left:50%; bottom:var(--cc-abajo,18px); z-index:60; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 24px); padding:6px 6px 6px 16px; border-radius:40px; background:rgba(15,34,56,.95); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); font:600 13px/1.2 Inter,system-ui,sans-serif; transform:translate(-50%,180%); transition:transform .45s cubic-bezier(.2,.8,.2,1); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.cadena-ctl{visibility:hidden; opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility .3s}
.cadena-ctl.on{transform:translate(-50%,0); visibility:visible; opacity:1}
.cadena-ctl .cc-t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cadena-ctl .cc-t small{margin-left:6px; font-weight:500; color:#9FB0C4}
.cadena-ctl button{flex:none; display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; cursor:pointer}
.cadena-ctl button:hover{background:rgba(255,255,255,.2)}
.cadena-ctl button.cc-pp{background:var(--gold); color:var(--navy)}
.cadena-ctl svg{width:12px; height:12px; fill:currentColor}
.cadena-ctl .ic-play, .cadena-ctl.pausa .ic-pausa{display:none}
.cadena-ctl.pausa .ic-play{display:block}
.cadena-ctl .cc-barra{position:absolute; left:18px; right:18px; bottom:3px; height:2px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden}
.cadena-ctl .cc-barra i{display:block; height:100%; width:calc(var(--p,0) * 1%); background:var(--gold)}

/* ================= sin JavaScript (vista previa de WhatsApp) e impresión ================= */
html:not(.js) .oir, html:not(.js) .subt-oir, html:not(.js) .esc-tog, html:not(.js) .rep{display:none}
.js .pz:not(.vis) *, .js .pz:not(.vis) *::before, .js .pz:not(.vis) *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){ .pz *, .pz *::before, .pz *::after{animation-duration:.01s !important; animation-iteration-count:1 !important; transition:none !important} }
@media print{
  .oir, .subt-oir, .esc-tog, .rep, .cadena-ctl, .pista9{display:none !important}
  .pz *, .pz *::before, .pz *::after{animation:none !important; transition:none !important}
  .pz .g-sol .ln, .pz .sello .tacha, .pz .hub .linea-o, .pz .camino .avance, .pz .v-subraya{stroke-dashoffset:0 !important}
  .pz .int2 .aro{stroke-dasharray:85 280 !important}
  .pz .pie{opacity:1 !important}
  .pz .r3-punto, .pz .c9-punto{left:100%}
  .pz .g, .pz .sello, .pz .tema, .pz .cadena9, .pz .casa9, .pz .items li, .pz .tl li, .pz .aud, .pz .ruta3, .pz .sub-g{break-inside:avoid}
}
.hero .rep{display:flex; width:max-content; margin:0 0 20px}
/* el sitio usa .camino para las tarjetas de Sumate: que no toque el gráfico del camino */
.pz svg.camino{background:none; border:0; border-radius:0; padding:0}
.pz .g svg.postal, .pz .escena svg{max-width:none}
.ejes{align-items:start}
/* el sitio usa .pasos para INEFOP (con número propio): que no toque los pasos del bloque 07 */
.pz .pasos{counter-reset:none; gap:0; margin:0}
.pz .pasos li{counter-increment:none; background:none; border:0; border-radius:0; padding:0; font-size:inherit}
.pz .pasos li::before{content:none; display:none}
/* 10 · el gráfico de camas responde a la voz */
.pz.narrando .viz-n.cue-on, .pz.narrando .viz-head small.cue-on{animation:pz-brota 1.2s ease-out}
.pz.narrando .cm-fila.cue-on, .pz.narrando .cm-dicho.cue-on, .pz.narrando .cm-ley li.cue-on{animation:pz-brillo-c 1.6s ease-out}
.pz.narrando .cm-ley li.cue-on{border-radius:6px}
/* subtítulo de "Reproducir propuesta", arriba del control flotante: la página se mueve y el texto queda siempre a la vista */
.cadena-ctl .cc-sub{position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%); width:max-content; max-width:min(640px, calc(100vw - 32px)); margin:0; padding:9px 16px; border-radius:14px; background:rgba(15,34,56,.92); color:#fff; font:italic 500 14.5px/1.4 Inter,system-ui,sans-serif; text-align:center; white-space:normal; box-shadow:0 10px 24px rgba(0,0,0,.2); transition:opacity .3s}
.cadena-ctl .cc-sub:empty{opacity:0}