/* ==========================================================================
   El viaje completo (/buscar/viaje/) y las ofertas (/ofertas/) · sobre luz.css y busqueda.css
   --------------------------------------------------------------------------
   · Clases con «vj-». Solo fichas de luz.css (roles y marca), sin colores escritos a mano.
   · Móvil primero: una columna; las tres propuestas, en fila desde 1060 px (dos, desde 900).
   · El resumen del viaje se queda fijo arriba al bajar (debajo de la cabecera de la web).
   · Cifras tabulares en precios y cuentas. Foco visible también en colores forzados.
   ========================================================================== */

.vj-arriba { padding-block: var(--e6); }
.vj-cabecera h1 { max-width: 20ch; }
.vj-entradilla { margin: var(--e4) 0 0; max-width: 60ch; font-size: var(--t-m); line-height: 1.55; color: var(--color-texto-suave); }
.vj-cifra, .vj-importe, .vj-media, .vj-comodidad b { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- el formulario ---------- */
.vj-inicio { display: grid; gap: var(--e5); }
.vj-formulario { display: grid; gap: var(--e5); padding: var(--e4); background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio-g); box-shadow: var(--sombra-1); }
.vj-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.vj-grupo legend, .vj-mas summary { padding: 0; margin-bottom: var(--e3); font: 600 var(--t-xs)/1.3 var(--f-texto); letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-acento-texto); }
.vj-campos-viaje { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.vj-casillas { display: grid; gap: 0 var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.vj-casillas .bq-casilla .casilla { min-height: 44px; }
/* Una casilla con pista (o de dos líneas) no baja ni descuadra a las demás: todas arrancan arriba. */
.vj-casillas .bq-casilla { align-self: start; }
.vj-casillas .bq-casilla .casilla { align-items: start; padding-top: var(--e3); }
.vj-sugerencias { margin: var(--e3) 0 0; font-size: var(--t-s); }
.vj-mas { border-top: 1px solid var(--color-borde); padding-top: var(--e4); }
.vj-mas summary { display: flex; align-items: center; gap: var(--e2); min-height: 44px; margin: 0; cursor: pointer; list-style: none; }
.vj-mas summary::-webkit-details-marker, .vj-como summary::-webkit-details-marker,
.vj-detalle summary::-webkit-details-marker, .vj-fuentes-tecnico summary::-webkit-details-marker { display: none; }
.vj-mas summary::after, .vj-como summary::after, .vj-detalle summary::after, .vj-fuentes-tecnico summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .18s var(--curva); }
.vj-mas[open] summary::after, .vj-como[open] summary::after, .vj-detalle[open] summary::after,
.vj-fuentes-tecnico[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.vj-mas-nota { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-texto-suave); }
.vj-mas-cuerpo { margin-top: var(--e3); }
.vj-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.vj-enviar .boton { justify-content: center; }
.vj-enviar-nota { margin: 0; max-width: 46ch; font-size: var(--t-xs); line-height: 1.45; color: var(--color-texto-suave); }
.vj-frase { display: grid; gap: var(--e2); }
.vj-frase label { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--color-titulo); }
.vj-frase-fila { display: flex; flex-wrap: wrap; gap: var(--e2); }
.vj-frase-fila .control { flex: 1 1 16em; min-width: 0; }
.vj-pregunta { margin-bottom: var(--e5); }
.vj-pregunta ul { margin: var(--e2) 0; padding-left: 1.2em; }
.vj-cambiar-boton { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4);
  border: 1.5px solid var(--color-borde-control); border-radius: var(--radio-pildora); background: var(--color-superficie);
  cursor: pointer; list-style: none; font: 600 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-oscuro); }
.vj-cambiar-boton::-webkit-details-marker { display: none; }
.vj-cambiar-boton::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .18s var(--curva); }
.vj-cambiar[open] .vj-cambiar-boton::after { transform: translateY(25%) rotate(-135deg); }
.vj-cambiar-boton:hover { background: var(--arena); }
.vj-cambiar-cuerpo { margin-top: var(--e4); }

