/* Páginas legales con el diseño de /buscar (Alex, 28-oct-2026): el fondo, el header y la letra de /buscar; debajo del header
   la barra del buscador y «¿Qué es el buscador?»; el texto en una hoja de vidrio clara, como la tarjeta del buscador.
   Móvil primero: una columna, 16 px de margen, sin desborde a 360 px. Lo arma herramientas/construir/armar-legales.mjs. */
/* Los valores de las legales, con nombre (pruebas/sistema-visual.test.mjs: nada suelto). */
:root{--lg-ambar:#F6A623;--lg-blanco:#fff;--lg-fondo:#e9eaec;--lg-guia:#5F6672;--lg-linea:#E7E9EE;--lg-liso:#F8F9FA;--lg-r-circulo:50%;--lg-r-hoja:28px;--lg-r-pastilla:999px;--lg-r-tarjeta:24px;--lg-sobre-ambar:#1A1D24;--lg-tenue:#4A5160;--lg-texto:#30353F;--lg-tinta:#1B1F27}
/* La cabecera igual que en /buscar (piel.css): Aliados y Proyectos viven en «Más secciones»; sin ellos no se enciman
   «Más secciones» y «Entrar» de 1280 a 1330 px. */
.hdr .nav a[data-ver=aliados],.hdr .nav a[data-ver=proyectos]{display:none}
body.lg-pagina{margin:0;min-height:100dvh;background:var(--lg-fondo);color:var(--lg-tinta);font:400 var(--pl-f3,16px)/1.6 Manrope,system-ui,sans-serif;overflow-x:hidden}
/* El header de /buscar, igual que allá (buscador.css): el sello del Grupo sin texto visible. */
.lg-pagina .hdr-grupo img{display:block;width:auto;height:28px}
.lg-pagina .hdr-grupo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La barra del buscador: el mismo lugar que en /buscar, debajo del header; escribir aquí abre /buscar?q=… */
.lg-buscador{display:flex;align-items:center;justify-content:center;gap:14px;width:min(1200px,calc(100% - 32px));margin:16px auto 0;position:relative}
.lg-barra{display:flex;align-items:center;gap:8px;flex:0 1 640px;min-width:0;min-height:60px;padding:0 8px 0 10px;border-radius:var(--lg-r-pastilla);
  border:1px solid rgba(255,255,255,.95);background:linear-gradient(125deg,rgba(255,255,255,.88),rgba(236,238,242,.7));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--lg-blanco),inset 0 -1px 2px rgba(120,126,140,.18),0 0 0 1px rgba(110,118,132,.18),0 18px 34px -22px rgba(20,24,32,.5)}
.lg-barra:focus-within{box-shadow:inset 0 1px 0 var(--lg-blanco),0 0 0 2px var(--lg-ambar),0 18px 34px -22px rgba(20,24,32,.5)}
.lg-barra input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;font:500 var(--pl-f3,16px)/1.2 Manrope,system-ui,sans-serif;color:var(--lg-tinta);outline:none}
.lg-barra input::placeholder{color:var(--lg-guia)}
.lg-barra input::-webkit-search-cancel-button{display:none}
.lg-barra button{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:var(--lg-r-circulo);background:var(--lg-tinta);color:var(--lg-blanco);cursor:pointer}
.lg-barra button:focus-visible{outline:2px solid var(--lg-ambar);outline-offset:2px}
.lg-barra button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lg-buscador .que-es-junto{position:static}

/* La hoja con el texto legal */
.lg-main{display:block;width:min(860px,calc(100% - 32px));margin:16px auto 0;outline:none}
.lg-hoja{padding:28px 22px 30px;border-radius:var(--lg-r-tarjeta);border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,251,252,.9));
  box-shadow:inset 0 1px 0 var(--lg-blanco),0 0 0 1px rgba(110,118,132,.12),0 24px 48px -30px rgba(20,24,32,.4);overflow-wrap:anywhere}
