/* ============================================================
   Página de la ruta Pativilca–Huaraz
   Hereda la paleta y la tipografía de estilos.css
   ============================================================ */

/* ── Portada ────────────────────────────────────────────── */

.rutaHero {
  padding: 4.5rem 0 3.5rem;
  background: linear-gradient(172deg, #FFE9BE 0%, var(--crema) 70%);
}
.rutaHero__titulo {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  letter-spacing: -.025em; line-height: 1.12; margin: 0 0 1.2rem;
}
.rutaHero__titulo em {
  font-style: normal;
  background: linear-gradient(105deg, var(--terracota), var(--ambar));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rutaHero__bajada {
  font-size: 1.1rem; color: var(--tinta-suave); max-width: 40rem; margin-bottom: 2.2rem;
}

.rutaHero__cifras { display: flex; flex-wrap: wrap; gap: 2.6rem; }
.cifra { display: flex; flex-direction: column; }
.cifra strong {
  font-family: var(--serif); font-size: 2.1rem; line-height: 1;
  color: var(--terracota); letter-spacing: -.02em;
}
.cifra span {
  font-size: .8rem; color: var(--tinta-suave); margin-top: .3rem;
  letter-spacing: .03em;
}

/* ── Perfil ─────────────────────────────────────────────── */

.perfil { margin: 0 0 1.8rem; }
.perfil__lienzo {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .6rem .3rem .2rem; box-shadow: var(--sombra);
  overflow-x: auto;
}
.perfil__lienzo svg { display: block; width: 100%; min-width: 620px; height: auto; }
.perfil__pie {
  font-size: .78rem; color: var(--tinta-suave); font-style: italic;
  margin-top: .7rem; padding-left: .2rem;
}

.g-guia { stroke: rgba(43,33,24,.10); stroke-width: 1; stroke-dasharray: 3 5; }
.g-etiquetaY {
  fill: #A0917F; font-size: 12px; text-anchor: end;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.g-linea { fill: none; stroke: var(--ambar); stroke-width: 3; stroke-linejoin: round; }

.g-parada { cursor: pointer; outline: none; }
.g-tallo { stroke: rgba(43,33,24,.16); stroke-width: 1; stroke-dasharray: 2 4; }
.g-halo { fill: var(--ambar); opacity: .18; transition: opacity .2s, r .2s; }
.g-punto { fill: var(--ambar); stroke: #fff; stroke-width: 2; transition: fill .2s; }
.g-nombre {
  fill: var(--tinta); font-size: 14px; text-anchor: middle; font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.g-km {
  fill: #A0917F; font-size: 12px; text-anchor: middle;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.g-estrella { fill: var(--ambar); font-size: 15px; text-anchor: middle; }

.g-parada:hover .g-halo,
.g-parada:focus-visible .g-halo { opacity: .34; }
.g-parada:focus-visible .g-punto { stroke: var(--terracota); }

.g-parada--aqui .g-punto { fill: var(--terracota); }
.g-parada--aqui .g-halo  { fill: var(--terracota); opacity: .22; }
.g-parada--aqui .g-nombre { fill: var(--terracota); font-size: 16px; }
.g-parada--aqui .g-tallo { stroke: rgba(190,84,48,.4); stroke-dasharray: none; }

.g-parada--activa .g-halo { opacity: .42; }
.g-parada--activa .g-punto { stroke-width: 3; }

/* ── Detalle ────────────────────────────────────────────── */

.detalle {
  background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--ambar);
  border-radius: var(--radio); padding: 1.6rem 1.8rem; box-shadow: var(--sombra);
}
.detalle--aqui { border-left-color: var(--terracota); background: linear-gradient(160deg,#fff,var(--crema)); }

.detalle__cabecera {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linea);
}
.detalle__sub {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracota); font-weight: 700; margin: 0 0 .2rem;
}
.detalle__nombre { font-size: 1.55rem; margin: 0; }

.detalle__datos { display: flex; gap: 1.6rem; }
.detalle__datos span {
  display: flex; flex-direction: column;
  font-size: .74rem; color: var(--tinta-suave);
}
.detalle__datos strong {
  font-family: var(--serif); font-size: 1.25rem; color: var(--tinta);
  line-height: 1.1;
}

.detalle__texto { margin: 0; color: var(--tinta-suave); font-size: 1rem; }
.detalle__consejo {
  margin: 1rem 0 0; padding: .85rem 1.1rem;
  background: var(--crema-hondo); border-radius: 9px;
  font-size: .93rem; color: var(--tinta);
}
.detalle__consejo::before { content: "⚠ "; color: var(--terracota); }
.detalle__enlace {
  display: inline-block; margin-top: 1.1rem;
  color: var(--terracota); font-weight: 600; font-size: .95rem;
  text-decoration: none;
}
.detalle__enlace:hover { text-decoration: underline; }

/* ── Los dos ríos ───────────────────────────────────────── */

.seccion--rios { background: var(--crema-hondo); }

.rios {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center;
}
.rio {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.7rem 1.6rem; box-shadow: var(--sombra);
}
.rio h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.rio__tramo {
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; margin-bottom: .8rem;
}
.rio--sube .rio__tramo { color: var(--ambar); }
.rio--baja .rio__tramo { color: var(--valle); }
.rio p:last-child { margin: 0; color: var(--tinta-suave); font-size: .94rem; }

.rios__divisoria { text-align: center; padding: 0 .5rem; }
.rios__divisoria span {
  display: block; font-family: var(--serif); font-size: 1.5rem;
  color: var(--terracota); line-height: 1;
}
.rios__divisoria p {
  margin: .4rem 0 0; font-size: .74rem; color: var(--tinta-suave);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}

@media (max-width: 820px) {
  .rios { grid-template-columns: 1fr; gap: 1.2rem; }
  .rios__divisoria { padding: .4rem 0; }
}

/* ── Antes del desvío ───────────────────────────────────── */

.antes {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.hito2 {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.6rem 1.5rem; box-shadow: var(--sombra);
  transition: transform .2s, box-shadow .2s;
}
.hito2:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.hito2--destacado { border-color: rgba(224,133,38,.4); }
.hito2__etiqueta {
  display: inline-block; margin-bottom: .7rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: #fff; background: linear-gradient(150deg, var(--sol), var(--ambar));
  padding: .26rem .7rem; border-radius: 999px;
}
.hito2__nombre { font-size: 1.2rem; margin-bottom: .2rem; }
.hito2__donde {
  font-size: .78rem; color: var(--tinta-suave); margin-bottom: .8rem;
}
.hito2__texto { font-size: .93rem; color: var(--tinta-suave); margin: 0; }

/* ── Altura ─────────────────────────────────────────────── */

.altura {
  background: var(--tinta); color: var(--crema);
  border-radius: 22px; padding: 3rem 2.6rem;
  position: relative; overflow: hidden;
}
.altura::after {
  content: ""; position: absolute; top: -55%; right: -10%;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,196,90,.2), transparent 68%);
}
.altura > * { position: relative; z-index: 1; }
.altura__titulo {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.altura p { color: rgba(253,247,236,.78); max-width: 44rem; }
.altura__lista { margin: 1.4rem 0 0; padding: 0; list-style: none; max-width: 44rem; }
.altura__lista li {
  padding: .6rem 0 .6rem 1.6rem; position: relative;
  color: rgba(253,247,236,.8); font-size: .96rem;
  border-top: 1px solid rgba(253,247,236,.12);
}
.altura__lista li:first-child { border-top: none; }
.altura__lista li::before {
  content: "→"; position: absolute; left: 0; color: var(--sol);
}
.altura__lista strong { color: var(--crema); }

/* ── Cierre ─────────────────────────────────────────────── */

.cierre { max-width: 44rem; }
.cierre p { color: var(--tinta-suave); font-size: 1.04rem; margin-bottom: 1.8rem; }

@media (max-width: 700px) {
  .rutaHero { padding: 3rem 0 2.5rem; }
  .rutaHero__cifras { gap: 1.6rem; }
  .cifra strong { font-size: 1.7rem; }
  .detalle { padding: 1.3rem 1.2rem; }
  .altura { padding: 2.2rem 1.4rem; }
}