/* ============================================================
   RUTAS — Estilos del index (portada)
   Alterna bandas oscuras (territorio) y claras (ficha técnica).
   ============================================================ */

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:170px var(--gutter) var(--sp-5);
  background:var(--basalt); color:var(--signal);
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 72% 58% at 22% 24%, rgba(143,216,224,0.11), transparent 62%),
    radial-gradient(ellipse 62% 52% at 84% 88%, rgba(232,162,77,0.11), transparent 62%);
}
.hero__contours{ position:absolute; inset:0; width:100%; height:100%; }
.hero__contours path{ fill:none; stroke:var(--signal); stroke-width:1; opacity:0.08; }
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__eyebrow{ margin-bottom:var(--sp-3); }
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(42px,7.2vw,96px); line-height:0.97; letter-spacing:-0.02em;
  max-width:15ch;
}
.hero h1 em{ display:block; font-style:italic; font-weight:500; color:var(--glacier); }
.hero__lede{
  margin-top:var(--sp-3); max-width:430px;
  font-size:16px; line-height:1.72; color:rgba(250,250,247,0.65);
}
.hero__actions{ margin-top:var(--sp-4); display:flex; gap:14px; flex-wrap:wrap; }

.hero__meta{
  position:relative; z-index:2;
  margin-top:var(--sp-6); padding-top:var(--sp-3);
  border-top:1px solid var(--rule-dark);
  display:flex; gap:var(--sp-5); flex-wrap:wrap;
}
.hero__meta .v{ font-family:var(--mono); font-size:19px; font-weight:500; color:var(--signal); }
.hero__meta .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(250,250,247,0.42); margin-top:5px;
}
@media (max-width:820px){
  .hero{ padding:130px var(--gutter) var(--sp-4); min-height:0; }
  .hero__meta{ gap:var(--sp-4); margin-top:var(--sp-5); }
}

/* ---------- BANDA ESQUEMÁTICA ---------- */
.schema{
  background:var(--basalt-2); border-top:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
  padding:var(--sp-4) var(--gutter);
}
.schema__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--sp-3); margin-bottom:var(--sp-3); flex-wrap:wrap;
}
.schema__head p{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:rgba(250,250,247,0.4);
}
.schema svg{ width:100%; height:150px; overflow:visible; }
.schema .base{ stroke:rgba(250,250,247,0.12); stroke-width:1; }
.schema .terra{ fill:none; stroke:var(--glacier); stroke-width:1.6; }
.schema .terrafill{ fill:rgba(143,216,224,0.07); stroke:none; }
.schema .gps{ fill:none; stroke:var(--ember); stroke-width:1.4; stroke-dasharray:5 5; }
.schema text{ font-family:var(--mono); font-size:9.5px; fill:rgba(250,250,247,0.45); letter-spacing:0.05em; }
.schema text.hi{ fill:var(--ember); }
.schema .node{ fill:var(--ember); }
@media (max-width:820px){ .schema{ padding:var(--sp-3) var(--gutter); } .schema svg{ height:110px; } }

/* ---------- SECCIÓN CLARA GENÉRICA ---------- */
.slab{ padding:var(--sp-7) 0; border-bottom:1px solid var(--rule); }
.slab--dark{
  background:var(--basalt); color:var(--signal);
  border-bottom-color:var(--rule-dark);
}
.slab__head{
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-5);
  align-items:end; margin-bottom:var(--sp-5);
}
.slab__head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,4.2vw,54px); line-height:1.04; letter-spacing:-0.018em;
  margin-top:16px;
}
.slab__head h2 em{ font-style:italic; color:var(--ember-deep); }
.slab--dark .slab__head h2 em{ color:var(--glacier); }
.slab__head p{
  font-size:14px; line-height:1.75; color:var(--steel); align-self:end;
}
.slab--dark .slab__head p{ color:rgba(250,250,247,0.55); }
@media (max-width:900px){
  .slab{ padding:var(--sp-6) var(--gutter); }
  .slab__head{ grid-template-columns:1fr; gap:var(--sp-2); }
}

