/* Layout: la portada definitiva (02/11/2026). Sección 1, la 1A «Los puntos» (estilos/apertura3d.css); «Por dentro», el índice (2B); la tabla con «¿Qué buscas?», una banda de foto y el resto. */



  /* ============ VENTANA REAL QUE ABRE (.vr) ============
     La foto del producto (todas en el mismo antracita, vidrio limpio sobre blanco), quieta. Encima, la hoja activa
     recortada de la misma foto como un ARO (el vidrio va hueco, con un cristal translúcido propio, para que al abrir no
     se lleve una imagen pegada), con el grosor del perfil en los cantos y una manilla con volumen que gira antes.
     Detrás, el hueco: blanco, como el fondo de la foto. Con .mueve reproduce la apertura de su tipo.
     Geometría medida en cada foto, en fracciones: --sx/--sy/--sw/--sh la hoja; --hx/--hy/--hw/--hh el hueco;
     --ix0/--iy0/--ix1/--iy1 el vidrio dentro de la hoja; --mx/--my/--mw/--mh la manilla dentro de la hoja. */
  .vr { position: relative; width: 100%; margin: 0 auto; perspective: 700px; mix-blend-mode: multiply; }
  /* en reposo, todo plano: el 3D (perspectiva, cantos, capas de la manilla) solo mientras se mueve. Quieta se ve igual, y
     la página no arrastra decenas de capas compuestas en cada fotograma del scroll (auditoría del 18/10, C2) */
  .vr:not(.mueve) { perspective: none; }
  .vr:not(.mueve) .vr-hoja, .vr:not(.mueve) .vr-bas, .vr:not(.mueve) .vr-mani { transform-style: flat; }
  .vr:not(.mueve) .vr-canto, .vr:not(.mueve) .vr-mani i:not(:last-child) { display: none; }
  .vr > * { position: absolute; }
  .vr-base { inset: 0; background: var(--foto) 0 0 / 100% 100% no-repeat; }
  .vr-hueco { left: calc(var(--hx) * 100%); top: calc(var(--hy) * 100%); width: calc(var(--hw) * 100%); height: calc(var(--hh) * 100%);
    background: linear-gradient(180deg, rgba(14, 17, 22, .12), rgba(14, 17, 22, 0) 16%, rgba(14, 17, 22, 0) 86%, rgba(14, 17, 22, .08)), linear-gradient(270deg, rgba(14, 17, 22, .2), rgba(14, 17, 22, 0) 22%), #f3f4f5;
    box-shadow: inset 0 0 0 2px rgba(35, 39, 43, .55), inset 6px 6px 12px -6px rgba(14, 17, 22, .35); }
  .vr-tapa { background: var(--tapa); }
  /* el cristal de la parte fija y el que queda sobre el hueco (cuando la hoja está cerrada), con el mismo brillo que el de la hoja */
  .vr > .vr-fijo { left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); background: linear-gradient(118deg, rgba(178, 198, 212, .42) 0%, rgba(235, 242, 246, .12) 42%, rgba(178, 198, 212, .36) 100%); }
  .vr > .vr-vidrio-hueco { display: none; }
  .vr-hoja { left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%); width: calc(var(--sw) * 100%); height: calc(var(--sh) * 100%); transform-origin: 100% 50%; transform-style: preserve-3d; }
  .vr-bas { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; }
  .vr-bas > * { position: absolute; }
  .vr-cara { inset: 0; background: var(--foto) no-repeat; background-size: calc(100% / var(--sw)) calc(100% / var(--sh));
    background-position: calc(var(--sx) / (1 - var(--sw)) * 100%) calc(var(--sy) / (1 - var(--sh)) * 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--ix0) var(--iy0), var(--ix0) var(--iy1), var(--ix1) var(--iy1), var(--ix1) var(--iy0), var(--ix0) var(--iy0)); }
  .vr-vidrio { left: var(--ix0); top: var(--iy0); right: calc(100% - var(--ix1)); bottom: calc(100% - var(--iy1));
    background: linear-gradient(118deg, rgba(178, 198, 212, .42) 0%, rgba(235, 242, 246, .12) 42%, rgba(178, 198, 212, .36) 100%); transform: translateZ(-1px); }
  /* el grosor del perfil: el canto libre (se ve al abrir) y el de arriba (se ve al bascular) */
  .vr-canto { background: linear-gradient(90deg, #23272b, #4a5158); }
  .vr-canto-l { left: 0; top: 0; bottom: 0; width: var(--grueso, 9%); transform-origin: 0 50%; transform: rotateY(90deg); }
  .vr-canto-t { left: 0; right: 0; top: 0; height: var(--grueso-t, 6%); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(180deg, #5a6362, #343a3a); }
  .vr-bas > .vr-tapa { left: calc(var(--tx) * 100%); top: calc(var(--ty) * 100%); width: calc(var(--tw) * 100%); height: calc(var(--th) * 100%); }
  /* la manilla: varias capas a distinta profundidad, para que tenga volumen al girar la hoja */
  .vr-mani { left: calc(var(--mx) * 100%); top: calc(var(--my) * 100%); width: calc(var(--mw) * 100%); height: calc(var(--mh) * 100%); transform-origin: var(--mo, 50% 14%); transform-style: preserve-3d; }
  .vr-mani i { position: absolute; inset: 0; background: var(--mani) center / 100% 100% no-repeat; }
  .vr-mani i:nth-child(1) { transform: translateZ(0.9px); filter: brightness(0.49); }
  .vr-mani i:nth-child(2) { transform: translateZ(1.8px); filter: brightness(0.56); }
  .vr-mani i:nth-child(3) { transform: translateZ(2.7px); filter: brightness(0.63); }
  .vr-mani i:nth-child(4) { transform: translateZ(3.6px); filter: brightness(0.70); }
  .vr-mani i:nth-child(5) { transform: translateZ(4.5px); filter: brightness(0.77); }
  .vr-mani i:nth-child(6) { transform: translateZ(5.4px); filter: brightness(0.84); }
  .vr-mani i:nth-child(7) { transform: translateZ(6.3px); filter: brightness(0.91); }
  .vr-mani i:nth-child(8) { transform: translateZ(7.2px); filter: brightness(0.98); }
  .vr-mani i:nth-child(9) { transform: translateZ(8.1px); }

  /* fotos reales de producto (sin re-teñir), recortadas al marco: la 70 Line de frente, una corredera y una elevadora */
  /* abatible: la 70 Line; hoja derecha, bisagras a la derecha, manilla centrada en el nudo (un poco mayor, para leerla) */
  .vr-abatible { aspect-ratio: 924 / 990; max-width: 210px; --tapa: #2f3338;
    --sx: .4968; --sy: .0263; --sw: .4762; --sh: .9475; --hx: .4968; --hy: .0263; --hw: .4762; --hh: .9475;
    --ix0: 11.36%; --iy0: 6.5%; --ix1: 86.36%; --iy1: 93.6%; --fx: 9.09%; --fy: 8.79%; --fw: 37.34%; --fh: 82.53%;
    --tx: .0023; --ty: .4797; --tw: .0455; --th: .1119;
    --mx: -.0068; --my: .4721; --mw: .0637; --mh: .1567; --mo: 50% 17%; }
  .vr-abatible > .vr-tapa { display: none; }
  /* balconera (21/10): la misma foto de la 70 Line, alargada hasta el suelo estirando solo vidrio y perfil recto, por
     encima y por debajo de la manilla (render/vr3-balconera.png). Perfil, bisagras y manilla, los de la foto real */
  .vr-balconera { aspect-ratio: 924 / 1440; max-width: 170px; --tapa: #2f3338;
    --sx: .4968; --sy: 0.0181; --sw: .4762; --sh: 0.9639; --hx: .4968; --hy: 0.0181; --hw: .4762; --hh: 0.9639;
    --ix0: 11.36%; --iy0: 4.39%; --ix1: 86.36%; --iy1: 95.67%; --fx: 9.09%; --fy: 6.04%; --fw: 37.34%; --fh: 87.99%;
    --tx: .0023; --ty: 0.5043; --tw: .0455; --th: 0.0756;
    --mx: -.0068; --my: 0.4992; --mw: .0637; --mh: 0.1059; --mo: 50% 17%; }
  .vr-balconera > .vr-tapa { display: none; }
  /* correderas y elevadoras: la hoja de la izquierda (la de la manilla) se desliza; su vidrio deja ver lo de detrás */
  .vr-corredera { aspect-ratio: 788 / 518; max-width: 270px;
    --sx: .014; --sy: .0232; --sw: .5013; --sh: .9479; --hx: .014; --hy: .0232; --hw: .5013; --hh: .9479;
    --ix0: 9.62%; --iy0: 6.72%; --ix1: 93.67%; --iy1: 93.89%; --fx: 51.65%; --fy: 9.85%; --fw: 40.36%; --fh: 80.31%; }
  .vr-elevadora { aspect-ratio: 600 / 394; max-width: 270px;
    --sx: .0233; --sy: .0355; --sw: .4917; --sh: .9365; --hx: .0233; --hy: .0355; --hw: .4917; --hh: .9365;
    --ix0: 5.76%; --iy0: 5.15%; --ix1: 94.58%; --iy1: 95.39%; --fx: 52%; --fy: 9.14%; --fw: 41.67%; --fh: 83%; }
  .vr-corredera .vr-canto, .vr-elevadora .vr-canto { display: none; }
  .vr-corredera .vr-hueco, .vr-elevadora .vr-hueco { background: linear-gradient(90deg, rgba(14, 17, 22, .12), rgba(14, 17, 22, 0) 18%), #f3f4f5; }

  .vr.mueve[data-tipo="practicable"] .vr-hoja { animation: vr-prac 3.4s var(--ease) infinite; }
  .vr.mueve[data-tipo="practicable"] .vr-mani { animation: v-man-prac 3.4s var(--ease) infinite; }
  /* la puerta que abre hacia fuera (Forma 70): la hoja gira al revés que la practicable, se aleja en vez de venir (21/10) */
  .vr.mueve[data-tipo="fuera"] .vr-hoja { animation: vr-fuera 3.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="fuera"] .vr-mani { animation: v-man-prac 3.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="oscilo"] .vr-hoja { animation: vr-osc-h 4.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="oscilo"] .vr-bas { animation: vr-osc-b 4.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="oscilo"] .vr-mani { animation: v-man-osc 4.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="micro"] .vr-bas { animation: vr-micro 3.6s var(--ease) infinite; }
  .vr.mueve[data-tipo="micro"] .vr-mani { animation: v-man-micro 3.6s var(--ease) infinite; }
  /* solo bascular (la página de la oscilobatiente enseña cada posición por separado): manilla a 180° y la hoja cae por arriba */
  .vr.mueve[data-tipo="bascula"] .vr-bas { animation: vr-bascula 3.8s var(--ease) infinite; }
  .vr.mueve[data-tipo="bascula"] .vr-mani { animation: v-man-bascula 3.8s var(--ease) infinite; }
  @keyframes vr-bascula { 0%, 14% { transform: none; } 32%, 70% { transform: rotateX(-16deg); } 88%, 100% { transform: none; } }
  @keyframes v-man-bascula { 0%, 4% { transform: rotate(0deg); } 12%, 82% { transform: rotate(-180deg); } 92%, 100% { transform: rotate(0deg); } }
  .vr.mueve[data-tipo="corredera"] .vr-hoja { animation: vr-corr 3.6s var(--ease) infinite; }
  /* osciloparalela (21/10): la manilla gira, la hoja sale del plano del marco hacia dentro, en paralelo, y corre por
     delante de la fija; al volver, entra en el marco y la manilla baja */
  /* (22/10, Robert: «no es coherente que se mueva hacia la izquierda») la ventana entera, reflejada: así la que sale y corre
     es la hoja de la izquierda, hacia la derecha, por delante de la fija, y la manilla sigue en el centro, en la hoja que se
     mueve. La foto es la misma 70 Line, de frente, y reflejada sigue siendo una ventana de verdad */
  .vr[data-tipo="paralela"] { transform: scaleX(-1); }
  .vr.mueve[data-tipo="paralela"] .vr-hoja { animation: vr-par 4.8s var(--ease) infinite; }
  .vr.mueve[data-tipo="paralela"] .vr-mani { animation: v-man-par 4.8s var(--ease) infinite; }
  @keyframes vr-par { 0%, 12% { transform: none; filter: none; } 26% { transform: translate3d(0, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); }
    50%, 66% { transform: translate3d(-96%, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); }
    86% { transform: translate3d(0, 0, 26px); filter: drop-shadow(-5px 7px 7px rgba(14, 17, 22, .32)); } 96%, 100% { transform: none; filter: none; } }
  @keyframes v-man-par { 0%, 3% { transform: rotate(0deg); } 10%, 90% { transform: rotate(-90deg); } 96%, 100% { transform: rotate(0deg); } }
  .vr.mueve[data-tipo="elevadora"] .vr-hoja { animation: vr-elev 4.2s var(--ease) infinite; }
  @keyframes vr-prac { 0%, 12% { transform: none; } 42%, 64% { transform: rotateY(66deg); } 92%, 100% { transform: none; } }
  @keyframes vr-fuera { 0%, 12% { transform: none; } 42%, 64% { transform: rotateY(-56deg); } 92%, 100% { transform: none; } }
  @keyframes vr-osc-b { 0%, 9% { transform: none; } 22%, 36% { transform: rotateX(-16deg); } 46%, 100% { transform: none; } }
  @keyframes vr-osc-h { 0%, 52% { transform: none; } 68%, 82% { transform: rotateY(62deg); } 96%, 100% { transform: none; } }
  /* la microventilación, exagerada lo justo para que se vea: la hoja se separa arriba */
  @keyframes vr-micro { 0%, 12% { transform: none; } 30%, 72% { transform: rotateX(-8deg); } 90%, 100% { transform: none; } }
  @keyframes vr-corr { 0%, 10% { transform: none; } 44%, 62% { transform: translate3d(80%, 0, 4px); } 92%, 100% { transform: none; } }
  @keyframes vr-elev { 0%, 8% { transform: none; } 18% { transform: translate3d(0, -1.5%, 4px); } 46%, 62% { transform: translate3d(80%, -1.5%, 4px); } 82% { transform: translate3d(0, -1.5%, 4px); } 92%, 100% { transform: none; } }


  /* ============ QUIÉNES SOMOS ============ */
  .quienes { background: var(--fondo); padding-block: 128px 112px; }
  .quienes-rej { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 28px 56px; align-items: start; }
  .quienes-lado { position: sticky; top: calc(var(--cab) + 40px); }
  .quienes-lado ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
  .quienes-lado li { border-top: 1px solid var(--greige); padding-top: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-2); }
  .quienes-lado li b { display: block; margin-top: 4px; font-family: var(--f-txt); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta); }
  .manifiesto-t { font-family: var(--f-disp); font-weight: 600; font-size: clamp(32px, 4.7vw, 74px); line-height: 1.05; letter-spacing: -.032em; max-width: 25ch; margin: 0; }
  .manifiesto-t em { font-style: normal; }
  .palabras em .w.luz { color: var(--azul); }
  @media (max-width: 819px) { .quienes-rej { grid-template-columns: minmax(0, 1fr); } .quienes-lado { position: static; } .quienes-lado ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .palabras .w { color: rgba(14, 17, 22, .5); transition: color .45s var(--ease); }
  .palabras .w.luz { color: var(--tinta); }
  .quienes-pie { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--greige); font-family: var(--f-mono); font-size: 12px; color: var(--gris-2); }
  .quienes-pie a { margin-left: auto; font-family: var(--f-txt); font-size: 15px; color: var(--azul); }
  @media (max-width: 819px) { .quienes { padding-block: 88px 80px; } .quienes-pie a { margin-left: 0; } }
  .tabla-elegir .cabeza .vr { max-width: 150px; margin: 4px 0 12px; }
  .tabla-elegir .cabeza .vr-corredera, .tabla-elegir .cabeza .vr-elevadora { max-width: 190px; margin-top: 34px; }
  .tabla-elegir .cabeza { cursor: default; }
  .tabla-elegir .cabeza:focus-visible { outline-offset: -2px; }
  @media (max-width: 819px) { .tabla-elegir .cabeza .vr { max-width: 104px; } .tabla-elegir .cabeza .vr-corredera, .tabla-elegir .cabeza .vr-elevadora { max-width: 132px; margin-top: 24px; } }

  /* ============ POR DENTRO ============ */
  .dentro { background: var(--fondo); }
  .dentro-panel { max-width: 1280px; margin: 0 auto; padding: 96px max(16px, var(--lado-d)) 96px max(16px, var(--lado)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  .dentro .h2 { margin: 12px 0 18px; }
  /* el índice (2B): las cinco piezas en una lista con su dato; se abre la que toca y cambia la foto */
  .indice-piezas { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--gris); max-width: 520px; }
  .pieza { border-bottom: 1px solid var(--gris); }
  .pieza h3 { margin: 0; font-size: inherit; font-weight: inherit; }
  .pieza-fila { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .pieza-n, .pieza .dato { font-family: var(--f-disp); font-weight: 700; letter-spacing: -.02em; color: var(--gris-2); transition: color .3s var(--ease); }
  .pieza-n { font-size: 22px; }
  .pieza .dato { font-size: 20px; text-align: right; }
  .pieza-fila:hover .pieza-n { color: var(--tinta); }
  .pieza-texto { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
  .pieza-texto > p { overflow: hidden; margin: 0; color: var(--azul-2); max-width: 46ch; font-size: 15px; }
  .pieza.activa .pieza-texto { grid-template-rows: 1fr; }
  .pieza.activa .pieza-texto > p { padding-bottom: 16px; }
  .pieza.activa .pieza-n { color: var(--tinta); }
  .pieza.activa .dato { color: var(--azul); }
  .fotos-pieza { position: relative; aspect-ratio: 5 / 5.4; background: var(--blanco); overflow: hidden; }
  .fotos-pieza figure { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); }
  .fotos-pieza figure.activa { clip-path: inset(0 0 0 0); z-index: 1; }
  /* la que sale se queda debajo, entera, mientras entra la nueva: si se escondía a la vez, en medio se veía el blanco */
  .fotos-pieza figure.previa { clip-path: inset(0 0 0 0); transition: none; z-index: 0; }
  .fotos-pieza img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
  .fotos-pieza figure.activa img { transform: scale(1); }
  .fotos-pieza figure.contener img { object-fit: contain; padding: 8%; }
  .contador { position: absolute; z-index: 2; left: 16px; bottom: 14px; font-family: var(--f-mono); font-size: 12px; color: var(--tinta); background: rgba(255, 255, 255, .86); padding: 3px 8px; }
  .anima .dentro { height: 215svh; }
  .anima .dentro-panel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--cab)); height: calc(100svh - var(--cab)); padding-block: 32px; }
  .anima .fotos-pieza { max-height: calc(100svh - var(--cab) - 64px); justify-self: end; width: 100%; aspect-ratio: auto; height: 100%; }
  @media (max-width: 819px) {
    .dentro-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 56px; }
    .anima .dentro { height: 205svh; }
    .anima .dentro-panel { padding-block: 18px; gap: 14px; grid-template-rows: minmax(0, 1fr) auto; }
    .anima .fotos-pieza { order: -1; height: 100%; max-height: none; min-height: 0; justify-self: stretch; }
    /* (03/11, Robert: «en el móvil las fotos se ven raras, recortadas») aquí la foto ocupa una franja ancha y baja, y las
       verticales (la junta, el herraje) perdían media pieza: en el móvil se ven enteras, sobre el blanco del recuadro */
    .anima .fotos-pieza img, .anima .fotos-pieza figure.activa img { object-fit: contain; transform: none; }
    .dentro .h2 { font-size: 28px; margin: 6px 0 0; }
    .dentro .entrada { display: none; }
    .indice-piezas { margin-top: 12px; }
    .anima .dentro-panel { padding-bottom: 64px; }   /* sitio para el botón de subir, abajo a la derecha */
    .pieza-fila { padding: 9px 0; }
    .pieza-n { font-size: 18px; }
    .pieza .dato { font-size: 16px; }
    .pieza-texto > p { font-size: 14px; }
    .pieza.activa .pieza-texto > p { padding-bottom: 10px; }
  }

  /* anchos */
  .anchos { margin-top: 88px; border-top: 1px solid var(--greige); padding-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
  .anchos-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ancho-i { padding: 6px 18px 18px; border-left: 1px solid var(--greige); transition: background .3s; }
  .ancho-i:hover { background: var(--fondo); }
  .ancho-i b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: clamp(56px, 6.4vw, 96px); line-height: 1; letter-spacing: -.05em; }
  .ancho-i b small { font-size: .26em; font-weight: 600; letter-spacing: 0; color: var(--gris-2); margin-left: 4px; }
  .ancho-i span { font-size: 14px; color: var(--azul-2); display: block; margin-top: 6px; }
  @media (max-width: 819px) { .anchos { grid-template-columns: minmax(0, 1fr); } .anchos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ancho-i { border-top: 1px solid var(--greige); } }





  .vr-abatible { --foto: url("/img/vr3-abatible.jpg"); --mani: url("/img/vr3-mani.png"); }
  .vr-balconera { --foto: url("/img/vr3-balconera.jpg"); --mani: url("/img/vr3-mani.png"); }
  .vr-corredera { --foto: url("/img/vr3-corredera.jpg"); }
  .vr-elevadora { --foto: url("/img/vr3-elevadora.jpg"); }

/* Ajuste de la web (no estaba en la maqueta) */
.fotos-pieza figure { background: var(--blanco); }

/* ============ «¿QUÉ BUSCAS?» EN LA TABLA (02/11/2026) ============
   Marcas lo que buscas y la tabla señala las que cumplen todo: su columna en el tono cálido con el sello «Encaja», su
   ventana abriéndose, y la fila que lo explica resaltada. Las demás se apagan en gris (legible: no con transparencia). */
.buscas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -16px 0 10px; }
.buscas-t { flex-basis: 100%; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); }
.buscas button { font: inherit; font-size: 14px; color: var(--tinta); background: var(--blanco); border: 1px solid var(--gris); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.buscas button:hover { border-color: var(--azul); }
.buscas button[aria-pressed="true"] { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.buscas button[aria-pressed="true"]::before { content: "✓"; margin-right: 6px; }
.buscas-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-height: 1.6em; margin: 0 0 22px; font-size: 15px; color: var(--azul-2); }
.buscas-res b { color: var(--tinta); }
.buscas-limpiar { font: inherit; font-size: 14px; font-weight: 600; color: var(--azul); background: none; border: 0; padding: 0; border-bottom: 1px solid currentColor; cursor: pointer; }
.tabla-env { scroll-behavior: smooth; }
.tabla-elegir [role="row"] > div { transition: background .3s var(--ease), color .3s var(--ease); }
.tabla-elegir .encaja { background: var(--fondo); }
.tabla-elegir .cabeza.encaja b::after { content: "Encaja"; margin-left: 10px; font: 700 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blanco); background: var(--azul); padding: 3px 7px; vertical-align: 5px; }
/* (04/11) el sello no cabe al lado del nombre hasta los 1280 px: el <b> es elemento de una rejilla con pista automática, así
   que crecía más que su celda y tapaba el título de la columna siguiente. La pista, atada a la celda, y el sello debajo */
