/* khonsu.es, hoja única del sitio. Sin build: se edita este fichero y se
   re-sella la versión de la URL con bin/stamp.sh (SiteGround cachea los
   estáticos un año y no atiende al .htaccess). */

/* ---------- Tipografía autoalojada (nunca por CDN) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Paleta, sacada de la propia fotografía ---------- */
:root {
  --noche: #0b0805;
  --noche-alta: #17100a;
  --oro: #e0a955;
  --oro-claro: #f7dda6;
  --oro-hondo: #a97428;
  --oro-medio: #c9913f;
  --ambar: #d1782c;
  --luna: #fbf6ea;
  --texto: #ded3c1;
  /* #a2968a se quedaba en 4,1:1 sobre la franja más clara del cielo, que es
     por donde pasa el texto cuando el viewport es bajo y la portada scrollea. */
  --texto-tenue: #b3a698;
  --texto-medio: #bdb0a1;
  --linea: rgba(224, 169, 85, 0.24);

  --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --cuerpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --contenido: 80rem;
  --lento: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--oro-claro); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; display: block; }

/* Recortado, no mandado a left:-9999px: una caja fuera de pantalla ensancha el
   área de scroll del documento y aparece barra horizontal donde no toca. */
.saltar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--noche-alta);
  color: var(--oro-claro);
  z-index: 10;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  clip-path: none;
}

/* ---------- Fondo: fotografía, velo y grano ---------- */
.escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.escena__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* El oscurecido general va horneado en el propio JPG (saturación arriba, luces
   comprimidas, techo en 112/255): así la fotografía conserva relieve. Encima
   sólo hay una viñeta. Lo que hace legible el texto son dos superficies
   locales: el charco bajo el nombre y el plinto de los datos. */
.escena__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(135% 105% at 50% 40%, rgba(11, 8, 5, 0) 0%, rgba(11, 8, 5, 0.18) 62%, rgba(11, 8, 5, 0.6) 100%),
    linear-gradient(180deg, rgba(11, 8, 5, 0.42) 0%, rgba(11, 8, 5, 0) 22%);
}

.escena__grano {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Estructura ---------- */
.pagina {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.centro {
  width: 100%;
  max-width: var(--contenido);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.portada {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.1rem, 2.8vh, 2.35rem);
  padding-block: clamp(2rem, 5.5vh, 4.5rem) clamp(1.5rem, 4vh, 3rem);
}

/* Charco de sombra bajo el nombre. Sin él, el oro del logotipo sobre el cielo
   se queda en 2,9:1, y no hay forma de arreglarlo sin apagar la foto entera. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: min(1180px, 160%);
  height: min(660px, 200%);
  z-index: -1;
  background: radial-gradient(
    ellipse closest-side,
    rgba(11, 8, 5, 0.7) 0%,
    rgba(11, 8, 5, 0.54) 48%,
    rgba(11, 8, 5, 0) 100%
  );
}

/* Plinto: los datos y el pie descansan sobre una superficie opaca en vez de
   flotar sobre la arena. La foto vive arriba y aquí abajo se retira. */
.datos {
  position: relative;
  background: rgba(11, 8, 5, 0.9);
  padding-block: clamp(1rem, 2.4vh, 1.75rem) clamp(1rem, 2.6vh, 2rem);
}

.datos::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(70px, 12vh, 120px);
  background: linear-gradient(180deg, rgba(11, 8, 5, 0) 0%, rgba(11, 8, 5, 0.9) 100%);
}

.datos__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2.4vh, 1.85rem);
}

/* En lectura larga el texto recorre toda la altura: el plinto pasa a ser una
   franja vertical y la fotografía asoma por los lados. */
body.lectura .pagina {
  background: linear-gradient(
    90deg,
    rgba(11, 8, 5, 0) 0%,
    rgba(11, 8, 5, 0.93) 13%,
    rgba(11, 8, 5, 0.93) 87%,
    rgba(11, 8, 5, 0) 100%
  );
}

/* ---------- Marca ---------- */
.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 2vh, 1.4rem);
}

.marca__luna {
  position: relative;
  width: clamp(64px, 11vw, 96px);
  transform: translate3d(var(--luna-x, 0px), var(--luna-y, 0px), 0);
  transition: transform 0.9s var(--lento);
}

.marca__luna::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 220%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 221, 166, 0.42) 0%, rgba(224, 169, 85, 0.12) 42%, transparent 68%);
  animation: alentar 8s ease-in-out infinite;
}

.marca__luna svg { position: relative; width: 100%; height: auto; }

@keyframes alentar {
  0%, 100% { opacity: 0.34; scale: 0.86; }
  50%      { opacity: 1;    scale: 1.12; }
}

/* El disco sube y baja de intensidad con el halo, en el mismo ciclo de 8 s.
   Es lo único que late en la página: un dios lunar puede permitírselo.
   Va con dos círculos y opacidad, no con filter: un filter sobre el <circle>
   lo hacía desaparecer entero en Chrome. */
.luna__disco {
  animation: atenuar 8s ease-in-out infinite;
}

.luna__fulgor {
  opacity: 0;
  animation: fulgor 8s ease-in-out infinite;
}

@keyframes atenuar {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes fulgor {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.92; }
}