/* ---------- TABLA DE TERRITORIOS ---------- */
.terr{ border-top:1px solid var(--graphite); }
.terr__row{
  display:grid;
  grid-template-columns:52px 1.7fr 1.1fr 0.7fr 0.8fr auto;
  align-items:center; gap:var(--sp-3);
  width:100%; text-align:left;
  padding:22px 0; border-bottom:1px solid var(--rule);
  position:relative; overflow:hidden;
  transition:padding .3s var(--ease), background .3s var(--ease);
}
/* El realce del hover NO invierte el color del texto.
   Antes la fila pasaba a texto claro esperando un fondo oscuro que este
   ::before nunca llegó a tener: quedaba blanco sobre blanco y la fila
   desaparecía justo al señalarla.
   Ahora se destaca con un fondo sutil y una barra de color a la izquierda, que
   se lee igual de bien y no depende de que dos reglas encajen. */
.terr__row::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:rgba(18,24,27,0.045);
  opacity:0; transition:opacity .3s var(--ease);
}
.terr__row::after{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; z-index:1;
  background:var(--ember); transform:scaleY(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.terr__row:hover::before,
.terr__row:focus-visible::before{ opacity:1; }
.terr__row:hover::after,
.terr__row:focus-visible::after{ transform:scaleY(1); }

.terr__row:hover, .terr__row:focus-visible{ padding-left:16px; padding-right:16px; }
.terr__row > *{ position:relative; z-index:2; }

/* Solo se refuerza lo que ya era oscuro; nada se aclara. */
.terr__row:hover .terr__name{ color:var(--basalt); }
.terr__row:hover .terr__idx{ color:var(--ember); }
.terr__row:hover .terr__go{ color:var(--ember); }

.terr__row:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }

.terr__idx{ font-family:var(--mono); font-size:11px; color:var(--steel); transition:color .3s; }
.terr__name{
  font-family:var(--display); font-weight:500; font-size:22px;
  letter-spacing:-0.01em; line-height:1.15; transition:color .3s;
}
.terr__sub{
  font-family:var(--mono); font-size:10px; letter-spacing:0.05em;
  color:var(--steel); text-transform:uppercase; margin-top:5px;
  display:block; transition:color .3s;
}
.terr__d{ font-family:var(--mono); font-size:12px; color:var(--steel); transition:color .3s; }
.terr__go{
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--steel);
  display:flex; align-items:center; gap:9px; justify-content:flex-end;
  transition:color .3s; white-space:nowrap;
}
.terr__go .ar{ transition:transform .3s var(--ease); }
.terr__row:hover .terr__go .ar{ transform:translateX(5px); }

@media (max-width:900px){
  .terr__row{ grid-template-columns:38px 1fr auto; row-gap:6px; padding:18px 0; }
  .terr__row .terr__d{ display:none; }
  .terr__name{ font-size:19px; }
}

