/* ============================ */
/* SECCIÓN: Características Modernas */
/* ============================ */

.features {
  /* Espaciado superior e inferior (doble y cuádruple del spacing base) */
  padding: calc(var(--spacing)*2) 0 calc(var(--spacing)*4) 0;
  /* Fondo gris claro */
  background: #f9f9f9;
}

.features h2 {
  /* Título centrado */
  text-align: center;
  /* Tamaño grande del texto */
  font-size: 2rem;
  /* Margen inferior amplio para separación visual */
  margin-bottom: calc(var(--spacing)*2);
  /* Color de texto oscuro */
  color: var(--color-dark);
}

.features-grid {
  /* Sistema de cuadrícula con 3 columnas iguales */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Espaciado entre tarjetas */
  gap: calc(var(--spacing)*2);
}

.feature-card {
  /* Fondo blanco de cada tarjeta */
  background: var(--color-white);
  /* Bordes redondeados */
  border-radius: 12px;
  /* Espaciado interno amplio */
  padding: calc(var(--spacing)*2);
  /* Sombra sutil para dar efecto de elevación */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  /* Texto centrado dentro de la tarjeta */
  text-align: center;
  /* Transición suave para hover */
  transition: transform .3s ease, box-shadow .3s ease;
}

.feature-card:hover {
  /* Eleva ligeramente la tarjeta al pasar el mouse */
  transform: translateY(-5px);
  /* Aumenta la sombra para dar mayor sensación de profundidad */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.feature-icon {
  /* Contenedor de íconos centrado */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Dimensiones del círculo de ícono */
  width: 60px;
  height: 60px;
  /* Fondo gris claro */
  background: #e0e0e0;
  /* Color del ícono */
  color: var(--color-primary);
  /* Forma circular */
  border-radius: 50%;
  /* Tamaño del ícono */
  font-size: 1.5rem;
  /* Espacio inferior entre ícono y título */
  margin-bottom: var(--spacing);
}

.feature-title {
  /* Tamaño del texto del título */
  font-size: 1.1rem;
  /* Negrita */
  font-weight: bold;
  /* Margen inferior pequeño */
  margin-bottom: calc(var(--spacing)/2);
  /* Color azul principal */
  color: var(--color-primary);
}

.feature-desc {
  /* Tamaño del texto de descripción */
  font-size: 0.95rem;
  /* Color gris medio para lectura cómoda */
  color: #555;
  /* Espaciado entre líneas */
  line-height: 1.4;
}