/* ==========================================================================
   Letras Bonitas — hoja de estilos

   Paleta: un azul y sus derivados. El gris del fondo y de los filetes lleva
   algo de azul dentro, así que todo pertenece a la misma familia sin que la
   página se vuelva azul entera. El rojo aparece en dos sitios y sólo cuando
   significa algo: el corazón de favoritos y el aviso de que un nombre no cabe.

   Sin relieves duros. Los bordes son de un píxel y la elevación se sugiere
   con una sombra suave, y sólo al pasar por encima.
   ========================================================================== */

:root{
  --lb-papel:#F5F7FB;        /* página: gris con algo de azul dentro */
  --lb-tarjeta:#FFFFFF;
  --lb-banda:#EDF1F8;
  --lb-pasada:#F0F3FA;       /* fondos al pasar por encima */

  --lb-tinta:#1B1D24;
  --lb-tinta-suave:#666B78;
  --lb-tinta-tenue:#6E7588;

  --lb-azul:#2447D8;         /* marca y acción */
  --lb-azul-claro:#5A78EE;   /* detalles sobre fondo azul */
  --lb-azul-suave:#EDF1FD;   /* fondos y estados suaves */
  --lb-azul-hondo:#131B38;   /* pie */
  --lb-rojo:#C93B33;         /* favoritos y avisos */
  --lb-rojo-suave:#FCEEED;

  --lb-linea:#E3E7F0;
  --lb-linea-tenue:#EDF0F7;
  --lb-r:16px;

  --lb-texto:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --lb-dato:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --lb-glifo:'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Noto Sans Cherokee',
          'Noto Sans Canadian Aboriginal','Noto Sans Math','Apple Symbols','Arial Unicode MS',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lb-papel);color:var(--lb-tinta);font-family:var(--lb-texto);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.lb-env{max-width:1200px;margin:0 auto;padding:0 24px}

/* ================= CABECERA ================= */
.lb-top{background:var(--lb-azul);position:relative;z-index:40}
.lb-top-in{display:flex;align-items:center;gap:24px;height:68px}
.lb-logo{font-weight:700;font-size:1.14rem;letter-spacing:-.02em;color:#fff;text-decoration:none}
.lb-top-nav{display:flex;gap:24px;margin-left:auto}
.lb-top-nav a{font-size:13.5px;color:#C5CFF8;text-decoration:none;transition:color .14s}
.lb-top-nav a:hover{color:#fff}
.lb-menu{display:none;margin-left:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:9px;font-size:16px;padding:7px 12px;cursor:pointer;color:#fff}
@media(max-width:860px){.lb-top-nav{display:none}.lb-menu{display:block}}

/* ================= HÉROE ================= */
.lb-cabecera{padding:56px 0 6px;text-align:center}
.lb-antetitulo{font-family:var(--lb-dato);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lb-tinta-tenue);margin:0 0 18px}
.lb-antetitulo b{color:var(--lb-azul);font-weight:500}
.lb-marca{font-weight:700;font-size:clamp(2.3rem,7.5vw,4rem);line-height:1.02;letter-spacing:-.04em;
  margin:0;display:inline-block}
.lb-marca .lb-vivo{display:inline-block;color:var(--lb-azul);transition:transform .2s ease}
.lb-promesa{max-width:44ch;margin:16px auto 0;color:var(--lb-tinta-suave);font-size:1rem}

/* ================= ESCRITORIO =================
   La barra fija se queda con lo imprescindible: el campo y una fila con el
   tamaño y el interruptor de mezcla, uno a cada lado. El buscador y el filtro
   bajan fuera de la barra, porque no se usan en cada pulsación y ocupaban
   media pantalla de móvil. */
.lb-escritorio{position:sticky;top:0;z-index:30;padding:14px 0 12px;background:var(--lb-papel);
  border-bottom:1px solid var(--lb-linea);box-shadow:0 10px 18px -18px rgba(27,29,36,.5)}
.lb-campo-et{display:block;font-family:var(--lb-dato);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lb-tinta-tenue);margin:0 0 7px 4px}
.lb-campo{display:flex;align-items:center;gap:8px;background:var(--lb-tarjeta);
  border:1.5px solid var(--lb-linea);border-radius:12px;padding:2px 4px 2px 16px;
  transition:border-color .15s,box-shadow .15s}
.lb-campo:focus-within{border-color:var(--lb-azul);box-shadow:0 0 0 3px var(--lb-azul-suave)}
#lb-texto{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--lb-texto);
  font-size:1.02rem;font-weight:500;color:var(--lb-tinta);padding:11px 0;caret-color:var(--lb-azul)}
#lb-texto::placeholder{color:var(--lb-tinta-tenue);font-weight:400}
.lb-limpiar{border:0;background:transparent;color:var(--lb-tinta-tenue);font-size:1.25rem;
  line-height:1;padding:8px 11px;cursor:pointer;border-radius:8px}
.lb-limpiar:hover{background:var(--lb-banda);color:var(--lb-tinta)}

.lb-fila{display:flex;align-items:center;gap:16px;padding:10px 4px 0}
.lb-mando{display:flex;align-items:center;gap:9px}
.lb-derecha{margin-left:auto}
.lb-mando label{font-family:var(--lb-dato);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lb-tinta-suave);white-space:nowrap}
/* El deslizador se dibuja entero a mano. Con accent-color bastaba en una
   página en blanco, pero cualquier tema que ponga borde y fondo a los input
   envuelve el control nativo en una caja blanca. Se anula todo eso y se
   pintan la barra y el tirador uno por uno. La parte recorrida se colorea
   con un degradado cuyo corte lo pone ui.js en --lb-pct. */