.lg-hoja .contenedor,.lg-hoja .bloque{width:auto;max-width:none!important;margin:0;padding:0}
.lg-hoja .titulo-bloque{margin:0 0 18px}
.lg-hoja .eyebrow{display:block;margin:0 0 8px;font:700 var(--pl-f1,12px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--lg-tenue)}
.lg-hoja h1{margin:0;font:800 var(--pl-f5,40px)/1.1 Archivo,Manrope,system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.lg-hoja h2{margin:26px 0 8px;font:800 var(--pl-f4,20px)/1.25 Archivo,Manrope,system-ui,sans-serif;letter-spacing:-.01em}
.lg-hoja h3{margin:18px 0 6px;font:800 var(--pl-f3,16px)/1.3 Archivo,Manrope,system-ui,sans-serif}
.lg-hoja p,.lg-hoja li{color:var(--lg-texto)}
.lg-hoja p{margin:0 0 12px}
.lg-hoja ul,.lg-hoja ol{margin:0 0 12px;padding-left:22px}
.lg-hoja li{margin:0 0 8px}
.lg-hoja .tenue,.lg-hoja small{color:var(--lg-tenue)}
.lg-hoja a{color:var(--lg-tinta);text-decoration:underline;text-decoration-color:var(--lg-ambar);text-decoration-thickness:2px;text-underline-offset:3px}
/* Las ligas en el texto (hola@hostess.mx, «aviso del buscador»; QA del 31-oct-2026: medían 22 px): relleno que crece a 44 px
   el área que se toca sin mover los renglones, como en el pie. */
.lg-hoja a{padding-block:11px}
.lg-hoja a.btn-text,.lg-hoja .btn-text{display:inline;min-height:0;padding:11px 0;font:inherit;background:none;border:0}
.lg-hoja button.btn-text,.lg-hoja .btn-glass{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--lg-r-pastilla);border:1px solid rgba(32,39,56,.14);background:var(--lg-blanco);font:700 var(--pl-f3,16px)/1 Manrope,system-ui,sans-serif;color:var(--lg-tinta);cursor:pointer}
.lg-hoja .btn-primary{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:48px;padding:10px 22px;border-radius:var(--lg-r-pastilla);background:var(--lg-ambar);color:var(--lg-sobre-ambar);font-weight:800;text-decoration:none;white-space:normal;text-align:center;box-sizing:border-box}
.lg-hoja .btn-primary svg{width:18px;height:18px;flex:none;margin-right:8px;fill:none;stroke:currentColor;stroke-width:2}
.lg-hoja table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:var(--pl-f3,16px);display:block;overflow-x:auto}
.lg-hoja th,.lg-hoja td{padding:8px 10px;border-bottom:1px solid var(--lg-linea);text-align:left;vertical-align:top}
.lg-hoja .ley-token-btn{font-weight:800}
.lg-hoja [style*="grid"]{display:block!important}

/* Pie: las legales y la vuelta al buscador */
.lg-pie{width:min(860px,calc(100% - 32px));margin:20px auto 0;padding:0 0 40px;font-size:var(--pl-f3,16px);color:var(--lg-tenue)}
.lg-pie nav{display:flex;flex-wrap:wrap;gap:0 18px;margin:0 0 12px}
.lg-pie a{display:inline-flex;align-items:center;min-height:44px;color:var(--lg-tinta)}
.lg-pie p{margin:0 0 4px}
/* «hola@hostess.mx» del pie (QA del 28-oct-2026: medía 24 px de alto): en línea, con relleno que crece el área que se toca a
   44 px sin mover los renglones; el nav deja 12 px abajo para que esa área no tape sus ligas. */
.lg-pie p a{display:inline;min-height:0;padding-block:13px;text-decoration:underline;text-decoration-color:var(--lg-ambar);text-decoration-thickness:2px;text-underline-offset:3px}

