/* ============================================================
   INICIO: «Cuaderno de observación»
   La página es una noche mirando la luna. La luna grande cambia
   de fase con el scroll y la barra de fases es el índice.
   Se carga después de styles.css y solo afecta a Inicio.
   ============================================================ */

/* La luna de Inicio ya es la grande: fuera el sol/luna común del fondo */
body[data-page="inicio"] .sky {
  display: none;
}

:root[data-theme="light"] body[data-page="inicio"] .luna-luz {
  fill: #fbf7ea;
}

/* ---------- La luna grande ---------- */
.luna-grande {
  position: fixed;
  top: 50%;
  right: -9vw;
  z-index: -1;
  width: min(74vh, 44vw);
  aspect-ratio: 1;
  transform: translateY(-46%);
  pointer-events: none;
}

.luna-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Cuanta más luna, más halo */
  filter: drop-shadow(0 0 calc(var(--luz, 0) * 70px) rgba(241, 228, 174, calc(var(--luz, 0) * 0.22)));
}

.luna-sombra {
  fill: var(--sombra-luna);
}

.luna-luz {
  fill: var(--luz-luna);
}

.luna-crateres {
  fill: var(--crater);
}

.luna-ceniza {
  fill: rgba(233, 227, 211, 0.025);
}

.luna-borde {
  fill: none;
  stroke: var(--linea);
  stroke-width: 0.6;
}

/* ---------- Índice de fases ---------- */
.fases {
  position: fixed;
  top: 50%;
  left: 2rem;
  z-index: 10;
  transform: translateY(-50%);
}

.fases ol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: none;
}

/* El hilo que une las lunas se va llenando con la noche */
.fases ol::before,
.fases ol::after {
  content: '';
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  left: calc(0.6rem + 10px);
  width: 1px;
  background: var(--linea);
}

.fases ol::after {
  bottom: auto;
  height: calc((100% - 2.2rem) * var(--fill, 0));
  background: var(--luz-luna);
}

.fases li {
  position: relative;
  z-index: 1; /* Las lunas por encima del hilo */
}

.fase {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--grafito);
  transition: color 0.3s ease;
}

.luna-fase {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--noche);
  border-radius: 50%;
}

.luna-fase .luna-borde {
  stroke: rgba(var(--ink-rgb), 0.35);
  stroke-width: 1;
}