.marca__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, min(13vw, 12.5vh), 8rem);
  line-height: 0.94;
  letter-spacing: 0.14em;
  margin-inline-end: -0.14em; /* descuenta el tracking del último carácter al centrar */
  background: linear-gradient(96deg, var(--oro-medio) 0%, var(--oro-claro) 34%, #fffaf0 46%, var(--oro-claro) 58%, var(--oro-medio) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: destello 11s ease-in-out infinite;
}

@keyframes destello {
  0%, 62%, 100% { background-position: 100% 50%; }
  84%           { background-position: 0% 50%; }
}

.marca__dominio {
  margin: 0;
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.85rem);
  letter-spacing: 0.42em;
  margin-inline-end: -0.42em;
  text-transform: uppercase;
  color: var(--texto);
}

/* ---------- Texto ---------- */
.entrada {
  margin: 0;
  max-width: 34ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.35rem, min(1rem + 1.7vw, 4.4vh), 2.25rem);
  line-height: 1.32;
  color: var(--luna);
  text-wrap: balance;
}

.cierre {
  margin: 0;
  max-width: 68ch;
  color: var(--texto);
  text-wrap: pretty;
}

/* ---------- Los tres pilares ---------- */
.pilares {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.25rem);
  width: 100%;
  max-width: 58rem;
  border-block: 1px solid var(--linea);
  padding-block: clamp(1rem, 2.2vh, 1.75rem);
}

.pilar { position: relative; }

.pilar + .pilar::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.5rem, 4vw, 3.25rem) / -2);
  top: 8%;
  height: 84%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--linea) 22%, var(--linea) 78%, transparent);
}

.pilar__clave {
  display: block;
  font-family: var(--display);
  /* Cormorant trae cifras de estilo antiguo: en «100 %» los ceros bajan a la
     altura de x y el dato se lee peor de lo que se ve. */
  font-variant-numeric: lining-nums;
  font-weight: 500;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.2;
  color: var(--oro-claro);
}

.pilar__nota {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  line-height: 1.55;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* ---------- Estado ---------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.estado__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 0 rgba(224, 169, 85, 0.55);
  animation: latir 2.8s ease-out infinite;
}

@keyframes latir {
  0%        { box-shadow: 0 0 0 0 rgba(224, 169, 85, 0.5); }
  70%, 100% { box-shadow: 0 0 0 11px rgba(224, 169, 85, 0); }
}

/* ---------- Pie ---------- */
.pie {
  background: rgba(11, 8, 5, 0.9);
  border-top: 1px solid var(--linea);
  padding-block: clamp(1.1rem, 2.6vh, 1.75rem);
  font-size: 0.83rem;
  color: var(--texto-tenue);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.pie__legales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.pie__legales a {
  display: inline-block;
  padding-block: 0.55rem; /* el enlace medía 23 px de alto: poco para un pulgar */
}

.pie a {
  color: var(--texto-tenue);
  text-decoration-color: var(--linea);
  text-underline-offset: 0.25em;
  transition: color 0.25s var(--lento);
}

.pie a:hover { color: var(--oro-claro); }

/* ---------- Entrada escalonada ---------- */
.aparece {
  opacity: 0;
  transform: translateY(18px);
  animation: emerger 1.1s var(--lento) forwards;
  animation-delay: var(--retraso, 0s);
}

@keyframes emerger {
  to { opacity: 1; transform: none; }
}

/* ---------- Páginas legales ---------- */
.legal {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 4vw, 2rem) clamp(2rem, 5vh, 3.5rem);
}

.legal__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-decoration: none;
}

.legal__volver:hover { color: var(--oro-claro); }

.legal h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--luna);
  margin: 1.75rem 0 0.5rem;
}

.legal__fecha {
  margin: 0 0 2.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Cae justo en la franja del cielo: con --texto-tenue se quedaba en 4,4:1. */
  color: var(--texto-medio);
}

.legal h2 {
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25;
  color: var(--oro-claro);
  margin: 2.75rem 0 0.75rem;
}

.legal p, .legal li { text-wrap: pretty; }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.5rem; }
.legal li::marker { color: var(--oro-hondo); }

.ficha {
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: rgba(23, 16, 10, 0.55);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin: 1.5rem 0;
}

.ficha dl { margin: 0; display: grid; gap: 0.85rem; }
.ficha dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.ficha dd { margin: 0.2rem 0 0; color: var(--luna); }

@media (min-width: 40rem) {
  .ficha dl { grid-template-columns: 11rem 1fr; align-items: baseline; gap: 0.9rem 1.5rem; }
  .ficha dd { margin-top: 0; }
}

/* ---------- Móvil ---------- */
@media (max-width: 46rem) {
  .pilares {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    text-align: center;
  }
  .pilar + .pilar::before {
    left: 50%;
    top: calc(-1.35rem / 2);
    translate: -50% 0;
    width: 44%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--linea), transparent);
  }
  .pie__fila { justify-content: center; text-align: center; }
}

/* ---------- Sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marca__luna::before,
  .luna__disco,
  .luna__fulgor,
  .marca__nombre,
  .estado__punto {
    animation: none;
  }
  .marca__luna { transition: none; transform: none; }
  .marca__nombre { background-position: 100% 50%; }
  .aparece { opacity: 1; transform: none; animation: none; }
  .luna__disco { opacity: 1; }
  .luna__fulgor { opacity: 0.45; }
}