/* ---------- el resumen fijo ---------- */
.vj-resumen { position: sticky; top: var(--alto-cabecera); z-index: 40; background: var(--color-oscuro); color: var(--sobre-oscuro-2);
  box-shadow: var(--sombra-2); }
.vj-resumen-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--e4); min-height: 56px; padding-block: 10px; }
.vj-resumen-ruta { margin: 0; font: 400 var(--t-m)/1.3 var(--f-display); }
.vj-resumen-ruta b { color: var(--sobre-oscuro-1); font-weight: 480; }
.vj-resumen-datos { flex: 1 1 18em; min-width: 0; margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--sobre-oscuro-3); }
.vj-resumen-cambiar { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--sobre-oscuro-acento);
  font: 600 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; }
.vj-resumen-cambiar:hover { color: var(--sobre-oscuro-1); }
@media (max-width: 699px) { .vj-resumen-datos span:nth-child(n+3) { display: none; } }

/* ---------- secciones ---------- */
.vj-propuestas, .vj-seccion, .vj-ofertas-seccion, .vj-fuentes-seccion { padding-block: var(--e7); }
.vj-seccion, .vj-fuentes-seccion { border-top: 1px solid var(--color-borde); }
.vj-ofertas-seccion, .vj-fuentes-seccion { background: var(--color-superficie-2); }
.vj-seccion-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e3) var(--e5);
  margin-bottom: var(--e5); }
.vj-seccion-cabeza h2 { margin-top: var(--e2); }
.vj-seccion-cabeza .antetitulo { margin: 0; }
.vj-seccion-titulo { display: inline-flex; align-items: center; gap: var(--e3); font-size: var(--t-xl); }
.vj-seccion-titulo .ico { flex: none; color: var(--color-acento-texto); }
.vj-nota { margin: 0 0 var(--e4); max-width: 60ch; font-size: var(--t-s); color: var(--color-texto-suave); }
.vj-nota-aviso { color: var(--color-aviso-texto); }
.vj-vacia { max-width: 64ch; padding: var(--e5); border: 1px dashed var(--color-borde-control); border-radius: var(--radio-g);
  background: var(--color-superficie); font-size: var(--t-s); }
.vj-vacia p { margin-bottom: var(--e3); }

/* ---------- «Tu viaje completo»: las propuestas ---------- */
.vj-propuestas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); }
.vj-propuestas-lista.cuantas-1 { max-width: 720px; }
@media (min-width: 900px) { .vj-propuestas-lista.cuantas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .vj-propuestas-lista.cuantas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .vj-propuestas-lista.cuantas-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vj-propuestas-lista > li { min-width: 0; }
.vj-propuesta { height: 100%; display: flex; flex-direction: column; gap: var(--e4); padding: var(--e4); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio-g); }
.vj-destacada { border-color: var(--color-acento); box-shadow: 0 0 0 1px var(--color-acento), var(--sombra-2); }
.vj-propuesta-cabeza { display: grid; gap: var(--e2); padding-bottom: var(--e4); border-bottom: 1px solid var(--color-borde); }
.vj-propuesta-cabeza .bq-marca-ensayo { justify-self: start; }
.vj-rotulo { margin: 0; font: 600 var(--t-xs)/1.35 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--color-acento-texto); }
.vj-tambien { letter-spacing: .08em; }
.vj-total { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font: 380 var(--t-2xl)/1.05 var(--f-display);
  letter-spacing: -.02em; color: var(--color-titulo); }
.vj-total-rotulo { font: 500 var(--t-s)/1.3 var(--f-texto); letter-spacing: 0; color: var(--color-texto-suave); }
.vj-total-parcial { font-size: var(--t-xl); }
.vj-media { margin: 0; font-size: var(--t-s); color: var(--color-texto); }
.vj-otra { margin: 0; font-size: var(--t-xs); color: var(--color-texto-suave); }
.vj-aviso { margin: 0; justify-self: start; padding: 4px 8px; border-radius: var(--radio-s); background: var(--aviso-f);
  color: var(--color-aviso-texto); font-size: var(--t-xs); line-height: 1.4; }