.fase-nombre {
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.fase:hover,
.fase[aria-current] {
  color: var(--papel);
}

.fase:hover .fase-nombre,
.fase[aria-current] .fase-nombre {
  opacity: 1;
}

.fase[aria-current] .luna-fase {
  box-shadow: 0 0 0 4px var(--noche), 0 0 0 5px var(--luz-luna);
}

/* ---------- Columna de texto ---------- */
body[data-page="inicio"] main {
  padding-top: 0;
}

.cuaderno {
  width: min(100% - 2.5rem, 40rem);
  margin-left: clamp(12.5rem, 17vw, 16rem);
}

.cuaderno > section,
.cuaderno > header {
  padding-block: 7rem 2rem;
  scroll-margin-top: 4rem;
}

.titulo-seccion {
  margin-bottom: 1.25rem;
  font-family: var(--font-title);
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.texto-seccion {
  max-width: 34em;
  margin-bottom: 1rem;
  color: var(--white2);
}

.subtitulo {
  margin: 4.5rem 0 0.5rem;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--grafito);
}

/* ---------- Presentación ---------- */
.presentacion {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
}

.cuaderno > .presentacion {
  padding-block: 7rem 4.5rem;
}

.nombre {
  margin-left: -0.05em; /* La N alinea su trazo, no su caja, con el texto */
  margin-bottom: 1.75rem;
  font-family: var(--font-title);
  font-size: clamp(4.25rem, 11.5vw, 9.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.entradilla {
  max-width: 30em;
  margin-bottom: 2rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--white2);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.luna-hoy {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 3rem;
  font-size: 0.875rem;
  color: var(--grafito);
}

.luna-mini {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.luna-mini .luna-borde {
  stroke: rgba(var(--ink-rgb), 0.35);
  stroke-width: 1.5;
}

/* La fórmula dibuja siempre la luz a la derecha; menguando va a la izquierda */
.luna-menguando {
  transform: scaleX(-1);
}

/* El único momento con movimiento propio: el nombre sale de la oscuridad
   mientras la luna grande pasa de nueva a su primer hilo de luz */
@media (prefers-reduced-motion: no-preference) {
  .nombre {
    animation: amanece 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .entradilla,
  .acciones,
  .luna-hoy {
    animation: amanece 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
  }
}

@keyframes amanece {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}

/* ---------- Observaciones (proyectos) ---------- */
.obs-lista {
  margin-top: 2.5rem;
}

.obs {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--linea);
}

.obs-destacada {
  padding-block: 2.5rem;
}

.obs-destacada .estado {
  padding-top: 0.9rem;
}

.obs-titulo {
  margin-bottom: 0.4rem;
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.15;
}

.obs-destacada .obs-titulo {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  line-height: 1.05;
}

.obs-texto {
  margin-bottom: 0.75rem;
  color: var(--white2);
}

.obs-destacada .obs-texto {
  font-size: 1.125rem;
  color: var(--papel);
}

.obs-dentro {
  margin-bottom: 0.9rem;
  font-size: 0.9375rem;
  color: var(--white2);
}

.obs-dentro strong {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.15em;
  font-weight: 400;
  color: var(--papel);
}

.pila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin-bottom: 1.25rem;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--grafito);
  font-variant-numeric: tabular-nums;
}

.obs:not(.obs-destacada) .pila:last-child {
  margin-bottom: 0;
}

/* ---------- Retrato ---------- */
/* Lo primero y lo mayor de Sobre mí: una lámina del cuaderno, como la foto de un CV.
   Sale de la oscuridad al verse, la luz de la luna sigue al cursor y cuatro marcas
   de encuadre se abren alrededor, como en una placa de observación. */
.retrato {
  position: relative;
  margin: 1.75rem 0 2.75rem;
  perspective: 1100px;
}

/* El halo de luna detrás de la lámina */
.retrato::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(241, 228, 174, 0.2), transparent);
  opacity: 0.55;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

:root[data-theme="light"] .retrato::before {
  background: radial-gradient(closest-side, rgba(24, 33, 61, 0.1), transparent);
}

.retrato:hover::before {
  opacity: 1;
}

.retrato-marco {
  --mx: 62%;
  --my: 30%;
  position: relative;
  isolation: isolate;
  aspect-ratio: 5 / 4;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.retrato-marco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 24%;
}

/* La imagen se recorta en su lámina; las marcas de las esquinas quedan fuera */
.retrato-lamina {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
}

/* La luz de la luna: un foco suave que sigue al cursor */
.retrato-luz {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(251, 247, 234, 0.3), transparent 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Marcas de encuadre en las cuatro esquinas */
.esquina {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border: 0 solid var(--luz-luna);
  opacity: 0.7;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}

.esquina-nw { top: -0.75rem; left: -0.75rem; border-width: 1px 0 0 1px; }
.esquina-ne { top: -0.75rem; right: -0.75rem; border-width: 1px 1px 0 0; }
.esquina-sw { bottom: -0.75rem; left: -0.75rem; border-width: 0 0 1px 1px; }
.esquina-se { right: -0.75rem; bottom: -0.75rem; border-width: 0 1px 1px 0; }

.retrato-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 1rem;
  margin-top: 1.5rem;
}

.retrato-nombre {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--papel);
}

.retrato-datos {
  font-size: 0.875rem;
  color: var(--grafito);
}

/* Antes de verse, la foto es solo una sombra; al llegar amanece despacio */
.retrato:not(.aparecido) img {
  filter: brightness(0.12) blur(10px);
  transform: scale(1.08);
}

.retrato:not(.aparecido) .esquina {
  opacity: 0;
}

.retrato.aparecido img {
  transition: filter 1.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .retrato-marco {
    cursor: crosshair;
  }

  /* En reposo, apagada como bajo la luna; con el cursor, recupera todo el color */
  .retrato.aparecido img {
    filter: grayscale(0.5) brightness(0.9) contrast(1.05);
  }

  .retrato.aparecido:hover img {
    filter: none;
    transform: scale(1.04);
    transition-duration: 0.7s;
  }

  .retrato:hover .retrato-luz,
  .retrato:hover .esquina {
    opacity: 1;
  }

  .retrato:hover .esquina-nw { transform: translate(-0.4rem, -0.4rem); }
  .retrato:hover .esquina-ne { transform: translate(0.4rem, -0.4rem); }
  .retrato:hover .esquina-sw { transform: translate(-0.4rem, 0.4rem); }
  .retrato:hover .esquina-se { transform: translate(0.4rem, 0.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .retrato-marco,
  .retrato-marco img,
  .retrato-luz,
  .esquina,
  .retrato::before {
    transition: none !important;
  }

  .retrato:not(.aparecido) img {
    filter: none;
    transform: none;
  }
}

@media (max-width: 600px) {
  .retrato-marco {
    aspect-ratio: 4 / 5;
  }

  .retrato-marco img {
    object-position: 64% 22%;
  }

  .esquina-nw { top: -0.5rem; left: -0.5rem; }
  .esquina-ne { top: -0.5rem; right: -0.5rem; }
  .esquina-sw { bottom: -0.5rem; left: -0.5rem; }
  .esquina-se { right: -0.5rem; bottom: -0.5rem; }
}

/* ---------- Notas (sobre mí y herramientas) ---------- */
.notas {
  margin-top: 2.25rem;
}

.nota {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--linea);
}

.nota dt {
  font-size: 0.875rem;
  color: var(--grafito);
  padding-top: 0.15rem;
}

.nota dd {
  color: var(--papel);
}

.herramientas em {
  font-family: var(--font-title);
  font-size: 1.15em;
  color: var(--white2);
}

/* ---------- Contacto ---------- */
.cuaderno > #contacto {
  padding-bottom: 8rem;
}

