/* CÓMO TRABAJAMOS · el flujo BIM en cinco pasos (Samuel 2026-10-19: «mostrando TODOS LOS
   ARGUMENTOS DE VENTA DE BIM … el modelo con instalaciones»).
   Misma gramática que /showrooms/#todo: una fila de pasos que avanza sola con su barra, y una
   pantalla grande debajo que enseña el paso actual. Lo que se ve en la pantalla es el MODELO REAL
   de Villaggio II (lab/modelos/villaggio-2-260918.frag) renderizado fuera de línea: planta →
   3D, disciplinas, el choque que encontró la fase fina BVH y las piezas por tipo. Los videos
   viven en /bim/media/ y se piden uno a la vez, sólo cuando la sección se asoma. */
.pipe{ padding:clamp(48px,9vh,110px) var(--pad) clamp(40px,7vh,88px); }
.pipe-cab{ max-width:980px; margin:0 auto clamp(26px,4.5vh,48px); text-align:center; }
.pipe-ceja{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.pipe-tit{ margin:14px auto 0; font-size:clamp(32px,4.6vw,60px); font-weight:600; letter-spacing:-.028em; line-height:1.05; text-wrap:balance; }
.pipe-baj{ margin:14px auto 0; max-width:52ch; font-size:clamp(15px,1.1vw,17px); line-height:1.6; color:var(--body); text-wrap:balance; }
.pipe{ overflow-x:clip; }
.pipe-caja{ position:relative; max-width:1180px; margin:0 auto; }
/* la señal: el trazo que se dibuja, la chispa que lo recorre y la onda al llegar */
.pp-senal{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:6; color:var(--blue); }
.pp-senal path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 5px rgba(0,113,227,.55)); }
.pp-chispa{ position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--blue);
  box-shadow:0 0 0 5px rgba(0,113,227,.22), 0 0 20px 5px rgba(0,113,227,.55); pointer-events:none; z-index:7; opacity:0; }
.pp-onda{ position:absolute; z-index:6; pointer-events:none; border:2px solid var(--blue); box-shadow:0 0 0 4px rgba(0,113,227,.18); opacity:0; }

/* ── la fila de pasos ── */
.pp-fila{ list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:0 0 clamp(18px,3vh,28px); }
.pp{ position:relative; display:flex; }
.pp button{ position:relative; width:100%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:4px;
  padding:16px 16px 18px; border:0; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--hair-soft);
  font-family:inherit; color:var(--ink); cursor:pointer; overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; }
