/* Un cristal empañado una tarde de lluvia en A Coruña: vaho gris azulado, tinta de pizarra
   y una sola luz de farola en la acción. */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/fuentes/familjen-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --vaho: #d3dde1;
  --tinta: #16212a;
  --tinta-suave: #3b4d58;
  --farola: #f2b544;
  --farola-viva: #f7c766;
  --noche: #0e1418;
  --margen: clamp(16px, 3vw, 40px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--tinta);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, p { margin: 0; }
a { color: inherit; }
::selection { background: var(--farola); color: var(--tinta); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.boton:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 3px var(--vaho); }

/* ---------- La ventana ---------- */
.ventana {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}
.foto, .vaho {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.foto { object-fit: cover; object-position: 50% 42%; }
.vaho { touch-action: none; cursor: crosshair; }

/* Sin JavaScript no hay vaho: el texto lleva su propio fondo para leerse sobre la foto */
.texto {
  position: relative; z-index: 2;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  max-width: 40rem;
  margin: 0 var(--margen) var(--margen);
  padding: 28px 28px 32px;
  background: var(--vaho);
}
.js .texto { background: transparent; padding: 0; }

h1 {
  font-size: clamp(3rem, 1.4rem + 6.4vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}
.oficio {
  margin-top: 18px;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 24ch;
}
.camino { margin-top: 14px; max-width: 36ch; color: var(--tinta-suave); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.boton {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  background: var(--farola); color: var(--tinta);
  font-weight: 700; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.boton:active { transform: scale(0.97); }
.enlace {
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: text-decoration-color 160ms ease;
}

/* ---------- Pista y botón de limpiar ---------- */
.pista {
  position: relative; z-index: 2;
  grid-row: 1; align-self: start; justify-self: end;
  margin: var(--margen);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 16px;
  font-size: 0.9375rem; color: var(--tinta-suave);
  text-align: right;
}
.pista-raton { display: none; }
.limpiar {
  font: inherit; font-weight: 500; color: var(--tinta);
  background: transparent; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px;
  transition: transform 160ms var(--ease-out);
}
.limpiar:active { transform: scale(0.97); }
html:not(.js) .pista { display: none; }
.pista.limpio .pista-tactil, .pista.limpio .pista-raton { display: none; }

@media (hover: hover) and (pointer: fine) {
  .pista-tactil { display: none; }
  .pista-raton { display: inline; }
  .boton:hover { background: var(--farola-viva); }
  .enlace:hover { text-decoration-color: var(--farola); text-decoration-thickness: 2px; }
}

/* ---------- Llegada: el texto aparece una vez, escalonado ---------- */
.js .texto > *, .js .pista {
  opacity: 0; transform: translateY(8px);
  animation: aparecer 420ms var(--ease-out) forwards;
}
.js .texto > :nth-child(2) { animation-delay: 60ms; }
.js .texto > :nth-child(3) { animation-delay: 120ms; }
.js .texto > :nth-child(4) { animation-delay: 180ms; }
.js .pista { animation-delay: 900ms; }
@keyframes aparecer { to { opacity: 1; transform: none; } }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .ventana { grid-template-rows: 1fr auto; }
  .pista { justify-self: stretch; justify-content: space-between; text-align: left; }
  .acciones { gap: 10px 22px; }
  .boton { flex: 1 1 100%; justify-content: center; }
}

/* Móvil en horizontal: menos texto en pantalla para que quede cristal que limpiar */
@media (orientation: landscape) and (max-height: 520px) {
  .texto { max-width: 26rem; }
  h1 { font-size: 2.6rem; }
  .oficio { font-size: 1.125rem; margin-top: 10px; }
  .camino { margin-top: 8px; }
  .mientras { display: none; }
  .acciones { margin-top: 16px; }
  .boton { min-height: 44px; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .texto > *, .js .pista { animation: aparecer-quieto 200ms ease forwards; transform: none; }
  @keyframes aparecer-quieto { to { opacity: 1; } }
  .boton, .limpiar { transition: background-color 160ms ease; }
  .boton:active, .limpiar:active { transform: none; }
}