/* Presentación del tarifario. Los valores continúan llegando desde la API. */
.tarifBigCard{
  overflow:hidden;
  border:1px solid #d8d9da;
  border-radius:24px;
  background:#fbfbfa;
  box-shadow:0 30px 70px rgba(8,9,11,.14),0 8px 22px rgba(8,9,11,.06);
}

.tarifBigCard::after{
  display:none;
}

.tarifCardHead{
  min-height:148px;
  padding:28px 36px;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(2,2,3,.84) 32%,rgba(3,3,4,.62) 58%,rgba(3,3,4,.2) 100%),
    url('assets/services/carga-aerea.jpg');
  background-position:center,center 44%;
  background-size:cover;
  background-repeat:no-repeat;
  background-blend-mode:normal;
  border-bottom:0;
}

.tarifCardHeadLeft{
  gap:0;
}

.tarifCardBadge{
  display:none!important;
}

.tarifCardTitle{
  color:#fff;
  font-family:'Archivo',Arial,sans-serif;
  font-size:clamp(1.7rem,2.3vw,2.25rem);
  font-weight:750;
  line-height:1.04;
  letter-spacing:-.045em;
  text-shadow:0 4px 18px rgba(0,0,0,.42);
}

.tarifCardSub{
  margin-top:8px;
  color:rgba(235,243,248,.76);
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.015em;
  text-shadow:0 3px 12px rgba(0,0,0,.5);
}

.tarifCardRoute{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.19);
  border-radius:14px;
  background:rgba(5,5,7,.56);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.tarifRouteDot,
.tarifRouteDotEnd{
  color:#fff;
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
}

.tarifRouteLine{
  background:rgba(255,255,255,.32);
}

.tarifRouteLine i{
  background:#ef4d96;
  box-shadow:0 0 0 4px rgba(239,77,150,.14),0 0 14px rgba(239,77,150,.7);
}

.tarifCols{
  padding:13px 36px;
  border-color:#202328;
  background:#202328;
}

.tarifCols span{
  color:rgba(255,255,255,.72);
  font-family:'Archivo',Arial,sans-serif;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.13em;
}

.tarifRow,
.tarifRow:nth-child(even){
  min-height:70px;
  padding:14px 36px;
  border-color:#e3e3e1;
  background:#fff;
}

.tarifRow:nth-child(even){
  background:#f5f5f3;
}

.tarifRow::before{
  background:#ef4d96;
}

.tarifRow::after{
  background:linear-gradient(90deg,rgba(239,77,150,.09),rgba(239,77,150,.025) 48%,transparent 78%);
}

.tarifRow:hover{
  background:#fff4f8;
}

.tarifRow>div,
.tarifRow>span{
  color:#46505a;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:.9rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.tr-range b{
  color:#171a1e;
  font-family:'Archivo',Arial,sans-serif;
  font-size:.94rem;
  font-weight:750;
  letter-spacing:-.015em;
}

.tr-range small{
  margin-top:4px;
  color:#7b8187;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.01em;
}

.tr-rate,
.tr-fixed,
.tarifFlat .tr-rate{
  color:#181b20!important;
  font-family:'JetBrains Mono',monospace!important;
  font-size:1rem!important;
  font-weight:750!important;
  letter-spacing:-.035em;
}

.tr-rate em{
  margin-left:4px;
  color:#7b8187;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.01em;
}

.tr-nac{
  color:#a62a61!important;
  font-family:'JetBrains Mono',monospace!important;
  font-size:.83rem!important;
  font-weight:650!important;
}

