/* ============================================================
   RUTAS — Estilos del configurador (elige-tu-ruta.html)
   Panel izquierdo oscuro (destino) / panel derecho claro (decisión).
   ============================================================ */

/* ---------- BANDA DE ENTRADA ---------- */
.cband{
  position:relative; background:var(--basalt); color:var(--signal);
  padding:125px 0 var(--sp-5); overflow:hidden;   /* el margen lo pone .wrap */
  border-bottom:1px solid var(--rule-dark);
}
.cband__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 26%, rgba(143,216,224,0.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 86% 90%, rgba(232,162,77,0.10), transparent 62%);
}
.cband__contours{ position:absolute; inset:0; width:100%; height:100%; }
.cband__contours path{ fill:none; stroke:var(--signal); stroke-width:1; opacity:0.075; }
.cband__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-5); align-items:end;
}
.cband h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(36px,5.4vw,72px); line-height:1.0; letter-spacing:-0.02em;
  margin-top:16px;
}
.cband h1 em{ display:block; font-style:italic; font-weight:500; color:var(--glacier); }
.cband__lede{
  font-size:14px; line-height:1.78; color:rgba(250,250,247,0.6); max-width:340px;
}
.cband__lede b{ color:var(--signal); font-weight:500; }
@media (max-width:900px){
  .cband{ padding:105px 0 var(--sp-4); }
  .cband__inner{ grid-template-columns:1fr; gap:var(--sp-3); }
}

/* ---------- ESTRUCTURA ---------- */

/* La rejilla debe permitir que la columna se estire; con «start» la sticky
   no tiene contra qué desplazarse. */
.pv__terrain{
  position:absolute; inset:0; opacity:0.6;
  transition:background 900ms ease, opacity 500ms ease;
}
.pv__top{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
}
.pv__seats{
  border:1px solid var(--rule-dark); padding:6px 12px;
  color:rgba(250,250,247,0.65);
}
.pv__main{ position:relative; z-index:2; }
.pv__country{ display:block; margin-bottom:12px; }
.pv__main h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.8vw,52px); line-height:1.03; letter-spacing:-0.02em;
}
.pv__main h2 em{ font-style:italic; color:var(--glacier); }
.pv__sub{
  font-size:14px; line-height:1.72; color:rgba(250,250,247,0.58);
  max-width:370px; margin-top:12px;
}

/* Perfil de altitud */
.pv__profile{ position:relative; z-index:2; margin-top:var(--sp-4); }
.pv__profile svg{ width:100%; height:150px; overflow:visible; display:block; }
.pv__profile .gridline{ stroke:rgba(250,250,247,0.09); stroke-width:1; }
.pv__profile .terrafill{ fill:rgba(143,216,224,0.09); stroke:none; }
.pv__profile .terraline{ fill:none; stroke:var(--glacier); stroke-width:1.6; }
.pv__profile .gpsline{ fill:none; stroke:var(--ember); stroke-width:1.4; stroke-dasharray:5 5; }
.pv__profile .peakdot{ fill:var(--ember); }
.pv__profile .peaklbl{ font-family:var(--mono); font-size:10px; fill:var(--ember); letter-spacing:0.04em; }
.pv__profile .axis{ font-family:var(--mono); font-size:9px; fill:rgba(250,250,247,0.35); letter-spacing:0.05em; }

.pv__specs{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-top:var(--sp-3); padding-top:20px; border-top:1px solid var(--rule-dark);
}
.pv__specs .v{ font-family:var(--mono); font-size:17px; font-weight:500; color:var(--signal); }
.pv__specs .k{
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(250,250,247,0.42); margin-top:5px;
}
@media (max-width:1040px){
  .pv{ position:relative; top:0; min-height:0; padding:var(--sp-3) var(--gutter) var(--sp-4); }
  .pv__specs{ grid-template-columns:1fr 1fr; gap:14px; }
}

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

