/* LocalMX · EL ESTILO DE LAS PÁGINAS DE TEXTO ══════════════════════════════════════════════════════════════════════════════════════════ Lo comparten `legal.html`, `quiero-pedir.html` y `quiero-repartir.html`. Estaba copiado dentro de `legal.html`, y copiarlo dos veces más para las dos páginas nuevas es exactamente el aditivo que hay que dejar de hacer: tres copias son tres sitios donde arreglar el mismo contraste, y dos de ellos se olvidan. `index.html` conserva el suyo a propósito: la portada tiene componentes que estas páginas no usan —la vitrina, las piezas, la rejilla de tarjetas— y mezclarlos aquí haría que cada página de texto descargara el CSS de la portada entera. Cuando la portada se parta por módulos, este archivo es donde se junta lo común. TODO COLOR SALE DE LAS VARIABLES, en claro y en oscuro. Un literal aquí es el renglón que en modo oscuro queda de tinta oscura sobre fondo oscuro, y no se ve hasta que alguien lo reporta. */ :root{ --papel:#F5F6F1; --papel-2:#FFFFFF; --papel-3:#ECEEE6; --tinta:#16211C; --tinta-2:#3F4A44; --tinta-3:#5F6A63; --linea:#D6DACF; --nopal:#1E7A4C; --nopal-suave:#E3F0E7; --aviso:#8A5B00; --aviso-suave:#F7EBD7; } @media (prefers-color-scheme:dark){:root:not([data-theme=light]){ --papel:#101815; --papel-2:#16211C; --papel-3:#1D2A24; --tinta:#EDF1EC; --tinta-2:#B3BEB7; --tinta-3:#929E96; --linea:#2A3831; --nopal:#57BE86; --nopal-suave:#173325; --aviso:#E0B155; --aviso-suave:#2E2617; }} *{box-sizing:border-box} body{margin:0;background:var(--papel);color:var(--tinta); font-family:"Source Serif 4",Georgia,serif;font-size:17px;line-height:1.65} h1,h2,h3,.marca,nav a,.btn{font-family:Archivo,"Helvetica Neue",Arial,sans-serif} .env{max-width:760px;margin:0 auto;padding:0 22px} a{color:var(--nopal)} header{border-bottom:1px solid var(--linea);background:var(--papel-2)} header .env{display:flex;align-items:center;justify-content:space-between; gap:16px;padding:15px 22px;flex-wrap:wrap} .marca{font-size:21px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--tinta)} /* Primer sitio donde cae el tabulador: sin contorno, quien navega con teclado empieza a ciegas. Va aquí y no en cada página, que es para lo que existe este archivo. */ .marca:focus-visible{outline:3px solid var(--nopal);outline-offset:3px;border-radius:4px} .marca span{color:var(--nopal)} main{padding:40px 0 70px} h1{font-size:30px;line-height:1.2;margin:0 0 10px} .lede{color:var(--tinta-2);margin:0 0 30px} .lista{list-style:none;padding:0;margin:0} .lista li{border:1px solid var(--linea);border-radius:5px;background:var(--papel-2); padding:18px 20px;margin-bottom:12px} .lista h2{font-size:18px;margin:0 0 6px} .lista p{margin:0;font-size:15px;color:var(--tinta-2)} .lista a{font-weight:600;text-decoration:none} .lista a:hover{text-decoration:underline} .prep{background:var(--aviso-suave);border-left:4px solid var(--aviso); padding:14px 16px;border-radius:4px;font-size:15px;margin-top:10px} .prep strong{color:var(--aviso)} .doc{background:var(--papel-2);border:1px solid var(--linea);border-radius:5px; padding:30px 32px;margin-top:20px} .doc h1,.doc h2,.doc h3{margin:26px 0 10px;line-height:1.3} .doc h1{font-size:26px;margin-top:0} .doc h2{font-size:20px;padding-top:14px;border-top:1px solid var(--linea)} .doc h3{font-size:17px} .doc p,.doc li{font-size:16px} .doc ul,.doc ol{padding-left:22px} .doc blockquote{margin:16px 0;padding:12px 18px;border-left:4px solid var(--linea); background:var(--papel-3);color:var(--tinta-2);font-size:15px} .doc code{font-family:ui-monospace,monospace;font-size:14px;background:var(--papel-3); padding:1px 5px;border-radius:3px} .doc table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px} .doc th,.doc td{border:1px solid var(--linea);padding:8px 10px;text-align:left} .doc hr{border:0;border-top:1px solid var(--linea);margin:26px 0} .volver{display:inline-block;margin-bottom:20px;font-family:Archivo,sans-serif; font-size:14px;font-weight:600;text-decoration:none} .huella{margin-top:26px;padding-top:16px;border-top:1px solid var(--linea); font-size:13px;color:var(--tinta-3)} footer{border-top:1px solid var(--linea);padding:26px 0;font-size:14px;color:var(--tinta-3)} @media(max-width:600px){ main{padding:26px 0 50px} h1{font-size:25px} .doc{padding:20px 18px} } /* ══ LA CABECERA, IGUAL EN TODAS LAS PÁGINAS ═══════════════════════════════════════════════ Las páginas de texto —`/legal`, `/quiero-pedir`, `/quiero-repartir`— tenían una cabecera reducida: el logotipo y un «Volver». Quien llegaba a una de ellas desde Google o desde un enlace de WhatsApp se quedaba SIN NAVEGACIÓN: no había forma de ver los negocios, ni de afiliarse, ni de registrarse en la otra convocatoria. Un callejón sin salida en el sitio de un municipio que apenas se está dando a conocer. Ahora es la misma cabecera, con el mismo menú y el mismo botón de pedir. Lo comparten las tres por este archivo — copiarla tres veces es lo que hace que una se quede atrás. */ header{border-bottom:1px solid var(--linea);background:var(--papel-2); position:sticky;top:0;z-index:20} header .env{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 22px;max-width:1080px} nav{display:flex;align-items:center;gap:6px} nav a{font-size:15px;font-weight:600;text-decoration:none;color:var(--tinta-2); padding:10px 12px;border-radius:6px;min-height:44px;display:inline-flex;align-items:center} nav a:hover{color:var(--tinta);background:var(--papel-3)} nav a:focus-visible{outline:3px solid var(--nopal);outline-offset:2px} nav a[aria-current=page]{color:var(--nopal);background:var(--nopal-suave)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px; font-weight:700;padding:12px 20px;border-radius:8px;min-height:48px;text-decoration:none; cursor:pointer;border:2px solid var(--nopal);background:var(--nopal);color:#fff; font-family:Archivo,"Helvetica Neue",Arial,sans-serif} .btn:hover{filter:brightness(1.08)} .btn:focus-visible{outline:3px solid var(--aviso);outline-offset:3px} /* El botón de la hamburguesa. `display:none` en escritorio y visible en móvil: en 375 px, cinco enlaces en fila se envuelven en tres renglones y empujan la página entera. */ .abrir-menu{display:none;background:none;border:1px solid var(--linea);border-radius:8px; width:46px;height:46px;cursor:pointer;color:var(--tinta);font-size:22px;line-height:1} .abrir-menu:hover{border-color:var(--nopal)} .abrir-menu:focus-visible{outline:3px solid var(--nopal);outline-offset:2px} @media (max-width:860px){ .abrir-menu{display:flex;align-items:center;justify-content:center} nav{position:fixed;inset:64px 0 auto 0;background:var(--papel-2);flex-direction:column; align-items:stretch;gap:0;padding:8px 14px 18px;border-bottom:1px solid var(--linea); transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity .16s ease,transform .16s ease} nav[data-abierto="1"]{transform:none;opacity:1;pointer-events:auto} nav a{min-height:52px;font-size:17px;border-bottom:1px solid var(--linea);border-radius:0} nav a:last-child{border-bottom:0} nav .btn{margin-top:10px;justify-content:center} @media (prefers-reduced-motion:reduce){nav{transition:none}} } /* ══ LOS FORMULARIOS DE LAS LANDINGS ═══════════════════════════════════════════════════════ Esto estaba COPIADO dentro de `quiero-pedir.html` y `quiero-repartir.html`, que es exactamente lo que esta hoja existe para evitar — y las dos copias YA habían divergido: una tenía `.recado.bien` y la otra no, así que el mismo mensaje de «salió bien» se veía verde en una página y sin color en la otra. Se descubrió el 14-oct-2026 al nacer `quiero-ser-socio.html`: la página tercera salió sin estilo ninguno —y con la trampa anti-robots A LA VISTA, que además de verse roto le enseña a un robot cuál es el campo que no debe llenar. Vive aquí, una sola vez, y las tres la usan. */ form{background:var(--papel-2);border:1px solid var(--linea);border-radius:10px; padding:22px;margin:0 0 28px} .campo{margin:0 0 16px} .campo label{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:14px; margin:0 0 6px} /* 16px MÍNIMO: por debajo, iOS amplía la página al enfocar y el formulario se sale. */ input,select,textarea{width:100%;padding:12px 13px;font-size:16px;font-family:inherit; border:1px solid var(--linea);border-radius:6px;background:var(--papel);color:var(--tinta)} input:focus,select:focus,textarea:focus{outline:2px solid var(--nopal);outline-offset:1px} .ayuda{font-size:13px;color:var(--tinta-3);margin:5px 0 0;line-height:1.5} .fila{display:grid;gap:14px;grid-template-columns:1fr 1fr} @media (max-width:560px){.fila{grid-template-columns:1fr}} .casilla{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.55} .casilla input{width:auto;margin-top:3px;flex:0 0 auto} form button{font-family:Archivo,sans-serif;font-weight:600;font-size:16px;padding:14px 22px; min-height:48px;border:none;border-radius:6px;background:var(--nopal);color:#fff; cursor:pointer;width:100%} form button[disabled]{opacity:.5;cursor:default} .recado{padding:14px 16px;border-radius:8px;margin:0 0 16px;font-size:15px;line-height:1.55} .recado.mal{background:var(--aviso-suave);border:1px solid var(--aviso);color:var(--tinta)} .recado.bien{background:var(--nopal-suave);border:1px solid var(--nopal);color:var(--tinta)} /* LA TRAMPA DE LAS ABEJAS, FUERA DE LA PANTALLA. Si se ve, una persona la llena y su solicitud se descarta en silencio — y el robot aprende cuál es. */ .miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .gracias{background:var(--nopal-suave);border:1px solid var(--nopal);border-radius:10px; padding:26px 24px;margin:0 0 28px} .gracias h2{margin:0 0 8px;font-size:22px} /* ══ UN BOTÓN QUE SE LEE COMO ENLACE ═══════════════════════════════════════════════════════ «¿Cómo va mi pedido?», «← Ver otros negocios». Son ACCIONES —abren algo en la misma página, no navegan— así que tienen que ser `