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

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

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

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

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

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

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

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

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

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

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