/* Texturas de terreno (fondo al hacer hover) */
.terr-ma::before{ background:repeating-linear-gradient(32deg, rgba(232,162,77,0.14) 0 2px, transparent 2px 15px), linear-gradient(100deg,#3A2A1A,#12181B 78%); }
.terr-no::before{ background:repeating-radial-gradient(circle at 68% 26%, rgba(143,216,224,0.15) 0 1px, transparent 1px 17px), linear-gradient(100deg,#142B30,#12181B 78%); }
.terr-pe::before{ background:repeating-linear-gradient(-24deg, rgba(233,228,216,0.10) 0 2px, transparent 2px 13px), linear-gradient(100deg,#2C2418,#12181B 78%); }
.terr-jp::before{ background:repeating-radial-gradient(circle at 30% 70%, rgba(232,162,77,0.11) 0 1px, transparent 1px 21px), linear-gradient(100deg,#1D2A25,#12181B 78%); }

/* ---------- PROTOCOLO (3 fases) ---------- */
.phases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); }
.phase{ background:var(--fog); padding:var(--sp-4) var(--sp-3); min-height:220px; display:flex; flex-direction:column; }
.phase__n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.07em;
  color:var(--ember-deep); margin-bottom:var(--sp-3);
}
.phase h3{
  font-family:var(--display); font-weight:500; font-size:24px;
  letter-spacing:-0.015em; margin-bottom:10px;
}
.phase p{ font-size:14px; line-height:1.72; color:var(--steel); }
@media (max-width:860px){ .phases{ grid-template-columns:1fr; } .phase{ min-height:0; } }

/* ---------- INSTRUMENTAL (estadísticas) ---------- */
.gauges{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.gauge svg{ width:82px; height:82px; margin-bottom:var(--sp-2); }
.gauge circle{ fill:none; stroke-width:2; }
.gauge .track{ stroke:rgba(28,31,30,0.12); }
.gauge .fill{ stroke:var(--ember-deep); stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; }
.gauge__num{ font-family:var(--display); font-weight:500; font-size:40px; line-height:1; letter-spacing:-0.02em; }
.gauge__lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--steel); margin-top:9px;
}
@media (max-width:860px){ .gauges{ grid-template-columns:1fr 1fr; row-gap:var(--sp-5); } }

/* ---------- RUTA DESTACADA ---------- */
.feat{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-6); align-items:center; }
.feat__visual{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--rule-dark);
  background:repeating-linear-gradient(20deg, rgba(143,216,224,0.10) 0 1px, transparent 1px 22px),
             linear-gradient(150deg,#1B2A2C,#0E1416 76%);
}
.feat__visual svg{ position:absolute; inset:0; width:100%; height:100%; }
.feat__visual path{ fill:none; stroke:var(--ember); stroke-width:2; stroke-dasharray:5 6; }
.feat__badge{
  position:absolute; top:18px; left:18px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.05em;
  background:rgba(18,24,27,0.72); border:1px solid var(--rule-dark);
  color:var(--glacier); padding:8px 12px; text-transform:uppercase;
}
.feat__text h2{
  font-family:var(--display); font-weight:400; font-size:clamp(28px,3.8vw,48px);
  line-height:1.05; letter-spacing:-0.018em; margin:16px 0 var(--sp-3);
}
.feat__text h2 em{ font-style:italic; color:var(--glacier); }
.feat__text > p{
  font-size:15px; line-height:1.75; color:rgba(250,250,247,0.62);
  max-width:470px; margin-bottom:var(--sp-4);
}
/* Rejilla que se reparte sola.
   Antes eran tres columnas fijas y una utilidad forzaba cinco: los cinco datos
   se partían en dos filas y dejaban un hueco enorme a la derecha. Con auto-fit
   las columnas se reparten según lo que quepa, sin dejar filas a medias. */
.feat__specs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-3) 0; margin-bottom:var(--sp-4);
  border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);
}
.feat__specs > div{ min-width:0; }
.feat__specs .v{ font-family:var(--mono); font-size:17px; color:var(--signal); }
.feat__specs .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(250,250,247,0.42); margin-top:5px;
}
@media (max-width:900px){ .feat{ grid-template-columns:1fr; gap:var(--sp-4); } }

/* ---------- TESTIMONIOS ---------- */
.testis{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.testi blockquote{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:20px; line-height:1.48; margin-bottom:var(--sp-3);
  color:var(--signal);
}
.testi cite{
  font-style:normal; font-family:var(--mono); font-size:10px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--glacier);
}
@media (max-width:900px){ .testis{ grid-template-columns:1fr; gap:var(--sp-4); } }

/* ---------- CTA FINAL ---------- */
.cta{
  background:linear-gradient(165deg,#17211E,#0E1417);
  color:var(--signal); text-align:center; padding:var(--sp-7) 0;
}
.cta .eyebrow{ justify-content:center; margin-bottom:var(--sp-3); }
.cta h2{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(32px,5.2vw,64px); line-height:1.14;
  max-width:820px; margin:0 auto var(--sp-4); letter-spacing:-0.02em;
}
.cta h2 span{ font-style:normal; color:var(--ember); }
@media (max-width:820px){ .cta{ padding:var(--sp-6) var(--gutter); } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); }

/* Filas informativas: las jornadas del itinerario usan la misma rejilla que los
   territorios, pero NO son enlaces. No deben simular que se puede pulsar en
   ellas, así que conservan el realce de lectura y pierden la barra de acción. */
.terr__row--static{ cursor:default; }
.terr__row--static::after{ display:none; }
.terr__row--static:hover{ padding-left:0; padding-right:0; }
.terr__row--static:hover .terr__go{ color:inherit; }