.pp button:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(0,113,227,.35), 0 14px 26px -18px rgba(0,113,227,.7); }
.pp button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.pp-cab{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:8px; }
.pp-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--blue); background:rgba(0,113,227,.09); transition:background .25s, color .25s; }
.pp-ic svg{ width:19px; height:19px; }
.pp-num{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); }
.pp b{ font-size:15px; font-weight:600; line-height:1.22; letter-spacing:-.012em; }
.pp small{ font-size:13px; line-height:1.4; color:var(--muted); }
.pp u{ position:absolute; left:0; right:0; bottom:0; height:3px; text-decoration:none; background:transparent; }
.pp u::after{ content:''; position:absolute; inset:0; background:var(--blue); transform-origin:0 50%; transform:scaleX(var(--p,0)); }
.pp.ahora button{ box-shadow:0 0 0 2px var(--blue), 0 18px 34px -20px rgba(0,113,227,.8); }
.pp.ahora .pp-ic, .pp.hecho .pp-ic{ background:var(--blue); color:#fff; }
.pp.ahora u{ background:rgba(0,113,227,.14); }

/* ── la pantalla ── */
.pp-pant{ position:relative; aspect-ratio:16/10; border-radius:clamp(12px,1.4vw,20px); overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(10,10,10,.05), 0 18px 48px -24px rgba(10,10,10,.22), 0 0 0 1px var(--hair-soft);
  container-type:inline-size; max-width:min(1180px, (100svh - 300px) * 1.6); margin:0 auto; }
.pp-pant{ cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; transition:background-color .6s ease; }
.pp-pant.arrastrando{ cursor:grabbing; }
/* el lienzo lleva los dos videos que se relevan */
.pp-lienzo{ position:absolute; inset:0; overflow:hidden; }
.pp-lienzo video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#fff; opacity:0; }
.pp-lienzo video.on{ opacity:1; }
.pp-arrastra{ left:50%; top:50%; translate:-50% -50%; z-index:5; opacity:0; transition:opacity .4s; pointer-events:none; }
.pp-arrastra.on{ opacity:1; }
.pp-arrastra svg{ width:1.3em; height:1.3em; }
.pp-capa{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; pointer-events:none; }
.pp-capa.on{ opacity:1; visibility:visible; transition:opacity .45s ease; }

/* Las etiquetas de la pantalla escalan con la pantalla (unidades de contenedor): en un teléfono
   la pantalla mide 343 px y un rótulo fijo de 13 px taparía medio edificio. */
.pp-chip{ position:absolute; display:inline-flex; align-items:center; gap:.55em; padding:.5em .9em; border-radius:999px;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(10,10,10,.06), 0 8px 20px -12px rgba(10,10,10,.3);
  font-size:max(10px,1.15cqw); font-weight:600; color:var(--ink); white-space:nowrap; }
.pp-cred{ left:2cqw; top:2cqw; font-family:var(--mono); font-weight:400; font-size:max(9px,.9cqw); letter-spacing:.12em; text-transform:uppercase; color:var(--body); }
.pp-pie{ position:absolute; left:50%; bottom:2.2cqw; translate:-50% 0; z-index:5; max-width:92%; overflow:hidden; text-overflow:ellipsis;
  padding:.55em 1.05em; border-radius:999px; background:rgba(10,10,10,.82); color:#fff;
  font-size:max(11px,1.25cqw); font-weight:500; white-space:nowrap; pointer-events:none; }

/* leyenda de disciplinas / del choque */
.pp-ley{ position:absolute; right:2cqw; top:2cqw; display:flex; flex-direction:column; align-items:flex-end; gap:.8cqw; }
.pp-ley .pp-chip{ position:static; opacity:.42; transition:opacity .35s ease, transform .35s ease; }
.pp-ley .pp-chip.on{ opacity:1; }
.pp-ley i{ width:.75em; height:.75em; border-radius:50%; background:var(--c); flex:none; }
.pp-ley.fija .pp-chip{ opacity:1; }

/* paso 1: rótulos que cambian */
.pp-rot{ left:2cqw; top:6.2cqw; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; }
.pp-rot.on{ opacity:1; transform:none; }

/* paso 3: la tarjeta del choque */
.pp-choque{ position:absolute; left:2.4cqw; top:7cqw; width:min(34cqw,330px); padding:1.4cqw 1.6cqw; border-radius:1.4cqw;
  background:rgba(255,255,255,.94); box-shadow:0 0 0 1px rgba(10,10,10,.06), 0 18px 40px -20px rgba(10,10,10,.4);
  opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; font-size:max(10px,1.15cqw); }
.pp-choque.on{ opacity:1; transform:none; }
.pp-choque .tag{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--mono); font-size:.82em; letter-spacing:.12em; text-transform:uppercase; color:#C9271D; }
.pp-choque .tag::before{ content:''; width:.7em; height:.7em; border-radius:50%; background:#FF3B30; }
.pp-choque b{ display:block; margin-top:.5em; font-size:1.35em; line-height:1.2; letter-spacing:-.01em; }
.pp-choque p{ margin-top:.45em; color:var(--body); line-height:1.4; }

/* paso 4: piezas por tipo + la lámina */
.pp-tabla{ position:absolute; right:2cqw; top:2cqw; width:min(30cqw,300px); padding:1.3cqw 1.5cqw; border-radius:1.4cqw;
  background:rgba(255,255,255,.94); box-shadow:0 0 0 1px rgba(10,10,10,.06), 0 18px 40px -20px rgba(10,10,10,.35); font-size:max(10px,1.1cqw); }
.pp-tabla h3{ font-family:var(--mono); font-size:.8em; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.6em; }
.pp-tabla ul{ list-style:none; }
.pp-tabla li{ display:flex; align-items:center; gap:.6em; padding:.42em 0; border-top:1px solid var(--hair-soft); opacity:0; transform:translateX(6px);
  transition:opacity .35s ease calc(var(--i) * 90ms), transform .35s ease calc(var(--i) * 90ms); }
.pp-capa.on .pp-tabla li{ opacity:1; transform:none; }
.pp-tabla li i{ width:.8em; height:.8em; border-radius:3px; background:var(--c); flex:none; }
.pp-tabla li span{ flex:1; }
.pp-tabla li em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; }

/* paso 4: las hojas del proyecto ejecutivo salen del modelo y se abren en abanico */
.pp-hojas{ position:absolute; left:3cqw; bottom:9cqw; width:46cqw; height:20cqw; pointer-events:none; }
.pp-hoja{ position:absolute; left:0; bottom:0; width:21cqw; border-radius:.8cqw; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(10,10,10,.1), 0 18px 36px -18px rgba(10,10,10,.45); font-size:max(8px,.85cqw);
  opacity:0; transform:translate(22cqw,-14cqw) scale(.35) rotate(0deg); transform-origin:50% 100%;
  transition:opacity .45s ease, transform .9s cubic-bezier(.2,.8,.25,1); }
.pp-hoja.on{ opacity:1; transform:translateX(calc(var(--k) * 8.4cqw)) rotate(calc(-7deg + var(--k) * 4.6deg)); }
.pp-hoja img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.pp-hoja figcaption{ display:flex; justify-content:space-between; gap:.6em; padding:.45em .7em; border-top:1px solid var(--hair-soft);
  font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--body); white-space:nowrap; }

