/* ===================================================================
   features.css — beneficios o características
   Variantes: rejilla_3 · rejilla_2 · lista_vertical · titulo_lateral

   Decisión estructural: los beneficios NO se numeran. Numerar implica
   secuencia, y aquí el orden no carga información — el visitante puede
   leer el tercero primero. La numeración se reserva para `pasos`, donde
   el orden sí es un dato. Lo que separa cada beneficio es una regla
   delgada, el mismo recurso del cajetín de un plano.
   =================================================================== */

.features__cabeza {
  max-width: 44rem;
  margin-bottom: var(--e-7);
}

.features__titulo {
  font-size: clamp(var(--paso-3), 3.4vw, var(--paso-4));
  font-stretch: 106%;
}

.features__intro {
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tenue);
  margin-top: var(--e-4);
}

.features__lista {
  display: grid;
  gap: var(--e-6) var(--e-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Ítem ──────────────────────────────────────────────────────── */

.feature {
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.feature__icono {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'wght' 200, 'opsz' 40;
  font-size: 34px;
  line-height: 1;
  display: block;
  color: var(--color-secundario);
  margin-bottom: var(--e-4);
}

.fondo--oscuro .feature__icono,
.fondo--acento .feature__icono { color: var(--color-acento); }

.feature__titulo {
  font-size: var(--paso-1);
  font-weight: var(--peso-fuerte);
  line-height: 1.25;
}

.feature__texto {
  color: var(--tenue);
  margin-top: var(--e-3);
}

.feature__enlace {
  display: inline-block;
  margin-top: var(--e-3);
  font-family: var(--tipo-titulo);
  font-size: var(--paso--1);
  font-weight: var(--peso-medio);
  color: var(--sobre-fondo);
  text-decoration: none;
  border-bottom: 1px solid var(--color-acento);
  padding-bottom: 2px;
  transition: color var(--transicion);
}
.feature__enlace:hover { color: var(--color-secundario); }
.fondo--oscuro .feature__enlace:hover { color: var(--color-acento); }

/* ── Variantes ─────────────────────────────────────────────────── */

.features--rejilla_3 .features__lista {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features--rejilla_2 .features__lista {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7);
}

/* Lista vertical: icono a un lado, texto al otro. Sirve cuando las
   descripciones son largas y una rejilla las dejaría desparejas. */
.features--lista_vertical .features__lista { grid-template-columns: 1fr; }

.features--lista_vertical .feature {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
  padding-block: var(--e-5);
}
.features--lista_vertical .feature__icono { margin-bottom: 0; }
.features--lista_vertical .feature:last-child {
  border-bottom: 1px solid var(--linea);
}

/* Título lateral: el encabezado se queda fijo mientras los beneficios
   pasan. Reemplaza a la variante `alternado`, que no tenía sentido
   aquí porque los ítems de este bloque no llevan imagen. */
.features--titulo_lateral .bloque__contenido {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: var(--e-8);
}
.features--titulo_lateral .features__cabeza {
  margin-bottom: 0;
  position: sticky;
  top: var(--e-7);
  align-self: start;
}
.features--titulo_lateral .features__lista {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Responsivo ────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .features--rejilla_3 .features__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features--titulo_lateral .bloque__contenido { grid-template-columns: 1fr; }
  .features--titulo_lateral .features__cabeza {
    position: static;
    margin-bottom: var(--e-6);
  }
}

@media (max-width: 640px) {
  .features--rejilla_3 .features__lista,
  .features--rejilla_2 .features__lista,
  .features--titulo_lateral .features__lista {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }
  .features--lista_vertical .feature {
    grid-template-columns: 1fr;
    gap: var(--e-3);
  }
}