/* preciodelagasolinahoy.com — calculadora del coste de un viaje («ticket de carretera») */
.trip .hero-grid { align-items: start; }
.trip-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #AEB6C6; }
.trip-form select, .tf-iw input { width: 100%; font: 700 1rem var(--sans); color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: .65rem .8rem; }
.trip-form select:focus, .tf-iw input:focus { outline: none; border-color: var(--led); box-shadow: 0 0 0 3px rgba(255,181,71,.25); }
.trip-form select option { color: var(--ink); }
.tf-route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .5rem; align-items: end; margin-bottom: .8rem; }
.tf-swap { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--led); font-size: 1.15rem; cursor: pointer; transition: transform .3s; }
.tf-swap:hover { transform: rotate(180deg); border-color: var(--led); }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: end; margin-bottom: .8rem; }
.tf-iw { position: relative; display: block; }
.tf-iw input { padding-right: 4.6rem; }
.tf-iw i { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; font-size: .82rem; color: #AEB6C6; text-transform: none; letter-spacing: 0; pointer-events: none; }
.tf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; background: rgba(0,0,0,.3); border-radius: 12px; padding: .3rem; }
.tf-seg button { font: 700 .84rem var(--sans); color: #AEB6C6; background: transparent; border: 0; border-radius: 9px; padding: .55rem .3rem; cursor: pointer; }
.tf-seg button.on { background: #fff; color: var(--asphalt); }
.trip .fuels { grid-template-columns: 1fr 1fr; }
.tf-cars { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .35rem; margin-bottom: .8rem; }
.tf-cars button { display: flex; flex-direction: column; align-items: center; gap: .1rem; font: 700 .8rem var(--sans); color: #DDE2EC; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .5rem .2rem; cursor: pointer; }
.tf-cars button small { font-family: var(--mono); font-weight: 400; font-size: .74rem; color: #8B93A5; }
.tf-cars button.on { border-color: var(--led); background: rgba(255,181,71,.12); color: #fff; box-shadow: 0 0 18px -6px var(--led-glow); }
.tf-cars button.on small { color: var(--led); }
.tf-step { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; }
.tf-step button { height: 2.7rem; border: 0; background: rgba(255,255,255,.06); color: var(--led); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.tf-step output { text-align: center; font: 700 1.15rem var(--sans); color: #fff; text-transform: none; letter-spacing: 0; }

/* Ticket */
.ticket { position: relative; justify-self: center; width: min(340px, 100%); margin-top: .4rem; padding: 1.1rem 1.1rem 1rem; color: #E9ECF2;
  background: linear-gradient(180deg, #232935, #171B23); border: 1px solid rgba(255,255,255,.1); border-radius: 18px 18px 6px 6px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,181,71,.08), 0 0 60px -30px var(--led-glow); }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: radial-gradient(circle at 5px -1px, transparent 6px, #171B23 6.5px) 0 0 / 10px 10px repeat-x; }
.tk-route { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .5rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px dashed rgba(255,255,255,.15); }
.tk-route b { font: 900 1rem var(--display); letter-spacing: -.01em; max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-route b:last-child { text-align: right; color: var(--led); }
.tk-route svg { width: 100%; height: 24px; overflow: visible; }
.tk-route path { stroke: rgba(255,210,63,.55); stroke-width: 2; fill: none; }
.tk-car { animation: tkDrive 3.2s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 0 4px var(--led-glow)); }
.tk-body { fill: var(--led); }
.tk-win { fill: #1B2029; }
.tk-light { fill: #FFF6D6; }
.tk-car circle { fill: #12151C; stroke: #8B93A5; stroke-width: 1.3; }
@keyframes tkDrive { 0% { transform: translate(12px, -3px) scale(1.35); } 50% { transform: translate(108px, -3px) scale(1.35); } 50.01% { transform: translate(108px, -3px) scale(-1.35, 1.35); } 100% { transform: translate(12px, -3px) scale(-1.35, 1.35); } }
.tk-lines { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px dashed rgba(255,255,255,.15); }
.tk-lines div { display: flex; justify-content: space-between; gap: .6rem; font-size: .88rem; color: #AEB6C6; }
.tk-lines b { font-family: var(--mono); font-weight: 400; font-size: 1rem; color: #fff; }
.tk-total { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .8rem 0 .4rem; }
.tk-total span { font: 900 .82rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: #AEB6C6; }
.tk-total .led { font-size: clamp(2.2rem, 7vw, 2.9rem); }
.tk-anim .tk-total .led { animation: tkFlash .6s ease-out; }
@keyframes tkFlash { 0% { opacity: .2; filter: blur(2px); } 100% { opacity: 1; filter: none; } }
.tk-pp { text-align: right; font-size: .92rem; color: #DDE2EC; min-height: 1.4em; }
.tk-pp b { color: #7CF2A5; font-family: var(--mono); font-weight: 400; font-size: 1.2rem; text-shadow: 0 0 10px rgba(124,242,165,.45); }
.tk-foot { display: flex; justify-content: space-between; gap: .6rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .76rem; color: #8B93A5; }

/* Tarjetas de debajo */
.trip-more { margin-top: -2.2rem; position: relative; z-index: 2; }
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.tm { display: flex; flex-direction: column; gap: .2rem; }
.tm-k { font-size: .8rem; font-weight: 700; color: var(--mute); }
.tm b { font-family: var(--display); font-weight: 900; font-size: 1.6rem; letter-spacing: -.02em; }
.tm p { margin: 0; font-size: .85rem; color: var(--mute); }
.tm-save b { color: var(--green); }
.tm-ev b { color: #2563EB; }
.routes-grid a small { color: var(--mute); font-size: .78rem; margin-left: .2rem; }

@media (max-width: 860px) {
  .tm-grid { grid-template-columns: 1fr; }
  .trip-more { margin-top: 1.2rem; }
}
@media (max-width: 520px) {
  .tf-cars { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tf-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tk-car, .tk-anim .tk-total .led { animation: none; } .tf-swap { transition: none; } }