/* paso 5: lo que ganas, GRANDE (Samuel: «esto más grande»), una por una sobre el modelo atenuado */
.pp-capa[data-capa="4"]::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.62), rgba(255,255,255,.38));
  opacity:0; transition:opacity .8s ease .2s; }
.pp-capa[data-capa="4"].on::before{ opacity:1; }
.pp-bond{ position:absolute; inset:9cqw 6cqw 13cqw; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:1.6cqw 2cqw; }
.pp-bond .pp-chip{ position:static; justify-self:stretch; white-space:normal; gap:.65em; padding:.75em 1.1em; border-radius:1.2em;
  font-size:max(13px,2.1cqw); font-weight:700; letter-spacing:-.015em; line-height:1.2; background:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(10,10,10,.05), 0 14px 30px -16px rgba(10,10,10,.35);
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .45s ease, transform .6s cubic-bezier(.3,1.5,.5,1); }
.pp-bond .pp-chip.on{ opacity:1; transform:none; }
.pp-bond .pp-chip i{ width:1.35em; height:1.35em; border-radius:50%; flex:none; background:var(--blue)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/68% no-repeat; }

/* ── teléfono y tableta ── */
@media (max-width:899px){
  .pp-fila{ display:flex; overflow-x:auto; scrollbar-width:none; gap:12px; padding:4px 2px 10px; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding-left:var(--pad); padding-right:var(--pad); scroll-snap-type:x mandatory; scroll-padding:0 var(--pad); }
  .pp-fila::-webkit-scrollbar{ display:none; }
  .pp{ flex:0 0 min(64vw,230px); scroll-snap-align:start; }
  .pp small{ display:none; }
  .pp-pant{ aspect-ratio:4/3; }
  .pp-ley, .pp-tabla{ right:2.4cqw; top:2.4cqw; }
  .pp-tabla{ width:44cqw; font-size:max(10px,2cqw); }
  .pp-choque{ width:58cqw; font-size:max(10px,2.2cqw); top:auto; bottom:19cqw; }
  /* en el teléfono no caben las dos tarjetas: la tabla cede su lugar cuando llega la lámina */
  /* en el teléfono no caben tabla y hojas: la tabla cede su lugar cuando salen las hojas */
  .pp-hojas{ left:4cqw; bottom:16cqw; width:92cqw; height:34cqw; }
  .pp-hoja{ width:38cqw; font-size:max(8px,1.7cqw); }
  .pp-hoja.on{ transform:translateX(calc(var(--k) * 16cqw)) rotate(calc(-7deg + var(--k) * 4.6deg)); }
  .pp-tabla{ transition:opacity .35s ease; }
  .pp-capa:has(.pp-hoja.on) .pp-tabla{ opacity:0; }
  .pp-bond{ inset:10cqw 3.5cqw 17cqw; gap:1.8cqw; }
  .pp-bond .pp-chip{ font-size:max(11px,2.9cqw); padding:.6em .8em; border-radius:1em; }
  .pp-chip{ font-size:max(10px,2.2cqw); }
  .pp-pie{ font-size:max(11px,2.6cqw); bottom:3cqw; white-space:normal; text-align:center; width:max-content; border-radius:14px; line-height:1.3; }
  .pp-cred{ font-size:max(9px,1.8cqw); }
  .pp-rot{ top:9cqw; }
}
@media (prefers-reduced-motion:reduce){
  .pp button, .pp-capa, .pp-chip, .pp-choque, .pp-hoja, .pp-tabla li, .pp-bond .pp-chip{ transition:none; }
}

