/* Layout: página de sistema. Portada partida (texto | la ventana de cerca), navegación de la página fija bajo la cabecera
     con la barra de lectura, y bloques: resumen con «pieza a pieza» (el render quieto y cada pieza dibujándose al bajar),
     aperturas, configurador por pasos (ventana en 3D y visor WebGL bajo demanda), datos del perfil dibujados, nudo central,
     ambiente, vidrio y herraje, descargas, otras series, preguntas y presupuesto. */



  /* ============ VENTANA REAL QUE ABRE (.vr) ============
     La foto del producto (todas en el mismo antracita, vidrio limpio sobre blanco), quieta. Encima, la hoja activa
     recortada de la misma foto como un ARO (el vidrio va hueco, con un cristal translúcido propio, para que al abrir no
     se lleve una imagen pegada), con el grosor del perfil en los cantos y una manilla con volumen que gira antes.
     Detrás, el hueco: blanco, como el fondo de la foto. Con .mueve reproduce la apertura de su tipo.
     Geometría medida en cada foto, en fracciones: --sx/--sy/--sw/--sh la hoja; --hx/--hy/--hw/--hh el hueco;
     --ix0/--iy0/--ix1/--iy1 el vidrio dentro de la hoja; --mx/--my/--mw/--mh la manilla dentro de la hoja. */
  .vr { position: relative; width: 100%; margin: 0 auto; perspective: 700px; mix-blend-mode: multiply; }
  /* en reposo, todo plano: el 3D (perspectiva, cantos, capas de la manilla) solo mientras se mueve. Quieta se ve igual, y
     la página no arrastra decenas de capas compuestas en cada fotograma del scroll (auditoría del 18/10, C2) */
  .vr:not(.mueve) { perspective: none; }
  .vr:not(.mueve) .vr-hoja, .vr:not(.mueve) .vr-bas, .vr:not(.mueve) .vr-mani { transform-style: flat; }
  .vr:not(.mueve) .vr-canto, .vr:not(.mueve) .vr-mani i:not(:last-child) { display: none; }
  .vr > * { position: absolute; }
  .vr-base { inset: 0; background: var(--foto) 0 0 / 100% 100% no-repeat; }
  .vr-hueco { left: calc(var(--hx) * 100%); top: calc(var(--hy) * 100%); width: calc(var(--hw) * 100%); height: calc(var(--hh) * 100%);
    background: linear-gradient(180deg, rgba(14, 17, 22, .12), rgba(14, 17, 22, 0) 16%, rgba(14, 17, 22, 0) 86%, rgba(14, 17, 22, .08)), linear-gradient(270deg, rgba(14, 17, 22, .2), rgba(14, 17, 22, 0) 22%), #f3f4f5;
    box-shadow: inset 0 0 0 2px rgba(35, 39, 43, .55), inset 6px 6px 12px -6px rgba(14, 17, 22, .35); }
  .vr-tapa { background: var(--tapa); }
  /* el cristal de la parte fija y el que queda sobre el hueco (cuando la hoja está cerrada), con el mismo brillo que el de la hoja */
  .vr > .vr-fijo { left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); background: linear-gradient(118deg, rgba(178, 198, 212, .42) 0%, rgba(235, 242, 246, .12) 42%, rgba(178, 198, 212, .36) 100%); }
  .vr > .vr-vidrio-hueco { display: none; }
  .vr-hoja { left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%); width: calc(var(--sw) * 100%); height: calc(var(--sh) * 100%); transform-origin: 100% 50%; transform-style: preserve-3d; }
  .vr-bas { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; }
  .vr-bas > * { position: absolute; }
  .vr-cara { inset: 0; background: var(--foto) no-repeat; background-size: calc(100% / var(--sw)) calc(100% / var(--sh));
    background-position: calc(var(--sx) / (1 - var(--sw)) * 100%) calc(var(--sy) / (1 - var(--sh)) * 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--ix0) var(--iy0), var(--ix0) var(--iy1), var(--ix1) var(--iy1), var(--ix1) var(--iy0), var(--ix0) var(--iy0)); }
  .vr-vidrio { left: var(--ix0); top: var(--iy0); right: calc(100% - var(--ix1)); bottom: calc(100% - var(--iy1));
    background: linear-gradient(118deg, rgba(178, 198, 212, .42) 0%, rgba(235, 242, 246, .12) 42%, rgba(178, 198, 212, .36) 100%); transform: translateZ(-1px); }
  /* el grosor del perfil: el canto libre (se ve al abrir) y el de arriba (se ve al bascular) */
  .vr-canto { background: linear-gradient(90deg, #23272b, #4a5158); }
  .vr-canto-l { left: 0; top: 0; bottom: 0; width: var(--grueso, 9%); transform-origin: 0 50%; transform: rotateY(90deg); }
  .vr-canto-t { left: 0; right: 0; top: 0; height: var(--grueso-t, 6%); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(180deg, #5a6362, #343a3a); }
  .vr-bas > .vr-tapa { left: calc(var(--tx) * 100%); top: calc(var(--ty) * 100%); width: calc(var(--tw) * 100%); height: calc(var(--th) * 100%); }
  /* la manilla: varias capas a distinta profundidad, para que tenga volumen al girar la hoja */
  .vr-mani { left: calc(var(--mx) * 100%); top: calc(var(--my) * 100%); width: calc(var(--mw) * 100%); height: calc(var(--mh) * 100%); transform-origin: var(--mo, 50% 14%); transform-style: preserve-3d; }
  .vr-mani i { position: absolute; inset: 0; background: var(--mani) center / 100% 100% no-repeat; }
  .vr-mani i:nth-child(1) { transform: translateZ(0.9px); filter: brightness(0.49); }
  .vr-mani i:nth-child(2) { transform: translateZ(1.8px); filter: brightness(0.56); }
  .vr-mani i:nth-child(3) { transform: translateZ(2.7px); filter: brightness(0.63); }
  .vr-mani i:nth-child(4) { transform: translateZ(3.6px); filter: brightness(0.70); }
  .vr-mani i:nth-child(5) { transform: translateZ(4.5px); filter: brightness(0.77); }
  .vr-mani i:nth-child(6) { transform: translateZ(5.4px); filter: brightness(0.84); }
  .vr-mani i:nth-child(7) { transform: translateZ(6.3px); filter: brightness(0.91); }
  .vr-mani i:nth-child(8) { transform: translateZ(7.2px); filter: brightness(0.98); }
  .vr-mani i:nth-child(9) { transform: translateZ(8.1px); }

  /* fotos reales de producto (sin re-teñir), recortadas al marco: la 70 Line de frente, una corredera y una elevadora */
  /* abatible: la 70 Line; hoja derecha, bisagras a la derecha, manilla centrada en el nudo (un poco mayor, para leerla) */
  .vr-abatible { aspect-ratio: 924 / 990; max-width: 210px; --tapa: #2f3338;
    --sx: .4968; --sy: .0263; --sw: .4762; --sh: .9475; --hx: .4968; --hy: .0263; --hw: .4762; --hh: .9475;
    --ix0: 11.36%; --iy0: 6.5%; --ix1: 86.36%; --iy1: 93.6%; --fx: 9.09%; --fy: 8.79%; --fw: 37.34%; --fh: 82.53%;
    --tx: .0023; --ty: .4797; --tw: .0455; --th: .1119;
    --mx: -.0068; --my: .4721; --mw: .0637; --mh: .1567; --mo: 50% 17%; }
  .vr-abatible > .vr-tapa { display: none; }
  /* balconera (21/10): la misma foto de la 70 Line, alargada hasta el suelo estirando solo vidrio y perfil recto, por
     encima y por debajo de la manilla (render/vr3-balconera.png). Perfil, bisagras y manilla, los de la foto real */
  .vr-balconera { aspect-ratio: 924 / 1440; max-width: 170px; --tapa: #2f3338;
    --sx: .4968; --sy: 0.0181; --sw: .4762; --sh: 0.9639; --hx: .4968; --hy: 0.0181; --hw: .4762; --hh: 0.9639;
    --ix0: 11.36%; --iy0: 4.39%; --ix1: 86.36%; --iy1: 95.67%; --fx: 9.09%; --fy: 6.04%; --fw: 37.34%; --fh: 87.99%;
    --tx: .0023; --ty: 0.5043; --tw: .0455; --th: 0.0756;
    --mx: -.0068; --my: 0.4992; --mw: .0637; --mh: 0.1059; --mo: 50% 17%; }
  .vr-balconera > .vr-tapa { display: none; }
  /* correderas y elevadoras: la hoja de la izquierda (la de la manilla) se desliza; su vidrio deja ver lo de detrás */
  .vr-corredera { aspect-ratio: 788 / 518; max-width: 270px;
    --sx: .014; --sy: .0232; --sw: .5013; --sh: .9479; --hx: .014; --hy: .0232; --hw: .5013; --hh: .9479;
    --ix0: 9.62%; --iy0: 6.72%; --ix1: 93.67%; --iy1: 93.89%; --fx: 51.65%; --fy: 9.85%; --fw: 40.36%; --fh: 80.31%; }
  .vr-elevadora { aspect-ratio: 600 / 394; max-width: 270px;
    --sx: .0233; --sy: .0355; --sw: .4917; --sh: .9365; --hx: .0233; --hy: .0355; --hw: .4917; --hh: .9365;
    --ix0: 5.76%; --iy0: 5.15%; --ix1: 94.58%; --iy1: 95.39%; --fx: 52%; --fy: 9.14%; --fw: 41.67%; --fh: 83%; }
  .vr-corredera .vr-canto, .vr-elevadora .vr-canto { display: none; }
  .vr-corredera .vr-hueco, .vr-elevadora .vr-hueco { background: linear-gradient(90deg, rgba(14, 17, 22, .12), rgba(14, 17, 22, 0) 18%), #f3f4f5; }

  .vr.mueve[data-tipo="practicable"] .vr-hoja { animation: vr-prac 3.4s var(--ease) infinite; }
  .vr.mueve[data-tipo="practicable"] .vr-mani { animation: v-man-prac 3.4s var(--ease) infinite; }
  /* la puerta que abre hacia fuera (Forma 70): la hoja gira al revés que la practicable, se aleja en vez de venir (21/10) */
  .vr.mueve[data-tipo="fuera"] .vr-hoja { animation: vr-fuera 3.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="fuera"] .vr-mani { animation: v-man-prac 3.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="oscilo"] .vr-hoja { animation: vr-osc-h 4.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="oscilo"] .vr-bas { animation: vr-osc-b 4.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="oscilo"] .vr-mani { animation: v-man-osc 4.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="micro"] .vr-bas { animation: vr-micro 3.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="micro"] .vr-mani { animation: v-man-micro 3.6s var(--ease) infinite; }
  /* solo bascular (la página de la oscilobatiente enseña cada posición por separado): manilla a 180° y la hoja cae por arriba */
  .vr.mueve[data-tipo="bascula"] .vr-bas { animation: vr-bascula 3.8s var(--ease) infinite; }
  .vr.mueve[data-tipo="bascula"] .vr-mani { animation: v-man-bascula 3.8s var(--ease) infinite; }
  @keyframes vr-bascula { 0%, 14% { transform: none; } 32%, 70% { transform: rotateX(-16deg); } 88%, 100% { transform: none; } }
  @keyframes v-man-bascula { 0%, 4% { transform: rotate(0deg); } 12%, 82% { transform: rotate(-180deg); } 92%, 100% { transform: rotate(0deg); } }
  .vr.mueve[data-tipo="corredera"] .vr-hoja { animation: vr-corr 3.6s var(--ease) infinite; }
  /* osciloparalela (21/10): la manilla gira, la hoja sale del plano del marco hacia dentro, en paralelo, y corre por
     delante de la fija; al volver, entra en el marco y la manilla baja */
  /* (22/10, Robert: «no es coherente que se mueva hacia la izquierda») la ventana entera, reflejada: así la que sale y corre
     es la hoja de la izquierda, hacia la derecha, por delante de la fija, y la manilla sigue en el centro, en la hoja que se
     mueve. La foto es la misma 70 Line, de frente, y reflejada sigue siendo una ventana de verdad */
  .vr[data-tipo="paralela"] { transform: scaleX(-1); }
  .vr.mueve[data-tipo="paralela"] .vr-hoja { animation: vr-par 4.8s var(--ease) infinite; }
  .vr.mueve[data-tipo="paralela"] .vr-mani { animation: v-man-par 4.8s var(--ease) infinite; }
  @keyframes vr-par { 0%, 12% { transform: none; filter: none; } 26% { transform: translate3d(0, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); }
    50%, 66% { transform: translate3d(-96%, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); }
    86% { transform: translate3d(0, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); } 96%, 100% { transform: none; filter: none; } }
  @keyframes v-man-par { 0%, 3% { transform: rotate(0deg); } 10%, 90% { transform: rotate(-90deg); } 96%, 100% { transform: rotate(0deg); } }
  .vr.mueve[data-tipo="elevadora"] .vr-hoja { animation: vr-elev 4.2s var(--ease) infinite; }
  @keyframes vr-prac { 0%, 12% { transform: none; } 42%, 64% { transform: rotateY(66deg); } 92%, 100% { transform: none; } }
  @keyframes vr-fuera { 0%, 12% { transform: none; } 42%, 64% { transform: rotateY(-56deg); } 92%, 100% { transform: none; } }
  @keyframes vr-osc-b { 0%, 9% { transform: none; } 22%, 36% { transform: rotateX(-16deg); } 46%, 100% { transform: none; } }
  @keyframes vr-osc-h { 0%, 52% { transform: none; } 68%, 82% { transform: rotateY(62deg); } 96%, 100% { transform: none; } }
  /* la microventilación, exagerada lo justo para que se vea: la hoja se separa arriba */
  @keyframes vr-micro { 0%, 12% { transform: none; } 30%, 72% { transform: rotateX(-8deg); } 90%, 100% { transform: none; } }
  @keyframes vr-corr { 0%, 10% { transform: none; } 44%, 62% { transform: translate3d(80%, 0, 4px); } 92%, 100% { transform: none; } }
  @keyframes vr-elev { 0%, 8% { transform: none; } 18% { transform: translate3d(0, -1.5%, 4px); } 46%, 62% { transform: translate3d(80%, -1.5%, 4px); } 82% { transform: translate3d(0, -1.5%, 4px); } 92%, 100% { transform: none; } }





  /* sin foto propia de la serie, la portada lleva el corte del perfil, entero y sin zoom */
  .f-hero-img.sin-foto { background: var(--blanco); border: 1px solid var(--greige); }
  .f-hero-img.sin-foto img { object-fit: contain; padding: 8%; }
  .ap-ico { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--fondo); }
  .ap-ico svg { width: 38%; height: auto; }
  .ap-ico svg * { fill: none; stroke: var(--tinta); stroke-width: 1; }
  .ap-ico svg .marco { stroke-width: 1.6; }
  .ap-ico svg .m { stroke: var(--azul); stroke-dasharray: 2.2 1.6; }
  .ap-ico svg .f { stroke: var(--azul); stroke-width: 1.3; }
  .ap-ico svg text { fill: var(--azul); stroke: none; font: 600 11px var(--f-txt); }
  .lamina.solo-perfil { background: var(--blanco); padding: 6%; aspect-ratio: auto; }
  /* el corte, con su proporción: las marcas del «pieza a pieza» van en % de él */
  .lamina.solo-perfil .corte { position: relative; width: 100%; }
  .lamina.solo-perfil .corte img { display: block; width: 100%; height: 100%; object-fit: contain; }


  .vr-abatible { --foto: url("/img/vr3-abatible.jpg"); --mani: url("/img/vr3-mani.png"); }
  .vr-balconera { --foto: url("/img/vr3-balconera.jpg"); --mani: url("/img/vr3-mani.png"); }
  .vr-corredera { --foto: url("/img/vr3-corredera.jpg"); }
  .vr-elevadora { --foto: url("/img/vr3-elevadora.jpg"); }

/* Aperturas (29/10): la osciloparalela, la pivotante y la plegable. Esta página lleva su propia copia de las reglas de
   .vr, así que el bloque nuevo de estilos/vr.css va también aquí, al final, para que gane a la copia: si cambia
   allí, cambia aquí. */
  /* (29/10, Robert: «la veo como si estuviese bugueada, al revés») corría con la manilla en horizontal, que es la
     posición de bascular, y no enseñaba la basculación. Ahora, como el herraje: primero bascula con la manilla en
     horizontal; vuelve, la manilla sube del todo y la hoja se separa y corre por delante de la fija */
  .vr.mueve[data-tipo="paralela"] .vr-bas { animation: vr-par-bas 6.4s var(--ease) infinite; }
  .vr.mueve[data-tipo="paralela"] .vr-hoja { animation: vr-par 6.4s var(--ease) infinite; }
  .vr.mueve[data-tipo="paralela"] .vr-mani { animation: v-man-par 6.4s var(--ease) infinite; }
  @keyframes vr-par-bas { 0%, 7% { transform: none; } 15%, 29% { transform: rotateX(-14deg); } 37%, 100% { transform: none; } }
  @keyframes vr-par { 0%, 44% { transform: none; filter: none; } 52% { transform: translate3d(0, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); }
    63%, 75% { transform: translate3d(-96%, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); }
    86% { transform: translate3d(0, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); } 93%, 100% { transform: none; filter: none; } }

  /* pivotante (29/10): la hoja de la foto real gira sobre su eje horizontal, por el centro; la manilla, en horizontal */
  .vr[data-tipo="pivotante"] .vr-bas { transform-origin: 50% 50%; }
  .vr.mueve[data-tipo="pivotante"] .vr-bas { animation: vr-piv 4.2s var(--ease) infinite; }
  .vr.mueve[data-tipo="pivotante"] .vr-mani { animation: v-man-prac 4.2s var(--ease) infinite; }
  @keyframes vr-piv { 0%, 12% { transform: none; } 40%, 64% { transform: rotateX(-62deg); } 90%, 100% { transform: none; } }

  /* plegable (29/10): las dos hojas de la balconera real, en acordeón. La primera gira sobre el marco y la segunda,
     colgada de su canto, se dobla el doble al revés: su extremo corre por el carril, como en una plegable de verdad */
  .vr[data-tipo="plegable"] > .vr-fijo { display: none; }
  .vr[data-tipo="plegable"] { --hx: .027; --hw: .946; }
  .vr[data-tipo="plegable"] > .vr-hoja { --sx: .027; --sw: .4698; transform-origin: 0 50%; }
  .vr-hoja2 { position: absolute; left: 100%; top: 0; width: 101.36%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; --sx: .4968; --sw: .4762; }
  .vr:not(.mueve) .vr-hoja2 { transform-style: flat; }
  .vr.mueve[data-tipo="plegable"] > .vr-hoja { animation: vr-pleg-a 4.4s var(--ease) infinite; }
  .vr.mueve[data-tipo="plegable"] .vr-hoja2 { animation: vr-pleg-b 4.4s var(--ease) infinite; }
  .vr.mueve[data-tipo="plegable"] .vr-mani { animation: v-man-prac 4.4s var(--ease) infinite; }
  @keyframes vr-pleg-a { 0%, 12% { transform: none; } 44%, 64% { transform: rotateY(-60deg); } 92%, 100% { transform: none; } }
  @keyframes vr-pleg-b { 0%, 12% { transform: none; } 44%, 64% { transform: rotateY(120deg); } 92%, 100% { transform: none; } }
  @keyframes v-man-par { 0%, 2% { transform: rotate(0deg); } 6%, 33% { transform: rotate(-90deg); } 39% { transform: rotate(0deg); } 45%, 90% { transform: rotate(-180deg); } 96%, 100% { transform: rotate(0deg); } }