html[lang="ca"] .tabla-elegir .cabeza.encaja b::after { content: "Encaixa"; }
@media (max-width: 1279px) {
  .tabla-elegir .cabeza { grid-template-columns: minmax(0, 1fr); }
  .tabla-elegir .cabeza.encaja b::after { display: block; width: fit-content; margin: 6px 0 0; vertical-align: baseline; }
  .tabla-elegir.filtrada .cabeza[data-c] b { display: block; min-height: calc(1.2em + 28px); }
}
.tabla-elegir .apagada { color: var(--gris-2); }
.tabla-elegir .apagada.si::before { color: var(--gris); }
.tabla-elegir .cabeza .vr { transition: opacity .4s var(--ease), filter .4s var(--ease); }
.tabla-elegir .cabeza.apagada .vr { opacity: .35; filter: grayscale(1); }
.tabla-elegir .razon > .et { color: var(--azul); }
.tabla-elegir .razon > .encaja { color: var(--tinta); font-weight: 600; box-shadow: inset 0 -2px 0 var(--azul); }
@media (max-width: 819px) {
  /* en el móvil, una sola fila que se desliza de lado, en vez de seis botones uno debajo de otro */
  .buscas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * max(16px, var(--lado))); padding: 2px max(16px, var(--lado)) 6px; }
  .buscas::-webkit-scrollbar { display: none; }
  .buscas-t { display: none; }
  .buscas button { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .tabla-env { scroll-behavior: auto; } }