/* Las tres vias para pedir ayuda: Laserito, virtual y presencial.
   En reposo las tres se ven iguales. El borde rojo, el numero lleno y el boton
   negro aparecen SOLO cuando el mouse se posa encima: son la senal de "esto
   responde al clic", no de "esta es la recomendada". El orden lo dice el numero.
   Todo esta apretado a proposito para que las tres entren sin bajar la pagina. */

.vias{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;align-items:stretch}

.via{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;transition:.24s}

.via:hover{transform:translateY(-3px);border-color:var(--red);
  box-shadow:0 0 0 1px var(--red),0 0 34px rgba(217,28,38,.28),0 20px 44px rgba(217,28,38,.16)}
.via:hover .num{color:#fff;background:var(--red);box-shadow:2px 2px 12px rgba(217,28,38,.42)}
.via:hover .viabtn{background:linear-gradient(135deg,#232428 0%,#0C0D0F 100%);
  border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(17,17,19,.30)}

/* numero en pestaña */
.via .num{position:absolute;left:0;top:0;z-index:2;font-family:"Days One";font-size:14.5px;font-style:italic;
  color:var(--red);background:var(--paper);padding:7px 15px 8px 13px;border-radius:20px 0 16px 0;
  box-shadow:2px 2px 10px rgba(17,17,19,.10);transition:.24s}

/* el dibujo: bajo y con "contain", asi no se recorta ni el casco ni el pin */
.via .dib{position:relative;aspect-ratio:16/8.2;background:linear-gradient(170deg,#FBFCFE 0%,#F3F5F9 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.via .dib img{width:100%;height:100%;object-fit:contain;display:block}
.via .sindib{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2)}

.via .txt{display:flex;flex-direction:column;gap:6px;padding:14px 18px 16px;flex:1}
.via .tag{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--red)}
.via h3{font-family:"Days One";font-size:17.5px;line-height:1.15}
.via .txt p{font-size:13px;color:var(--mut);line-height:1.45;flex:1;margin:0}

.via .pie{display:flex;align-items:center;gap:10px;font-size:12.8px;color:var(--mut);
  border-top:1px solid var(--line);padding-top:10px;margin-top:2px;line-height:1.35}
.via .pie .p{flex:none;width:22px;height:22px;color:var(--red);display:flex;align-items:center;justify-content:center}
.via .pie .p svg{width:19px;height:19px}

/* boton: en reposo con borde; se llena de negro con el hover de la tarjeta */
.viabtn{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:11px 14px;
  border:1px solid var(--line2);border-radius:13px;background:var(--paper);cursor:pointer;
  font-family:inherit;font-size:13.8px;font-weight:600;color:var(--ink);transition:.2s}
.viabtn .bi{flex:none;width:22px;height:22px;color:var(--red);display:flex;align-items:center;justify-content:center}
.viabtn .bi svg{width:20px;height:20px}
.viabtn .bt{flex:1;text-align:left}
.viabtn .bc{flex:none;width:18px;height:18px;color:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.viabtn .bc svg{width:16px;height:16px}
.via:hover .viabtn .bc{transform:translateX(4px)}

@media(max-width:1000px){.vias{grid-template-columns:1fr;max-width:440px;gap:18px}}