/* fernandezbadia.es — cuaderno visual de viajes
   Paleta: Noche (fondo), Bronce (acento cálido), Musgo (acento verde),
   Arena (texto secundario cálido), Niebla (texto principal claro), Carbón (texto oscuro) */

:root {
  --noche: #161D2B;
  --bronce: #C08A3E;
  --musgo: #4F6B58;
  --musgo-claro: #8FAE9C;
  --arena: #E7DCC5;
  --niebla: #F3EFE6;
  --carbon: #201C16;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  background: var(--noche);
  color: var(--niebla);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Textura de fondo: papel oscuro hecho a mano, generada a medida (Nano Banana).
   Se aplica a pantalla completa (no como patrón repetido: tiene un viñeteado
   natural que no encajaría bien en modo "tile") y muy atenuada para no restar
   legibilidad al contenido. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image: url("../assets/textura-fondo.jpg");
  background-size: cover;
  background-position: center;
}

/* Todo el contenido real vive por encima del grano de fondo */
main, .footer, .lightbox { position: relative; z-index: 1; }

img { max-width: 100%; }

a { color: var(--bronce); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--bronce);
  outline-offset: 3px;
}

/* Masthead: fija arriba al hacer scroll (position: sticky). z-index más alto
   que el resto del contenido (que va a 1) para que no se le monte nada por
   encima al desplazarse. Lleva la misma textura que el resto de la página
   (con el mismo velo oscuro encima para que se vea igual de atenuada) y con
   "background-attachment: fixed" para que encaje sin costuras con el fondo
   fijo del body al hacer scroll, en vez de un color plano. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem);
  background-color: var(--noche);
  background-image:
    linear-gradient(rgba(22, 29, 43, 0.65), rgba(22, 29, 43, 0.65)),
    url("../assets/textura-fondo.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  border-bottom: 1px solid rgba(243, 239, 230, 0.08);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.masthead__logo {
  height: 3.1rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@media (min-width: 561px) {
  .masthead__logo {
    height: 4.5rem;
  }
}

/* Etiqueta con aire de matasellos/sello postal: borde discontinuo + relieve */
.masthead__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--noche);
  background: var(--bronce);
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  border: 1px dashed rgba(22, 29, 43, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 3px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
  white-space: nowrap;
}

.masthead__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--niebla);
  margin: 0;
}

.masthead nav {
  display: flex;
  gap: clamp(1rem, 3vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.masthead nav a { color: var(--arena); position: relative; }
.masthead nav a[aria-current="page"] { color: var(--bronce); }
.masthead nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--bronce);
  border-radius: 2px;
}

@media (max-width: 560px) {
  .masthead { flex-direction: column; align-items: flex-start; }
}

/* Hero */
.hero {
  padding: clamp(3rem, 10vw, 7rem) clamp(1.25rem, 5vw, 4rem) clamp(2rem, 6vw, 3.5rem);
  max-width: 48rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--musgo-claro);
  margin: 0 0 1.1rem;
  opacity: 0;
  animation: fade-up 0.7s ease-out 0.05s forwards;
}

.hero__eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--musgo-claro);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 6.5vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: var(--niebla);
  opacity: 0;
  animation: fade-up 0.7s ease-out 0.2s forwards;
}

.hero__subtitle {
  font-size: 1.08rem;
  color: var(--arena);
  max-width: 40ch;
  margin: 0;
  opacity: 0;
  animation: fade-up 0.7s ease-out 0.35s forwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Sections */
.section {
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem) 3.5rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--niebla);
  margin: 0 0 1.25rem;
}

/* Empty state */
.empty-state {
  border: 1.5px dashed var(--bronce);
  border-radius: 6px;
  padding: clamp(2rem, 6vw, 3.25rem);
  text-align: center;
  background: rgba(192, 138, 62, 0.04);
  transition: transform 0.3s ease, background 0.3s ease;
  max-width: 40rem;
}

.empty-state:hover {
  transform: translateY(-2px);
  background: rgba(192, 138, 62, 0.07);
}

.empty-state__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 1rem;
  color: var(--bronce);
}

.empty-state__heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--niebla);
  margin: 0 0 0.5rem;
}

