/* Odín Rally. Una sola columna ancha, con el perfil de una ruta como horizonte de la portada.
   Oscuro primero (la pizarra del logo), con una versión clara. Sin fuentes externas. */
:root {
  --fondo: #17212b; --fondo-2: #1e2a36; --texto: #f2efe8; --suave: #b8b4aa; --linea: #33414f;
  --ambar: #e8a14a; --ambar-texto: #17212b;
  --f-titulo: "Avenir Next Condensed", "DIN Condensed", "Bahnschrift SemiCondensed", "Roboto Condensed",
              "Arial Narrow", sans-serif;
  --f-texto: "Charter", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
  --f-util: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --fondo: #f2efe8; --fondo-2: #e8e3d8; --texto: #17212b; --suave: #4d5560; --linea: #cfc8b9;
          --ambar: #b8701f; --ambar-texto: #fffaf2; color-scheme: light; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto);
       font-size: 1.075rem; line-height: 1.6; }
img, svg { max-width: 100%; }
a { color: var(--texto); text-decoration-color: var(--ambar); text-underline-offset: .2em; }
a:hover { color: var(--ambar); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.05; text-wrap: balance;
             letter-spacing: .005em; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
.ancho { max-width: 68rem; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px));
         padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; background: var(--ambar); color: var(--ambar-texto); padding: .5rem 1rem;
                z-index: 5; }

.barra-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            padding-block: 1.1rem; }
.marca img { display: block; height: 52px; width: auto; }
.barra-grande .barra-in { align-items: flex-start; padding-block: clamp(1.25rem, 4vw, 2.75rem) .25rem; }
.barra-grande .marca img { height: auto; width: clamp(250px, 52vw, 600px); }
.barra-in { flex-wrap: wrap; }
.barra-in nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 30rem) { .barra-grande .marca img { width: min(220px, 100%); } }
.idioma, .pie a { font-family: var(--f-util); font-size: .85rem; letter-spacing: .04em; }

.portada { padding-block: clamp(2rem, 6vw, 4.5rem) 0; overflow: hidden; }
.portada-in { display: grid; gap: 1.25rem; max-width: 68rem; }
.portada-in h1 { max-width: 14ch; }
.lead { font-size: 1.25rem; max-width: 38rem; color: var(--suave); }
.estado { font-family: var(--f-util); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
          color: var(--ambar); display: flex; align-items: center; gap: .6rem; }
.punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ambar); }
@media (prefers-reduced-motion: no-preference) { .punto { animation: latido 2.4s ease-in-out infinite; } }
@keyframes latido { 50% { opacity: .35; } }
.boton { display: inline-block; background: var(--ambar); color: var(--ambar-texto); text-decoration: none;
         font-family: var(--f-titulo); font-size: 1.2rem; font-weight: 600; padding: .75rem 1.4rem;
         border-radius: 3px; }
