/* ✨ Importación de paleta personalizada */
@import './colors.css';

/* 🚀 Tailwind base y utilidades */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 🎨 Tipografía y color base */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-primary);
  color: var(--color-text);
}

/* 🎯 Botón primario reutilizable */
.btn-primary {
  background-color: var(--color-secondary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-accent);
}

/* 🧱 Card: Sección Home */
.card-home {
  background-color: var(--color-seciones);
  color: var(--color-gray);
  padding: 1.5rem;
  border-radius: 1rem;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}


/* 💬 Control específico de párrafos */
.card-home p {
  color: var(--color-parrafo); /* Cambia esto según tu preferencia */
  font-size: 0.95rem;
  line-height: 1.6;
}
/* ✅ Párrafos con color personalizado */
.parrafo-infranux {
  color: var(--color-text);
  font-size: 1.125rem; /* text-lg */
  line-height: 1.6;
  font-weight: 400;
}


.card-home:hover {
  transform: scale(1.02);
}

/* 🛠️ Card: Sección Servicios */
.card-servicio {
  background-color: var(--color-secondary);
  color: #ffffff;
  padding: 1.5rem;
  border-radius: 1rem;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.card-servicio:hover {
  background-color: var(--color-accent);
  color: #000000;
}

/* 📦 Card: Sección Proyectos */
.card-proyecto {
  background-color: var(--color-footer);
  color: var(--color-menu);
  padding: 1.5rem;
  border-radius: 1rem;
  font-size: 0.95rem;
  box-shadow: 0 0 0 4px var(--color-secondary);
}

.card-proyecto h3 {
  color: var(--color-text);
  font-size: 1.25rem;
}

.card-proyecto p {
  font-size: 0.9rem;
  color: var(--color-menu);
}

/* 🔗 Navegación de menú */
.menu-link {
  color: var(--color-menu);
  font-weight: 500;
  transition: color 0.3s ease;
}

.menu-link:hover {
  color: var(--color-menu-hover);
}
.social-icon {
  width: 3rem;                 /* Tamaño base → w-8 */
  height: 3rem;                /* Altura base → h-8 */
  background-color: var(--color-footer); /* Fondo del ícono */
  border: 2px solid var(--color-secondary); /* Borde de color personalizado */
  border-radius: 9999px;       /* Borde redondo → círculo */
  padding: 0.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Sombra suave */
  transition: all 0.3s ease;
}

/* Hover sutil */
.social-icon:hover {
  transform: scale(1.1);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.menu-movil {
  background-color: var(--color-header);
  color: var(--color-menu);
  border: 1px solid var(--color-secondary);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  padding: 1rem;
}