.empty-state__text {
  color: var(--arena);
  font-size: 0.95rem;
  max-width: 34ch;
  margin: 0 auto;
}

/* Route / "El recorrido" */
.route {
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem) 4rem;
}

.route__text {
  color: var(--arena);
  max-width: 44ch;
  margin: 0 0 2rem;
}

/* Lista de lugares del recorrido: fluye y se envuelve sola en varias líneas
   según haga falta (nada de scroll horizontal ni puntos amontonados, y sin
   ancho artificial: usa todo el disponible en la sección), pero con algo del
   "teatro" que tenía la línea SVG animada de antes: entrada escalonada,
   punto con halo, y la línea discontinua fluyendo sin parar. */
.ruta-lugares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 1.5rem;
}

/* La animación de entrada solo se activa cuando la sección entra en
   pantalla (clase añadida por IntersectionObserver en site.js). Si no se
   activara así, para cuando el usuario hace scroll hasta aquí la animación
   ya habría terminado sin que se llegue a ver. */
.ruta-lugar {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--musgo-claro);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
}

.ruta-lugares.en-vista .ruta-lugar {
  animation: fade-up 0.6s ease-out forwards;
  animation-delay: var(--retraso, 0s);
}

.ruta-lugar::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--noche);
  border: 2px solid var(--bronce);
  box-shadow: 0 0 0 4px rgba(192, 138, 62, 0.16);
  margin-right: 0.65rem;
  flex-shrink: 0;
}

/* Conector entre lugares: SVG con stroke-dasharray/dashoffset (la misma
   técnica que usaba la línea original), no un degradado CSS animado — los
   degradados repetidos con background-position se notan al reiniciar el
   bucle; un trazo SVG con dashoffset es perfectamente cíclico. */
.ruta-conector {
  display: inline-block;
  width: 2.75rem;
  height: 8px;
  margin: 0 1rem;
  flex-shrink: 0;
  overflow: visible;
  opacity: 0;
}

.ruta-lugares.en-vista .ruta-conector {
  animation: fade-up 0.6s ease-out forwards;
  animation-delay: var(--retraso, 0s);
}

.ruta-conector line {
  stroke: var(--musgo-claro);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.ruta-lugares.en-vista .ruta-conector line {
  animation: fluir-linea 1.4s linear infinite;
}

@keyframes fluir-linea {
  to { stroke-dashoffset: -14; }
}

/* Gallery (para cuando ya haya fotos) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}

/* Miniaturas más grandes y con más aire en la portada */
.gallery--home {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: var(--carbon);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
}

.gallery__item img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.5s ease;
}

.gallery__item:hover img { transform: scale(1.04); }

.gallery__stamp {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  background: rgba(22, 29, 43, 0.85);
  color: var(--arena);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  border: 1px solid var(--bronce);
  pointer-events: none;
}

/* Evita que la fecha (con guiones) se parta en dos líneas */
.fecha-nowrap {
  white-space: nowrap;
}

.gallery--home .gallery__stamp {
  font-size: 0.74rem;
  padding: 0.35rem 0.6rem;
}

/* Texto generado (el mismo que se usa para redes sociales), revelado al pasar
   el cursor por encima de la miniatura: cubre toda la foto y centra el texto
   completo (sin recortar), con scroll propio si no cupiera entero. */
.gallery__caption {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1.25rem;
  background: rgba(22, 29, 43, 0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: var(--niebla);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-within .gallery__caption {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__caption { transition: none; }
}

/* Miniaturas del diario: un poco más grandes que el tamaño base */
.gallery--diario {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Línea de tiempo vertical del diario: fecha a la izquierda, fotos del día a la derecha */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 126px;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 2px;
  background: rgba(143, 174, 156, 0.3);
}

.timeline__entry {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 2rem;
  align-items: start;
}

.timeline__marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-top: 0.2rem;
}

.timeline__day {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--niebla);
}

.timeline__monthyear {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--musgo-claro);
  margin-top: 0.3rem;
}

.timeline__dot {
  position: absolute;
  top: 0.55rem;
  left: calc(100% + 10px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--noche);
  border: 2px solid var(--bronce);
}

@media (max-width: 700px) {
  .timeline::before { display: none; }

  .timeline__entry {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .timeline__marker {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    text-align: left;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed rgba(231, 220, 197, 0.25);
  }

  .timeline__dot { display: none; }
}

/* Contenido tipo texto (sobre mí) */
.content {
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem) 4rem;
  max-width: 42rem;
}

.content p {
  color: var(--arena);
  font-size: 1.02rem;
}

.content strong { color: var(--niebla); }

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.social-links a {
  color: var(--bronce);
}

.social-links a::after {
  content: " ↗";
  font-size: 0.75em;
}

/* Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--musgo-claro);
  border-top: 1px solid rgba(243, 239, 230, 0.08);
}

.footer__links {
  display: flex;
  gap: 1.25rem;
}

.footer__cookies-link {
  font-family: inherit;
  font-size: inherit;
  color: var(--musgo-claro);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.footer__cookies-link:hover,
.footer a:hover {
  text-decoration: underline;
}

/* Visor a pantalla completa (lightbox) */
/* El desenfoque va en .lightbox__backdrop, NO aquí: un filter/backdrop-filter
   en este contenedor convertiría al botón de cerrar (position: fixed) en un
   elemento posicionado respecto a .lightbox en vez de respecto a la pantalla
   en algunos navegadores móviles, rompiendo el cierre con fotos altas. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  /* Red de seguridad: si aun reservando sitio para la leyenda el conjunto no
     cupiera en pantallas muy bajas, esto permite hacer scroll en vez de
     recortar el sello sin posibilidad de verlo. */
  overflow-y: auto;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(22, 29, 43, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  transform: scale(0.94) translateY(8px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox.is-open .lightbox__figure {
  transform: scale(1) translateY(0);
}

.lightbox__image {
  display: block;
  max-width: min(92vw, 1500px);
  /* Deja sitio real para la leyenda (historia + sello) que va debajo: sin
     esto, en fotos verticales la imagen podía ocupar tanto alto que el sello
     quedaba fuera de la pantalla, sin forma de verlo. */
  max-height: min(78vh, calc(100vh - 11rem));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: min(92vw, 1500px);
  text-align: center;
}

.lightbox__historia {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--niebla);
  max-width: 60ch;
  /* Tope de seguridad para textos generados inusualmente largos */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--arena);
  background: rgba(22, 29, 43, 0.7);
  border: 1px solid var(--bronce);
  border-radius: 2px;
  padding: 0.4rem 0.7rem;
}

.lightbox__close {
  position: fixed;
  top: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(231, 220, 197, 0.35);
  border-radius: 50%;
  background: rgba(22, 29, 43, 0.7);
  color: var(--niebla);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  /* Área táctil real de 44px+ aunque el círculo visible sea algo más pequeño */
  touch-action: manipulation;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox__close:hover {
  background: var(--bronce);
  color: var(--noche);
  transform: rotate(90deg);
}

/* Bloqueo de scroll del fondo mientras el visor está abierto. El JS añade
   además "top: -Npx" con el desplazamiento que tenía la página, para que en
   iOS Safari no se recoloque el fondo (y con él, los elementos "fixed") al
   abrir/cerrar con fotos que obligaron a hacer scroll para llegar a ellas. */
body.lightbox-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}


/* Banner de consentimiento de cookies (RGPD/LSSI) */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
  background: var(--noche);
  border-top: 1px solid var(--bronce);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.cookie-banner.is-open {
  transform: translateY(0);
}

.cookie-banner__text {
  margin: 0;
  max-width: 56ch;
  color: var(--arena);
  font-size: 0.92rem;
}

.cookie-banner__text a {
  color: var(--bronce);
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-banner__button {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.cookie-banner__button--rechazar {
  background: transparent;
  color: var(--arena);
  border: 1px solid rgba(231, 220, 197, 0.4);
}

.cookie-banner__button--rechazar:hover {
  border-color: var(--niebla);
  color: var(--niebla);
}

.cookie-banner__button--aceptar {
  background: var(--bronce);
  color: var(--noche);
  border: 1px solid var(--bronce);
  font-weight: 700;
}

.cookie-banner__button--aceptar:hover {
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__button { flex: 1; text-align: center; }
}