.lb-app .lb-fila input[type=range],
.lb-app input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:70px;max-width:200px;height:18px;
  margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;outline:none;cursor:pointer}

.lb-app input[type=range]::-webkit-slider-runnable-track{
  height:4px;border:0;border-radius:99px;
  background:linear-gradient(to right,
    var(--lb-azul) 0 var(--lb-pct,25%), var(--lb-linea) var(--lb-pct,25%) 100%)}
.lb-app input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-6px;border-radius:50%;
  background:var(--lb-azul);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(27,29,36,.35);cursor:pointer}

.lb-app input[type=range]::-moz-range-track{
  height:4px;border:0;border-radius:99px;background:var(--lb-linea)}
.lb-app input[type=range]::-moz-range-progress{
  height:4px;border-radius:99px;background:var(--lb-azul)}
.lb-app input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--lb-azul);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(27,29,36,.35);cursor:pointer}

.lb-app input[type=range]:focus-visible{outline:2px solid var(--lb-azul);outline-offset:4px}
.lb-interruptor{position:relative;width:40px;height:22px;border-radius:99px;
  border:1.5px solid var(--lb-linea);background:var(--lb-banda);cursor:pointer;padding:0;
  flex:0 0 auto;transition:.16s}
.lb-interruptor::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(27,29,36,.22);
  transition:transform .18s cubic-bezier(.3,.8,.4,1.3)}
.lb-interruptor[aria-checked="true"]{background:var(--lb-azul);border-color:var(--lb-azul)}
.lb-interruptor[aria-checked="true"]::after{transform:translateX(17px)}
.lb-interruptor:focus-visible{outline:2px solid var(--lb-azul);outline-offset:3px}

/* buscador y filtro, ya fuera de la barra fija */
.lb-extras{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 2px 0}
.lb-buscador{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--lb-tarjeta);
  border:1.5px solid var(--lb-linea);border-radius:99px;padding:8px 16px;color:var(--lb-tinta-tenue)}
.lb-buscador:focus-within{border-color:var(--lb-azul);box-shadow:0 0 0 3px var(--lb-azul-suave)}
.lb-buscador input{border:0;outline:0;background:transparent;font-family:var(--lb-texto);
  font-size:13.5px;color:var(--lb-tinta);width:150px}