.vj-comodidad { display: grid; gap: 6px; margin-top: var(--e1); }
.vj-comodidad p { margin: 0; font-size: var(--t-xs); color: var(--color-texto-suave); }
.vj-comodidad b { color: var(--color-titulo); }
.vj-barra { width: 100%; height: 6px; }
.vj-barra-fondo { fill: var(--arena); }
.vj-barra-valor { fill: var(--color-acento); }
.vj-lineas { list-style: none; margin: 0; padding: 0; display: grid; }
.vj-linea { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px var(--e3); padding-block: var(--e3);
  border-bottom: 1px solid var(--color-borde); }
.vj-linea:first-child { padding-top: 0; }
.vj-linea:last-child { border-bottom: 0; padding-bottom: 0; }
.vj-linea-icono { padding-top: 2px; color: var(--color-acento-texto); }
.vj-linea-cuerpo { min-width: 0; display: grid; gap: 2px; }
.vj-linea-tipo { margin: 0; font: 600 var(--t-xs)/1.25 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--color-texto-suave); }
.vj-linea-titulo { margin: 0; font: 560 var(--t-s)/1.35 var(--f-texto); color: var(--color-titulo); overflow-wrap: anywhere; }
.vj-linea-detalle, .vj-linea-nota { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--color-texto-suave); overflow-wrap: anywhere; }
.vj-linea-nota { padding-top: 2px; }
.vj-linea-precio { grid-column: 2; display: grid; gap: 2px; justify-items: start; }
.vj-importe { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.vj-importe .vj-cifra { font: 650 var(--t-m)/1.2 var(--f-texto); color: var(--color-oscuro); }
.vj-por { font-size: var(--t-xs); color: var(--color-texto-suave); }
.vj-procedencia { margin: 0; font-size: var(--t-xs); line-height: 1.4; color: var(--color-texto-suave); }
.vj-a-consultar { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--color-oscuro); }
.vj-porque { margin: 0; max-width: 68ch; padding: var(--e3) var(--e4); border-left: 3px solid var(--color-acento); border-radius: var(--radio-s);
  background: var(--color-superficie-2); font-size: var(--t-s); line-height: 1.55; color: var(--color-texto); }
.vj-anadir-viaje { margin-top: auto; display: grid; gap: var(--e2); }
.vj-propuesta .boton.vj-boton { width: 100%; min-height: 48px; justify-content: center; gap: var(--e2); white-space: normal; text-align: center; }
.vj-anadir-nota { margin: 0; font-size: var(--t-xs); text-align: center; color: var(--color-texto-suave); }
.vj-como { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--color-borde); }
.vj-como summary, .vj-detalle summary, .vj-fuentes-tecnico summary { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; cursor: pointer; list-style: none;
  font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--color-oscuro); }
.vj-como-cuerpo { max-width: 72ch; font-size: var(--t-s); color: var(--color-texto); }
.vj-como-cuerpo ul { margin: 0 0 1em; padding-left: 1.2em; }