/* ── POR QUÉ BIM · bento (Samuel 19-oct: «más bonito esto… más atractivo»). Cada tarjeta lleva una
   imagen REAL del modelo de Villaggio II, sobre un fondo tenue propio; el blanco del render se
   multiplica contra el tinte, así el modelo se apoya en el color sin recuadro. ── */
.bond{ padding:clamp(24px,5vh,64px) var(--pad) clamp(48px,8vh,96px); }
.bond-tit{ font-size:clamp(28px,3.6vw,46px); }
.bento{ list-style:none; max-width:1180px; margin:0 auto; display:grid; gap:14px; grid-template-columns:repeat(6,minmax(0,1fr)); }
.bt{ grid-column:span 2; position:relative; display:flex; flex-direction:column; border-radius:26px; overflow:hidden; background:var(--tint);
  transition:opacity .7s ease calc(var(--i,0) * 80ms), transform .7s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 80ms); }
.bt-grande{ grid-column:span 4; }
.bt-alta{ grid-column:span 2; }
.bt-ancha{ grid-column:span 6; flex-direction:row-reverse; align-items:center; }
.bt-vis{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.bt-grande .bt-vis{ aspect-ratio:16/8.4; }
.bt-alta .bt-vis{ flex:1; aspect-ratio:auto; min-height:220px; }
.bt-ancha .bt-vis{ flex:1.25; align-self:stretch; aspect-ratio:auto; min-height:240px; }
.bt-vis > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply;
  transform:scale(1.1); transition:transform 7s cubic-bezier(.2,.6,.3,1); }
.bond.in .bt-vis > img{ transform:scale(1.01); }
.bt:hover .bt-vis > img{ transform:scale(1.05); transition-duration:1.2s; }
.bt-txt{ padding:20px 24px 26px; }
.bt-ancha .bt-txt{ flex:1; padding:28px clamp(24px,3vw,44px); }
.bt h3{ font-size:clamp(21px,1.9vw,28px); font-weight:600; letter-spacing:-.022em; line-height:1.12; }
.bt-grande h3{ font-size:clamp(24px,2.5vw,36px); }
.bt p{ margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--body); max-width:44ch; }
/* lo que va encima de cada imagen */
.bt-tag{ position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.92); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#C9271D;
  box-shadow:0 8px 20px -12px rgba(10,10,10,.35); }
.bt-tag-rojo::before{ content:''; width:8px; height:8px; border-radius:50%; background:#FF3B30; animation:btLat 1.6s ease-in-out infinite; }
@keyframes btLat{ 50%{ box-shadow:0 0 0 6px rgba(255,59,48,.18); } }
.bt-hojas img{ position:absolute; left:50%; top:50%; width:62%; height:auto; aspect-ratio:16/10; object-fit:cover; mix-blend-mode:normal; border-radius:8px;
  box-shadow:0 0 0 1px rgba(10,10,10,.08), 0 16px 32px -16px rgba(10,10,10,.45);
  transform:translate(-50%,-50%) rotate(0deg); transition:transform 1.1s cubic-bezier(.2,.8,.25,1) calc(.25s + var(--k) * 120ms); }
.bond.in .bt-hojas img{ transform:translate(calc(-50% + (var(--k) - 1) * 16%), calc(-50% + (var(--k) - 1) * 9%)) rotate(calc((var(--k) - 1) * 7deg)); }
.bt-cuenta{ position:absolute; right:14px; bottom:14px; list-style:none; min-width:min(210px,62%); padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.93); box-shadow:0 10px 24px -14px rgba(10,10,10,.4); font-size:12.5px; }
.bt-cuenta li{ display:flex; align-items:center; gap:7px; padding:3px 0; }
.bt-cuenta i{ width:9px; height:9px; border-radius:3px; background:var(--c); flex:none; }
.bt-cuenta span{ flex:1; color:var(--body); }
.bt-cuenta em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; }
.bt-capas{ position:absolute; left:14px; top:14px; display:flex; flex-direction:column; gap:6px; }
.bt-capas b{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.9); font-size:12px; font-weight:500; }
.bt-capas b::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--c); }
.bt-pin{ position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px; box-shadow:0 0 0 6px rgba(0,113,227,.22); animation:btPin 2s ease-in-out infinite; }
@keyframes btPin{ 50%{ box-shadow:0 0 0 12px rgba(0,113,227,.07); } }
.bt-nota{ position:absolute; left:calc(50% + 24px); top:calc(50% - 46px); padding:8px 12px; border-radius:12px 12px 12px 4px; background:#fff;
  font-size:13px; font-weight:500; box-shadow:0 10px 24px -12px rgba(10,10,10,.4); white-space:nowrap; }
