/* =========================
   CONTACTO — Direct link cards
   ========================= */

#contacto {
   --contact-accent: 240, 168, 48; /* #F0A830 — gold */
}

/* Grid: 1 columna en mobile, 2 columnas en tablet+ */
.contact-grid {
   width: 100%;
   display: grid;
   gap: 1.1rem;
   grid-template-columns: 1fr;
}

@media (min-width: 768px) {
   .contact-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Card — enlace directo */
.contact-card {
   display: grid;
   grid-template-columns: 52px 1fr 32px;
   align-items: center;
   gap: 1rem;

   padding: 1.25rem 1.5rem;
   border-radius: 1.05rem;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(6, 8, 14, 0.25);
   backdrop-filter: blur(10px);

   text-decoration: none;
   color: inherit;
   cursor: pointer;

   transition:
      background 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
   .contact-card:hover {
      transform: translateY(-2px);
      border-color: rgba(var(--contact-accent), 0.4);
      background: rgba(var(--contact-accent), 0.06);
      box-shadow: 0 8px 32px rgba(var(--contact-accent), 0.1);
   }

   .contact-card:hover .contact-card__icon {
      color: rgba(var(--contact-accent), 1);
      filter: drop-shadow(0 0 8px rgba(var(--contact-accent), 0.3));
   }

   .contact-card:hover .contact-card__value {
      color: rgba(230, 241, 255, 0.95);
   }

   .contact-card:hover .contact-card__arrow {
      color: rgba(var(--contact-accent), 0.8);
      transform: translateX(3px);
   }
}

.contact-card:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(var(--contact-accent), 0.18);
   border-color: rgba(var(--contact-accent), 0.35);
}

/* Ícono */
.contact-card__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.4);
   transition: color 0.3s ease, filter 0.3s ease;
}

/* Texto */
.contact-card__body {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   min-width: 0;
}

.contact-card__label {
   font-size: 0.85rem;
   font-weight: 600;
   color: rgba(240, 255, 252, 0.45);
   letter-spacing: 0.02em;
   text-transform: uppercase;
}

.contact-card__value {
   font-size: 1.05rem;
   color: rgba(230, 241, 255, 0.65);
   letter-spacing: 0.01em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: color 0.3s ease;
}

/* Flecha */
.contact-card__arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.15);
   transition: color 0.3s ease, transform 0.3s ease;
}

/* Pre-selección: teléfono activo por defecto */
.contact-card--phone {
   border-color: rgba(240, 168, 48, 0.4) !important;
   border-left: 3px solid rgba(240, 168, 48, 0.5) !important;
   box-shadow: 0 4px 20px rgba(240, 168, 48, 0.08) !important;
   background: rgba(240, 168, 48, 0.03);
}
.contact-card--phone .contact-card__icon {
   background: transparent !important;
}
.contact-card--phone .contact-card__icon svg {
   color: #F0A830 !important;
}
.contact-card--phone .contact-card__arrow {
   color: rgba(240, 168, 48, 0.4) !important;
}

/* Transiciones suaves en teléfono */
.contact-card--phone,
.contact-card--phone .contact-card__icon,
.contact-card--phone .contact-card__icon svg,
.contact-card--phone .contact-card__arrow {
   transition: all 0.3s ease;
}

/* Cuando correo tiene hover, apagar teléfono — igualar a estado base de .contact-card */
.contact-grid:has(.contact-card--email:hover) .contact-card--phone {
   background: rgba(6, 8, 14, 0.25) !important;
   border-color: rgba(255, 255, 255, 0.08) !important;
   border-left: 3px solid rgba(255, 255, 255, 0.08) !important;
   box-shadow: none !important;
}
.contact-grid:has(.contact-card--email:hover) .contact-card--phone .contact-card__icon {
   background: transparent !important;
   color: rgba(255, 255, 255, 0.4) !important;
}
.contact-grid:has(.contact-card--email:hover) .contact-card--phone .contact-card__icon svg {
   color: rgba(255, 255, 255, 0.4) !important;
}
.contact-grid:has(.contact-card--email:hover) .contact-card--phone .contact-card__arrow {
   color: rgba(255, 255, 255, 0.15) !important;
}

/* Ambas cards: text-decoration none */
.contact-card--phone,
.contact-card--email {
   text-decoration: none;
}

/* Prevenir underline en el valor (correo, teléfono) */
.contact-card__value {
   text-decoration: none;
}