/* Layout: catálogo de todas las ventanas. Cabecera con cómo leer las barras, filtros por tipo y orden en una fila,
     y una rejilla de tarjetas (dibujo que abre, para qué sirve, cinco barras medidas desde cero y sus aperturas);
     la misma información, en tabla. */



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



  .v-cab { background: var(--blanco); border-bottom: 1px solid var(--greige); }
  .v-cab .ancho { padding-block: 32px 48px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 56px; align-items: center; }
  .v-foto { margin: 0; position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--fondo); }
  .v-foto img { width: 100%; height: 100%; object-fit: cover; }
  .v-foto figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 11px; background: rgba(255, 255, 255, .9); padding: 3px 8px; }
  .leer { margin-top: 26px; }
  .v-cab h1 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(46px, 7vw, 104px); line-height: .92; letter-spacing: -.05em; margin: 14px 0 18px; }
  .migas { font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); display: flex; gap: 6px; margin-bottom: 26px; }
  .migas a { color: var(--azul-2); text-decoration: none; }
  .leer { background: var(--fondo); padding: 18px 20px; display: grid; gap: 10px; font-size: 14px; color: var(--azul-2); }
  .leer b { color: var(--tinta); }
  .leer .mini { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; }
  @media (max-width: 900px) { .v-cab .ancho { grid-template-columns: minmax(0, 1fr); } }

  .mandos-v { position: sticky; top: var(--cab); z-index: 30; background: rgba(247, 245, 241, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--greige); }
  .mandos-v .ancho { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 12px; }
  .filtros { display: flex; flex-wrap: wrap; gap: 6px; }
  .filtros button { cursor: pointer; background: transparent; border: 1px solid var(--gris); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500; }
  .filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
  .orden { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .orden select { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--gris); border-radius: 4px; background: var(--blanco); color: var(--tinta); }
  .ver-tabla { background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--azul); font-size: 14px; padding: 7px 0; }
  .cuenta-v { font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); }

  .rejilla-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 36px 96px; }
  .v-card { background: var(--blanco); border: 1px solid var(--greige); display: grid; grid-template-rows: auto auto 1fr auto; transition: border-color .25s, box-shadow .3s var(--ease); outline: none; }
  .v-card:hover, .v-card:focus-within { border-color: var(--tinta); box-shadow: 0 22px 40px -28px rgba(14, 17, 22, .45); }
  .v-dib { background: var(--fondo); display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center; gap: 14px; min-height: 230px; padding: 14px 16px 20px; position: relative; }
  .v-dib .vr { max-width: 150px; }
  .v-dib .vr-corredera, .v-dib .vr-elevadora { max-width: 200px; }
  .v-dib .tipo { justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-2); }
  .v-dib .esta { position: absolute; right: 12px; top: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--azul); color: var(--blanco); padding: 2px 7px; border-radius: 999px; }
  .v-tit { padding: 18px 20px 4px; display: grid; gap: 4px; }
  .v-tit h2 { font-family: var(--f-disp); font-size: 26px; letter-spacing: -.025em; line-height: 1.05; }
  .v-tit .sub { font-family: var(--f-mono); font-size: 12px; color: var(--azul-2); }
  .v-tit .para { font-size: 15px; color: var(--azul-2); margin-top: 6px; }
  .stats { margin: 0; padding: 14px 20px 6px; display: grid; gap: 9px; align-content: start; }
  .stat { display: grid; grid-template-columns: 92px minmax(0, 1fr) 74px; gap: 10px; align-items: center; }
  .stat dt { font-size: 13px; font-weight: 600; }
  .stat dt small { display: block; font-weight: 400; font-family: var(--f-mono); font-size: 10px; color: var(--gris-2); }
  .stat dd { margin: 0; display: contents; }
  .stat .val { font-family: var(--f-mono); font-size: 12px; text-align: right; white-space: nowrap; }
  .barra-s { position: relative; height: 12px; background: var(--greige); border-radius: 3px; overflow: hidden; }
  .barra-s i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: var(--azul); transform-origin: 0 50%; transition: transform .9s var(--ease); }
  /* segmentos: diez, con la separación del color de la tarjeta */
  .barra-s::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--blanco) calc(10% - 2px) 10%); }
  .barra-s.sin { background: repeating-linear-gradient(135deg, var(--blanco) 0 4px, var(--greige) 4px 5px); box-shadow: inset 0 0 0 1px var(--greige); }
  .anima .rejilla-v:not(.lista) .barra-s i { transform: scaleX(0); }
  .v-ap { padding: 10px 20px 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .v-ap span { font-size: 12px; border: 1px solid var(--greige); background: var(--fondo); padding: 3px 9px; border-radius: 999px; }
  .v-pie { padding: 16px 20px 20px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
  .v-pie .nota-v { font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); }
  .v-pie .btn { padding: 10px 14px; font-size: 14px; }
  @media (max-width: 1100px) { .rejilla-v { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 700px) {
    .rejilla-v { grid-template-columns: minmax(0, 1fr); }
    .mandos-v { position: static; }
    .mandos-v .ancho { gap: 10px 14px; }
    .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
    .filtros::-webkit-scrollbar { display: none; }
    .filtros button { flex: none; }
    .cuenta-v { display: none; }
    .orden { margin-left: 0; }
  }

  .tabla-v { padding-bottom: 96px; }
  .tabla-v[hidden], .rejilla-v[hidden] { display: none; }
  .tabla-v .env { overflow-x: auto; background: var(--blanco); border: 1px solid var(--greige); }
  .tabla-v table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
  .tabla-v th, .tabla-v td { padding: 11px 12px; border-bottom: 1px solid var(--greige); text-align: left; vertical-align: top; }
  .tabla-v thead th { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-2); font-weight: 500; border-bottom: 2px solid var(--tinta); }
  .tabla-v tbody th { font-family: var(--f-disp); font-size: 16px; }
  .tabla-v td { font-family: var(--f-mono); font-size: 13px; }
  /* la tarjeta de ayuda: rellena lo que falta de la última fila, con foto y la llamada */
  .v-ayuda { position: relative; display: grid; align-content: end; min-height: 320px; padding: 28px; color: var(--blanco); background: var(--tinta) center / cover no-repeat; overflow: hidden; }
  .v-ayuda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 22, .35) 0%, rgba(14, 17, 22, .62) 35%, rgba(14, 17, 22, .88) 75%); }
  /* (22/10, Lighthouse) en el móvil la ceja caía sobre la pared clara: velo más fuerte y sombra suave */
  .v-ayuda > * { text-shadow: 0 1px 12px rgba(14, 17, 22, .5); }
  @media (max-width: 819px) { .v-ayuda::before { background: linear-gradient(180deg, rgba(14, 17, 22, .62) 0%, rgba(14, 17, 22, .8) 40%, rgba(14, 17, 22, .9) 80%); } }
  .v-ayuda > * { position: relative; }
  .v-ayuda .ceja { color: rgba(255, 255, 255, .9); }
  .v-ayuda .h2 { color: var(--blanco); font-size: clamp(28px, 2.8vw, 40px); margin: 10px 0 10px; max-width: 18ch; }
  .v-ayuda p { color: var(--greige); max-width: 44ch; }
  .v-ayuda .btn { justify-self: start; margin-top: 18px; }
  .v-ayuda .pie-foto { position: absolute; right: 12px; top: 10px; font-size: 11px; color: rgba(255, 255, 255, .8); }
  .datos-v { background: var(--blanco); border: 1px solid var(--greige); padding: 22px 24px; margin-bottom: 96px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px 40px; }
  .datos-v h2 { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; }
  .datos-v ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--azul-2); }
  @media (max-width: 760px) { .datos-v { grid-template-columns: minmax(0, 1fr); } }
  .rejilla-v { padding-bottom: 40px !important; }

  .cierre-v { color: var(--blanco); }
  .cierre-v .ancho { padding-block: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .cierre-v .h2 { color: var(--blanco); max-width: 18ch; }
  .cierre-v p { color: var(--greige); margin-top: 12px; max-width: 48ch; }
  @media (max-width: 760px) { .cierre-v .ancho { grid-template-columns: minmax(0, 1fr); } }


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