@media(max-width:760px){
  /* El marcador de arriba no aporta nada que no diga ya el propio campo, y
     en una barra fija cada píxel cuenta. */
  .lb-campo-et{display:none}
  .lb-escritorio{padding:10px 0 10px}
  #lb-texto{font-size:1rem;padding:10px 0}
  .lb-fila{gap:10px;padding:7px 2px 0}
  .lb-mando{gap:7px}
  .lb-mando label{font-size:8.5px;letter-spacing:.09em}
  .lb-app input[type=range]{height:15px;max-width:none}
  .lb-app input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}
  .lb-app input[type=range]::-moz-range-thumb{width:14px;height:14px}
  .lb-interruptor{width:36px;height:20px}
  .lb-interruptor::after{width:13px;height:13px}
  .lb-interruptor[aria-checked="true"]::after{transform:translateX(16px)}
  .lb-extras{padding:14px 2px 0;gap:12px}
  .lb-buscador{margin-left:0;width:100%}
  .lb-buscador input{width:100%}
}

/* ================= FICHAS ================= */
.lb-categorias{display:flex;gap:8px;overflow-x:auto;padding:20px 0 14px;
  scrollbar-width:thin;scrollbar-color:var(--lb-azul) var(--lb-linea-tenue)}
.lb-categorias::-webkit-scrollbar{height:6px}
.lb-categorias::-webkit-scrollbar-track{background:var(--lb-linea-tenue);border-radius:99px}
.lb-categorias::-webkit-scrollbar-thumb{background:var(--lb-azul);border-radius:99px}
.lb-categorias::-webkit-scrollbar-thumb:hover{background:var(--lb-azul-hondo)}
.lb-ficha{flex:0 0 auto;border:1.5px solid var(--lb-linea);background:var(--lb-tarjeta);
  color:var(--lb-tinta-suave);font-family:var(--lb-texto);font-size:13px;font-weight:500;
  padding:9px 17px;border-radius:99px;cursor:pointer;white-space:nowrap;text-decoration:none;
  display:inline-block;line-height:1.35;
  transition:border-color .13s,color .13s,background .13s,transform .1s}
