/* 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"); }