/* ============================================
   BOTONES
   Componente reutilizable en hero, tarjetas
   de proyecto y sección de contacto.
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(
    --color-bg
  ); /* texto oscuro sobre fondo ámbar, mejor contraste que blanco */
  border: none;
}

.btn--primary:hover {
  background-color: var(--color-accent-light);
  transform: translateY(
    -2px
  ); /* pequeño levantamiento al hover, sensación «táctil» */
}

.btn--sm {
  padding: 4px var(--space-sm);
  font-size: var(--text-xs);
}

.btn--secondary {
  background-color: transparent;
  color: var(
    --color-accent-dim
  ); /* acento apagado, para no competir con el botón principal */
  border: 1px solid var(--color-accent-dim); /* borde ámbar apagado, para no competir con el botón principal */
}

.btn--secondary:hover {
  border-color: var(--color-accent-light);
  color: var(
    --color-text
  ); /* texto casi blanco, para resaltar sobre el fondo oscuro */
}

/* ============================================
   TARJETA DE PROYECTO
   ============================================ */

.project-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden; /* recorta la imagen a las esquinas redondeadas */
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.project-card:hover {
  transform: translateY(
    -4px
  ); /* mismo lenguaje visual que el botón: se «levanta» al hover */
  box-shadow: var(--shadow-md);
}

.project-card__image {
  width: 100%;
  aspect-ratio: 16 / 9; /* mantiene proporción consistente aunque cambien las capturas */
  object-fit: cover; /* recorta sin deformar si la imagen no encaja exacto */
  background-color: var(
    --color-bg-elevated
  ); /* placeholder visible mientras carga o si falta la imagen */
}

.project-card__body {
  padding: var(--space-md);
  text-align: center; /* centra el contenido de la tarjeta, más agradable visualmente */
  align-items: center; /* centra los elementos hijos en el eje transversal */
}

.project-card__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.project-card__description {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

/* Etiquetas de tecnologías usadas en el proyecto */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs); /* reemplaza el margin individual de cada tag */
  margin-bottom: var(--space-md);
}

.project-card__tag {
  font-family: var(
    --font-mono
  ); /* monoespaciada: refuerza el aire «técnico» de una etiqueta de tecnología */
  font-size: var(--text-xs);
  color: var(--color-accent-light);
  background-color: rgba(255, 140, 66, 0.1); /* fondo ámbar muy tenue */
  padding: 4px var(--space-xs);
  border-radius: var(--radius-sm);
  cursor: default; /* no es un enlace, solo información */
}

.project-card__links {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.project-card__links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.project-card__links a:hover {
  color: var(--color-accent);
}

/* ============================================
   TECH BADGE
   Píldora individual por tecnología/habilidad.
   ============================================ */

.tech-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);

  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full); /* forma de píldora */
  background-color: var(--color-bg-secondary);

  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);

  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);

  cursor: default; /* no es un enlace, solo información */
}

.tech-badge:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.tech-badge__icon {
  width: 16px;
  height: 16px;
  fill: currentColor; /* hereda el color del texto del badge */
  flex-shrink: 0; /* evita que el icono se deforme si el nombre es largo */
}

/* ==============================================================
   ENLACES DE CONTACTO
   Enlace individual a red/contacto (correo, GitHub, LinkedIn...),
   con icono + texto.
   ============================================================== */

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);

  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);

  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-text);

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.contact-link:hover {
  border-color: var(--color-accent);
  background-color: rgba(
    255,
    140,
    66,
    0.05
  ); /* fondo ámbar muy tenue, mismo criterio que las etiquetas */
}

.contact-link__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0; /* evita que el icono se deforme si el texto es largo */
}

/* ==============================================================
   ICONO PARA ENLACES EXTERNOS
   Pequeño icono de flecha diagonal que indica que el enlace es
   saliente a otra web.
   ============================================================== */

.icon-external {
  vertical-align: -2px; /* alinea el icono con la línea base del texto */
}

/* ==============================================================
MEDIA QUERIES
   Ajustes de diseño para distintos tamaños de pantalla.
   ============================================================== */
@media (max-width: 550px) {
  .tech-badge,
  .project-card__tag {
    font-size: 0.7rem; /* un poco por debajo de --text-xs (0.75rem) */
    padding: 3px 6px; /* ligeramente más compacto que el padding de escritorio */
  }

  .tech-badge__icon {
    width: 14px; /* antes 16px, para mantener proporción con el texto más pequeño */
    height: 14px;
  }

  .btn {
    justify-content: center; /* centra el contenido del botón */
    font-size: var(
      --text-sm
    ); /* texto más pequeño para que quepa en el ancho del móvil */
  }
}