/* ---------- lo que pidió la revisión (27-09-2026) ---------- */
.vj-a-medida { margin: var(--e3) 0 0; max-width: 60ch; font-size: var(--t-s); }
.vj-a-medida a, .vj-supuesto a { font-weight: 600; }
.vj-supuesto { color: var(--color-texto); }
.vj-orden { margin-top: calc(-1 * var(--e3)); font-size: var(--t-xs); }
/* Las propuestas se comparan de un vistazo: lo igual en todas, en tono menor; lo que falta, dicho y sin importe. */
.vj-igual { font-weight: 500; letter-spacing: .06em; }
.vj-linea-igual .vj-linea-titulo { font-weight: 480; color: var(--color-texto); }
.vj-linea-falta .vj-linea-icono { color: var(--color-texto-suave); }
.vj-linea-falta .vj-linea-titulo { color: var(--color-aviso-texto); }
.vj-detalle { border-top: 1px solid var(--color-borde); padding-top: var(--e2); }
.vj-detalle summary { font-size: var(--t-xs); }
.vj-detalle-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e3); }
.vj-detalle-pieza { margin: 0; font-size: var(--t-xs); color: var(--color-titulo); }
.vj-detalle-lista .vj-procedencia { margin-top: 2px; }
.vj-cinta-oferta { align-self: flex-start; padding: 3px 8px; border-radius: var(--radio-pildora); background: var(--miel); }
.vj-seguro-datos { display: grid; gap: var(--e3); margin: var(--e3) 0; }
.vj-seguro-datos p { margin: 0; }
.vj-fuentes-tecnico { margin-top: var(--e5); }
.vj-fuentes-tecnico .vj-fuentes { margin-top: var(--e3); }
.vj-deslizar { display: none; }
/* En el móvil, las propuestas se deslizan de lado (una pantalla, no cuatro): la siguiente asoma para que se vea que hay más. */
@media (max-width: 899px) {
  /* position: relative: lo que va en posición absoluta dentro (el texto .solo-lectores) queda recortado por el carrusel y no
     ensancha la página. */
  .vj-propuestas-lista:not(.cuantas-1) { position: relative; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: min(86%, 420px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--e3); }
  .vj-propuestas-lista:not(.cuantas-1) { align-items: start; }      /* cada tarjeta, su alto: sin huecos al pie */
  .vj-propuestas-lista > li { scroll-snap-align: start; }
  .vj-deslizar { display: block; font-size: var(--t-xs); }
}

/* ---------- ofertas ---------- */
.vj-ofertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vj-oferta { height: 100%; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-top: 3px solid var(--color-acento); border-radius: var(--radio-g); }
.vj-oferta-etiqueta { margin: 0; align-self: flex-start; padding: 3px 8px; border-radius: var(--radio-pildora); background: var(--miel);
  color: var(--color-acento-texto); font: 600 var(--t-xs)/1.3 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; }
.vj-oferta-titulo { margin: var(--e1) 0 0; font-size: var(--t-l); }
.vj-oferta-cifra { margin: 0; font: 650 var(--t-m)/1.35 var(--f-texto); color: var(--color-oscuro); }
.vj-oferta-cifra span { font-weight: 400; font-size: var(--t-xs); color: var(--color-texto-suave); }
.vj-oferta-porque { margin: 0; max-width: 68ch; font-size: var(--t-s); line-height: 1.55; }
.vj-oferta-caduca { margin: 0; font-size: var(--t-xs); color: var(--color-texto-suave); }
.vj-oferta-enlace { margin: auto 0 0; padding-top: var(--e2); }
.vj-sin-ofertas { margin: 0; max-width: 60ch; font: 380 var(--t-l)/1.5 var(--f-display); color: var(--color-texto); }

/* ---------- las tarjetas de cada sección ---------- */
.vj-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.vj-tarjetas > li { min-width: 0; }
.vj-tarjeta { position: relative; height: 100%; display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4);
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-g); }
.vj-cinta { margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-acento-texto); }
.vj-tarjeta-titulo { margin: 0; font-size: var(--t-l); overflow-wrap: anywhere; }
.vj-tarjeta-titulo a { color: inherit; }
.vj-hechos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); line-height: 1.45; color: var(--color-texto); }
.vj-hechos li { position: relative; padding-left: 14px; overflow-wrap: anywhere; }
.vj-hechos li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: var(--radio-circulo);
  background: var(--color-acento); }
.vj-montado { margin: 0; padding: var(--e2) var(--e3); border-radius: var(--radio); background: var(--miel); font-size: var(--t-xs); line-height: 1.45; }
.vj-tarjeta-pie { margin-top: auto; display: grid; gap: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--color-borde); }
.vj-tarjeta-precio { display: grid; gap: 2px; }
@media (hover: hover) {
  .vj-tarjeta:hover, .vj-oferta:hover { border-color: var(--color-acento); }
}

