/* (22/10, Lighthouse) la fuente de reserva, con las medidas de la de marca: mientras llega de Google Fonts, el texto
     ocupa lo mismo y el titular no cambia de líneas al cambiar de fuente (CLS de 0,06 en la guía). Ancho medio ponderado
     por frecuencia de letras y alturas de la tabla de cada fuente, frente a Arial (normal y negrita) */
  @font-face { font-family: "Funnel Display Reserva"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 500 900; size-adjust: 102.09%; ascent-override: 97.96%; descent-override: 24.49%; line-gap-override: 0%; }
  @font-face { font-family: "Archivo Reserva"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 98.99%; ascent-override: 88.69%; descent-override: 21.21%; line-gap-override: 0%; }
  @font-face { font-family: "Archivo Reserva"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 98.48%; ascent-override: 89.16%; descent-override: 21.32%; line-gap-override: 0%; }
  /* (23/10) lo que lleva el atributo hidden no se ve, aunque su estilo le dé display: el acuse «Recibido» de los formularios
     (.acuse { display: grid }) salía siempre a la vista, debajo del formulario, sin haber enviado nada */
  [hidden] { display: none !important; }
  :root {
    --fondo: var(--ox-warm);
    --blanco: var(--ox-white);
    --tinta: var(--ox-ink-sys);
    --negro: var(--ox-ink);
    --azul: var(--ox-blue);
    --azul-2: var(--ox-blue-2);
    --greige: var(--ox-greige);
    --gris: var(--ox-gray);
    --gris-2: var(--ox-gray-2);
    --f-disp: "Funnel Display", "Funnel Display Reserva", "Helvetica Neue", Arial, sans-serif;
    /* titulares en Funnel Display; todo lo demás en Archivo, como pide el manual de marca (sin monoespaciada):
       los rótulos técnicos, en mayúsculas con espaciado; las cifras, con números tabulares */
    --f-txt: "Archivo", "Archivo Reserva", "Helvetica Neue", Arial, sans-serif;
    --f-mono: "Archivo", "Archivo Reserva", "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cab: 68px;
    --lado: max(clamp(16px, 4vw, 44px), env(safe-area-inset-left, 0px));
    --lado-d: max(clamp(16px, 4vw, 44px), env(safe-area-inset-right, 0px));
    color-scheme: light;
  }
  @media (max-width: 819px) { :root { --cab: 60px; } }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--f-txt); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--blanco); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  p { margin: 0; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
  .ancho { max-width: 1280px; margin: 0 auto; padding-left: max(16px, var(--lado)); padding-right: max(16px, var(--lado-d)); }
  .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ceja { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-2); }
  .h2 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(32px, 4.4vw, 60px); line-height: 1; letter-spacing: -.03em; }
  .entrada { font-size: clamp(16px, 1.4vw, 19px); color: var(--azul-2); max-width: 52ch; }
  .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--azul); color: var(--blanco); text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 20px; border-radius: 4px; white-space: nowrap; transition: background .2s var(--ease); }
  .btn:hover { background: var(--azul-2); }
  .btn .fl { transition: transform .25s var(--ease); }
  .btn:hover .fl { transform: translateX(4px); }
  .btn.claro { background: var(--blanco); color: var(--tinta); }
  .btn.claro:hover { background: var(--greige); }
  .enlace { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

  .aviso-maqueta { background: var(--greige); color: var(--azul-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; position: relative; z-index: 51; }
  .aviso-maqueta .ancho { padding-block: 7px; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; align-items: center; }
  .aviso-maqueta a { color: var(--azul); font-weight: 500; }

  /* Cabecera */
  .cab { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .35s, background .35s, color .35s; }
  .cab.con-fondo { border-bottom-color: var(--greige); background: rgba(255, 255, 255, .94); }
  .cab > .ancho { height: var(--cab); display: flex; align-items: center; gap: 28px; }
  .logo { display: block; width: 112px; color: var(--negro); flex: none; transition: color .35s; }
  .cab nav.principal { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); font-size: 15px; flex: 1; white-space: nowrap; }
  @media (max-width: 1180px) { .cab .tel { display: none; } }
  /* (27/10) con «Contacto» en la cabecera, entre 1024 y 1100 px el botón se pegaba al borde: menos aire entre enlaces */
  @media (max-width: 1100px) { .cab nav.principal { gap: 14px; font-size: 14.5px; } }
  .cab nav.principal a { text-decoration: none; color: var(--azul-2); transition: color .2s; }
  .cab nav.principal a:hover { color: var(--tinta); }
  .cab .tel { font-family: var(--f-mono); font-size: 13px; color: var(--gris-2); white-space: nowrap; transition: color .35s; }
  .cab .btn { padding: 11px 16px; font-size: 14px; }
  .menu-btn { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 9px; cursor: pointer; }
  .menu-btn span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform .3s var(--ease), opacity .2s; }
  .cab.abierto .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cab.abierto .menu-btn span:nth-child(2) { opacity: 0; }
  .cab.abierto .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cab .menu-movil { display: none; }
  /* (27/10) el menú de móvil entra por debajo de 1024 px: entre 820 y 1023 la cabecera ya no cabía */
  @media (max-width: 1023px) {
    .cab nav.principal, .cab .tel { display: none; }
    .logo { width: 92px; margin-right: auto; }
    .menu-btn { display: block; }
    .cab .btn { padding: 9px 13px; font-size: 13px; }
    .cab.abierto { background: var(--blanco); color: var(--tinta); }
    .cab.abierto .logo { color: var(--negro); }
    .cab.abierto .menu-movil { display: grid; gap: 2px; padding: 8px max(16px, var(--lado-d)) 20px max(16px, var(--lado)); border-top: 1px solid var(--greige); background: var(--blanco); }
    .menu-movil a { text-decoration: none; font-family: var(--f-disp); font-weight: 600; font-size: 24px; padding: 8px 0; }
    .menu-movil .tel { font-family: var(--f-mono); font-size: 14px; color: var(--gris-2); padding-top: 10px; }
  }

  /* Apariciones: solo para lo que está por debajo de la primera pantalla al cargar */
  .por-revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .por-revelar.visto { opacity: 1; transform: none; }
  [data-rev-grupo] > .por-revelar:nth-child(2) { transition-delay: .07s; }
  [data-rev-grupo] > .por-revelar:nth-child(3) { transition-delay: .14s; }
  [data-rev-grupo] > .por-revelar:nth-child(4) { transition-delay: .21s; }
  [data-rev-grupo] > .por-revelar:nth-child(5) { transition-delay: .28s; }
  [data-rev-grupo] > .por-revelar:nth-child(6) { transition-delay: .35s; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

  /* ============ DESPLEGABLE DE VENTANAS, IDIOMA, SUBIR Y AVISO ============ */
  .mm-btn { background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; color: var(--azul-2); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
  .mm-btn:hover, .mm-btn[aria-expanded="true"] { color: var(--tinta); }
  .mm-btn .flecha { transition: transform .3s var(--ease); }
  .mm-btn[aria-expanded="true"] .flecha { transform: rotate(180deg); }
  /* panel sólido con velo detrás (la sombra de 100vmax, recortada para que no tape la cabecera) y su propio scroll si la ventana es baja */
  .mm-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco); color: var(--tinta); border-top: 1px solid var(--greige); box-shadow: 0 0 0 100vmax rgba(14, 17, 22, .28); clip-path: inset(0 -100vmax -100vmax -100vmax); max-height: calc(100svh - var(--cab) - 24px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
  .cab.mm-abierto .mm-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease), visibility 0s; }
  .mm-rej { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.3fr); gap: 36px; padding-block: 30px 22px; }
  .mm-col .ceja { margin-bottom: 8px; }
  .modelo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--greige); text-decoration: none; font-weight: 500; transition: color .2s, padding .25s var(--ease); }
  .modelo:hover { color: var(--azul); padding-left: 6px; }
  .modelo .mmm { font-family: var(--f-mono); font-size: 11px; color: var(--azul); white-space: nowrap; }
  .modelo .nuevo { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; background: var(--azul); color: var(--blanco); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
  .apert { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 7px 0; text-decoration: none; font-weight: 500; }
  .apert .vent { max-width: 44px; }
  .apert .vent.ancha { max-width: 44px; }
  /* (29/10) las aperturas del menú, con la foto real en miniatura (antes, ventanitas dibujadas) */
  .apert-foto { display: block; width: 44px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
  .apert-foto.ancha { height: 30px; }
  .mm-dest { background: var(--blanco); border: 1px solid var(--greige); border-radius: 4px; text-decoration: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; overflow: hidden; transition: border-color .25s; }
  .mm-dest:hover { border-color: var(--tinta); }
  .mm-dest img { width: 100%; height: 100%; max-height: 230px; object-fit: contain; background: var(--blanco); transition: transform .6s var(--ease); }
  .mm-dest:hover img { transform: scale(1.04); }
  .mm-dest div { padding: 18px; display: grid; gap: 8px; }
  .mm-dest b { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; line-height: 1.05; }
  .mm-dest p { font-size: 14px; color: var(--azul-2); }
  .mm-dest i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--azul); }
  .mm-dest .ceja { display: inline-block; justify-self: start; background: var(--azul); color: var(--blanco); padding: 2px 8px; border-radius: 999px; font-size: 10px; }
  .mm-pie { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-block: 14px 18px; border-top: 1px solid var(--greige); font-size: 14px; }
  .mm-pie a { text-decoration: none; color: var(--azul-2); }
  .mm-pie a:hover { color: var(--tinta); }
  .mm-pie a.mm-todas { color: var(--tinta); font-weight: 600; }
  .idioma { display: flex; border: 1px solid var(--greige); border-radius: 999px; overflow: hidden; flex: none; }
  .idioma button { background: transparent; border: 0; cursor: pointer; font-family: var(--f-mono); font-size: 11px; padding: 5px 9px; color: var(--gris-2); }
  .idioma button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }
  .mm-movil summary { list-style: none; cursor: pointer; font-family: var(--f-disp); font-weight: 600; font-size: 24px; padding: 8px 0; display: flex; justify-content: space-between; }
  .mm-movil summary::-webkit-details-marker { display: none; }
  .mm-movil summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; color: var(--azul); }
  .mm-movil[open] summary::after { content: "−"; }
  .mm-movil .modelo { font-size: 16px; }
  @media (max-width: 1100px) { .mm-rej { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .mm-dest { display: none; } }
  @media (max-width: 1023px) { .mm-panel, .cab .idioma { display: none; } }

  .subir { position: fixed; z-index: 45; right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--tinta); color: var(--blanco); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease), background .2s; box-shadow: 0 12px 26px -12px rgba(14, 17, 22, .6); }
  .subir.visible { opacity: 1; transform: none; pointer-events: auto; }
  .subir:hover { background: var(--azul); }
  .subir svg { position: absolute; inset: 0; transform: rotate(-90deg); }
  .subir circle { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-dasharray: 145; stroke-dashoffset: calc(145 * (1 - var(--avance-pag, 0))); }
  .subir span { font-size: 18px; position: relative; }
  .aviso-flot { position: fixed; z-index: 70; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translate(-50%, 20px); background: var(--tinta); color: var(--blanco); padding: 12px 16px; border-radius: 6px; font-size: 14px; max-width: min(520px, calc(100vw - 32px)); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); box-shadow: 0 18px 40px -16px rgba(14, 17, 22, .6); }
  .aviso-flot.visible { opacity: 1; transform: translate(-50%, 0); }

  /* scroll suave (Lenis) */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* «Te llamamos» */
  .llamada-btn { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 4px; padding: 11px 16px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 18px; }
  .llamada { margin-top: 16px; display: grid; gap: 12px; max-width: 460px; }
  .llamada[hidden] { display: none; }
  .llamada label.llamada-priv { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
  .llamada .llamada-priv input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; flex: 0 0 auto; accent-color: currentColor; }
  .llamada .llamada-priv a { color: inherit; text-decoration: underline; }
  .llamada label { display: grid; gap: 6px; font-size: 13px; }
  .llamada input { font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); color: inherit; border-radius: 3px; }
  .llamada input::placeholder { color: rgba(255, 255, 255, .6); }
  .franjas { display: flex; flex-wrap: wrap; gap: 8px; }
  .franjas button { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; }
  .franjas button[aria-pressed="true"] { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
  .llamada .btn { justify-self: start; }

  /* ============ VENTANA DIBUJADA (CSS 3D) ============
     .vent[data-tipo] con marco, dos hojas (cada una con su «bascula»), vidrio y manilla.
     Con .mueve reproduce la apertura de su tipo. Colores por variables: --perfil y --tex (textura). */
  .vent { --perfil: #3b4047; --tex: none; --tex-sz: 96px; --cristal: linear-gradient(128deg, #e9f0f4 0%, #d6e1e8 38%, #f3f6f8 40%, #dce6ec 52%, #c8d5dd 100%); position: relative; width: 100%; max-width: 210px; margin: 0 auto; aspect-ratio: 1 / 1.2; perspective: 640px; }
  .vent.ancha { aspect-ratio: 1.5 / 1; max-width: 250px; }
  .vent .marco { position: absolute; inset: 0; padding: 6.5%; display: flex; background: var(--perfil) var(--tex); background-size: var(--tex-sz); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38), inset 0 0 0 4px rgba(255, 255, 255, .05), 0 22px 28px -22px rgba(14, 17, 22, .55); perspective: 420px; }
  .vent .marco::before { content: ""; position: absolute; inset: 6.5%; z-index: 0; background: linear-gradient(180deg, #a9bfcd 0%, #dbe5ec 55%, #c2cfc4 100%); box-shadow: inset 0 0 14px rgba(14, 17, 22, .35); }
  .vent .hoja { position: relative; z-index: 1; flex: 1; transform-style: preserve-3d; }
  .vent .h-der { transform-origin: 100% 50%; }
  .vent .bascula { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; background: var(--perfil) var(--tex); background-size: var(--tex-sz); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .42), inset 0 0 0 3px rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .28); }
  /* cantos de la hoja: el grosor del perfil, que se ve al abrir (lateral) y al bascular (superior) */
  .vent .bascula::before, .vent .bascula::after { content: ""; position: absolute; background: var(--perfil) var(--tex); background-size: var(--tex-sz); filter: brightness(.68); }
  .vent .bascula::before { top: 0; bottom: 0; left: 0; width: 10%; transform-origin: 0 50%; transform: rotateY(90deg); }
  .vent .bascula::after { left: 0; right: 0; top: 0; height: 7%; transform-origin: 50% 0; transform: rotateX(-90deg); filter: brightness(.8); }
  .vent .vidrio { position: absolute; inset: 12% 12%; background: var(--cristal); box-shadow: inset 0 0 0 2px rgba(14, 17, 22, .22), inset 0 8px 12px -8px rgba(14, 17, 22, .28); }
  .vent.ancha .vidrio { inset: 10% 9%; }
  .vent .manilla { position: absolute; left: 3.5%; top: 45%; width: 6%; height: 8%; background: var(--mani, #c9cdd1); border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); z-index: 2; }
  .vent .manilla::after { content: ""; position: absolute; left: 22%; top: 42%; width: 56%; height: 210%; background: var(--mani-2, #dde0e3); border-radius: 3px; transform-origin: 50% 10%; transform: rotate(var(--giro, 0deg)); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
  .vent.ancha .manilla { left: auto; right: 6%; width: 3.6%; height: 22%; top: 39%; }
  .vent.ancha .manilla::after { display: none; }
  /* la manilla con volumen (22/10, Robert: «está plana», como al principio): roseta y palanca hechas de capas a distinta
     profundidad, como la de las ventanas de foto, con el brillo del metal en la capa de arriba. El modelo elegido en el
     configurador (data-mani en .vent) cambia su forma: con llave lleva bombín, con bloqueo su botón, la plana es baja, la de
     quita y pon es corta y con su cuadradillo, el tirador no gira y la de la 70 Line es recta. */
  .vent .manilla.m3d { background: none; box-shadow: none; border-radius: 0; transform-style: preserve-3d; }
  .vent .manilla.m3d::after { display: none; }
  .m3d > i, .m3d > span { position: absolute; }
  .m3d .m-base { inset: 0; border-radius: 3px; transform-style: preserve-3d; transform: translateZ(2.5px); background: linear-gradient(90deg, var(--mani, #c9cdd1), var(--mani-2, #dde0e3) 45%, var(--mani, #c9cdd1)); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); }
  .m3d .m-base::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mani, #c9cdd1); filter: brightness(.45); transform: translateZ(-2.5px); }
  .m3d .m-pal { left: 26%; top: 38%; width: 48%; height: 225%; transform-origin: 50% 11%; transform: rotate(var(--giro, 0deg)); transform-style: preserve-3d; }
  .m3d .m-pal i { position: absolute; inset: 0; border-radius: 40% 40% 45% 45% / 8% 8% 10% 10%; background: var(--mani, #c9cdd1); }
  .m3d .m-pal i:nth-child(1) { transform: translateZ(calc(3px * var(--z, 1))); filter: brightness(.42); }
  .m3d .m-pal i:nth-child(2) { transform: translateZ(calc(4px * var(--z, 1))); filter: brightness(.52); }
  .m3d .m-pal i:nth-child(3) { transform: translateZ(calc(5px * var(--z, 1))); filter: brightness(.62); }
  .m3d .m-pal i:nth-child(4) { transform: translateZ(calc(6px * var(--z, 1))); filter: brightness(.72); }
  .m3d .m-pal i:nth-child(5) { transform: translateZ(calc(7px * var(--z, 1))); filter: brightness(.84); }
  .m3d .m-pal i:nth-child(6) { transform: translateZ(calc(8px * var(--z, 1))); background: linear-gradient(90deg, var(--mani, #c9cdd1) 0%, var(--mani-2, #dde0e3) 32%, rgba(255, 255, 255, .95) 50%, var(--mani-2, #dde0e3) 68%, var(--mani, #c9cdd1) 100%); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .4); }
  .m3d .m-cil, .m3d .m-boton, .m3d .m-tir { display: none; }
  /* con llave: el bombín, con su ranura, en el eje de la palanca (por encima de ella, para que se vea) */
  .vent[data-mani$="llave"] .m3d .m-cil { display: block; left: 14%; top: 26%; width: 72%; height: 34%; border-radius: 50%; transform: translateZ(9px); background: radial-gradient(circle at 38% 32%, #fbfbfa, #a9aeb3 55%, #5f6469); box-shadow: 0 0 0 .6px rgba(0, 0, 0, .55); }
  .vent[data-mani$="llave"] .m3d .m-cil::after { content: ""; position: absolute; left: 44%; top: 22%; width: 12%; height: 56%; border-radius: 1px; background: #2a2d31; }
  /* con bloqueo: el botón encima del eje */
  .vent[data-mani="bloqueo"] .m3d .m-boton { display: block; left: 24%; top: 6%; width: 52%; height: 20%; border-radius: 50%; transform: translateZ(3.4px); background: radial-gradient(circle at 40% 35%, #ffffff, #c8ccd0 70%); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5); }
  /* plana: la palanca casi pegada a la hoja y algo más ancha */
  .vent[data-mani="plana"] .m3d .m-pal, .vent[data-mani="quitapon-plana"] .m3d .m-pal { --z: .4; left: 20%; width: 60%; }
  /* de quita y pon: más corta, con el cuadradillo a la vista en el eje */
  .vent[data-mani^="quitapon"] .m3d .m-pal { height: 165%; }
  .vent[data-mani^="quitapon"] .m3d .m-boton { display: block; left: 30%; top: 30%; width: 40%; height: 16%; border-radius: 1px; transform: translateZ(9px); background: #8d9398; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5); }
  /* tirador: una barra fija sobre dos patas; no gira */
  .vent[data-mani="tirador"] .m3d .m-base, .vent[data-mani="tirador"] .m3d .m-pal { display: none; }
  .vent[data-mani="tirador"] .m3d .m-tir { display: block; left: 18%; top: -45%; width: 64%; height: 230%; transform-style: preserve-3d; }
  .m3d .m-tir i { position: absolute; left: 0; right: 0; background: var(--mani, #c9cdd1); }
  .m3d .m-tir i:nth-child(1) { top: 4%; height: 8%; transform: translateZ(3px); filter: brightness(.6); }
  .m3d .m-tir i:nth-child(2) { bottom: 4%; height: 8%; transform: translateZ(3px); filter: brightness(.6); }
  .m3d .m-tir i:nth-child(3) { top: 0; bottom: 0; border-radius: 3px; transform: translateZ(7px); background: linear-gradient(90deg, var(--mani, #c9cdd1), rgba(255, 255, 255, .95) 50%, var(--mani, #c9cdd1)); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
  /* la de la 70 Line: recta, de cantos vivos */
  .vent[data-mani^="70line"] .m3d .m-base, .vent[data-mani^="70line"] .m3d .m-pal i { border-radius: 1px; }
  .vent[data-mani^="70line"] .m3d .m-pal { left: 32%; width: 36%; height: 240%; }

  .vent .h-izq .bascula { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .42), inset 0 0 0 3px rgba(255, 255, 255, .07), 2px 0 0 rgba(0, 0, 0, .25); }

  .vent.mueve[data-tipo="practicable"] .h-der { animation: v-prac 3.4s var(--ease) infinite; }
  .vent.mueve[data-tipo="practicable"] .manilla::after { animation: v-man-prac 3.4s var(--ease) infinite; }
  .vent.mueve[data-tipo="practicable"] .m3d .m-pal { animation: v-man-prac 3.4s var(--ease) infinite; }
  .vent.mueve[data-tipo="oscilo"] .h-der { animation: v-osc-h 4.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="oscilo"] .h-der .bascula { animation: v-osc-b 4.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="oscilo"] .manilla::after { animation: v-man-osc 4.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="oscilo"] .m3d .m-pal { animation: v-man-osc 4.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="micro"] .h-der .bascula { animation: v-micro 3.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="micro"] .manilla::after { animation: v-man-micro 3.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="micro"] .m3d .m-pal { animation: v-man-micro 3.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="corredera"] .h-der { animation: v-corr 3.6s var(--ease) infinite; }
  .vent.mueve[data-tipo="elevadora"] .h-der { animation: v-elev 4.2s var(--ease) infinite; }
  @keyframes v-prac { 0%, 12% { transform: none; } 42%, 64% { transform: rotateY(64deg); } 92%, 100% { transform: none; } }
  /* la manilla gira hacia la derecha: −90° abre, −180° bascula y −135° (entre abrir y bascular) microventilación */
  @keyframes v-man-prac { 0%, 4% { transform: rotate(0deg); } 10%, 86% { transform: rotate(-90deg); } 94%, 100% { transform: rotate(0deg); } }
  @keyframes v-micro { 0%, 12% { transform: none; } 30%, 72% { transform: rotateX(-7deg); } 90%, 100% { transform: none; } }
  @keyframes v-man-micro { 0%, 5% { transform: rotate(0deg); } 14%, 80% { transform: rotate(-135deg); } 92%, 100% { transform: rotate(0deg); } }
  @keyframes v-osc-b { 0%, 9% { transform: none; } 22%, 36% { transform: rotateX(-26deg); } 46%, 100% { transform: none; } }
  @keyframes v-osc-h { 0%, 52% { transform: none; } 68%, 82% { transform: rotateY(60deg); } 96%, 100% { transform: none; } }
  @keyframes v-man-osc { 0%, 3% { transform: rotate(0deg); } 8%, 42% { transform: rotate(-180deg); } 48%, 90% { transform: rotate(-90deg); } 96%, 100% { transform: rotate(0deg); } }
  @keyframes v-corr { 0%, 10% { transform: none; } 44%, 62% { transform: translate3d(-84%, 0, 6px); } 92%, 100% { transform: none; } }
  @keyframes v-elev { 0%, 8% { transform: none; } 18% { transform: translate3d(0, -3%, 6px); } 46%, 62% { transform: translate3d(-84%, -3%, 6px); } 82% { transform: translate3d(0, -3%, 6px); } 92%, 100% { transform: none; } }
  /* Variante 3D (.v3d): marco con grosor, barras y el hueco detrás. En reposo está de frente; al moverse gira un poco
     para que se vea el grosor. En el configurador, el giro lo lleva el ratón (--rx / --ry en línea). */
  .vent.v3d { perspective: 1100px; }
  .vent.v3d .cuerpo { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .9s var(--ease); }
  /* (28/10, Robert) al abrir ya no se tuerce: se abre recta, de frente (antes giraba -10° para enseñar el grosor) */
  .vent.v3d .marco { background: none; box-shadow: none; transform-style: preserve-3d; perspective: none; }
  .vent.v3d .marco::before { display: none; }
  .vent.v3d .hueco { position: absolute; inset: 6.5%; background: linear-gradient(180deg, #a9bfcd 0%, #dbe5ec 55%, #c2cfc4 100%); box-shadow: inset 0 0 18px rgba(14, 17, 22, .4); transform: translateZ(-14px); }
  .vent.v3d .b { position: absolute; background: var(--perfil) var(--tex); background-size: var(--tex-sz); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
  .vent.v3d .b-sup { left: 0; right: 0; top: 0; height: 0; padding-top: 6.5%; }
  .vent.v3d .b-inf { left: 0; right: 0; bottom: 0; height: 0; padding-top: 6.5%; }
  .vent.v3d .b-izq { left: 0; top: 0; bottom: 0; width: 6.5%; }
  .vent.v3d .b-der { right: 0; top: 0; bottom: 0; width: 6.5%; }
  .vent.v3d .k { position: absolute; background: var(--perfil) var(--tex); background-size: var(--tex-sz); filter: brightness(.62); }
  .vent.v3d .k-izq { left: 0; top: 0; bottom: 0; width: 26px; transform-origin: 0 50%; transform: rotateY(90deg); }
  .vent.v3d .k-der { right: 0; top: 0; bottom: 0; width: 26px; transform-origin: 100% 50%; transform: rotateY(-90deg); }
  .vent.v3d .k-sup { left: 0; right: 0; top: 0; height: 26px; transform-origin: 50% 0; transform: rotateX(-90deg); filter: brightness(.8); }
  .vent.v3d .k-inf { left: 0; right: 0; bottom: 0; height: 26px; transform-origin: 50% 100%; transform: rotateX(90deg); filter: brightness(.5); }
  .vent-pista { font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); text-align: center; margin-top: 10px; letter-spacing: .04em; }

  /* apertura a la izquierda, vista desde dentro: el marco entero se refleja (bisagra, manilla y su giro) */
  .vent.izq .marco { transform: scaleX(-1); }

  /* ============ 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; --foto: url("/img/vr3-abatible.jpg"); --mani: url("/img/vr3-mani.png"); --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; --foto: url("/img/vr3-balconera.jpg"); --mani: url("/img/vr3-mani.png"); --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; --foto: url("/img/vr3-corredera.jpg");
    --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; --foto: url("/img/vr3-elevadora.jpg");
    --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); }
  /* (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); } }
  .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; } }

  /* (02/11/2026) las tres animaciones de manilla que usa la ventana real y vivían solo en vent.css: así la manilla gira
     aunque una página cargue vr.css sin vent.css (en el artefacto de la portada se quedaban quietas) */
  @keyframes v-man-prac { 0%, 4% { transform: rotate(0deg); } 10%, 86% { transform: rotate(-90deg); } 94%, 100% { transform: rotate(0deg); } }
  @keyframes v-man-micro { 0%, 5% { transform: rotate(0deg); } 14%, 80% { transform: rotate(-135deg); } 92%, 100% { transform: rotate(0deg); } }
  @keyframes v-man-osc { 0%, 3% { transform: rotate(0deg); } 8%, 42% { transform: rotate(-180deg); } 48%, 90% { transform: rotate(-90deg); } 96%, 100% { transform: rotate(0deg); } }

  /* ============ ELEGIR ============ */
  .elegir { background: var(--blanco); padding-block: 112px 104px; }
  .elegir header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 48px; }
  .tabla-env { overflow-x: auto; scrollbar-width: thin; }
  .tabla-elegir { display: grid; grid-template-columns: 180px repeat(4, minmax(170px, 1fr)); min-width: 860px; }
  .tabla-elegir [role="row"] { display: contents; }
  .tabla-elegir [role="row"] > div { padding: 16px 18px; border-bottom: 1px solid var(--greige); font-size: 15px; transition: background .25s; }
  .tabla-elegir .et { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-2); position: sticky; left: 0; background: var(--blanco); z-index: 1; }
  .tabla-elegir .cabeza { border-bottom: 2px solid var(--tinta); display: grid; gap: 12px; align-content: end; }
  .tabla-elegir .cabeza img { height: 150px; width: 100%; object-fit: contain; transition: transform .5s var(--ease); }
  .tabla-elegir .cabeza b { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; }
  .tabla-elegir .sist { font-family: var(--f-mono); font-size: 13px; color: var(--azul); }
  .tabla-elegir .si::before { content: "●"; color: var(--azul); margin-right: 8px; font-size: 10px; vertical-align: 2px; }
  .tabla-elegir .no { color: var(--gris-2); }
  .tabla-elegir [role="row"] > div.foco { background: var(--fondo); }
  .tabla-elegir [role="row"] > div.foco.cabeza img { transform: translateY(-6px) scale(1.04); }
  @media (max-width: 819px) {
    .elegir { padding-block: 72px; }
    .elegir header { grid-template-columns: minmax(0, 1fr); }
    .tabla-elegir { grid-template-columns: 120px repeat(4, minmax(150px, 1fr)); min-width: 720px; }
    .tabla-elegir .cabeza img { height: 110px; }
    .tabla-elegir .cabeza b { font-size: 17px; }
    .tabla-elegir [role="row"] > div { padding: 14px 12px; font-size: 14px; }
  }

  /* ============ BANDA DE FOTO A SANGRE ============ */
  .banda-foto { position: relative; min-height: 82svh; display: grid; align-items: end; overflow: hidden; color: var(--blanco); background: var(--tinta); }
  .banda-foto > img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }
  .banda-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 22, 0) 22%, rgba(14, 17, 22, .5) 52%, rgba(14, 17, 22, .84) 100%); }
  /* (22/10, Lighthouse) el texto va sobre la foto: el velo empieza antes y una sombra suave lo separa de una pared clara (la ceja salía a 2,5:1) */
  .banda-foto .ancho { text-shadow: 0 1px 14px rgba(14, 17, 22, .55); }
  .banda-foto .ancho { position: relative; z-index: 1; padding-block: 72px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .banda-foto .h2 { color: var(--blanco); max-width: 16ch; }
  .banda-foto .pie-foto { font-family: var(--f-mono); font-size: 11px; color: rgba(255, 255, 255, .7); }
  @media (max-width: 819px) { .banda-foto { min-height: 64svh; } .banda-foto .ancho { grid-template-columns: minmax(0, 1fr); padding-block: 44px; } }

  /* ============ LO QUE SE FIRMA ============ */
  .firma { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--tinta); color: var(--blanco); }
  .firma .foto { overflow: hidden; min-height: 600px; position: relative; }
  .firma .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.12)); }
  .firma .texto { padding: 80px max(16px, var(--lado-d)) 80px 56px; display: grid; gap: 22px; align-content: center; }
  .firma .ceja { color: var(--gris); }
  .firma .h2 { color: var(--blanco); }
  .firma ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; counter-reset: f; }
  .firma li { counter-increment: f; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--greige); font-size: 16px; }
  .firma li::before { content: "0" counter(f); font-family: var(--f-mono); font-size: 13px; color: var(--gris); padding-top: 2px; }
  @media (max-width: 819px) {
    .firma { grid-template-columns: minmax(0, 1fr); }
    .firma .foto { min-height: 300px; }
    .firma .texto { padding: 48px max(16px, var(--lado-d)) 56px max(16px, var(--lado)); }
  }

  /* ============ CÓMO TRABAJAMOS ============ */
  .como { padding-block: 112px; }
  .como .h2 { margin: 12px 0 14px; }
  /* en escalera: cada paso es un peldaño más alto que el anterior; la huella (arriba) se llena de azul al avanzar */
  .pasos { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; position: relative; }
  .pasos li { --i: 0; position: relative; min-height: calc(var(--base, 200px) + var(--i) * 56px); padding: 24px 24px 8px 22px; border-left: 2px solid var(--greige); display: grid; gap: 10px; align-content: start; }
  .pasos li:nth-child(2) { --i: 1; } .pasos li:nth-child(3) { --i: 2; } .pasos li:nth-child(4) { --i: 3; }
  .pasos li::before, .pasos li::after { content: ""; position: absolute; left: -2px; right: 0; top: 0; height: 2px; background: var(--greige); }
  .pasos li::after { background: var(--azul); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--avance, 0) * 4 - var(--i)), 1)); }
  .pasos .n { font-family: var(--f-disp); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--azul); }
  .pasos b { font-size: 19px; }
  .pasos p { color: var(--azul-2); font-size: 15px; }
  @media (max-width: 819px) {
    .como { padding-block: 72px; }
    .pasos { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 36px; align-items: start; }
    .pasos li { min-height: 0; margin-left: calc(var(--i) * 18px); padding: 18px 0 18px 16px; grid-template-columns: 56px 1fr; }
    .pasos li .n { grid-row: span 2; font-size: 36px; }
  }

  /* ============ PERFILES CON FOTO ============ */
  .perfiles { background: var(--blanco); padding-block: 104px; }
  .perfiles-rej { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
  .perfil { position: relative; overflow: hidden; min-height: 340px; display: grid; align-content: end; gap: 8px; padding: 24px 24px 26px; text-decoration: none; color: var(--blanco); background: var(--tinta); isolation: isolate; }
  .perfil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 1.1s var(--ease); }
  .perfil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 17, 22, .05) 18%, rgba(14, 17, 22, .55) 50%, rgba(14, 17, 22, .88) 100%); transition: background .5s var(--ease); }
  .perfil b, .perfil span { text-shadow: 0 1px 12px rgba(14, 17, 22, .6); }
  .perfil b { font-family: var(--f-disp); font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
  .perfil span { color: rgba(255, 255, 255, .92); font-size: 15px; max-width: 30ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s; }
  .perfil i { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: rgba(255, 255, 255, .8); transition: transform .35s var(--ease); }
  .perfil:hover img, .perfil:focus-visible img { transform: scale(1.08); }
  .perfil:hover::before, .perfil:focus-visible::before { background: linear-gradient(180deg, rgba(11, 42, 74, .25) 0%, rgba(11, 42, 74, .9) 100%); }
  .perfil:hover span, .perfil:focus-visible span { max-height: 6em; opacity: 1; }
  .perfil:hover i { transform: translateX(6px); }
  .perfil.ancha { grid-column: span 2; }
  .perfil-cta { background: var(--azul); }
  .perfil-cta::before { display: none; }
  .perfil-cta span { max-height: 6em; opacity: 1; }
  @media (hover: none) { .perfil span { max-height: 6em; opacity: 1; }
    /* con la descripción siempre a la vista, el texto sube hasta media tarjeta: el velo, también (22/10: «Reformistas e instaladores» salía a 2,3:1 sobre la ventana) */
    .perfil::before { background: linear-gradient(180deg, rgba(14, 17, 22, .2) 0%, rgba(14, 17, 22, .66) 32%, rgba(14, 17, 22, .9) 100%); } }
  @media (max-width: 819px) {
    .perfiles { padding-block: 72px; }
    .perfiles-rej { grid-template-columns: minmax(0, 1fr); }
    .perfil, .perfil.ancha { grid-column: auto; min-height: 240px; }
  }

  /* ============ PREGUNTAS ============ */
  .preguntas { padding-block: 104px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
  .preguntas .h2 { margin-top: 12px; }
  .faq details { border-bottom: 1px solid var(--greige); }
  .faq details:first-child { border-top: 1px solid var(--greige); }
  .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--f-disp); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
  .faq summary::-webkit-details-marker { display: none; }
  /* el «+» con su propia caja, pequeña: si se estira al alto de la pregunta, al girarlo 45° asoma por la derecha */
  .faq summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; color: var(--azul); transition: transform .3s var(--ease); align-self: flex-start; line-height: 1.2; flex: none; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { padding: 0 0 22px; color: var(--azul-2); max-width: 60ch; }
  .faq details p.faq-accion { margin-top: -8px; }
  @media (max-width: 819px) { .preguntas { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 72px; } .faq summary { font-size: 18px; } }

  /* ============ CIERRE Y PIE ============ */
  /* el final de todas las páginas: azul con la veta, la llamada de la página y el pie, sin franja negra debajo */
  .final { position: relative; color: var(--blanco); background: var(--azul) center / cover no-repeat; overflow: hidden; }
  .final::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 42, 74, .95) 0%, rgba(11, 42, 74, .72) 100%); }
  .final > * { position: relative; }
  .cierre { color: var(--blanco); }
  .cierre .ancho { position: relative; padding-block: 112px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
  .cierre .h2 { color: var(--blanco); }
  .cierre p { color: var(--greige); margin-top: 16px; max-width: 46ch; font-size: 18px; }
  .cierre .contacto { margin-top: 26px; font-size: 15px; color: var(--greige); display: flex; flex-wrap: wrap; gap: 6px 24px; }
  .cierre .contacto a { color: var(--blanco); }
  @media (max-width: 819px) { .cierre .ancho { grid-template-columns: minmax(0, 1fr); padding-block: 72px; } }
  .pie { color: var(--greige); font-size: 14px; }
  .pie .ancho { border-top: 1px solid rgba(255, 255, 255, .16); padding-block: 24px 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px 40px; align-items: start; }
  .pie .logo { color: var(--blanco); width: 84px; }
  .pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .pie a { text-decoration: none; color: var(--blanco); }
  .pie a:hover { text-decoration: underline; }
  .pie address { font-style: normal; line-height: 1.6; }
  .pie .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 14px; font-size: 12px; color: var(--greige); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
  @media (max-width: 819px) { .pie .ancho { grid-template-columns: minmax(0, 1fr); } }

  .bloque { padding-block: 104px; scroll-margin-top: calc(var(--cab) + 58px); }
  .bloque .h2 { margin: 12px 0 14px; }
  .claro { background: var(--blanco); }
  @media (max-width: 819px) { .bloque { padding-block: 68px; } }

  /* Portada: la ventana cerca, oscura sobre una pared clara */
  .f-hero { background: var(--blanco); }
  .f-hero-rej { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-block: 28px 72px; }
  .migas { font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
  .migas a { color: var(--azul-2); text-decoration: none; }
  .migas a:hover { text-decoration: underline; }
  .f-hero h1 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(54px, 8vw, 124px); line-height: .9; letter-spacing: -.05em; margin: 16px 0 22px; }
  .f-hero .sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--azul-2); max-width: 44ch; }
  .f-chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .f-chips li { font-family: var(--f-mono); font-size: 12px; border: 1px solid var(--greige); background: var(--fondo); padding: 5px 10px; border-radius: 999px; }
  .f-hero .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
  .btn.linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
  .btn.linea:hover { background: var(--fondo); }
  .f-hero-img { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--fondo); }
  .f-hero-img .encuadre { position: absolute; inset: 0; transform-origin: 58.1% 42.1%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--zoom, 1)); }
  .anima .f-hero { height: calc(100svh - var(--cab) + 100svh); }
  .anima .f-hero-rej { position: sticky; top: var(--cab); min-height: calc(100svh - var(--cab)); }
  @media (max-width: 819px) { .anima .f-hero { height: auto; } .anima .f-hero-rej { position: static; min-height: 0; } }
  .f-hero-img img { width: 100%; height: 100%; object-fit: cover; }
  .anima .f-hero-img { animation: destapa 1.1s var(--ease) .1s both; }
  @keyframes destapa { from { clip-path: inset(4%); } to { clip-path: inset(0); } }
  .f-hero-img figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--f-mono); font-size: 11px; background: rgba(255, 255, 255, .88); padding: 3px 8px; }
  @media (max-width: 819px) { .f-hero-rej { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 48px; } .migas { margin-bottom: 24px; } }

  /* Navegación de la página, con la barra de lectura arriba */
  .f-sub { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--cab)); z-index: 40; background: rgba(247, 245, 241, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--greige); }
  .f-sub::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--azul); transform-origin: 0 50%; transform: scaleX(var(--lect, 0)); will-change: transform; }
  @supports (animation-timeline: scroll()) {
    .f-sub::before { animation: lectura linear both; animation-timeline: scroll(root); }
    @keyframes lectura { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
  .f-sub .ancho { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; }
  .f-sub .ancho::-webkit-scrollbar { display: none; }
  .f-sub a { flex: none; text-decoration: none; font-size: 14px; color: var(--azul-2); padding: 15px 12px; position: relative; }
  .f-sub a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--azul); transform: scaleX(0); transition: transform .35s var(--ease); }
  .f-sub a.activo { color: var(--tinta); }
  .f-sub a.activo::after { transform: none; }
  .f-sub a.btn { margin-left: auto; padding: 8px 14px; font-size: 13px; flex: none; color: var(--blanco); }
  .f-sub a.btn::after { display: none; }
  @media (max-width: 819px) { .f-sub .btn { display: none; } }

  /* Resumen: cifras */
  .cifras-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--tinta); margin-top: 40px; }
  .cifras-f div { padding: 22px 20px 0 0; display: grid; gap: 6px; align-content: start; }
  .cifras-f b { font-family: var(--f-disp); font-weight: 800; font-size: clamp(48px, 6vw, 88px); line-height: .95; letter-spacing: -.05em; }
  .cifras-f b small { font-size: .3em; font-weight: 600; letter-spacing: 0; color: var(--gris-2); margin-left: 4px; }
  .cifras-f span { color: var(--azul-2); font-size: 15px; max-width: 24ch; }
  .nota-fuente { font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); margin-top: 18px; }
  @media (max-width: 819px) { .cifras-f { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cifras-f div { padding-bottom: 18px; } }

  /* Pieza a pieza: el render se queda quieto y, al bajar, se dibuja cada pieza */
  .piezas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; margin-top: 64px; }
  .piezas-txt article { min-height: 78svh; display: grid; align-content: center; gap: 12px; max-width: 46ch; padding-left: 20px; border-left: 3px solid transparent; transition: border-color .5s var(--ease); }
  .anima .piezas-txt article h3 { color: var(--gris-2); transition: color .5s var(--ease); }
  .anima .piezas-txt article.activo { border-left-color: var(--azul); }
  .anima .piezas-txt article.activo h3 { color: var(--tinta); }
  .piezas-txt .n { font-family: var(--f-mono); font-size: 12px; color: var(--azul); letter-spacing: .06em; }
  .piezas-txt h3 { font-family: var(--f-disp); font-size: clamp(28px, 3vw, 42px); line-height: 1.02; letter-spacing: -.03em; }
  .piezas-txt p { color: var(--azul-2); font-size: 17px; }
  .piezas-fig { margin: 0; position: sticky; top: calc(var(--cab) + 70px); height: calc(100svh - var(--cab) - 110px); display: grid; place-items: center; }
  .lamina { position: relative; width: min(100%, calc((100svh - var(--cab) - 130px) * 975 / 1346)); aspect-ratio: 975 / 1346; }
  .lamina > img { width: 100%; height: 100%; object-fit: contain; }
  /* el corte del perfil de cada serie: la lámina toma su proporción, para que las marcas caigan en su sitio */
  .lamina.solo-perfil { width: min(100%, calc((100svh - var(--cab) - 130px) * var(--arn, .72) * .98)); }
  .lamina svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .trazo, .halo { fill: none; stroke-linejoin: round; stroke-linecap: round; }
  .halo { stroke: var(--blanco); stroke-width: 11; opacity: .9; }
  .guia { fill: none; stroke: var(--azul); stroke-width: 2.6; opacity: .7; }
  .trazo { stroke: var(--azul); stroke-width: 4.5; }
  .relleno-nudo { fill: var(--blanco); fill-opacity: 0; stroke: var(--blanco); stroke-width: 4; stroke-opacity: 0; }
  .relleno-vidrio { fill: var(--azul); fill-opacity: 0; }
  .cota { stroke: var(--azul); stroke-width: 3.5; fill: none; }
  .p-et { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); background: var(--tinta); color: var(--blanco); font-family: var(--f-mono); font-size: 12px; padding: 5px 9px; border-radius: 3px; white-space: nowrap; opacity: var(--o, 0); transition: opacity .3s; pointer-events: none; }
  .p-et b { font-family: var(--f-disp); font-size: 14px; margin-right: 6px; }
  .p-inset { position: absolute; left: -6%; bottom: 4%; width: 46%; background: var(--blanco); border: 1px solid var(--greige); box-shadow: 0 18px 40px -20px rgba(14, 17, 22, .45); padding: 10px 10px 8px; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 14px)); transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
  .p-inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
  .p-inset span { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--azul-2); margin-top: 6px; }
  .camaras { display: grid; gap: 8px; padding: 6px 4px 2px; }
  .camaras div { display: grid; grid-template-columns: 44px repeat(6, minmax(0, 1fr)); gap: 3px; align-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--azul-2); }
  .camaras i { height: 22px; border: 2px solid var(--tinta); background: var(--fondo); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease); transition-delay: calc(var(--j) * 70ms); }
  .p-inset.ver .camaras i { opacity: 1; transform: none; }
  .p-pie { position: absolute; right: 0; bottom: -26px; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); }
  @media (max-width: 819px) {
    .piezas { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
    .piezas-fig { order: -1; top: calc(var(--cab) + 48px); height: 46svh; z-index: 2; background: var(--fondo); padding-block: 8px; }
    .lamina { width: min(100%, calc((46svh - 16px) * 975 / 1346)); }
    .lamina.solo-perfil { width: min(100%, calc((46svh - 16px) * var(--arn, .72) * .98)); }
    .piezas-txt article { min-height: 52svh; }
    .p-et { font-size: 10px; padding: 3px 6px; }
    .p-et b { font-size: 12px; }
    /* en el móvil, las etiquetas largas parten en dos líneas y nunca empujan la página hacia un lado */
    .solo-perfil .p-et { white-space: normal; width: max-content; max-width: 38vw; text-align: center; line-height: 1.2; }
    .piezas-fig { overflow-x: clip; }
    .p-inset { left: auto; right: -2%; width: 52%; }
    .p-pie { bottom: auto; top: 4px; right: 4px; font-size: 10px; background: rgba(255, 255, 255, .88); padding: 2px 6px; }
  }

  /* Aperturas disponibles */
  .aperturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .apertura { background: var(--fondo); padding: 34px 26px 26px; display: grid; gap: 10px; align-content: start; outline: none; transition: background .3s; }
  .apertura:hover, .apertura:focus-visible { background: var(--greige); }
  /* la tarjeta que se está enseñando en «Cómo funciona»: resaltada, con una barra arriba que avanza mientras dura */
  #funciona .apertura { position: relative; transition: background .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
  #funciona .apertura::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--azul); transform: scaleX(0); transform-origin: left; }
  #funciona .apertura.en-demo { background: var(--blanco); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(14, 17, 22, .45); }
  #funciona .apertura.en-demo::before { animation: demo-barra var(--dur, 3600ms) linear forwards; }
  #funciona .apertura.en-demo h3 { color: var(--azul); }
  @keyframes demo-barra { to { transform: scaleX(1); } }
  .apertura:focus-visible { box-shadow: inset 0 0 0 2px var(--azul); }
  .apertura .vr { max-width: 190px; margin: 0 auto 18px; }
  .apertura h3 { font-family: var(--f-disp); font-size: 24px; letter-spacing: -.02em; }
  .apertura p { color: var(--azul-2); font-size: 15px; }
  .apertura .manilla-t { font-family: var(--f-mono); font-size: 12px; color: var(--azul); }
  @media (max-width: 819px) { .aperturas { grid-template-columns: minmax(0, 1fr); } .apertura { grid-template-columns: 110px minmax(0, 1fr); column-gap: 18px; padding: 22px 18px; } .apertura .vr { grid-row: span 3; margin: 0; } }

  /* Configurador paso a paso */
  .conf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 36px; }
  .escaparate { position: sticky; top: calc(var(--cab) + 80px); background: var(--fondo); padding: 48px 28px 24px; display: grid; gap: 16px; justify-items: center; overflow: hidden; }
  .escaparate .sombra { width: 62%; height: 18px; margin-top: -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 17, 22, .28), transparent); }
  .escaparate .vent { max-width: 330px; transition: max-width .5s var(--ease); }
  /* la caja de la ventana del configurador: cotas, persiana (cajón y lamas), recogedor o pulsador */
  .vent-caja { position: relative; width: 100%; display: grid; justify-items: center; padding: 34px 44px 30px; }
  .vent .p-cajon, .vent .p-lamas { display: none; }
  .vent.con-persiana .p-cajon { display: block; position: absolute; left: -3%; right: -3%; bottom: 100%; height: 0; padding-top: var(--cajon, 15%); background: var(--perfil) var(--tex); background-size: var(--tex-sz); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .3); transform: translateZ(4px); }
  /* el cajón según el modelo (22/10, Robert: «no cambia»): el tradicional, más ancho y con su frente moldurado; el monobloc,
     enrasado con el marco y en una sola pieza con la ventana; el integral, como el monobloc y con la mosquitera dentro (la
     malla, abajo); el registrable, con la tapa de registro y sus dos clips a la vista */
  .vent.con-persiana .p-cajon::before, .vent.con-persiana .p-cajon::after { content: ""; position: absolute; display: none; }
  .vent[data-cajon="tradicional-185"].con-persiana .p-cajon { left: -7%; right: -7%; border-radius: 5px 5px 0 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .14); }
  .vent[data-cajon="tradicional-185"].con-persiana .p-cajon::before { display: block; left: 3%; right: 3%; top: 24%; height: 2px; background: rgba(0, 0, 0, .34); box-shadow: 0 1px 0 rgba(255, 255, 255, .3), 0 8px 0 rgba(0, 0, 0, .22), 0 9px 0 rgba(255, 255, 255, .25); }
  .vent[data-cajon^="monobloc"].con-persiana .p-cajon, .vent[data-cajon^="integral"].con-persiana .p-cajon { left: 0; right: 0; transform: none;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .vent[data-cajon^="integral"].con-persiana .p-cajon::after { display: block; left: 8%; right: 8%; bottom: 10%; height: 22%; border-radius: 1px;
    background: repeating-linear-gradient(90deg, rgba(14, 17, 22, .35) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(14, 17, 22, .3) 0 1px, transparent 1px 3px), rgba(220, 226, 230, .55); }
  .vent[data-cajon^="registrable"].con-persiana .p-cajon::before { display: block; left: 5%; right: 5%; top: 16%; bottom: 16%; border: 1px solid rgba(0, 0, 0, .3); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 1px 0 rgba(255, 255, 255, .25); }
  .vent[data-cajon^="registrable"].con-persiana .p-cajon::after { display: block; left: 22%; right: 22%; top: 42%; height: 16%; background: radial-gradient(circle at 0 50%, rgba(0, 0, 0, .42) 0 2.4px, transparent 2.8px), radial-gradient(circle at 100% 50%, rgba(0, 0, 0, .42) 0 2.4px, transparent 2.8px); }
  .vent.con-persiana .p-lamas { display: block; position: absolute; left: 6.5%; right: 6.5%; top: 6.5%; height: 34%; background: repeating-linear-gradient(180deg, #e3e5e6 0 6px, #b4b9bd 6px 7px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transform: translateZ(-6px); }
  /* las lamas, vistas a través del vidrio (la persiana va por fuera, bajada un tercio) */
  .vent.con-persiana .vidrio::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; background: repeating-linear-gradient(180deg, #e3e5e6 0 5px, #b4b9bd 5px 6px); opacity: .9; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
  .cota { position: absolute; font-size: 12px; font-weight: 600; color: var(--azul-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cota-an { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }
  .cota-al { right: calc(100% + 14px); top: 50%; transform: translate(50%, -50%) rotate(-90deg); }
  .vent.exterior .cota { display: none; }
  .p-recogedor, .p-pulsador, .p-mando { position: absolute; display: none; top: 46%; z-index: 2; }
  /* el recogedor empotrado: una placa blanca con la ranura por donde entra la cinta y sus dos tornillos; la cinta, plana y
     tejida, como la de una persiana de verdad (con una línea de 2 px parecía el cordón de una luz: Robert, 21/10) */
  .vent-caja.per-manual .p-recogedor { display: block; width: 18px; height: 46px; border-radius: 3px;
    background: radial-gradient(circle at 50% 84%, #b9bcbf 0 1.4px, transparent 1.8px), radial-gradient(circle at 50% 30%, #b9bcbf 0 1.4px, transparent 1.8px), linear-gradient(90deg, #ecece9, #ffffff 45%, #e4e4e0);
    box-shadow: 0 1px 3px rgba(14, 17, 22, .4), inset 0 0 0 1px rgba(14, 17, 22, .14); }
  .vent-caja.per-manual .p-recogedor::after { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 3px; border-radius: 2px; background: #3b3f44; }
  .vent-caja.per-manual .p-recogedor::before { content: ""; position: absolute; left: 6px; bottom: calc(100% - 7px); width: 6px; height: 9999px; max-height: calc(var(--alto-v, 200px) * .46 + 18px);
    background: repeating-linear-gradient(0deg, rgba(60, 52, 40, .14) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 2px), linear-gradient(90deg, #a99f8e, #d6cfc0 50%, #a59b8a);
    box-shadow: 0 0 0 .5px rgba(14, 17, 22, .22), 1px 0 2px rgba(14, 17, 22, .18); }
  /* el pulsador, una placa de pared con sus dos teclas; el mando, un mando a distancia con su luz y tres botones; cada uno
     con su nombre debajo (22/10, Robert: «no se nota que el mando es un mando y el pulsador un pulsador») */
  .vent-caja.per-pulsador .p-pulsador, .vent-caja.per-mando .p-mando { display: grid; justify-items: center; gap: 4px; font-style: normal; }
  .p-pulsador svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 1px 2px rgba(14, 17, 22, .4)); }
  .pl-marco { fill: #f7f7f5; stroke: #c4c8cb; stroke-width: 1; }
  .pl-tecla { fill: #ffffff; stroke: #b3b8bc; stroke-width: .8; }
  .pl-flecha { fill: var(--azul-2); }
  .p-mando svg { width: 22px; height: 44px; display: block; filter: drop-shadow(0 2px 3px rgba(14, 17, 22, .45)); }
  .md-cuerpo { fill: #2b2f34; }
  .md-luz { fill: #62d08c; }
  .md-boton { fill: #4b5159; stroke: #1c1f23; stroke-width: .6; }
  .md-flecha { fill: #eceff1; }
  .p-pulsador b, .p-mando b { font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; line-height: 1; color: var(--gris-2); white-space: nowrap; }
  .vent-caja.lado-der .p-recogedor, .vent-caja.lado-der .p-pulsador, .vent-caja.lado-der .p-mando { left: calc(100% + 12px); }
  .vent-caja.lado-izq .p-recogedor, .vent-caja.lado-izq .p-pulsador, .vent-caja.lado-izq .p-mando { right: calc(100% + 12px); }
  /* con el recogedor a la izquierda, la cota de alto pasa a la derecha */
  .vent-caja.lado-izq.per-manual .cota-al, .vent-caja.lado-izq.per-pulsador .cota-al, .vent-caja.lado-izq.per-mando .cota-al { right: auto; left: calc(100% + 14px); transform: translate(-50%, -50%) rotate(90deg); }
  /* el recogedor empotrado en el marco: sobre el perfil, en el lado elegido (sin él, en la pared, a un lado de la ventana) */
  .vent-caja.rec-marco.lado-der .p-recogedor { left: auto; right: calc(3.25% - 9px); }
  .vent-caja.rec-marco.lado-izq .p-recogedor { right: auto; left: calc(3.25% - 9px); }
  .vent-caja.per-pulsador.per-mando .p-mando { top: calc(46% + 56px); }
  .vent-caja.vista-fuera .p-recogedor, .vent-caja.vista-fuera .p-pulsador, .vent-caja.vista-fuera .p-mando { display: none; }
  .mezcla { margin: -6px 0 0; font-size: 13px; }
  .lista-grupos { font-size: 13px; color: var(--azul-2); }
  .lista-grupos b { color: var(--tinta); }
  .escaparate .vent.una .h-izq { display: none; }
  .escaparate .vent.una { aspect-ratio: 1 / 1.45; max-width: 230px; }
  .escaparate .vent.exterior { transform: scaleX(-1); }
  .escaparate .vent.exterior .manilla { display: none; }
  .fila-mandos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
  .vista { display: flex; border: 1px solid var(--gris); border-radius: 999px; overflow: hidden; }
  .vista button { background: transparent; border: 0; padding: 7px 14px; cursor: pointer; font-size: 13px; }
  .vista button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }
  .btn-3d { display: inline-flex; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--tinta); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
  .btn-3d:hover { background: var(--greige); }
  .btn-3d svg { flex: none; }
  .nota-conf { font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); text-align: center; }

  .con-raton .vent.v3d .cuerpo { transition: none; }

  .pasos-conf { display: grid; gap: 20px; }
  .pasos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .pasos-lista button { background: transparent; border: 1px solid var(--greige); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--azul-2); transition: background .2s, color .2s, border-color .2s; }
  .pasos-lista button:hover { border-color: var(--tinta); }
  .pasos-lista button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
  .pasos-lista button.hecho:not([aria-selected="true"]) { color: var(--tinta); border-color: var(--gris); }
  .pasos-barra { height: 3px; background: var(--greige); border-radius: 2px; overflow: hidden; }
  .pasos-barra i { display: block; height: 100%; background: var(--azul); width: calc(var(--paso, 1) / 7 * 100%); transition: width .5s var(--ease); }
  .paso-panel { min-height: 220px; }
  .paso-panel[hidden] { display: none; }
  .paso-panel h3 { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
  .paso-panel .ayuda { color: var(--azul-2); font-size: 14px; margin-bottom: 16px; }
  .sistemas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sistema { text-align: left; background: var(--blanco); border: 1px solid var(--greige); padding: 12px 14px; cursor: pointer; display: grid; gap: 3px; transition: border-color .2s; }
  .sistema:hover { border-color: var(--tinta); }
  .sistema[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
  .sistema b { font-family: var(--f-disp); font-size: 17px; }
  .sistema span { font-family: var(--f-mono); font-size: 11px; color: var(--azul-2); }
  .sistema em { font-style: normal; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; background: var(--azul); color: var(--blanco); padding: 1px 6px; border-radius: 999px; justify-self: start; }
  .opciones { display: flex; flex-wrap: wrap; gap: 8px; }
  .opciones button { cursor: pointer; background: var(--blanco); border: 1px solid var(--greige); padding: 10px 14px; font-size: 14px; transition: border-color .2s; }
  .opciones button:hover { border-color: var(--tinta); }
  .opciones button[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
  .familia { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-2); margin: 14px 0 8px; }
  .familia:first-of-type { margin-top: 0; }
  .muestras { display: flex; flex-wrap: wrap; gap: 10px; }
  .muestras button { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(14, 17, 22, .2); background-size: cover; transition: transform .2s var(--ease); }
  .muestras button:hover { transform: scale(1.08); }
  .muestras button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--tinta); }
  .elegido { font-size: 14px; margin-top: 10px; }
  /* la carta (21/10): los siete estándar a la vista y el resto plegado; cada serie, lo que admite */
  .carta .muestras { gap: 8px; }
  .carta .muestras button { width: 40px; height: 40px; }
  .carta .familia + .muestras + .familia { margin-top: 14px; }
  .mas-colores { margin-top: 14px; border-top: 1px solid var(--greige); }
  .mas-colores > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--azul-2); }
  .mas-colores > summary::-webkit-details-marker { display: none; }
  .mas-colores > summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; transition: transform .25s var(--ease); }
  .mas-colores[open] > summary::after { transform: rotate(45deg); }
  .mas-colores > .familia:first-of-type { margin-top: 4px; }
  .mas-colores .muestras + .familia { margin-top: 14px; }
  .nota-carta { font-size: 13px; color: var(--gris-2); margin-top: 12px; line-height: 1.5; }
  .mini-controles .nota-carta { display: none; } /* en la ficha de cada serie, lo dice su texto de ayuda, debajo */
  .mani-colores button { display: inline-flex; align-items: center; gap: 8px; }
  .mani-colores .pto { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(14, 17, 22, .28); }
  .nota-cajon { margin-top: 10px; }
  #persiana-mas > .familia:first-of-type { margin-top: 18px; }
  .nota-cajon.aviso-alto { color: var(--tinta); font-weight: 600; }
  .paso-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .paso-nav .ant { background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--azul-2); padding: 10px 0; }
  .paso-nav .ant:disabled { opacity: .35; cursor: default; }
  .paso-nav .cuenta { font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); }
  .paso-nav .btn { border: 0; cursor: pointer; }
  .seleccion { background: var(--tinta); color: var(--blanco); padding: 18px 20px; display: grid; gap: 12px; }
  .seleccion p { font-size: 14px; color: var(--greige); }
  .seleccion b { color: var(--blanco); }
  .seleccion .btn { border: 0; cursor: pointer; justify-self: start; }
  .medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .medidas label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
  .medidas input { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--gris); border-radius: 2px; width: 100%; min-width: 0; background: var(--blanco); color: var(--tinta); }
  .medidas input::-webkit-inner-spin-button, .medidas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .medidas input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  .con-u { position: relative; display: block; }
  .con-u input { padding-right: 40px; }
  .con-u i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); pointer-events: none; }
  .lista-v { border: 1px solid var(--greige); background: var(--blanco); padding: 16px 18px; display: grid; gap: 10px; }
  .lista-v[hidden] { display: none; }
  .lista-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
  .lista-cab span { font-family: var(--f-mono); font-size: 12px; color: var(--azul); }
  .lista-v ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
  .lista-v li { padding-bottom: 8px; border-bottom: 1px solid var(--greige); }
  .lista-v li b { font-weight: 600; }
  .lista-v li .quitar { background: none; border: 0; padding: 0 0 0 8px; color: var(--azul); font-size: 13px; cursor: pointer; text-decoration: underline; }
  .lista-v .btn { justify-self: start; }
  .nudo-barras { display: grid; gap: 6px; }
  .nudo-barras span { position: relative; font-family: var(--f-mono); font-size: 11px; color: var(--tinta); padding-top: 13px; }
  .nudo-barras i { position: absolute; left: 0; top: 0; height: 9px; width: calc(var(--v) * 100%); background: var(--gris-2); border-radius: 0 4px 4px 0; }
  .nudo-barras .esta i { background: var(--azul); }
  .nudo-barras .esta { font-weight: 500; }
  @media (max-width: 560px) { .medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 819px) {
    .conf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .escaparate { position: relative; top: 0; padding: 30px 16px 18px; }
    .escaparate .vent { max-width: 220px; }
    .sistemas { grid-template-columns: minmax(0, 1fr); }
  }

  /* Visor 3D, solo cuando se pide */
  .visor3d { width: min(1120px, calc(100vw - 24px)); height: min(780px, calc(100svh - 24px)); max-width: none; max-height: none; padding: 0; border: 0; background: var(--fondo); color: var(--tinta); overflow: hidden; }
  .visor3d[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .visor3d::backdrop { background: rgba(14, 17, 22, .62); }
  .v3d-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--greige); background: var(--blanco); }
  .v3d-cab p { font-family: var(--f-disp); font-weight: 600; font-size: 18px; }
  .v3d-cab span { font-family: var(--f-mono); font-size: 12px; color: var(--azul-2); }
  .v3d-cerrar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--greige); background: var(--blanco); cursor: pointer; font-size: 22px; line-height: 1; flex: none; }
  .v3d-cerrar:hover { border-color: var(--tinta); }
  .v3d-lienzo { position: relative; min-height: 0; touch-action: none; }
  .v3d-lienzo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
  .v3d-lienzo canvas:active { cursor: grabbing; }
  .v3d-carga { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; color: var(--azul-2); }
  .v3d-mandos { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 18px 14px; border-top: 1px solid var(--greige); background: var(--blanco); }
  .v3d-mandos button { background: var(--blanco); border: 1px solid var(--greige); border-radius: 999px; padding: 9px 16px; font-size: 14px; cursor: pointer; }
  .v3d-mandos button:hover { border-color: var(--tinta); }
  .v3d-mandos button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
  .v3d-mandos p { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); }
  @media (max-width: 819px) { .v3d-mandos p { margin-left: 0; width: 100%; } }

  /* Los datos del perfil, dibujados */
  .medidores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
  .med { background: var(--blanco); border: 1px solid var(--greige); padding: 20px 20px 18px; display: grid; gap: 10px; align-content: start; }
  .med-k { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-2); }
  .med-v { font-family: var(--f-disp); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.04em; }
  .med-v small { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--gris-2); margin-left: 4px; }
  .med-t { font-size: 14px; color: var(--azul-2); }
  .med-t i { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); display: block; margin-top: 4px; }
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 12px; }
  .seg i { background: var(--greige); border-radius: 0; }
  .seg i:first-child { border-radius: 4px 0 0 4px; }
  .seg i:last-child { border-radius: 0 4px 4px 0; }
  .seg i.on { background: var(--azul); }
  .medidores.por-revelar:not(.visto) .seg i.on { background: var(--greige); }
  .anima .seg i.on { transition: background .4s calc(var(--j, 0) * 90ms + .2s); }
  .seg-esc { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); margin-top: -4px; }
  .letras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
  .letras span { text-align: center; font-family: var(--f-mono); font-size: 12px; padding: 6px 0; background: var(--fondo); color: var(--gris-2); }
  .letras span:first-child { border-radius: 4px 0 0 4px; }
  .letras span:last-child { border-radius: 0 4px 4px 0; }
  .letras span.on { background: var(--azul); color: var(--blanco); font-weight: 500; }
  .presion { position: relative; height: 12px; background: var(--greige); border-radius: 4px; }
  .presion .lleno { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: var(--azul); border-radius: 4px; transform-origin: 0 50%; }
  .medidores.por-revelar:not(.visto) .presion .lleno { transform: scaleX(0); }
  .anima .presion .lleno { transition: transform 1.1s var(--ease) .25s; }
  .presion .hito { position: absolute; left: calc(var(--v) * 100%); top: -4px; bottom: -4px; width: 2px; background: var(--tinta); }
  .presion-esc { position: relative; height: 16px; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); }
  .presion-esc span { position: absolute; left: calc(var(--v) * 100%); transform: translateX(-50%); white-space: nowrap; }
  .presion-esc span:first-child { transform: none; }
  .presion-esc span:last-child { transform: translateX(-100%); }
  .ico-med { height: 44px; display: flex; align-items: center; gap: 10px; }
  .ico-med svg { height: 44px; width: auto; }
  .ico-med .p { fill: none; stroke: var(--tinta); stroke-width: 2.5; }
  .ico-med .r { fill: none; stroke: var(--azul); stroke-width: 3.5; stroke-linecap: round; }
  @media (max-width: 1100px) { .medidores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .medidores { grid-template-columns: minmax(0, 1fr); } }

  .compara { margin-top: 56px; background: var(--blanco); border: 1px solid var(--greige); padding: 26px 26px 20px; }
  .compara-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: 14px; }
  .compara-cab h3 { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; }
  .leyenda { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; font-size: 13px; }
  .leyenda li { display: flex; align-items: center; gap: 8px; }
  .leyenda i { border-radius: 50%; display: block; }
  .leyenda .d-esta { width: 14px; height: 14px; background: var(--azul); box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3px var(--azul); }
  .leyenda .d-otra { width: 10px; height: 10px; background: var(--gris-2); }
  .tira { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr); gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--greige); }
  .tira-k { font-size: 14px; font-weight: 600; }
  .tira-k small { display: block; font-weight: 400; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); margin-top: 2px; }
  .tira-eje { position: relative; height: 112px; }
  .tira-eje::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--gris); }
  .tira-eje .t { position: absolute; top: 94px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); white-space: nowrap; }
  .tira-eje .t::before { content: ""; position: absolute; left: 50%; top: -66px; width: 1px; height: 6px; background: var(--gris); }
  .punto-d { position: absolute; top: calc(30px + var(--dy, 0px)); left: var(--x); width: 26px; height: 26px; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; cursor: default; }
  .punto-d::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gris-2); box-shadow: 0 0 0 2px var(--blanco); }
  .punto-d.esta { z-index: 2; }
  .punto-d.esta::before { width: 14px; height: 14px; background: var(--azul); box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3.5px var(--azul); }
  .punto-d .lbl { position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--tinta); }
  .tip-d { position: absolute; z-index: 5; pointer-events: none; background: var(--tinta); color: var(--blanco); font-size: 12px; padding: 6px 9px; border-radius: 3px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s; }
  .tip-d.visible { opacity: 1; }
  .en-tabla { margin-top: 12px; font-size: 14px; }
  .en-tabla summary { cursor: pointer; font-weight: 600; color: var(--azul); padding: 6px 0; }
  .tabla-env { overflow-x: auto; margin-top: 10px; }
  table.comp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
  table.comp th, table.comp td { padding: 10px 10px; border-bottom: 1px solid var(--greige); text-align: left; }
  table.comp thead th { font-family: var(--f-disp); font-size: 15px; border-bottom: 2px solid var(--tinta); vertical-align: bottom; }
  table.comp tbody th { font-weight: 400; color: var(--azul-2); }
  table.comp td { font-family: var(--f-mono); font-size: 13px; }
  table.comp .esta { background: var(--fondo); }
  table.comp thead .esta { background: var(--tinta); color: var(--blanco); }
  @media (max-width: 819px) { .compara { padding: 18px 16px 12px; } .tira { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

  /* Nudo central */
  .nudos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .nudo { background: var(--blanco); border: 1px solid var(--greige); padding: 0 0 18px; cursor: pointer; text-align: left; display: grid; gap: 10px; transition: border-color .25s, box-shadow .25s; }
  .nudo img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 6% 8% 0; }
  .nudo b { font-family: var(--f-disp); font-size: 20px; padding: 0 18px; }
  .nudo span { color: var(--azul-2); font-size: 14px; padding: 0 18px; }
  .nudo .mm { font-family: var(--f-mono); font-size: 12px; color: var(--azul); }
  .nudo[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
  @media (max-width: 819px) { .nudos { grid-template-columns: minmax(0, 1fr); } .nudo img { aspect-ratio: 16 / 10; } }

  /* Vidrio y herraje */
  .vh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .vh article { background: var(--blanco); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .vh img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
  .vh .cuerpo { padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; }
  .vh h3 { font-family: var(--f-disp); font-size: 24px; letter-spacing: -.02em; }
  .vh ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--azul-2); font-size: 15px; }
  .vh .dato { font-family: var(--f-mono); font-size: 12px; color: var(--azul); }
  @media (max-width: 1000px) { .vh { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) { .vh article { grid-template-columns: minmax(0, 1fr); } .vh img { min-height: 200px; } }

  /* Descargas */
  .descargas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
  .doc { background: var(--blanco); border: 1px solid var(--greige); padding: 20px 20px 18px; display: grid; grid-template-columns: 46px 1fr; gap: 6px 16px; text-decoration: none; transition: border-color .25s; }
  .doc:hover { border-color: var(--tinta); }
  .doc .ico { grid-row: span 3; width: 46px; height: 58px; border: 1.5px solid var(--tinta); position: relative; display: grid; place-items: end center; padding-bottom: 6px; font-family: var(--f-mono); font-size: 10px; font-weight: 500; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); background: linear-gradient(225deg, var(--tinta) 0 15%, transparent 15%); }
  .doc b { font-size: 16px; }
  .doc span { font-size: 13px; color: var(--azul-2); }
  .doc i { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--azul); }
  .doc.para-arq { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
  .doc.para-arq span { color: var(--greige); }
  .doc.para-arq i { color: var(--blanco); }
  .doc.para-arq .ico { border-color: var(--blanco); background: linear-gradient(225deg, var(--blanco) 0 15%, transparent 15%); }
  @media (max-width: 1000px) { .descargas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .descargas { grid-template-columns: minmax(0, 1fr); } }

  /* Otras series */
  .series { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--greige); }
  .serie { padding: 20px 20px 22px 18px; border-right: 1px solid var(--greige); text-decoration: none; display: grid; gap: 6px; transition: background .25s; }
  .serie:hover { background: var(--fondo); }
  .serie b { font-family: var(--f-disp); font-weight: 800; font-size: 56px; letter-spacing: -.05em; line-height: 1; }
  .serie strong { font-size: 17px; }
  .serie span { font-size: 14px; color: var(--azul-2); }
  @media (max-width: 819px) { .series { grid-template-columns: repeat(2, minmax(0, 1fr)); } .serie { border-bottom: 1px solid var(--greige); } }


  /* «Mírala en tu color»: la versión corta del configurador en la página de cada sistema */
  .conf-mini { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .mini-controles { display: grid; gap: 22px; align-content: start; }
  .mini-controles .control .muestras + .muestras { margin-top: 8px; }
  .mini-controles .familia b { text-transform: none; letter-spacing: 0; color: var(--tinta); font-size: 13px; }
  .mini-cta { display: flex; flex-wrap: wrap; gap: 10px 14px; padding-top: 6px; border-top: 1px solid var(--greige); padding-top: 18px; }
  @media (max-width: 819px) { .conf-mini { grid-template-columns: minmax(0, 1fr); } .mini-cta .btn { flex: 1 1 100%; justify-content: center; } }

  /* ============ PRESUPUESTO: el final de todas las páginas ============
     A la izquierda, el titular y las otras vías (te llamamos, el configurador, el correo); a la derecha, el formulario de
     planos, que es la vía principal: lo que más les sirve a constructoras, estudios y reformistas es mandar lo que ya tienen. */
  /* Presupuesto */
  .pres { color: var(--blanco); }
  .pres .ancho { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; padding-block: 72px 56px; align-items: start; }
  .pres .h2 { color: var(--blanco); }
  .pres .ceja { color: var(--gris); }
  /* la ceja de la tarjeta blanca de la derecha: el gris de líneas no llega a AA sobre blanco (2,1:1) */
  .pres .final-cta .ceja { color: var(--gris-2); }
  .pres .texto > p { color: var(--greige); margin-top: 16px; max-width: 40ch; font-size: 17px; }
  .pres .texto ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--greige); }
  form.solicitud { background: var(--blanco); color: var(--tinta); padding: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-self: start; }
  form.solicitud .ent { grid-column: 1 / -1; }
  form.solicitud label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
  form.solicitud input, form.solicitud textarea { font: inherit; font-size: 15px; font-weight: 400; padding: 12px; border: 1px solid var(--gris); background: var(--blanco); color: var(--tinta); border-radius: 2px; min-width: 0; }
  form.solicitud input:focus, form.solicitud textarea:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); }
  form.solicitud textarea { min-height: 110px; resize: vertical; }
  .perfil-sw { display: flex; border: 1px solid var(--gris); }
  .perfil-sw button { flex: 1; background: transparent; border: 0; padding: 11px; cursor: pointer; font-size: 14px; }
  .perfil-sw button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }
  .adjuntos { border: 1.5px dashed var(--gris); padding: 16px; text-align: center; font-size: 14px; color: var(--azul-2); }
  .adjuntos small { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--gris-2); margin-top: 4px; }
  form.solicitud .casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--azul-2); }
  .casilla input { margin-top: 2px; flex: none; width: 20px; height: 20px; accent-color: var(--azul); }
  @media (max-width: 819px) { .pres .ancho { grid-template-columns: minmax(0, 1fr); padding-block: 52px 40px; } form.solicitud { grid-template-columns: minmax(0, 1fr); padding: 20px; } }
  .rutas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--gris); }
  .rutas button { background: transparent; border: 0; padding: 12px 10px; cursor: pointer; font-size: 14px; font-weight: 600; display: grid; gap: 2px; text-align: center; }
  .rutas button small { font-family: var(--f-mono); font-size: 11px; font-weight: 400; color: var(--azul); }
  .rutas button[aria-selected="true"] { background: var(--tinta); color: var(--blanco); }
  .rutas button[aria-selected="true"] small { color: var(--greige); }
  form.solicitud select { font: inherit; font-size: 15px; font-weight: 400; padding: 12px; border: 1px solid var(--gris); background: var(--blanco); color: var(--tinta); border-radius: 2px; min-width: 0; }
  .lista-resumen { border: 1px solid var(--greige); background: var(--fondo); padding: 12px 14px; font-size: 14px; color: var(--azul-2); }
  .lista-resumen ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--tinta); }
  .ruta-lista { display: grid; gap: 12px; }
  .ruta-lista[hidden], .ruta-planos[hidden] { display: none; }
  .pres .correo { font-size: 15px; }
  .pres .correo a { color: var(--blanco); }

  .pres .hechos-pres { font-size: 13px; color: var(--greige); margin-top: 14px; }
  .vias { list-style: none; margin: 28px 0 0; padding: 0; display: grid; border-top: 1px solid rgba(255, 255, 255, .16); max-width: 460px; }
  .vias li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 3px; }
  .vias b { font-size: 16px; color: var(--blanco); }
  .vias span { color: var(--greige); font-size: 14px; }
  .vias a { color: var(--blanco); font-weight: 600; font-size: 14px; justify-self: start; }
  .vias .llamada-btn { justify-self: start; margin-top: 8px; padding: 9px 14px; font-size: 14px; }
  .sol-t { display: grid; gap: 4px; }
  .sol-t b { font-family: var(--f-disp); font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
  .sol-t span { font-size: 14px; color: var(--azul-2); }
  form.solicitud select { font: inherit; font-size: 15px; font-weight: 400; padding: 12px; border: 1px solid var(--gris); background: var(--blanco); color: var(--tinta); border-radius: 2px; min-width: 0; }
  form.solicitud label small { font-weight: 400; color: var(--gris-2); }
  .adjuntos { display: grid; justify-items: center; gap: 4px; background: var(--fondo); border: 1.5px dashed var(--azul-2); border-radius: 4px; padding: 18px; cursor: pointer; transition: background .2s, border-color .2s; }
  .adjuntos:hover, .adjuntos:focus-visible { background: var(--greige); border-color: var(--tinta); }
  .adjuntos svg { width: 26px; height: 26px; color: var(--azul); }
  .adjuntos span { font-weight: 600; color: var(--tinta); }

  .final-der .vias { max-width: none; margin-top: 0; }

  /* ============ PLANTILLAS DE LANDING (perfil profesional, apertura, guía) ============
     Lo común de las landings: portada con la pregunta respondida (el bloque que citan los buscadores y las IA), bloques
     de lista, tarjetas, tablas de datos con su fuente, preguntas y una nota interna de maqueta con lo pendiente. */
  .lp-hero { background: var(--blanco); }
  .lp-hero-rej { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-block: 28px 88px; }
  .lp-hero h1 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(38px, 4.6vw, 68px); line-height: .98; letter-spacing: -.04em; margin: 14px 0 18px; max-width: 18ch; }
  .lp-hero .sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--azul-2); max-width: 46ch; }
  .lp-hero .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
  .lp-hero-img { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--fondo); }
  .lp-hero-img img { width: 100%; height: 100%; object-fit: cover; }
  .lp-hero-img figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 11px; background: rgba(255, 255, 255, .88); padding: 3px 8px; }
  .lp-hero-img.foto-ancha { aspect-ratio: 4 / 3; }
  @media (max-width: 819px) { .lp-hero-rej { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 56px; } }

  /* la pregunta del perfil, respondida en una frase: el párrafo que se puede citar tal cual */
  .respuesta { margin-top: 28px; padding: 18px 20px; border-left: 3px solid var(--azul); background: var(--fondo); max-width: 58ch; }
  .respuesta .pregunta { font-family: var(--f-disp); font-weight: 600; font-size: 18px; color: var(--tinta); margin: 0 0 8px; }
  .respuesta p { margin: 0; color: var(--azul-2); }

  /* dos columnas: el texto a un lado y la lista al otro */
  .dos-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  @media (max-width: 819px) { .dos-col { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
  .nota-medida { margin-top: 22px; font-size: 15px; color: var(--azul-2); border-top: 1px solid var(--greige); padding-top: 14px; max-width: 46ch; }
  .lista-num { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 0; }
  .lista-num li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--greige); font-size: 17px; }
  .lista-num li:first-child { border-top: 1px solid var(--greige); }
  .lista-num li::before { content: counter(n, decimal-leading-zero); font-family: var(--f-disp); font-weight: 700; color: var(--azul); font-size: 17px; }
  .lista-check { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
  .lista-check li { position: relative; padding-left: 30px; font-size: 17px; }
  .lista-check li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(-45deg); }
  .lista-no li::before { width: 14px; height: 2px; border: 0; background: var(--gris-2); top: .75em; transform: none; }
  .enlace-pie { margin-top: 22px; font-size: 16px; color: var(--azul-2); }
  .enlace-pie a { color: var(--azul); }

  /* tarjetas de «qué recibes», «errores frecuentes» o «series» */
  .tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
  .tarjetas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* la tarjeta contrasta con el fondo de su bloque: blanca sobre el crema y crema sobre el blanco */
  .tarjeta { background: var(--fondo); padding: 26px 24px; display: grid; gap: 10px; align-content: start; }
  .bloque:not(.claro) .tarjeta { background: var(--blanco); }
  .tarjeta h3 { font-family: var(--f-disp); font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
  .tarjeta p { margin: 0; color: var(--azul-2); }
  /* tarjeta que lleva a su página (21/10): entera clicable, sube un poco al pasar */
  a.tarjeta.enlazada { color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
  a.tarjeta.enlazada:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(14, 17, 22, .35); }
  a.tarjeta.enlazada:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
  .tarjeta .ir { font-style: normal; font-weight: 600; font-size: 15px; color: var(--azul); margin-top: 6px; }
  a.tarjeta.enlazada:hover .ir { text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { a.tarjeta.enlazada, a.tarjeta.enlazada:hover { transition: none; transform: none; } }
  .tarjeta .n { font-family: var(--f-disp); font-weight: 800; color: var(--azul); font-size: 15px; }
  .linea-bajo { margin-top: 22px; color: var(--azul-2); max-width: 70ch; }
  @media (max-width: 1023px) { .tarjetas.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 819px) { .tarjetas, .tarjetas.tres { grid-template-columns: minmax(0, 1fr); } }

  /* tabla de datos con su fuente (CTE, comparativas) */
  .tabla-datos { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 16px; }
  .tabla-datos th, .tabla-datos td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--greige); vertical-align: top; }
  .tabla-datos thead th { font-size: 13px; font-weight: 600; color: var(--gris-2); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--tinta); }
  .tabla-datos tbody th { font-weight: 600; }
  .tabla-datos td.num { font-variant-numeric: tabular-nums; }
  .tabla-envuelta { overflow-x: auto; }
  .fuente { margin-top: 12px; font-size: 13px; color: var(--gris-2); max-width: 90ch; }
  .fuente a { color: var(--azul-2); }
  .matiz { margin-top: 28px; display: grid; gap: 12px; max-width: 76ch; }
  .matiz p { margin: 0; color: var(--azul-2); }
  .matiz b { color: var(--tinta); }
  .parrafo-cita { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--tinta); max-width: 64ch; margin: 18px 0 0; }

  /* nota interna de la maqueta: lo que falta decidir (no va a la web) */
  .nota-maqueta { margin: 0 auto; max-width: 1280px; padding: 0 max(16px, var(--lado-d)) 72px max(16px, var(--lado)); }
  .nota-maqueta div { border: 1.5px dashed var(--gris); padding: 22px 24px; background: var(--blanco); }
  .nota-maqueta h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-2); margin: 0 0 10px; }
  .nota-maqueta li { color: var(--azul-2); font-size: 15px; margin: 4px 0; }

  /* plantilla de apertura: la ventana real que abre, grande, en la portada */
  .lp-hero-vr { margin: 0; display: grid; justify-items: center; gap: 22px; background: var(--fondo); padding: 56px 48px 24px; overflow: hidden; }
  .lp-hero-vr .vr { max-width: 300px; }
  .lp-hero-vr figcaption { font-size: 13px; color: var(--gris-2); text-align: center; }
  .aperturas.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1023px) { .aperturas.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 819px) { .aperturas.cuatro { grid-template-columns: minmax(0, 1fr); } }
  /* tarjetas de serie: los datos de la ficha, con su nombre a la izquierda y el valor a la derecha */
  .datos-serie { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 4px; font-size: 15px; }
  .datos-serie dt { color: var(--gris-2); }
  .datos-serie dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  .tarjeta .para { font-size: 15px; border-top: 1px solid var(--greige); padding-top: 12px; }
  .tarjeta .ir { font-weight: 600; color: var(--azul); text-decoration: none; font-size: 15px; }
  .notas-fuente { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 6px; font-size: 13px; color: var(--gris-2); }
  .notas-fuente a { color: var(--azul-2); }
  /* las preguntas largas parten la línea dentro de su caja (en el móvil, una pregunta larga empujaba 2 px de más) */
  .faq summary { min-width: 0; overflow-wrap: anywhere; }
  .faq summary::after { flex: none; }
  /* la tabla que se desplaza de lado en el móvil se puede recorrer con el teclado */
  .tabla-envuelta:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
  .h3-lp { font-family: var(--f-disp); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
  /* la escalera con cinco escalones (plantilla de conversión) */
  .pasos.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pasos.cinco li:nth-child(5) { --i: 4; }
  .pasos.cinco li::after { transform: scaleX(clamp(0, calc(var(--avance, 0) * 5 - var(--i)), 1)); }
  @media (max-width: 819px) { .pasos.cinco { grid-template-columns: minmax(0, 1fr); } }

  /* compromisos: dos tarjetas con su icono y la primera frase destacada, en vez de dos columnas de texto plano (Robert, 21/10) */
  .promesas { gap: 18px; align-items: stretch; }
  .promesas > div { position: relative; background: var(--blanco); border: 1px solid var(--greige); padding: 30px 32px 32px; display: grid; gap: 12px; align-content: start; }
  .promesas > div::before { content: ""; position: absolute; left: -1px; top: -1px; height: 3px; width: 72px; background: var(--azul); }
  .promesas .ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--fondo); color: var(--azul); }
  .promesas .ico svg { width: 22px; height: 22px; }
  .promesas .h3-lp { margin: 4px 0 0; }
  .promesas .linea-bajo { margin: 0; }
  .promesas .lead { display: block; margin-bottom: 8px; color: var(--tinta); font-weight: 600; font-size: 17px; line-height: 1.45; }
  @media (max-width: 819px) { .promesas > div { padding: 24px 22px 26px; } }

  /* secciones de texto largo (pilar y guías): a la izquierda, fijos, el número, el título y la entrada; a la derecha, el
     contenido, con las listas en tarjetas y la frase clave destacada (antes, una columna pegada a la izquierda: Robert, 21/10) */
  .sec-rej { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 72px; align-items: start; }
  .sec-cab { position: sticky; top: 104px; }
  .sec-ceja { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-2); }
  .sec-n { font-family: var(--f-disp); font-weight: 800; font-size: 58px; line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.4px var(--azul); }
  .sec-cab .h2 { margin: 0 0 16px; }
  .sec-cab .entrada { margin: 0; max-width: 46ch; }
  .sec-cuerpo { display: grid; gap: 22px; padding-top: 8px; min-width: 0; }
  .sec-cuerpo > * { margin: 0; }
  .sec-cuerpo .linea-bajo { max-width: 66ch; }
  .sec-cuerpo .lista-check { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sec-cuerpo .lista-check li { padding: 14px 16px 14px 44px; font-size: 16px; line-height: 1.45; border: 1px solid var(--greige); background: var(--fondo); }
  .bloque.claro .sec-cuerpo .lista-check li { background: var(--blanco); }
  .sec-cuerpo .lista-check li::before { left: 16px; top: calc(14px + .45em); }
  .sec-cuerpo .destacada { border-left: 3px solid var(--azul); padding: 4px 0 4px 18px; color: var(--tinta); font-size: 17px; line-height: 1.55; }
  @media (max-width: 1023px) {
    .sec-rej { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sec-cab { position: static; }
    .sec-n { font-size: 44px; }
    .sec-cuerpo .lista-check { grid-template-columns: minmax(0, 1fr); }
  }

  /* cabecera con foto de fondo a pantalla completa, distinta en cada página (Robert, 21/10): un velo de izquierda a derecha
     para que el texto se lea en blanco, un acercamiento lento de la foto al entrar y lo de la derecha (formulario, ejemplo
     o la ventana que abre) en su tarjeta clara */
  .lp-hero.con-fondo { position: relative; isolation: isolate; overflow: hidden; background: var(--tinta); color: var(--blanco); }
  .lp-hero.con-fondo .lp-hero-rej { min-height: min(84vh, 880px); padding-block: 40px 96px; align-items: center; }
  /* con formulario, el texto va arriba, a su altura: centrado frente a un formulario alto, bajaba a media pantalla */
  .lp-hero.con-fondo .lp-hero-rej.con-form { align-items: start; padding-top: 48px; }
  .hero-fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hero-fondo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); animation: hero-acerca 16s var(--ease) forwards; }
  @keyframes hero-acerca { to { transform: scale(1); } }
  .lp-hero.con-fondo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(9, 13, 20, .88) 0%, rgba(9, 13, 20, .74) 40%, rgba(9, 13, 20, .38) 72%, rgba(9, 13, 20, .22) 100%), linear-gradient(0deg, rgba(9, 13, 20, .5), rgba(9, 13, 20, 0) 40%); }
  .lp-hero.con-fondo h1, .lp-hero.con-fondo .ceja, .lp-hero.con-fondo .migas, .lp-hero.con-fondo .migas a, .lp-hero.con-fondo .enlace { color: var(--blanco); }
  .lp-hero.con-fondo .migas span { color: rgba(255, 255, 255, .7); }
  .lp-hero.con-fondo .sub { color: rgba(255, 255, 255, .88); }
  .lp-hero.con-fondo .respuesta { background: rgba(255, 255, 255, .1); border-left-color: var(--blanco); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .lp-hero.con-fondo .respuesta p, .lp-hero.con-fondo .respuesta .pregunta { color: var(--blanco); }
  .lp-hero.con-fondo .lista-check li { color: var(--blanco); }
  .lp-hero.con-fondo .lista-check li::before { border-color: var(--blanco); }
  .lp-hero.con-fondo .lista-check a { color: var(--blanco); }
  .lp-hero.con-fondo .f-chips li { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: var(--blanco); }
  .lp-hero.con-fondo .btn.linea { color: var(--blanco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
  .lp-hero.con-fondo .btn.linea:hover { background: rgba(255, 255, 255, .12); }
  /* la ventana, sola sobre la foto, sin el recuadro claro (22/10, Robert: «el cuadro blanco queda cutre; más premium la
     ventana directamente»): más grande, con su sombra al suelo y un halo suave detrás para que se despegue del fondo; la
     foto de la ventana va sin fundido (el «multiply» la volvería transparente sobre una foto oscura). El pie, en blanco. */
  .lp-hero.con-fondo .lp-hero-vr { position: relative; background: none; box-shadow: none; padding: 24px 0 8px; overflow: visible; }
  .lp-hero.con-fondo .lp-hero-vr::before { content: ""; position: absolute; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, 0)); pointer-events: none; }
  .lp-hero.con-fondo .lp-hero-vr .vr { max-width: 360px; mix-blend-mode: normal; filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .55)) drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
  .lp-hero.con-fondo .lp-hero-vr .vr.vr-balconera { max-width: 250px; }
  /* al abrir, la foto de fondo a través de la ventana (22/10, Robert: «en vez de salir blanco, que se vea el fondo»): en la
     cabecera con foto, a la foto de la ventana se le recortan el hueco de la hoja que abre y el vidrio de la fija (máscara
     con sus medidas de vr.css); detrás queda la foto de la página, y los vidrios son el cristal translúcido de .vr-fijo y
     .vr-vidrio. El hueco conserva su sombra de canto, para que se lea la profundidad del marco */
  .lp-hero.con-fondo .vr-base { -webkit-mask: var(--mascara) 0 0 / 100% 100% no-repeat; mask: var(--mascara) 0 0 / 100% 100% no-repeat; }
  .lp-hero.con-fondo .vr-vidrio, .lp-hero.con-fondo .vr > .vr-fijo { background: linear-gradient(118deg, rgba(205, 220, 230, .26) 0%, rgba(235, 242, 246, .05) 42%, rgba(205, 220, 230, .2) 100%); }
  .lp-hero.con-fondo .vr-hueco { background: none; box-shadow: inset 0 0 0 2px rgba(20, 23, 27, .65), inset 9px 9px 18px -8px rgba(0, 0, 0, .6); }
  .lp-hero.con-fondo .vr-abatible { --mascara: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%20preserveAspectRatio='none'%3E%3Cpath%20fill-rule='evenodd'%20d='M0%200H1V1H0Z%20M0.4968%200.0263h0.4762v0.9475h-0.4762Z%20M0.0909%200.0879h0.3734v0.8253h-0.3734Z'/%3E%3C/svg%3E"); }
  .lp-hero.con-fondo .vr-balconera { --mascara: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%20preserveAspectRatio='none'%3E%3Cpath%20fill-rule='evenodd'%20d='M0%200H1V1H0Z%20M0.4968%200.0181h0.4762v0.9639h-0.4762Z%20M0.0909%200.0604h0.3734v0.8799h-0.3734Z'/%3E%3C/svg%3E"); }
  .lp-hero.con-fondo .vr-corredera { --mascara: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%20preserveAspectRatio='none'%3E%3Cpath%20fill-rule='evenodd'%20d='M0%200H1V1H0Z%20M0.014%200.0232h0.5013v0.9479h-0.5013Z%20M0.5165%200.0985h0.4036v0.8031h-0.4036Z'/%3E%3C/svg%3E"); }
  .lp-hero.con-fondo .vr-elevadora { --mascara: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%20preserveAspectRatio='none'%3E%3Cpath%20fill-rule='evenodd'%20d='M0%200H1V1H0Z%20M0.0233%200.0355h0.4917v0.9365h-0.4917Z%20M0.52%200.0914h0.4167v0.83h-0.4167Z'/%3E%3C/svg%3E"); }
  .lp-hero.con-fondo .lp-hero-vr figcaption { color: var(--blanco); font-weight: 600; font-size: 14px; max-width: 36ch; padding: 7px 14px; border-radius: 999px; background: rgba(9, 13, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .lp-hero.con-fondo .presu-ejemplo figcaption { color: rgba(255, 255, 255, .85); }
  .lp-hero.con-fondo .presu-ejemplo figcaption b { color: var(--blanco); }
  .lp-hero.con-fondo .hero-form form.solicitud, .lp-hero.con-fondo .hero-form .acuse { border: 0; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .65); }
  @media (max-width: 819px) {
    .lp-hero.con-fondo .lp-hero-rej { min-height: 0; padding-block: 28px 56px; }
    .lp-hero.con-fondo::before { background: linear-gradient(180deg, rgba(9, 13, 20, .72) 0%, rgba(9, 13, 20, .82) 55%, rgba(9, 13, 20, .9) 100%); }
  }
  @media (prefers-reduced-motion: reduce) { .hero-fondo img { animation: none; transform: none; } }