/* --- Fondo de sección ------------------------------------------------------
   Solo cuando el operador ha colocado una imagen para ese destino. El velo es
   obligatorio: sobre una foto sin atenuar, el texto claro se pierde. */
.slab--photo {
  position: relative;
  background-size: cover; background-position: center;
  padding-block: clamp(40px, 6vw, 72px);
}
.slab--photo::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(18,24,27,.82);
}
.slab--photo > * { position: relative; z-index: 1; }
/* Con foto de fondo el velo es oscuro, así que el texto pasa a claro. Sin esto
   quedaría gris sobre gris, que es el error que ya costó una fila invisible. */
.slab--photo, .slab--photo .v, .slab--photo h2 { color: var(--signal); }
.slab--photo .k, .slab--photo .eyebrow { color: rgba(250,250,247,.62); }

/* --- Mapa del recorrido ---------------------------------------------------- */
.routemap { margin: 0; }
.routemap img {
  display: block; width: 100%; height: auto;
  border-radius: 2px; background: var(--fog);
}
.routemap figcaption {
  margin-top: 12px; font-family: var(--mono);
  font-size: 12px; color: var(--steel);
}

/* ==========================================================================
   TABLETA Y MÓVIL
   El escritorio no se toca: todo vive dentro de consultas de medios.
   ========================================================================== */

@media (max-width: 900px) {
  /* Cabecera de sección: título y texto dejan de competir por el ancho. */
  .slab__head { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Bloque destacado: la imagen encima y el texto debajo, en ese orden, para
     que lo primero que se ve siga siendo la fotografía. */
  .feat { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 760px) {
  /* La adaptación de .terr__row ya existía más arriba; aquí solo se corrige lo
     que en táctil sobra: el desplazamiento lateral al señalar, que sin ratón se
     percibe como un salto sin motivo. */
  .terr__row:hover { padding-left: 0; padding-right: 0; }
}

@media (max-width: 600px) {
  /* Titulares: se reduce el salto entre tamaños para que no invadan la
     pantalla, sin cambiar la escala del escritorio. */
  .slab__head h2 { font-size: clamp(24px, 7vw, 34px); }

  /* Galería de la ficha: una columna, sin recortes. */
  .gal-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MÓVIL · correcciones
   ========================================================================== */

/* --- Nada se desliza en horizontal ----------------------------------------
   Un solo elemento que sobresalga arrastra la página entera. En lugar de
   perseguirlo, se corta a nivel de documento y se acota lo que puede crecer
   más que su hueco: imágenes, tablas y palabras largas. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe, table { max-width: 100%; }
.wrap, .blk__inner, .gal__inner { min-width: 0; }

@media (max-width: 760px) {
  /* --- Guía día a día ---------------------------------------------------
     Los datos NO se ocultan. Antes desaparecían kilómetros, horas y altitud, y
     quien consultaba la ruta desde el móvil se quedaba sin la mitad de la
     ficha.

     Se pasa a flex: el título ocupa la fila, las tres cifras comparten la
     siguiente, y el alojamiento va aparte porque es largo. Cada dato lleva su
     etiqueta desde el atributo, así que el marcado no cambia entre tamaños. */
  .terr__row--static {
    display: flex; flex-wrap: wrap;
    gap: 0 22px; align-items: baseline;
    padding: 20px 0;
  }
  .terr__row--static .terr__idx { order: 0; flex: 0 0 auto; margin-right: 10px; }
  .terr__row--static > span:nth-child(2) {
    order: 1; flex: 1 1 100%; margin-bottom: 2px;
  }
  .terr__row--static .terr__d,
  .terr__row--static .terr__go {
    display: inline-flex; flex-direction: column; gap: 2px;
    font-size: 13px; text-align: left;
  }
  .terr__row--static .terr__d::before,
  .terr__row--static .terr__go::before {
    content: attr(data-lbl);
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--steel); opacity: .8;
  }
  .terr__row--static .terr__d { order: 2; margin-top: 10px; }
  .terr__row--static .terr__go {
    order: 3; flex: 1 1 100%; margin-top: 12px; color: var(--graphite);
  }
}