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

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