/* la entrada sólo existe si el JS corrió */
.bond.js:not(.in) .bt{ opacity:0; transform:translateY(16px); }
@media (max-width:899px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bt, .bt-alta{ grid-column:span 1; }
  .bt-grande, .bt-ancha{ grid-column:span 2; }
  .bt-alta .bt-vis{ aspect-ratio:16/10; min-height:0; flex:none; }
}
@media (max-width:600px){
  .bento{ grid-template-columns:minmax(0,1fr); }
  .bt, .bt-alta, .bt-grande, .bt-ancha{ grid-column:auto; }
  .bt-ancha{ flex-direction:column; align-items:stretch; }
  .bt-ancha .bt-vis{ flex:none; aspect-ratio:16/10; min-height:0; }
  .bt-grande .bt-vis{ aspect-ratio:16/10; }
  .bt-txt, .bt-ancha .bt-txt{ padding:18px 20px 22px; }
  .bt-nota{ left:auto; right:12px; }
}
@media (prefers-reduced-motion:reduce){
  .bt, .bt-vis > img, .bt-hojas img{ transition:none; }
  .bt-vis > img{ transform:none; }
  .bt-hojas img{ transform:translate(calc(-50% + (var(--k) - 1) * 16%), calc(-50% + (var(--k) - 1) * 9%)) rotate(calc((var(--k) - 1) * 7deg)); }
  .bt-tag-rojo::before, .bt-pin{ animation:none; }
}

/* ═══ MOTION GRAPHICS (Samuel 19-oct: «métele más emoción y motion graphics… los textos un poco más
   grandes»). Todo va ENCIMA del video y sincronizado a su segundo; nada se vuelve a renderizar. ═══ */
/* velo suave abajo: el título grande se lee sobre cualquier cuadro */
.pp-velo{ position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none; z-index:1;
  background:linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,.55) 45%, rgba(255,255,255,0)); }
/* el título cinético: kicker + frase que entra palabra por palabra desde una máscara */
.pp-pie{ left:3.2cqw; right:auto; bottom:5.2cqw; translate:none; max-width:min(64%, 640px); padding:0; border-radius:0;
  background:none; color:var(--ink); white-space:normal; overflow:visible; text-overflow:clip; z-index:5; text-align:left; width:auto; }