.lb-ficha:hover{border-color:var(--lb-azul);color:var(--lb-azul);background:var(--lb-azul-suave);transform:translateY(-1px)}
.lb-ficha:active{transform:translateY(0)}
.lb-ficha[aria-pressed="true"]{background:var(--lb-azul);border-color:var(--lb-azul);color:#fff}
.lb-ficha.lb-especial[aria-pressed="true"]{background:var(--lb-rojo);border-color:var(--lb-rojo);color:#fff}
.lb-ficha:focus-visible{outline:2px solid var(--lb-tinta);outline-offset:2px}
.lb-ficha[aria-pressed="true"]:focus-visible{outline-color:var(--lb-tinta);
  box-shadow:0 0 0 2px #fff}
.lb-separador-ficha{flex:0 0 auto;width:1px;background:var(--lb-linea);margin:6px 6px}

.lb-recuento{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  font-family:var(--lb-dato);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--lb-tinta-tenue);padding:20px 2px 15px;margin-bottom:20px;border-bottom:1px solid var(--lb-linea)}
.lb-recuento b{color:var(--lb-tinta)}
.lb-recuento .lb-limite{color:var(--lb-azul);margin-right:auto;margin-left:16px}
.lb-recuento .lb-limite b{color:var(--lb-azul)}

/* ================= TARJETAS ================= */
.lb-rejilla{display:block;padding-bottom:24px}
.lb-sub-rejilla{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:38px}
@media(min-width:640px){.lb-sub-rejilla{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.lb-sub-rejilla{grid-template-columns:repeat(3,1fr)}}

.lb-pieza{position:relative;display:flex;flex-direction:column;min-height:128px;background:var(--lb-tarjeta);
  border:1px solid var(--lb-linea);border-radius:var(--lb-r);padding:32px 18px 14px;cursor:pointer;
  font:inherit;color:inherit;text-align:center;width:100%;overflow:hidden;
  transition:border-color .15s,transform .12s,box-shadow .15s}
.lb-pieza:hover{border-color:#C9D2E6;transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(27,29,36,.3)}
.lb-pieza:focus-visible{outline:2px solid var(--lb-azul);outline-offset:3px}
.lb-pieza.lb-no-cabe .lb-muestra{opacity:.45}

/* Al copiar, la tarjeta entera se pone azul y lo dice. Es imposible no verlo,
   que es justo lo que hace falta cuando estás recorriendo cientos. */
.lb-pieza.lb-copiada{border-color:var(--lb-azul)}
.lb-pieza.lb-copiada::after{content:"COPIADO";position:absolute;inset:0;z-index:3;
  background:var(--lb-azul);color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.16em;
  display:flex;align-items:center;justify-content:center}

.lb-muestra{font-family:var(--lb-glifo);font-size:21px;line-height:1.45;word-break:break-word;
  overflow-wrap:anywhere;max-height:96px;overflow:hidden;margin:0 0 auto;
  display:flex;align-items:center;justify-content:center;min-height:50px;padding-bottom:16px}

.lb-pie-pieza{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:2px;text-align:left}
.lb-etiqueta{font-size:11.5px;font-weight:500;color:var(--lb-tinta);display:block;line-height:1.35}
.lb-etiqueta span{color:var(--lb-tinta-tenue);font-weight:400;font-size:10.5px}
.lb-cupo{font-family:var(--lb-dato);font-size:10px;color:var(--lb-tinta-tenue);background:var(--lb-banda);
  padding:3px 9px;border-radius:99px;flex:0 0 auto}
.lb-cupo.lb-pasa{color:var(--lb-rojo);background:var(--lb-rojo-suave)}

.lb-tendencia{position:absolute;top:11px;left:16px;z-index:2;font-family:var(--lb-dato);font-size:8.5px;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--lb-azul);padding:3px 9px;border-radius:99px}
.lb-corazon{position:absolute;top:4px;right:5px;z-index:4;border:0;background:transparent;cursor:pointer;
  font-size:15px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;color:#C2CADC;transition:.13s}
.lb-corazon:hover{background:var(--lb-pasada);color:var(--lb-rojo)}
.lb-corazon[aria-pressed="true"]{color:var(--lb-rojo)}
.lb-corazon:focus-visible{outline:2px solid var(--lb-azul);outline-offset:1px}

/* ================= SECCIONES ================= */
.lb-entrada{max-width:64ch;margin:0 0 28px;color:var(--lb-tinta-suave);font-size:.98rem;
  border-left:3px solid var(--lb-azul);padding-left:16px}
.lb-saltos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--lb-tarjeta);
  border:1px solid var(--lb-linea);border-radius:var(--lb-r);padding:15px 17px;margin:0 0 30px}
.lb-saltos span{font-family:var(--lb-dato);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lb-tinta-tenue);width:100%;margin-bottom:3px}
.lb-saltos a{font-size:12.5px;color:var(--lb-tinta-suave);text-decoration:none;background:var(--lb-papel);
  border:1px solid var(--lb-linea);border-radius:99px;padding:6px 14px;white-space:nowrap;transition:.13s}
.lb-saltos a:hover{border-color:var(--lb-azul);color:var(--lb-azul);background:var(--lb-azul-suave)}
.lb-saltos a:focus-visible{outline:2px solid var(--lb-azul);outline-offset:2px}

.lb-seccion{margin:16px 0 20px}
.lb-seccion h2{font-weight:700;font-size:clamp(1.18rem,2.7vw,1.45rem);letter-spacing:-.028em;
  line-height:1.25;margin:0 0 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lb-seccion h2 i{font-style:normal;font-size:.9em}
.lb-seccion h2 span{font-family:var(--lb-dato);font-size:9.5px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--lb-tinta-tenue)}
.lb-seccion p{margin:0;color:var(--lb-tinta-suave);font-size:.92rem;max-width:62ch}
.lb-seccion::after{content:"";display:block;height:1px;background:var(--lb-linea);margin-top:15px}

.lb-vacio{border:1px dashed var(--lb-linea);border-radius:var(--lb-r);padding:54px 24px;text-align:center;
  color:var(--lb-tinta-suave);background:var(--lb-tarjeta)}
.lb-vacio b{display:block;font-weight:700;font-size:1.15rem;color:var(--lb-tinta);margin-bottom:6px}
.lb-mas-seccion{display:flex;justify-content:center;margin:-18px 0 38px}
.lb-mas-seccion button{font-size:12.5px;font-weight:500;background:var(--lb-tarjeta);color:var(--lb-tinta-suave);
  border:1px solid var(--lb-linea);border-radius:99px;padding:10px 24px;cursor:pointer;transition:.13s}
.lb-mas-seccion button:hover{border-color:var(--lb-azul);color:var(--lb-azul);background:var(--lb-azul-suave)}
.lb-mas-seccion button:focus-visible{outline:2px solid var(--lb-azul);outline-offset:2px}

.lb-mas{display:flex;justify-content:center;padding:6px 0 66px}
.lb-mas button{font-size:13.5px;font-weight:500;background:var(--lb-tarjeta);color:var(--lb-azul);
  border:1.5px solid var(--lb-azul);border-radius:99px;padding:15px 40px;cursor:pointer;transition:.13s}
.lb-mas button:hover{background:var(--lb-azul);color:#fff}
.lb-mas button:focus-visible{outline:2px solid var(--lb-azul);outline-offset:3px}

/* ================= BLOQUES ================= */
.lb-titulo-bloque{font-weight:700;font-size:clamp(1.55rem,3.4vw,2.15rem);letter-spacing:-.035em;
  line-height:1.1;margin:0 0 28px}
.lb-pasos{padding:54px 0 14px;border-top:1px solid var(--lb-linea)}
.lb-pasos-rej{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.lb-pasos-rej{grid-template-columns:repeat(3,1fr)}}
.lb-paso{background:var(--lb-tarjeta);border:1px solid var(--lb-linea);border-radius:var(--lb-r);padding:26px 24px}
.lb-paso b{font-family:var(--lb-dato);font-size:11px;color:var(--lb-azul);letter-spacing:.13em}
.lb-paso h3{font-weight:700;font-size:1.1rem;letter-spacing:-.025em;margin:10px 0 8px}
.lb-paso p{margin:0;color:var(--lb-tinta-suave);font-size:.93rem}

.lb-faq{padding:54px 0 68px}
.lb-faq details{border-bottom:1px solid var(--lb-linea)}
.lb-faq details:first-of-type{border-top:1px solid var(--lb-linea)}
.lb-faq summary{cursor:pointer;padding:20px 0;font-weight:600;font-size:1.04rem;letter-spacing:-.015em;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.lb-faq summary::-webkit-details-marker{display:none}
.lb-faq summary::after{content:"+";color:var(--lb-tinta-tenue);font-family:var(--lb-dato);font-size:1.2rem;line-height:1}
.lb-faq details[open] summary::after{content:"–"}
.lb-faq summary:focus-visible{outline:2px solid var(--lb-azul);outline-offset:2px}
.lb-faq p{margin:0 0 20px;color:var(--lb-tinta-suave);max-width:70ch}

/* ================= PIE ================= */
.lb-pie{background:var(--lb-azul-hondo);color:#DDE3F6}
.lb-pie-in{display:grid;grid-template-columns:1fr;gap:34px;padding-top:54px;padding-bottom:34px}
@media(min-width:860px){.lb-pie-in{grid-template-columns:1.1fr 2fr}}
.lb-pie-logo{font-weight:700;font-size:1.38rem;letter-spacing:-.03em;display:block;margin-bottom:10px;
  color:#fff}
.lb-pie-marca p{margin:0;color:#8B95BC;font-size:.91rem;max-width:34ch}
.lb-pie-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(min-width:620px){.lb-pie-cols{grid-template-columns:repeat(4,1fr)}}
.lb-pie-cols h4{font-family:var(--lb-dato);font-size:9.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lb-azul-claro);margin:0 0 13px}
.lb-pie-cols a{display:block;color:#C0C8E6;text-decoration:none;font-size:.9rem;padding:4px 0;
  transition:color .13s}
.lb-pie-cols a:hover{color:#fff}
.lb-pie-bajo{display:flex;justify-content:space-between;gap:14px;padding-bottom:36px;
  font-family:var(--lb-dato);font-size:10px;color:#6E78A4;border-top:1px solid #262F55;padding-top:20px}

/* ================= AVISO ================= */
#lb-aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);z-index:70;
  background:var(--lb-azul-hondo);color:#fff;font-size:13px;padding:14px 24px;border-radius:99px;
  display:flex;align-items:center;gap:11px;max-width:92vw;
  box-shadow:0 12px 30px -12px rgba(19,27,56,.55);transition:transform .25s cubic-bezier(.2,.9,.3,1.25)}
#lb-aviso.visible{transform:translate(-50%,0)}
#lb-aviso i{width:7px;height:7px;border-radius:50%;background:var(--lb-azul-claro);flex:0 0 auto}
#lb-aviso .lb-eco{font-family:var(--lb-glifo);color:#9FA9CE;max-width:32ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .lb-pieza:hover,.lb-ficha:hover{transform:none}}

/* ================= VOLVER ARRIBA ================= */
.lb-arriba{position:fixed;right:20px;bottom:22px;z-index:65;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--lb-azul);color:#fff;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -8px rgba(36,71,216,.6);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .2s,transform .2s,visibility .2s,background .15s}
.lb-arriba.visible{opacity:1;visibility:visible;transform:translateY(0)}
.lb-arriba:hover{background:var(--lb-azul-hondo)}
.lb-arriba:focus-visible{outline:2px solid var(--lb-tinta);outline-offset:3px}
@media(max-width:760px){.lb-arriba{right:14px;bottom:16px;width:42px;height:42px}}

/* ==========================================================================
   SHORTCODES PINTADOS EN EL SERVIDOR
   [letras_tabla], [letras_ejemplos] y [letras_nombres] salen ya en el HTML,
   así que se leen aunque el visitante no ejecute JavaScript.
   ========================================================================== */
.lb-tabla{width:100%;border-collapse:collapse;margin:0 0 26px;background:var(--lb-tarjeta);
  border:1px solid var(--lb-linea);border-radius:12px;overflow:hidden}
.lb-tabla caption{caption-side:top;text-align:left;font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em;padding:14px 16px 10px;color:var(--lb-tinta)}
.lb-tabla th,.lb-tabla td{border:1px solid var(--lb-linea-tenue);padding:9px 6px;text-align:center;
  font-size:14px}
.lb-tabla th{background:var(--lb-banda);font-family:var(--lb-dato);font-size:11px;font-weight:500;
  color:var(--lb-tinta-suave)}
.lb-tabla td{font-family:var(--lb-glifo);font-size:17px;color:var(--lb-tinta)}
.lb-tabla tbody + tbody tr:first-child th{border-top:2px solid var(--lb-linea)}

.lb-ejemplos th,.lb-ejemplos td{text-align:left;padding:11px 15px}
.lb-ejemplos td:first-child{color:var(--lb-tinta-suave);font-family:var(--lb-texto);font-size:14px;width:38%}
.lb-ejemplos .lb-muestra{font-family:var(--lb-glifo);font-size:18px}

.lb-nombres{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:600px){.lb-nombres{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.lb-nombres{grid-template-columns:repeat(3,1fr)}}
.lb-nombres li{background:var(--lb-tarjeta);border:1px solid var(--lb-linea);border-radius:12px;
  padding:15px 16px;text-align:center}
.lb-nombres .lb-muestra{font-family:var(--lb-glifo);font-size:19px;color:var(--lb-tinta);
  word-break:break-word}

.lb-app{position:relative}
.lb-solo-seccion .lb-rejilla{padding-bottom:0}