.boton:hover { color: var(--ambar-texto); filter: brightness(1.08); }
.mapa-fig { margin: clamp(1.5rem, 5vw, 3rem) 0 0; }
.mapa { display: block; width: 100%; height: auto; }
.mapa-movil { display: none; }
@media (max-width: 44rem) { .mapa-ancho { display: none; } .mapa-movil { display: block; } }
.mapa-fondo { fill: var(--fondo-2); }
.mapa-fig figcaption { font-family: var(--f-util); font-size: .8rem; color: var(--suave); padding-block: .75rem 0; }
.mapa-curva { fill: none; stroke: var(--linea); stroke-width: 1.2; opacity: .8; }
.mapa-carretera { fill: none; stroke: var(--suave); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.mapa-ruta-borde { fill: none; stroke: var(--fondo-2); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.mapa-ruta { fill: none; stroke: var(--ambar); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mapa-coll { fill: var(--fondo); stroke: var(--ambar); stroke-width: 4; }
.mapa-placa { fill: var(--fondo); stroke: var(--linea); stroke-width: 1.2; }
.mapa-pts { font-family: var(--f-titulo); fill: var(--texto); }
.mapa-pts .n { font-size: 21px; font-weight: 600; }
.mapa-pts .u { font-family: var(--f-util); font-size: 12px; fill: var(--suave); }
.mapa-enlace-borde { fill: none; stroke: var(--fondo-2); stroke-width: 8; stroke-linecap: round; }
.mapa-enlace { fill: none; stroke: var(--texto); stroke-width: 3; stroke-dasharray: 10 8; stroke-linecap: round; opacity: .75; }
.mapa-rot-enlace { font-family: var(--f-util); font-size: 13px; fill: var(--suave); font-style: italic; }
.mapa-rot-bandera { font-family: var(--f-util); font-size: 13px; fill: var(--texto); font-weight: 600; }
.b-mastil { stroke: var(--texto); stroke-width: 2.6; stroke-linecap: round; }
.b-tela { fill: var(--ambar); }
.b-negro { fill: #1c1d20; }
.b-blanco { fill: #f6f6f3; }
.b-marco { fill: none; stroke: #1c1d20; stroke-width: 1; }
.mapa-flecha { fill: none; stroke: var(--texto); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mapa-flecha-halo { fill: none; stroke: var(--fondo-2); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.mapa-flecha-ruta { fill: none; stroke: var(--ambar); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* La chincheta del punto de partida, roja en los dos temas. */
.partida .p-pin { fill: #d7261e; stroke: #8e1611; stroke-width: 1.2; }
.partida .p-centro { fill: #fff; }
.mapa-desvio { fill: none; stroke: var(--ambar); stroke-width: 3.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.gasolinera .g-cuerpo { fill: var(--texto); }
.gasolinera .g-pantalla { fill: var(--ambar); }
.gasolinera .g-manguera { fill: none; stroke: var(--texto); stroke-width: 2.4; stroke-linecap: round; }
.autonomia { background: var(--fondo-2); }
.autonomia .dos { align-items: center; }
.entrar { font-family: var(--f-util); font-size: .9rem; padding: .3rem .8rem; border: 1px solid var(--ambar); border-radius: 3px;
          color: var(--texto); text-decoration: none; }
.entrar:hover { background: var(--ambar); color: var(--ambar-texto); }
.registro { font-family: var(--f-util); font-size: .9rem; padding: .3rem .8rem; border: 1px solid var(--ambar); border-radius: 3px;
            background: var(--ambar); color: var(--ambar-texto); text-decoration: none; }
.registro small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.registro:hover { color: var(--ambar-texto); filter: brightness(1.08); }
.sus-motos { border: 1px solid var(--linea); border-radius: 4px; padding: .6rem .9rem .9rem; display: grid; gap: .6rem; min-width: 0; }
.sus-moto { display: grid; grid-template-columns: 1fr 7rem; gap: .2rem .6rem; align-items: end; }
.sus-moto label { font-size: .85rem; }
.sus-moto label:first-child { grid-column: 1; grid-row: 1; }
.sus-moto label:nth-child(3) { grid-column: 2; grid-row: 1; }
.sus-moto input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: 3px;
                  background: var(--fondo); color: var(--texto); min-width: 0; }
.cta-nota { font-family: var(--f-util); font-size: .85rem; color: var(--suave); margin-top: -.4rem; }
.zona-form { margin-top: .5rem; }
.zona-form .sus-fila button { font-size: 1rem; }
/* El admin (D48): menú a la izquierda en el ordenador, arriba en el móvil. */
.adm { display: grid; grid-template-columns: 13rem minmax(0, 1fr); min-height: 100vh; }
.adm-menu { background: var(--fondo-2); border-right: 1px solid var(--linea); padding: 1.4rem 1rem; position: sticky; top: 0;
            height: 100vh; display: flex; flex-direction: column; gap: 1.2rem; font-family: var(--f-util); }
.adm-marca { font-family: var(--f-titulo); font-weight: 600; font-size: 1.2rem; text-decoration: none; color: var(--texto); }
.adm-marca span { display: block; font-family: var(--f-util); font-size: .7rem; font-weight: 400; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--ambar); }
.adm-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.adm-menu ul a { display: block; padding: .45rem .7rem; border-radius: 3px; text-decoration: none; color: var(--texto); font-size: .92rem; }
.adm-menu ul a:hover { background: var(--fondo); }
.adm-menu ul a.activo { background: var(--ambar); color: var(--ambar-texto); }
.adm-web { margin-top: auto; font-size: .82rem; color: var(--suave); }
.adm-cuerpo { min-width: 0; align-content: start; padding-block: 1.5rem 4rem; padding-left: max(24px, env(safe-area-inset-left, 0px));
              padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.adm-cuerpo.legal { max-width: none; }
@media (max-width: 52rem) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
              border-right: 0; border-bottom: 1px solid var(--linea); padding: .8rem max(16px, env(safe-area-inset-left, 0px)); }
  .adm-menu ul { display: flex; flex-wrap: wrap; }
  .adm-web { margin-top: 0; }
}
/* El login de la aplicación (D49, lo pinta el Worker). */
.login { padding-block: 2.5rem 4rem; display: grid; gap: 1rem; max-width: 30rem; }
.login-form { display: grid; gap: .6rem; }
.login-form input { font: inherit; font-size: 1.1rem; padding: .7rem .8rem; border: 1px solid var(--linea); border-radius: 4px;
                    background: var(--fondo); color: var(--texto); min-width: 0; }
.login-form input[name=codigo] { font-family: var(--f-util); font-size: 1.6rem; letter-spacing: .4em; text-align: center; }
.login-form .boton { justify-self: start; border: 0; cursor: pointer; font: inherit; }
.login-error { padding: .7rem .9rem; border-left: 3px solid #d7261e; background: var(--fondo-2); }
.botones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.boton-2 { display: inline-block; color: var(--texto); text-decoration: none; padding: .75rem 1.2rem; border: 1px solid var(--ambar);
           border-radius: 4px; font-family: var(--f-util); }
.boton-2:hover { background: var(--fondo-2); }
.cobertura { margin: 0; }
.cobertura svg { display: block; width: 100%; max-width: 38rem; height: auto; }
.reg { stroke: var(--fondo); stroke-width: .8; stroke-linejoin: round; }
.reg-activa { fill: var(--ambar); }
.reg-pronto { fill: url(#rayas); stroke: var(--ambar); stroke-width: 1.6; }
.reg-nada { fill: var(--fondo-2); stroke: var(--linea); }
.reg-rayas-fondo { fill: var(--fondo); }
.reg-rayas { stroke: var(--ambar); stroke-width: 2.6; opacity: .6; }
.reg-recuadro { fill: none; stroke: var(--linea); stroke-dasharray: 4 4; }
.reg-txt { font-family: var(--f-titulo); font-size: 15px; font-weight: 600; paint-order: stroke; stroke: var(--fondo);
           stroke-width: 3px; stroke-linejoin: round; }
.reg-txt-activa { fill: var(--texto); }
.reg-txt-pronto { fill: var(--texto); }
.cob-fuente { font-family: var(--f-util); font-size: .75rem; color: var(--suave); margin-top: .5rem; }
.cob-leyenda { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
               font-family: var(--f-util); font-size: .85rem; color: var(--suave); }
.cob-leyenda li { display: inline-flex; align-items: center; gap: .45rem; }
.cob-leyenda span { width: 1rem; height: 1rem; border-radius: 3px; display: inline-block; }
.cob-leyenda .ley-activa { background: var(--ambar); }
.cob-leyenda .ley-pronto { border: 2px solid var(--ambar); background: repeating-linear-gradient(45deg, var(--fondo) 0 3px,
                           color-mix(in srgb, var(--ambar) 55%, var(--fondo)) 3px 6px); }
.cob-leyenda .ley-nada { background: var(--fondo-2); border: 1px solid var(--linea); }
.auto-icono svg { display: block; width: clamp(90px, 18vw, 170px); height: auto; margin-inline: auto; }
.auto-icono .g-cuerpo { fill: var(--texto); }
.auto-icono .g-pantalla { fill: var(--ambar); }
.auto-icono .g-manguera { fill: none; stroke: var(--texto); stroke-width: 2.4; stroke-linecap: round; }
.mapa-gas { font-family: var(--f-util); font-size: 13px; fill: var(--texto); }
/* La moto lleva sus colores propios (los de una KTM de rally), iguales en los dos temas. */
.moto .m-negro, .moto .m-bota, .moto .m-guante, .moto .m-agujero { fill: #1c1d20; }
.moto .m-gris { fill: #4b5058; }
.moto .m-plata { fill: #c3c8ce; }
.moto .m-blanco { fill: #f6f6f3; }
.moto .m-azul { fill: #23357a; }
.moto .m-ktm, .moto .m-buje, .moto .m-casco-naranja, .moto .m-rodillera { fill: #ff6b12; }
.moto .m-translucido { fill: #eadfb8; }
.moto .m-sombra { fill: #000; opacity: .14; }
.moto .m-brillo { fill: none; stroke: #fff; stroke-width: 1.4; opacity: .55; stroke-linecap: round; }
.moto .m-costura { stroke: #d2d2cc; stroke-width: 1.2; }
.moto .m-costura-azul { fill: none; stroke: #4057a8; stroke-width: 1.2; stroke-dasharray: 3 2; }
.moto .m-rejilla, .moto .m-aleta { fill: none; stroke: #6a6f77; stroke-width: 1.2; }
.moto .m-tapa { fill: #2b2d31; stroke: #ff6b12; stroke-width: 2.5; }
.moto .m-tapa-int { fill: none; stroke: #6a6f77; stroke-width: 1.2; }
.moto .m-tornillo, .moto .m-eje { fill: #c3c8ce; }
.moto .m-manguito { fill: none; stroke: #1c1d20; stroke-width: 3.5; stroke-linecap: round; }
.moto .m-colector { fill: none; stroke: #a9a29a; stroke-width: 5; stroke-linecap: round; }
.moto .m-dibujo { fill: none; stroke: #1c1d20; stroke-width: 2.2; stroke-dasharray: 1.4 4.6; }
.moto .m-neum { fill: none; stroke: #1c1d20; stroke-width: 7.5; }
.moto .m-flanco { fill: none; stroke: #34363b; stroke-width: 1; }
.moto .m-llanta { fill: none; stroke: #c3c8ce; stroke-width: 2.6; }
.moto .m-llanta-int { fill: none; stroke: #8d939b; stroke-width: .8; }
.moto .m-radio { fill: none; stroke: #c3c8ce; stroke-width: .8; }
.moto .m-disco { fill: none; stroke: #a9afb6; stroke-width: 4; }
.moto .m-pinza { fill: #2b2d31; }
/* Las ruedas giran y la cadena corre (no, si el sistema pide reducir el movimiento). */
@media (prefers-reduced-motion: no-preference) {
  .moto .m-gira { transform-box: fill-box; transform-origin: center; animation: gira 1.1s linear infinite; }
  .moto .m-cadena { animation: cadena .45s linear infinite; }
  .moto .m-suspension { animation: baches 1.9s ease-in-out infinite; }
}
@keyframes baches { 0%, 100% { transform: translateY(0); } 18% { transform: translateY(1.8px); }
  34% { transform: translateY(-0.8px); } 52% { transform: translateY(1px); } 70% { transform: translateY(-0.4px); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes cadena { to { stroke-dashoffset: -3.2; } }
.moto .m-tapa-tapon { fill: #3a3c40; }
.moto .m-corona { fill: none; stroke: #2b2d31; stroke-width: 2.4; stroke-dasharray: 1.6 1.4; }
.moto .m-pinon { fill: #2b2d31; }
.moto .m-cadena { stroke: #3a3c40; stroke-width: 2.4; stroke-dasharray: 2 1.2; }
.moto .m-tensor { fill: #8d939b; }
.moto .m-amort { stroke: #1c1d20; stroke-width: 4; }
.moto .m-muelle { fill: none; stroke: #ff6b12; stroke-width: 2.6; stroke-linejoin: round; }
.moto .m-chasis { fill: none; stroke: #ff6b12; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.moto .m-horq-alta { stroke: #2b2d31; stroke-width: 9; stroke-linecap: round; }
.moto .m-horq-baja { stroke: #d9dde1; stroke-width: 6; stroke-linecap: round; }
.moto .m-faro { fill: #f3f6f8; }
.moto .m-pantalla { fill: #1c1d20; stroke: #6a6f77; stroke-width: 1.4; }
.moto .m-cupula { fill: #cfd8df; opacity: .55; }
.moto .m-marco { fill: none; stroke: #1c1d20; stroke-width: 1.6; }
.moto .m-manillar { fill: none; stroke: #1c1d20; stroke-width: 4; stroke-linecap: round; }
.moto .m-puno { stroke: #1c1d20; stroke-width: 7; stroke-linecap: round; }
.moto .m-palanca { fill: none; stroke: #c3c8ce; stroke-width: 2.4; stroke-linecap: round; }
.moto .m-paramanos { fill: none; stroke: #ff6b12; stroke-width: 4.5; stroke-linecap: round; }
.moto .m-traje { fill: none; stroke: #3a3f47; stroke-linecap: round; stroke-linejoin: round; }
.moto .m-chaqueta { fill: #3a3f47; }
.moto .m-franja { stroke: #ff6b12; stroke-width: 4; stroke-linecap: round; }
.moto .m-franja-blanca { stroke: #f6f6f3; stroke-width: 2; stroke-linecap: round; }
.moto .m-hebilla { stroke: #6a6f77; stroke-width: 1.6; }
.moto .m-muslo { stroke-width: 17; }
.moto .m-tibia { stroke-width: 13; }
.moto .m-brazo-sup { stroke-width: 11; }
.moto .m-antebrazo { stroke-width: 9; }
.moto .m-casco { fill: #1c1d20; }
.moto .m-ventila { fill: #6a6f77; }
.moto .m-casco-franja { fill: none; stroke: #ff6b12; stroke-width: 3; }
.moto .m-respira { stroke: #1c1d20; stroke-width: 2; }
.moto .m-gafas { fill: #1c1d20; stroke: #ff6b12; stroke-width: 1.8; }
.moto .m-reflejo { stroke: #8fb4d6; stroke-width: 1.5; stroke-linecap: round; }
.moto .m-cinta { stroke: #ff6b12; stroke-width: 3; }


.bloque { padding-block: clamp(2.5rem, 7vw, 4.5rem); border-top: 1px solid var(--linea); }
.portada + .bloque { border-top: 0; background: var(--fondo-2); }
.dos { display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.texto { display: grid; gap: 1rem; max-width: 40rem; align-content: start; }
.sub { color: var(--suave); margin-top: .6rem; max-width: 40rem; }

.cats, .mods, .pasos { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.cats { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cat { border-top: 3px solid var(--ambar); padding-top: 1rem; display: grid; gap: .5rem; }
.cat p, .paso p { color: var(--suave); }

.mods { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); align-items: end; }
.mod { display: grid; gap: .5rem; }
.mod-n { font-family: var(--f-titulo); font-size: 3.4rem; font-weight: 600; line-height: 1;
         font-variant-numeric: tabular-nums; }
.mod-n small { font-size: 1.4rem; margin-left: .15em; color: var(--suave); }
.mod-barra { display: block; height: 10px; width: calc(var(--h) / 12 * 100%); background: var(--ambar);
             border-radius: 2px; }
.mod-t { font-family: var(--f-util); font-size: .85rem; color: var(--suave); letter-spacing: .03em; }

.pasos { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); counter-reset: paso; }
.paso { display: grid; gap: .4rem; align-content: start; counter-increment: paso; }
.paso h3::before { content: counter(paso); font-family: var(--f-util); font-size: .85rem; color: var(--ambar);
                   display: block; margin-bottom: .35rem; }
.ley { margin-top: 2.5rem; padding: 1.25rem 1.4rem; background: var(--fondo-2); border-radius: 4px;
       display: grid; gap: .4rem; max-width: 46rem; }
.ley h3 { font-size: 1.2rem; }
.ley p { color: var(--suave); }

.sus { background: var(--fondo-2); }
.sus .dos > div { display: grid; gap: 1rem; align-content: start; }
.sus-form { display: grid; gap: .75rem; align-content: start; }
.sus-nombre { font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px;
              padding: .7rem .8rem; min-width: 0; }
.sus-etiqueta { font-family: var(--f-util); font-size: .85rem; letter-spacing: .04em; }
.sus-fila { display: flex; flex-wrap: wrap; gap: .6rem; }
.sus-fila input { flex: 1 1 14rem; min-width: 0; font: inherit; color: var(--texto); background: var(--fondo);
                  border: 1px solid var(--linea); border-radius: 3px; padding: .7rem .9rem; }
.sus-fila button { flex: 0 0 auto; font-family: var(--f-titulo); font-size: 1.15rem; font-weight: 600;
                   background: var(--ambar); color: var(--ambar-texto); border: 0; border-radius: 3px;
                   padding: .7rem 1.3rem; cursor: pointer; }
.sus-fila :disabled { opacity: .55; cursor: not-allowed; }
.sus-zonas { border: 1px solid var(--linea); border-radius: 4px; padding: .6rem .9rem .8rem; margin: 0; min-width: 0;
             display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .35rem .8rem; }
.sus-motos legend, .sus-zonas legend { font-size: .95rem; color: var(--suave); padding: 0 .3rem; }
.sus-zonas label { display: flex; gap: .45rem; align-items: center; font-size: .92rem; cursor: pointer; }
.sus-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--suave); }
.sus-check input { margin-top: .3rem; accent-color: var(--ambar); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tabla { overflow-x: auto; }
.tabla table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .45rem .75rem .45rem 0; border-bottom: 1px solid var(--linea); }
.tabla th { font-family: var(--f-util); font-size: .8rem; letter-spacing: .04em; color: var(--suave); }
.sus-nota { font-family: var(--f-util); font-size: .82rem; color: var(--suave); }

.legal { padding-block: 2rem 4rem; display: grid; gap: 1rem; max-width: 46rem; }
.legal h2 { font-size: 1.5rem; margin-top: 1rem; }
.nota { font-family: var(--f-util); font-size: .85rem; color: var(--suave); }
.admin { display: grid; gap: .5rem; }

.pie { border-top: 1px solid var(--linea); }
.pie-in { padding-block: 1.75rem 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
          justify-content: space-between; color: var(--suave); font-size: .92rem; }
.pie-in p { max-width: 36rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }