/* Jonnathan Ortiz: diseño y fotografía.
   Concepto: la subida al refugio. Un mapa topográfico de fondo se acerca a la cumbre
   en cada sección y el altímetro sube hasta el Refugio Whymper (5 000 m). */

:root {
  --neblina: #E7ECE9;
  --nieve: #F8FAF8;
  --roca: #1F2D28;
  --roca-suave: #4A5A54;
  --musgo: #557457;
  --frambuesa: #C93D63;
  --curva: #C3CEC8;
  --curva-indice: #A9B8B0;
  --casquete: #FFFFFF;
  --marco: #D3DBD6;

  --fuente-titulo: 'Gloock', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --fuente-texto: 'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* escala tipográfica (razón ~1.25) */
  --t-pie: 0.8125rem;
  --t-texto: 1rem;
  --t-entradilla: 1.1875rem;
  --t-titulo: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --t-nombre: clamp(2.75rem, 1.8rem + 4.2vw, 5rem);

  --ease-suave: cubic-bezier(.22, .61, .36, 1);
  --dur-panel: 480ms;
  --dur-relieve: 1300ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --neblina: #151E1B;
    --nieve: #1D2925;
    --roca: #E3EAE6;
    --roca-suave: #A9B7B0;
    --musgo: #8DAE8A;
    --frambuesa: #EE6E8F;
    --curva: #26332E;
    --curva-indice: #34443E;
    --casquete: #2B3A35;
    --marco: #2E3C37;
    color-scheme: dark;
  }
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--neblina);
  color: var(--roca);
  font-family: var(--fuente-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

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

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--frambuesa);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Relieve topográfico ---------- */

.relieve {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* las curvas se aclaran detrás del texto para no competir con la lectura */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 40%, #000 64%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 40%, #000 64%);
}

/* el acercamiento se hace hacia la cima (coordenadas del mapa, no de la pantalla) */
#relieveCurvas {
  transform-box: view-box;
  transform-origin: 1152px 430px;
  transition: transform var(--dur-relieve) var(--ease-suave);
}

.curva {
  fill: none;
  stroke: var(--curva);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.curva-indice {
  stroke: var(--curva-indice);
  stroke-width: 1.6;
}

.curva-nieve {
  fill: var(--casquete);
  fill-opacity: .55;
}

.curva-cota {
  fill: var(--curva-indice);
  font-family: var(--fuente-texto);
  font-size: 11px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* dibujo inicial de las curvas: el único movimiento que no dispara el usuario */
.relieve.is-dibujando .curva {
  stroke-dasharray: var(--largo) var(--largo);
  stroke-dashoffset: var(--largo);
  animation: trazar 1.8s var(--ease-suave) forwards;
  animation-delay: var(--retardo, 0ms);
}

@keyframes trazar {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Estructura de pantalla ---------- */

.pagina {
  position: relative;
  z-index: 1;
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "cabecera cabecera"
    "escena ruta"
    "pie pie";
  padding:
    max(1.5rem, env(safe-area-inset-top, 0px))
    clamp(1.25rem, 4vw, 3.5rem)
    max(1.25rem, env(safe-area-inset-bottom, 0px));
  column-gap: 2rem;
}

.cabecera {
  grid-area: cabecera;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.firma {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}

.firma-iniciales {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--roca);
  color: var(--neblina);
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  letter-spacing: .02em;
}

.firma-nombre {
  font-weight: 600;
  font-size: .95rem;
}

.altimetro {
  margin: 0;
  display: grid;
  justify-items: end;
  line-height: 1.2;
  text-align: right;
}

.altimetro-cifra {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.altimetro-lugar {
  font-size: var(--t-pie);
  color: var(--roca-suave);
}

/* ---------- Escena y paneles ---------- */

.escena {
  grid-area: escena;
  display: grid;
  align-items: center;
  min-height: 0;
}

.panel {
  grid-area: 1 / 1;
  max-width: 36rem;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--curva-indice) transparent;
  padding: 1.5rem .25rem 1.5rem 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-panel) var(--ease-suave),
    transform var(--dur-panel) var(--ease-suave);
}

.panel.is-activo {
  opacity: 1;
  transform: none;
}

.panel.is-saliendo {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.titulo-nombre,
.titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.titulo-nombre {
  font-size: var(--t-nombre);
}

.titulo {
  font-size: var(--t-titulo);
}

.entradilla {
  margin: 1rem 0 0;
  font-size: var(--t-entradilla);
  line-height: 1.45;
  max-width: 32ch;
  text-wrap: pretty;
}

.texto {
  margin: .9rem 0 0;
  color: var(--roca-suave);
  max-width: 44ch;
  text-wrap: pretty;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid var(--roca);
  font: 600 .95rem/1.2 var(--fuente-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.boton-principal {
  background: var(--roca);
  color: var(--neblina);
}

.boton-principal:hover {
  background: var(--frambuesa);
  border-color: var(--frambuesa);
  color: #fff;
}

.boton-secundario {
  background: transparent;
  color: var(--roca);
}

.boton-secundario:hover {
  border-color: var(--frambuesa);
  color: var(--frambuesa);
}

#contacto .acciones {
  margin-top: 1.5rem;
}

/* retrato con marcas de visor de cámara */
.retrato {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 0 1.5rem;
  padding: .45rem;
}

.retrato-visor {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--roca), var(--roca)) top left / 12px 1.5px no-repeat,
    linear-gradient(var(--roca), var(--roca)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--roca), var(--roca)) top right / 12px 1.5px no-repeat,
    linear-gradient(var(--roca), var(--roca)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--roca), var(--roca)) bottom left / 12px 1.5px no-repeat,
    linear-gradient(var(--roca), var(--roca)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--roca), var(--roca)) bottom right / 12px 1.5px no-repeat,
    linear-gradient(var(--roca), var(--roca)) bottom right / 1.5px 12px no-repeat;
}