.pp-pie .k{ display:block; margin-bottom:.7em; font-family:var(--mono); font-size:max(10.5px,1.05cqw); font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.pp-pie .f{ display:block; font-size:max(20px,3.3cqw); font-weight:700; letter-spacing:-.03em; line-height:1.06; text-wrap:balance; }
.pp-pie .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.pp-pie .w i{ display:inline-block; font-style:normal; transform:translateY(110%); transition:transform .75s cubic-bezier(.2,.85,.2,1) calc(.12s + var(--n) * 65ms); }
.pp-pie.ya .k{ opacity:1; transform:none; }
.pp-pie.ya .w i{ transform:none; }
/* la barra de escenas, abajo: cinco tramos del largo de cada escena */
.pp-linea{ position:absolute; left:3.2cqw; right:3.2cqw; bottom:2.2cqw; z-index:5; display:flex; gap:.6cqw; pointer-events:none; }
.pp-linea i{ flex:var(--d) 1 0; height:3px; border-radius:3px; background:rgba(10,10,10,.12); overflow:hidden; position:relative; }
.pp-linea b{ position:absolute; inset:0; background:var(--blue); transform-origin:0 50%; transform:scaleX(var(--p,0)); }
/* dibujo de líneas: todo trazo con pathLength=1 se dibuja al encenderse */
.pp-sobre{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
.pp-sobre g{ opacity:0; transition:opacity .35s ease; }
.pp-sobre g.on{ opacity:1; }
.pp-sobre path{ fill:none; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s cubic-bezier(.6,0,.2,1); }
.pp-sobre g.on path{ stroke-dashoffset:0; }
/* escena 1: cotas sobre el plano */
.pp-cota path{ stroke:#0071E3; stroke-width:1.6; }
.pp-cota path:nth-of-type(2), .pp-cota path:nth-of-type(5){ transition-delay:.25s; }
.pp-cota path:nth-of-type(3), .pp-cota path:nth-of-type(6){ transition-delay:.4s; }
.pp-cota text{ font:500 15px Menlo, 'Fragment Mono', monospace; fill:#0071E3; text-anchor:middle; opacity:0; transition:opacity .4s ease .5s; }
.pp-cota.on text{ opacity:1; }
/* escena 3: la mira que se cierra sobre el choque */
.pp-mira .anillo{ fill:none; stroke:#FF3B30; stroke-width:3; transform-origin:640px 400px; transform:scale(2.4); opacity:0;
  transition:transform .7s cubic-bezier(.2,.9,.25,1), opacity .4s ease; }
.pp-mira.on .anillo{ transform:scale(1); opacity:1; }
.pp-mira .pulso{ fill:none; stroke:#FF3B30; stroke-width:2; transform-origin:640px 400px; opacity:0; }
.pp-mira.on .pulso{ animation:ppPulso 1.6s cubic-bezier(.2,.7,.3,1) .7s infinite; }
@keyframes ppPulso{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(2.2); opacity:0; } }
.pp-mira path{ stroke:#FF3B30; stroke-width:3; stroke-linecap:round; transition-delay:.35s; }
.pp-mira .centro{ fill:#FF3B30; }
/* guía que une un rótulo con su punto en el modelo */
.pp-graf{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; overflow:visible; }
.pp-graf .guia{ fill:none; stroke:var(--gc,#0A0A0A); stroke-width:1.5; stroke-linecap:round; }
.pp-graf .guia-punto{ fill:#fff; stroke:var(--gc,#0A0A0A); stroke-width:2.5; opacity:0; }
/* escena 2: las disciplinas, grandes, con su conteo */
.pp-disc2{ position:absolute; right:3cqw; top:3cqw; display:flex; flex-direction:column; align-items:flex-end; gap:1.1cqw; z-index:3; }
.pp-disc2 .dg{ display:flex; flex-direction:column; align-items:flex-end; gap:.3em; padding:.7em 1em; border-radius:1em; background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(10,10,10,.05), 0 14px 30px -18px rgba(10,10,10,.4); font-size:max(10.5px,1.32cqw);
  opacity:0; transform:translateX(14px) scale(.9); transform-origin:100% 50%; transition:opacity .45s ease, transform .6s cubic-bezier(.3,1.4,.5,1); }
.pp-disc2 .dg.on{ opacity:.55; transform:scale(.82); }
.pp-disc2 .dg.on.activo{ opacity:1; transform:none; }
.pp-disc2 b{ display:flex; align-items:center; gap:.45em; font-size:1.9em; font-weight:700; letter-spacing:-.025em; color:var(--c); line-height:1.05; }
.pp-disc2 b::before{ content:''; width:.42em; height:.42em; border-radius:50%; background:var(--c); }
.pp-disc2 .cnt{ font-size:1.05em; color:var(--body); white-space:nowrap; }
.pp-disc2 .cnt em{ font-style:normal; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
/* escena 3: la llamada del choque, más grande */
.pp-pant[data-paso="2"] .pp-ley{ top:auto; bottom:6.5cqw; z-index:5; }
.pp-choque{ left:auto; right:3cqw; top:6cqw; width:min(34cqw,360px); font-size:max(10.5px,1.3cqw); }
.pp-choque b{ font-size:1.6em; }
/* escena 4: números grandes; y cada hoja recibe su sello */
.pp-tabla{ width:min(33cqw,340px); font-size:max(10px,1.15cqw); }
.pp-tabla li{ padding:.5em 0; }
.pp-tabla li em{ font-size:1.65em; letter-spacing:-.02em; }
.pp-hojas{ left:auto; right:3cqw; bottom:9cqw; }
.pp-hoja figcaption span:last-child{ display:inline-block; padding:.05em .4em; border:1.5px solid #C9271D; border-radius:.3em; color:#C9271D; font-weight:600; }
.pp-hoja.on figcaption span:last-child{ animation:ppSello .55s cubic-bezier(.3,1.6,.5,1) .75s both; }
@keyframes ppSello{ from{ transform:scale(2.2) rotate(-14deg); opacity:0; } to{ transform:rotate(-4deg); opacity:1; } }
/* escena 5: cada razón entra con un estallido en su palomita */
.pp-bond{ inset:4cqw 6cqw 19cqw; }
.pp-bond .pp-chip i{ position:relative; }
.pp-bond .pp-chip i::after{ content:''; position:absolute; inset:-.55em; border-radius:50%; opacity:0;
  background:radial-gradient(circle, transparent 52%, rgba(0,113,227,.45) 54%, transparent 64%),
    conic-gradient(from 0deg, var(--blue) 0 4%, transparent 4% 12.5%, var(--blue) 12.5% 16.5%, transparent 16.5% 25%, var(--blue) 25% 29%, transparent 29% 37.5%, var(--blue) 37.5% 41.5%, transparent 41.5% 50%, var(--blue) 50% 54%, transparent 54% 62.5%, var(--blue) 62.5% 66.5%, transparent 66.5% 75%, var(--blue) 75% 79%, transparent 79% 87.5%, var(--blue) 87.5% 91.5%, transparent 91.5%);
  -webkit-mask:radial-gradient(circle, transparent 55%, #000 56%); mask:radial-gradient(circle, transparent 55%, #000 56%); }
.pp-bond .pp-chip.on i::after{ animation:ppEstalla .7s cubic-bezier(.2,.7,.3,1) .1s both; }
@keyframes ppEstalla{ 0%{ transform:scale(.4); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
.pp-bond .pp-chip.on i{ animation:ppCheck .5s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes ppCheck{ from{ transform:scale(.2); } to{ transform:none; } }
/* escena 1: el cajetín y el nombre ya vienen en el plano */
.pp-pant[data-paso="0"] .pp-cred{ opacity:0; }
.pp-cred{ transition:opacity .4s; z-index:3; }
@media (max-width:899px){
  .pp-pie{ left:4cqw; bottom:7cqw; max-width:84%; }
  .pp-pie .k{ font-size:max(9.5px,2.2cqw); }
  .pp-pie .f{ font-size:max(20px,5.6cqw); }
  .pp-linea{ left:4cqw; right:4cqw; bottom:3cqw; }
  .pp-velo{ height:52%; }
  .pp-disc2{ right:3cqw; top:3cqw; gap:1.6cqw; }
  .pp-disc2 .dg{ font-size:max(9px,2cqw); padding:.55em .8em; }
  .pp-disc2 .dg.on:not(.activo){ display:none; }
  .pp-choque{ right:3cqw; top:3cqw; bottom:auto; width:62cqw; font-size:max(10px,2.4cqw); }
  .pp-pant[data-paso="2"] .pp-cred{ opacity:0; }
  .pp-pant[data-paso="2"] .pp-ley{ display:none; }
  .pp-tabla{ width:52cqw; font-size:max(9.5px,2.1cqw); }
  .pp-hojas{ left:4cqw; right:auto; bottom:30cqw; }
  .pp-bond{ inset:3cqw 3cqw 27cqw; gap:1.4cqw; }
  .pp-bond .pp-chip{ padding:.5em .7em; }
  .pp-pant[data-paso="4"] .pp-cred{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .pp-pie .k, .pp-pie .w i, .pp-sobre path, .pp-sobre g, .pp-mira .anillo, .pp-disc2 .dg{ transition:none; }
  .pp-mira.on .pulso, .pp-hoja.on figcaption span:last-child, .pp-bond .pp-chip.on i::after, .pp-bond .pp-chip.on i{ animation:none; }
}