.tarifRowFeatured{
  border-color:#e6c7d5!important;
  background:linear-gradient(90deg,rgba(239,77,150,.1),rgba(250,247,249,.96) 46%,#fff 100%)!important;
}

.tarifRowFeatured .tr-range b{
  color:#a72561;
}

.tarifRowFeatured .tr-range small{
  color:#bd3975;
  font-weight:650;
}

.tarifRowFeatured::before{
  background:#ef4d96!important;
}

.tarifCardFoot{
  padding:18px 36px;
  border-color:#ddddda;
  background:#eeeeec;
}

.tarifCardFoot span{
  color:#626970;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:.82rem;
  font-weight:500;
}

.tarifCardFoot .btn.primary{
  color:#fff;
  border:0;
  background:#1b1e22;
  box-shadow:0 10px 22px rgba(8,9,11,.2);
  font-family:'Archivo',Arial,sans-serif;
  font-weight:700;
}

.tarifCardFoot .btn.primary:hover{
  background:#ef4d96;
  box-shadow:0 14px 28px rgba(239,77,150,.25);
}

@media(max-width:640px){
  .tarifCardHead{min-height:132px;padding:18px 16px;background-position:center,58% center}
  .tarifCardTitle{font-size:1.28rem}
  .tarifCardSub{font-size:.66rem;line-height:1.4}
  .tarifCols{padding:8px 12px}
  .tarifRow,.tarifRow:nth-child(even){min-height:56px;padding:9px 12px}
  .tr-range b{font-size:.78rem!important}
  .tr-range small{font-size:.6rem!important}
  .tr-rate,.tr-fixed,.tarifFlat .tr-rate{font-size:.8rem!important}
  .tarifCardFoot{padding:13px 14px}
}

/* ── Cabecera en negro, de verdad ────────────────────────────────────────────
   El negro de más arriba nunca llegaba a verse. `.tarifCardHead` de la capa
   anterior monta dos pseudo-elementos —::before con la foto del puerto y
   ::after con un velo VERDE— y los pseudo-elementos se pintan ENCIMA del
   fondo del elemento. Por eso la cabecera salía verde bosque aunque este
   archivo se llame «black».

   Se corrige donde estaba el problema: el velo. Carbón en vez de verde, con
   un respiro rosa arriba a la derecha — el rosa del aro del logo, que es el
   mismo del punto de la ruta y de las filas destacadas. Sin verde en ningún
   punto de la tarjeta. */
.tarifCardHead{
  /* Una sola foto, la del ::before. La de aquí quedaba tapada y solo servía
     para que dos imágenes compitieran por el mismo sitio. El sólido de abajo
     es el que sostiene el diseño si la foto no llega. */
  background-image:none;
  background-color:#0c0d10;
}

.tarifCardHead::before{
  /* Un punto más de presencia: contra el velo verde la foto competía, contra
     el carbón puede respirar. */
  opacity:.9;
  filter:saturate(.92) contrast(1.06) brightness(.88);
}

.tarifCardHead::after{
  background:
    radial-gradient(120% 140% at 92% 4%,rgba(239,77,150,.2),transparent 46%),
    linear-gradient(90deg,
      rgba(8,9,11,.97) 0%,
      rgba(10,11,14,.93) 30%,
      rgba(12,13,17,.66) 56%,
      rgba(12,13,17,.3) 78%,
      rgba(10,11,14,.52) 100%)!important;
}

/* El resto de la cabecera venía teñido de verde desde la misma capa. */
.tarifCardSub{color:rgba(233,236,240,.72)!important}

.tarifCardRoute{
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(6,7,9,.58)!important;
}

.tarifRouteDot,
.tarifRouteDotEnd{
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  background:rgba(255,255,255,.07)!important;
}

.tarifRouteLine{background:rgba(255,255,255,.28)!important}

.tarifRouteLine i{
  background:#ef4d96!important;
  box-shadow:0 0 0 4px rgba(239,77,150,.16),0 0 14px rgba(239,77,150,.75)!important;
}

/* El pie arrastraba el mismo verde en su botón. */
.tarifCardFoot .btn.primary{
  border:0!important;
  background:#16181c!important;
  box-shadow:0 10px 22px rgba(8,9,11,.22)!important;
}

.tarifCardFoot .btn.primary:hover{
  background:#ef4d96!important;
  box-shadow:0 14px 30px rgba(239,77,150,.28)!important;
}