/* LocalMX OS · el sitio de turismo de Agua Blanca de Iturbide
   ══════════════════════════════════════════════════════════════════════════════════════════
   POR QUÉ ESTE ARCHIVO NO CARGA NI UNA FUENTE NI UN ESTILO DE FUERA

   `herramientas/turismo-aislado.mjs` para el gate si una página de aquí trae un `<link>`, un
   `@import` o un `fetch` a otro dominio. La landing sí carga Archivo y Source Serif de Google
   —se escribió antes del candado— y estas páginas no pueden, así que van con la pila del
   sistema.

   Y resulta que es mejor, no un apaño: quien va a leer esto está buscando cómo llegar a una
   cascada, probablemente desde el teléfono y con la señal de la Sierra de Tenango. Dos
   peticiones a un dominio ajeno antes de poder leer la primera línea es exactamente lo que no
   se puede permitir. El texto se ve bien con la fuente que ya tiene el aparato.

   La paleta es la de `publico/index.html` —verde profundo para la marca, verde vivo para lo que
   se toca, ámbar para lo que hay que mirar— porque es el mismo sitio y no dos.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --papel:#FCFBF7; --papel-2:#FFFFFF; --papel-3:#F1EFE8;
  --tinta:#12201A; --tinta-2:#35443C; --tinta-3:#566860;
  --linea:#DCD9CF;
  --verde:#0C6B3F; --verde-vivo:#0F8A4E; --verde-suave:#E2F2E8;
  --ambar:#9A5B06; --ambar-suave:#FBEFDC;
  --radio:10px;
  --sombra:0 1px 2px rgba(18,32,26,.06), 0 12px 32px -20px rgba(18,32,26,.45);
  /* LA PILA DEL SISTEMA, con el serif solo para los títulos: en una página que se lee de pie y
     a pleno sol, la diferencia entre título y texto tiene que notarse por la forma y no solo
     por el tamaño. */
  --letra:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --letra-titulo:ui-serif,Georgia,"Times New Roman",serif;
}
@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;
  --verde:#57BE86; --verde-vivo:#57BE86; --verde-suave:#173325;
  --ambar:#E0B155; --ambar-suave:#2E2617;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--letra);font-size:17px;line-height:1.55;
}
a{color:var(--verde)}
img{max-width:100%}

.envoltura{max-width:760px;margin:0 auto;padding:0 18px}

/* ── La cabeza ──────────────────────────────────────────────────────────── */
.cabeza{border-bottom:1px solid var(--linea);background:var(--papel-2)}
.cabeza .envoltura{display:flex;align-items:baseline;gap:12px;
  padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.marca{font-family:var(--letra-titulo);font-weight:600;font-size:19px;
  color:var(--verde);text-decoration:none}
.donde{font-size:13px;color:var(--tinta-3)}

/* ── La portada ─────────────────────────────────────────────────────────── */
.portada{padding:28px 0 6px}
.portada h1{font-family:var(--letra-titulo);font-weight:600;
  font-size:clamp(26px,6vw,38px);line-height:1.18;margin:0 0 10px;text-wrap:balance}
.portada p{margin:0 0 8px;color:var(--tinta-2);max-width:60ch}

/* ── La lista ───────────────────────────────────────────────────────────── */
.lista{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.ficha{
  background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;
}
.ficha a.titulo{
  display:block;padding:15px 16px 0;font-family:var(--letra-titulo);font-weight:600;
  font-size:21px;color:var(--tinta);text-decoration:none;line-height:1.25;
}
.ficha a.titulo:hover{color:var(--verde)}
.ficha .cuerpo{padding:6px 16px 16px}
.ficha .resumen{margin:6px 0 0;color:var(--tinta-2)}

/* LAS ETIQUETAS DICEN QUÉ ES Y DÓNDE, no decoran. En una lista de cascadas, el tipo y la
   localidad son lo que separa una de otra. */
.datos{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:13px}
.dato{
  background:var(--papel-3);border:1px solid var(--linea);border-radius:999px;
  padding:3px 10px;color:var(--tinta-2);white-space:nowrap;
}
.dato.fuerte{background:var(--verde-suave);border-color:transparent;color:var(--verde)}

/* ══ EL AVISO DE QUE NADIE HA IDO ════════════════════════════════════════
   No es un adorno ni una nota al pie: es la única pieza de esta página que puede evitar que
   alguien se meta cuarenta minutos por una terracería a un sitio que no está donde dice. Va en
   ámbar —el color de «mirar esto»— y no en rojo, porque no es un error: es el estado real de
   casi todo el inventario del municipio. */
.aviso{
  margin:10px 0 0;padding:9px 12px;border-radius:8px;
  background:var(--ambar-suave);border:1px solid color-mix(in srgb,var(--ambar) 30%,transparent);
  color:var(--ambar);font-size:14px;
}
.aviso b{color:var(--ambar)}

/* ── La ficha de uno ────────────────────────────────────────────────────── */
.volver{display:inline-block;margin:18px 0 0;font-size:14px}
article.uno{padding:6px 0 40px}
article.uno h1{font-family:var(--letra-titulo);font-weight:600;
  font-size:clamp(25px,6vw,34px);line-height:1.2;margin:14px 0 6px;text-wrap:balance}
article.uno .descripcion{font-size:18px;color:var(--tinta-2);max-width:62ch}
article.uno h2{font-family:var(--letra-titulo);font-weight:600;font-size:19px;
  margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--linea)}

.tabla{width:100%;border-collapse:collapse;margin:0;font-size:16px}
.tabla th,.tabla td{text-align:left;padding:9px 0;border-bottom:1px solid var(--linea);
  vertical-align:top}
.tabla th{width:42%;font-weight:600;color:var(--tinta-3);font-size:14px;
  text-transform:uppercase;letter-spacing:.03em}
.tabla td .nota{display:block;color:var(--tinta-3);font-size:14px;margin-top:2px}

/* EL CÓDIGO PLUS SE ENSEÑA PARA COPIARLO, así que va en monoespaciado y seleccionable: el
   caso de uso es «lo pego en el mapa», y una tipografía proporcional hace que un 0 y una O se
   confundan justo donde no puede pasar. */
.punto{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;
  background:var(--papel-3);border:1px solid var(--linea);border-radius:6px;
  padding:3px 8px;display:inline-block;user-select:all;
}

.vacio{
  margin:24px 0;padding:18px;border:1px dashed var(--linea);border-radius:var(--radio);
  color:var(--tinta-2);background:var(--papel-2);
}
.vacio h2{font-family:var(--letra-titulo);font-size:19px;margin:0 0 8px}

.pie{border-top:1px solid var(--linea);margin-top:34px;background:var(--papel-2)}
.pie .envoltura{padding:18px 18px 30px;font-size:14px;color:var(--tinta-3)}

/* NADA DE `outline:none`. Quien navega con el teclado necesita ver dónde está, y en una página
   pública no se sabe quién la abre ni con qué. */
a:focus-visible,button:focus-visible{outline:2px solid var(--verde-vivo);outline-offset:2px}

/* LO QUE SOLO LEEN LOS LECTORES DE PANTALLA. Misma clase que el backoffice, escrita aquí: una
   página de turismo no importa del backoffice, y eso incluye su hoja de estilo. */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}