/* ==========================================================================
   BlueBox — Tarifas por ruta
   Solo la carga esta página. Consume las variables de tokens.css.
   ========================================================================== */

.bb-tarifas{ padding-block:clamp(2.5rem,6vw,4.5rem) }

/* Sin align-items:start, para que la rejilla estire las tres tarjetas a la
   misma altura. Cada una es flex en columna y su cuerpo crece, así los bordes
   de abajo quedan alineados aunque una ruta tenga más condiciones. */
.bb-rutas{
  display:grid; gap:clamp(1.25rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.bb-ruta{
  display:flex; flex-direction:column;
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-r-lg);
  box-shadow:var(--bb-shadow-sm);
  overflow:hidden;
  transition:box-shadow .2s var(--bb-ease), border-color .2s var(--bb-ease);
}
.bb-ruta:hover{ box-shadow:var(--bb-shadow); border-color:var(--bb-line-strong) }

/* ---- Encabezado de la ruta ---- */

.bb-ruta__head{
  padding:clamp(1.4rem,2.5vw,1.75rem);
  background:var(--bb-blue-900); color:#fff;
}

.bb-ruta__trayecto{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--bb-font-display);
  font-size:1.15rem; font-weight:700; letter-spacing:-.01em;
}
/* La flecha se dibuja con CSS y no con un carácter: así no depende de que la
   tipografía tenga ese glifo. */
.bb-ruta__flecha{
  flex:0 0 auto; width:22px; height:22px;
  fill:none; stroke:var(--bb-amber-300); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

.bb-ruta__precio{
  display:flex; align-items:baseline; gap:.3rem;
  margin-top:1rem;
  font-family:var(--bb-font-display); font-weight:800; letter-spacing:-.03em;
}
.bb-ruta__moneda{ font-size:1.25rem; color:var(--bb-amber-300) }
.bb-ruta__monto{ font-size:clamp(2.4rem,5vw,2.9rem); line-height:1 }
.bb-ruta__unidad{
  font-family:var(--bb-font); font-size:1rem; font-weight:600;
  color:rgba(255,255,255,.65); margin-left:.15rem;
}

.bb-ruta__incluido{
  margin-top:.35rem;
  font-size:var(--bb-fs-sm); font-weight:700; color:var(--bb-amber-300);
}

/* ---- Frecuencia de vuelos ---- */

.bb-ruta__vuelos{
  display:flex; align-items:center; gap:.5rem;
  padding:.85rem clamp(1.4rem,2.5vw,1.75rem);
  background:var(--bb-blue-050);
  border-bottom:1px solid var(--bb-blue-100);
  font-size:var(--bb-fs-sm); font-weight:700; color:var(--bb-blue-800);
}
.bb-ruta__vuelos svg{
  width:18px; height:18px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---- Condiciones ---- */

.bb-ruta__cuerpo{
  flex:1 1 auto;
  padding:clamp(1.4rem,2.5vw,1.75rem);
}

.bb-condiciones{ list-style:none; margin:0; padding:0 }
.bb-condiciones li{
  position:relative;
  padding-left:1.6rem; margin-bottom:.85rem;
  font-size:var(--bb-fs-sm); color:var(--bb-ink-soft); line-height:1.6;
}
.bb-condiciones li:last-child{ margin-bottom:0 }

/* Vista de verificación para lo que está incluido. */
.bb-condiciones li::before{
  content:''; position:absolute; left:0; top:.5rem;
  width:11px; height:6px;
  border-left:2px solid var(--bb-primary);
  border-bottom:2px solid var(--bb-primary);
  transform:rotate(-45deg);
}

/* Las condiciones que son un aviso, no un beneficio, llevan otra marca: un
   punto ámbar. Poner una vista de verificación en "los mayores a 35 kg deben
   cotizarse" sugeriría que es una ventaja. */
.bb-condiciones li.is-aviso::before{
  content:''; top:.45rem;
  width:7px; height:7px; border:0; border-radius:50%;
  background:var(--bb-amber-600); transform:none;
}
.bb-condiciones li strong{ color:var(--bb-ink) }

/* ---- Sí y no: la consolidación ----
   Tres marcas distintas en la misma lista, y cada una dice algo diferente:
     vista azul  = condición normal de la ruta
     punto ámbar = aviso, algo que hay que tener en cuenta
     vista verde = esta ruta SÍ lo permite
     equis roja  = esta ruta NO lo permite
   La consolidación es lo que separa a Miami de las otras dos, así que necesita
   una marca que se lea de un vistazo sin tener que leer la frase. */

.bb-condiciones li.is-si::before{
  border-color:var(--bb-si);
}
.bb-condiciones li.is-si strong{ color:var(--bb-si) }

/* La equis se dibuja con los dos pseudoelementos, un trazo cada uno, en vez de
   con el carácter ×: así no depende de que la tipografía traiga ese glifo ni de
   cómo lo alinee. */
.bb-condiciones li.is-no::before,
.bb-condiciones li.is-no::after{
  content:''; position:absolute; left:1px; top:.6rem;
  width:11px; height:0;
  border:0; border-radius:1px;
  border-top:2px solid var(--bb-no);
  background:none;
}
.bb-condiciones li.is-no::before{ transform:rotate(45deg) }
.bb-condiciones li.is-no::after{ transform:rotate(-45deg) }
.bb-condiciones li.is-no{ color:var(--bb-ink-soft) }
.bb-condiciones li.is-no strong{ color:var(--bb-no) }

/* ---- Cierre ---- */

.bb-cierre{
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  background:var(--bb-blue-050);
  border:1px solid var(--bb-blue-100);
  border-radius:var(--bb-r-lg);
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.bb-cierre__texto{ flex:1 1 24rem; min-width:0 }
.bb-cierre h2{ font-size:1.35rem; font-weight:800; color:var(--bb-blue-800) }
.bb-cierre p{
  margin-top:.5rem; max-width:54ch;
  color:var(--bb-ink-soft); font-size:var(--bb-fs-sm);
}

.bb-cierre__acciones{ display:flex; flex-wrap:wrap; gap:.7rem }

/* El boton de WhatsApp de esta pagina usa `.bb-btn-wa` de site.css, que es en
   contorno. Aqui vivia una version en verde relleno: se retiro porque sumaba
   un tercer verde a la pantalla, junto con la burbuja flotante. */

/* La accion propia de la pagina —irse a la calculadora— es la que va rellena,
   para que las dos no pesen igual. */
.bb-btn-solido{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:var(--bb-r-pill);
  background:var(--bb-accent-strong); color:#fff;
  font-weight:800; font-size:var(--bb-fs-sm); letter-spacing:.02em;
  box-shadow:var(--bb-shadow-sm);
  transition:background .16s var(--bb-ease), transform .16s var(--bb-ease);
}
.bb-btn-solido:hover{
  background:#8f5626; transform:translateY(-2px); text-decoration:none;
}