.titulo-contacto {
  font-size: clamp(3.5rem, 9vw, 6.5rem);
}

.correo {
  display: inline-block;
  margin: 1.25rem 0 1.75rem;
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 4.6vw, 3rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(var(--ink-rgb), 0.35);
  transition: text-decoration-color 0.25s ease;
}

.correo:hover {
  text-decoration-color: var(--luz-luna);
}

.aviso {
  min-height: 1.5em;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--grafito);
}

.redes {
  margin-top: 1.5rem;
  color: var(--white2);
}

/* ---------- Pantallas medianas: la luna se aparta del texto ---------- */
@media (max-width: 1280px) {
  .luna-grande {
    right: -16vw;
    width: min(70vh, 46vw);
  }
}

/* ---------- Móvil y tableta ---------- */
@media (max-width: 1000px) {
  .cuaderno {
    width: auto;
    margin-inline: 1.5rem;
  }

  .luna-grande {
    top: 4.5rem;
    right: -22vw;
    width: 70vw;
    opacity: 0.38;
    transform: none;
  }

  .presentacion {
    min-height: 92svh;
  }

  /* El índice baja a una barra: las cinco lunas y el nombre de donde estás */
  .fases {
    top: auto;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.4rem;
    background: rgba(var(--bg-rgb), 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--linea);
    border-radius: 999px;
  }

  .fases ol {
    flex-direction: row;
    gap: 0;
  }

  .fases ol::before,
  .fases ol::after {
    display: none;
  }

  .fase {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }

  .fase-nombre {
    display: none;
  }

  .fase[aria-current] .fase-nombre {
    display: inline;
    white-space: nowrap;
  }

  .fase[aria-current] .luna-fase {
    box-shadow: none;
  }

  body[data-page="inicio"] .footer {
    padding-bottom: 5rem; /* Que la barra de fases no tape el pie */
  }
}

@media (max-width: 600px) {
  .obs,
  .nota {
    grid-template-columns: 1fr;
  }

  .estado,
  .obs-destacada .estado {
    padding: 0 0 0.6rem;
  }

  .nota dt {
    padding: 0 0 0.2rem;
  }

  .cuaderno > section {
    padding-top: 5rem;
  }
}

/* ---------- La puerta a los poemas (la palabra entre llaves en contenido-inicio.js) ---------- */
/* La misma letra y el mismo color que el texto: solo una mancha de tinta justo después,
   como cuando la pluma se queda apoyada. Sin subrayado ni enlace a la vista. */
.puerta {
  position: relative;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.puerta::after {
  content: '';
  display: inline-block;
  width: 0.34em;
  height: 0.3em;
  margin-left: 0.14em;
  background: currentColor;
  border-radius: 58% 42% 55% 45% / 46% 60% 40% 54%;
  transform: translateY(0.02em) rotate(-12deg);
  transform-origin: 30% 60%;
}

.puerta:focus-visible {
  outline: 2px solid var(--luz-luna);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .puerta::after {
    transition: transform 0.35s ease;
  }
}

@media (hover: hover) {
  .puerta:hover::after,
  .puerta-pulsada::after {
    transform: translateY(0.02em) rotate(-12deg) scale(1.45);
  }
}

.puerta-pulsada::after {
  transform: translateY(0.02em) rotate(-12deg) scale(1.45);
}

/* La tinta: crece desde la palabra y deja la pantalla de color noche */
.tinta-puerta {
  position: fixed;
  z-index: 3000;
  border-radius: 50%;
  background: var(--noche);
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.22), 0 0 60px rgba(var(--ink-rgb), 0.1);
  pointer-events: none;
  will-change: transform;
}

/* Con prefers-reduced-motion no hay tinta que se extienda: solo un fundido */
.tinta-puerta-fundido {
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
}