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

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

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