/* Contacto (contacto.html): los datos de Luis Costa en una tarjeta negra con la trama del manual de marca, como la
   pantalla de ingreso, centrada en la página. */
main.contacto { max-width: 680px; text-align: center; }
.contacto-bajada { margin: 0 auto 28px; font-size: 17px; color: var(--tinta-2); max-width: 54ch; }

/* a la izquierda el logo sobre la trama de líneas finas del manual; a la derecha los datos, sobre negro liso */
.tarjeta { display: grid; grid-template-columns: 230px minmax(0, 1fr); color: #fff; background: var(--tinta); text-align: left;
           border-left: 4px solid; border-image: linear-gradient(180deg, #be08ef 0%, #ff6633 70%) 1; }
.tarjeta-marca { display: grid; place-items: center; padding: 30px 26px; border-right: 1px solid rgba(255, 255, 255, .14);
                 --hilo: rgba(190, 8, 239, .38);
                 background-image: linear-gradient(var(--hilo), var(--hilo)), linear-gradient(var(--hilo), var(--hilo)),
                                   linear-gradient(var(--hilo), var(--hilo)), linear-gradient(var(--hilo), var(--hilo));
                 background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
                 background-position: 14% 0, 86% 0, 0 18%, 0 82%;
                 background-repeat: no-repeat; }
.tarjeta-marca img { width: 160px; height: auto; display: block; }
.tarjeta-datos { padding: 26px 32px; align-self: center; }
.tarjeta h2 { font-family: var(--titulos); font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0 0 16px; }

/* el teléfono (WhatsApp) y el correo (Gmail), cada uno con su ícono */
.vias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vias a { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: #fff; text-decoration: none;
          overflow-wrap: anywhere; }
.vias .icono { flex: none; color: var(--gris-claro); transition: color .15s; }
.vias a:hover, .vias a:focus-visible { color: #fff; outline: none; text-decoration: underline; text-decoration-color: var(--naranja);
                                       text-underline-offset: 4px; }
.vias a:hover .icono, .vias a:focus-visible .icono { color: var(--naranja); }

@media (max-width: 640px) {
  .tarjeta { grid-template-columns: 1fr; }
  .tarjeta-marca { padding: 22px 20px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .tarjeta-marca img { width: 140px; }
  .tarjeta-datos { padding: 20px; }
}