/* "El letrero": la pagina es una barda pintada del pueblo. El letrero va rotulado a brocha como las letras del logo (crema, contorno oscuro, sombra dura) y abajo corre un mural plano de sierra y palmar. Chela One (LatinoType) y Alegreya Sans (Huerta Tipografica), las dos con licencia OFL y servidas por este mismo nginx desde /fuentes/: la pagina no carga nada de otro sitio. La hoja la comparten / y /en/ (una sola copia), y nginx la sirve en /estilos.css. */
@font-face {
  font-family: "Chela One";
  src: url("/fuentes/chela-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fuentes/alegreya-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fuentes/alegreya-sans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Los verdes son la escala del Slimy green #299617 de app.css. La barda lleva el texto del cuerpo, asi que va en el 600 (#217812): el crema de texto da 4.9:1 y el crema 5.4:1, y el #299617 puro solo 3.4:1 y 3.7:1. El puro pinta la sierra del mural, donde no hay texto. */
:root {
  --barda: #217812;
  --suelo: #144b0c;
  --crema: #fafee8;
  --crema-texto: #eef3d6;
  --tinta: #0c2d07;
  --sombrero: #f2a65a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: clip; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--barda);
  color: var(--crema-texto);
  font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
  font-size: 1.1875rem;
  line-height: 1.5;
  overflow-x: hidden;
}

.barda {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 5vw, 4.5rem) 0;
}
.logo { display: block; width: min(17rem, 72vw); height: auto; }

/* El H1 dice que es el lugar, para buscadores y lectores de pantalla; el letrero de abajo es la parte visual. */
/* En caja normal y sin espaciado: la etiqueta en mayusculas espaciadas sobre el titular es uno de los gestos que delatan una pagina hecha en serie. */
h1 {
  margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--crema-texto);
}

.letrero {
  margin: clamp(0.75rem, 2.5vw, 1.5rem) 0 0;
  font-family: "Chela One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 15.5vw, 10.5rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--crema);
  -webkit-text-stroke: 0.07em var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0.055em 0.07em 0 var(--tinta);
  transform: rotate(-3.5deg);
  transform-origin: left bottom;
}

.texto { max-width: 31rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.texto p { margin: 0 0 0.9rem; }
.texto p:first-child { font-weight: 700; font-size: 1.3125rem; color: var(--crema); }

.boton {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.8rem 1.5rem 0.85rem;
  background: var(--crema);
  color: var(--tinta);
  border: 3px solid var(--tinta);
  border-radius: 0.25rem;
  box-shadow: 5px 5px 0 var(--tinta);
  font-weight: 700;
  font-size: 1.1875rem;
  text-decoration: none;
}
.boton:hover { background: var(--sombrero); }
.boton:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--tinta); }
.boton:focus-visible { outline: 3px solid var(--crema); outline-offset: 6px; }

.mural {
  display: block;
  width: 100%;
  height: 15rem;
  margin-top: -3rem;
  pointer-events: none;
}
footer {
  background: var(--suelo);
  color: var(--crema-texto);
  padding: 0.35rem 0 1.5rem;
  font-size: 1rem;
}
footer p { max-width: 76rem; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 4.5rem); }

/* Selector de idioma: su propia fila arriba a la derecha, porque junto al logotipo no cabe a 390px. Cada enlace mide al menos 44px de alto para el dedo; el idioma actual va relleno de crema y el otro solo con borde, con el crema de texto sobre la barda (4.9:1). */
.idioma { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.idioma a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 2px solid var(--crema-texto);
  border-radius: 0.25rem;
  color: var(--crema-texto);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.idioma a[aria-current] { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.idioma a:hover { text-decoration: underline; }
.idioma a:focus-visible { outline: 3px solid var(--crema); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 60rem) {
  .mural { height: auto; margin-top: -14rem; }
}
@media (prefers-reduced-motion: reduce) {
  .boton:active { transform: none; }
}