.retrato-foto,
.retrato-iniciales {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.retrato-foto {
  object-fit: cover;
}

.retrato-iniciales {
  display: grid;
  place-items: center;
  background: var(--nieve);
  color: var(--musgo);
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
}

/* lista de lo que ofrece */
.oferta {
  margin: 1.5rem 0 0;
  display: grid;
  gap: .85rem;
}

.oferta-item {
  display: grid;
  grid-template-columns: .9rem minmax(0, 1fr);
  column-gap: .75rem;
}

.oferta-item::before {
  content: "";
  grid-row: span 2;
  width: .7rem;
  height: .7rem;
  margin-top: .42rem;
  border-radius: 50%;
  border: 1.5px solid var(--musgo);
  box-shadow: 0 0 0 3px var(--neblina), 0 0 0 4.5px var(--musgo);
  transform: scale(.62);
}

.oferta dt {
  font-weight: 600;
}

.oferta dd {
  margin: .1rem 0 0;
  color: var(--roca-suave);
  max-width: 46ch;
}

/* galerías: marcos con la foto o, mientras no haya, un espacio en blanco con su pie */
.galeria {
  display: grid;
  gap: .6rem;
  margin-top: 1.5rem;
}

.galeria-diseno {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.galeria-fotos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marco {
  margin: 0;
  display: grid;
  gap: .35rem;
}

.marco-imagen {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--nieve);
  border: 1px solid var(--marco);
}

.galeria-diseno .marco-imagen {
  aspect-ratio: 1;
}

.marco-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marco-vacio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--marco);
  box-shadow: 0 0 0 8px var(--nieve), 0 0 0 9px var(--marco);
  transform: translate(-50%, -50%);
}

.marco figcaption {
  font-size: var(--t-pie);
  color: var(--roca-suave);
  line-height: 1.3;
}

/* contacto */
.redes {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .25rem;
  max-width: 26rem;
}

.redes a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--marco);
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
}

.redes a:hover {
  color: var(--frambuesa);
  border-color: var(--frambuesa);
}

.redes-medio {
  font-weight: 600;
}

.redes-usuario {
  color: var(--roca-suave);
  font-size: .9rem;
  overflow-wrap: anywhere;
  text-align: right;
}

/* ---------- Ruta de ascenso (navegación) ---------- */

.ruta {
  grid-area: ruta;
  align-self: center;
}

.ruta-lista {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 2.25rem;
  padding: .25rem 0;
}

/* la línea del sendero que une las paradas */
.ruta-lista::before {
  content: "";
  position: absolute;
  top: .9rem;
  bottom: .9rem;
  right: .55rem;
  border-right: 1.5px dashed var(--curva-indice);
}

.ruta-parada {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .85rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--roca-suave);
  font: 500 .95rem/1.2 var(--fuente-texto);
  cursor: pointer;
  text-align: right;
  transition: color .3s ease;
}

.ruta-parada:hover {
  color: var(--roca);
}

.ruta-punto {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--curva-indice);
  background: var(--neblina);
  transition: border-color .35s ease, background-color .35s ease, transform .35s var(--ease-suave);
}

.ruta-parada[aria-selected="true"] {
  color: var(--roca);
  font-weight: 600;
}

.ruta-parada[aria-selected="true"] .ruta-punto {
  border-color: var(--frambuesa);
  background: var(--frambuesa);
  transform: scale(1.15);
}

.ruta-parada.is-recorrida .ruta-punto {
  border-color: var(--musgo);
  background: var(--musgo);
}

/* ---------- Pie ---------- */

.pie {
  grid-area: pie;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-pie);
  color: var(--roca-suave);
}

/* ---------- Pantallas pequeñas: la ruta pasa a una barra inferior ---------- */

@media (max-width: 720px) {
  .pagina {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "cabecera"
      "escena"
      "ruta";
    padding:
      max(1rem, env(safe-area-inset-top, 0px))
      1rem
      max(.75rem, env(safe-area-inset-bottom, 0px));
  }

  .pie {
    display: none;
  }

  /* en vertical el texto ocupa la parte de arriba y la cima se ve abajo */
  .relieve {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 52%, #000 78%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 52%, #000 78%);
  }

  .escena {
    align-items: start;
  }

  .panel {
    max-width: none;
    padding: 1.25rem 0 1.5rem;
  }

  .ruta {
    align-self: end;
    padding-top: .5rem;
  }

  .ruta-lista {
    flex-direction: row;
    justify-content: space-between;
    gap: .25rem;
  }

  .ruta-lista::before {
    top: .82rem;
    bottom: auto;
    left: 1.6rem;
    right: 1.6rem;
    border-right: 0;
    border-top: 1.5px dashed var(--curva-indice);
  }

  .ruta-parada {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: .35rem;
    font-size: .78rem;
    text-align: center;
    padding: .2rem 0;
  }

  .altimetro-cifra {
    font-size: 1.3rem;
  }

  .firma-nombre {
    font-size: .9rem;
  }

  .galeria-fotos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .galeria-diseno .marco-imagen,
  .galeria-fotos .marco-imagen {
    aspect-ratio: 4 / 3;
  }

  .retrato {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
  }
}

@media (max-height: 640px) and (min-width: 721px) {
  .retrato {
    display: none;
  }

  .ruta-lista {
    gap: 1.4rem;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}