/* ---------- PANEL (claro, ficha técnica) ---------- */
.panel{ background:var(--fog); padding:var(--sp-4) 40px 160px; }
.step{ margin-bottom:var(--sp-4); }
.step__hd{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--graphite);
}
.step__hd .n{ font-family:var(--mono); font-size:11px; color:var(--steel); letter-spacing:0.06em; }
.step__hd h3{
  font-family:var(--body); font-weight:700; font-size:15px;
  letter-spacing:0.06em; text-transform:uppercase;
}
.step__hd .req{
  margin-left:auto; font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-2);
}

/* Filas de especificación */
.row{
  display:grid; grid-template-columns:26px 1fr auto;
  align-items:center; gap:16px; width:100%; text-align:left;
  border-bottom:1px solid var(--rule); padding:16px 0;
  transition:background .24s var(--ease), padding .24s var(--ease);
}
.row:hover{ background:var(--paper); padding-left:12px; padding-right:12px; }
.row.on{ background:var(--paper); padding-left:12px; padding-right:12px; }
.row__mk{
  width:11px; height:11px; border:1px solid var(--steel-2); border-radius:50%;
  position:relative; justify-self:center; transition:.24s;
}
.row.on .row__mk{ border-color:var(--graphite); background:var(--ember); }
.row.on .row__mk::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--graphite);
}
.row__t1{ font-size:15px; font-weight:600; display:block; letter-spacing:-0.005em; }
.row__t2{
  font-family:var(--mono); font-size:10px; letter-spacing:0.04em;
  color:var(--steel); margin-top:5px; display:block; text-transform:uppercase;
}
.row__px{ font-family:var(--mono); font-size:12px; color:var(--steel); white-space:nowrap; }
.row.on .row__px{ color:var(--graphite); font-weight:500; }

/* Celdas compactas */
.grid3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border-bottom:1px solid var(--rule);
}
.cell{
  background:var(--fog); padding:16px 14px; text-align:left;
  display:flex; flex-direction:column; gap:5px; transition:.24s var(--ease);
}
.cell:hover{ background:var(--paper); }
.cell.on{ background:var(--graphite); color:var(--fog); }
.cell__c1{ font-size:14px; font-weight:600; }
.cell__c2{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.05em; color:var(--steel); }
.cell.on .cell__c2{ color:var(--steel-2); }
@media (max-width:620px){
  .grid3{ grid-template-columns:1fr 1fr; }
  .panel{ padding:var(--sp-3) var(--gutter) 170px; }
}

/* Casillas */
.chk{
  display:grid; grid-template-columns:26px 1fr auto;
  align-items:center; gap:16px; width:100%; text-align:left;
  border-bottom:1px solid var(--rule); padding:14px 0;
  transition:background .24s var(--ease), padding .24s var(--ease);
}
.chk:hover, .chk.on{ background:var(--paper); padding-left:12px; padding-right:12px; }
.chk__bx{
  width:12px; height:12px; border:1px solid var(--steel-2);
  position:relative; justify-self:center; transition:.24s;
}
.chk.on .chk__bx{ background:var(--ember); border-color:var(--graphite); }
.chk.on .chk__bx::after{
  content:''; position:absolute; left:3.5px; top:0;
  width:3px; height:7px; border:solid var(--graphite);
  border-width:0 2px 2px 0; transform:rotate(42deg);
}
.chk__t1{ font-size:14px; font-weight:500; }
.chk__px{ font-family:var(--mono); font-size:11px; color:var(--steel); }