/* ---------- dónde hemos buscado ---------- */
.vj-t-fuentes { font-size: var(--t-l); margin-bottom: var(--e2); }
.vj-fuentes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.vj-fuente-vertical { margin: 0 0 6px; font-size: var(--t-s); }
.vj-fuentes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); color: var(--color-texto-suave); }
.vj-fuentes ul li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.vj-fuentes ul li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radio-circulo); background: var(--color-texto-suave); }
.vj-fuentes ul li.bien::before { background: var(--bien); }
.vj-fuentes ul li.mal::before { background: var(--mal); }
.vj-fuentes ul li.apagada::before { background: transparent; border: 1.5px solid var(--color-texto-suave); }

/* ---------- /ofertas/ (la página pública) ---------- */
.vj-ofertas-pagina { padding-block: var(--e7); }
.vj-ofertas-pagina .vj-seccion-cabeza { margin-top: var(--e7); }
.vj-campanas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }

/* ---------- Puente · Ofertas ---------- */
.vj-puente { display: grid; gap: var(--e5); }
.vj-puente input.control, .vj-puente select.control { height: 50px; }     /* el de fecha salía más alto y descuadraba la fila */
.vj-puente .campos-2 { align-items: start; }
.vj-puente-grupo { margin: 0; padding: var(--e5) 0 0; border: 0; border-top: 1px solid var(--color-borde); display: grid; gap: var(--e4); min-width: 0; }
.vj-puente-grupo:first-of-type { padding-top: 0; border-top: 0; }
.vj-puente-grupo legend { float: left; width: 100%; padding: 0; margin: 0; font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-acento-texto); }
.vj-puente-grupo legend + * { clear: left; }
.vj-puente-retirar { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--color-borde); }

@media (min-width: 700px) {
  .vj-formulario { padding: var(--e5); }
  .vj-propuesta { padding: var(--e5); }
  .vj-tarjeta { padding: var(--e5); }
}
@media (forced-colors: active) {
  .vj-destacada { outline: 2px solid Highlight; }
  .vj-barra-valor { fill: Highlight; }
  .vj-oferta, .vj-propuesta, .vj-tarjeta { border: 1px solid CanvasText; }
}
@media print {
  .vj-resumen { position: static; box-shadow: none; }
  .vj-cambiar, .vj-anadir-viaje, .bq-anadir, .vj-frase { display: none; }
}
/* /ofertas/: lo reservado para La Suite, sin títulos ni precios (ofertas.para_la_suite_cuantas) */
.vj-suite-aviso { margin-top: var(--e7); max-width: 72ch; padding: var(--e5); border: 1px solid var(--luz); border-radius: var(--radio-g); background: var(--crema); }
.vj-suite-aviso .vj-seccion-titulo { margin: 0 0 var(--e3); }
.vj-suite-aviso p { margin: 0 0 var(--e3); }
.vj-suite-aviso p:last-child { margin-bottom: 0; }
/* «La que más encaja contigo» (busqueda/viaje/gustos.py) */
.vj-para-ti { display: flex; gap: var(--e2); align-items: start; color: var(--color-acento-texto); font-weight: 600; }
.vj-para-ti svg { flex: none; margin-top: 3px; }

/* La foto del anuncio (ofertas.a_oferta: la suya o la de su destino o región): arriba, a sangre, en 16:9. */
.vj-oferta.con-foto { padding-top: 0; overflow: hidden; }
.vj-oferta-foto { margin: 0 calc(-1 * var(--e5)) var(--e2); aspect-ratio: 16 / 9; background: var(--arena); }
.vj-oferta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Reservar en el socio (precio visto) y socios de una sección sin precio (08-10-2026). */
.vj-reservar { margin-top: var(--e2); font-size: var(--t-s); }
a.vj-reservar:not(.boton) { display: inline-block; color: var(--color-enlace, inherit); text-decoration: underline; }
.vj-socios { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; gap: var(--e3); }
.vj-socios .vj-nota { display: block; margin: var(--e1) 0 0; }