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

/* La portada (sección 1: la 1A, «Los puntos», cerrada por Robert el 02/11/2026). La ventana 3D delante de una foto casi
   nítida, el salón premium, que no se usa en ninguna otra página. La cámara va de pieza en pieza (la manilla, el vidrio,
   el perfil y el color) y en cada parada se ve solo su punto, su ficha y el hilo que los une. Al final la hoja se abre y por el
   hueco entra, en círculo, «Y así llega a tu obra». Sin movimiento, se ve quieta: el titular, la foto de la ventana y las
   cuatro fichas en fila. Sin 3D (sin GPU de verdad), la foto de la ventana y las fichas, que entran una a una. */

  /* ============ QUIETA (sin movimiento) ============ */
  .historia { background: var(--blanco); }
  .escena { max-width: 1280px; margin: 0 auto; padding: 48px max(16px, var(--lado-d)) 64px max(16px, var(--lado)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
  .t0 h1 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(40px, 5.3vw, 78px); line-height: .98; letter-spacing: -.035em; margin: 18px 0 22px; }
  .t0 .sub { font-size: clamp(16px, 1.35vw, 19px); color: var(--azul-2); max-width: 44ch; }
  .t0 .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
  .t0 .hechos { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); }
  .t0 .hechos li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--azul); margin-right: 8px; vertical-align: middle; }
  .visor { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 74vh; justify-self: center; }
  .visor img { width: 100%; height: 100%; object-fit: contain; }
  .fondo, .velo, .lienzo3d, .grano, .hilo, .cuenta, .marca, .revela, .desliza { display: none; }
  .puntos { grid-column: 1 / -1; border-top: 1px solid var(--greige); padding-top: 32px; }
  .puntos-t { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-2); margin: 0 0 18px; }
  .puntos-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .ficha { display: grid; gap: 6px; align-content: start; }
  .ficha .n { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--azul-2); }
  .ficha-t { font-family: var(--f-disp); font-weight: 700; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; color: var(--tinta); margin: 0; }
  .ficha p { margin: 0; }
  .ficha p:last-child { font-size: 15px; color: var(--azul-2); }
  .saltar { position: fixed; left: 16px; top: calc(var(--cab) + 12px); z-index: 70; background: var(--tinta); color: var(--blanco); padding: 12px 18px; font-weight: 600; text-decoration: none; }
  .saltar:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; padding: 0; }
  @media (max-width: 819px) {
    .escena { grid-template-columns: minmax(0, 1fr); padding-top: 32px; gap: 28px; }
    .visor { max-height: 56vh; aspect-ratio: 1; }
    .puntos-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  }
  @media (max-width: 479px) { .puntos-l { grid-template-columns: minmax(0, 1fr); } }

  /* ============ EN MOVIMIENTO ============ */
  /* (03/11, noche) sin las paradas de las piezas, el recorrido es más corto */
  .anima .historia { height: 440svh; }
  /* (03/11, Robert: en el iPhone, una línea blanca abajo) la escena llega hasta el borde de la pantalla grande (lvh): con la
     barra de Safari escondida o transparente, la de la pantalla pequeña (svh) dejaba ver el fondo de la página debajo. Lo
     que va abajo (el titular y «Y así llega a tu obra») sube lo que mide esa barra (--barra), para no quedar detrás */
  .anima .historia { --barra: calc(100lvh - 100svh); }
  .anima .escena { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--cab)); height: calc(100svh - var(--cab)); height: calc(100lvh - var(--cab)); max-width: none; display: block; padding: 0; overflow: hidden; background: var(--fondo); }
  /* la foto: ya casi nítida (unos 25 KB; el navegador no desenfoca nada), un poco más grande que la escena para moverla con la cámara */
  .anima .fondo { display: block; position: absolute; inset: 0; z-index: 0; }
  .anima .fondo img { width: 100%; height: 100%; object-fit: cover; }
  /* (03/11, Robert: «la sombra blanca a la izquierda me da asco, no es premium») el velo ya no es claro: es una sombra
     oscura que solo cubre la zona del titular, y el titular va en blanco. Al bajar se queda a menos de la mitad mientras
     salen las piezas, y se va antes de que se abra la hoja (home.js) */
  /* va ENCIMA del 3D (z 2): de cerca, el vidrio de la ventana cubre el titular con su reflejo, y debajo no lo oscurecía */
  .anima .velo { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: opacity;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tinta) 82%, transparent) 0%, color-mix(in srgb, var(--tinta) 66%, transparent) 34%,
      color-mix(in srgb, var(--tinta) 46%, transparent) 50%, color-mix(in srgb, var(--tinta) 12%, transparent) 66%, transparent 80%); }
  .anima:not(.sin3d) .t0 { color: var(--blanco); }
  .anima:not(.sin3d) .t0 .ceja { color: color-mix(in srgb, var(--blanco) 80%, transparent); }
  .anima:not(.sin3d) .t0 h1 { color: var(--blanco); }
  .anima:not(.sin3d) .t0 .sub { color: color-mix(in srgb, var(--blanco) 90%, transparent); }
  .anima:not(.sin3d) .t0 .hechos { color: var(--blanco); }
  .anima:not(.sin3d) .t0 .hechos li::before { background: var(--blanco); }
  .anima:not(.sin3d) .t0 .btn { background: var(--blanco); color: var(--azul); }
  .anima:not(.sin3d) .t0 .enlace { color: var(--blanco); }
  .anima .lienzo3d { display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; }
  /* (03/11, noche) con 3D: la foto del salón tal cual, sin sombra encima (solo un halo muy suave detrás del titular), y sin
     las paradas de las piezas. La ventana, con un pelo de desenfoque y el mismo grano fino que la foto del piso: así no
     parece pegada encima */
  .anima:not(.sin3d) .puntos, .anima:not(.sin3d) .cuenta, .anima:not(.sin3d) .hilo { display: none; }
  /* la foto tiene a la izquierda un cristal con un reflejo casi blanco, justo detrás del titular: sin la sombra, el titular
     blanco no se lee (medido: 1,1 a 1). Se queda la sombra oscura del 03/11 (.velo, arriba; en el móvil, desde abajo), que
     se va con el titular al empezar a bajar: el piso y la ventana se ven limpios */
  .anima:not(.sin3d) .t0 { isolation: isolate; }
  .anima:not(.sin3d) .t0::before { content: ""; position: absolute; inset: -12% -18% -14% -14%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tinta) 55%, transparent), color-mix(in srgb, var(--tinta) 32%, transparent) 55%, transparent); }
  .anima:not(.sin3d) .t0 h1, .anima:not(.sin3d) .t0 .sub, .anima:not(.sin3d) .t0 .ceja { text-shadow: 0 1px 14px color-mix(in srgb, var(--tinta) 35%, transparent); }
  .anima .lienzo3d canvas { filter: blur(0.35px); }
  /* el grano, solo con la ventana ya pintada: en la primera pantalla, con la CPU de un móvil, retrasaba la foto */
  .anima:not(.sin3d) .lienzo3d.listo ~ .grano { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .anima .lienzo3d.listo { opacity: 1; }
  .anima .lienzo3d canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .anima .visor { display: none; }
  .anima .hilo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
  .anima .hilo line { stroke: var(--azul); stroke-width: 1.2; opacity: 0; }
  .anima .t { position: absolute; top: 50%; left: calc(max(0px, (100% - 1280px) / 2) + max(16px, var(--lado))); width: min(600px, 42%); will-change: opacity, transform; z-index: 3; transform: translate3d(0, -50%, 0); }
  /* un solo punto a la vista: el de la pieza a la que ha llegado la cámara, con su ficha y el hilo */
  .anima .puntos { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 0; padding: 0; }
  .anima .puntos-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .anima .puntos-l { display: block; }
  .anima .marca { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--azul); color: var(--blanco); font: 700 12px var(--f-mono); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blanco) 70%, transparent); opacity: 0; will-change: transform, opacity; }
  .anima .ficha { position: absolute; left: 0; top: 0; width: min(330px, 34vw); background: var(--blanco); border: 1px solid var(--greige); padding: 18px 20px; box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--azul) 45%, transparent); opacity: 0; will-change: transform, opacity; }
  .anima .cuenta { display: grid; gap: 8px; justify-items: end; position: absolute; right: calc(max(0px, (100% - 1280px) / 2) + max(16px, var(--lado-d))); top: 6vh; z-index: 3; font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); background: color-mix(in srgb, var(--fondo) 84%, transparent); backdrop-filter: blur(6px); padding: 10px 12px; opacity: 0; }
  .anima .cuenta ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
  .anima .cuenta li { width: 28px; height: 3px; background: var(--gris); transition: background .3s; }
  .anima .cuenta li.hecho { background: var(--azul); }
  .anima .revela { display: block; position: absolute; inset: 0; z-index: 4; clip-path: circle(var(--r, 0px) at var(--cx, 70%) var(--cy, 50%)); color: var(--blanco); background: var(--tinta); }
  .anima .revela > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--rz, 1.18)); }
  .anima .revela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 22, 0) 30%, rgba(14, 17, 22, .7) 100%); }
  .anima .revela .ancho { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-block: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; opacity: var(--rt, 0); transform: translate3d(0, calc((1 - var(--rt, 0)) * 30px), 0); }
  .anima .revela .ceja { color: var(--greige); }
  .anima .revela .h2 { color: var(--blanco); margin-top: 10px; max-width: 14ch; }
  .anima .revela .pie-foto { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 11px; color: rgba(255, 255, 255, .7); }
  .anima .desliza { display: flex; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); z-index: 3; }
  .anima .desliza i { width: 1px; height: 28px; background: var(--greige); position: relative; overflow: hidden; }
  .anima .desliza i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--tinta); animation: baja 1.6s var(--ease) infinite; }
  @keyframes baja { to { top: 100%; } }
  /* (03/11, Robert: «no se lee lo de desliza, solo se ve la línea») con la sombra oscura detrás, en blanco y algo más grande */
  .anima:not(.sin3d) .desliza { color: var(--blanco); font-size: 12px; font-weight: 600; text-shadow: 0 1px 10px rgba(14, 17, 22, .55); }
  .anima:not(.sin3d) .desliza i { background: color-mix(in srgb, var(--blanco) 35%, transparent); }
  .anima:not(.sin3d) .desliza i::after { background: var(--blanco); }
  /* sin 3D: la foto de la ventana, sin fondo ni puntos; las fichas entran una a una en su sitio */
  .anima.sin3d .lienzo3d, .anima.sin3d .fondo, .anima.sin3d .velo, .anima.sin3d .hilo, .anima.sin3d .marca { display: none; }
  .anima.sin3d .escena { background: var(--blanco); }
  .anima.sin3d .visor { display: block; position: absolute; top: 8%; bottom: 8%; right: 6%; width: 44%; max-height: none; aspect-ratio: auto; z-index: 1; }
  .anima.sin3d .ficha { left: auto; top: auto; right: calc(6% + 24px); bottom: 12%; }
  @media (max-width: 819px) {
    .anima .historia { height: 440svh; }
    .anima .t { top: auto; bottom: calc(4vh + var(--barra, 0px)); left: max(16px, var(--lado)); right: max(16px, var(--lado-d)); width: auto; transform: none; }
    .anima .t0 .ceja, .anima .t0 .hechos { display: none; }
    .anima .t0 h1 { font-size: clamp(30px, 8.6vw, 42px); margin: 0 0 12px; }
    .anima .t0 .sub { font-size: 15px; }
    .anima .t0 .acciones { margin-top: 18px; }
    /* el titular va abajo y el extremo de la manilla llega a su primera línea: la sombra sube hasta ahí */
    .anima .velo { background: linear-gradient(0deg, color-mix(in srgb, var(--tinta) 88%, transparent) 0%, color-mix(in srgb, var(--tinta) 72%, transparent) 40%,
      color-mix(in srgb, var(--tinta) 34%, transparent) 64%, transparent 84%); }
    /* por encima del botón de subir, que va abajo a la derecha */
    .anima .ficha { width: auto; left: max(16px, var(--lado)); right: max(16px, var(--lado-d)); top: auto; bottom: 84px; }
    .anima .cuenta { top: 3vh; }
    .anima .desliza { display: none; }
    .anima .revela .ancho { grid-template-columns: minmax(0, 1fr); padding-block: 36px; padding-bottom: calc(36px + var(--barra, 0px)); }
    .anima.sin3d .visor { left: 0; right: 0; width: 100%; top: 3%; bottom: auto; height: 42%; }
    .anima.sin3d .ficha { left: max(16px, var(--lado)); right: max(16px, var(--lado-d)); bottom: 84px; }
  }

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

  /* ============ MAPA DE COBERTURA ============ */
  .mapa { background: var(--blanco); padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--greige); }
  .mapa-rej { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
  .mapa .h2 { margin: 12px 0 16px; max-width: 14ch; }
  .mapa-ley { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-size: 15px; }
  .mapa-ley li { display: flex; align-items: center; gap: 12px; }
  .mapa-ley i { width: 18px; height: 18px; border-radius: 3px; flex: none; }
  .m-mas { background: var(--azul); }
  .m-llega { background: var(--greige); }
  .m-no { background: repeating-linear-gradient(135deg, var(--blanco) 0 3px, var(--gris) 3px 4px); box-shadow: inset 0 0 0 1px var(--gris); }
  .mapa-ley i.m-ofi { background: var(--blanco); border-radius: 50%; transform: scale(.75); box-shadow: inset 0 0 0 3px var(--tinta); }
  .mapa-info { margin-top: 28px; padding: 16px 18px; border-left: 3px solid var(--azul); background: var(--fondo); display: grid; gap: 2px; min-height: 92px; }
  .mapa-info b { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; }
  .mapa-info span { color: var(--azul-2); font-size: 15px; }
  .mapa-info .mono { font-size: 12px; color: var(--gris-2); }
  .mapa-lista { margin-top: 18px; font-size: 14px; }
  .mapa-lista summary { cursor: pointer; font-weight: 600; color: var(--azul); }
  .mapa-lista dl { margin: 12px 0 0; display: grid; gap: 4px; }
  .mapa-lista dt { font-weight: 600; margin-top: 8px; }
  .mapa-lista dd { margin: 0; color: var(--azul-2); }
  .mapa-fig { margin: 0; position: relative; }
  .mapa-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
  .mapa-fig figcaption { font-size: 11px; color: var(--gris-2); margin-top: 8px; text-align: right; }
  .ccaa { cursor: default; outline: none; }
  .ccaa path, .ccaa .toque { stroke: var(--blanco); stroke-width: 1.6; stroke-linejoin: round; transition: fill .35s var(--ease), opacity .35s, transform .35s var(--ease); }
  .ccaa .toque { fill: transparent; stroke: none; }
  .ccaa.mas path { fill: var(--azul); }
  .ccaa.llega path { fill: var(--greige); }
  .ccaa.no path { fill: url(#rayado-no); stroke: var(--gris); stroke-width: 1; }
  .ccaa.mas:hover path, .ccaa.mas:focus-visible path, .ccaa.mas.foco path { fill: var(--azul-2); }
  .ccaa.llega:hover path, .ccaa.llega:focus-visible path, .ccaa.llega.foco path { fill: var(--gris); }
  .ccaa:focus-visible path { stroke: var(--tinta); stroke-width: 2.4; }
  .mapa-fig svg:hover .ccaa:not(:hover) path { opacity: .72; }
  .ofi { pointer-events: none; }
  .ofi circle { fill: var(--blanco); stroke: var(--tinta); stroke-width: 2.5; }
  .ofi .ofi-onda { fill: none; stroke: var(--blanco); stroke-width: 1.5; opacity: .6; transform-origin: 613.4px 216.1px; }
  .ofi text { font-family: var(--f-mono); font-size: 17px; fill: var(--blanco); }
  .canarias rect { fill: var(--blanco); stroke: var(--gris); stroke-dasharray: 4 4; }
  .canarias .muestra { fill: url(#rayado-no); stroke: var(--gris); stroke-dasharray: none; }
  .canarias text { font-family: var(--f-disp); font-weight: 600; font-size: 20px; fill: var(--tinta); }
  .canarias .peq { font-family: var(--f-mono); font-weight: 400; font-size: 14px; fill: var(--azul-2); }
  .mapa-tip { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--tinta); color: var(--blanco); padding: 10px 12px; border-radius: 4px; font-size: 13px; display: grid; gap: 2px; min-width: 180px; opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .15s; box-shadow: 0 12px 30px -12px rgba(14, 17, 22, .6); z-index: 2; }
  .mapa-tip.visible { opacity: 1; }
  .mapa-tip b { font-family: var(--f-disp); font-size: 16px; }
  .mapa-tip i { font-style: normal; font-size: 11px; color: var(--greige); }
  .mapa-tip i:empty { display: none; }
  /* entrada: las comunidades aparecen en cascada y las de más trabajo se tiñen después */
  .anima .mapa .ccaa path { opacity: 0; transform: translateY(6px); transform-box: fill-box; }
  .anima .mapa.en-vista .ccaa path { opacity: 1; transform: none; transition: opacity .6s calc(var(--i) * 28ms), transform .8s var(--ease) calc(var(--i) * 28ms), fill .9s var(--ease) .7s; }
  .anima .mapa:not(.en-vista) .ccaa.mas path { fill: var(--greige); }
  .anima .mapa.en-vista .ofi-onda { animation: m-onda 2.4s var(--ease) 1.2s infinite; }
  @keyframes m-onda { 0% { transform: scale(.4); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
  @media (max-width: 819px) { .mapa-rej { grid-template-columns: minmax(0, 1fr); } .mapa-fig { order: -1; } .mapa-tip { display: none; } .mapa-info { min-height: 0; } }
  @media (prefers-reduced-motion: reduce) { .anima .mapa .ccaa path { opacity: 1; transform: none; } .ofi-onda { animation: none !important; } }

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

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

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