/* ---------- BARRA DE RESERVA ---------- */
.checkout{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:var(--basalt); color:var(--signal);
  border-top:1px solid var(--rule-dark);
  padding:15px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.checkout__l{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.checkout__amt{
  font-family:var(--display); font-weight:500; font-size:31px;
  letter-spacing:-0.025em; line-height:1;
}
.checkout__per{
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(250,250,247,0.45); margin-top:7px;
}
.checkout__sum{
  font-family:var(--mono); font-size:10.5px; line-height:1.75;
  letter-spacing:0.02em; color:rgba(250,250,247,0.5); max-width:440px;
}
@media (max-width:860px){
  .checkout{ padding:13px 18px; gap:14px; }
  .checkout__sum{ display:none; }
  .checkout__l{ gap:var(--sp-3); }
}

/* ==========================================================================
   PERFIL DE LA VISTA PREVIA
   --------------------------------------------------------------------------
   El perfil es un gráfico APAISADO. Sin una altura acotada llenaba la caja de
   la vista previa, que es alta, y el trazo salía estirado en vertical: parecía
   un garabato y no un relieve.
   ========================================================================== */

.pv__profile { position: relative; margin-top: auto; }

.pvprof { display: none; }
.pvprof.is-active { display: block; }

.pvprof .pvp__svg {
  width: 100%;
  height: clamp(120px, 18vh, 190px);   /* apaisado, pase lo que pase */
  display: block;
}

.pvprof__none {
  padding: 18px 0; font-family: var(--mono);
  font-size: 12px; color: var(--steel);
}

/* La fotografía de la ruta va detrás, atenuada: da contexto sin competir con
   el trazo ni con el texto. */
.pv .fx.fill-abs { z-index: 0; }
.pv__top, .pv__main { position: relative; z-index: 2; }

/* Cifras del recorrido: se leen de un vistazo aunque el perfil no llegue a
   mirarse con detalle. */
.pvfacts {
  display: flex; flex-wrap: wrap; gap: 26px;
  list-style: none; margin: 22px 0 0; padding: 0;
}
.pvfacts li { display: flex; flex-direction: column; gap: 2px; }
.pvfacts__v {
  font-family: var(--mono); font-size: 24px; font-weight: 600;
  color: var(--signal); line-height: 1;
}
.pvfacts__k {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel);
}
@media (max-width: 600px) { .pvfacts { gap: 18px; } .pvfacts__v { font-size: 20px; } }

/* --- Configurador en móvil ------------------------------------------------
   La barra de precio queda fija abajo, así que el panel necesita hueco por
   debajo o el último paso queda tapado por ella. */
@media (max-width: 600px) {
  .panel { padding: var(--sp-3) var(--gutter) 190px; }

  /* Cifras del recorrido: dos por fila en lugar de tres apretadas. */
  .pvfacts { gap: 14px 22px; }
  .pvfacts li { flex: 0 0 calc(50% - 11px); }

  /* Cada opción es una diana táctil: 375 px de ancho y el pulgar. */
  .row { padding: 15px 14px; }

  /* El perfil de la vista previa se achica: en vertical no hay sitio para un
     gráfico y encima el precio. */
  .pvprof .pvp__svg { height: 110px; }
}

@media (max-width: 400px) {
  /* Pantallas pequeñas de verdad: una cifra por fila antes que dos partidas. */
  .pv__specs { grid-template-columns: 1fr; }
  .pvfacts li { flex: 0 0 100%; }
}

/* --- Botón final del configurador -----------------------------------------
   Dice lo que pasa DESPUÉS de pulsarlo. «Reservar plaza» no aclaraba si cobraba
   ya, si pedía más datos o si era definitivo, y esa duda en el último paso es
   donde se abandona una compra. */
.cobtn{
  display:flex; align-items:center; gap:14px;
  padding:13px 22px; border:0; border-radius:3px; cursor:pointer;
  background:var(--ember); color:var(--basalt);
  font-family:var(--body); text-align:left;
  transition:background .18s ease, transform .18s var(--ease), box-shadow .18s ease;
}
.cobtn:hover{
  background:#F0B466; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(232,162,77,.3);
}
.cobtn:active{ transform:translateY(0); }
.cobtn:focus-visible{ outline:3px solid var(--glacier); outline-offset:3px; }
.cobtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.cobtn__txt{ display:flex; flex-direction:column; gap:1px; }
.cobtn__lbl{ font-size:14px; font-weight:600; letter-spacing:.01em; }
.cobtn__hint{ font-size:11px; opacity:.72; }
.cobtn__go{ font-size:17px; opacity:.6; transition:transform .18s var(--ease); }
.cobtn:hover .cobtn__go{ transform:translateX(3px); opacity:.85; }

@media (max-width:600px){
  .cobtn{ width:100%; justify-content:space-between; }
  .cobtn__hint{ font-size:10.5px; }
}


.checkout__acc{
  flex:1 1 100%; order:3; margin:0;
  font-size:11.5px; color:rgba(250,250,247,.55);
}
.checkout__acc a{ color:var(--glacier); }
@media (min-width:900px){
  .checkout__acc{ flex:0 1 auto; order:0; text-align:right; }
}

/* ==========================================================================
   CONFIGURADOR · rediseño en una columna
   --------------------------------------------------------------------------
   La disposición partida obligaba a que una mitad tuviera la altura de la otra,
   y ninguna de las dos manda: el formulario crece con las opciones y la vista
   previa no. De ahí las franjas vacías, se pusieran del color que se pusieran.

   Con una sola columna ese problema no puede existir. El resumen de la ruta va
   en una barra compacta fija bajo la cabecera: sigue visible mientras se
   configura —que era lo que aportaba la mitad izquierda— pero ocupa solo lo que
   necesita.
   ========================================================================== */

.cfg{ background:var(--paper); padding-bottom:140px; }

/* --- Barra de resumen ------------------------------------------------------ */
.rsum{
  position:sticky; top:var(--hdr-h); z-index:40;
  background:var(--basalt); color:var(--signal);
  border-bottom:1px solid var(--rule-dark);
}
.rsum__in{
  max-width:1180px; margin:0 auto; padding:16px var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px;
}

.rsum__id{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 16rem; }
.rsum__dot{
  width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--ember); box-shadow:0 0 0 4px rgba(232,162,77,.16);
}
.rsum__meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(250,250,247,.5); margin:0 0 3px;
}
.rsum__t{
  font-size:clamp(17px,2vw,22px); line-height:1.15; letter-spacing:-.02em; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rsum__t em{ font-style:normal; color:var(--glacier); }

.rsum__facts{ display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; }
.rsum__facts dt{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(250,250,247,.45);
}
.rsum__facts dd{ margin:2px 0 0; font-size:14px; font-weight:600; }
.rsum__facts .num{ font-family:var(--mono); }


/* --- Formulario, en una columna centrada ---------------------------------- */
.panel{
  max-width:1180px; margin:0 auto;
  padding:var(--sp-5) var(--gutter) var(--sp-6);
  background:none;
}

@media (max-width:820px){
  .rsum__in{ padding:12px var(--gutter); gap:10px 20px; }
  .rsum__facts{ gap:8px 18px; }
  .rsum__facts dd{ font-size:13px; }
  .rsum__t{ font-size:16px; }
  .panel{ padding:var(--sp-4) var(--gutter) var(--sp-5); }
}

@media (max-width:600px){
  /* Con la barra de precio abajo y el resumen arriba, en móvil hay que dejar
     sitio a ambos o el último paso queda escondido. */
  .cfg{ padding-bottom:170px; }
  .rsum__facts > div:nth-child(n+4){ display:none; }   /* lo esencial: días, km, techo */
}

/* --- El recorrido ----------------------------------------------------------
   El perfil con sus jornadas y sus fotografías va A LA VISTA. Esconderlo tras
   un desplegable dejaba la página sin lo único que explica la ruta: cada punto
   es un día, con su altitud, sus kilómetros y su imagen.

   Va debajo de la barra y no dentro porque necesita ancho. */
.cfgprof{
  background:var(--basalt-2, #161D21); color:var(--signal);
  border-bottom:1px solid var(--rule-dark);
}
.cfgprof__in{
  max-width:1180px; margin:0 auto;
  padding:var(--sp-4) var(--gutter) var(--sp-5);
}

.rsum__sub{
  flex:1 1 100%; margin:0;
  font-size:13.5px; line-height:1.6; color:rgba(250,250,247,.6);
  max-width:54rem;
}

/* Las cifras del recorrido, sobre el trazo. */
.cfgprof .pvfacts{ margin:0 0 var(--sp-3); }

/* El trazo con sitio suficiente para que se distingan las jornadas. */
.cfgprof .pvprof .pvp__svg{ height:clamp(150px, 22vh, 230px); }

@media (max-width:820px){
  .cfgprof__in{ padding:var(--sp-3) var(--gutter) var(--sp-4); }
  .cfgprof .pvprof .pvp__svg{ height:clamp(120px, 20vh, 170px); }
}