@media (min-width:640px){.lg-hoja{padding:40px 48px 44px;border-radius:var(--lg-r-hoja)}}
@media (max-width:640px){.lg-barra{min-height:56px}.lg-barra input{font-size:var(--pl-f3,16px)}}
@media (prefers-reduced-transparency:reduce){.lg-barra{background:var(--lg-liso);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Medida de lectura (45–75 caracteres por línea) en el aviso largo. */
.aviso-largo p{max-width:37em}

/* Con el marco de /buscar (lote 14; director de arte: el aviso iba en una tarjeta blanca centrada con letra de ~13 px): la
   barra de vidrio y la de lugares de las páginas de sector, el texto en la rejilla de /buscar (x = 40 a 1280), el cuerpo a
   16 px con medida de 37em, la ceja «Legal» en ámbar, el índice arriba y «Volver al índice» al bajar. */
.marco-giro.lg-pagina{background:var(--pl-fondo)}
.marco-giro .lg-main{width:auto;margin:0}
.marco-giro .lg-hoja{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.marco-giro .lg-hoja .eyebrow{font:700 var(--pl-f3,16px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:.02em;text-transform:none;color:var(--pl-ambar-texto);margin:0 0 18px}
.marco-giro .lg-hoja .eyebrow::before{content:none}
.marco-giro .lg-hoja h1{max-width:18ch}
.marco-giro .lg-hoja :is(p,li){font-size:var(--pl-f3,16px);line-height:1.65;max-width:37em}
.marco-giro .lg-hoja h2{margin-top:40px;scroll-margin-top:96px}
.marco-giro .lg-indice{margin:28px 0 8px;padding:20px 22px;max-width:37em;border-radius:var(--pl-r-m);background:var(--pl-fondo-2)}
.marco-giro .lg-indice-t{margin:0 0 10px;font:700 var(--pl-f2,14px)/1.2 Manrope,system-ui,sans-serif;color:var(--pl-tenue)}
.marco-giro .lg-indice ol{margin:0;padding-left:22px}
.marco-giro .lg-indice li{margin:0}
.marco-giro .lg-indice a{display:inline-flex;align-items:center;min-height:44px;color:var(--pl-tinta);text-decoration:underline;text-underline-offset:3px}
.marco-giro .lg-volver{position:fixed;right:16px;bottom:calc(var(--bx-lugares-alto,0px) + var(--ck-alto,0px) + 16px);z-index:5;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--pl-r-pill);background:var(--pl-tinta);color:var(--pl-fondo);font:700 var(--pl-f2,14px)/1 Manrope,system-ui,sans-serif;text-decoration:none;box-shadow:var(--pl-sombra,0 8px 24px rgba(0,0,0,.18))}
.marco-giro .lg-volver[hidden]{display:none}
.marco-giro .lg-volver:focus-visible{outline:3px solid var(--pl-ambar);outline-offset:3px}
/* El titular de las legales en el mismo sistema que las demás vistas: paso 6 (40 px en celular, 72 desde 1024). */
.marco-giro #contenido .lg-hoja h1{font-size:var(--pl-f6,40px)}
/* Lote 18 (O): debajo de 600 px las tablas legales son tarjetas apiladas: el nombre arriba (los nombres cortan entre sí,
   nunca a media palabra), luego «Para qué» y «Duración» con su etiqueta (data-th, armar-legales.mjs conTarjetas). */
.lg-hoja .legal-tabla code{white-space:nowrap}
@media (max-width:599px){
.lg-hoja table.legal-tabla{display:block;overflow:visible;margin:0 0 16px}
.lg-hoja .legal-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-hoja .legal-tabla tbody{display:grid;gap:10px}
.lg-hoja .legal-tabla tr{display:grid;gap:10px;padding:16px;border:1px solid var(--lg-linea);border-radius:var(--lg-r-tarjeta);background:var(--lg-blanco)}
.lg-hoja .legal-tabla td{display:block;padding:0;border:0;min-width:0}
.lg-hoja .legal-tabla td:first-child{font-weight:700;color:var(--lg-tinta)}
.lg-hoja .legal-tabla td[data-th]::before{content:attr(data-th);display:block;margin:0 0 2px;font-size:var(--pl-f1,12px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lg-tenue)}
}